Creating a complete cab booking form in JavaScript requires HTML and CSS for the form structure and styling, in addition to the JavaScript for functionality. Below is a simplified example of a cab booking form using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Cab Booking Form</title>
<style>
/* Add your CSS styling here */
.form-container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* Add more CSS as needed */
</style>
</head>
<body>
<div class="form-container">
<h2>Book a Cab</h2>
<form id="cabBookingForm">
<div>
<label for="pickupLocation">Pickup Location:</label>
<input type="text" id="pickupLocation" name="pickupLocation" required>
</div>
<div>
<label for="dropoffLocation">Dropoff Location:</label>
<input type="text" id="dropoffLocation" name="dropoffLocation" required>
</div>
<div>
<label for="passengerCount">Number of Passengers:</label>
<input type="number" id="passengerCount" name="passengerCount" required>
</div>
<div>
<label for="date">Date:</label>
<input type="date" id="date" name="date" required>
</div>
<div>
<label for="time">Time:</label>
<input type="time" id="time" name="time" required>
</div>
<button type="submit">Book Now</button>
</form>
</div>
<script>
// JavaScript to handle form submission
document.getElementById("cabBookingForm").addEventListener("submit", function (event) {
event.preventDefault();
// Retrieve form data
const pickupLocation = document.getElementById("pickupLocation").value;
const dropoffLocation = document.getElementById("dropoffLocation").value;
const passengerCount = document.getElementById("passengerCount").value;
const date = document.getElementById("date").value;
const time = document.getElementById("time").value;
// Perform actions with the form data (e.g., send it to a server, display a confirmation, etc.)
// You can add your own logic here
// Reset the form
this.reset();
});
</script>
</body>
</html>This example includes a basic HTML structure for the form, some CSS for styling, and JavaScript to handle form submission. You can customize the form and add more functionality to meet your specific requirements.
Creating a responsive coffee shop website design using HTML is a multi-step process. Below is a simplified example to get you started. Keep in mind that this is a basic structure, and you can expand upon it to make a complete and visually appealing coffee shop website.
<!DOCTYPE html>
<html>
<head>
<title>Coffee Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Add your CSS styling here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #8B4513;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #A0522D;
text-align: center;
padding: 10px;
}
nav a {
text-decoration: none;
color: #fff;
margin: 10px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.menu-item {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 10px;
background-color: #fff;
display: inline-block;
width: 30%;
}
/* Add more CSS as needed for responsiveness */
@media (max-width: 768px) {
.menu-item {
width: 45%;
}
}
@media (max-width: 480px) {
.menu-item {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Welcome to Coffee Haven</h1>
<p>Your Coffee, Your Way</p>
</header>
<nav>
<a href="#menu">Menu</a>
<a href="#about">About Us</a>
<a href="#contact">Contact</a>
</nav>
<div class="container">
<section id="menu">
<h2>Menu</h2>
<div class="menu-item">
<h3>Espresso</h3>
<p>Our classic espresso, rich and bold.</p>
</div>
<div class="menu-item">
<h3>Cappuccino</h3>
<p>A perfect balance of espresso, steamed milk, and foam.</p>
</div>
<div class="menu-item">
<h3>Latte</h3>
<p>Espresso with a creamy blend of steamed milk and foam.</p>
</div>
<!-- Add more menu items -->
</section>
<section id="about">
<h2>About Us</h2>
<p>We are a cozy coffee shop dedicated to providing high-quality coffee and a comfortable atmosphere. Our passion is to serve you the best coffee in town.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or feedback, feel free to contact us:</p>
<p>Email: info@coffeehaven.com</p>
<p>Phone: 123-456-7890</p>
</section>
</div>
<!-- Add more sections as needed (e.g., gallery, reviews, etc.) -->
</body>
</html>In this example, I’ve created a simple coffee shop website with a responsive design. The CSS includes media queries to adjust the layout based on different screen sizes. You can further enhance the design, add images, and additional sections as per your requirements.
