Form Verification

07sumit1002 · Oct 7, 2024 · 9538de8 · 9538de8
1 parent 4e614bc
commit 9538de8
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 71 deletions.
diff --git a/script.js b/script.js
@@ -1,13 +1,27 @@
 document
   .getElementById("view-all-button")
-  .addEventListener("click", function () {
+  .addEventListener("click", ()=>{
     const testimonialsContainer = document.getElementById(
       "testimonials-container"
-    );
-    document.getElementById('bookNow').addEventListener('click', function() {
+  )});
+
+    document.getElementById('bookNow').addEventListener('click', function () {
+      const name=document.getElementById('fullName').value.trim();
+      const phone=document.getElementById('phone').value.trim();
+      const email=document.getElementById('email').value.trim();
+      const city=document.getElementById('city').value.trim();
+      const vehicle=document.getElementById('vehicle').value.trim();
+      const pickupDate=document.getElementById('pickupDate').value.trim();
+      const dropoffDate=document.getElementById('dropoffDate').value.trim();
+
+      if(!name || !phone || !email || !city || !vehicle || !pickupDate || !dropoffDate)
+      {
+        alert('Please fill all fields');
+      }
+      else
       alert('Booking confirmed!');
-  });
-  
+    });
+
     const newTestimonials = [
       {
         text: "I've used many cab services before, but this one is by far the best. Highly recommended!",
@@ -88,30 +102,30 @@ document
       testimonialsContainer.appendChild(testimonialDiv);
     });
 
- // Get the button
- let mybutton = document.getElementById("topButton");
-
- // When the user scrolls down 20px from the top of the document, show the button
- window.onscroll = function() {scrollFunction()};
- 
- function scrollFunction() {
-     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
-         mybutton.style.display = "block";
-     } else {
-         mybutton.style.display = "none";
-     }
- }
- 
- // When the user clicks on the button, scroll to the top of the document
- mybutton.addEventListener("click", function() {
-     document.body.scrollTop = 0;
-     document.documentElement.scrollTop = 0;
- });
- // When the user scrolls down 20px from the top of the document, show the button
-window.onscroll = function() {scrollFunction()};
-
- 
- 
+    // Get the button
+    let mybutton = document.getElementById("topButton");
+
+    // When the user scrolls down 20px from the top of the document, show the button
+    window.onscroll = function () { scrollFunction() };
+
+    function scrollFunction() {
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+        mybutton.style.display = "block";
+      } else {
+        mybutton.style.display = "none";
+      }
+    }
+
+    // When the user clicks on the button, scroll to the top of the document
+    mybutton.addEventListener("click", function () {
+      document.body.scrollTop = 0;
+      document.documentElement.scrollTop = 0;
+    });
+    // When the user scrolls down 20px from the top of the document, show the button
+    window.onscroll = function () { scrollFunction() };
+
+
+
     // Add new random testimonials
     newTestimonials.slice(0, 3).forEach((testimonial) => {
       const testimonialDiv = document.createElement("div");
@@ -134,44 +148,43 @@ window.onscroll = function() {scrollFunction()};
 
       testimonialsContainer.appendChild(testimonialDiv);
     });
-  });
-  const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID
-  const body = document.body;
-  const header = document.querySelector('header');
-  const footer = document.querySelector('footer');
-
-  // Function to enable dark mode
-  function enableDarkMode() {
-    themeSwitch.classList.add('dark-theme'); // Update the switch appearance
-      body.classList.add('dark-mode');
-      header.classList.add('dark-mode');
-      footer.classList.add('dark-mode');
-  }
-
-  // Function to disable dark mode
-  function disableDarkMode() {
-    themeSwitch.classList.remove('dark-theme'); // Update the switch appearance
-      body.classList.remove('dark-mode');
-      header.classList.remove('dark-mode');
-      footer.classList.remove('dark-mode');
-  }
-
-  // Event listener for dark mode toggle button
-  themeSwitch.addEventListener('click', () => {
-      if (body.classList.contains('dark-mode')) {
-        localStorage.removeItem('dark-mode'); // Remove from local storage
-          disableDarkMode(); // Switch to light mode
-      } else {
-          enableDarkMode(); // Switch to dark mode
-          localStorage.setItem('dark-mode', 'enabled'); // Save in local storage
-      }
-  });
-
-  // Optional: Check the initial mode on page load
-  if (localStorage.getItem('dark-mode') === 'enabled') {
-      enableDarkMode();
+const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID
+const body = document.body;
+const header = document.querySelector('header');
+const footer = document.querySelector('footer');
+
+// Function to enable dark mode
+function enableDarkMode() {
+  themeSwitch.classList.add('dark-theme'); // Update the switch appearance
+  body.classList.add('dark-mode');
+  header.classList.add('dark-mode');
+  footer.classList.add('dark-mode');
+}
+
+// Function to disable dark mode
+function disableDarkMode() {
+  themeSwitch.classList.remove('dark-theme'); // Update the switch appearance
+  body.classList.remove('dark-mode');
+  header.classList.remove('dark-mode');
+  footer.classList.remove('dark-mode');
+}
+
+// Event listener for dark mode toggle button
+themeSwitch.addEventListener('click', () => {
+  if (body.classList.contains('dark-mode')) {
+    localStorage.removeItem('dark-mode'); // Remove from local storage
+    disableDarkMode(); // Switch to light mode
+  } else {
+    enableDarkMode(); // Switch to dark mode
+    localStorage.setItem('dark-mode', 'enabled'); // Save in local storage
   }
-
-  document.addEventListener('DOMContentLoaded', () => {
-      console.log("Welcome to ML Fusion Lab!");
-  });
+});
+
+// Optional: Check the initial mode on page load
+if (localStorage.getItem('dark-mode') === 'enabled') {
+  enableDarkMode();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log("Welcome to ML Fusion Lab!");
+});
diff --git a/style.css b/style.css
@@ -1341,7 +1341,7 @@ footer p {
 .booking-form .form-group select {
     width: 100%;
     padding: 10px;
-    border: 1px solid #ccc;
+    border: 1px solid #333;
     border-radius: 4px;
     font-size: 16px;
     background-color: var(--input-bg-color);
@@ -1370,5 +1370,5 @@ body.dark-mode .booking-form .form-group select {
 
 body.dark-mode .booking-form .form-group input::placeholder,
 body.dark-mode .booking-form .form-group select::placeholder {
-    color: #aaa;
+    color: #333;
 }