FOOD BLOGGING

WEBSITE
A PROJECT REPORT
Submitted by

NIDHI JAIN
PRACHI MURUDKAR
SAYALI NIMBALKAR
In Partial Fulfillment for the Award Of

DIPLOMA
IN
INFORMATION TECHNOLOGY

DEPARTMENT OF INFORMATION TECHNOLOGY

2022
1
 GOVERNMENT POLTECHNIC MUMBAI

CERTIFICATE
This is to certify that the project entitled “FOOD BLOGGING WEBSITE” is the
bonafide that work of “NIDHI JAIN (SS20IF002)”, “PRACHI MURUDKAR
(SS20IF020)”, “SAYALI NIMBALKAR (SS20IF059)” submitted in partial
fulfillment of the requirements for the award of Diploma in Information Technology
of Government Polytechnic Mumbai.

HEAD OF DEPARTMENT PROJECT MENTOR

Dr. H. M. Pardeshi Mrs. Deepali Gosavi

PRINCIPAL EXTERNAL EXAMINER

Dr. D.K.Gupta Sir

2
 DECLARATION
We hereby declare that the project entitled “FOOD BLOGGING
WEBSITE” being submitted by us towards the partial fulfillment of the
requirements for the award of Diploma in Information Technology is a
project work carried by us under the supervision of Mrs. Deepali Gosavi
Mam and have not been submitted anywhere else.

We will be solely responsible if any kind of plagiarism is found.

Date:

Student Name Enrollment No

Nidhi Jain SS20IF002
Prachi Murudkar SS20IF020
Sayali Nimbalkar SS20IF059

3
 ACKNOWLEDGEMENT
Project is a huge team effort. My team extends our deepest
gratitude and thanks to the following people to have helped
us to achieve our work. I would like to thank Mr. Kunal
Deokar Sir, Mrs. Deepali Gosavi for guiding us and helping
in the time of need.
My team and I extend thanks to other faculties of our college
whom we have approached for the academic help with
regards to our project.

NIDHI JAIN (SS20IF002)

PRACHI MURUDKAR (SS20IF020)

SAYALI NIMBALKAR (SS20IF059)

4
 ABSTRACT
Food Industry has always been a profitable industry not only for
manufacturers, suppliers, but also for the users, distributers. The
online food delivery system is the need of hour because of the
recent changes in the industry and the increasing use of the
internet. A Real-time online food ordering system for the
customer is our proposed system. The traditional queueing
system drawbacks and disadvantages are overcome by our
system application. Food can be ordered online in a hassle-free
manner through our proposed system from restaurants as well as
mess services. The food order taking methods from customer are
improved by our system application. A Food Menu is set up
online and as per their wish customers can simply place their
order through the proposed system. Also, customers can
effortlessly track the orders with a food menu. Users can rate the
food items over the feedback system provided by the system.
Also, restaurants and mess services are recommended to the new
customers based on the user ratings through the proposed system
and for the improvements with the quality, the restaurant/mess
staff will be informed. For the initial implementation of the
system application pay-on-delivery payment system is used.
Separate accounts are maintained for each user for more secured
ordering by providing an ID and a password.

Keywords: Automated food ordering system, Database

Management, Internet of things, Smartphone.

5
 Table of Contents
1. Introduction
1.1 Basic Idea
1.2 Motivation
1.3 Scope of the Work
1.4 Outline of the Project

2. Literature Review
2.1 Apps Referred

2.1.1 Eat Sure

3. Planning Phase
3.1 Technology Stack

3.1.1 Front End

3.1.2 Back End

3.2 Software used for Development

3.3 Flow of the System

3.3.1 Flowchart

3.3.2 Application Flow

3.3.3 Flowchart of Website

4. Screenshots

6
5. Future Scope

6. Reference and Conclusion

7
 1. INTRODUCTION

The labour rates are increasing steadily year on year thus making
it difficult to find employees. The food industry is highly labour
intensive and the biggest expense in the food industry is the cost
of employing the right kind of people to do the work. One of the
ways to reduce this expense is to use modern technology to
replace some of the jobs done by human beings and make
machines do the work. Here we propose an “Online Food
Ordering System” that has been designed for Fast Food
restaurant, Take-Out or College Cafeterias. The system can also
be used in any food delivery industry. This simplifies the process
of food ordering for both the customer and the restaurant, as the
entire process of taking orders is automate

1.1 Basic Idea:

An online food menu is set up by the proposed food
ordering system and as per their will customers can easily
place the order. Also, customers can easily track the orders
with the food menu. The management improve food
delivery service and preserves customers database.
Motivation to develop the system is from the restaurant
management system. To get the services efficiently the

8
 users of the system provides various facilities. Restaurants
as well as Mess facility is considered by our system for the
customers. Mostly mess users are person who are shifted
to new cities and this can be considered as a motivation to
our system. Another motivation can be considered as the
increasing use of smart phones by the customers, so that
any users of this system get all service of the system.

1.2 Motivation:
Food websites provide the freedom to order from any
place at any time without pausing everything and making a
call to the restaurant. The food experience has come a long
way it has become a much more hassle-free.
The principal objective of our website should always be to
attract customers and as such an online booking function is
the most essential feature.

1.3 Scope of the work:

People don’t use their smartphones to hold conversations.
They’d rather send text messages, use apps, or access
businesses online. It’s not just young people following this
trend. Older smartphone owners don’t like making phone
calls either.

9
 Your website can let customers place orders without
talking to any of your employees. People read your menu,
select the items that they want, and submit their orders.
You can even enable them to pay online. Make it as easy
as possible for people to spend money at your restaurant. It
will only boost your revenue.

1.4 Outline of the Project:

This Online Food blog website is in HTML, JavaScript.
Talking about the features of this website it contains the
admin(manager) section and the user (customer) section.
All the editing, updating, managing order details, food
items are from the admin section while customers can only
go through the site and give orders if want. The design of
this website is simple so that the user won’t get any
difficulties while working on it.

10
 2. LITERATURE REVIEW

In an automated food webiste is proposed which will keep track

of user orders smartly. Basically, they implemented a food
website for different type of restaurants in which user will make
order or make custom food by one click only. By means of
android application for Tablet PCs this system was implemented.
The front end was developed using JAVASCRIPT, HTML, CSS
and at the backend Google sheet, github, database, vs code was
used.
In Customer using a Smartphone is considered as a basic
assumption for the system. When the customer approach to the
restaurant, the saved order can be confirmed by touching the
Smartphone. The list of selected preordered items shall be shown
on the kitchen screen, and when confirmed, order slip shall be
printed for further order processing. The solution provides easy
and convenient way to select pre-order transaction form
customers.
2.1 Apps Referred:
2.1.1 EatSure:
EatSure is a food delivery app, which brings you popular
restaurants that serve delicious food while abiding by the
best-in-class safety measures. This enables you to trust the
food that you relish so much.

11
 3. TECHNOLOGY STACK

3.1 Front End:

3.1.1 HTML:
The HyperText Markup Language or HTML is the
standard markup language for documents designed to be
displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS)
and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web
server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of
a web page semantically and originally included cues for
the appearance of the document
3.1.2 JavaScript:
JavaScript, often abbreviated as JS, is a programming
language that is one of the core technologies of the World
Wide Web, alongside HTML and CSS. As of 2022, 98%
of websites use JavaScript on the client side for webpage
behavior, often incorporating third-party libraries.
JavaScript is the world's most popular programming
language.
JavaScript is the programming language of the
Web.JavaScript is easy to learn. JavaScript is used by
programmers across the world to create dynamic and
interactive web content like applications and browsers.
JavaScript is so popular that it's the most used

12
 programming language in the world, used as a client-side
programming language by 97.0% of all website.

3.1.3 CSS:
Cascading Style Sheets (CSS) is a stylesheet language used to
describe the presentation of a document written
in HTML or XML (including XML dialects such
as SVG, MathML or XHTML). CSS describes how elements
should be rendered on screen, on paper, in speech, or on other
media.CSS is among the core languages of the open web and is
standardized across Web browsers according to W3C
specifications. Previously, the development of various parts of CSS
specification was done synchronously, which allowed the
versioning of the latest recommendations. You might have heard
about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or
a CSS4; rather, everything is now CSS without a version number.

3.2Back End:
3.1.1 Google Sheet:
Google Sheets is a cloud-based spreadsheet application
that can store data in a structured way just like most
database management systems. You can also edit and
delete data with a couple of clicks and, on top of that,
access your data online. Google Sheets is the product of
Google that holds the capacity of spreadsheets via the
cloud. It have a lot more features or functionalities
compared to a standard spreadsheet.

13
 It comes with a built-in app development platform referred
to as “Apps Script.” Depending on JavaScript, it covers a
lot of tasks that you can perform in Excel. App script
comes with a JDBC service that helps connect with
MySQL, Microsoft SQL Server, and Oracle databases.

3.3 Software used for Development:

3.3.1 VS code:
Visual Studio Code, also commonly referred to as VS
Code, is a source-code editor made by Microsoft with
the Electron Framework,
for Windows, Linux and macOS. Features include support
for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git.
Users can change the theme, keyboard shortcuts,
preferences, and install extensions that add additional
functionality.https://en.m.wikipedia.org/wiki/Visual_Studi
o_Code#cite_note-StackOverflow2021-12. Visual Studio
Code is a streamlined code editor with support for
development operations like debugging, task running, and
version control. It aims to provide just the tools a
developer needs for a quick code-build-debug cycle and
leaves more complex workflows to fuller featured IDEs,
such as Visual Studio IDE. It's Free (open source). It's
written in Typescript, meaning bugs in the program are
less weird than other Electron things are, usually. (Not
everyone uses strong types when writing JavaScript apps,
and that's terrible.)Visual Studio Code provides basic

14
support for HTML programming out of the box. There is
syntax highlighting, smart completions with IntelliSense,
and customizable formatting. VS Code also includes great
Emmet support.

3.3.2 Github:
GitHub is a website and cloud-based service that helps
developers store and manage their code, as well as track
and control changes to their code. To understand exactly
what GitHub is, you need to know two connected
principles:
• Version control
• Git
GitHub reported having over 83 million developers and
more than 200 million repositories, including at least
28 million public repositories. It is the largest source
code host as of November 2021.
GitHub is a code hosting platform for version control and
collaboration. It lets you and others work together on
projects from anywhere. This tutorial teaches you GitHub
essentials like repositories, branches, commits, and pull
requests.

15
3.3 Flow of the System:
3.3.1 Flowchart:
A flowchart is a type of diagram that represents a
workflow or process. A flowchart can also be defined as a
diagrammatic representation of an algorithm, a step-by-
step approach to solving a task. Flowcharts are used in
analyzing, designing, documenting or managing a process
or program in various fields.

3.3.2 Application Flow:

All requests made from a mobile app or UI will go to different
services via the API gateway. API gateway will take care of load
balancing and routing requests to services. This will authenticate
and authorize the user and send back the token ID. This token is
used for further communication.
Different services like, user registration and management
service, order service, payment service will use transactional
databases.
Information about different restaurants, their menu, price, offers,
etc. will be stored in backend database GoogleSheet. We can use
a multi-node cluster here. Whenever a customer searches for a
menu/cuisines it will be fetched from elastic search. Elastic
search provides fast scalable search options
Once the user selects the dishes and quantity from the restaurant.
He will go to the checkout option and then do payment.
Different payment gateways and payment options are integration

16
with the system and upon successful payments, the order is
successfully placed.
Once the order is placed all the information is sent to the central
message Queue like Kafka. The order processing unit reads the
order info and then notifies the selected restaurant about the
order. At the same time, it searches for available delivery
partners to nearby locations to pick up the order. It also gets the
information like preparation time from the restaurant and
estimated pickup time from the delivery partner based on his
location and other details. it will select the best available
delivery partner and he is notified about order and restaurant
details.
The user gets push notification about the order. The order
processing and tracking service will work together and the user
can track their order status, live location of the delivery person,
etc.
Delivery person pickup order and deliver to customers.

17
3.3.3 Flowchart of Website:

18
index.html:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Food Diaries </title>

<!-- font awesome cdn link -->

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

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

<!-- custom css file link -->

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

</head>

<body>

<!-- header section starts -->

<header>

<a href="#" class="logo"><i class="fas fa-utensils"></i>Food</a>

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

19
 <nav class="navbar">

<a href="#home">home</a>

<a href="#speciality">speciality</a>

<a href="#popular">popular</a>

<a href="#gallery">gallery</a>

<a href="#review">review</a>

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

</nav>

</header>

<!-- header section ends -->

<!-- home section starts -->

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

<div class="content">

<h3>food made with love</h3>

<p>What makes a dish unique - mention if this is a ‘house special,’ a ‘best seller’
or a ‘family recipe’.</p>

<a href="#order" class="btn">order now</a>

</div>

20
 <div class="image">

<img src="images/home-img.png" alt="">

</div>

</section>

<!-- home section ends -->

<!-- speciality section starts -->

<section class="speciality" id="speciality">

<h1 class="heading"> our <span>speciality</span> </h1>

<div class="box-container">

<div class="box">

<img class="image" src="images/s-img-1.jpg" alt="">

<div class="content">

<img src="images/s-1.png" alt="">

<h3>tasty burger</h3>

<p>The best burgers offer a combination of tastes and textures – sweet,

sour, salt – with a bit of crunch. The patty needs to be juicy, the bun soft but sturdy,
and you want the meat/bun/accompaniment ratio to be even from first to last bite.

</p>

</div>

21
 </div>

<div class="box">

<img class="image" src="images/s-img-2.jpg" alt="">

<div class="content">

<img src="images/s-2.png" alt="">

<h3>tasty pizza</h3>

<p>The best pizza to be cooked to a crisp. The cheese should be melted, the
crust should have some crunch to it, the toppings should be well-cooked and the whole
thing should be served piping hot. In the end, what makes a perfect pizza perfect is
really up to you.</p>

</div>

</div>

<div class="box">

<img class="image" src="images/s-img-3.jpg" alt="">

<div class="content">

<img src="images/s-3.png" alt="">

<h3>cold ice-cream</h3>

<p>Delectable is a good word to use when you aren't quite sure how to
describe the taste, but you just know you like it. The word means delicious. What is
this? Ice cream with rich flavors and high-quality ingredients may be described as
exquisite.</p>

</div>

</div>

<div class="box">

<img class="image" src="images/s-img-4.jpg" alt="">

<div class="content">

<img src="images/s-4.png" alt="">

22
 <h3>cold drinks</h3>

<p>Fizzy A nonalcoholic, flavoured, carbonated beverage, usually

commercially prepared and sold in bottles or cans. Fizzy drinks are also called soda or
pop or a cold drink.</p>

</div>

</div>

<div class="box">

<img class="image" src="images/s-img-5.jpg" alt="">

<div class="content">

<img src="images/s-5.png" alt="">

<h3>tasty sweets</h3>

<p>I simply loved it. Looks like a flower, and tastes like heaven. Indeed,
this cake is simply amazing. Thank you so much for making our celebration greater
indeed</p>

</div>

</div>

<div class="box">

<img class="image" src="images/s-img-6.jpg" alt="">

<div class="content">

<img src="images/s-6.png" alt="">

<h3>healty breakfast</h3>

<p>For the most nutritious breakfast, try to choose whole, unprocessed

foods from each of the five food groups: fruits, vegetables, grains, protein foods, and
dairy. Try to include proteins from foods like yogurts (look for varieties with less
sugar added), eggs, nuts and seeds or legumes..</p>

</div>

</div>

23
 </div>

</section>

<!-- speciality section ends -->

<!-- popular section starts -->

<section class="popular" id="popular">

<h1 class="heading"> most <span>popular</span> foods </h1>

<div class="box-container">

<div class="box">

<span class="price"> ₹49 - ₹399 </span>

<img src="images/p-1.jpg" alt="">

<h3>tasty burger</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

24
 <a href="#" class="btn">order now</a>

</div>

<div class="box">

<span class="price"> ₹300 - ₹600 </span>

<img src="images/p-2.jpg" alt="">

<h3>tasty cakes</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

<a href="#" class="btn">order now</a>

</div>

<div class="box">

<span class="price"> ₹100 - ₹500 </span>

<img src="images/p-3.jpg" alt="">

<h3>tasty sweets</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

25
 </div>

<a href="#" class="btn">order now</a>

</div>

<div class="box">

<span class="price"> ₹50 - ₹200 </span>

<img src="images/p-4.jpg" alt="">

<h3>tasty cupcakes</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

<a href="#" class="btn">order now</a>

</div>

<div class="box">

<span class="price"> ₹60 - ₹300 </span>

<img src="images/p-5.jpg" alt="">

<h3>cold drinks</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

26
 <i class="far fa-star"></i>

</div>

<a href="#" class="btn">order now</a>

</div>

<div class="box">

<span class="price"> ₹50 - ₹250 </span>

<img src="images/p-6.jpg" alt="">

<h3>cold ice-cream</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

<a href="#" class="btn">order now</a>

</div>

</div>

</section>

<!-- popular section ends -->

<!-- steps section starts -->

27
<div class="step-container">

<h1 class="heading">how it <span>works</span></h1>

<section class="steps">

<div class="box">

<img src="images/step-1.jpg" alt="">

<h3>choose your favorite food</h3>

</div>

<div class="box">

<img src="images/step-2.jpg" alt="">

<h3>free and fast delivery</h3>

</div>

<div class="box">

<img src="images/step-3.jpg" alt="">

<h3>easy payments methods</h3>

</div>

<div class="box">

<img src="images/step-4.jpg" alt="">

<h3>and finally, enjoy your food</h3>

</div>

</section>

28
</div>

<!-- steps section ends -->

<!-- gallery section starts -->

<section class="gallery" id="gallery">

<h1 class="heading"> our food <span> gallery </span> </h1>

<div class="box-container">

<div class="box">

<img src="images/g-1.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>“You are what what you eat eats.”</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-2.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

29
 <p>"Food is symbolic of love when words are inadequate."</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-3.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>"My weaknesses have always been food."</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-4.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>"You don't need a silver fork to eat good food."</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-5.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>"People who love to eat are always the best people."</p>

30
 <a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-6.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>“There is no love sincerer than the love of food.”</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-7.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>“Pull up a chair. Take a taste. Come join us. Life is so endlessly

delicious.”</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-8.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>“All you need is love. But a little chocolate now and then doesn't
hurt.”</p>

31
 <a href="#order" class="btn">ordern now</a>

</div>

</div>

<div class="box">

<img src="images/g-9.jpg" alt="">

<div class="content">

<h3>tasty food</h3>

<p>"The people who give you their food give you their heart."</p>

<a href="#order" class="btn">ordern now</a>

</div>

</div>

</div>

</section>

<!-- gallery section ends -->

<!-- review section starts -->

<section class="review" id="review">

<h1 class="heading"> our customers <span>reviews</span> </h1>

<div class="box-container">

32
 <div class="box">

<img src="images/pic1.png" alt="">

<h3>Omkar Patil</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

<p>Delicious meals are tasty, appetizing, scrumptious, yummy, luscious,

delectable, mouth-watering, fit for a king, delightful, lovely, wonderful, pleasant,
enjoyable, appealing, enchanting, charming. You wouldn't call delicious that what is
tasteless or unpleasant</p>

</div>

<div class="box">

<img src="images/pic2.png" alt="">

<h3>Priansh Mehta </h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

33
 <p>Very nice food . I have never ate food tastier than this.</p>

</div>

<div class="box">

<img src="images/pic3.png" alt="">

<h3>Jayesh </h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="far fa-star"></i>

</div>

<p>How can one make so tasty plus healthy food i am blessed to eat food like
this .</p>

</div>

</div>

</section>

<!-- review section ends -->

<!-- order section starts -->

<section class="order" id="order">

34
 <h1 class="heading"> <span>order</span> now </h1>

<div class="row">

<div class="image">

<img src="images/order-img.jpg" alt="">

</div>

<form name="submit-to-google-sheet">

<div class="inputBox">

<input type="text" name="Name" placeholder="Name">

<input type="email" name="Email" placeholder="Email">

</div>

<div class="inputBox">

<input type="number" name="Numbers" placeholder="Number">

<input type="text" name="FoodName" placeholder="Food name">

</div>

<textarea placeholder="Address" name="Address" id="" cols="30"

rows="10"></textarea>

<button type="submit" class="btn btn2 button1" onclick="submit-to-google-

sheet">Order Now</button>

35
 <span id="msg"></span>

</form>

</div>

</section>

<!-- order section ends -->

<!-- footer section -->

<section class="footer">

<div class="share">

<a
href="https://www.facebook.com/profile.php?id=100088644923797&mibextid=ZbW
KwL" class="btn">facebook</a>

<a href="https://instagram.com/_.fooddiariess._?igshid=YmMyMTA2M2Y="
class="btn">twitter</a>

<a
href="https://twitter.com/FoodDiaries15?t=VueVTrE3u1qmRAOUViBFrQ&s=09"
class="btn">instagram</a>

<a href="https://pin.it/2rsF80z" class="btn">pinterest</a>

</div>

36
 <h1 class="credit"> created by <span> Prachi, Sayali, Nidhi </span> | all rights
reserved! </h1>

</section>

<!-- scroll top button -->

<a href="#home" class="fas fa-angle-up" id="scroll-top"></a>

<!-- loader -->

<div class="loader-container">

<img src="images/loader.gif" alt="">

</div>

<!-- custom js file link -->

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

<script>

const scriptURL =
'https://script.google.com/macros/s/AKfycbxJnCGwsw5J4l9lh6W-tNoS0fbOV2dI8-
A0TPzy1XveFGfRaRCretx6f6jYMOXh6H7f/exec'

const form = document.forms['submit-to-google-sheet']

const msg = document.getElementById("msg")

form.addEventListener('submit', e => {

e.preventDefault()

fetch(scriptURL, { method: 'POST', body: new FormData(form)})

.then(response => {

37
 msg.innerHTML = "Order created sucessfully"

setTimeout(function(){

msg.innerHTML = ""

},5000)

form.reset()

})

.catch(error => console.error('Error!', error.message))

})

</script

</body>

</html>

style.css:

38
@import
url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;
700&display=swap');

:root{
--red:#ff3838;
}

*{
font-family: 'Nunito', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition:all .2s linear;
}

*::selection{
background:var(--red);
color:#fff;
}

html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
}

body{
background:#f7f7f7;
}

section{
padding:2rem 9%;
}

.heading{
text-align: center;

39
 font-size: 3.5rem;
padding:1rem;
color:#666;
}

.heading span{
color:var(--red);
}

.btn{
display: inline-block;
padding:.8rem 3rem;
border:.2rem solid var(--red);
color:var(--red);
cursor: pointer;
font-size: 1.7rem;
border-radius: .5rem;
position: relative;
overflow: hidden;
z-index: 0;
margin-top: 1rem;
}

.btn::before{
content: '';
position: absolute;
top:0; right: 0;
width:0%;
height:100%;
background:var(--red);
transition: .3s linear;
z-index: -1;
}

.btn:hover::before{
width:100%;
left: 0;
}

.btn:hover{

40
 color:#fff;
}

header{
position: fixed;
top:0; left: 0; right:0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background:#fff;
padding:2rem 9%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

header .logo{
font-size: 2.5rem;
font-weight: bolder;
color:#666;
}

header .logo i{
padding-right: .5rem;
color:var(--red);
}

header .navbar a{
font-size: 2rem;
margin-left: 2rem;
color:#666;
}

header .navbar a:hover{

color:var(--red);
}

#menu-bar{
font-size: 3rem;
cursor: pointer;
color:#666;

41
 border:.1rem solid #666;
border-radius: .3rem;
padding:.5rem 1.5rem;
display: none;
}

.home{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
min-height: 100vh;
align-items: center;
background:url(../images/home-bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}

.home .content{
flex:1 1 40rem;
padding-top: 6.5rem;
}

.home .image{
flex:1 1 40rem;
}

.home .image img{

width:100%;
padding:1rem;
animation:float 3s linear infinite;
}

@keyframes float{
0%, 100%{
transform: translateY(0rem);
}
50%{
transform: translateY(3rem);
}
}

42
.home .content h3{
font-size: 5rem;
color:#333;
}

.home .content p{
font-size: 1.7rem;
color:#666;
padding:1rem 0;
}

.speciality .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.speciality .box-container .box{

flex:1 1 30rem;
position: relative;
overflow: hidden;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
cursor: pointer;
border-radius: .5rem;
}

.speciality .box-container .box .image{

height:100%;
width:100%;
object-fit: cover;
position: absolute;
top:-100%; left:0;
}

.speciality .box-container .box .content{

text-align: center;
background:#fff;
padding:2rem;

43
}

.speciality .box-container .box .content img{

margin:1.5rem 0;
}

.speciality .box-container .box .content h3{

font-size: 2.5rem;
color:#333;
}

.speciality .box-container .box .content p{

font-size: 1.6rem;
color:#666;
padding:1rem 0;
}

.speciality .box-container .box:hover .image{

top:0;
}

.speciality .box-container .box:hover .content{

transform: translateY(100%);
}

.popular .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.popular .box-container .box{

padding:2rem;
background:#fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
text-align: center;
flex:1 1 30rem;
position: relative;

44
}

.popular .box-container .box img{

height:25rem;
object-fit: cover;
width:100%;
border-radius: .5rem;
}

.popular .box-container .box .price{

position: absolute;
top:3rem; left:3rem;
background:var(--red);
color:#fff;
font-size: 2rem;
padding:.5rem 1rem;
border-radius: .5rem;
}

.popular .box-container .box h3{

color:#333;
font-size: 2.5rem;
padding-top: 1rem;
}

.popular .box-container .box .stars i{

color:gold;
font-size: 1.7rem;
padding:1rem .1rem;
}

.steps{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
padding:1rem;
}

.steps .box{
flex:1 1 25rem;

45
 padding:1rem;
text-align: center;
}

.steps .box img{

border-radius: 50%;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.steps .box h3{

font-size: 3rem;
color:#333;
padding:1rem;
}

.gallery .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.gallery .box-container .box{

height:25rem;
flex:1 1 30rem;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
border-radius: .5rem;
position: relative;
overflow: hidden;
}

.gallery .box-container .box img{

height:100%;
width:100%;
object-fit: cover;
}

.gallery .box-container .box .content{

position: absolute;

46
 top:-100%; left:0;
height: 100%;
width:100%;
background:rgba(255,255,255,.9);
padding:2rem;
padding-top: 5rem;
text-align: center;
}

.gallery .box-container .box .content h3{

font-size: 2.5rem;
color:#333;
}

.gallery .box-container .box .content p{

font-size: 1.5rem;
color:#666;
padding:1rem 0;
}

.gallery .box-container .box:hover .content{

top:0;
}

.review .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
}

.review .box-container .box{

text-align: center;
padding:2rem;
border:1rem solid #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
border-radius: .5rem;
flex:1 1 30rem;
background:#333;
margin-top: 6rem;
}

47
.review .box-container .box img{
height: 12rem;
width:12rem;
border-radius: 50%;
border:1rem solid #fff;
margin-top: -8rem;
object-fit: cover;
}

.review .box-container .box h3{

font-size: 2.5rem;
color:#fff;
padding:.5rem 0;
}

.review .box-container .box .stars i{

font-size: 2rem;
color:var(--red);
padding:.5rem 0;
}

.review .box-container .box p{

font-size: 1.5rem;
color:#eee;
padding:1rem 0;
}

.order .row{
padding:2rem;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
background:#fff;
display: flex;
flex-wrap: wrap;
gap:1.5rem;
border-radius: .5rem;
}

.order .row .image{

flex:1 1 30rem;

48
}

.order .row .image img{

height: 100%;
width:100%;
object-fit: cover;
border-radius: .5rem;
}

.order .row form{

flex:1 1 50rem;
padding:1rem;
}

.order .row form .inputBox{

display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.order .row form .inputBox input, .order .row form textarea{

padding:1rem;
margin:1rem 0;
font-size: 1.7rem;
color:#333;
text-transform: none;
border:.1rem solid rgba(0,0,0,.3);
border-radius: .5rem;
width:49%;
}

.order .row form textarea{

width:100%;
resize: none;
height:15rem;
}

.order .row form .btn{

background:none;
}

49
.order .row form .btn:hover{
background:var(--red);
}

.footer{
background:#000;
text-align: center;
}

.footer .share{
display: flex;
gap:1.5rem;
justify-content: center;
flex-wrap: wrap;
}

.footer .credit{
padding:2.5rem 1rem;
color:#fff;
font-weight: normal;
font-size: 2rem;
}

.footer .credit span{

color:var(--red);
}

#scroll-top{
position: fixed;
top:-120%;
right:2rem;
padding:.5rem 1.5rem;
font-size: 4rem;
background:var(--red);
color:#fff;
border-radius: .5rem;
transition: 1s linear;
z-index: 1000;
}

50
#scroll-top.active{
top:calc(100% - 12rem)
}

.loader-container{
position: fixed;
top:0; left:0;
z-index: 10000;
background:#fff;
display: flex;
align-items: center;
justify-content: center;
height:100%;
width:100%;
}

.loader-container.fade-out{
top:-120%;
}

/* media queries */

@media(max-width:991px){

html{
font-size: 55%;

51
 }

header{
padding:2rem;
}

section{
padding:2rem;
}

@media(max-width:768px){

#menu-bar{
display: initial;
}

header .navbar{
position: absolute;
top:100%; left: 0; right:0;
background: #f7f7f7;
border-top: .1rem solid rgba(0,0,0,.1);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

header .navbar a{
margin: 1.5rem;
padding:1.5rem;
display: block;
border:.2rem solid rgba(0,0,0,.1);
border-left:.5rem solid var(--red);
background:#fff;
}

52
 @media(max-width:450px){

html{
font-size: 50%;
}

.order .row form .inputBox input{

width:100%;
}

}
#msg{
color: #61b752;
display: block;
margin-top: 10px;
font-size: 14px;
}

53
Javascript:

let menu = document.querySelector('#menu-bar');

let navbar = document.querySelector('.navbar');

menu.onclick = () =>{

menu.classList.toggle('fa-times');
navbar.classList.toggle('active');

window.onscroll = () =>{

menu.classList.remove('fa-times');
navbar.classList.remove('active');

if(window.scrollY > 60){

document.querySelector('#scroll-top').classList.add('active');
}else{
document.querySelector('#scroll-top').classList.remove('active');
}

function loader(){
document.querySelector('.loader-container').classList.add('fade-out');
}

function fadeOut(){
setInterval(loader, 3000);
}

window.onload = fadeOut();

54
4. Screenshots:

55
56
57
58
5. Future Scope:
The online food website is one of the most profitable
marketing strategies for restaurant businesses. Online
food ordering platforms also prevents missed orders
due to busy phone lines or a lack of resources to

59
 monitor the phone. The face of the restaurant industry
has shifted from the traditional dine-in culture to
takeaways, online ordering, and home deliveries.
Restaurants are quickly incorporating mobile food
ordering apps in their restaurant management systems
to streamline the entire order taking process.

6. Conclusion:
The application is based on user’s requirement and is
user centered. All issues related to all user which are
included in this system are developed by this system.
If people know how to operate android smart phone
wide variety of people can use the application. This
system will solve the various issues related to
Mess/Tiffin service. To help and solve important
problems of people implementation of Online
Food Ordering system is done. It can be concluded
that, based on the application: Orders are made easily
by this system; Information needed in making
order to customer is provided by the system.
Receiving orders and modifying its data is possible
through the application and it also helps admin in
controlling all the Food
system.

60