-
Notifications
You must be signed in to change notification settings - Fork 390
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #295 from ArpitaAgrahari/main
Added Pizza Delight website with menu, cart, order, and reviews functionality
- Loading branch information
Showing
4 changed files
with
755 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
# 🍕 Pizza Delight - Online Pizza Shop | ||
|
||
Welcome to **Pizza Delight**, an aesthetically designed and user-friendly pizza shop website. This project was built using **HTML**, **CSS**, and **JavaScript**, showcasing a modern UI and interactive functionalities like a customizable pizza ordering system, cart functionality, customer reviews, and form validations for placing orders. | ||
|
||
## Features | ||
|
||
### 1. **Responsive Navigation Bar** | ||
- Links to different sections of the website, including Menu, Cart, Order, and Reviews. | ||
- Easily accessible and user-friendly on both mobile and desktop. | ||
|
||
### 2. **Menu Section** | ||
- Displays pizza items available for purchase. | ||
- Each pizza item has an "Add to Cart" button for easy ordering. | ||
- Search functionality allows users to search for pizza items by name. | ||
|
||
### 3. **Pizza Customization** | ||
- Users can select pizza size (Small, Medium, Large). | ||
- Available toppings include Cheese, Pepperoni, and Mushrooms. | ||
- Customize your pizza to suit your taste and add it to the cart. | ||
|
||
### 4. **Cart Functionality** | ||
- Users can view their selected pizzas in the cart. | ||
- Display total cost dynamically based on selected items. | ||
- Remove items from the cart. | ||
|
||
### 5. **Order Section** | ||
- A fully functional form to place an order. | ||
- Input fields for name, phone number, and delivery address. | ||
- Form validation to ensure correct data entry, including 10-digit phone validation. | ||
|
||
### 6. **Customer Reviews** | ||
- Users can leave a review with a rating (1 to 5 stars). | ||
- Reviews are dynamically displayed on the page. | ||
|
||
### 7. **Pizza of the Day** | ||
- A special highlighted pizza that provides customers with a daily offer. | ||
|
||
### 8. **Responsive Design** | ||
- The layout adjusts beautifully on all devices, including desktop, tablet, and mobile. | ||
- All components are designed to enhance the user experience with fluid responsiveness. | ||
|
||
## How to Use | ||
|
||
### 1. **Clone the Repository** | ||
Clone the repository to your local machine: | ||
```bash | ||
git clone https://github.com/yourusername/pizza-shop.git | ||
``` | ||
### 2. **Open the Project** | ||
Navigate to the project directory and open `index.html` in your browser: | ||
```bash | ||
cd pizza-shop | ||
open index.html | ||
``` | ||
### 3. **Browse the Website** | ||
- Visit different sections using the navigation bar. | ||
- Browse through the menu, customize your pizza, add items to the cart, and place your order! | ||
### 4. **Interact with the Cart** | ||
- Add pizzas or customize your pizza and see your cart update in real time. | ||
- Remove any items from the cart if needed. | ||
### 5. **Submit a Review** | ||
- Leave feedback about the pizza and rate it! | ||
|
||
## Technologies Used | ||
|
||
- **HTML5**: For structuring the webpage. | ||
- **CSS3**: For styling and layout, ensuring a modern and aesthetically pleasing UI. | ||
- **JavaScript**: For all interactive elements including: | ||
|
||
## Folder Structure | ||
|
||
```bash | ||
Online-Pizza-Shop/ | ||
│ | ||
├── index.html # Main HTML file | ||
├── styles.css # CSS file for styling the webpage | ||
└── script.js # JavaScript file for interactive elements | ||
``` | ||
|
||
## Project Demo | ||
|
||
To see a live demo, open the `index.html` file in your browser. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Pizza Shop</title> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
<body> | ||
<header> | ||
<h1>Pizza Delight</h1> | ||
<nav> | ||
<a href="#menu">Menu</a> | ||
<a href="#cart">Cart</a> | ||
<a href="#order">Order</a> | ||
<a href="#reviews">Reviews</a> | ||
</nav> | ||
</header> | ||
|
||
<!-- Hero Section with a background image --> | ||
<section class="hero"> | ||
<div class="hero-content"> | ||
<h2>Delicious Pizzas, Delivered Hot!</h2> | ||
<p>Your favorite pizza is just a click away.</p> | ||
<a href="#menu" class="btn">Order Now</a> | ||
</div> | ||
</section> | ||
|
||
<!-- Menu Section --> | ||
<section id="menu" class="menu-section"> | ||
<h2>Our Menu</h2> | ||
<input type="text" id="search-bar" placeholder="Search for pizzas..." onkeyup="searchPizzas()"> | ||
<div id="menu-container"> | ||
<div class="menu-item" data-name="Margherita" data-price="10"> | ||
<h3>Margherita Pizza</h3> | ||
<p>$10</p> | ||
<button class="add-to-cart" data-name="Margherita" data-price="10">Add to Cart</button> | ||
</div> | ||
<div class="menu-item" data-name="Pepperoni" data-price="12"> | ||
<h3>Pepperoni Pizza</h3> | ||
<p>$12</p> | ||
<button class="add-to-cart" data-name="Pepperoni" data-price="12">Add to Cart</button> | ||
</div> | ||
</div> | ||
</section> | ||
|
||
<!-- Pizza Customization Section --> | ||
<section class="pizza-customization"> | ||
<h2>Customize Your Pizza</h2> | ||
<form id="customize-form"> | ||
<label for="size">Size:</label> | ||
<select id="size"> | ||
<option value="small">Small</option> | ||
<option value="medium">Medium</option> | ||
<option value="large">Large</option> | ||
</select> | ||
<label for="toppings">Toppings:</label> | ||
<input type="checkbox" id="cheese" value="Cheese"> Cheese | ||
<input type="checkbox" id="pepperoni" value="Pepperoni"> Pepperoni | ||
<input type="checkbox" id="mushrooms" value="Mushrooms"> Mushrooms | ||
<button type="button" onclick="addCustomizedPizza()">Add to Cart</button> | ||
</form> | ||
</section> | ||
|
||
<!-- Cart Section --> | ||
<section id="cart" class="cart-section"> | ||
<h2>Your Cart</h2> | ||
<div id="cart-items"></div> | ||
<p id="cart-total">Total: $0.00</p> | ||
</section> | ||
|
||
<!-- Order Section --> | ||
<section id="order" class="order-section"> | ||
<h2>Place Your Order</h2> | ||
<form id="order-form" onsubmit="return validateOrderForm()"> | ||
<label for="name">Name:</label> | ||
<input type="text" id="name" required> | ||
<label for="phone">Phone:</label> | ||
<input type="tel" id="phone" pattern="[0-9]{10}" required> | ||
<label for="address">Address:</label> | ||
<textarea id="address" required></textarea> | ||
<button type="submit">Submit Order</button> | ||
</form> | ||
</section> | ||
|
||
<!-- Reviews Section --> | ||
<section id="reviews" class="review-section"> | ||
<h2>Customer Reviews</h2> | ||
<form id="review-form" onsubmit="addReview(event)"> | ||
<label for="review">Leave a Review:</label> | ||
<textarea id="review" required></textarea> | ||
<label for="rating">Rating:</label> | ||
<select id="rating"> | ||
<option value="5">5 Stars</option> | ||
<option value="4">4 Stars</option> | ||
<option value="3">3 Stars</option> | ||
<option value="2">2 Stars</option> | ||
<option value="1">1 Star</option> | ||
</select> | ||
<button type="submit">Submit</button> | ||
</form> | ||
<div id="reviews-container"></div> | ||
</section> | ||
<section class="pizza-of-the-day"> | ||
<h2>Pizza of the Day</h2> | ||
<div class="pizza-day-item"> | ||
<h3>Special Margherita Pizza</h3> | ||
<p>Our classic pizza with fresh mozzarella, tomatoes, and basil. Only $12 today!</p> | ||
</div> | ||
</section> | ||
|
||
<!-- Footer --> | ||
<footer> | ||
<p>© 2024 Mamma Mia Pizza | All rights reserved.</p> | ||
</footer> | ||
|
||
<!-- JavaScript for interaction --> | ||
<script src="script.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
const cart = []; | ||
|
||
document.querySelectorAll('.add-to-cart').forEach(item => { | ||
item.addEventListener('click', () => { | ||
const name = item.getAttribute('data-name'); | ||
const price = item.getAttribute('data-price'); | ||
cart.push({ name, price }); | ||
displayCart(); | ||
}); | ||
}); | ||
|
||
function displayCart() { | ||
const cartItems = document.getElementById('cart-items'); | ||
cartItems.innerHTML = ''; | ||
let total = 0; | ||
|
||
cart.forEach((item, index) => { | ||
const cartItem = document.createElement('div'); | ||
cartItem.className = 'cart-item'; | ||
cartItem.innerHTML = ` | ||
<p>${item.name} - $${item.price}</p> | ||
<button onclick="removeItem(${index})">Remove</button> | ||
`; | ||
cartItems.appendChild(cartItem); | ||
total += parseFloat(item.price); | ||
}); | ||
|
||
document.getElementById('cart-total').textContent = `Total: $${total.toFixed(2)}`; | ||
} | ||
|
||
function removeItem(index) { | ||
cart.splice(index, 1); | ||
displayCart(); | ||
} | ||
|
||
|
||
function addCustomizedPizza() { | ||
const size = document.getElementById('size').value; | ||
const toppings = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(el => el.value).join(', '); | ||
const price = size === 'small' ? 10 : size === 'medium' ? 15 : 20; | ||
cart.push({ name: `${size} Pizza with ${toppings}`, price }); | ||
displayCart(); | ||
} | ||
|
||
function validateOrderForm() { | ||
const name = document.getElementById('name').value; | ||
const phone = document.getElementById('phone').value; | ||
const address = document.getElementById('address').value; | ||
|
||
if (!name || !phone || !address) { | ||
alert('Please fill out all fields.'); | ||
return false; | ||
} | ||
|
||
if (phone.length !== 10 || !/^\d+$/.test(phone)) { | ||
alert('Please enter a valid 10-digit phone number.'); | ||
return false; | ||
} | ||
|
||
alert('Order placed successfully!'); | ||
return true; | ||
} | ||
|
||
function searchPizzas() { | ||
const search = document.getElementById('search-bar').value.toLowerCase(); | ||
const menuItems = document.querySelectorAll('.menu-item'); | ||
|
||
menuItems.forEach(item => { | ||
const name = item.getAttribute('data-name').toLowerCase(); | ||
item.style.display = name.includes(search) ? '' : 'none'; | ||
}); | ||
} | ||
|
||
function addReview(event) { | ||
event.preventDefault(); | ||
const reviewText = document.getElementById('review').value; | ||
const rating = document.getElementById('rating').value; | ||
|
||
const reviewContainer = document.createElement('div'); | ||
reviewContainer.className = 'review'; | ||
reviewContainer.innerHTML = `<p>${reviewText}</p><p>Rating: ${rating} Stars</p>`; | ||
|
||
document.getElementById('reviews-container').appendChild(reviewContainer); | ||
document.getElementById('review-form').reset(); | ||
} |
Oops, something went wrong.