Fixed the form validation logic

Rakesh9100 · Dec 15, 2024 · 04d85c5 · 04d85c5
1 parent 4da4597
commit 04d85c5
Show file tree

Hide file tree

Showing 34 changed files with 499 additions and 484 deletions.
diff --git a/404.html b/404.html
@@ -2,17 +2,16 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="./style.css">
     <link rel="stylesheet" type="text/css" href="./assets/css_files/cursor.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/scrollreveal"></script>
-    <script src="./assets/js_files/hamburgerMenu.js"></script>
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Error 404</title>
 </head>
 
@@ -151,7 +150,7 @@ <h1 class="heading">Keep In Touch</h1>
 
     <script src="./script.js"></script>
     <script src="./assets/js_files/cursor.js"></script>
-    <script src="./assets/js_files/dark-mode.js"></script>
+    <script src="./assets/js_files/commonscript.js"></script>
 </body>
 
 </html>
diff --git a/assets/css_files/commoncss.css → assets/css_files/commonstyle.css b/assets/css_files/commoncss.css → assets/css_files/commonstyle.css
diff --git a/assets/css_files/progressbar.css b/assets/css_files/progressbar.css
@@ -13,4 +13,4 @@
     background: linear-gradient(90deg, rgba(59, 3, 52, 1) 0%, rgba(219, 0, 255, 1) 50%, rgba(59, 3, 52, 1) 100%);
     box-shadow: 0 0 10px rgba(219, 0, 255, 0.7), 0 0 20px rgba(219, 0, 255, 0.7), 0 0 30px rgba(219, 0, 255, 0.7);
     transition: width 0.09s ease-in-out;
-}
+}
diff --git a/assets/html_files/about.html b/assets/html_files/about.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
     <link rel="stylesheet" type="text/css" href="../css_files/about.css">
     <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
     <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
     <script src="../../script.js"></script>
-    <script src="../js_files/hamburgerMenu.js"></script>
     <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
     <title>Beautiify | About</title>
 </head>
 
@@ -96,9 +95,9 @@
     <br>
     <section>
         <div class="image">
-            <img src="../images/about.png" />
+            <img src="../images/about.png">
             <div class="content">
-                <br />
+                <br>
                 <h1 align="center">ABOUT US</h1>
                 <br>
                 <h4><u>Introduction</u>: Welcome to Beautiify! Your source for beautifully crafted web components and
@@ -150,13 +149,13 @@ <h1 class="heading">Quick Links</h1>
             </div>
             <div class="send-message">
                 <h1 class="heading">Keep In Touch</h1>
-                <form action="#">
+                <form id="contact-form" name="Beautiify Contact" autocomplete="off" netlify>
                     <div class="form-group group1">
-                        <input type="text" id="name" name="name" placeholder="Enter your name">
-                        <input type="email" id="email" name="email" placeholder="Enter your email">
+                        <input type="text" id="name" name="name" placeholder="Enter your name" autocomplete="name" required oninput="validateName('name')">
+                        <input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="email" required oninput="validateEmail('email')">
                     </div>
                     <div class="form-group group1">
-                        <textarea id="message" name="message" placeholder="Leave your message"></textarea>
+                        <textarea id="message" name="message" placeholder="Leave your message" required></textarea>
                         <button type="submit">SEND</button>
                     </div>
                 </form>
@@ -185,8 +184,7 @@ <h1 class="heading">Keep In Touch</h1>
     </div>
 
     <script src="../js_files/cursor.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/accordions.html b/assets/html_files/accordions.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Accordions</title>
 </head>
 
@@ -212,8 +211,7 @@ <h1>Tilted Accordion</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Backgrounds</title>
 </head>
 
@@ -680,8 +679,7 @@ <h1>Zoom And Fade Background</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Breadcrumbs</title>
 </head>
 
@@ -238,8 +237,7 @@ <h1>Tilted Breadcrumb</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Buttons</title>
 </head>
 
@@ -745,8 +744,7 @@ <h1>Wiggle Button</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Cards</title>
 </head>
 
@@ -525,8 +524,7 @@ <h1>User Attention Card</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html
@@ -2,19 +2,18 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="../images/favicon.png" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="../../style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />
-    <link rel="stylesheet" type="text/css" href="../css_files/commoncss.css">
-    <link rel="stylesheet" href="../css_files/search.css">
-    <link rel="stylesheet" href="../css_files/cursor.css">
-    <link rel="stylesheet" href="../css_files/progressbar.css">
-    <script src="../js_files/hamburgerMenu.js"></script>
-    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../images/favicon.png">
+    <link rel="stylesheet" type="text/css" href="../../style.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/cursor.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/search.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/commonstyle.css">
+    <link rel="stylesheet" type="text/css" href="../css_files/progressbar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
+    <script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
     <title>Beautiify | Carousels</title>
 </head>
 
@@ -355,8 +354,7 @@ <h1>Touch Slider Carousel</h1>
     <script src="../../script.js"></script>
     <script src="../js_files/cursor.js"></script>
     <script src="../js_files/search.js"></script>
-    <script src="../js_files/dark-mode.js"></script>
-    <script src="../js_files/progressBar.js"></script>
+    <script src="../js_files/commonscript.js"></script>
 </body>
 
-</html>
+</html>