Skip to content

Commit

Permalink
Merge pull request #272 from prishsha/main
Browse files Browse the repository at this point in the history 
Adding a Pop-up notification if any field is Empty
  • Loading branch information
@07sumit1002
07sumit1002 authored Nov 7, 2024
2 parents 59b5c83 + 8af518d commit 5d264fb
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 77 deletions.
14 changes: 7 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,19 +771,19 @@ <h2>Cab Rental Service</h2>

<div class="booking-form">
<div class="form-group">
<label for="fullName">Full Name</label>
<label for="fullName">Full Name*</label>
<input type="text" id="fullName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<label for="phone">Phone*</label>
<input type="tel" id="phone" placeholder="Telephone">
</div>
<div class="form-group">
<label for="email">Email</label>
<label for="email">Email*</label>
<input type="email" id="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="city">City</label>
<label for="city">City*</label>
<select id="city">
<option disabled selected>Select City</option>
<option value="Delhi-NCR">Delhi-NCR</option>
Expand All @@ -794,7 +794,7 @@ <h2>Cab Rental Service</h2>
</select>
</div>
<div class="form-group">
<label for="vehicle">Vehicle</label>
<label for="vehicle">Vehicle*</label>
<select id="vehicle">
<option disabled selected>Select Vehicle</option>
<option value="Civic">Honda Civic</option>
Expand All @@ -805,11 +805,11 @@ <h2>Cab Rental Service</h2>
</select>
</div>
<div class="form-group">
<label for="pickupDate">Pickup Date</label>
<label for="pickupDate">Pickup Date*</label>
<input type="date" id="pickupDate">
</div>
<div class="form-group">
<label for="dropoffDate">Drop-off Date</label>
<label for="dropoffDate">Drop-off Date*</label>
<input type="date" id="dropoffDate">
</div>
</div>
Expand Down
151 changes: 83 additions & 68 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
document
.getElementById("view-all-button")
.addEventListener("click", function () {
.addEventListener("click", ()=>{
const testimonialsContainer = document.getElementById(
"testimonials-container"
);
document.getElementById('bookNow').addEventListener('click', function() {
alert('Booking confirmed!');
});

);

const newTestimonials = [
{
text: "I've used many cab services before, but this one is by far the best. Highly recommended!",
Expand Down Expand Up @@ -88,30 +85,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");
Expand All @@ -134,44 +131,62 @@ 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');
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');

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');
}

// 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();
else
alert('Booking confirmed!');
});

// 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!");
});
4 changes: 2 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1359,7 +1359,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);
Expand Down Expand Up @@ -1388,5 +1388,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;
}

0 comments on commit 5d264fb

Please sign in to comment.