Software Requirements Specification

On

“Food Restaurant Management System”

17-04-2024

Submitted by

Saif Ali

Registration No: 12301639

Programme Name: BTech CSE

Submitted to

Arwinder Dhillon ma’am

Prepared for
Continuous Assessment 3
Autumn 2024
Table of Contents

1. INTRODUCTION.....................................................................................................................................................3
1.1 PURPOSE.......................................................................................................................................................................................................3
1.2 SCOPE............................................................................................................................................................................................................3
1.3 DEFINITIONS, ACRONYMS, AND ABBREVIATIONS.........................................................................................................................4
1.4 REFERENCES................................................................................................................................................................................................4
1.5 OVERVIEW...................................................................................................................................................................................................5
2. GENERAL DESCRIPTION....................................................................................................................................5
2.1 PRODUCT PERSPECTIVE...........................................................................................................................................................................6
2.2 PRODUCT FUNCTIONS..............................................................................................................................................................................6
2.3 USER CHARACTERISTICS........................................................................................................................................................................6
2.4 GENERAL CONSTRAINTS.........................................................................................................................................................................7
2.5 ASSUMPTIONS AND DEPENDENCIES....................................................................................................................................................7
3. SPECIFIC REQUIREMENTS................................................................................................................................8
3.1 EXTERNAL INTERFACE REQUIREMENTS............................................................................................................................................9
3.1.1 User Interfaces...........................................................................................................................................10
3.1.2 Hardware Interfaces..................................................................................................................................10
3.1.3 Software Interfaces....................................................................................................................................10
3.1.4 Communications Interfaces...........................................................................................................................
3.2 FUNCTIONAL REQUIREMENTS............................................................................................................................................................12
3.2.1 <Functional Requirement or Feature #1>................................................................................................12
3.2.2 <Functional Requirement or Feature #2>................................................................................................13
3.5 NON-FUNCTIONAL REQUIREMENTS.................................................................................................................................................14
3.5.1 Performance...............................................................................................................................................14
3.5.2 Reliability...................................................................................................................................................14
3.5.3 Availability.................................................................................................................................................14
3.5.4 Security.......................................................................................................................................................14
3.5.5 Maintainability...........................................................................................................................................15
3.5.6 Portability..................................................................................................................................................15
3.7 DESIGN CONSTRAINTS..........................................................................................................................................................................15
4. ANALYSIS MODELS...............................................................................................................................................
4.1 DATA FLOW DIAGRAMS (DFD)..........................................................................................................................16

5.Screenshots 18
 1. Introduction
his Software Requirements Specification (SRS) document delineates the fundamental
requisites for transforming the existing food restaurant management system website into an
enhanced and optimized platform. The purpose of this document is to offer a comprehensive
roadmap for software engineers and stakeholders involved in the redevelopment process. By
outlining both functional and non-functional requirements, this SRS serves as a guide for the
design, development, and implementation phases, ensuring the successful evolution of the
website.

1.1 Purpose

The purpose of this project is to revolutionize the food restaurant management system
website, enhancing its functionality, usability, and overall user experience. By leveraging
modern technologies and addressing existing limitations, the goal is to create a robust and
scalable platform that meets the evolving needs of restaurant owners, staff, and customers.

1.2 Scope

1) Identification of Software Product:

The software product, the Food Restaurant Management System website, encompasses the
entire web application designed for restaurant owners, staff, and customers. It consists of
various modules tailored to meet the needs of different stakeholders, including:

• Home: Provides an overview of the restaurant, special promotions, and easy navigation to
other sections.

• Menu Management: Allows restaurant administrators to update menu items, prices, and
descriptions dynamically.

]• Order Management: Facilitates order placement, tracking, and fulfillment for dine-in, takeout,
and delivery orders.

• Reservation System: Enables customers to book tables in advance and provides notifications to
restaurant staff.

Payment Processing: Integrates secure payment gateways for online transactions, ensuring
smooth and safe payments.

• Feedback Mechanism: Incorporates a feedback system for customers to rate their dining
experience and offer suggestions.
(2) Functionality:

The Food Restaurant Management System website will offer the following functionalities:

• Provide an interactive home module to welcome visitors, showcase special dishes, and highlight
promotions.

• Include a Menu Management module to allow restaurant owners to update menu items, prices,
and descriptions in real-time.

• Feature an Order Management system that enables customers to place orders online for dine-
in, takeout, or delivery.

• Offer a Reservation System module for customers to book tables ahead of time, with
reminders sent to restaurant staff.

• Integrate secure Payment Processing to enable online payments for orders, ensuring data
privacy and security.

• Incorporate a Feedback Mechanism for customers to leave reviews, ratings, and

suggestions to improve the dining experience.

(3) Application:

The application of the Food Restaurant Management System website is to streamline

restaurant operations, enhance customer satisfaction, and drive business growth:

(a) Benefits, Objectives, and Goals:

• Provide restaurant owners with a comprehensive online platform to manage menu items,
orders, reservations, and payments efficiently.

• Offer customers a user-friendly interface to explore menu options, place orders, make
reservations, and provide feedback seamlessly.

• Enhance the overall dining experience by improving order accuracy, reducing wait times, and
increasing customer engagement.

• Enable restaurant staff to better manage incoming orders, allocate resources effectively, and
provide personalized service to customers.

(b) Consistency with Higher-Level Specifications:

• This scope aligns with the objectives and goals outlined in higher-level specifications, such as
project proposals and the System Requirement Specification (SRS), ensuring coherence and
consistency in project execution.
 • In summary, the scope of the Food Restaurant Management System website is to develop a
comprehensive online platform that optimizes restaurant operations, improves customer
satisfaction, and fosters business growth. This scope aligns with the broader objectives of the
project, aiming to deliver a robust solution that meets the needs of restaurant owners, staff,
and customers alike.

2.1 Definitions, Acronyms, and Abbreviations

This subsection should provide the definitions of all terms, acronyms, and abbreviations required
to properly interpret the SRS. This information may be provided by reference to one or more
appendixes in the SRS or by reference to other documents.

2.2 References

This section outlines the key documents and sources referenced in the development of the Food
Restaurant Management System website:

(1) MongoDB Documentation

Title: MongoDB Documentation

Source: MongoDB official website
Website: mongodb.com

(2) JavaScript MDN Web Docs

Title: JavaScript MDN Web Docs

Source: Mozilla Developer Network (MDN) Website
Website: developer.mozilla.org/en-US/docs/Web/JavaScript

(3) HTML Specification

Title: HTML Specification

Source: World Wide Web Consortium (W3C) Website
Website: w3.org/TR/html52/

(4) CSS Specification

Title: CSS Specification

Source: World Wide Web Consortium (W3C) Website
Website: 127.0.0.1.3030/register

These resources provide comprehensive guidance and reference materials for leveraging
MongoDB, JavaScript, HTML, and CSS in the development of the Food Restaurant Management
System website. By adhering to industry best practices and standards outlined in these documents,
the development team aims to create a robust, scalable, and user-friendly web application tailored
to the needs of restaurant owners, staff, and customers.

2.3 Overview

The subsequent sections of this Software Requirements Specification (SRS) document present a
holistic view of the Food Restaurant Management System website redevelopment project. The
document is organized as follows:

Section 2: General Description offers an overview of the project, encompassing user personas,
hardware prerequisites, and a high-level summary of system functionality.

Section 3: Functional Requirements delves into the specific functional aspects of the Food
Restaurant Management System website. It delineates data requirements, constraints, and the
foundational assumptions guiding the website's redesign. Additionally, this section provides
insights into user perspectives on the product and offers detailed descriptions of the functional
requirements.

Section 4: Supporting Information furnishes additional details, references, and supplementary

material relevant to the project. This includes resources such as documentation references,
external sources, and any other information deemed necessary for project understanding and
execution.

The structured format of this document ensures easy navigation and accessibility, facilitating
comprehension for all stakeholders involved in the redevelopment of the Food Restaurant
Management System website. By providing a clear roadmap and detailed specifications, this
document aims to support effective project management and the successful realization of the
project objectives.

3. General Description

This section provides a broad overview of the factors that influence the development of "The
website and its associated requirements. It is important to note that this section does not
specify detailed requirements but aims to provide context to facilitate a better understanding
of the project's scope2.1
2.2 Product Functions

This subsection outlines the core functions that the redesigned Food Restaurant Management
System website will perform, catering to the needs of restaurant owners, staff, and customers:

Menu Management Functions

• Enable restaurant administrators to update menu items, prices, and descriptions dynamically.
• Allow for easy categorization and organization of menu items.
• Provide options for adding, editing, and removing menu items as needed.
• Implement version control to track menu changes and revisions.

Order Management Functions

• Facilitate seamless order placement, tracking, and fulfillment for dine-in, takeout, and delivery
orders.
• Display real-time order status updates for both customers and restaurant staff.
• Integrate with kitchen display systems (KDS) for efficient order processing.
• Allow for order modifications and customizations based on customer preferences.

Reservation System Functions

• Enable customers to book tables in advance through an intuitive reservation system.

• Provide flexibility for specifying date, time, party size, and special requests.
• Send automated confirmation emails to customers upon successful reservation.
• Notify restaurant staff of upcoming reservations and manage table assignments.

Payment Processing Functions

• Integrate secure payment gateways to facilitate online transactions for orders and reservations.
• Support multiple payment methods, including credit/debit cards, mobile wallets, and online
banking.
• Ensure compliance with PCI DSS standards to safeguard sensitive payment information.
• Generate electronic receipts for customers and maintain transaction records for accounting
purposes.
Feedback Mechanism Functions

• Implement a user-friendly feedback system for customers to rate their dining experience and
provide comments.
• Allow for anonymous feedback submission to encourage honest opinions.
• Aggregate feedback data to identify trends, address issues, and improve overall service quality.
• Provide restaurant management with analytics and reporting tools to monitor feedback trends
and track performance metrics.

By incorporating these functions into the Food Restaurant Management System website, the
redevelopment aims to enhance operational efficiency, improve customer satisfaction, and
drive business growth in the competitive restaurant industry

2.3 User Characteristics

Streamlined Membership Management: The backend should feature a comprehensive

membership management system that allows administrators to efficiently handle member
registrations, renewals, and cancellations. Integration with payment gateways for secure
transactions and automated renewal reminders can enhance user experience and streamline
administrative tasks.

Dynamic Class Scheduling: Implementing a dynamic class scheduling system empowers

administrators to easily update class timetables, assign instructors, and manage class capacities. A
user-friendly interface with drag-and-drop functionality can simplify scheduling tasks, while real-
time updates ensure members have access to the latest class information.

Menu Management and Ordering System: Enhance the backend with a robust menu management
system for the food restaurant section. Administrators should be able to effortlessly update menu
items, prices, and descriptions, while also managing inventory levels and specials. Integration with
an online ordering system enables members to place orders conveniently, whether for dine-in or
takeout.

Nutritional Information and Dietary Preferences: Cater to the diverse dietary preferences and
nutritional needs of members by incorporating features to display comprehensive nutritional
information for menu items. Additionally, allow users to filter menu options based on dietary
restrictions or preferences, such as gluten-free, vegan, or low-carb choices. Customizable profiles
can enable members to set dietary preferences for personalized recommendations.
Feedback and Analytics: Implement tools for collecting feedback from members regarding their
dining experiences, menu preferences, and suggestions for improvement. Analytics capabilities
should provide administrators with valuable insights into popular menu items, peak dining times,
and revenue trends, enabling data-driven decision-making and menu optimization.
Integration with Point-of-Sale (POS) Systems: Seamlessly integrate the backend with POS systems
to facilitate smooth transactions and inventory management. This integration ensures accurate
tracking of sales, inventory levels, and revenue generation, while also enabling efficient order
fulfillment and payment processing.

2.4 General Constraints

The Food restaurant management system will run under Windows 7 or higher platforms of
operating systems.

2.5 Assumptions and Dependencies

These assumptions and dependencies are crucial to maintaining flexibility throughout the project.

Assumptions:

 Internet Connectivity: It is assumed that users accessing "The Food restaurant

management system ” website will have access to a stable internet connection to
interact with the platform.

 Compatibility with Modern Web Browsers: The website is assumed to be compatible

with contemporary web browsers, ensuring an optimal user experience.

 Data Privacy Regulations: The SRS assumes compliance with applicable data privacy
and security regulations to protect user information

Dependencies
  Third-Party Services: The website may depend on third-party services (e.g., payment
gateways) to facilitate membership sign-ups. Changes or interruptions in these
services may affect the website's functionality.

 Technology Stack Compatibility: The website's functionality depends on the

compatibility and availability of the javascript framework and related
technologies.

 Server and Hosting Services: The performance of the website may depend on the
reliability and scalability of server and hosting services. Any issues with these services
could affect the website's performance.

3. Specific Requirements

Menu Management System:

Introduce a user-friendly menu management system within the backend to facilitate easy updates
and modifications to the food restaurant's menu. Administrators should have the capability to add
new menu items, edit existing ones, and categorize items according to type (e.g., appetizers, main
courses, beverages).

Inventory Management:

Implement an inventory management feature to track stock levels of ingredients and menu items.
This functionality ensures that administrators can monitor inventory in real-time, receive alerts for
low stock items, and efficiently manage ingredient procurement to prevent stockouts.

Order Management Dashboard:

Develop an intuitive order management dashboard for administrators to view, process, and track
incoming orders from website users. The dashboard should display order details, such as itemized
lists, order status, and customer information, enabling administrators to manage orders efficiently
and ensure timely order fulfillment.

Integration with Point-of-Sale (POS) System:

Seamlessly integrate the food restaurant backend with a POS system to synchronize order data,
streamline payment processing, and maintain consistency in inventory management. This
integration enables administrators to seamlessly transition between online and in-person orders
while maintaining accurate records of sales and inventory.
Customization Options:

Provide customization options within the backend for administrators to configure menu item
variations, such as size options, toppings, or side dishes. This feature allows for greater flexibility in
menu offerings and caters to diverse customer preferences.

Analytics and Reporting:

Incorporate analytics and reporting tools into the backend to track key performance metrics, such
as sales trends, popular menu items, and peak ordering hours. Administrators can utilize this data
to make informed decisions regarding menu optimization, pricing strategies, and promotional
campaigns.

User Feedback Management:

Integrate a feedback management system to capture user reviews and feedback regarding the
food restaurant's offerings and service quality. Administrators can use this feedback to identify
areas for improvement, address customer concerns, and enhance overall customer satisfaction.

3.1.1.1 About Module User Interface

Menu Description and Visuals:

Enhance the backend to include a section dedicated to describing the food restaurant's mission,
specialties, and unique offerings. Administrators should be able to input descriptive text and
upload high-quality images or icons showcasing the restaurant's ambiance, signature dishes, and
culinary expertise. This section provides users with a clear understanding of the restaurant's
identity and offerings, fostering engagement and interest.

Staff Profiles: Introduce a feature within the backend for administrators to create and manage
profiles for restaurant staff, including chefs, kitchen staff, and servers. Each profile should include a
brief bio, photo, and details about the staff member's role and expertise. By showcasing the
restaurant's talented team, users can develop a personal connection and trust with the staff,
enhancing the overall dining experience.

Contact Form Management: Implement functionality within the backend to manage the "Contact
Us" form displayed on the About module interface. Administrators should be able to customize
form fields, receive notifications for incoming inquiries, and track communication with users.
Additionally, integration with customer relationship management (CRM) systems can streamline
inquiry handling and ensure timely responses to user queries.

Responsive Design Compatibility: Ensure that the backend interface is designed with responsive
design principles, allowing administrators to access and manage restaurant content seamlessly
across various devices, including desktops, tablets, and smartphones. Responsive design ensures
an optimal user experience for administrators, regardless of the device they are using to manage
restaurant operations.

Branding Consistency: Maintain consistency in branding elements, including color schemes and
typography, within the backend interface. Administrators should have access to customizable
branding options to align the backend interface with the restaurant's visual identity and aesthetics,
reinforcing brand recognition and cohesion.
Accessibility Features: Incorporate accessibility features into the backend interface to ensure
compliance with accessibility standards, such as providing alternative text for images and ensuring
keyboard navigation support. These features enhance the usability of the backend interface for
administrators with disabilities, promoting inclusivity and accessibility.

3.1.1.2 Gallery Module User Interface

 "All," "Images," and "Videos" Buttons: Integrate functionality within the backend
to manage and organize visual content effectively. Administrators should be able to
categorize media into images and videos, ensuring that users can easily browse
through different types of content. Each button should lead to a visually appealing
gallery interface showcasing the respective media type.

 Responsive Design: Ensure that the backend interface for managing the Gallery
Module is designed with responsive design principles. Administrators should be able
to upload, organize, and update images and videos seamlessly across various
devices, maintaining consistency in visual presentation and user experience.

 Color Scheme and Typography: Provide administrators with customizable options

for defining the color scheme and typography within the backend interface. This
customization allows administrators to align the visual presentation of the Gallery
Module with the overall branding and aesthetics of the gym website.

 Accessibility Considerations: Implement accessibility features within the backend

interface to ensure compliance with accessibility standards. Administrators should
have the ability to add alternative text descriptions for images and videos, making
visual content accessible to users with disabilities.

 State and City Selection: Develop functionality within the backend to manage the
state and city selection process. Administrators should be able to update the list of
available states and cities dynamically, ensuring that users can easily find gym
locations based on their location preferences.

 Membership Plans: Enhance the backend to allow administrators to manage

membership plans effectively. Administrators should be able to add, edit, and
 remove membership plans, specifying details such as plan features, pricing, and
duration. This ensures that users have access to comprehensive information when
selecting a membership plan.

 Responsive Design: Ensure that the backend interface for managing the
Plans/Membership Module is designed with responsive design principles.
Administrators should be able to update membership plan information seamlessly
across various devices, ensuring a consistent and user-friendly experience for users.
 Color Scheme and Typography: Provide administrators with customizable options
for defining the color scheme and typography within the backend interface. This
customization allows administrators to align the visual presentation of the
Plans/Membership Module with the overall branding and aesthetics of the gym
website.

 Accessibility Considerations: Implement accessibility features within the backend

interface to ensure compliance with accessibility standards. Administrators should
have the ability to add accessibility features such as keyboard navigation support
and screen reader compatibility, making the Plans/Membership Module accessible
to users with disabilities..

3.1.1.3 Our Trainer's Module User Interface

Trainer Profile Management: Develop a comprehensive trainer management system within the
backend to facilitate the creation and maintenance of trainer profiles. Administrators should be
empowered to input key details such as the trainer's name, photograph, qualifications, and a
succinct biography. This system should allow for easy updates and revisions as necessary.

Specializations Integration: Integrate a feature in the backend interface to incorporate additional

information regarding each trainer's areas of specialization. This might include categories such as
strength training, cardio, yoga, or nutrition. Administrators should be able to assign and modify
these specializations within each trainer's profile to accurately represent their expertise.

Interactive Profile Elements: Enhance the backend to support interactive elements within trainer
profiles. Users should have the ability to click on individual profiles to access more detailed
information about the trainer, including their experience, training philosophy, and client
testimonials if available. This interactive functionality enriches user engagement and provides
valuable insights into each trainer's background.

Responsive Design Optimization: Ensure that the backend interface is designed with responsive
design principles, allowing administrators to manage trainer profiles seamlessly across various
devices. This adaptability ensures an optimal viewing and interaction experience for
administrators, regardless of the device they are using to access the backend.

Color Scheme and Typography Customization: Provide customizable options within the backend
interface for defining the color scheme and typography. Administrators should have the flexibility
to align the visual presentation of trainer profiles with the overall branding and aesthetics of the
gym website. Consistency in design elements enhances the user experience and reinforces brand
identity.

Accessibility Enhancements: Implement accessibility features within the backend interface to

adhere to accessibility standards. This includes providing alternative text for images, ensuring
keyboard navigation support, and optimizing contrast ratios for readability. These enhancements
make the "Our Trainers" module inclusive and usable for individuals with disabilities, promoting
accessibility and inclusivity.

3.1.2 Hardware Interfaces

For the hardware requirements the SRS specifies the logical characteristics of each interface
b/w the software product and the hardware components. It specifies the hardware
requirements like memory restrictions, cache size, the processor, RAM size etc. Those are
required for the software to run.
 Minimum Hardware Requirements:

 Processor: Pentium III

 Hard Disk Drive: 40 GB
 RAM: 128 MB
 Cache: 512 KB

 Preferred Hardware Requirements:

 Processor: Pentium IV
 Hard Disk Drive: 80 GB
 RAM: 256 MB
 Cache: 512 KB
3.1.3 Software Interfaces

Any window-based or MAC operating system with DOS supportare primary requirements for
software development. Windows XP,FrontPage and dumps are required. The systems must
beconnected via LAN and connection to internet is mandatory

3.2 Functional Requirements

3.2.1 Member Registration

3.2.1.1 Introduction:
The Member Registration feature allows individuals to become registered members of the gym,
gaining access to personalized content, membership plans, and online booking.

3.2.1.2 Inputs:
User's name
Email address
Desired
username
Password (with specific complexity requirements)
Optional profile picture

3.2.1.3 Processing:

The user accesses the "Sign Up" page.

The user enters their name, email address, and desired username.
The system validates the email format and checks if the username is
unique. The user selects a strong password, which is verified for
complexity.
Optionally, the user can upload a profile picture.
The system creates a new user account and stores the provided
information. An email verification link is sent to the user for account
confirmation.

3.2.1.4 Outputs:

A confirmation message is displayed to the user, indicating successful registration.

An email is sent to the user's provided email address with an account verification
link.

3.2.1.5 Error Handling:

If the email address is invalid or already in use, an error message is displayed, prompting
the user to correct the email.
If the chosen username is not unique, the user is asked to select another one.
Password complexity requirements are enforced, and if not met, the user is prompted to choose
a stronger password.
In case of any server errors during the registration process, a generic error message is shown, and
the user is asked to try again later
3.2.1.6 Error Handling:

If the member's login credentials are incorrect, they are prompted to enter valid information.
If the selected membership plan is not compatible with the member's eligibility or has specific
prerequisites, an error message is displayed, and the member is guided to choose an
appropriate plan.

3.5 Non-Functional Requirements

3.5.1 Performance

1. The system should process 95% of transactions in less than one second.

2. Response times for user interactions must be within acceptable limits.

3. The website must handle concurrent user loads, such as 500 simultaneous users,
without significant performance degradation.

3.5.2 Reliability

1. The system should have a Mean Time Between Failures (MTBF) of more than 30 days

2. It should provide continuous and reliable service to users.

3. Backup and recovery mechanisms must ensure data integrity.

3.5.3 Availability

1. System downtime may not exceed 1 minute per day.

2. The system should be available 24/7, with scheduled maintenance occurring during off-
peak hours.

3. High availability and failover mechanisms should be in place to minimize service interruptions.
3.5.4 Security

1. User data must be encrypted during transmission and storage.

2. Access to user accounts and sensitive information must be protected with strong
authentication and authorization mechanisms.

3. The system should be resilient against common security threats, such as SQL injection
and cross-site scripting (XSS).

3.5.5 Maintainability

1. The software should be designed with modularity and code maintainability in mind.

2. Regular updates and maintenance should be achievable without significant disruptions.

3. Code should be well-documented to facilitate ongoing development and troubleshooting.

3.5.6 Portability

1. The system should be accessible across different web browsers, including

Chrome, Firefox, Safari, and Edge.

2. Mobile responsiveness should be a design consideration to ensure access from

various devices.

3. The system should be platform-independent and compatible with major

operating systems
3.7 Design Constraints

This section outlines the design constraints that will influence the food restaurant management
system software project. These constraints are imposed by various factors, including standards,
company policies, hardware limitations, and more:

 Technology Stack: The project must use Angular for the frontend and a specified
database system (e.g., MySQL) in accordance with company standards.

 Regulatory Compliance: The software must adhere to industry-specific regulations,

ensuring data security, privacy, and accessibility.

 Data Privacy: Strict compliance with data protection regulations is required to

safeguard sensitive user information.

 Scalability: The software design should accommodate future growth in the number
of gym members and additional features.
  Hardware Compatibility: Ensuring the software runs efficiently on a defined range of
hardware configurations.

 Timeline Constraints: The project's development and deployment timeline is influenced

by external factors.

4.1 Data Flow Diagrams (DFD)

 Zero Level Data Flow Diagram: Elaborated high-level processes (basic overview)
 First Level Data Flow Diagram: This shows how the system is divided into
subsystems
 5.1 Screenshots of the Project :-

1 . Source Code –

Index.html –

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Website</title>
<link rel="stylesheet" href="index.css">
<link
href="https://fonts.googleapis.com/css2?
family=Abril+Fatface&family=Catamaran:wght@200&family=Courgette&family=Edu+TAS+Begi
nner:wght@700&family=Lato:wght@300;900&family=Mukta:wght@700&family=Mulish:wght@300
&family=Open+Sans&family=PT+Sans:ital,wght@1,700&family=Poppins:wght@300&family=Ral
eway:wght@100&family=Roboto&family=Roboto+Condensed:wght@700&family=Roboto+Slab&dis
play=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?
family=Abril+Fatface&family=Catamaran:wght@200&family=Courgette&family=Dancing+Scri
pt:wght@700&family=Edu+TAS+Beginner:wght@700&family=Lato:wght@300;900&family=Mukta:
wght@700&family=Mulish:wght@300&family=Open+Sans&family=PT+Sans:ital,wght@1,700&fam
ily=Poppins:wght@300&family=Raleway:wght@100&family=Roboto&family=Roboto+Condensed:
wght@700&family=Roboto+Slab&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/f30fac2c61.js"
crossorigin="anonymous"></script>
</head>

<body>

<div class="container">
<nav>
<div class="logo">
<h1>Bite Buddy</h1>
</div>

<ul>
<a href="">Home</a>
<a id="foods" href="#food">Food</a>
<a id="dishes" href="#dishe">Best Dishes</a>
<a id="orders" href="#order">Track Order</a>
 <button id="log">Log In</button>
</ul>
</nav>

<!-- log in -->

<div id="logPage">
<input type="email" placeholder="Enter Email Address" id="name"
autocomplete="off">
<input type="password" autocomplete="off" placeholder="Enter Password"
id="pass"> <br>
<button id="logedBtn">Log In</button>
</div>

<div class="main">
<div class="text">
<h1>Healthy Food For Wealthy <br>Mood</h1>
<h1 class="off">Upto 20% OFF</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore
placeat <br> expedita voluptatibus
nam consequuntur provident corporis.</p>
<button>Order Now</button>
</div>
<img src="mainimg.jpg" alt="">
</div>

<!-- cards -->

<div class="food" id="food">
<div class="head">
<h1>Our <span>Food's</span></h1>
</div>
<div class="crd">
<div class="card">
<img src="img1.jpg" alt="">
<div class="cardText">
<h2>Butter Paneer</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
<div class="card">
<img src="img2.jpg" alt="">
<div class="cardText">
<h2>Butter Paneer</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
<div class="card">
<img src="img3.jpg" alt="">
 <div class="cardText">
<h2>Butter Paneer</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
</div>
</div>

<div class="food" id="food2">

<div class="crd">
<div class="card">
<img src="img4.jpg" alt="">
<div class="cardText">
<h2>Samosa</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
<div class="card">
<img src="img5.jpg" alt="">
<div class="cardText">
<h2>Burger</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
<div class="card">
<img src="img6.jpg" alt="">
<div class="cardText">
<h2>Finger Chips</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
<button>Order Now</button>
</div>
</div>
</div>
</div>

<!-- best dishes -->

<div class="dishes" id="dishe">

<div class="head">
<h1>Best <span>Dishes</span></h1>
</div>
<div class="best">
<div class="bestCard">
<img src="food.jpg" alt="">
 <div class="bestText">
<h2>Best Dishes Ever</h2>
<img src="r2.jpg" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Unde, obcaecati laborum.</p>
<a href="https://www.tasteatlas.com/100-most-popular-foods-
in-the-world">Explore Foods</a>
</div>
</div>
<div class="bestCard">
<img src="img2.jpg" alt="">
<div class="bestText">
<h2>Best Dishes Ever</h2>
<img src="r3.jpg" alt="">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Unde, obcaecati laborum.</p>
<a href="https://www.tasteatlas.com/100-most-popular-foods-
in-the-world">Explore Foods</a>
</div>
</div>
</div>
</div>

<!-- track Order -->

<div class="order" id="order">

<div class="head">
<h1>Track Your <span>Order</span></h1>
</div>
<div class="track">
<div class="trackText">
<i class="fa-solid fa-bicycle"></i> <br>
<h2>Track Your Order Here</h2>
<button id="track">Track</button>
</div>
<img src="map.webp" alt="">
</div>
</div>

<!-- tracking -->

<div class="imgs">
<div class="imgText">
<h1>Live Order Tracking</h1> <br>
<h2>Fast Delivery</h2> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing <br> elit.
Aperiam, in? Rerum culpa cumque
repellendus <br> ullam officia aspernatur provident eos labore
<br> similique quaerat.</p>
</div>
 <img src="tracking.png" alt="">
</div>

<!-- footer -->

<div class="footer">
<div class="footerText">
<h2>About Us</h2><br>
<a>Lorem ipsum dolor, sit amet consectetur adipisicing <br> elit.
Quos nihil aliquam fuga ex obcaecati
rerum <br> in sunt ducimus dolorum, officiis odit atque!</a>

</div>
<div class="footerText">
<h2>Our Foods</h2><br>
<a>Quality</a><br>
<a>foods</a><br>
<a>price</a><br>
<a>quality</a><br>
<a>Price</a> <br>
<a>Best food</a>

</div>
<div class="footerText">
<h2>Customer</h2><br>
<a>Service</a><br>
<a>Relation</a><br>
<a>quality</a><br>
<a>Price</a>

</div>
<div class="footerText">
<h2>Contact Us</h2><br>
<a>A-33 Block</a><br>
<a>Kudlu Gate</a><br>
<a>Service Road</a><br>
<a>0022-4222</a>

</div>
</div>
</div>
<script src="index.js"></script>
</body>

</html>
2. Index.js

let dishes = document.getElementById("dishes");

let foods = document.getElementById("foods");
let orders = document.getElementById("orders");
let track = document.getElementById("track");
let logIn = document.getElementById("log");
let logPage = document.getElementById("logPage");
let logedBtn = document.getElementById("logedBtn");

dishes.addEventListener("click", function () {
dishes.style.color = "red";
foods.style.color = "white";
orders.style.color = "white";
});

foods.addEventListener("click", function () {
dishes.style.color = "white";
foods.style.color = "red";
orders.style.color = "white";
});

orders.addEventListener("click", function () {
dishes.style.color = "white";
foods.style.color = "white";
orders.style.color = "red";
});

track.addEventListener("click", function () {
document.getElementById("food").style.display = "none";
document.getElementById("order").style.display = "none";
document.getElementById("dishe").style.display = "none";
document.getElementById("food2").style.display = "none";
document.querySelector(".main").style.display = "none";
document.querySelector(".imgs").style.display = "flex";
});

logIn.addEventListener("click", function () {
logPage.style.display = "block";
});
logedBtn.addEventListener("click", function () {
let name = document.getElementById("name");
let pass = document.getElementById("pass");

if (name.value == "" || pass.value == "") {

alert("Please Enter Email Password");
} else {
alert(name.value + "You Loged In");
 logPage.style.display="none"
}
});

3.Login.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--=============== REMIXICONS ===============-->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
crossorigin="">

<!--=============== CSS ===============-->

<link rel="stylesheet" href="">

<title>Login form - Bedimcode</title>

</head>
<style>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.login__title {
text-align: center;
margin-bottom: 20px;
}

.login__box {
position: relative;
margin-bottom: 20px;
}

.login__input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

.login__box i {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
color: #888;
}

.login__check {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.login__forgot {
color: #888;
text-decoration: none;
}

body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: url(food.jpg); /* Insert your wallpaper URL here */
background-size: cover;
background-position: center;

/* Button styles */
.login__button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

.login__button:hover {
background-color: #0056b3;
}

/* Register link styles */

.login__register {
text-align: center;
}

.login__register a {
color: #007bff;
text-decoration: none;
}

</style>
<body>
<div class="login">

<form action="/login" class="login__form" method="post">

<h1 class="login__title">Login</h1>

<div class="login__inputs">
<div class="login__box">
<input type="email" placeholder="Email ID" name="email" required
class="login__input">
<i class="ri-mail-fill"></i>
</div>

<div class="login__box">
<input type="password" placeholder="Password" name="password"
required class="login__input">
<i class="ri-lock-2-fill"></i>
</div>
</div>

<div class="login__check">
<div class="login__check-box">
<input type="checkbox" class="login__check-input" id="user-
check">
<label for="user-check" class="login__check-label">Remember
me</label>
</div>

<a href="#" class="login__forgot">Forgot Password?</a>

</div>
 <button type="submit" class="login__button">Login</button>

<div class="login__register">
Don't have an account? <a href="sign.html">Register</a>
</div>
</form>
</div>
</body>
</html>

4. Sign.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--=============== REMIXICONS ===============-->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css"
crossorigin="">

<!--=============== CSS ===============-->

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

<title>Login form</title>
</head>
<style>

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.login__bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(food\ img.webp);
background-size: cover;
background-position: center;
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login__form {
width: 320px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.login__title {
text-align: center;
margin-bottom: 30px;
font-size: 24px;
color: #333;
}

.login__input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

.login__check {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}

.login__check-label {
color: #555;
}

.login__forgot {
color: #007bff;
text-decoration: none;
}
.login__button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.login__button:hover {
background-color: #0056b3;
}

.login__register {
text-align: center;
color: #555;
}

.login__register a {
color: #007bff;
text-decoration: none;
}
.login__register a:hover {
text-decoration: underline;
}

</style>
<body>
<div class="login">

<div class="login__bg"></div>

<form action="/register" class="login__form" method="post">

<h1 class="login__title">signup</h1>

<div class="login__inputs">
<div class="login__box">
<input type="text" placeholder="Enter Name" name="username"
class="login__input">
<i class="ri-mail-fill"></i>
</div>
<div class="login__box">
<input type="email" placeholder="Email ID" name="email"
required class="login__input">
 <i class="ri-mail-fill"></i>
</div>
<div class="login__box">
<input type="password" placeholder="Password" name="password"
required class="login__input">
<i class="ri-mail-fill"></i>
</div>

<div class="login__box">
<input type="password" placeholder="Confirm Password"
name="confirm_password" required class="login__input">
<i class="ri-lock-2-fill"></i>
</div>
</div>
<div class="login__check">
<div class="login__check-box">
<input type="checkbox" class="login__check-input" id="user-
check">
<label for="user-check" class="login__check-label">Remember
me</label>
</div>

<a href="#" class="login__forgot">Forgot Password?</a>

</div>

<button type="submit" class="login__button">Login</button>

<div class="login__register">
Already have an account? <a href="login.html">Login</a>
</div>
</form>
</div>
</body>
</html>

5. DB.js

4 const mongoose = require("mongoose");

5
6 mongoose.connect("mongodb://localhost:27017/evm",{
7 useNewUrlParser: true,
8 useUnifiedTopology: true,
9 });
10
11 const db = mongoose.connection;
12 db.on("error",console.error.bind(console, "connection error:"));
13 db.once("open", function(){
14 console.log("Connected to Database");
15 });
 6. User.js

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema({

username: { type: String, required: true },
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
});

const User = mongoose.model("userDData", userSchema);

module.exports = User;

 Home Module
 Registration Page –
 Login Page -
 Mongodb –
Thank you