Project Report Of: Simple Food and Reasturant Webpage (Front End)

Project report of
“SIMPLE FOOD AND REASTURANT WEBPAGE (FRONT END) ”
SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD

OF
THE DEGREE OF
BACHELOR OF COMPUTER SCIENCE (BSc)
AT
DEPARTMENT OF COMPUTER SCIENCE, APPLICATION &
ANIMATION
ST ALOYSIUS COLLEGE (AUTONOMOUS), MANGALURU
MR
WORK CARRIED OUT AT
ST ALOYSIUS COLLEGE (AUTONOMOUS)

MANGALURU
DURING THE ACADEMIC YEAR 2020 – 21
1
UNDER THE GUIDANCE OF
PROJECT GUIDE
MS VANAJA A
Assistant Professor, Department of Computer Science & Application
St Aloysius College (Autonomous)
Mangaluru – 575 003
ST ALOYSIUS COLLEGE (AUTONOMOUS), MANGALURU
Department of Computer Science, Application & Animation
This is to certify that the student Mr, with ( ) of IV

Semester Bsc have satisfactorily completed the project “SIMPLE FOOD AND
REASTURANT WEBPAGE (FRONT END)” for the Bachelor of Computer Science
(BSc) prescribed by the College during the academic year 2020 – 21.
PROJECT GUIDE SIGNATURE HOD’S SIGNATURE
2
MS VANAJA A MS PRAFULLA
Assistant Professor, Department of Assistant Professor, Department of

Computer Science & Application Computer Science & Application
St Aloysius College (Autonomous) St Aloysius College (Autonomous)
Mangaluru – 575 003 Mangaluru – 575 003
ACKNOWLEDGEMENT
We are tankful to our Principal Rev. Dr Praveen Martis S J, Dr Ravindra Swami K (Dean)
and Ms Prafulla (HOD) Department of Computer science for their support throughout the
project work.
We also acknowledge the supports and fruitful guidance of project internal as well External
guide, Ms A Vanaja (Department of Computer Science, Applications and Animation)
forgiving us all the necessary information and guiding us, which was the key for successful
completion of this project.
Signature
3
TABLE OF CONTENTS
1 Introduction of simple food and restaurant 5
webpage (front end)
2 Code 6-44
3 Output screenshots 44-45
4 conclusion 46
5 Resource 46
4
INTRODUCTION
⦁ Name of the project : SIMPLE FOOD AND REASTURANT WEBPAGE
(FRONT END)
⦁ Programming language: Java Script , HTML , CSS.
⦁ Description:
Food is a driving force for many. It does come under one of the most
basic amenities for a human being. And when it comes to a country as
busy as India in its peak lunch hours getting a glance at the menu card
before ordering food is also a huge problem.
5
The most important advantage of food delivery is by
providing food whenever or wherever you want. Nowadays people
are too busy at times, but food delivery service helps them to grab a
bite in their busy schedule. Here I provide you with the most
significant advantages of online food delivery service.
To solve this problem our team has created a “FOOD DELIVERY
WEBPAGE” in frontend using HTML , Java script and CSS.
⦁ Background study : Websites are intended to provide rich information
and quality service. It acts as a connecting line between diverse individuals
around the world. As an internet tool, it is in itself diverse in many ways
depending on the content that the website provides. Having a computerized
system in an organization makes the tasks easy, because it will help to access
data in a shorter period of time unlike the manual form that can duplicate errors
in the part of the concerns.
⦁ Hardware requirement : Computer , Mobile and etc.
⦁ Software requirement : VS code Editor , Any browser , Figma

for the layout of the design.
Code :
HTML
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Food and Restaurant </title>

<link rel="stylesheext" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;500
&family=Roboto:wght@100;300;400;500&display=swap"
rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.2/css/all.min.css">

<link rel="stylesheet" href="style.css">
</head>
<body>

<header>
<a href="#" class="logo"><img src="/images/logo-img.png" alt=""></a>
<div id="menu-bar" class="fas fa-hamburger"></div>
7
<nav class="navbar">
<ul> <li><a class="active" href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#menu">menu</a></li>
<li><a href="#popular">popular</a></li>
<li><a href="#gallery">gallery</a></li>
<li><a href="#order">order</a></li> </ul>
</nav>
</header>


<section class="home" id="home">
<div class="content" data-aos="fade-right">
<h3>We belive good food offer great smile</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, odit distinctio error
corporis adipiscimolestias eveniet optio quaerat tempore asperiores!</p>
<a href="#"><button class="btn">get started</button></a>
</div>
<div class="image" data-aos="fade-up">
<img src="https://source.unsplash.com/720x600/?food" alt="food image">
</div>
</section>


8
<section class="about" id="about">
<div class="image" data-aos="fade-right"></div>
<div class="content" data-aos="fade-left">
<h3>a word about us</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea accusantium eligendi a
totam consequatur!
Quis minus amet iusto iure repudiandae, incidunt enim fugiat ipsa? Iure quam et quo quos
quisquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint totam pariatur saepe sit
nostrum
consequuntur, praesentium accusamus harum voluptate soluta.</p>
<a href="#"><button class="btn">learn more</button></a>
</div>
</section>

<section class="menu" id="menu">
<h2 class="heading"> our delicious <span>menu</span> </h2>
<ul class="list" data-aos="fade-down">
<li class="btn" data-src="/public/images/menu1.jpg">breakfast</li>
<li class="btn active" data-src="/public/images/menu2.jpg">lunch</li>
<li class="btn" data-src="/public/images/menu3.jpg">dinner</li>
<li class="btn" data-src="/public/images/menu4.jpg">dessert</li>
</ul>
<div class="row" data-aos="fade-right">
<div class="image" data-aos="fade-left">
9
<img src="/images/menu2.jpg" id="menu-img" alt="">
</div>
<div class="content">
<div class="info">
<h3> <span>01.</span> we serve best food in the country </h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum, vero?</p>
</div>
<div class="info">
</div>
<div class="info">
</div>
<div class="info">
</div> </div> </div>
</section>

<section class="popular" id="popular">
<div>
<h2 class="heading"> most popular foods </h2>
10
<h1><i class="fa fa-shopping-cart"></i>cart</h1>
<div class="box-container">
<div class="box" data-aos="fade-right">
<img src="/images/product-1.jpg" alt="">
<h3>delicious food</h3>
<div class="stars">
<i class="fas fa-star"></i>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, suscipit?</p>
<h6 class="price">Rs269.00</h6>
<span></span>
<button>Add to cart</button>
</div>
<div class="box" data-aos="fade-left">
<div class="stars">
11
</div>
<span></span>
<button>add to cart</button>
</div>
<div class="box" data-aos="fade-right">
<div class="stars">
</div>
<span></span>
</div>
<div class="box" data-aos="fade-left">
12
<div class="stars">
</div>
<span></span>
</div> </div>
<div class="select"> </div>
</section>


<section class="gallery" id="gallery">
<h2 class="heading"> our food <span>gallery</span> </h2>
<div class="box" data-aos="fade-up">
<img src="/images/img1.jpg"">
13
</div>
<div class=" box" data-aos="fade-up">
<img src="/images/img2.jpg" alt="">
</div>
</div>
</div>
</div>
</div> </div>
</section>


14
<section class="order" id="order">
<h2 class="heading"> make an <span>order</span> </h2>
<div class="row">
<form action="" data-aos="fade-right">
<input type="text" placeholder="your name" class="box">
<input type="email" placeholder="your email" class="box">
<input type="password" placeholder="your password" class="box">
<input type="number" placeholder="your number" class="box">
<textarea name="" id="" cols="30" rows="10" class="box address" placeholder="your

address"></textarea>
<input type="submit" value="order now" class="btn">
</form>
<div class="image" data-aos="fade-left">
<img src="https://source.unsplash.com/720x600/?food dessert" alt="">
</div>
</div>
</section>


<div class="footer">
<div class="box">
<h3>contact info</h3>
<p> <i class="fas fa-map-marker-alt"></i> Mangalore,Karnataka</p>
15
<p> <i class="fas fa-envelope"></i> example@gmail.com </p>
<p> <i class="fas fa-phone"></i> 1234567890 </p>
</div>
<div class="box">
<h3>branch location</h3>
<a href="#">india</a>
<a href="#">USA</a>
<a href="#">france</a>
<a href="#">canada</a>
</div>
<div class="box">
<h3>quick links </h3>
<a href="#">home</a>
<a href="#">about</a>
<a href="#">menu</a>
<a href="#">popular</a>
<a href="#">gallery</a>
<a href="#">order</a>
</div>
<div class="box">
<h3>follow us</h3>
<a href="#">instagram</a>
<a href="#">facebook</a>
<a href="#">twitter</a>
16
<a href="#">linkedin</a>
</div>
</div>
<h2 class="credit"> <a href="#">Copyrights 2021</a> all rights reserved. </h2>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="script.js"></script>

<script>
AOS.init({
delay: 400,
duration: 1000
})
</script>
</body>
</html>
CSS
17
:root{
--yellow:#F7CA3E;
*{
font-family: 'Roboto', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
text-decoration: none;
outline: none; border:none;
text-transform: capitalize;
transition:all .2s linear; }
h2, h3{
font-family: 'Oswald', sans-serif; }
*::selection{
background:var(--yellow);
color:#fff; }
html{
font-size: 62.5%;
overflow-x: hidden; }
body{
overflow-x: hidden;
/* height:200rem; */}
html::-webkit-scrollbar{
width:1.4rem; }
18
html::-webkit-scrollbar-track{
background:#333; }
html::-webkit-scrollbar-thumb{
background:var(--yellow); }
section{
min-height: 100vh;
padding:1rem 10%;
padding-top: 8.5rem; }
.btn{
font-size: 1.7rem;
padding:.7rem 4rem;
border-radius: 5rem;
margin-top: 1rem;
background:none;
color:#333;
cursor: pointer;
border:.2rem solid var(--yellow); }
.btn:hover{
background:var(--yellow); }
.heading{
text-align: center;
font-size: 4rem;
padding:0 .5rem;
color:#333; }
19
.heading span{
color:var(--yellow); }
header{
position: fixed;
top:0; left:0;
z-index: 1000;
width:100%;
background:#fff;
padding:1.5rem 10%;
box-shadow: 0 .3rem 2rem rgba(0,0,0,.1);
display: flex;
align-items: center;
justify-content: space-between; }
header .logo img{
height:5rem; }
header .navbar ul{
display: flex;
justify-content: center;
list-style: none; }
header .navbar ul li{
margin-left: 3rem; }
header .navbar ul li a{
font-size: 1.7rem;
20
color:#666; }
header .navbar ul li a.active,
header .navbar ul li a:hover{
header #menu-bar{
font-size: 3rem;
color:#666;
cursor: pointer;
display: none; }
.home{
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 0;
overflow: hidden; }
.home::before,
.home::after{
content:'';
position: absolute;
top:5rem; right:-6rem;
21
transform:rotate(-45deg);
height:40rem;
width:70rem;
z-index: -2;
animation: animte 1s linear 1; }
@keyframes animte{
0%{
transform:rotate(45deg) translateY(-40rem); }}
.home::before{
top:-7rem;
background:#fff;
box-shadow: 0 1rem 4rem rgba(0,0,0,.1);
z-index: -1; }
.home .image{
flex:1 1 39rem; }
.home .image img{
width:100%; }
.home .content{
flex:1 1 39rem; }
.home .content h3{
color:#333;
font-size: 6rem; }
.home .content p{
color:#666;
22
font-size: 2rem;
padding:1rem 0; }
.about{
display: flex;
flex-wrap: wrap; }
.about .image{
flex:1 1 40rem;
height:50rem;
background: url(https://source.unsplash.com/720x600/?burger) no-repeat;
background-size: cover;
background-position: center;
background-blend-mode: screen;}
.about .content{
flex:1 1 40rem;
padding:2rem; }
.about .content h3{
font-size: 4rem;
color:#333; }
.about .content p{
font-size: 1.6rem;
color:#666;
padding:1rem 0;}
23
.menu .list{
display: flex;
flex-wrap: wrap;
list-style: none;
padding:1rem 0;
margin:2rem 0;
border-top: .3rem dashed rgba(0,0,0,.2);
border-bottom: .3rem dashed rgba(0,0,0,.2);}
.menu .list .btn{
margin:1rem;}
.menu .list .btn.active,
.menu .list .btn:hover{
color:#fff; }
.menu .row{
display: flex;
flex-wrap: wrap; }
.menu .row .image{
margin:2rem;
padding:2rem;
24
flex:1 1 40rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.2); }
.menu .row .image img{
width:100%;
object-fit: cover;
border-radius: 1rem; }
.menu .row .content{
flex:1 1 40rem; }
.menu .row .content .info{
padding:1rem 0; }
.menu .row .content .info h3{
display: flex;
font-size: 2.4rem;
color:#333; }
.menu .row .content .info h3 span{
padding-right: 1rem;
.menu .row .content .info p{
padding:1rem 0;
padding-left: 4.5rem;
font-size: 1.5rem;
color:#666; }
25
.popular{
background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),
url(/images/popular-bg.jpg) no-repeat;
background-position: center;
background-attachment: fixed; }
.popular .box-container{
display: flex;
flex-wrap: wrap; }
.popular .box-container .box{
background:#fff;
width:35rem;
padding:2rem;
margin:2rem;
box-shadow: 0 .3rem .5rem rgba(0,0,0,.2);
text-align: center; }
.popular .box-container .box img{
height:20rem;
width:100%;
object-fit: cover; }
.popular .box-container .box h3{
26
color:#333;
font-size: 3rem;
font-weight: normal; }
.popular .box-container .box .stars i{
color:var(--yellow);
font-size: 2rem;
padding:1rem .1rem; }
.popular .box-container .box .price{
color:#666;
font-size: 2.5rem; }
.popular .box-container .box:hover{
transform: scale(1.02);
box-shadow: 0 1rem 1rem rgba(0,0,0,.2); }
.gallery .box-container{
display: flex;
flex-wrap: wrap; }
.gallery .box-container .box{
height:20rem;
width:30rem;
margin:2rem;
cursor: pointer;
overflow: hidden;
27
position: relative; }
.gallery .box-container .box img{
height:100%;
width:100%;
.gallery .box-container .box h3{
position: absolute;
top:100%; left:50%;
transform: translate(-50%, -50%);
color:#fff;
text-align: center;
font-size: 3rem;
opacity: 0; }
.gallery .box-container .box:hover h3{
top:50%;
opacity: 1;
transition-delay: .2s; }
.gallery .box-container .box::before{
content: '';
position: absolute;
top:-100%; left:0;
height:100%;
width: 100%;
background:rgba(0,0,0,.7);
28
transition:.2s linear; }
.gallery .box-container .box:hover::before{
top:0; }
.order{
background:url(../images/contact-bg.jpg) no-repeat;
background-position: center; }
.order .row{
display: flex;
background:#fff;
margin:2rem 0;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
border-radius: 1rem;}
.order .row .image{
flex:1 1 40%; }
.order .row .image img{
height:100%;
width:100%;
.order .row form{
flex:1 1 60%;
background:#fff;
padding:2rem; }
29
.order .row form .box{
padding:1rem;
margin:1rem 0;
font-size: 1.5rem;
color:#333;
text-transform: none;
background:#f0f0f0;
width:100%; }
.order .row form .box::placeholder{
text-transform: capitalize; }
.order .row form .address{
resize: none;
height:15rem; }
.footer{
background:#282727;
padding:1rem 7%; }
.footer .box-container{
display: flex;
flex-wrap: wrap;}
.footer .box-container .box{
flex:1 1 25rem;
margin:2rem;}
.footer .box-container .box h3{
font-size: 2.5rem;
30
color:#fff;
padding:1rem 0;
font-weight: normal; }
.footer .box-container .box p{
font-size: 1.7rem;
color:#eee;
padding:1rem 0; }
.footer .box-container .box a{
font-size: 1.7rem;
color:#eee;
padding:1rem 0;
display: block; }
.footer .box-container .box a:hover{
color:var(--yellow);}
.footer .box-container .box p i{
padding-right: .5rem;
.footer .credit{
font-size: 2rem;
text-align: center;
border-top: .2rem solid rgba(255,255,255,.7);
padding:2rem 1rem;
font-weight: normal;
letter-spacing: .1rem;
31
color:#fff;}
.footer .credit a{
/* media queries */
@media (max-width:991px){
html{
font-size: 55%; }
.home::before,
.home::after{
display: none;}
header #menu-bar{
display: block; }
header .navbar{
position: fixed;
top:8rem; left:0;
width:100%;
border-top: .2rem solid rgba(0,0,0,.1);
transform:scaleY(0);
transform-origin: top;
opacity: 0;}
header .navbar ul{
32
flex-flow: column;
padding:2rem;}
header .navbar ul li{
margin:1.5rem;
width: 100%;}
header .navbar ul li a{
display: block;
color:#fff;
padding-left: 2rem;
border-left: .2rem solid #fff;
font-size: 2rem;}
header .navbar ul li a:hover,
header .navbar ul li a.active{
color:#333;
border-color: #333;}
.fa-times{
transform:rotate(180deg);}
header .navbar.nav-toggle{
transform:scaleY(1);
opacity: 1;}
.home .content{
text-align: center;}
.home .content h3{
font-size: 4.5rem;}
33
.order .row .image{
display: none;}}
html{
font-size: 50%;}
section{
padding:1rem 5%;
padding-top: 8.5rem;}}
/*Add to cart*/
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css');
h1{
width: 3%;
position:relative;
font-size: 20px;
left: 90%;
cursor: pointer;
top:-8px;
h1:before{
content: attr(data-count);
position: absolute;
color: white;
right: 16px;
34
font-size: 15px;
text-align: center;
top: -15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
opacity: 0;}
h1.zero:before{
opacity: 1;}
button{
padding: 5px;
background: red;
border: none;
outline: none;
font-weight: bold;
color: #fafafa;
cursor: pointer;}
section div span{
position: absolute;
top: 14px;
left: 13px;
width: 300px;
height: 186px;
35
display: none;}
section div span img{
width: 100%;
height: 100%;}
section div:nth-child(1)>span.active{
animation: first 0.5s ease-in;
z-index: 2;
display: block;}
animation: second 0.5s ease-in;
z-index: 2;
display: block;}
animation: third 0.5s ease-in;
z-index: 2;
display: block;}
animation: four 0.5s ease-in;
z-index: 2;
display: block;}
@keyframes first{
to{
width: 30px;
height: 20px;
36
left: 1290px;
top:-70px;}}
@keyframes second{
to{
width: 30px;
height: 20px;
left: 948px;
top:-70px;}}
@keyframes third{
to{
width: 30px;
height: 20px;
left: 645px;
top:-70px;}}
@keyframes four{
to{
width: 30px;
height: 20px;
left: 265px;
top:-70px;}}
.select{
width: 60%;
height: 580px;
background: #222;
37
position: absolute;
top: -1000px;
left: 20%;
border:1px solid white;
transition: 0.5s;
overflow-y: auto;
margin: auto;}
.select.display{
top: 2850px;
z-index:1000;}
.select div{
width: 100%;
height: 200px;
display: flex;
padding: 0px;
position: relative;
margin: auto;}
.select div img{
width: 300px;
height: 100%;}
.select div p{
padding: 10px;
color: white;
38
font-size: 20px;}
.select h3{
position: relative;
top:50%;
left:40%;
color: white;
font-size: 15px;}
.select .price{
position: relative;
top:50%;
right: 50%;
font-size: 20px;
color: white;}
.select div .stars{
position: absolute;
top: 0px;
left:0px;
color: white;}
.select div .stars i{
position: relative;
top:70%;
left:90%;}
.select div h6,
.select div button{
39
position: absolute;
color: white;}
.select div button{
top: 45%;
left: 80%;}
.select div span{
display: none;}
@media (min-width:888px){
.select div{
width: 100%;
height: 200px;
display: flex;
padding: 0px;
position: relative;
margin: auto;}
.select div img{
width: 300px;
height: 100%;}
.select div p{
padding: 10px;
color: white;
font-size: 15px;}
.select .price{
40
position: relative;
top:50%;
right: 25%;
font-size: 15x;
color: white;}
.select div .stars{
position: absolute;
color: white;}
position: relative;
top:75%;
left:66%;}
.select div h6,
.select div button{
position: absolute;
color: white;}
.select div button{
top: 45%;
left: 80%;}
.select div span{
display: none;}}
@media (min-width: 200px){
.select.display{
top: 2500px;
41
z-index:1000;}
.select div{
width: 100%;
height: 150px;
display: flex;
padding: 0px;
position: relative;
margin: auto;}
.select div img{
width: 120px;
height: 100%;}
.select div p{
font-size: 8px;
float: left;
margin-right: 51px;
padding: 12px;
position: relative;}
.select h3{
position: relative;
top: 3%;
left: 2%;
font-size: 9px;}
.select .price{
42
position: relative;
top: 68%;
left: -132px;
font-size: 14px;}
display: none;}
.select div button{
top: 84%;
left: 65%;
font-size: 8px;}
.select .price{
position: relative;
left: -47%;}}
.select h3{
font-size: 15px;}
.select div p{
font-size: 13px;
margin-left: 10px;}
.select .price{
position: relative;
left: -71%;
top: 83%;
43
font-size: 5px;}
display: none;}
.select div button{
left: 75%;
font-size: 9px;}}
.select h3{
font-size: 15px;}
.select div p{
font-size: 13px;
margin-left: 10px;}
.select .price{
position: relative;
left: -45%;
top: 83%;}}
.select div{
width: 100%;
height: 200px;
display: flex;
padding: 0px;
position: relative;
44
margin: auto;}
.select h3{
font-size: 21px;}
.select div img{
width: 200px;
height: 100%;}
.select div p{
padding: 10px;
color: white;
font-size: 15px;
margin-left: 10px;}
.select .price{
position: relative;
top:77%;
left: -186px;
font-size: 15x;
color: white;}
.select div h6,
.select div button{
position: absolute;
color: white;}
.select div button{
top: 72%;
left: 80%;}}
45
.select div p{
padding: 15px;
margin-left: 14px;
font-size: 17px; }
.select h3{
font-size: 21px;}}
.select .price{
font-size: 17px; }
.select div button{
font-size: 11px;}}
.select.display{
top: 3300px;
z-index:1000;}
.select div{
width: 100%;
height: 200px;
display: flex;
padding: 0px;
position: relative;
margin: auto;}
.select div img{
46
width: 300px;
height: 100%;}
.select div p{
padding: 2px;
font-size: 15px;
margin-top: 20px;
left: 28px;}
.select h3{
position: relative;
top: 6%;
left: 3%;
font-size: 18px;}
.select .price{
top:73%;
font-size: 17px;}
.select div button{
top: 67%;
left: 80%;
font-size: 17px;}}
.select div p{
font-size: 20px;}}
.select .price{
47
left: -44%;}}
JAVASCRIPT
$(document).ready(function(){
$('#menu-bar').click(function(){
$(this).toggleClass('fa-times');
$('.navbar').toggleClass('nav-toggle');});
$(window).on('load scroll',function(){
$('#menu-bar').removeClass('fa-times');
$('.navbar').removeClass('nav-toggle');
$('section').each(function(){
let top = $(window).scrollTop();
let height = $(this).height();
let id = $(this).attr('id');
let offset = $(this).offset().top - 200;
if(top > offset && top < offset + height){
$('.navbar ul li a').removeClass('active');
$('.navbar').find(`[href="#${id}"]`).addClass('active');
});});
$('.list .btn').click(function(){
$(this).addClass('active').siblings().removeClass('active');
let src = $(this).attr('data-src');
$('.menu .row .image img').attr('src',src);
});
48
});
var noti= document.querySelector('h1');
var select= document.querySelector('.select');
var button= document.getElementsByTagName('button');
for(but of button){
but.addEventListener('click',(e)=>{
var add = Number(noti.getAttribute('data-count')||0);
noti.setAttribute('data-count',add+1);
noti.classList.add('zero');
//copy and paste element//
var parent= e.target.parentNode;
var clone= parent.cloneNode(true);
select.appendChild(clone);
clone.lastElementChild.innerText="Buy-now";
if(clone){
noti.onclick=()=>{
select.classList.toggle('display');}}
//image to cart//
var image=e.target.parentNode.querySelector('img');
var span=e.target.parentNode.querySelector('span');
var s_image =image.cloneNode(false);
span.appendChild(s_image);
span.classList.add('active');
setTimeout(()=>{
49
span.removeChild(s_image);
span.classList.remove('active');
},500);
})}
OUT-PUT SCREEN SHOTS:
50
Conclusion:
package in satisfying all the requirements of the school. The objective of
software planning is to provide a frame work that enables the manger to make
reasonable estimates made within a limited time frame at the beginning of the
51
software project and should be updated regularly as the project progresses.At
the end it is concluded that we have made effort on following points..
.• A description of the background and context of the project and its relation to
workalready done in the area.
• Made statement of the aims and objectives of the project.
• The description of Purpose. Scope, and applicability
• We define the problem on which we are working in the project
. • We describe the requirement Specifications of the system and the actions thatcan be
done on these things.
• We understand the problem domain and produce a model of the system,
whichdescribes operations that can be performed on the system.
• We included features and operations in detail, including screen layouts
• We designed user interface and security issues related to system . Finally the system is
implemented and tested according to test cases
Limitation of Project on Online Food Ordering System: Although I have put my

best efforts to make the software flexible, easy to operate but limitations cannot
be ruled out even by me. Though the software presents a broad range of options
to its users some intricate options could not be covered into it; partly because of
logistic and partly due to lack of sophistication. Paucity of time was also major
constraint, thus it was not possible to make the software foolproof and dynamic
Lack of time also compelled me to ignore some part such as storing old result of
the candidate etc.Considerable efforts have made the software easy to operate
even for the people not related to the field of computers but it is acknowledged
that a layman may find it a bit problematic at the first instance.
The user is provided help at each step for his convenience in working with
thesoftware.List of limitations which is available in the Online Food Ordering
System:
• Excel export has not been developed for Food Item Category due to some criticality
• The transactions are executed in off-line mode, hence on-line data for Customer
Order capture and modification is not possible.
• Off-line reports of Food Item. Confirm Order. Customer cannot be generated due
tobatch mode execution.
THANK YOU.
RESOURCE -Unsplash Source(free images), Google images.
52

Project Report Of: Simple Food and Reasturant Webpage (Front End)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Project Report Of: Simple Food and Reasturant Webpage (Front End)

Uploaded by

Copyright:

Available Formats

Project report of

“SIMPLE FOOD AND REASTURANT WEBPAGE (FRONT END) ”

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD

BACHELOR OF COMPUTER SCIENCE (BSc)

ST ALOYSIUS COLLEGE (AUTONOMOUS), MANGALURU

WORK CARRIED OUT AT

ST ALOYSIUS COLLEGE (AUTONOMOUS)

DURING THE ACADEMIC YEAR 2020 – 21

ST ALOYSIUS COLLEGE (AUTONOMOUS), MANGALURU

Department of Computer Science, Application & Animation

This is to certify that the student Mr, with ( ) of IV

PROJECT GUIDE SIGNATURE HOD’S SIGNATURE

Assistant Professor, Department of Assistant Professor, Department of

3 Output screenshots 44-45

⦁ Programming language: Java Script , HTML , CSS.

⦁ Hardware requirement : Computer , Mobile and etc.

⦁ Software requirement : VS code Editor , Any browser , Figma

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title> Food and Restaurant </title>

<link rel="stylesheext" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">

<link rel="preconnect" href="https://fonts.gstatic.com">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

<link rel="stylesheet" href="style.css">

<a href="#" class="logo"><img src="/images/logo-img.png" alt=""></a>

<div id="menu-bar" class="fas fa-hamburger"></div>

<ul> <li><a class="active" href="#home">home</a></li>

<li><a href="#order">order</a></li> </ul>

<section class="home" id="home">

<div class="content" data-aos="fade-right">

<h3>We belive good food offer great smile</h3>

<a href="#"><button class="btn">get started</button></a>

<div class="image" data-aos="fade-up">

<img src="https://source.unsplash.com/720x600/?food" alt="food image">

<div class="image" data-aos="fade-right"></div>

<div class="content" data-aos="fade-left">

<h3>a word about us</h3>

consequuntur, praesentium accusamus harum voluptate soluta.</p>

<a href="#"><button class="btn">learn more</button></a>

<section class="menu" id="menu">

<h2 class="heading"> our delicious <span>menu</span> </h2>

<ul class="list" data-aos="fade-down">

<li class="btn" data-src="/public/images/menu1.jpg">breakfast</li>

<li class="btn active" data-src="/public/images/menu2.jpg">lunch</li>

<li class="btn" data-src="/public/images/menu3.jpg">dinner</li>

<li class="btn" data-src="/public/images/menu4.jpg">dessert</li>

<div class="row" data-aos="fade-right">

<div class="image" data-aos="fade-left">

<h3> <span>01.</span> we serve best food in the country </h3>

<h3> <span>02.</span> we serve best food in the country </h3>

<h3> <span>03.</span> we serve best food in the country </h3>

<h3> <span>04.</span> we serve best food in the country </h3>

</div> </div> </div>