Restaurant Booking Website Project Using Html Css And Javascript

Restaurant Booking Website Project Using Html Css And Javascript

7 min read Jun 20, 2024
Restaurant Booking Website Project Using Html Css And Javascript

Restaurant Booking Website Project Using HTML, CSS, and JavaScript

This article will guide you through building a simple restaurant booking website using HTML, CSS, and JavaScript. This project will help you understand the basics of web development and how to create interactive elements.

Project Structure

Let's start with the basic file structure of our project:

restaurant-booking/
├── index.html
├── style.css
├── script.js

index.html will contain the HTML structure of the website. style.css will hold the styling for the website using CSS. script.js will house the JavaScript code for adding interactivity.

HTML Structure (index.html)




    
    
    Restaurant Booking
    


    

Welcome to Our Restaurant

Book Your Table

© 2023 Restaurant Name

This code sets up the basic structure of the restaurant booking website with a header, main section, and footer. The booking form is placed in the main section.

CSS Styling (style.css)

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

main {
    padding: 2em;
}

.booking-form {
    background-color: #fff;
    padding: 2em;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="number"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
}

This CSS code provides basic styling for the website, including font, colors, layout, and button styles.

JavaScript Interactivity (script.js)

const bookingForm = document.getElementById('booking-form');

bookingForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    // Get values from form fields
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const date = document.getElementById('date').value;
    const time = document.getElementById('time').value;
    const guests = document.getElementById('guests').value;

    // You can use this data to send an email or store it in a database
    console.log(`Name: ${name}`);
    console.log(`Email: ${email}`);
    console.log(`Date: ${date}`);
    console.log(`Time: ${time}`);
    console.log(`Guests: ${guests}`);

    // Display a confirmation message
    alert(`Thank you, ${name}! Your reservation for ${guests} guests on ${date} at ${time} is confirmed.`);

    // Reset the form
    bookingForm.reset();
});

This JavaScript code handles form submission. It prevents the default form submission, retrieves values from form fields, displays a confirmation message, and then resets the form.

Additional Features

This is a basic example. You can add more features to your restaurant booking website, such as:

  • Restaurant Menu: Display the restaurant's menu.
  • Table Availability: Show available tables for chosen date and time.
  • Contact Information: Provide restaurant's contact details.
  • Image Gallery: Add images of the restaurant and its dishes.
  • Database Integration: Store booking data in a database for management.
  • Email Confirmation: Send automated email confirmations to customers.

Conclusion

This article gave you a starting point for building your restaurant booking website. By using HTML, CSS, and JavaScript, you can create a functional and interactive website that helps your restaurant attract customers. Remember to expand upon these basic features to create a more comprehensive and engaging online experience for your customers.