Projeto finalizado

syond/README.md

@@ -0,0 +1 @@
+O site está responsivo.

syond/app/js/app.js

@@ -0,0 +1,5 @@
+import toggleMenu from "./toggleMenu.js";
+import formAction from "./formAction.js";
+
+toggleMenu();
+formAction();

syond/app/js/formAction.js

@@ -0,0 +1,43 @@
+import api from "./services/api.js";
+import clearInputsContactForm from "./utils/clearInputsContactForm.js";
+import validationForm from "./middlewares/validationForm.js";
+
+const formAction = () => {
+    const contactForm = document.querySelector("#contact-form");
+
+    async function handleContactForm(event) {
+        event.preventDefault();
+
+        try {
+            const validationResponse = validationForm(contactForm);
+
+            if (validationResponse) {
+                const user = {
+                    name: contactForm.name.value,
+                    email: contactForm.email.value,
+                    message: contactForm.message.value
+                }
+
+                try {
+                    const apiResponse = await api(user);
+
+                    if (apiResponse.status === 200) {
+                        alert("Mensagem enviada com sucesso!");
+                    } else {
+                        alert("Erro ao enviar mensagem.");
+                    }
+
+                    clearInputsContactForm(contactForm);
+                } catch (error) {
+                    console.error(error);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    contactForm.addEventListener("submit", handleContactForm);
+}
+
+export default formAction;

syond/app/js/middlewares/validationForm.js

@@ -0,0 +1,29 @@
+const validationForm = (contactForm) => {
+    if (contactForm.name.value == '') {
+        contactForm.name.classList.add("validation-error");
+
+        return false, alert("Preencha o campo Nome.");
+    } else {
+        contactForm.name.classList.remove("validation-error");
+    }
+
+    if (contactForm.email.value == '') {
+        contactForm.email.classList.add("validation-error");
+
+        return false, alert("Preencha o campo Email.");
+    } else {
+        contactForm.email.classList.remove("validation-error");
+    }
+
+    if (contactForm.message.value == '') {
+        contactForm.message.classList.add("validation-error");
+
+        return false, alert("Preencha o campo Mensagem.");
+    } else {
+        contactForm.message.classList.remove("validation-error");
+    }
+
+    return true;
+}
+
+export default validationForm;

syond/app/js/services/api.js

@@ -0,0 +1,20 @@
+const api = async(data) => {
+
+    try {
+        const response = await fetch("http://mockbin.org/bin/25965c30-636e-4737-868a-ceab09f1d21a", {
+            "method": "POST",
+            "headers": {
+                "cookie": "foo=bar; bar=baz"
+            },
+            "body": data
+        });
+
+        return response;
+    } catch (err) {
+        alert("Erro interno. Tente novamente mais tarde.");
+        console.log(err);
+    }
+
+}
+
+export default api;

syond/app/js/toggleMenu.js

@@ -0,0 +1,37 @@
+const toggleMenu = () => {
+    const openMenuId = document.querySelector("#open-menu");
+    const closeMenuId = document.querySelector("#close-menu");
+    const menuContainerClass = document.querySelector(".menu-container");
+    const menuLinks = document.querySelectorAll(".menu-container li a");
+
+    (function onLoad() {
+        closeMenuId.classList.toggle("toggle-menu-display-none");
+    }());
+
+    openMenuId.addEventListener("click", () => {
+        menuContainerClass.classList.toggle("toggle-menu-container");
+        openMenuId.classList.toggle("toggle-menu-display-none");
+        closeMenuId.classList.toggle("toggle-menu-display-none");
+
+    });
+
+    closeMenuId.addEventListener("click", () => {
+        menuContainerClass.classList.toggle("toggle-menu-container");
+        openMenuId.classList.toggle("toggle-menu-display-none");
+        closeMenuId.classList.toggle("toggle-menu-display-none");
+    });
+
+    let closeMenuAfterClickOnLink = () => {
+        for (let x = 0; menuLinks.length > x; x++) {
+            menuLinks[x].addEventListener("click", () => {
+                menuContainerClass.classList.toggle("toggle-menu-container");
+                openMenuId.classList.toggle("toggle-menu-display-none");
+                closeMenuId.classList.toggle("toggle-menu-display-none");
+            });
+        }
+    }
+
+    closeMenuAfterClickOnLink();
+}
+
+export default toggleMenu;

syond/app/js/utils/clearInputsContactForm.js

@@ -0,0 +1,7 @@
+const clearInputsContactForm = (contactForm) => {
+    contactForm.name.value = '';
+    contactForm.email.value = '';
+    contactForm.message.value = '';
+}
+
+export default clearInputsContactForm;

syond/app/scss/_container.scss

@@ -0,0 +1,4 @@
+#container {
+    display: flex;
+    flex-direction: column;
+}

syond/app/scss/_footer.scss

@@ -0,0 +1,18 @@
+footer {
+    .wrap-footer {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 180px;
+        background-color: $senary;
+        font-size: $fontSizeHigh;
+    }
+}
+
+@media screen and (min-width: 1100px) {
+    footer {
+        .wrap-footer {
+            font-size: $fontSizeLow;
+        }
+    }
+}

syond/app/scss/_header.scss

@@ -0,0 +1,52 @@
+header {
+    background-image: url("../../assets/banner.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    height: 700px;
+    .background-mask {
+        width: 100%;
+        height: 100%;
+        background: rgba(black, 0.7);
+    }
+    .wrap-header {
+        max-width: 1680px;
+        height: 100%;
+        margin: 0 auto;
+        color: $tertiary;
+        .header-content {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 0 30px;
+            font-size: $fontSizeHigh;
+            h1 {
+                padding-top: 100px;
+                padding-bottom: 5px;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1100px) {
+    header {
+        height: 600px;
+    }
+    .wrap-header {
+        max-width: 1680px;
+        height: 100%;
+        margin: 0 auto;
+        color: $tertiary;
+        .header-content {
+            h1 {
+                font-size: $fontSizeHigh;
+                padding-top: 100px;
+                padding-bottom: 5px;
+            }
+            span {
+                font-size: $fontSizeLow;
+            }
+        }
+    }
+}

syond/app/scss/_main.scss

@@ -0,0 +1,2 @@
+@import "./section1";
+@import "./section2";

syond/app/scss/_navbar.scss

@@ -0,0 +1,110 @@
+nav {
+    background-color: $primary;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 1;
+    .wrap-nav {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 60px 20px 30px;
+        max-width: 1680px;
+        margin: 0 auto;
+        .logo {
+            height: 100%;
+            img {
+                height: 120px;
+            }
+        }
+        .menu-container {
+            position: absolute;
+            max-width: 80%;
+            right: 0;
+            top: -250%;
+            left: 0;
+            margin: auto;
+            padding: 20px;
+            transition: all .5s;
+            background-color: $secondary;
+            border-radius: 5px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            ul {
+                li {
+                    text-align: center;
+                    padding: 20px;
+                    a {
+                        color: $tertiary;
+                        font-weight: bold;
+                        transition: 0.3s;
+                        font-size: $fontSizeHigh;
+                    }
+                    a:hover {
+                        color: $primary;
+                    }
+                }
+            }
+        }
+        .toggle-menu-container {
+            top: 180px;
+        }
+        .toggle-menu-display-none {
+            display: none;
+        }
+        .menu-toggler {
+            span {
+                 :hover {
+                    cursor: pointer;
+                }
+                img {
+                    height: 40px;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1100px) {
+    nav {
+        .wrap-nav {
+            .logo {
+                height: 100%;
+                img {
+                    height: 80px;
+                }
+            }
+            .menu-container {
+                position: static;
+                margin: 0;
+                padding: 0;
+                background-color: transparent;
+                ul {
+                    li {
+                        display: inline;
+                         :hover {
+                            padding-bottom: 10px;
+                            border-bottom: solid 4px;
+                        }
+                        a {
+                            color: $secondary;
+                            font-size: $fontSizeLow;
+                        }
+                        a:hover {
+                            color: $tertiary;
+                        }
+                    }
+                    .active {
+                        padding-bottom: 10px;
+                        border-bottom: solid 4px;
+                    }
+                }
+            }
+            .menu-toggler {
+                display: none;
+            }
+        }
+    }
+}