added more functions

fylo-landing-page/index.html

@@ -33,7 +33,7 @@ <h1>All your files in one secure location, accessible anywhere.</h1>
         <p>Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends family, and co-workers.</p>
         <form>
           <input type="email" id="email1" name="email1" placeholder="Enter your email...">
-          <p class="erro-text"></p>
+          <span class="erro-text"></span> 
           <button>Get Started</button>
         </form>
       </div>
@@ -98,12 +98,12 @@ <h1>Get early access today</h1>
 
       <form>
         <input type="email" id="email2" name="email2" placeholder="email@example.com">
-        <p class="erro-text"></p>
+        <span class="erro-text"></span>
         <button>Get Started For Free</button>
       </form>
     </section>
 </main>
-
+ 
   <footer>
     <img src="./images/footer-logo.svg" alt=" logo " class="footer-logo">
 

fylo-landing-page/main.js

@@ -1,56 +1,51 @@
 const header = document.querySelector('header');
+const getForms = document.querySelectorAll('form');
+const textErrors = document.querySelectorAll('.erro-text');
 const btns = document.querySelectorAll('button');
-const getForm = document.querySelectorAll('form');
-const inputTag = document.querySelector('input[type="email"]');
-const textError = document.querySelectorAll('.erro-text');
-
 
 window.addEventListener('scroll', function () {
     if (window.scrollY > 0) {
-        header.style.backgroundColor = " $header-bg";
-        header.style.backdropFilter = "blur(50px)"; 
+        header.style.backgroundColor = "$header-bg";
+        header.style.backdropFilter = "blur(50px)";
         header.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
         header.style.transition = "all 0.5s ease";
         header.style.zIndex = "1000";
-    }
-    else {
+    } else {
         header.style.backgroundColor = "transparent";
         header.style.backdropFilter = "blur(0px)";
         header.style.boxShadow = "none";
     }
 });
 
-getForm.forEach((form) => {
+getForms.forEach((form) => {
+    const inputTag = form.querySelector('input[type="email"]');
+    const textBox = form.querySelector('input');
+    const textError = form.querySelector('.erro-text');
+
     form.addEventListener('submit', function (event) {
-        event.preventDefault();
         if (inputTag.value === '') {
-            textError.forEach((text) => {
-                text.textContent = "Please provide a valid email";  
-                text.style.textAlign = "left"; 
-                text.style.color = "red";
-            });
-        }
-        else if (inputTag.value !== '') {
-            textError.forEach((text) => {
-                text.textContent = "Thank you for subscribing";
-                text.style.textAlign = "left";
-                text.style.color = "green";
-            });
-        }
-        else {
-            textError.forEach((text) => {
-                text.style.color = "transparent";
-            });
+            textError.textContent = "Please provide a valid email";
+            textError.style.textAlign = "left";
+            textError.style.color = "#E4859F";
+            textBox.style.border = "2px solid #E4859F";
+            event.preventDefault();
+        } else if (inputTag.value !== '') {
+            textError.textContent = "Plase check your email";
+            textError.style.textAlign = "left";
+            textError.style.color = "pink";
+            textBox.style.border = "2px solid pink";
+        } else {
+            textError.style.color = "transparent";
         }
     });
 });
 
-// btns.forEach((btn) => {
-//     btn.addEventListener('click', function (event) {
-//         event.preventDefault();
+btns.forEach((btn) => {
+    btn.addEventListener('click', function (event) {
+        ;
 
 
-//     });
-// });
+    });
+});