Scribd
Upload
5 views19 pages

computerproject

The document contains the HTML and PHP code for a restaurant website called 'Foodie's Delight', featuring a login and signup system. It includes styles for various elements, error handling for login failures, and a form for user registration. The website aims to provide a cozy atmosphere with delicious food and friendly service.

Uploaded by

harijandh
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 views19 pages

computerproject

The document contains the HTML and PHP code for a restaurant website called 'Foodie's Delight', featuring a login and signup system. It includes styles for various elements, error handling for login failures, and a form for user registration. The website aims to provide a cozy atmosphere with delicious food and friendly service.

Uploaded by

harijandh
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/ 19

1.

INDEX.PHP 2.

<html> height: 440px;

<head><title>FOODIE'S DELIGHT</title></head> background-image: url('img/logo.png');

<style> background-size: cover;

body{ border-radius: 50%;

background-image: url('img/hbg.jpg'); display: flex;

background-size: cover; justify-content: center;

font-family: Arial, sans-serif; align-items: center;

text-shadow: 2px 2px 15px rgb(0, 0, 0); } margin-left: 280px;

.top{ }

display: flex; .right::before{

flex-direction: row; width: 430px;

justify-content: space-between; height: 430px;

height: 80px; border: 5px solid rgb(255, 128, 0);

align-items: center; box-shadow: 0 0 20px rgba(239, 100, 1, 0.76);

padding: 0px 40px; content:'';

margin-top: 40px; } position: absolute;

.logo{ border-radius: 430px;

color: #fff; padding: 10px;

text-align: left; }

margin-bottom: 2rem; .left p{

font-size:50px; color: aliceblue;

text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.73); } font-size: 30px;

.p{font-size: 20px; color:#fff; } font-style: italic;

.heading{ }

display: flex; .left h1{

justify-content: space-evenly; color: aliceblue;

padding: 65px; font-size: 45px;

align-items: center; } }

.right{ .icons {

width: 440px; background: red;

margin-top: 10px;
3. 4.

width: 80px; 1.Delicious, authentic dishes made with fresh


ingredients <br>
height: 80px;
2.Cozy, welcoming atmosphere for every occasion
border-radius: 50%; <br>
display: flex; 3.Friendly, attentive service ensuring a great
experience </span>
justify-content: center;
<br>
align-items: center;
<div class="icons">
box-shadow: 2px 2px 18px black;
<img id="cart" src="img/cart.png" onclick="login()">
}
</div>
#cart {
<span>CLICK FOR MENU</span>
filter: grayscale(0%) brightness(1.2) invert(0.8)
</div>
hue-rotate(60deg);
<div class="right">
width: 50px;
</div>
height: 50px;
</div>
cursor: pointer;
<script>
}
function login() {
span{
window.location.href =
margin-top: 10px;
"http://localhost/project/login.php";
font-size: 20px;
}
color: white;
</script>
font-weight: bold;

text-shadow: 2px 2px 18px black;


</body>
}
</html>
</style>

<body>

<div class="top">

<div class="logo" >FOODIE'S DELIGHT</div>

</div>

<div class="heading">

<div class="left">

<p>Hey!</p>

<h1>Are You Looking For Food</h1>

<span>
5.
ADDUSER.PHP 6.
<html>

<head>
$sql = "INSERT INTO customers (username,
</head> password, email) VALUES ('$uname', '$password',
'$email')";
<body>
if (mysqli_query($conn,$sql) === TRUE) {

header("Location: http://localhost/project/login.php");
<?php

//record added
$servername = "localhost";
}
$username = "root";

$password = "";
else {
$database = "foodie";
echo "Error: " . $sql . "<br>" . $conn->error;

}
$conn = new mysqli($servername, $username, $password,
$database);

// Check the connection

if ($conn->connect_error) { else {

die("Connection failed:".$conn->connect_error); echo "All fields are required.";

} }

$conn->close();
$uname = $_POST['cusName'];

$password = $_POST['Password'];

$rePassword= $_POST['rePassword']; ?>

$email = $_POST['email'];

</body>

if (!empty($uname) && !empty($password) && </html>


!empty($email) && $password==$rePassword &&
strlen($password)>7 && strlen($uname)>5) {
ERROR.PHP 8.
7.
<html>
padding: 10px 20px;
<head>
font-size: 1rem;
<title>Error 404 - Page Not Found</title>
color: black;
<style>
background-color: pink;
body {
text-decoration: none;
font-family: 'Arial', sans-serif;
border-radius: 5px;
margin: 0;
transition: background-color 0.3s ease;
padding: 0;
}
background-color: #f7f8fc;
.back-link:hover {
color: #333;
background-color: #0056b3;
display: flex;
}
align-items: center;
.animation-container {
justify-content: center;
position: relative;
height: 100vh;
width: 300px;
overflow: hidden;
height: 200px;
}
margin: 0 auto;
.error-container {
}
text-align: center;
.character {
position: relative;
position: absolute;
}
width: 50px;
.error-code {
height: 50px;
font-size: 6rem;
background-color: #ff6b6b;
font-weight: bold;
border-radius: 50%;
color: #ff6b6b;
bottom: 0;
margin-bottom: 20px;
}
}

.back-link {

display: inline-block;
9. 10.

.character.hit {
</style>
left: 0;
</head>
animation: hitAnimation 2s infinite;
<body style=" background-color: #1e1e2f;">
}
<div class="error-container">

<div class="error-code"> USERNAME OR


.character.target { PASSWORD IS INCORRECT </div>

right: 0;

background-color: #6bcaff; <a href="http://localhost/project/login.php"


class="back-link">TRY AGAIN </a>
animation: targetReaction 2s infinite;
<div class="animation-container">
}
<div class="character hit"></div>

<div class="character target"></div>


/* Keyframes for hitting character */
</div>
@keyframes hitAnimation {
</div>
0%, 100% {
</body>
transform: translateX(0);
</html>
}

50% {

transform: translateX(150px);

/* Keyframes for target character reaction */

@keyframes targetReaction {

0%, 100% {

transform: translateX(0);

50% {

transform: translateX(-20px) rotate(10deg);

}
11.
LOGIN.PHP 12.
<html>
border-radius: 10px;
<head>
box-shadow: 0 0 18px rgba(13, 210, 232, 0.86);
<title> Login</title>
width: 400px;
</head>
}
<style>
.login-form h1 {
*{
margin-bottom: 1.5rem;
margin: 0;
text-align: center;
padding: 0;
color: #fff;
box-sizing: border-box;
}
}
.input-group {
body {
margin-bottom: 1.2rem;
font-family: 'Roboto', sans-serif;
color: #fff;
background-image: url('img/bg1.jpg');
}
background-size: cover;
.input-group label {
background-repeat: no-repeat;
display: block;
display: flex;
margin-bottom: 0.5rem;
flex-direction: column;
font-weight: bold;
justify-content: center;
}
align-items: center;
.input-group input {
height: 100vh;
width: 100%;
}
padding: 0.8rem;
#rname {
border: 1px solid #ddd;
color: #fff;
border-radius: 5px;
text-align: left;
font-size: 1rem;
margin-bottom: 2rem;
}
font-size:50px;
.input-group input:focus {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.73);
border-color: #4facfe;
}
outline: none;
.login-container {
box-shadow: 0 0 5px rgba(79, 172, 254, 0.5);
background-color:rgba(0, 0, 0, 0.46);
}
padding: 2rem
13. 14.

.login-button {
<body>
width: 100%;

padding: 0.8rem;
<h1 id="rname">FOODIE’S DELIGHT</h1>
background-color: #4facfe;

border: none;
<div class="login-container">
border-radius: 5px;
<form class="login-form" action="menu.php"
color: #fff; method="POST">

font-size: 1rem; <h1>Login</h1>

cursor: pointer; <div class="input-group">

transition: background-color 0.3s ease; <label for="username">Username</label>

} <input type="text" id="username" name="username"


placeholder="Enter your username" required>

</div>
.login-button:hover {
<div class="input-group">
background-color: #008cba;
<label for="password">Password</label>
}
<input type="password" id="password"
.register-text { name="password" placeholder="Enter your password"
text-align: center; required>

margin-top: 1rem; </div>

color: #fff; <button type="submit" class="login-


button">Login</button>
}
<p class="register-text">Don't have an account? <a
.register-text a { href="signup.php">Register here</a></p>
color: #4facfe; </form>
text-decoration: none; </div>

font-weight: bold;

} </body>

</html>
.register-text a:hover {

text-decoration: underline;

</style>
15.
SIGNUP.PHP 16.
<html>
border-radius: 5px;
<head> <title>Sign UP</title>
border: 1px solid #ccc;
<style>
font-size: 16px;
body {
}
font-family: Arial, sans-serif;
.form-group textarea {
background-image: URL('img/bg1.jpg');
resize: vertical;
padding: 20px;
height: 100px;
}
}
.form-container {
.form-group input[type="submit"] {
color: #fff; max-width: 400px;
background-color: #4CAF50;
margin: 0 auto; padding: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.14);
border: none;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-size: 16px;
}
border-radius: 5px;
.form-group {
cursor: pointer;
margin-bottom: 20px;
}
margin-right:20px; color: #fff;
#password{
}
width: 100%;
.form-group label {
padding: 10px;
display: block;
border-radius: 5px;
font-weight: bold;
border: 1px solid #ccc;
margin-bottom: 5px;
font-size: 16px;
}
}
.form-group input[type="text"],
#repassword{
.form-group input[type="email"],
width: 100%;
.form-group textarea {
padding: 10px;
width: 100%;
border-radius: 5px;
padding: 10px;
border: 1px solid #ccc;

font-size: 16px;}
18.
17.

border-radius: 10px;
.form-group input[type="submit"]:hover {
box-shadow: 0 0 18px rgba(13, 210, 232, 0.86);
background-color: #45a049;
width: 400px;
}
}
span{
.login-form h1 {
margin-left: 5px;
margin-bottom: 1.5rem;
font-size: 12px;
text-align: center;
color: red;
color: #fff;
}
}
#rname{
.input-group {
color: #fff;
margin-bottom: 1.2rem;
margin-left:500px;
color: #fff;
font-size:50px;
}
font-style:italic;
.input-group label {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.73);
display: block;
}
margin-bottom: 0.5rem;
</style>
font-weight: bold;
</head>
}
<body>
.input-group input {
<centre><h1 id="rname">FOODIE’S DELIGHT</h1></centre>
width: 100%;
<div class="form-container">
padding: 0.8rem;
<h2>Create Account</h2>
border: 1px solid #ddd;

border-radius: 5px;
<form action="adduser.php" method="POST">
font-size: 1rem;
<div class="form-group">
}
<label for="cusName" >Username</label>
.input-group input:focus {
<input type="text" id="cusName" name="cusName"
placeholder="Enter Your Username" onkeyup="NameMsg()"> border-color: #4facfe;

<span id="namemsg"></span> outline: none;

</div> box-shadow: 0 0 5px rgba(79, 172, 254, 0.5);

<div class="form-group"> }

<label for="email">Email Address</label>


20.
19.

else{
<input type="email" id="email" name="email"
placeholder="Enter Your Email Address" document.querySelector('#namemsg').innerHTML=""
onkeyup="EmailMsg()" >
}}
<span id="emailmsg"></span>
function EmailMsg(){
</div>
let Email = document.querySelector('#email') .value
<div class="form-group">
if(Email==""){
<label for="password">Password</label>
document.querySelector('#emailmsg').innerHTML="Ple
<input type="password" id="password" name="Password" ase enter Your email address"
placeholder="Enter Your Password"
else if(Email.endsWith(".com")){
onkeyup="PasswordMsg()">
document.querySelector('#emailmsg').innerHTML="" }
<span id="passmsg"></span>
else{
</div>
document.querySelector('#emailmsg').innerHTML="inval
<div class="form-group"> id Email Adress" } }

<label for="repassword">Confirm Password</label> function PasswordMsg(){

<input type="password" id="repassword" let Password = document.querySelector('#password')


name="rePassword" placeholder="Confirm Your Password" .value
onkeyup="RePasswordMsg()">
if(Password==""){
<span id="repassmsg"></span>
document.querySelector('#passmsg').innerHTML="Ple
</div> ase enter Your password"}

<div class="form-group"> else if(Password.length < 8){

<input type="submit" value="Create Account"> document.querySelector('#passmsg').innerHTML="Pas


sword must be Minimum 8 characters long" }
</div>
else{ document.querySelector('#passmsg').innerHTML="
</form>
"}}
</div>
function RePasswordMsg(){
<script>
let RePassword
function NameMsg(){ = document.querySelector('#repassword') .value

let CusName = document.querySelector('#cusName') let Password = document.querySelector('#password')


.value .value

if(CusName==""){ if(RePassword!==Password){

document.querySelector('#namemsg').innerHTML="Enter document.querySelector('#repassmsg').innerHTML="p
Your Name"} assword didn't match"

else{ document.querySelector('#repassmsg').innerHTM
L="" } }
else if(CusName.length<6){

document.querySelector('#namemsg').innerHTML="Minim
um 6 characters long" }
</script>
21. MENU.PHP 22.
<html>
.menu-item {
<head>
width: 250px;
<title>
background: white;
FOODIE'S DELIGHT – Menu
margin: 15px;
</title>
padding: 15px;
<style>
border-radius: 10px;
body {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
box-shadow:2px 2px 18px rgba(0, 0, 0, 0.77);
background-image: URL('img/menubg.jpg');
}
background-size: cover;
.menu-item:hover {
background-repeat: no-repeat;
transform: scale(1.05);
}
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3);

}
h1 {
.menu-item img {
font-size:45px;
width: 200px;
font-style:bold;
height: 200px;
color: rgb(255, 255, 255);
border-radius: 10px;
text-shadow: 2px 2px 10px rgb(0, 0, 0);
}
padding: 15px;
.stars {
margin: 0;
color: gold;
}
font-size:20px; }
.menu-container {
.quantity-controls {
display: flex;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;}
justify-content: center;
padding: 20px;
margin-top: 10px;

}
23. 24.

display:flex;
.quantity-controls button {
flex-direction: column;
background: #ff6600;
float: right;
color: white;
}
border: none;
#profilpic{
padding: 5px 10px;
border:1px solid yellow;
cursor: pointer;
background-color:yellow;
font-size: 18px;
height:50px;
border-radius: 5px;
width:50px;
}
border-radius: 50%;

box-shadow:2px 2px 10px black;}


.quantity-controls input {
#pic{
width: 40px;
height: 50px;
text-align: center;
width:50px;
border: none;
border-radius: 50%;
font-size: 16px;
cursor: pointer; }
background: #f8f8f8;
#dtls {
pointer-events: none;
margin-top: 10px;
}
border: 2px solid blue;
.cartbtn {
width: 150px;
background: rgb(61, 155, 49);
border-radius: 8px;
color: white;
display: none;
border: none;
background: rgba(0, 0, 0, 0.8);
padding: 8px;
color: white;
margin-top: 10px;
padding: 15px;
cursor: pointer;
text-align: left;
border-radius: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
font-size: 16px;
position:absolute;
}
right:5px;
.cartbtn:hover { background: rgb(240, 11, 11); }
top:6em;}

#container{
26.
25.

#productlst{
#clsdtl {
width:400px;
margin: 0;
background-color:rgba(0, 0, 0, 0.77);
float: right;
color:#fff;
border: none;
position:fixed;
background: none;
top:0;
color: red;
right:0;
font-size: 30px;
bottom:0;
cursor: pointer;
z-index: 1000;
padding: 0;
max-height: 46em;
font-weight: bold;
overflow-y: auto;
}
}
.php-style {
#cbtn{
font-family: 'Arial', sans-serif;
height:50px;
font-size: 16px;
width:40%;
margin-bottom: 10px;
color:white;
line-height: 1.5;
font-size:15px;
word-wrap: break-word; }
background:green;
.crt{
border:none;
margin:0 0 0 0;
cursor:pointer;
background:yellow;
}
height:50px;
#purchase{
width:50px;
width:40%;
border-radius:50%;
height:50px;
box-shadow:2px 2px 10px black;
color:white;
}
font-size:15px;
svg{
background:green;
margin-top:5px;
border:none;
cursor:pointer;
cursor:pointer; }
color:black;}
28.
27.

.quantity {
#total{
flex: 1;
color:red;
font-size: 16px;
font-size:18px;
text-align: center;
font-weight:bold;
.cc, .cd, .pa, .cp {
text-shadow:2px 2px 10px black;
background-color: rgb(46, 45, 45);
}
}
#tc{
.vc, .vd, .ff, .br {
color:red;
background-color: rgb(63, 63, 63);
font-size:18px;
}
font-weight:bold;
#logout{
text-shadow:2px 2px 10px black;
font-size:15px !important;
}
font-weight:bold;
.foods div{
height:20px;
margin-left:5px;
width:80px;
margin-right:5px;
color:red;
display: flex;
text-shadow:2px 2px 10px black;
align-items: center;
margin: 0 auto;
padding-bottom: 8px;
cursor:pointer;
padding-top:8px;
}
border-radius: 5px;
</style>
}
</head>
.fname {
<body>
flex: 2;

font-size: 16px;

font-weight: bold;
<?php
}

$servername = "localhost";
.price {
$username = "root";
flex: 1;
$password = "";
font-size: 16px;
$database = "foodie";
text-align: center; }
30.
29.

<div id="productlst" style="display:none;">


$conn = new mysqli($servername, $username, $password,
$database); <h1>ITEMS</h1>

if ($conn->connect_error) { <div class="items">

die("Connection failed:".$conn->connect_error); }

$count = 0; <div class="foods" >

$username = $_POST['username'];

$password = $_POST['password']; <div class="cc" >

$sql = "SELECT * FROM customers"; <div class="fname">CHICKEN CHAWMIN </div>

$result = mysqli_query($conn, $sql); <div class="price"> Rs.149 </div>

if ($result) { <div class="quantity"><span id="cc">0x</span></div>

while ($row = mysqli_fetch_assoc($result)) { </div>

if($username == $row['username'] && $password == <br>


$row['password'] ){
<div class="vc" >
$email = $row['email'];
<div class="fname">VEG CHAWMIN</div>
$status = $row['stat'];
<div class="price"> Rs.99 </div>
$count = $count + 1; } } }
<div class="quantity"><span id="vc">0x</span></div>
else {
</div>
echo "Query failed: " . mysqli_error($conn); }
<br>

<div class="cd" >


if($count != 1){
<div class="fname">CHICKEN DUMPLINGS</div>
echo
<div class="price"> Rs.199 </div>
"<script>window.location.href='http://localhost/project/error
.php';</script>"; <div class="quantity"><span id="cd">0x</span></div>

exit; </div>

} <br>

<div class="vd" >

$conn->close(); <div class="fname">VEG DUMPLINGS</div>

?> <div class="price"> Rs.149 </div>

<h1>FOODIE'S DELIGHT MENU</h1> <div class="quantity"><span id="vd">0x</span></div>

<br> </div>

<br>
31. 32.

<div class="pa" >


<button id="purchase"
<div class="fname">PASTA</div> onclick="calc()">PURCHASE</button> </div> </div>

<div class="price"> Rs.299 </div> <div id="container" style="display:flex; flex-


direction:row;">
<div class="quantity"><span id="pa">0x</span></div>
<div class="plist" style="margin:2px 10px 0 0;">
</div> <div class="crt" >
<br> <svg onclick="ShowHide();" class="w-6 h-6 text-gray-800
<div class="ff" > dark:text-white" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" width="40"
<div class="fname">FRENCH FRIES</div> height="40" fill="currentColor" viewBox="0 0 24 24"
onclick="ShowHide()">
<div class="price"> Rs.89 </div>
<path fill-rule="evenodd" d="M4 4a1 1 0 0 1 1-1h1.5a1 1
<div class="quantity"><span id="ff">0x</span></div>
0 0 1 .979.796L7.939 6H19a1 1 0 0 1 .979 1.204l-1.25 6a1
</div> 1 0 0 1-.979.796H9.605l.208 1H17a3 3 0 1 1-2.83 2h-
2.34a3 3 0 1 1-4.009-1.76L5.686 5H5a1 1 0 0 1-1-1Z" clip-
<br>
rule="evenodd"/>
<div class="cp" >
</svg>v</div></div>
<div class="fname">CHEESE PIZZA</div>
<div id="profilpic" onclick="userdtl()">
<div class="price"> Rs.599 </div>
<img src="img/pp.png" alt="O" id="pic"> </div>
<div class="quantity"><span id="cp">0x</span></div>
<div id="dtls">
</div>
<button id="clsdtl" onclick="clsdtl()">×</button>
<br>
<br> <div class="php-style">
<div class="br" >
<strong>Username:</strong> <br> <?php echo
<div class="fname">BURGER</div> $username; ?> </div>

<div class="price"> Rs.499 </div> <div class="php-style">

<div class="quantity"><span id="br">0x</span></div> <strong>Email:</strong> <br> <?php echo $email; ?>

</div> </div>

<div class="php-style">

</div> <strong>Status:</strong> <br> <span


style="color:green; font-weight:bold;"><?php echo
<br> $status; ?></span>
<span id="total" style="margin-right:120px;">TOTAL </div>
COST:</span> <span id="tc"> 0000/-</span>
<div id="logout" onclick="logout()">
</div>
LOG OUT
<div class="btn">
</div> </div> </div>
<button id="cbtn" onclick="ShowHide()">CLOSE</button>
34.
33.

<div class="menu-container">
<p><strong>Price:</strong> Rs.199</p>
<div class="menu-item">
<p class="stars">★★★★★</p>
<img src="img/cc.png" >
<div class="quantity-controls">
<h3>Chicken Chawmin</h3>
<button onclick="updateQuantity('q3', -1)">-
<p><strong>Price:</strong> Rs.149</p> </button>

<p class="stars">★★★★★</p> <input type="text" id="q3" value="1" readonly>

<div class="quantity-controls"> <button onclick="updateQuantity('q3',


1)">+</button> </div>
<button onclick="updateQuantity('q1', -1)">-
</button> <button class="cartbtn" onclick="addToCartcd()">
Add to Cart</button>
<input type="number" id="q1" value="1" readonly>
</div> <div class="menu-item">
<button onclick="updateQuantity('q1', 1)">+</button>
<img src="img/vd.png" style="height:180px;margin-
</div>
top:20px;">
<button class="cartbtn" onclick="addToCartcc();"> <h3>Veg Dumplings</h3>
Add to Cart</button>
<p><strong>Price:</strong> Rs.149</p>
</div>
<p class="stars">★★★★☆</p>

<div class="quantity-controls">
<div class="menu-item">
<button onclick="updateQuantity('q4', -1)">-
<img src="img/vc.png">
</button>
<h3>Veg Chawmin</h3>
<input type="text" id="q4" value="1" readonly>
<p><strong>Price:</strong> Rs.99</p>
<button onclick="updateQuantity('q4', 1)">
<p class="stars">★★★★☆</p> +</button> </div>

<div class="quantity-controls"> <button class="cartbtn" onclick="addToCartvd()">


Add to Cart</button> </div>
<button onclick="updateQuantity('q2', -1)">-
</button> <div class="menu-item">

<input type="text" id="q2" value="1" readonly> <img src="img/pasta.png" >

<button onclick="updateQuantity('q2', 1)">+</button> <h3>Pasta</h3>

</div> <p><strong>Price:</strong> Rs.299</p>

<button class="cartbtn" onclick="addToCartvc()"> <p class="stars">★★★★☆</p>


Add to Cart</button>
<div class="quantity-controls">
</div>
<button onclick="updateQuantity('q5', -1)">-
</button>

<div class="menu-item">

<img src="img/cd.png" style="height:180px;margin-


top:20px;">

<h3>Chicken Dumplings</h3>
35. 36.

<input type="text" id="q5" value="1" readonly>


</div>
<button onclick="updateQuantity('q5', 1)">+</button> </div>
<div class="menu-item">
<button class="cartbtn" onclick="addToCartpa()"> Add <img src="img/burger.png" >
to Cart</button> </div>
<h3>Burger</h3>
<div class="menu-item">
<p><strong>Price:</strong> Rs.499</p>
<img src="img/ff.png" >
<p class="stars">★★★★☆</p>
<h3>French Fries</h3>
<div class="quantity-controls">
<p><strong>Price:</strong> Rs.89</p>
<button onclick="updateQuantity('q8', -1)">-
<p class="stars">★★★★☆</p> </button>
<div class="quantity-controls"> <input type="text" id="q8" value="1" readonly>
<button onclick="updateQuantity('q6', -1)">- <button onclick="updateQuantity('q8',
</button> 1)">+</button>
<input type="text" id="q6" value="1" readonly> </div>
<button onclick="updateQuantity('q6', 1)">+</button> <button class="cartbtn"
</div> onclick="addToCartbr()"> Add to Cart</button>

<button class="cartbtn" onclick="addToCartff()"> </div>


Add to Cart</button> </div>
</div> <script>
<div class="menu-item"> function userdtl(){
<img src="img/pizza.png" > document.getElementById("dtls").style.display = "block";
<h3>Cheese Pizza</h3> }

<p><strong>Price:</strong> Rs.599</p> function clsdtl(){

document.getElementById("dtls").style.display = "none";}
<p class="stars">★★★★☆</p>
//quantity change
<div class="quantity-controls">
function updateQuantity(id, change) {
<button onclick="updateQuantity('q7', -1)">-
</button> let qtyInput = document.getElementById(id);
<input type="text" id="q7" value="1" readonly> let currentValue = parseInt(qtyInput.value);
<button onclick="updateQuantity('q7', 1)">+</button> let newValue = Math.max(1, currentValue +
change);
</div>
qtyInput.value = newValue; }
<button class="cartbtn" onclick="addToCartcp()">
Add to Cart</button>
37. 38.
//ADD TO CART
cp = 599*qnt7; }
var cc = 0, vc = 0, cd = 0, vd = 0, pa = 0, ff = 0, cp = 0, br = 0;
function addToCartbr(){
function addToCartcc(){
var qnt8=
var qnt1= Number(document.getElementById('q1').value); Number(document.getElementById('q8').value);

document.getElementById('cc').innerHTML=qnt1+'x'; document.getElementById('br').innerHTML=qnt8+'x';

cc = 149*qnt1; } br = 499*qnt8; }

function addToCartvc(){ function calc(){

var qnt2= Number(document.getElementById('q2').value); var total= cc+vc+cd+vd+pa+ff+cp+br;

document.getElementById('vc').innerHTML=qnt2+'x'; document.getElementById('tc').innerHTML='Rs.'+total+'/-
'; }
vc = 99*qnt2; }
function ShowHide() {
function addToCartcd(){
const productList =
var qnt3= Number(document.getElementById('q3').value); document.querySelector("#productlst");
document.getElementById('cd').innerHTML=qnt3+'x'; if (productList.style.display === "none" ||
cd = 199*qnt3; } productList.style.display === "") {

function addToCartvd(){ productList.style.display = "block";

var qnt4= Number(document.getElementById('q4').value); } else {

document.getElementById('vd').innerHTML=qnt4+'x'; productList.style.display = "none"; } }

vd = 149*qnt4; } function logout(){

function addToCartpa(){ window.location.href='http://localhost/project/login.ph


p'; }
var qnt5= Number(document.getElementById('q5').value);
var timeout;
document.getElementById('pa').innerHTML=qnt5+'x';
function resetTimer() {
pa = 299*qnt5; }
clearTimeout(timeout);
function addToCartff(){
timeout = setTimeout(logoutUser, 120000);
var qnt6= Number(document.getElementById('q6').value);
}
document.getElementById('ff').innerHTML=qnt6+'x';
function logoutUser() {
ff = 89*qnt6; }
window.location.href='http://localhost/project/login.ph
function addToCartcp(){ p'; }
var qnt7= Number(document.getElementById('q7').value); document.addEventListener("mousemove", resetTimer);

document.getElementById('cp').innerHTML=qnt7+'x'; document.addEventListener("keydown", resetTimer);

resetTimer();

</script> </body> </html>

You might also like