Scribd
Upload
5 views

FSWD-4

Uploaded by

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

FSWD-4

Uploaded by

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

Ex.No.

4 Create a food delivery website where users can order food


from a particular restaurant listed in the website.
DATE:

AIM:

To create a food delivery website where users can order food from a particular restaurant listed
in the website.

ALGORITHM:

Step 1: Identify essential sections.

Step 2: Choose a Technology Stack Select a web development framework and languages.

Step 3: Create Project Structure Establish directories for HTML, CSS, JavaScript files, and assets.

Step 4: Code HTML Structure Develop HTML templates for each webpage (index, about, resume,
projects, contact).

Step 5: Implement CSS Styling Style HTML elements using CSS for a visually appealing design.

Step 6: Add JavaScript Functionality Integrate JavaScript for interactive features and dynamic
content loading.

Step 7: Test and Debug Conduct thorough testing on different browsers and devices.

PROGRAM:

HTML - 1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Milkshake Mania</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
</style>
<body>
<header>
<img src="back.jpg" alt="Milkshake Mania" class="header-image">
<h1>MILKSHAKE MANIA</h1>
</header>
<main>
<section id="menu">
<h2>MILKSHAKES</h2>
<div class="menu-container">
<div class="menu-item" data-id="1">
<img src="vanilla.jpg" alt="Vanilla Milkshake">
<h3>Vanilla</h3>
<p>$100</p>
<button onclick="addToCart(1)">Add to Cart</button>
</div>
<div class="menu-item" data-id="2">
<img src="choco.jpg" alt="Chocolate Milkshake">
<h3>Chocolate</h3>
<p>$110</p>
<button onclick="addToCart(2)">Add to Cart</button>
</div>
<div class="menu-item" data-id="3">
<img src="straws.jpg" alt="Strawberry Milkshake">
<h3>Strawberry</h3>
<p>$120</p>
<button onclick="addToCart(3)">Add to Cart</button>
</div>
<div class="menu-item" data-id="4">
<img src="butter.jpg" alt="Butterscothch Milkshake">
<h3>Butterscotch</h3>
<p>$150</p>
<button onclick="addToCart(4)">Add to Cart</button>
</div>
<div class="menu-item" data-id="5">
<img src="blue.jpg" alt="Blueberry Milkshake">
<h3>Blueberry</h3>
<p>$170</p>
<button onclick="addToCart(5)">Add to Cart</button>
</div>
</div>
</section>

<section id="cart">
<h2>CART</h2>
<div class="cart-container">
<ul id="cart-items">
<!-- Cart items will be appended here -->
</ul>
<p>Total: $<span id="total">0</span></p>
<button onclick="checkout()">PLACE ORDER</button>
</div>
</section>
</main>
<script>
</script>
</body>
</html>

CSS:

body {
font-family: Cambria, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-color: #eee7ee;
color: rgb(8, 3, 3);
padding: 10px 20px;
text-align: center;
position: relative;
}

.header-image {
width: 100%;
height: auto;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

header h1 {
margin: 0;
z-index: 1;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 10px;
}

main {
padding: 20px;
text-align: center;
}

section {
margin-bottom: 30px;
}

.menu-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
}

.menu-item {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
text-align: center;
width: 200px;
}

.menu-item img {
width: 100%;
height: auto;
}

button {
background-color: #0a090a;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}

button:hover {
background-color: #040205;
}

#cart {
border-top: 2px solid #ddd;
padding-top: 20px;
text-align: center;
}

.cart-container {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
text-align: center;
}

#cart-items {
list-style-type: none;
padding: 0;
}

JAVASCRIPT:

const menuItems = [
{ id: 1, name: "Vanilla", price: 100, image: "vanilla.jpg" },
{ id: 2, name: "Chocolate", price: 110, image: "choco.jpg" },
{ id: 3, name: "Strawberry", price: 120, image: "straws.jpg" },
{ id: 4, name: "Butterscotch", price: 150, image: "butter.jpg" },
{ id: 5, name: "Blueberry", price: 170, image: "blue.jpg" }
];

let cart = [];

function addToCart(id) {
const item = menuItems.find(menuItem => menuItem.id === id);
cart.push(item);
displayCart();
}

function displayCart() {
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = '';
let total = 0;

cart.forEach(item => {
const li = document.createElement('li');
li.textContent = ${item.name} - $${item.price};
cartItemsContainer.appendChild(li);
total += item.price;
});

document.getElementById('total').textContent = total;
}

function checkout() {
alert("Order placed successfully!");
cart = [];
displayCart();
}

OUTPUT:
Department of IT
Performance 30
Observation 30
Record 40
Total 100

RESULT:

You might also like