chore: toast notification after form submission

iiio2 · iiio2 · commit 5875076dff00 · 2024-03-18T15:14:10.000+06:00
diff --git a/index.html b/index.html
@@ -13,7 +13,12 @@
       href="./fontawesome-free-5.12.1-web/css/all.min.css"
     />
     <!-- css -->
-    <link rel="stylesheet" href="./css//lightbox.min.css" />
+    <link rel="stylesheet" href="./css/lightbox.min.css" />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
+    />
     <link rel="stylesheet" href="./css/styles.css" />
   </head>
   <body>
@@ -439,6 +444,10 @@ <h3>want lastest tour info & updates</h3>
     <!-- js -->
     <script type="module" src="./js/jquery.min.js"></script>
     <script type="module" src="./js/lightbox.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/toastify-js"
+    ></script>
     <script type="module" src="./js/app.js"></script>
   </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -1,29 +1,47 @@
 // ********** navbar toggle ************
-const navBtn = document.getElementById("nav-toggle");
-const links = document.getElementById("nav-links");
-navBtn.addEventListener("click", () => {
-  links.classList.toggle("show-links");
-});
+
+const navBtn = document.getElementById('nav-toggle')
+const links = document.getElementById('nav-links')
+navBtn.addEventListener('click', () => {
+  links.classList.toggle('show-links')
+})
 
 // ********** set date ************
-const date = (document.getElementById("date").innerHTML =
-  new Date().getFullYear());
+const date = (document.getElementById('date').innerHTML =
+  new Date().getFullYear())
 
 // ********** smooth scroll ************
-const scrollLinks = document.querySelectorAll(".scroll-link");
+const scrollLinks = document.querySelectorAll('.scroll-link')
 scrollLinks.forEach((link) => {
-  link.addEventListener("click", (e) => {
-    e.preventDefault();
-    links.classList.remove("show-links");
+  link.addEventListener('click', (e) => {
+    e.preventDefault()
+    links.classList.remove('show-links')
 
-    const id = e.target.getAttribute("href").slice(1);
-    const element = document.getElementById(id);
-    let position = element.offsetTop - 62;
+    const id = e.target.getAttribute('href').slice(1)
+    const element = document.getElementById(id)
+    let position = element.offsetTop - 62
 
     window.scrollTo({
       left: 0,
       top: position,
-      behavior: "smooth",
-    });
-  });
-});
+      behavior: 'smooth',
+    })
+  })
+})
+
+// ********** toast notification ************
+const form = document.querySelector('.contact-form')
+const email = document.querySelector('input[name="email"]')
+
+form.addEventListener('submit', function (e) {
+  e.preventDefault()
+  if (email.value.trim()) {
+    Toastify({
+      text: 'Your email is successfully submitted',
+      style: {
+        background: 'rgba(46, 204, 113, 1)',
+      },
+    }).showToast()
+    email.value = ''
+  }
+})
