MCA VI Project Report 2023
MCA VI Project Report 2023
(IC-2K21-39)
Lavanya Hardas
(IC-2K21-43)
Page | 1
ESSENCE
Page | 2
DECLARATION
I hereby declare that the project entitled Restaurant Web Design which is submitted by
me for the partial fulfillment of requirement for the award of Masters of Computer
Application (5 years) semester VI to International Institute of Professional Studies,
Devi Ahilya Vishwavidyalaya, Indore, is authentic record of my own work carried out
under the supervision of Mr.Rajesh Verma, Project mentor, IIPS-DAVV, Indore.
The matter embodied in this dissertation work is authenticated and is genuinely done by
me and has not been submitted to this university or any other university or Institute. Thus
I solely own the responsibility for the originality of the entire content.
I also declared that the content of project report does not violate the copyright,
Trademarks, infringes on the patent, statutory right or propriety right of others.
Signature of Student:
Date:
Place:
Page | 3
CERTIFICATE FROM GUIDE
It is to certify that dissertation ―Essence‖, submitted by Mr. Kratik Mandloi and Mr.
Lavanya Hardas to the International Institute of Professional Studies, DAVV, Indore has
been completed under my supervision and the work is carried out and presented in a
manner required for its acceptance in partial fulfillment for the award of the degree of
―Masters of Computer Applications (5 Years) Semester VI ‖.
Project Guide
Signature:
Name:
Date:
Page | 4
CERTIFICATE
Page | 5
Format of Report
Title Page
Declaration
Certificate from Guide
Certificate from Company
Approval Certificate for Examiner
Acknowledgement
Table of Contents (with Page numbers)
Abstract <Highlights of complete Project>
Executive Summary
Foreword or Preface
1. Introduction
2. Analysis
3. Project Planning
4. System Design
5. Software Development Methodology
6. System Implementation
7. System Testing
8. Output Forms & Reports
9. Limitations
10. Conclusion
Bibliography
Appendices
Page | 6
Acknowledgment
The completion of this project, marks a significant milestone in our academic journey at
DAVV University. As we present this endeavor, we wish to express our heartfelt
gratitude to all those who have contributed to its success.
First and foremost, we extend our deepest appreciation to Mr.Rajesh Verma, our
esteemed project mentor. Mr. Rajesh Verma‘s guidance, expertise, and unwavering
support have been instrumental throughout the entire duration of this project. His
valuable insights and direction have not only enriched our understanding but also inspired
us to strive for excellence. He guided and helped throughout the entire course of time.
And whenever there was any ambiguity of idea or thought, she patiently dealt in depth
and provided clarification and direction to proceed. I am truly grateful for his wisdom,
and we thank his with all respect. Mr Rajesh Verma Sir‘s wisdom and insight were
instrumental in navigating challenges and uncertainties, for which we are truly grateful.
We are also indebted to Prof. B.K. Tripathi, Director of IIPS, DAVV, Dr. Jugendra
Dongre , program in charge and Dr. Yasmin Shaikh Batch mentor who generously
extended their assistance whenever solicited, demonstrating genuine interest and
cooperation. They graciously extended their assistance whenever called upon, displaying
genuine interest and cooperation.
Furthermore, WE are grateful to our colleagues and classmates for their consistent
feedback, commendations, and constructive critiques, all of which enriched the project
significantly. Lastly, We express heartfelt thanks to our parents and friends whose
unwavering support has been a pillar of strength during challenging times.
Page | 7
We acknowledge the collective efforts of all individuals involved, and any oversights in
acknowledgment are sincerely regretted.
Page | 8
TABLE OF CONTENTS
Contents Page
Abstract 8
Executive Summary 9
Foreword or Preface 10
1. Introduction 11
2. Analysis 14
3. Project Planning 17
4. System Design 20
6. System Implementation 33
7. System Testing 34
Future Prospective 35
Limitations 36
Conclusions 37
Bibliography 38
Page | 9
Abstract
At Essence, we take pride in offering more than just a meal – we provide a seamless
blend of exceptional cuisine, top-notch service, and inviting ambiance to ensure that
every visit exceeds your expectations. Our website is designed with your convenience in
mind, offering user-friendly features to enhance your dining experience from start to
finish. Booking a table at Essence is quick and effortless with our easy-to-use online
reservation system. Simply select your desired date, time, and party size, and let us take
care of the rest. Whether you're planning a romantic dinner for two or a gathering with
friends and family, securing your spot at our restaurant has never been easier.
Once you've booked your table, our website also allows you to pre-order your meal,
ensuring that your dining experience is perfectly tailored to your preferences. Whether
you have dietary restrictions or simply want to skip the wait, our pre-ordering service
allows you to select your dishes in advance, so they're ready and waiting for you upon
arrival. But it's not just our online services that set us apart – it's also the inviting
ambiance of our restaurant. From the moment you step through our doors, you'll be
greeted by a warm and welcoming atmosphere, where every detail is thoughtfully curated
to enhance your dining pleasure. Whether you're dining in our cozy interior or enjoying
the fresh air on our outdoor patio, you'll find yourself surrounded by elegance and charm
at every turn.
Join us at Essence and experience the perfect fusion of convenience, quality, and
ambiance. With easy online booking, seamless pre-ordering options, and a welcoming
atmosphere, we're committed to making every visit to our restaurant an unforgettable
one.
Page | 10
Executive Summary
Prepare to embark on a culinary journey like no other as you step into the world of
Essence. We pride ourselves on redefining the standards of fine dining, where every
element, from the cuisine to the ambiance, is meticulously crafted to offer an
unforgettable experience.
Our website serves as your portal to this world of culinary excellence, offering seamless
features designed to enhance your convenience and satisfaction. Booking a table at
Essence is a breeze with our intuitive online reservation system. Whether you're planning
a romantic evening for two or a gathering of friends and family, securing your spot at our
restaurant is just a few clicks away. Additionally, our pre-ordering service allows you to
tailor your dining experience to your preferences, ensuring that every dish is precisely to
your liking.
As you step through the doors of Essence, you'll be enveloped in an ambiance of warmth,
elegance, and sophistication. Our interior exudes timeless charm, with plush furnishings,
soft lighting, and tasteful decor creating the perfect setting for a memorable dining
experience. If you prefer al fresco dining, our inviting outdoor patio provides a tranquil
escape where you can enjoy your meal amidst the beauty of nature.But it's not just the
ambiance that sets Essence apart—it's also our unwavering commitment to culinary
excellence. Our team of talented chefs combines the freshest ingredients with innovative
techniques to create dishes that are as visually stunning as they are delicious. Each plate
that leaves our kitchen is a work of art, meticulously plated to delight your senses and
ignite your palate.
Page | 11
Page | 12
Foreword and Preface
Foreword:
Preface:
In the pages of this website, you will discover the essence of our restaurant—an oasis of
elegance and sophistication where every detail is thoughtfully curated to ensure a truly
exceptional dining experience. From our carefully crafted menu to our warm and inviting
ambiance, we have spared no effort in creating a space that reflects our commitment to
excellence. As you navigate through our website, we hope you will find everything you
need to plan your visit, from easy table bookings to a sneak peek at our tantalizing
offerings. Whether you're a seasoned food enthusiast or simply looking for a memorable
meal, we invite you to join us at Essence and experience the perfect fusion of
convenience, quality, and ambiance. Welcome to a world of culinary brilliance.
Page | 13
Chapter 1
Introduction
The primary challenge facing Essence restaurant lies in its limited online presence and
inefficient operational processes. With minimal visibility in the digital realm, the restaurant
struggles to attract and engage potential customers effectively, leading to missed
opportunities for growth and revenue generation. Moreover, the reliance on manual
reservation methods and inefficient order management processes results in operational
inefficiencies, contributing to delays, errors, and diminished customer satisfaction. Without
personalized insights into customer preferences and behaviors, Essence is unable to tailor its
offerings and services to meet individual needs effectively. Additionally, the restaurant's
physical location may not be easily visible or accessible to potential customers, further
exacerbating the issue of low foot traffic and awareness. To address these challenges,
Essence must prioritize enhancing its online presence, implementing streamlined reservation
and order management systems, leveraging customer data for personalization, and improving
visibility to attract and retain customers effectively in a competitive market landscape.
The primary challenge facing Essence restaurant lies in its limited online presence and
inefficient operational processes. With minimal visibility in the digital realm, the restaurant
struggles to attract and engage potential customers effectively, leading to missed
opportunities for growth and revenue generation. Moreover, the reliance on manual
reservation methods and inefficient order management processes results in operational
inefficiencies, contributing to delays, errors, and diminished customer satisfaction. Without
personalized insights into customer preferences and behaviors, Essence is unable to tailor its
offerings and services to meet individual needs effectively.. To address these challenges,
Essence must prioritize enhancing its online presence, implementing streamlined reservation
and order management systems, leveraging customer data for personalization, and improving
visibility to attract and retain customers effectively in a competitive market landscape.
Page | 14
1.3 Aim:
The aim of the project is to revamp and optimize the digital presence and operational
processes of Essence restaurant, ultimately enhancing its ability to attract and retain
comprehensive website with user-friendly features such as online reservation and pre-
ordering services, the project seeks to improve the overall customer experience and
streamline restaurant operations. Additionally, the project aims to leverage digital marketing
strategies to increase the restaurant's online visibility and reach new audiences. Through these
initiatives, the project aims to position Essence as a premier dining destination known for its
exceptional cuisine, inviting ambiance, and seamless customer service. Ultimately, the
project aims to drive growth and sustainability for Essence restaurant in a competitive market
landscape.
1.4 Objectives:
1.5 Benefits:
Page | 15
Enhanced Customer Experience: The user-friendly website, streamlined reservation
workload, minimize errors, and expedite service, allowing staff to focus more on
online visibility and offering convenient pre-ordering options, the restaurant can
dining experiences encourage repeat business and foster long-term relationships with
Cost Savings: Streamlined processes and reduced errors result in cost savings for the
restaurant, while targeted marketing efforts ensure optimal allocation of resources for
maximum return on investment.
Page | 16
Page | 17
Chapter 2
Analysis
Feasibility analysis is a crucial step in determining the viability of any project. The feasibility
study for this dining platform project is conducted based on the following criteria:
The economic feasibility of the project is determined by assessing the costs and
benefits associated with the project. The cost of developing the platform includes the
cost of hardware, software, personnel . On the other hand, the benefits of the project
include increased efficiency, improved communication, one-window solution. The
cost-benefit analysis indicates that the project is economically feasible.
Since there is no overhead cost involved for any external hardware device, this system
is economic.
Technical feasibility assesses whether the current technical resources are sufficient for
the new system. If they are not available, can they be upgraded to provide the level of
technology necessary for the new system? It checks whether the proposed system can
be implemented in the present system without supporting the existing hardware.
Page | 18
The technical feasibility of the project is determined by assessing the technological
requirements and limitations of the platform. The platform requires a reliable and
secure hosting environment and a scalable and modular architecture. The technical
analysis indicates that the project is technically feasible.
Operational feasibility determines if the human resources are available to operate the
system once it has been installed. The project will require a Mobile or a desktop to
operate. Since it is a website there is no need to install the product. It will require only
an active internet connection. The management will also be convinced that the project
is optimally feasible.
The system analysis phase involves analyzing the current system, identifying the user
requirements, and developing a functional specification for the new system. The analysis
includes a detailed review of the existing processes and workflows, the identification of the
requirements of the different user groups, and the development of a functional specification
document.
2.2.1 Questionnaire:
The questionnaire is a tool used to gather information from the stakeholders regarding
their requirements, preferences, and feedback. The questionnaire is distributed to the
different user groups, and the responses are analyzed to identify the common themes
and issues.
The statistical analysis involves analyzing the data collected from various sources to
determine the patterns and trends. The statistical analysis helps in identifying the user
preferences and behavior, which in turn helps in developing a more effective
platform.
2.2.3 Interview:
Page | 19
The interview is a tool used to gather detailed information from the users regarding
their requirements, preferences, and feedback. The interview is conducted with the
key users .The interviews provide valuable insights into the requirements and
preferences of the different user groups, which in turn helps in developing a more
effective platform.
Page | 20
Chapter 3
Project Planning
Introduction
The most critical phase of managing system projects is planning. Information systems have become
increasingly important during the past decade. First, information is now recognized as a vital resource.
Second, more and more financial resources are committed to information systems. Third, there is
growing need for formal long-range planning with Information systems.
The Essence restaurant website aims to enhance restaurant‘s digital presence and operational
efficiency to drive through the customer satisfaction.
The scope of the project encompasses various features and functionalities tailored to meet the
expectations of food enthusiasts and our customer satisfaction
The dining reservations will be accessible from any device with an internet connection, making it
convenient for people to use.
Showcase the restaurant's menu with high-quality images, detailed descriptions, and pricing
information. Ensure easy navigation and categorization of menu items for user convenience.
Page | 21
Integrate pre-ordering services to enable customers to customize their dining experience by
selecting dishes in advance. Ensure compatibility with the reservation system and smooth order
management processes.
The design and implementation of this project has been carried out in a completely step-by-step manner.
Questionnaire
Design Document
Coding
Testing
Project Report
Gantt chart is a time-phased bar chart display that lists tasks or activities along the left side
and a corresponding bar for each task. The length of the bar represents the duration of the
activity. This scheduling tool used to display the status of a project‘s tasks. The Gantt chart
shows each task‘s duration as a horizontal line. The ends of the lines correspond to the task‘s
start and end dates.
Page | 22
Fig. 1 Gantt Chart for Essence
RAM: 4 GB or higher
Page | 23
Internet Connection: Required for accessing external services and for remote access to the
application.
Page | 24
Chapter 4
System design
Logical Design
Data flow diagram (DFD) was first developed by Larry Constantine as a way of
representing system requirements in a graphical form; this led to modular design. A
DFD describes what data flow (logical)rather than how they are processed, so it does
not depend on hardware software, and data structure or file organization. It is also
known as ‗bubblechart‘. A data Flow Diagram is a structured analysis and design tool
that can be used for flowcharting in place of, or in association with information -
oriented and process-oriented system flowcharts. A DFD is a network that describes
the flow of data and the processes that change, or transform, data throughout a
system. This network is constructed by using a set of symbols that do not imply a
physical implementation. It has the purpose of clarifying system requirements and
identifying major transformations that will become programs in system design. So it
is the starting point of the design phase that functionally decomposes the requirement
specifications down to the lowest level of detail. A DFD can be considered as an
abstract of the logic of an information-oriented or a process-oriented system flow-
chart. For these reasons DFDs are often referred to as logical flow diagrams. The four
basic symbols used to construct data flow diagrams are shown below:
Symbol Representation
Page | 25
A directed line represents the flows of data,
which is data stream.
On scrolling down further, we can see the Reviews of our customers about the Restaurant and
it‘s food –
Page | 27
Fig. 1.3 Home Page (3)
On clicking the Menu button on the Navigation bar at the top, it lands to Menu page, where it
has various Food Items that the user can select based on their personal choices –
On clicking on the About Us page , we see the detail description of the Restaurant -
Page | 28
Fig. 2.2 About Us
On clicking Hours & Location button, we are redirected to the location description of the
Restaurant and the working hours of staff -
After the submitting the details for reservation a pop up message appears for the confirmation
booking of the customer –
Page | 30
Fig. 4.1 Reservation page Confirmation
Page | 31
On clicking the Cart icon we see the list of the Food Items ordered by the customer of their
choice-
Page | 32
Chapter 5
Software Development Methodology
1. Waterfall Model: This methodology follows a linear and sequential approach where the
next phase begins only after the previous phase is completed. It is suitable for projects where
requirements are clear, and changes are not expected.
For this project, an agile methodology or Scrum can be the most suitable approach as it
allows for flexibility and continuous improvement, which is essential for event management
software.
Methodology:
Page | 33
1. Requirement Gathering: The first step is to gather all the requirements for the project,
which includes the features and functionalities that the Event Management Platform should
have.
2. Design: Once the requirements are gathered, the next step is to create a design for the
platform. This includes designing the user interface, creating wireframes, and defining the
data models.
3. Development: The actual development of the platform starts in this phase. The
development team will write the code for the platform and integrate all the necessary
features.
4. Testing: The testing phase is crucial to ensure that the platform works as expected. The
testing team will test the platform thoroughly to find any bugs or issues.
5. Deployment: Once the testing is complete, the platform is ready to be deployed. This
involves setting up the platform on a server and making it accessible to users.
6. Maintenance: The final step is to maintain the platform and fix any issues that arise. This
includes regular updates and bug fixes.
Page | 34
Chapter 6
System Implementation
System implementation is the conversion of new system into an operating one which involves
creating compatible files, training staff and installing hardware. A critical factoring in
conversion is not disrupting the functioning of organization. User training is crucial for
minimizing resistance to change and giving chance to prove its worth.
Training aids user friendly manuals and healthy screens provide the user with a good start.
Software maintenance follows conversion to the extent that changes are necessary to maintain
satisfactory operations relative to changes in the user‘s environment. Maintenance often
includes minor enhancements or corrections to the problem that surface late in the systems
operations.
In the implementation phase, the team builds the components either from scratch or by
composition. Given the architecture document from the design phase and the requirement
document from the analysis phase, the team should build exactly what has been requested,
though there is still room for innovation and flexibility. For example, a component may be
narrowly designed for this system, or the component may be made more general to satisfy a
reusability guideline. The architecture document should give guidance. Sometimes, this
guidance is found in the requirement document.
The implementation phase deals with issues of quality, performance, baselines, libraries, and
debugging. The end deliverable is the product itself. During the implementation phase, the
system is built according to the specifications from the previous phases. This includes writing
code, performing code reviews, performing tests, selecting components for integration,
configuration, and integration. The implementation includes the following things.
System implementation is the conversion of new system into an operating one which involves
creating compatible files, training staff and installing hardware. A critical factoring in
conversion is not disrupting the functioning of organization. User training is crucial for
minimizing resistance to change and giving chance to prove its worth.
1. Coding: Developers write code based on the design specifications outlined in the
system design phase. They follow coding standards, best practices, and use appropriate
programming languages and frameworks.
Page | 35
2. Testing: Testing is conducted at multiple levels to ensure the correctness and
reliability of the software. This includes unit testing, where individual components are tested
in isolation, and integration testing, where multiple components are tested together to verify
their interactions.
3. Integration: Once individual components are tested, they are integrated to form the
complete system. Integration testing ensures that all components work together as expected
and meet the system requirements.
Page | 36
Chapter-7
Code Snippet
Project Structure
Page | 37
Fig. 6.1 Project Structure
Page | 38
Fig. 6.2 Project Structure
Index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ="viewport" content="width=device-width, initial-scale=1.0">
<title>Essence</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<div class="container2">
<div class="background-image2"><img src="background.jpeg" width="100%"
height="1080px">
<div class="text-over-image2"><h1>Meet,<span> Eat & </span><br>Enjoy
The true</br>taste </h1>
<a href="menu.html" class="btn">Explore Menu</a>
</div>
<div class="contain">
<div class="container-box">
<img src="c1.png">
<h3>11:00 AM to 10:00 PM</h3>
<a href="#">WORKING HOURS</a>
Page | 39
</div>
<div class="container-box">
<img src="c2.png">
<h3>555,Brooklyn Heights</h3>
<a href="location.html">GET DIRECTION</a>
</div>
<div class="container-box">
<img src="c3.png">
<h3> 7587534404
</h3>
<a href="#">CALL US</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="background-image">
<div class="Left_image">
<img src="mae-mu-74HGrqRby2Q-unsplash.jpg" width="100%"
height="30%">
</div>
<div class="Right_text"><h1>WONDERFUL DINING EXPERIENCE AND
FOOD</h1><br>
</div>
</div>
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html"
class="active">HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
Page | 40
<li class="nav-list"><a href="location.html">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<div class="OurCustomer">
<p class="ourcus">Our Customer</p>
<p class="ourcussub">Clients Review About Our Restaurant </p>
</div>
<div class="review-content">
<div class="box">
<p>I recently dined at this charming restaurant, and I must
say, the experience was delightful. From the moment I stepped in, the cozy
ambiance made me feel right at home.
The menu offered a variety of mouthwatering dishes, and the
flavors were exceptional.
</p>
<div class="in-box">
<div class="box-img">
<img src="r1.jpg">
</div>
<div class="box-text">
<h3>Raymond Holt</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>
Page | 41
<div class="box">
<p>🌟 Exquisite dishes, top-notch service, and Instagram-
worthy vibes. This
restaurant is THE spot for foodies and vloggers!
</p>
<div class="in-box">
<div class="box-img">
<img src="r2.jpg">
</div>
<div class="box-text">
<h3>Christina Santiago</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>
<div class="box">
<p>Exceptional culinary creations, impeccable service,
and captivating ambiance make this restaurant a top
choice for discerning food enthusiasts
</p>
<div class="in-box">
<div class="box-img">
<img src="r3.jpg">
</div>
<div class="box-text">
<h3>Charles Jeffords</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
Page | 42
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="contact-footer">
<div class="Footer">
<div class="LeftFooter">
<h3 class="text-center mt-2 pt-1">Essence <span><p>© 2024 All
rights reserved.</p></span></h3>
</div>
<div class="RightFooter">
<div class="RightLinks">
<div class="LinksDiv">
<a href="/about.html" class="linkcolor">
About
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Contact
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Terms
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Privacy
</a>
</div>
Page | 43
</div>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Style.css:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
scroll-padding-top: 3rem;
}
:root{
--main-color: #e7a809;
--text-color: #fff;
--other-color: #212121;
--second-color: #9e9e9e;
--bg-color: #111111;
--big-font: 4.5rem;
--h2-font: 2.6rem;
--p-font: 1.1rem;
}
.nav-list{
white-space: nowrap;
}
body{
background: var(--bg-color);
color: var(--text-color);
Page | 44
}
header{
position: fixed;
width: 100vw;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
Page | 45
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.nav-list .active{
color: #e7a809;
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;
}
span{
color: var(--main-color);
}
.btn{
display: inline-block;
Page | 46
padding: 15px 15px;
border-radius: 17px;
background: var(--other-color);
color: var(--main-color);
font-size: 25px;
font-weight: 500;
transition: all .50s ease;
}
.btn:hover{
background: var(--main-color);
color: var(--bg-color);
box-shadow: #9e9e9e 0px 1px 25px;
}
.text-over-image2 {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
font-size: 34px;
}
header.sticky{
padding: 12px 14%;
background: var(--other-color);
}
.contain{
display: flex;
position: absolute;
top: 100%;
left:10%;
z-index: 4;
padding: 30px 14% 70px;
gap: 2rem;
text-align: center;
}
.container-box{
padding: 43px 43px 43px 43px;
background: var(--other-color);
width: 275px;
height: 240px;
border-radius: 3rem;
}
.container-box img{
width: 100%;
max-width: 50px;
height: auto;
}
.container-box h3{
Page | 47
font-size: 21px;
font-weight: bold;
margin: 16px 0;
}
.container-box a{
color: var(--second-color);
font-size: var(--p-font);
letter-spacing: 1px;
transition: all .50s ease;
}
.container-box a:hover{
color: var(--main-color);
}
.Text_on_image{
font-size: larger;
font-weight: 600;
}
.background-image {
background-image: url('wallpaperflare.com_wallpaper\ \(49\).jpg');
background-size: cover;
background-position: center;
height: 700px;
width:100%;
display: flex;
align-items: center;
justify-content:space-around;
}
.Left_image {
width: 25%;
border-radius: 50%;
}
.Left_image img{
border-radius: 20%;
}
.Right_text{
width: 30%;
color: whitesmoke;
font-weight: 300;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.contact-footer{
background-color: var(--other-color);
Page | 48
}
.Footer{
padding:2rem;
width: 100%;
display:flex;
justify-content: space-around;
}
.LeftFooter{
display: flex;
align-items:center ;
flex-direction: column;
justify-content: center;
}
.RightLinks{
display:flex;
flex-direction: column;
}
.RightLinks:hover{
color: var(--main-color);
}
.linkcolor{
color: whitesmoke;
}
.iconz a{
color: #e7a809;
}
.review{
padding: 60px 40px;
margin-bottom: 20px;
}
.review-content{
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit,minmax(300px,auto));
align-items: center;
margin-top: 4rem;
}
.box{
position: relative;
padding: 30px;
background: whitesmoke;
border-radius: 3rem;
color: #212121;
Page | 49
width: 90%;
height: 300px;
}
.in-box{
position: absolute;
display: flex;
align-items: center;
gap: 30px;
bottom: 0;
}
.box-img img{
width: 100%;
height: auto;
border-radius: 3rem;
}
.box-text h3{
margin: 5px 0;
font-size: 18px;
}
.box-text h4{
color: var(--second-color);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 10px;
}
.ratings{
font-size: 18px;
margin-right: 5px;
}
.ourcus{
text-align: center;
font-size: 48px;
font-weight: bold;
}
.ourcussub{
text-align: center;
font-size: 24px;
}
.LeftFooter h3{
display: flex;
gap:10px;
}
.linkcolor:hover{
color: #e7a809;
}
Page | 50
Script.js:
addToCartButtons.forEach(function(button) {
button.addEventListener('click', function() {
const name = button.dataset.name;
const price = parseFloat(button.dataset.price);
const imgUrl = button.dataset.imgurl;
Menu.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Essence</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"
Page | 51
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Restaurant Menu</title>
<link
rel="shortcut icon"
href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon"
/>
<link rel="stylesheet" href="menu.css" />
</head>
<body background="try-1.jpg">
<img
style="position: fixed; z-index: 0"
src="wallpaperflare.com_wallpaper (49).jpg"
alt=""
/>
<header>
<a href="#" class="logo"><i class="bx bxs-home"></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html">HOME</a></li>
<li class="nav-list"><a href="menu.html" class="active">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<div id="toastbox"></div>
<section class="menu">
<div class="container">
<p class="menu-title">Menu</p>
<div class="menu-items">
Page | 52
<div class="item">
<img src="pexels-suzy-hazelwood-1209029.jpg" alt="Dish 1" />
<h3>sandwich</h3>
<p>A symphony of savory layers nestled between toasted artisanal
bread, adorned with vibrant hues of fresh greens and bursting with tantalizing
flavors.</p>
<p>Rs 59</p>
<button
class="add-to-cart"
data-name="sandwich"
data-price="59"
data-imgurl="pexels-suzy-hazelwood-1209029.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-valeria-boltneva-1639557.jpg" alt="Dish 2" />
<h3>burger</h3>
<p>A tantalizing tower of indulgence, where perfectly grilled
patties meet a harmonious blend of fresh ingredients, all embraced by a
golden-brown bun.</p>
<p>Rs 49</p>
<button
class="add-to-cart"
data-name="burger"
data-price="49"
data-imgurl="pexels-valeria-boltneva-1639557.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
Page | 53
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-engin-akyurt-1437267.jpg" alt="Dish 2" />
<h3>Marinara Pasta</h3>
<p> Fiery tendrils of pasta entwined in a passionate embrace of
vibrant tomato sauce, sprinkled with basil fragrant whispers. </p>
<p>Rs 149</p>
<button
class="add-to-cart"
data-name="Marinara Pasta"
data-price="149"
data-imgurl="pexels-engin-akyurt-1437267.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-jane-trang-doan-769969.jpg" alt="Dish 2" />
<h3>spaghetti</h3>
<p>Sun-kissed strands of spaghetti delicately woven in a tapestry
of tangy tomato sauce, sprinkled with aromatic herbs and crowned with a
blanket of grated Parmesan</p>
<p>Rs 199</p>
<button
class="add-to-cart"
data-name="spaghetti"
data-price="199"
data-imgurl="pexels-jane-trang-doan-769969.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-amar-preciado-17653573.jpg" alt="Dish 2" />
<h3>choclate pastry</h3>
<p>Immerse yourself in the irresistible allure of our chocolate
pastry, a delectable symphony of rich cocoa, buttery crust, and blissful
decadence</p>
<p>Rs 99</p>
<button
class="add-to-cart"
data-name="choclate pastry"
Page | 54
data-price="99"
data-imgurl="pexels-amar-preciado-17653573.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-eneida-nieves-905847.jpg" alt="Dish 2" />
<h3>pizza</h3>
<p>A delectable mosaic of flavors, where molten cheese melds with
a medley of vibrant toppings atop a golden crust, each bite a harmonious
melody of taste and texture.</p>
<p>Rs 129</p>
<button
class="add-to-cart"
data-name="pizza"
data-price="129"
data-imgurl="pexels-eneida-nieves-905847.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-marvin-ozz-2474661.jpg" alt="Dish 2" />
<h3>dal makhni with nan</h3>
<p>Indulge in the luscious embrace of creamy dal makhani,
accompanied by the golden, charred perfection of freshly baked naan, a
harmonious dance of decadence and delight.</p>
<p>Rs 299</p>
<button
class="add-to-cart"
data-name="dal makhni with nan"
data-price="299"
data-imgurl="pexels-marvin-ozz-2474661.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="salad.jpg" alt="Dish 2" />
<h3>salad</h3>
<p>Crisp greens tangled with vibrant bursts of color, kissed by
the sun's warmth and drizzled with the whisper of citrus essence </p>
<p>Rs 49</p>
<button
Page | 55
class="add-to-cart"
data-name="salad"
data-price="49"
data-imgurl="salad.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-archie-binamira-1193335.jpg" alt="Dish 2" />
<h3>cold coffee</h3>
<p>Chilled espresso dances with creamy swirls, kissed by frosty
whispers of vanilla</p>
<p>Rs 99</p>
<button
class="add-to-cart"
data-name="cold coffee"
data-price="99"
data-imgurl="pexels-archie-binamira-1193335.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="momoes.jpg" alt="Dish 2" />
<h3>momos</h3>
<p>
Succulent dumplings, nestled in delicate folds, exuding a
tantalizing aroma of spices and herbs.
</p>
<p>Rs 129</p>
<button
class="add-to-cart"
data-name="momos"
data-price="129"
data-imgurl="momoes.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="alloi-ollio-ppasta.jpg" alt="Dish 2" />
<h3>alloi-ollio-pasta</h3>
Page | 56
<p>Twirling ribbons of al dente fettuccine adorned with a velvety,
garlic-infused Alfredo sauce, delicately dusted with freshly grated Parmesan
and kissed by a whisper of cracked black pepper
</p>
<p>Rs 229</p>
<button
class="add-to-cart"
data-name="alloi-ollio-pasta"
data-price="229"
data-imgurl="alloi-ollio-ppasta.jpg"
onclick=" toast()"
>
Add to Cart
</button>
</div>
</div>
</div>
<script>
function toast() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");
<script src="script.js"></script>
</body>
</html>
Menu.css:
:root {
/**
Page | 57
* COLORS
*/
body{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
:root {
Page | 58
/**
* COLORS
*/
body{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
Page | 59
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.menu-title{
font-size: 48px;
text-align: center;
color: white;
font-weight: bold;
margin-bottom: 40px;
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
Page | 60
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;
.container {
width: 100%;
;
}
.menu {
padding: 150px 0;
/* background-color: rgb(252, 255, 90); */
color: #000000;
}
.menu h2 {
text-align: center;
margin-bottom: 20px;
font-size: x-large;
text-decoration: underline;
color: #fff;
}
.menu-items {
display: grid;
grid-template-columns: auto auto auto ;
Page | 61
justify-content: space-evenly;
column-gap: 50px;
row-gap: 50px;
text-transform: capitalize;
}
.marq {
padding-top: 10px;
padding-bottom: 10px;
.geek1 {
font-size: 64px;
font-family: "Arial", sans-serif;
font-weight: bold;
color: white;
padding-bottom: 10px;
}
.item {
width: 300px;
position: relative;
padding: 20px;
color:white;
background-color: #99969657;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.795);
height: 520px;
transition: .4s ease-in;
}
.item img {
width: 100%;
border-radius: 10px;
}
.item h3 {
margin-top: 10px;
}
.item p {
margin-top: 10px;
}
.item span {
Page | 62
display: list-item;
font-weight: bold;
margin-top: 10px;
}
.item:hover{
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.85em);
transition-duration: 0.2s;
box-shadow: 0 0 20px rgb(0, 0, 0);
background-color: #ffffffbb;
color: #000000;
.add-to-cart {
display: block;
margin-top: 10px;
padding: 10px 20px;
position: absolute;
border: none;
background-color: #e7a809;
color: #fff;
cursor: pointer;
border-radius: 5px;
left: 20px;
bottom: 10px;
transition: .2s ease-in;
.add-to-cart:hover {
background-color: #e78709;
border-radius: 10px ;
scroll-margin-inline-end: 10px;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 10px;
padding: 10px 0;
}
#toastbox {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
Page | 63
align-items: flex-end;
flex-direction: column;
overflow: hidden;
padding: 20px;
}
.toast {
width: 400px;
height: 80px;
background: #fff;
font-weight: 500;
margin: 15px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
position: relative;
transform: translateX(100%);
animation: moveleft 0.5s linear forwards;
}
@keyframes moveleft{
100%{
transform: translateX(0);
}
}
.toast::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: green;
animation: anim 5s linear forwards;
}
@keyframes anim {
100%{
width: 0;
}
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.navlist{
display: flex ;
Page | 64
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
/* Show the snackbar when clicking on a button (class added with JavaScript)
*/
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
Page | 65
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.menu-title{
font-size: 48px;
text-align: center;
Page | 66
color: white;
font-weight: bold;
margin-bottom: 40px;
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;
Page | 67
}
.container {
width: 100%;
;
}
.menu {
padding: 150px 0;
/* background-color: rgb(252, 255, 90); */
color: #000000;
}
.menu h2 {
text-align: center;
margin-bottom: 20px;
font-size: x-large;
text-decoration: underline;
color: #fff;
}
.menu-items {
display: grid;
grid-template-columns: auto auto auto ;
justify-content: space-evenly;
column-gap: 50px;
row-gap: 50px;
text-transform: capitalize;
}
.marq {
padding-top: 10px;
padding-bottom: 10px;
.geek1 {
font-size: 64px;
font-family: "Arial", sans-serif;
font-weight: bold;
color: white;
padding-bottom: 10px;
}
.item {
width: 300px;
position: relative;
padding: 20px;
color:white;
Page | 68
background-color: #99969657;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.795);
height: 520px;
transition: .4s ease-in;
}
.item img {
width: 100%;
border-radius: 10px;
}
.item h3 {
margin-top: 10px;
}
.item p {
margin-top: 10px;
}
.item span {
display: list-item;
font-weight: bold;
margin-top: 10px;
}
.item:hover{
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.85em);
transition-duration: 0.2s;
box-shadow: 0 0 20px rgb(0, 0, 0);
background-color: #ffffffbb;
color: #000000;
.add-to-cart {
display: block;
margin-top: 10px;
padding: 10px 20px;
position: absolute;
border: none;
background-color: #e7a809;
color: #fff;
cursor: pointer;
border-radius: 5px;
left: 20px;
Page | 69
bottom: 10px;
transition: .2s ease-in;
.add-to-cart:hover {
background-color: #e78709;
border-radius: 10px ;
scroll-margin-inline-end: 10px;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 10px;
padding: 10px 0;
}
#toastbox {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
align-items: flex-end;
flex-direction: column;
overflow: hidden;
padding: 20px;
}
.toast {
width: 400px;
height: 80px;
background: #fff;
font-weight: 500;
margin: 15px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
position: relative;
transform: translateX(100%);
animation: moveleft 0.5s linear forwards;
}
@keyframes moveleft{
100%{
transform: translateX(0);
}
}
.toast::after{
Page | 70
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: green;
animation: anim 5s linear forwards;
}
@keyframes anim {
100%{
width: 0;
}
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
Page | 71
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
/* Show the snackbar when clicking on a button (class added with JavaScript)
*/
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
About .html:
Page | 72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<img style="position: fixed; z-index: 0;" src="wallpaperflare.com_wallpaper
(49).jpg" alt=""/>
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html" class="active">ABOUT
US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<section class="about">
Page | 73
<div class="container">
<div class="about-content">
<div class="about-image">
<div class="image-overlay">
<h3>About Us</h3>
<p>Located on a then-lonesome little corner under the Williamsburg
Bridge in Brooklyn, Diner opened its doors on New Year’s Eve twenty-two years
ago. Owners Andrew Tarlow and Mark Firth hosted and bartended and ended most
nights with a hand of cards and a pitcher of margaritas. Chef Caroline Fidanza
wrote a daily menu committed to local, seasonal, sustainable foods, and built
relationships with the farmers in upstate New York and surrounding regions.
Kate Huling was server and salad maker, scrawling the menu across table after
table, then jumping back behind the line to overdress a salad when duty
called.</p>
<p> Diner’s expansive bar, a place to sit and read and eat and watch
the world go by is the centerpiece of the room, a 90-year-old Pullman dining
car. Warm wood and aged enamel, like being in the belly of a whale or the
protected hold of a ship. </p>
<h3>Our Team</h3>
<p>We are dedicated professionals<br> passionate about great food
and service.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
About.css:
.about {
padding: 40px 0;
}
.bgimg{
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);
Page | 74
}
.about h2 {
text-align: center;
margin-bottom: 20px;
}
.about p {
margin-bottom: 20px;
}
body{
background-color: #000000;
}
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.about-image img {
width: 800px;
height: 400px;
border-radius: 20px;
margin-left: 300px;
}
.image-overlay {
margin-top: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
padding: 20px;
background-color: rgba(255, 255, 255, 0.058);
color: #fffbfb;
border-radius: 5px;
}
.image-overlay h3 {
margin-bottom: 10px;
}
:root{
--main-color: #e7a809;
--text-color: #fff;
--other-color: #212121;
Page | 75
--second-color: #9e9e9e;
--bg-color: #111111;
--big-font: 4.5rem;
--h2-font: 2.6rem;
--p-font: 1.1rem;
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
Page | 76
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;
Page | 77
Location.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hours and Location</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="location.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
</head>
<body>
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html">HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html" class="active">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<section class="hours-location">
<div class="container">
<div class="hours">
Page | 78
<h2>Opening Hours</h2>
<ul class="timings">
<li>Monday: 11:00 AM - 10:00 PM</li>
<li>Tuesday: 11:00 AM - 10:00 PM</li>
<li>Wednesday: 11:00 AM - 10:00 PM</li>
<li>Thursday: 11:00 AM - 10:00 PM</li>
<li>Friday: 11:00 AM - 11:00 PM</li>
<li>Saturday: 11:00 AM - 11:00 PM</li>
<li>Sunday: 11:00 AM - 11:00 PM</li>
</ul>
</div>
<div class="location">
<h2>Location</h2>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.1743070611215!
2d-
122.41904818471433!3d37.77492997975287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1
!3m3!1m2!1s0x808580e8c5a07a21%3A0x88236505266aa48e!2sGolden%20Gate%20Bridge!5e
0!3m2!1sen!2sus!4v1633078232636!5m2!1sen!2sus"
width="1600"
height="650"
style="border: 1"
allowfullscreen=""
loading="lazy"
></iframe>
</div>
</div>
</section>
</body>
</html>
Location.css:
.hours-location {
padding: 150px 0;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg)
}
.hours-location h2 {
text-align: left;
margin-bottom: 20px;
}
.hours-location .container {
Page | 79
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.timings{
align-items: center;
margin-top: 40px ;
}
.timings li{
font-size: 22px;
margin-top: 12px;
.hours-location .location {
width: 45%;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: #0ec5bc;
color: #fff;
padding: 20px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
Page | 80
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 30px;
padding: 10px 0;
}
Booking.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Booking</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="booking.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
Page | 81
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
firestore.js"></script>
</head>
<body background="background.jpeg">
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html"
class="active">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<section class="booking">
<div class="container">
<h2>Make a Booking</h2>
<form action="" id="bookingform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required
placeholder="Enter your name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required
placeholder="Enter your email id"/>
</div>
<div class="form-group">
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" required
placeholder="Enter your mobile number"/>
Page | 82
</div>
<div class="form-group">
<label for="people">Number of People:</label>
<input type="number" id="people" name="people" min="1" required
placeholder="Enter no. of people" />
</div>
<button onclick="sendData(event)">Submit</button>
</form>
</div>
</section>
<script>
const firebaseConfig = {
// Your Firebase configuration
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
email,
mobile,
people
})
};
try {
const res = await fetch('https://newbookingpage-default-
rtdb.firebaseio.com/UserData.json', options);
console.log(res);
Page | 83
if (res.ok) {
alert("Booking submitted successfully!");
} else {
alert("An error occurred. Please try again.");
}
} catch (error) {
console.error('Error:', error);
alert("An error occurred. Please try again.");
}
};
</script>
</script>
</body>
</html>
Booking.css:
.booking {
padding: 8% 0 0;
margin: auto;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);
height: 100vh;
.booking h2 {
text-align: center;
margin-bottom: 20px;
}
.container {
width: 80%;
margin: 0 auto;
color: #ffffff;
}
header {
background-color: #0ec5bc;
color: #fff;
padding: 20px 0;
}
header .container {
display: flex;
justify-content: space-between;
Page | 84
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
form {
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
color: #ffffff; ;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color:#e7a809;
Page | 85
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
}
button:hover {
background-color: #e78709;
border-radius: 15px;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 30px;
padding: 10px 0;
}
Booking.js:
const firebaseConfig = {
apiKey: "AIzaSyBjoBUP3jBm7xqDyhrlzktHe5Ap4q9xdck",
authDomain: "bookingpage-e8d0f.firebaseapp.com",
databaseURL:
"https://bookingpage-e8d0f-default-rtdb.asia-
southeast1.firebasedatabase.app",
projectId: "bookingpage-e8d0f",
storageBucket: "bookingpage-e8d0f.appspot.com",
messagingSenderId: "282936482055",
appId: "1:282936482055:web:9bd51da6a4866cb2598da2",
measurementId: "G-SEN533S304",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
Page | 86
const mobile = form.mobile.value;
const people = parseInt(form.people.value);
Cart.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="cart.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Page | 87
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
firestore.js"></script>
</head>
<body background="pexels-kyla-rose-rockola-954677.jpg">
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>
<section class="cart">
<div class="container">
<h2>Your Cart</h2>
<div class="cart-items" id="cart-items">
</div>
<div class="cart-total">
<h3>Total:</h3>
<span id="cart-total">rs0</span>
</div>
</div>
<div class="cartt">
<!-- cart items display -->
<button id="order-now-btn">Order Now</button>
</div>
Page | 88
</section>
<script src="cart.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-
firestore.js"></script>
<script src="your-firebase-config.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const orderNowButton = document.getElementById('order-now-btn');
const loader = document.getElementById('loader'); // Get loader element
if (cartItems.length === 0) {
alert("Your cart is empty. Please add items before placing an order.");
return;
}
const firebaseConfig = {
apiKey: "AIzaSyDChHFeuLE82RhAavT9p47YP6nB1U9BO20",
authDomain: "newbookingpage.firebaseapp.com",
databaseURL: "https://newbookingpage-default-rtdb.firebaseio.com",
projectId: "newbookingpage",
storageBucket: "newbookingpage.appspot.com",
messagingSenderId: "967182319638",
appId: "1:967182319638:web:3efb98c1f3b850de2eb537"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
try {
let totalOrderPrice = cartItems.reduce((total, item) => total +
item.price, 0);
Page | 89
console.log("Order placed with ID: ", docRef.id);
localStorage.removeItem('cartItems');
alert("Order placed successfully! ");
window.location.href = "menu.html";
} catch (error) {
console.error("Error placing order: ", error);
alert("An error occurred while placing the order. Please try again.");
} finally {
// Hide loader after order is placed (success or error)
loader.style.display = 'none';
}
});
});
</script>
</body>
</html>
Cart.css:
.cart {
padding: 150px 0;
min-height: 100vh;
height: auto;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);
overflow: hidden;
}
.cart h2 {
text-align: center;
margin-bottom: 20px;
}
.empty-cart-message{
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
color: #b70000; /* Choose a color that complements your design */
text-align: center;
margin-top: 20px; /* Adjust spacing as needed */
}
Page | 90
.cart-item:last-child {
border-bottom: none;
}
.cart-item p {
margin: 0;
}
.cart-total {
margin-top: 30px;
text-align: right;
margin-right: 10%;
margin-bottom: 30px;
}
.container {
width: 80%;
margin: 0 auto;
color: #ffffff;
}
header {
background-color: #0ec5bc;
color: #fff;
padding: 10px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
Page | 91
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;
}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
Page | 92
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;
}
.cartt{
display: grid;
width: 100%;
padding: 10px;
color: #fff;
border: thick;
border-radius: 10px;
cursor: pointer;
Page | 93
}
#order-now-btn{
font-size: 16px;
padding: 8px 12px;
background-color: #e7a809 ;
color: white;
border: none;
margin: 0 auto;
width: 65%;
border-radius: 5px;
cursor: pointer;
}
.cart-item {
ALIGN-ITEMS: center;
display: flex;
width: 80%;
margin: 0 auto;
padding: 20px;
position: relative;
justify-content: start;
gap: 68px;
margin-bottom: 10px;
background-color: #ababab1a;
border-radius: 5px;
}
.remove-from-cart {
position: absolute;
transform: translateY(33%);
right: 40px;
height: 100%;
font-size: 28px;
/* top: 50%; */
cursor: pointer;
color: #e7a809;;
}
.cart-layout{
width:"100%";
display:"flex";
}
.quantity-button{
color: #e7a809;
background: transparent;
Page | 94
}
.quantity{
display: flex;
gap:10px;
background-color: #2b2b2ba7;
width: max-content;
padding: 2px 5px;
}
.quantity p,span{
font-size: 18px;
cursor: pointer;
}
.empty-cart-message {
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
color: #888;
text-align: center;
margin-top: 20px;
display: none; /* Initially hide the empty cart message */
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px 20px;
border-radius: 4px;
z-index: 999;
}
.cart-name{
text-transform: capitalize;
}
Cart.js:
document.addEventListener("DOMContentLoaded", function() {
const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
const cartItemsContainer = document.getElementById('cart-items');
const cartTotalElement = document.getElementById('cart-total');
let total = 0;
function renderCart() {
cartItemsContainer.innerHTML = ''; // Clear previous cart items
total = 0;
Page | 95
if (cartItems.length === 0) {
// Display message when cart is empty
const emptyCartMessage = document.createElement('p');
emptyCartMessage.textContent = 'Your Cart is Hungry! Add Delicious Items
Now!';
emptyCartMessage.style.fontSize = '28px';
emptyCartMessage.style.fontWeight = 'bold';
emptyCartMessage.style.marginTop="100px";
emptyCartMessage.style.textAlign = 'center';
cartItemsContainer.appendChild(emptyCartMessage);
itemElement.innerHTML = `
<img src="${item.imgUrl}" width="100px" height="100px" class="img-
cart" alt="${item.name}">
<div class="item-cart">
<p class="cart-name"><strong>${item.name}</strong></p>
<p class="cart-price">Price: Rs${item.price.toFixed(2)}</p>
<div class="cart-quantity">
Quantity:
<div class="quantity">
<p class="quantity-button" data-index="${index}" data-
action="decrease">-</p>
<span>${item.quantity}</span>
<p class="quantity-button" data-index="${index}" data-
action="increase">+</p>
</div>
</div>
</div>
<p class="remove-from-cart" data-index="${index}">X</p>
`;
cartItemsContainer.appendChild(itemElement);
Page | 96
cartItemsContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('quantity-button')) {
const index = parseInt(event.target.dataset.index);
const action = event.target.dataset.action;
cartItemsContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('remove-from-cart')) {
const index = parseInt(event.target.dataset.index);
cartItems.splice(index, 1); // Remove item from cartItems array
localStorage.setItem('cartItems', JSON.stringify(cartItems)); // Update
localStorage
renderCart(); // Re-render cart after item removal
}
});
});
Home.js:
const header = document.querySelector("header");
Firebase.js:
const firebaseConfig = {
Page | 97
apiKey: "AIzaSyC5ws8vODpWsEjh_9lFjLbNilKdJ5miiiA",
authDomain: "booking-3c528.firebaseapp.com",
databaseURL: "https://booking-3c528-default-rtdb.firebaseio.com",
projectId: "booking-3c528",
storageBucket: "booking-3c528.appspot.com",
messagingSenderId: "378143886888",
appId: "1:378143886888:web:b53b6424a4bdac98102f1d"
};
firebase.initializeApp(firebaseConfig);
document.getElementById("bookingForm").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
Mail.js:
const firebaseConfig = {
apiKey: "AIzaSyDmPEtEsNtxnGt-i4rYdTztfGSoAy2gkfE",
authDomain: "contactform-4e4bb.firebaseapp.com",
databaseURL: "https://contactform-4e4bb-default-rtdb.firebaseio.com",
projectId: "contactform-4e4bb",
storageBucket: "contactform-4e4bb.appspot.com",
messagingSenderId: "720010558004",
appId: "1:720010558004:web:eeece68921e98001146861"
};
firebase.initializeApp(firebaseConfig);
document.getElementById('contactform').addEventListener('submit',
submitForm);
Page | 98
function submitForm(e){
e.preventDefault();
Page | 99
Chapter 8
System Testing
Introduction
Testing should be done throughout the implementation process. Even before an application is
implemented, it makes sense to verify that the basic platform can achieve its design capabilities. System
testing is a critical process. Testing is a process of executing a program with the explicit intention of
finding errors that is, making the program fail. This help in finding the bottlenecks in the system.
Executing a program in a simulated environment performs testing. The feedback from testing phase
generally produces changes in the software to deal with errors and failures that are uncovered.
In Black Box testing or functional testing test cases are decided. Test cases are decided based on the
requirements or the specifications of the program or module.
The White Box testing or Structural testing performs close operation of procedural details. They test the
software logical path by having test cases exercising specific sets of conditions and loops.
Page | 100
8.3 Unit Testing:
Unit testing focuses on verification efforts of the smallest grid of software designing i.e. a software
component or module is tested. This testing is done at the coding phase. This testing uses procedural
design as guide to test major controls path and uncovers errors within the module boundary.
Module interface was tested to ensure information flow in and out of the program unit.
Local Data Structure were tested to ensure that data store temporally maintain their integrity during all
steps in algorithm execution.
Boundary Conditions were tested to make sure that the modules operate properly at boundaries.
All independent pathsthrough control structure were checked to make sure that all statements in a
module have been executed.
Integration testing is done to tackle the problem of interface i.e., putting all the interfaces together. When
the separate modules are put together and work in an integrated manner, this testing is performed. This
testing is a Systematic technique. This testing is performed to check that data should not be lost across
an interface. The objective is to take unit tested modules and build a program structure that has been
dictated by design.
Page | 101
8.5 System Testing:
System testing is done when the entire system has been fully integrated. The purpose of the system
testing is to test how the different modules interact with each other and whether the system provides the
functionality that was expected.
Page | 102
FUTURE PROSPECTIVE
1. Enhanced Features: Continuously adding new features and functionalities to improve user
experience and meet evolving user needs. This may include integrating advanced workout
tracking capabilities, personalized diet plans, and interactive fitness challenges.
3. Integration with Wearable Devices: Integrating with popular wearable fitness devices
such as smartwatches and fitness trackers to enable seamless synchronization of workout data
and health metrics for more comprehensive tracking and analysis.
4. Community Building: Building a vibrant online community within the Fitness Tracker
Website where users can connect with like-minded individuals, share their fitness journey,
and provide mutual support and motivation.
5. Machine Learning and AI: Leveraging machine learning and artificial intelligence
algorithms to provide personalized fitness recommendations, predictive analytics, and real-
time feedback based on user data and behavior patterns.
6. Expansion of Content: Expanding the content library with informative articles, videos, and
expert advice on various fitness topics, nutrition, and wellness to educate and empower users
in their health and fitness journey.
7. Integration with Health Services: Partnering with healthcare providers, nutritionists, and
wellness professionals to offer integrated health services such as telemedicine consultations,
nutrition counseling, and online coaching programs.
Page | 103
8. Gamification: Implementing gamification elements such as challenges, achievements,
and rewards to make fitness tracking more engaging and motivating for users, encouraging
them to stay committed to their goals.
9. Localized Versions: Creating localized versions of the Fitness Tracker Website to cater to
different regions and languages, ensuring accessibility and usability for a diverse global
audience.
10. Continuous Improvement: Continuously gathering feedback from users and stakeholders
to identify areas for improvement and refinement, and iteratively enhancing the platform
based on user insights and market trends.
Page | 104
LIMITATIONS
User Adoption: There may be limitations in user adoption and acceptance of new
digital features or processes, particularly among restaurant staff who may require
training or support to adapt to changes.
Data Privacy and Security: Ensuring compliance with data privacy regulations and
implementing robust security measures to protect customer data and sensitive
information presents ongoing challenges and risks.
Maintenance and Support: Ongoing maintenance and support requirements for the
website, including updates, bug fixes, and user support, may pose limitations in terms
of resources and capacity over time.
Page | 105
CONCLUSION
In conclusion, while the Essence restaurant website project promises to deliver substantial
benefits in terms of enhancing the restaurant's digital presence and operational efficiency, it's
imperative to acknowledge and meticulously address the array of limitations and challenges
that may emerge during its execution. By proactively considering and strategically mitigating
these constraints, spanning technical hurdles, budgetary constraints, and potential user
adoption hurdles, the project can be steered towards successful fruition. Through a blend of
foresighted planning, transparent communication, and a steadfast commitment to adaptability,
the Essence restaurant website endeavor has the potential not only to fulfill its stated
objectives but also to serve as a transformative force, propelling the restaurant towards
heightened growth, augmented customer satisfaction, and fortified positioning as a
preeminent dining destination amidst the dynamic and fiercely competitive restaurant
industry landscape.
Page | 106
Bibliography
Laura Lemay, Rafe Colburn , Jennifer Kymin : Mastering HTML , CSS AND
JAVASCRIPT WEB publishing
Page | 107