update

DylanSerkovich · Dec 19, 2023 · 3690bab · 3690bab
1 parent dc634ad
commit 3690bab
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 54 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/index.html b/index.html
@@ -162,7 +162,7 @@ <h3 class="card__title-back" data-section="project" data-value="reason">Creacion
                 <div class="form__contact">
                     <h2 class="title skill__title">Contactame</h2>
                     <div class="col-md-12">
-                        <form id="form" class="formu" method="post" action="https://formspree.io/f/mbjwoyyp">
+                        <form id="form" class="formu" method="post"><!--action="https://formspree.io/f/mbjwoyyp"-->
                             <ul class="contact-form">
                                 <li>
                                     <div class="col-md-6 margin__input">

diff --git a/js/firebase.js b/js/firebase.js
@@ -1,7 +1,7 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js";
 
-import { getFirestore, collection, getDocs} from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"
+import { getFirestore, collection, getDocs, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js"
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
@@ -22,6 +22,22 @@ const app = initializeApp(firebaseConfig);
 
 const db = getFirestore();
 
-export const getSkills = () => getDocs(collection(db,'skills'));
+export const getSkills = () => getDocs(collection(db, 'skills'));
 
-export const getProjects = () => getDocs(collection(db,'projects'));
+export const getProjects = () => getDocs(collection(db, 'projects'));
+
+export const sendMessage = async (messageData) => {
+  const message = {
+    ...messageData,
+    createdAt: serverTimestamp(),
+  };
+
+  try {
+    await addDoc(collection(db, 'messages'), message);
+    return { success: true, message: "Mensaje enviado con éxito" };
+  } catch (error) {
+    console.error("Error al enviar el mensaje:", error);
+    return { success: false, message: error.message };
+  }
+
+}
diff --git a/js/scripts.js b/js/scripts.js
@@ -1,4 +1,4 @@
-import { getSkills, getProjects } from './firebase.js'
+import { getSkills, getProjects, sendMessage } from './firebase.js'
 
 const nav = document.querySelector('.nav'); //nav
 const menu_btn = document.querySelector('.nav__menu'); //boton
@@ -205,26 +205,36 @@ $form.addEventListener('submit', handleSubmit);
 async function handleSubmit(event) {
     event.preventDefault();
     const form = new FormData(this);
-    const response = await fetch(this.action, {
-        method: this.method,
-        body: form,
-        headers: {
-            'Accept': 'application/json'
-        }
-    })
-    if (response.ok) {
-        this.reset();
-        Swal.fire({
-            toast: true,
-            icon: 'success',
-            iconColor: '#F24236',
-            title: '<center>Mensaje enviado</center><center>¡Le contestaremos pronto!</center>',
-            animation: false,
-            background: '#F3CA40',
-            position: 'top-right',
-            color: '#23272E',
-            showConfirmButton: false,
-            timer: 2500,
-        })
-    }
+    const messageData = {
+        name: form.get('name'),
+        email: form.get('email'),
+        phone: form.get('phone'),
+        company: form.get('company'),
+        subject: form.get('subject'),
+        message: form.get('message')
+    };
+
+    sendMessage(messageData)
+        .then((response) => {
+            if (response.success) {
+                this.reset();
+                Swal.fire({
+                    toast: true,
+                    icon: 'success',
+                    title: '<center>Mensaje enviado</center><center>¡Le contestaremos pronto!</center>',
+                    position: "top-end",
+                    showConfirmButton: false,
+                    timer: 3000,
+                    timerProgressBar: true,
+                    didOpen: (toast) => {
+                        toast.onmouseenter = Swal.stopTimer;
+                        toast.onmouseleave = Swal.resumeTimer;
+                    }
+                })
+            } else {
+                console.error(response.message);
+            }
+        }).catch((error) => {
+            console.error("Error al enviar el mensaje:", error);
+        });
 }
diff --git a/scss/sections/_form-contac.scss b/scss/sections/_form-contac.scss
@@ -1,4 +1,4 @@
-.form__contact{
+.form__contact {
     margin-top: 50px;
     max-width: 50%;
     min-width: 80%;
@@ -10,12 +10,12 @@
     list-style-type: none;
 }
 
-.margin__input{
+.margin__input {
     margin-bottom: 2.5em;
 }
 
 .form__dato,
-.form__msg{
+.form__msg {
     width: 100%;
     margin: 0;
     padding-bottom: 1.4em;
@@ -33,7 +33,7 @@
     transition: ease-in-out 0.25s;
 }
 
-.form__msg{
+.form__msg {
     min-height: 50px;
     max-height: 500px;
     white-space: pre-wrap;
@@ -62,6 +62,7 @@
 .form__btn:focus {
     outline: none;
     resize: none;
+    color: --color-secundario;
     border-bottom: 3px solid $cinnabar;
 }
 
@@ -81,12 +82,12 @@
 }
 
 
-.btn__icon{
+.btn__icon {
     vertical-align: middle;
     transition: ease-in-out 0.25s;
     font-size: 18px;
     margin-left: 5px;
-    color:var(--color-secundario);
+    color: var(--color-secundario);
 }
 
 .form__btn:hover {
@@ -95,51 +96,57 @@
 }
 
 .form__btn:hover .btn__icon {
-   margin-left: 15px;
-   color: $raisin-black;
-    
+    margin-left: 15px;
+    color: $raisin-black;
+
 }
 
 .form__dato:-webkit-autofill,
-.form__dato:-webkit-autofill:hover, 
+.form__dato:-webkit-autofill:hover,
 .form__dato:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-primario) inset;-webkit-text-fill-color: var(--color-secundario);
+    -webkit-box-shadow: 0 0 0px 1000px var(--color-primario) inset;
+    -webkit-text-fill-color: var(--color-secundario);
 }
 
 .text-left {
     // text-align: left;
     margin-bottom: 20px;
     display: inline-block;
-  }
-  .col-md-6,
-  .col-md-12{
+}
+
+.col-md-6,
+.col-md-12 {
     // margin-left: auto;
     // margin-right: auto;
     position: relative;
     min-height: 1px;
     padding-right: 15px;
     padding-left: 15px;
-  }
+}
+
+@media (min-width: 992px) {
 
-  @media (min-width: 992px) {
-
-    .form__contact{
+    .form__contact {
         height: 550px;
         // margin-bottom: 20px;
     }
-    .col-md-6,.col-md-12{
-      float: left;
+
+    .col-md-6,
+    .col-md-12 {
+        float: left;
     }
+
     .col-md-12 {
-      width: 100%;
+        width: 100%;
     }
+
     .col-md-6 {
         width: 50%;
-      }
+    }
 }
 
-@media(max-width: 993px){
-    .form__contact{
+@media(max-width: 993px) {
+    .form__contact {
         margin-bottom: 120px;
     }
-}
+}