MICROPROJECT
Online Portal for Restaurant
1. Rationale:-
In today’s modern world, if you own a business, you should also own a website. However,
restaurateurs who are accustomed to the brick and mortar nature of the business might not all see
the value in this important marketing and promotional tool. If you’ve been procrastinating on
setting up a website for your restaurant, we’ll take you through exactly how a website will benefit
your business as well as what your online presence should include to maximize your potential.
2. Aims and benefits:-
Online Portal for Restaurant
Benefits:-
• We understand the logic behind the Restaurant website.
• This Project help us to improve problem solving skill.
• This website will help customers to order food online.
• This website will enhance restaurateur also knows that atmosphere and ambiance.
3. Course outcomes:-
1. Use different program flow control structure for design interactive web pages.
2. Exceute programs on Arrays and functions in Java script.
3. Implement event based web forms and handling cookies using Java script.
4. Apply regular expressions for validations to design interactive webpages.
5. Implement Menus and navigations in web Pages
4. Literature Review:
• The term ‘restaurant’ first appeared in the 18th century in France. It referred to a
reinvigorating meat broth which people ate to refortify the body. It was not until the
French Revolution and subsequent industrialisation that culinary establishments such as
we know them today began to appear and develop
• Restaurants started to specialise and target their clientele. Eating in a restaurant in the
evening began to be associated with a leisure activity combining discovery, pleasure and
conviviality, an outing with family or friends away from the household dining room
• A restaurant is a business that prepares and serves food and drinks to customers.
• Meals are generally served and eaten on the premises, but many restaurants also offer take-
out and food delivery services.
Page 1 of 16
• A public eating establishment similar to a restaurant is mentioned in a 512 BC record
from Ancient Egypt. It served only one dish, a plate of cereal, wild fowl, and onions.
• When concept of restaurants was introduced their was no online facility but with the
modernising era restaurants also published their buniness online thus helping customers to
understand facilities provided by them.
5. Actual Methodology:
• First We Create a Directory for our website and categories each section for different
purpose.
• We download required images ,logo’s from internet and store them in their respective
directories.
• Then we create full Structure of website using HTML(we created different tabs like
Home , Speciality, Popular, Gallery , Review and Order .)
• While creating structure of webpage we created different divisions using <div> tag
And add various GUI components using <input tag>.
• To design this structure of website we use CSS(Cascading Style Sheets).
• We access this division by their class name and set different properties to make them
attractive.
• To set Property we use various CSS concept like position property,display
propties,margin and padding ,hovor,background images and colors.
• For the purpose of inserting buttons, images and designing and applying validation for
order section we used JavaScript.
• To Handle different events we use addEventListener.
• For validation purpose we use regular expression and match() method in JavaScript.
6. Actual resources used:-
Sr. no. Name of resources Specification Quantity Remark
1 Computer system Windows 10 1 -
Processor i3
2 Software Visual Studio Code 1 -
Page 2 of 16
7. Output of Microproject:
Code for Header Section:-
<header>
<a href="#" class="logo"><i class="fas fa-utensils"></i>food</a>
<div id="menu-bar" class="fas fa-bars"></div>
<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">order</a>
</nav>
<section class="container">
<form action="">
<input type="search" id="search-item" placeholder="Search here🔍"
onchange="search(this.value)">
</form>
</section>
</header>
Code For Home Section:-
<section class="home" id="home">
<div class="content">
<h3>food made with love</h3>
<p>If the customer is very smart, he or she will be able to achieve the
desired result. We accuse pleasures from time to time, the thing that praises the
mind's choice of pleasures. They were born blind, and so they hinder us from
doing so!</p>
<a href="#" class="btn" >order now</a>
</div>
<div class="image">
<img src="images/home-img.png" alt="">
</div> </section>
Page 3 of 16
Code For Speciality Section:-
<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>
</div>
</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>
</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>
</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="">
<h3>cold drinks</h3>
</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>
</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="">
Page 4 of 16
<h3>healty breakfast</h3>
</div>
</div>
</div>
</section>
Code For Popular Code:-
<section class="popular" id="popular">
<h1 class="heading"> most <span>popular</span> foods </h1>
<div class="box-container">
<div class="box" id="box1">
<span class="price"> RS.100 - RS.200 </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>
<a href="#" class="btn">order now</a>
</div>
<div class="box"id="box2">
<span class="price"> RS.250 - RS.1000 </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"id="box3">
<span class="price"> RS.150 - RS.250 </span>
Page 5 of 16
<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>
</div>
<a href="#" class="btn">order now</a>
</div>
<div class="box" id="box4">
<span class="price"> RS.100 - RS.300 </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" id="box5">
<span class="price"> RS.50 - RS.200 </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>
<i class="far fa-star"></i>
</div>
<a href="#" class="btn">order now</a>
</div>
<div class="box"id="box6">
Page 6 of 16
<span class="price"> RS.70 - RS.350 </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>
Code for Gallery Section:-
<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>
<div class="box">
<img src="images/g-2.jpg" alt="">
</div>
<div class="box">
<img src="images/g-3.jpg" alt="">
</div>
<div class="box">
<img src="images/g-4.jpg" alt="">
</div>
<div class="box">
<img src="images/g-5.jpg" alt="">
</div>
<div class="box">
<img src="images/g-6.jpg" alt="">
</div>
Page 7 of 16
<div class="box">
<img src="images/g-7.jpg" alt="">
</div>
<div class="box">
<img src="images/g-8.jpg" alt="">
</div>
<div class="box">
<img src="images/g-9.jpg" alt="">
</div>
</div>
</section>
Code for Review Section:-
<section class="review" id="review">
<h1 class="heading"> our customers <span>reviews</span> </h1>
<div class="box-container">
<div class="box">
<img src="images/pic1.png" alt="">
<h3>Mayur Magar</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>Good quality is food available here.</p>
</div>
<div class="box">
<img src="images/pic2.png" alt="">
<h3>Ashutosh Varpe</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>
Page 8 of 16
</div>
<p>I like the food and service provided to user.</p>
</div>
<div class="box">
<img src="images/pic3.png" alt="">
<h3>Anuraj Athare</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>Good service.</p>
</div>
</div>
</section>
Code for Order Section:-
<section class="order" id="order">
<h1 class="heading"> <span>order</span> now </h1>
<div class="row">
<div class="image">
<img src="images/order-img.jpg" alt="">
</div>
<form action="">
<div class="inputBox">
<input type="text" placeholder="name" name="text1">
<input type="email" placeholder="email" name="text2">
</div>
<div class="inputBox">
<input type="number" placeholder="number">
<input type="text" placeholder="food name" id="food">
</div>
<textarea placeholder="address" name="" id="" cols="30" rows="10"></textarea>
<input type="button" name="submit" value="order now" onclick="validate()"
class="btn">
Page 9 of 16
</form>
</div>
</section>
<script>
function validate(){
alert("You Order has been successfully placed for " +food.value);
}
</script>
Code for Footer Section :-
<section class="footer">
<div class="share">
<a href="#" class="btn">facebook</a>
<a href="#" class="btn">twitter</a>
<a href="#" class="btn">instagram</a>
</div>
<h1 class="credit"> created by <span> students of Amrutvahini Polytechnic</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>
<script src="script.js"></script>
</body>
</html>
Page 10 of 16
JavaScript Code:-
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;
function search(val)
{
if(val == "Tasty Burger"){
location.href = "#box3"
}
if(val == "Tasty Cakes"){
location.href = "#box3"
}
if(val == "Tasty Sweets"){
location.href = "#box3"
}
if(val == "Tasty cupcakes"){
location.href = "#box3"
}
Page 11 of 16
if(val == "Colddrinks"){
location.href = "#box3"
}
if (val == "cold ice cream ") {
location.href =" #box3"
}}
Page 12 of 16
Outputs:-
1.Home Section :
2. Speciality Section :
Page 13 of 16
3. Popular Section:
4. Gallery Section:
Page 14 of 16
5.Review Section:
6.Order Section:
Page 15 of 16
8. Skill developed/learning outcomes of the micro-project:-
• We learn Practical implementation of various concepts used in HTML ,CSS and JavaScript.
• While doing this project we came to know how solve different problems helping us
developing our problem solving skills.
• Understand the Thought process behind building a website.
• So we finally understand how exactly websites are developed which boost our confidence.
• This project help us to understand how JavaScript Contributes to develop Front-End(Client
slide).
9. Applications of the Microproject:
i. Using our website users can see the embience and photo’s of food provided by
restaurant.
ii. Customer can order food online through our website from our restautant
iii. These Website is made to make people life easy rather than coming to restaurant they
can enjoy food at there place.
iv. With the help of our website customer can visit our social pages like Instagram,
Facebook and Twitter.
Conclusion:
Thus we Successfully implemented HTML,CSS and JavaScript concepts to create a website for
Restaurant. While doing this we understand how a website is made ,what are the logic behind
it which help us to understand JavaScript concepts practically.
Reference:-
o www.geeksforgeeks.com
o www.codeWithHarry.com
o www.javatpoint.com
o www. fontawesome.com
o www.developer.mozilla.org
Page 16 of 16
