Updated and modified js scripts and styles

index.html

@@ -10,7 +10,7 @@
     <nav>
       <a href="" id="first-link" class="selected">Home</a>
       <a href="./src/pages/games/games.html">Games</a>
-      <a href="../animes/animes.html">Animes</a>
+      <a href="../src/pages/animes/animes.html">Animes</a>
       <a href="#">Sobre</a>
       <span id="box"></span>
     </nav>

src/js/email.js → src/js/animesEmailSender.js

@@ -10,7 +10,7 @@ button.addEventListener("click", (e) => {
     emailjs
       .send(
         "service_l0s9372",
-        "template_n3aufxj",
+        "template_1imfn8o",
         { name: name.value, email: email.value },
         "Xts0UwNohpeU1f3pZ"
       )

src/js/gamesEmailSender.js

@@ -0,0 +1,37 @@
+const button = document.querySelector('button[value="SEND"]');
+
+button.addEventListener("click", (e) => {
+  e.preventDefault();
+
+  const name = document.getElementById("name");
+  const email = document.getElementById("email");
+
+  if (name.value && email.value) {
+    emailjs
+      .send(
+        "service_l0s9372",
+        "template_n3aufxj",
+        { name: name.value, email: email.value },
+        "Xts0UwNohpeU1f3pZ"
+      )
+      .then(
+        function () {
+          console.log("SUCCESS!");
+        },
+        function (error) {
+          console.log("FAILED...", error);
+        }
+      );
+    name.value = "";
+    email.value = "";
+
+    const form = document.querySelector("form");
+    if (document.querySelector(".thanks")) {
+      document.querySelector(".thanks").remove();
+    }
+    form.insertAdjacentHTML(
+      "afterend",
+      '<p class="thanks">Thank you for subscribing to our newsletter!</p>'
+    );
+  }
+});

src/pages/animes/animes.html

@@ -79,7 +79,7 @@ <h4>Receive news and information in the palm of your hand.</h4>
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
     ></script>
-    <script src="../../js/email.js"></script>
+    <script src="../../js/animesEmailSender.js"></script>
     <script src="../../../navbar.js"></script>
   </body>
 </html>

src/pages/games/games.css

@@ -421,7 +421,9 @@ section.grid .col-2 {
 }
 .newsletter .bottom .form-container .thanks {
   position: absolute;
-  bottom: 40px;
+  bottom: 20px;
+  font-size: 18px;
+  font-weight: 500;
 }
 .newsletter .bottom .form-container .label {
   font-size: 18px;

src/pages/games/games.html

@@ -303,7 +303,7 @@ <h4>Receive news and information in the palm of your hand.</h4>
       type="text/javascript"
       src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
     ></script>
-    <script src="../../js/email.js"></script>
+    <script src="../../js/gamesEmailSender.js"></script>
     <script src="../../../navbar.js"></script>
   </body>
 </html>

src/pages/games/games.scss

@@ -499,7 +499,9 @@ section.grid {
 
       .thanks {
         position: absolute;
-        bottom: 40px;
+        bottom: 20px;
+        font-size: 18px;
+        font-weight: 500;
       }
 
       .label {