Scribd
Upload
10 views18 pages

WP Ca2

The document outlines a project report for an interactive restaurant website named 'Little Lemon', designed for a Bachelor of Computer Applications course. It features a user-friendly interface with functionalities such as user authentication, dynamic menu display, real-time cart management, and an order confirmation system. The website aims to provide a luxurious dining experience through its elegant design and seamless navigation.

Uploaded by

abhishekjadhav402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views18 pages

WP Ca2

The document outlines a project report for an interactive restaurant website named 'Little Lemon', designed for a Bachelor of Computer Applications course. It features a user-friendly interface with functionalities such as user authentication, dynamic menu display, real-time cart management, and an order confirmation system. The website aims to provide a luxurious dining experience through its elegant design and seamless navigation.

Uploaded by

abhishekjadhav402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

MAHATMA EDUCATION SOCIETY’S

PILLAI COLLEGE OF ARTS, COMMERCE & SCIENCE


(Autonomous)

NEW PANVEL

PROJECT REPORT ON
“Restaurant menu and order confirmation”

IN PARTIAL FULFILLMENT OF

BACHELOR OF COMPUTER APPLICATIONS

SEMESTER I– 2024-25

PROJECT GUIDE

PROF. DIPTI KHISTE

SUBMITTED BY: ROLL NO: 2800


Introduction
The Little Lemon Restaurant website is an interactive and user-friendly online
platform designed to enhance the digital dining experience for customers. This
website allows users to browse an authentic Indian menu, place orders, and
manage their cart effortlessly. With a modern, elegant, and minimalistic design,
the platform ensures smooth navigation and an engaging user experience. The
website also includes essential functionalities such as user authentication
(login/signup), real-time cart management, and an order confirmation system.

Theme of the Website


The theme of the website is inspired by luxurious Indian fine dining with a
modern, classy, and elegant design. The color palette incorporates rich, warm
tones with a blend of golden accents and deep hues to reflect the sophistication
of high-end Indian restaurants. The UI is designed to provide a seamless,
visually appealing, and interactive experience, ensuring that customers feel a
sense of authenticity and elegance while browsing the menu and placing their
orders.

Key Features
1. User Authentication System
Secure login and signup system using local storage.
Users can register and log in to access the full functionality of the website.
2. Dynamic Menu Display
A visually appealing menu featuring popular Indian dishes such as Biryani,
Butter Chicken, Paneer Tikka, Dosa, and Samosa.
Each dish is displayed with high-quality images, names, and an “Add to Cart”
button.
3. Interactive Cart Functionality
Users can add and remove items from the cart in real time.
The cart dynamically updates and displays selected dishes before proceeding to
checkout.
4. Order Confirmation System
Upon checkout, the website generates an order confirmation page displaying
only the items actually ordered.
The page also calculates and shows the total price, ensuring accurate billing.
5. Elegant and Responsive Design
Fully responsive layout for a smooth experience on mobile, tablet, and desktop
devices.
Styled with a modern and luxurious UI, incorporating animations, hover effects,
and minimalistic design elements.
6. Local Storage for Data Management
User login credentials and order details are stored using localStorage, ensuring a
simple yet effective way to manage session data.
Users can see their order details even after reloading the page.
7. Smooth Navigation and UX Enhancements
Clean, well-structured navigation with proper spacing and typography.
Subtle hover effects and animations to enhance the user experience.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Little Lemon Restaurant</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Little Lemon</h1>
<p>Experience fine dining with a touch of elegance</p>
<button onclick="logout()" id="logout-btn" style="display:
none;">Logout</button>
</header>

<div id="auth-section">
<h2>Login</h2>
<input type="text" id="username" placeholder="Enter Username">
<input type="password" id="password" placeholder="Enter Password">
<button onclick="login()">Login</button>
<p>Don't have an account? <a href="#" onclick="showSignup()">Sign
up</a></p>
</div>
<div id="signup-section" style="display: none;">
<h2>Sign Up</h2>
<input type="text" id="new-username" placeholder="Choose a
Username">
<input type="password" id="new-password" placeholder="Choose a
Password">
<button onclick="signup()">Sign Up</button>
<p>Already have an account? <a href="#"
onclick="showLogin()">Login</a></p>
</div>
<div id="main-content" style="display: none;">
<section id="menu">
<h2>Our Menu</h2>
<div id="menu-items"></div>
</section>
<section id="cart">
<h2>Your Order</h2>
<div id="cart-items">No items in cart.</div>
<button onclick="checkout()">Checkout</button>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Style.css:
/* General Styles */
body {
font-family: 'Poppins', sans-serif;
text-align: center;
background-color: #f8f8f8;
color: #333;
margin: 0;
padding: 0;
}
header {
background: linear-gradient(45deg, #2c3e50, #34495e);
color: white;
padding: 40px 20px;
font-size: 28px;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
border-bottom: 4px solid #e67e22;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}
header h1 {
font-size: 3em;
margin: 0;
}

header p {
font-size: 1.2em;
margin-top: 10px;
font-weight: 300;
}
/* Menu and Cart Sections */
#menu, #cart {
margin: 30px auto;
padding: 25px;
width: 80%;
max-width: 700px;
background: white;
border-radius: 15px;
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
#menu h2, #cart h2 {
font-size: 2em;
color: #2c3e50;
margin-bottom: 20px;
text-align: left;
font-weight: 600;
}
#menu-items {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.menu-item {
display: inline-block;
margin: 15px;
text-align: center;
width: 160px;
border-radius: 10px;
background-color: #f9f9f9;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-item:hover {
transform: translateY(-10px);
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}
.menu-item img {
width: 150px;
height: 150px;
border-radius: 10px;
object-fit: cover;
}
.menu-item h3 {
font-size: 1.1em;
color: #2c3e50;
margin: 10px 0;
font-weight: 500;
}
button {
background: #e67e22;
color: white;
border: none;
padding: 12px 18px;
cursor: pointer;
margin-top: 12px;
border-radius: 25px;
font-weight: bold;
transition: background 0.3s ease, transform 0.2s ease;
}
button:hover {
background: #d35400;
transform: scale(1.05);
}

button:active {
transform: scale(0.98);
}
/* Auth Section Styling */
#auth-section, #signup-section {
background-color: #fff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 90%;
max-width: 400px;
margin: 40px auto;
border-radius: 15px;
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 15px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ddd;
font-size: 1em;
}
input[type="text"]:focus, input[type="password"]:focus {
border-color: #e67e22;
outline: none;
}
/* Logout Button */
#logout-btn {
background: #e67e22;
padding: 12px 18px;
color: white;
border-radius: 25px;
font-size: 1.2em;
cursor: pointer;
border: none;
margin-top: 20px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
}
#logout-btn:hover {
background: #d35400;
}
/* Cart Styling */
#cart-items {
margin: 20px 0;
font-size: 1.2em;
color: #e67e22;
font-weight: bold;
}
#cart-items:empty {
font-size: 1.5em;
color: #aaa;
}

Order_confirmation.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Confirmation - Little Lemon Restaurant</title>
<link rel="stylesheet" href="order_confirmation.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Order Confirmation</h1>
</div>
<div class="order-details">
<h2>Order Details</h2>
<table class="order-table">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody id="order-items">
<!-- Ordered items will be dynamically inserted here -->
</tbody>
</table>
</div>
<div class="total-price">
<p>Total Price: ₹<span id="total-price">0</span></p>
</div>
<div class="confirmation-message">
<p>Your order has been successfully placed! Enjoy your meal!</p>
</div>
<a href="index.html" class="back-btn">Back to Home</a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const orderItems = JSON.parse(localStorage.getItem("order")) || [];
const menuPrices = {
"Biryani": 200,
"Butter Chicken": 300,
"Paneer Tikka": 250,
"Dosa": 150,
"Samosa": 50,
"Tandoori Chicken": 350
};
let totalPrice = 0;
const orderTableBody = document.getElementById("order-
items");
if (orderItems.length === 0) {
orderTableBody.innerHTML = `<tr><td colspan="4">No
items were ordered.</td></tr>`;
} else {
const itemCounts = {};
orderItems.forEach(item => {
itemCounts[item] = (itemCounts[item] || 0) + 1;
});
Object.keys(itemCounts).forEach(item => {
const quantity = itemCounts[item];
const price = menuPrices[item] || 0;
const total = price * quantity;
totalPrice += total;
const row = `<tr>
<td>${item}</td>
<td>${quantity}</td>
<td>₹${price}</td>
<td>₹${total}</td>
</tr>`;
orderTableBody.innerHTML += row;
});
}
document.getElementById("total-price").innerText = totalPrice;
});
</script>
</body>
</html>

Script.js:
document.addEventListener("DOMContentLoaded", function() {
checkLoginStatus();
const menuContainer = document.getElementById("menu-items");
const dishes = [
{ name: "Biryani", image: "images/biryani.jpg" },
{ name: "Butter Chicken", image: "images/butter-chicken.jpg" },
{ name: "Paneer Tikka", image: "images/paneer-tikka.jpg" },
{ name: "Dosa", image: "images/dosa.jpg" },
{ name: "Samosa", image: "images/samosa.jpg" },
{ name: "Tandoori Chicken", image: "images/tandoori-chicken.jpg" }
];
dishes.forEach(dish => {
const dishElement = document.createElement("div");
dishElement.classList.add("menu-item");
dishElement.innerHTML = `
<img src="${dish.image}" alt="${dish.name}">
<h3>${dish.name}</h3>
<button onclick="addToCart('${dish.name}')">Add to Cart</button>
`;
menuContainer.appendChild(dishElement);
});
});
function signup() {
const username = document.getElementById("new-username").value;
const password = document.getElementById("new-password").value;
if (username && password) {
localStorage.setItem(username, password);
alert("Signup successful! Please login.");
showLogin();
} else {
alert("Please enter a username and password.");
}
}
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (localStorage.getItem(username) === password) {
localStorage.setItem("loggedInUser", username);
checkLoginStatus();
} else {
alert("Invalid login credentials.");
}
}
function checkLoginStatus() {
const user = localStorage.getItem("loggedInUser");
if (user) {
document.getElementById("auth-section").style.display = "none";
document.getElementById("signup-section").style.display = "none";
document.getElementById("main-content").style.display = "block";
document.getElementById("logout-btn").style.display = "block";
}
}
function logout() {
localStorage.removeItem("loggedInUser");
location.reload();
}
function showSignup() {
document.getElementById("auth-section").style.display = "none";
document.getElementById("signup-section").style.display = "block";
}
function showLogin() {
document.getElementById("auth-section").style.display = "block";
document.getElementById("signup-section").style.display = "none";
}
const cart = [];
function addToCart(dish) {
cart.push(dish);
document.getElementById("cart-items").innerHTML = cart.join(", ");
}
function checkout() {
if (cart.length === 0) {
alert("Your cart is empty! Please add items before checkout.");
return;
}
localStorage.setItem("order", JSON.stringify(cart));
window.location.href = "order_confirmation.html";
}
Output:

You might also like