Merge pull request #295 from ArpitaAgrahari/main

Added Pizza Delight website with menu, cart, order, and reviews functionality
iamrahulmahato · Oct 4, 2024 · 7fdfa44 · 7fdfa44
2 parents 6737a77 + 160772b
commit 7fdfa44
Show file tree

Hide file tree

Showing 4 changed files with 755 additions and 0 deletions.
diff --git a/projects/Online-Pizza-Shop/README.md b/projects/Online-Pizza-Shop/README.md
@@ -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.
+
diff --git a/projects/Online-Pizza-Shop/index.html b/projects/Online-Pizza-Shop/index.html
@@ -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>&copy; 2024 Mamma Mia Pizza | All rights reserved.</p>
+    </footer>
+
+    <!-- JavaScript for interaction -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Online-Pizza-Shop/script.js b/projects/Online-Pizza-Shop/script.js
@@ -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();
+}