HEMWATI NANDAN BAHUGUNA GARHWAL UNIVERSITY

(A Central University)
Srinagar Garhwal, Uttarakhand
School of Engineering and Technology

Session (2022 - 2023)

A PROJECT REPORT ON
“The Sabziwala E-Commerce Website”
Submitted in Partial fulfillment for the award of the degree of
Bachelor of Technology
in Computer Science and Engineering
HNBGU, Srinagar Garhwal (Uttarakhand)

Guided By:- Submitted By:-

Mr. Rohan Verma Satyam Chauhan- 19134501031
Assistant Professor Akash Pal- 19134501010
Dept. of Computer Science And Engineering Mohd Uvesh Umar-19134501044
B.Tech CSE (7th Sem)

i
 DECLARATION

We, Satyam Chauhan, Akash Pal and Mohd Uvesh Umar bearing the roll no 19134501031,
19134501010 and 19134501044 respectively , students of Computer Science and Engineering
Department at Hemvati Nandan Bahuguna Garhwal University (A Central University), Srinagar
(Garhwal), Uttarakhand, submit this project report entitled “The Sabziwala E-Commerce Website”
to Computer Science and Engineering Department, Hemvati Nandan Bahuguna Garhwal University,
for the award of the Bachelors of Technology degree in Computer Science & Engineering and
declaring that the work done is genuine and produced under the guidance of Mr. Rohan Verma
Department of Computer Science and Engineering, Hemvati Nandan Bahuguna Garhwal University.
We further declare that the reported work in this project has not been submitted and will not be
submitted, either in part or in full, for the award of any other degree in this institute or any other institute
or university.

DATE: 13/02/2023 Satyam Chauhan

PLACE: Srinagar Roll no - 19134501031

Akash Pal
Roll no-19134501010
Mohd Uvesh Umar
Roll no-19134501044

ii
 CERTIFICATE

This is to certify that, this project report titled “The Sabziwala E-Commerce Website” submitted by
Satyam Cahuhan , Akash Pal and Mohd Uvesh Umar bearing roll no 19134501031 , 19134501010
and 19134501044 respectively is bonafide record ofthe work carried out by them in partial fulfilment

for the requirement of the award of Bachelor of Technology in Computer Science and Engineering
degree from Hemvati Nandan Bahuguna Garhwal University (A Central University) at Srinagar

(Garhwal), Uttarakhand.

Mr. Rohan Verma

Department of Computer Science & Engineering

Hemvati Nandan Bahuguna Garhwal University (A Central University)

Srinagar (Garhwal), Uttarakhand

iii
 ACKNOWLEDGEMENT

We would like to express our deepest gratitude to all people for sprinkling their help and kindness in
the completion of this Project. We would like to start this moment by invoking our purest gratitude to
Mr. Rohan Verma Department of Computer Science and Engineering, Hemvati Nandan Bahuguna
Garhwal University (A Central University), Srinagar (Garhwal), Uttarakhand, our project instructor.

The completion of this project could not have been possible without his expertise and invaluable
guidance in every phase at Hemvati Nandan Bahuguna Garhwal University (A Central University),
Srinagar (Garhwal), Uttarakhand for helping us.

We would like to thank Prof. M.M.S Rauthan, Prof. Y.P Raiwani, all the lab assistants and other
staffs of Computer Science and Engineering Department, Hemvati Nandan Bahuguna Garhwal
University (A Central University), Srinagar (Garhwal), Uttarakhand, for their kind support. Last but
not least, We would like to thank our parents and our friends for their unwavering belief despite ups
and downs in our journey.

iv

1
 ABSTRACT

An E-commerce website acts as an online medium of operation for a business. It is hosted on a web
server and can be accessed through internet from any computer system around the world.
It allows a business to present a huge catalogue of products and also provides global reach of customers.
It provides high scalability to a business for its optimum exponential growth. It has to face its own
challenges like it has to deal with customer’s cyber data security and has to compete in an
overcompetitive space.
It uses E-payment methods for transactions and uses different frontend technologies for its operation.

2
 CONTENTS

CANDIDATE’S DECLARATION… ............................................................................. ii

CERTIFICATE .............................................................................................................. iii
ACKNOWLEDGEMENT ............................................................................................. iv
ABSTRACT ................................................................................................................... v
1. CHAPTER 1: INTRODUCTION…........................................................................... 5-6
2. CHAPTER 2: METHODOLOGY…..........................................................................7-8
3. CHAPTER 3: S/W H/W REQUIREMENTS ............................................................. 9
4. CHAPTER 4: ABOUT THE TECHNOLOGY…...................................................... 10-23
5. CHAPTER 5: SOURCE CODE ................................................................................ 24-58
6. CHAPTER 6: OUTPUT SCREENSHOT…………………………………………….59-60
REFERENCES…………………………………………………………………………….60

3
 LIST OF ABBREVIATIONS

ABBRIEVIATED FORM EXPANDED FORM

HTML Hyper Text Markup Language

CSS Cascading Stylesheets

VS Code Visual Studio Code

4
 CHAPTER – 1
INTRODUCTION

1.1 Background of the Project

E-commerce is fast gaining ground as an accepted and used business paradigm. More and more business
houses are implementing web sites providing functionality for performing commercial transactions over the
web. It is reasonable to say that the process of shopping on the web is becoming commonplace.

The objective of this project is to develop a general-purpose e-commerce store where any product (such as
books, CDs, computers, mobile phones, electronic items, and home appliances) can be bought from the
comfort of home through the Internet. However, for implementation purposes, this paper will deal with an
online book store.

An online store is a virtual store on the Internet where customers can browse the catalog and select products
of interest. The selected items may be collected in a shopping cart. At checkout time, the itemsin the
shopping cart will be presented as an order. At that time, more information will be needed to complete the
transaction.

Usually, the customer will be asked to fill or select a billing address, a shipping address, a shippingoption,
and payment information such as credit card number. An e- mail notification is sent to the customer as soon
as the order is placed.

1.2 Objective of Project

The objectives for this project are:

1. Create a set of requirements for a Website CMS for small businesses based on research
2. Build and test a prototype of a Website CMS for small businesses based on the requirements
found
3. Knowing when an item was saved or not saved in the shopping cart.
4. Returning to different parts of the site after adding an item to the shopping cart.
5. Easy scanning and selecting items in a list.
6. Effective categorical organization of products.
7. Simple navigation from home page to information and order links for specific products.
8. Obvious shopping links or buttons.

5
 9. Minimal and effective security notifications or messages.
1. Consistent layout of product information.

1.3 Limitations of the Project:

There are some limitations for the current system to which solutions can be provided as a futuredevelopment:

1. The system is not configured for multi- users at this time. The concept of transaction can be
used to achieve this.
2. The Website is not accessible to everyone. It can be deployed on a web server so that
everybody who is connected to the Internet can use it.
3. Credit Card validation is not done. Third party proprietary software can be used for validation
check.
As for other future developments, the following can be done:

1. The Administrator of the web site can be given more functionality, like looking at a specific
customer’s profile, the books that have to be reordered, etc.
2. Multiple Shopping carts can be allowed.

1.4 Selection Method of Data Collection

There are two major approaches to gathering information in our final year project about the situation, person,
problems or phenomenon and software about e-shopping.

 Internal information
 External Information
This information was collected with the help of both primary and secondary resources.

1. a) Primary Data: They are collected by us on the concern topic, which are original. While
studying, we have come across with the sources such as
2. b) Secondary Data: They are collected by us on the basis of the study of internet websites,
interviews with friends, etc.

6
 CHAPTER-2

METHODOLOGY
Background

There has been a lot of media coverage on E-Commerce in recent years. However, the concept of E-
Commerce is still unclear to many people due to its newness. For business executives, it is even more
mysterious since there are no proven business models for generating profits. Conducting research in the E-
Commerce area reveals a few dominant trends:

 E-Commerce revenues will grow explosively.

 E-Commerce is crucial for business survival.
 E-Commerce decisions are complex.
 Consulting firms are experiencing rapid declines in key practice areas.

The implications for these trends are as follows:

 Organizations feel the need for expert advice.

 E-Commerce is the new business opportunity for consulting firms.
 Consulting firms need structured, proven, E-Commerce methodologies.
 These trends and implications are the driving forces for the project.

Project description

For consulting firms to effectively develop E-Commerce strategies for its clients, it must have a structured
methodology custom made for this type of project. As with any methodology, however,this E-Commerce
strategy methodology will require constant refinement to incorporate new experiences and to keep pace with
change.

Thus, this project aims to develop the first version of an E-Commerce strategy methodology,
implement the methodology for a client, and make any necessary revisions to the methodology
subsequent to the client project.

Design methodology

The five phases of the project are as follows:

Scoping and planning

This phase focuses on the planning of the project’s overall direction, including the definition of theproject’s
scope, objectives, and timelines. The deliverable from this phase is this Design Plan.

Conceptual design and research

In this phase, the conceptual design of the methodology is developed and research on existing methodologies is
conducted. Research is performed from independent research firms, such as theGartner Group, Forrester
Research, and CIO.com. These research firms sometimes publish the

7
methodologies that consulting firms use. Consulting firms’ websites are another source forresearching E-
commerce strategy methodologies.

Development of methodology
The actual methodology is developed in this phase. Detailed descriptions of each task in the methodology are
documented, including the objectives, inputs, approach, relevant models, applicabletools and techniques,
outputs, and any references. The methodology is to be documented in an appropriate format, be it a Word
document or HTML pages.

Implementation of methodology
The methodology will be implemented with a client. This phase includes the marketing of E-
commerce strategy development services and the closing of the sale, followed by the actual
implementation.

Revision of methodology
Final touches and revisions to the methodology are made in this phase. The majority of these revisions come
from experiences on the client project. Sample reports and any additional referencesare added to the
methodology.

8
 CHAPTER-3
H\W AND S\W REQUIRMENTS

This website doesn’t have any specific hardware requirements. The page
is fully responsive across all devices.
The page only needs a web browser to run and works fine in latest versions of
popular web browsers like Google Chrome, Mozilla Firefox, Microsoft Edge,
Safari, Opera, etc.

9
 CHAPTER-4
ABOUT THE TECHNOLOGY

RESPONSIVE WEB DESIGNING

Defining Responsive Design

Responsive web design (RWD) is a web development approach that creates dynamic changes to the
appearance of a website, depending on the screen size and orientation of the device being used to view it.
RWD is one approach to the problem of designing for the multitude of devices available to customers,
ranging from tiny phones to huge desktop monitors.

RWD uses so-called breakpoints to determine how the layout of a site will appear: one design is usedabove a
breakpoint and another design is applied below that breakpoint. The breakpoints are commonly based on the
width of the browser.

The same HTML is served to all devices, using CSS (which determines the layout of webpage) to change the
appearance of the page. Rather than creating a separate site and corresponding codebasefor wide-screen
monitors, desktops, laptops, tablets and phones of all sizes, a single codebase can support users with
differently sized viewports.

In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop
design may reshuffle to two columns for a tablet and a single column for a smartphone. Responsive
design relies on proportion-based grids to rearrange content and design elements.

While responsive design emerged as a way to provide equal access to information regardless of device, it is
also possible to hide certain items — such as background images, , secondary content or supplementary
navigation — on smaller screens.
Decisions about hiding content and functionality or altering appearance for different device typesshould be
based on knowledge about your users and their needs.

10
RWD has potential advantages over developing separate sites for different device types. The use of a single
codebase can make development faster, compared to developing 3 or 4 distinct sites, and makes maintenance
easier over time, as one set of code and content needs to be updated rather than 3 or 4. RWD is also relatively
“future-proof” in that it can support new breakpoints needed at any time.If a 5-inch device or 15-inch device
takes off in the market, the code can support the new devices.
RWD doesn’t tie design to a particular device.

Because elements need to be able to resize and shuffle, it is often easier to implement a responsive design on a
site that is focused on content, rather than functionality. Complex data or interactions canbe hard to fit into
modular pieces that are easy to shuffle around a page, while preserving clarity and functionality.

Creating Usable Experiences

Because responsive design relies on shuffling elements around the page, design and development need to work
closely together to ensure a usable experience across devices. Responsive design often turns into solving a
puzzle — how to reorganize elements on larger pages to fit skinnier, longer pagesor vice versa. However,
ensuring that elements fit within a page is not enough. For a responsive design to be successful, the design
must also be usable at all screen resolutions and sizes.

When elements move around the page, the user experience can be completely different from one view of the
site to the next. It is important that design and development teams work together not to just determine how
the content should be shuffled around, but to also see what the end result of thatshift looks like and how it
affects the user experience.

Many teams look to popular responsive-design frameworks, such as Bootstrap to help create designs.Such
frameworks can be a great help in moving development along. However, carefully consider how the
framework will work with the content and functionality of your site, rather than how it works in general.

We always recommend conducting usability testing on designs. For responsive designs, we recommend
testing across platforms. It’s tricky enough to design a website that is usable on a

11
desktop. It is even trickier to design a website that is usable in many rearrangements or configurations of its
elements, across various screen sizes and orientations. The same design elementthat may work swimmingly on
a desktop may work horribly on a smartphone, or vice versa.

Focusing on Content

Content prioritization is one key aspect to doing responsive design well. Much more content

is visible without scrolling on a large desktop monitor than on a small smartphone screen. If users don’t
instantly see what they want on a desktop monitor, they can easily glance around the page to discover it. On
a smartphone, users may have to scroll endlessly to discover the content of interest. Smart content
prioritization helps users find what they need more efficiently.

Considering Performance

Performance can also be an issue with responsive design. RWD delivers the same code to all devices,
regardless if the piece of code applies to that design or not. Changes to the design occur on the client-side,
meaning each device — the phone, tablet or computer — receives the full code for all devices and takes what
it needs.

A 4-inch smartphone receives the same code as a 24-inch desktop monitor. This can bog down performance
on a smartphone, which may be relying on a slower, spottier data connection. (This is why some sites turn to
adaptive design, where the server hosting the website detects the device that makes the request and delivers
different batches of HTML code based on that device.)

To truly assess the user experience of a responsive design, do not test your responsive designs only inthe
comfort of your own office, on your high-speed connection. Venture out into the wild with your smartphone—
between tall buildings in a city, in interior conference rooms or basements, in remote areas with spotty
connectivity, in known trouble spots for your own cell-phone’s network connection
— and see how your site performs in varied conditions. The goal of many responsive designs is togive
equivalent access to information regardless of device. A smartphone user does not have an equivalent
experience to a desktop user if download times are intolerable.

12
HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link
between the web pages. A markup language is used to define the text document within tag which
defines the structure of web pages. This language is used to annotate (make notes for the computer)
text so that a machine can understand it and manipulate text accordingly. Most markup languages
(e.g. HTML) are human-readable. Thelanguage uses tags to define what manipulation has to be done
on the text.

HTML is a markup language used by the browser to manipulate text, images, and other content, in
order to display it in the required format. HTML was created by Tim Berners-Leein 1991. The first-
ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in
1999.

Elements and Tags: HTML uses predefined tags and elements which tell the browser how to

13
properly display the content. Remember to include closing tags. If omitted, the browser applies
the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements)
upon which all web pages are created.
<DOCTYPE! html>: This is the document type declaration (not technically a tag). It declares
a document as being an HTML document. The doctype declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the
head aren’t visible on the front-end of a webpage. HTML elements used inside the
<head> element include:

 <style>

 <title>

 <base>

 <noscript>

 <script>

 <meta>

 <link>

<body>: the body tag is used to enclose all the visible content of a webpage. In other words,the body
content is what the browser will show on the front-end.

An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as a webpagein the
browser.

NOTE: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs). Basic text editors
are entirely sufficient for when you’re just getting started. As you progress, there are

14
many feature-rich text editors available which allow for greater function and flexibility.Here’s an

example of an HTML webpage:

<!DOCTYPE html>
<html>

<head>
<title>Demo Web Page</title>
</head>

<body>
<h1>hello world</h1>

<p>A computer science portal for geeks</p>

</body>
</html>

Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.

Why learn HTML?

 It is a simple markup language. Its implementation is easy.

15
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.

Advantages:
 HTML is used to build websites.
 It is supported by all browsers.

 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:
 HTML can only create static webpages. For dynamic webpages, other languages haveto be
used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.

16
CSS (CASCADING STYLE SHEET)

What is CSS

CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Webpages,
including colors, layout, and fonts, thus making our web pages presentable to the users.

CSS is designed to make style sheets for the web. It is independent of HTML and can be usedwith any
XML-based markup language. Now let’s try to break the acronym:

 Cascading: Falling of Styles

 Style: Adding designs/Styling our HTML tags
 Sheets: Writing our style in different documents

CSS History
 1994: First Proposed by Hakon Wium Lie on 10th October
 1996: CSS was published on 17th November with influencer Bert Bos
 Later he became co-author of CSS
 1996: CSS became official with CSS was published in December
 1997: Created CSS level 2 on 4th November
 1998: Published on 12th May

CSS Editors

Some of the popular editors that are best suited to wire CSS code are as following:

1. Atom
2. Visual Studio Code
3. Brackets
4. Espresso(For Mac OS User)

17
 5. Notepad++(Great for HTML & CSS)
6. Komodo Edit (Simple)
7. Sublime Text (Best Editor)

CSS Syntax

Selector {

Property 1 : value;
Property 2 : value;
Property 3 : value;
}

For example:
h1
{

Color: red;

Text-align: center;

#unique

color: green;

18
  Selector: selects the element you want to target
 Always remains the same whether we apply internal or external styling
 There are few basic selectors like tags, id’s, and classes
 All forms this key-value pair
 Keys: properties(attributes) like color, font-size, background, width, height,etc.
 Value: values associated with these properties

CSS Comment
 Comments don’t render on the browser
 Helps to understand our code better and makes it readable.
 Helps to debug our code
 Two ways to comment:
o Single line

/*<h6> This represents the most/ least important line of the doc. </h6>*/

CSS How-To
 There are 3 ways to write CSS in our HTML file.
o Inline CSS
o Internal CSS
o External CSS

 Priority order
o Inline > Internal > External

Inline CSS

 Before CSS this was the only way to apply styles

 Not an efficient way to write as it has a lot of redundancy
 Self-contained
 Uniquely applied on each element

19
  The idea of separation of concerns was lost
 Example:

<h3 style=” color:red”> Have a great day </h3>

<p style =” color: green”> I did this , I did that </p>

Internal CSS

 With the help of style tag, we can apply styles within the HTML file
 Redundancy is removed
 But the idea of separation of concerns still lost
 Uniquely applied on a single document

External CSS

 With the help of <link> tag in the head tag, we can apply styles
 Reference is added
 File saved with .css extension
 Redundancy is removed
 The idea of separation of concerns is maintained
 Uniquely applied to each document

CSS Selectors
 The selector is used to target elements and apply CSS
 Three simple selectors
o Element Selector
o Id Selector
o Class Selector

 Priority of Selectors

Id > Class>Element

20
 Element Selector

 Used to select HTML elements by its name

 How we do it

h1

Color: red;

We selected the heading tag and then changed the color property i.e text color to red. Nowwhatever is
written in this tag (content) will have the text color as red

ID Selector

 The id attribute is used to select HTML element

 Used to target specific or unique element
 How we do it

#unique

Color: red;

<h1 id=”unique”> Hi </p>

We selected the id and then changed the color property i.e text color to red. Now whatever iswritten in this
tag (content) will have the text color as red

Class Selector

 The class attribute is used to select HTML element

 Used to target a specific class of the element
 How we do it

21
group

Color: red;

<h1 class=”group”> Hi </p>

We selected the class and then changed the color property i.e text color to red. Now whatever iswritten in
this tag (content) will have the text color as red

CSS Colors

 There are different colouring schemes in CSS

 Three widely used techniques are as follows
o RGB
 This starts with RGB and takes 3 parameter
 3 parameter basically corresponds to red, green and blue
 The value of each parameter may vary from 0 to 255.
o HEX  Eg: RGB(255,0,0); means color red

 Hex code starts with # and comprises of 6 numbers whichare further

divided into 3 sets
 Sets basically correspond to Red, Green, and Blue
 Single set value can vary from 00 to 09 and AA to FF
 Eg: #ff0000 ; means color red.
o RGBA
 This starts with RGB and takes 4 parameter
 4 parameter basically corresponds to red, green, blue andalpha
 Value of the first three parameters may vary from 0 to 255and
the last parameter ranges from 0 to 1 that is from 0.1,
0.2,…..0.9
 Eg: RGB(255,0,0,0); means color red.

22
CSS Background

 There are different ways by which CSS can have an effect on HTMLelements
 Few of them are as follows:
o Color – used to set the color of the background
o Repeat – used to determine if the image has to repeat or not and if itis repeating
then how it should do that
o Image – used to set an image as the background
o Position – used to determine the position of the image
o Attachment – It basically helps in controlling the mechanism ofscrolling.
CSS Border

 Helps in setting up the border for HTML elements

 There are 4 properties that can help in setting up of border:
o Width – sets the width of the border
o Style – sets the style of border; Eg: solid, dashed etc.
o Color – sets the color of the border
o Radius – determines the roundness of the border

 You can set the border for specifically top, right, bottom and left
 We can also club top and bottom together and same goes for left and right
o Eg: border-width: 2px 5px; sets top and bottom 2px; left and right5px
 Border can also be set in a single line
o Eg: border : 2px solid blue;

CSS Box Model

 Every element in CSS can be represented using the BOX model

 It allows us to add a border and define space between the content
 It helps the developer to develop and manipulate the elements.
 It consists of 4 edges
o Content edge – It comprises of the actual content
o Padding edge – It lies in between content and border edge
o Border edge – Padding is followed by the border edge
o Margin edge – It is an outside border and controls the margin of theelement
When you go in chrome and right-click, go on inspect. It will give all the elements that are usedin the
HTML file. In the right-hand side, there will be a box model like:

23
 CHAPTER -5

SOURCE CODE

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-
fit=cover">
<title>The sabziwala </title>
<link rel="stylesheet" href="/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<!-- desktop view -->

<div class="container" id="container">
<div id="menu">
<div class="title">
<img src="/images/foodie hunter.png" alt="this is logo">
</div>
<div class="menu-item">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Your Orders</a>
<a href="#">Wishlists</a>
<a href="#">Cart</a>
<a href="#">Contact</a>
<a href="#">Checkout</a>
</div>
</div>

<div id="food-container">
<div id="header">
<div class="add-box">
<i class="fa fa-map-marker your-address" id="add-address"> Your
Address</i>

24
 </div>
<div class="util">
<i class="fa fa-search"> Search</i>
<i class="fa fa-tags"> Offers</i>
<i class="fa fa-cart-plus" id="cart-plus"> 0 Items</i>
</div>
</div>
<div id="food-items" class="d-food-items">
<div id="shop1" class="d-shop1">
<p id="category-name">Shop1</p>
</div>

<div id="shop2" class="d-shop2">

<p id="category-name">Shop2</p>
</div>

<div id="shop3" class="d-shop3">

<p id="category-name">Shop3</p>
</div>

<div id="shop4" class="d-shop4">

<p id="category-name">Shop 4</p>
</div>

<div id="shop5" class="d-shop5">

<p id="category-name">Shop5</p>
</div>

<div id="shop6" class="d-shop6">

<p id="category-name">Shop6</p>
</div>
</div>

<div id="cart-page" class="cart-toggle">

<p id="cart-title">Cart Items</p>
<p id="m-total-amount">Total Amout : 100</p>
<table>
<thead>
<td>Item</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
</thead>
<tbody id="table-body">

</tbody>
</table>
<div class="btn-box">
25
 <button class="cart-btn">Checkout</button>
</div>
</div>
</div>

<div id="cart">
<div class="taste-header">
<div class="user">
<i class="fa fa-user-circle" id="circle"> Account</i>

</div>
</div>
<div id="category-list">
<p class="item-menu">Go For Hunt</p>
<div class="border"></div>
</div>
<div id="checkout" class="cart-toggle">
<p id="total-item">Total Item : 5</p>
<p id="total-price"></p>
<p id="delievery">Free delievery on ₹299</p>
<button class="cart-btn">Checkout</button>
</div>
</div>
</div>

<!-- mobile view -->

<div id="mobile-view" class="mobile-view">
<div class="mobile-top">
<div class="logo-box">
<img src="/images/foodielogo.png" alt="" id="logo">
<i class="fa fa-map-marker your-address" id="m-add-address"> Your
Address</i>
</div>
<div class="top-menu">
<i class="fa fa-search"></i>
<i class="fa fa-tag"></i>
<i class="fa fa-heart-o"></i>
<i class="fa fa-cart-plus" id="m-cart-plus"> 0</i>
</div>
</div>

<div class="item-container">
<div class="category-header" id="category-header">
</div>

<div id="food-items" class="food-items">

<div id="shop1" class="m-shop1">
26
 <p id="category-name">Shop1</p>
</div>
<div id="shop2" class="m-shop2">
<p id="category-name">Shop2</p>
</div>
<div id="shop3" class="m-shop3">
<p id="category-name">Shop3</p>
</div>
<div id="shop4" class="m-shop4">
<p id="category-name">Shop4</p>
</div>
<div id="shop5" class="m-shop5">
<p id="category-name">Shop5</p>
</div>
<div id="shop6" class="m-shop6">
<p id="category-name">Shop6</p>
</div>
</div>
</div>

<div class="mobile-footer">
<p>Home</p>
<p>Cart</p>
<p>offers</p>
<p>orders</p>
</div>
</div>
<script src="/index.js" type="module"></script>
</body>
</html>

27
 2.Style.css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Aclonica&display=swap');

html{
height: 100%;
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
height: 100%;
}
.container{
display: grid;
grid-template-columns: 250px 1fr 300px;
min-height: 100vh;
min-height: -webkit-fill-available;
overflow: hidden;
}
#menu{
background: whitesmoke;
}
.title{
padding: 0 30px;
}
#menu img{
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: -20px;
}
.title p{
font-size: 40px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: indianred;
margin: 0;
}
.border{
width: 80px;
height: 4px;
margin: 3px 0;
margin-bottom: 30px;
border-radius: 2px;
28
 background: coral;
}

.menu-item a{
display: block;
text-decoration: none;
font-size: 20px;
padding: 8px 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 12px 0;
color: rgb(128, 129, 129);
font-weight: 300;

}
.menu-item a:hover{
background: rgb(250, 212, 218);
}
#food-items{
background: whitesmoke;
overflow: auto;
height: calc(100vh - 86px);
}
#header{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
padding-bottom: 10px;
position: sticky;
top: 0;
background: whitesmoke;
z-index: 1;
}
::-webkit-scrollbar{
display: none;
}
#header .address{
font-size: 20px;

}
#map{
font-size: 25px;
color: red;
}
.your-address{
border: 1px solid indianred;
color: indianred;
padding: 5px 10px;
29
 border-radius: 5px;
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.add-box i{
font-size: 20px;
}

#header select{
width: 150px;
overflow: hidden;
border: none;
outline: none;
background: none;
color: rosybrown;
padding: 0 5px;
}
.food-items{
display: none;
}
.cart-toggle{
display: block;
}
.util i,.user i{
font-size: 18px;
margin: 0 16px;
border: 1px solid crimson;
padding: 8px 16px;
color: crimson;
border-radius: 20px;
cursor: pointer;
}
.util i:active{
color: white;
background: crimson;
}
#shop1,#shop2,#shop3,#shop4,#shop5,#shop6{
margin-top: 40px;
}
#shop3 #item-card,#shop5 #item-card{
background: rgb(218, 253, 188);
}
#shop5 #item-card,#shop6 #item-card{
background: rgb(221, 243, 243);
}
30
 3.fooditem.js
const foodItem= [
{
id: 1,
name: 'couliflower',
category : 'shop1',
rating : 4.3,
price: 13,
img: 'images/biryani/Ambur-Chicken-Biryani.jpg',
quantity: 1
},
{
id: 2,
name: 'Hyderabadi Biryani',
category : 'shop1',
rating : 4.3,
price: 15,
img: 'images/biryani/Chicken-Biryani-hyd.jpg',
quantity: 1
},
{
id: 3,
name: 'Egg Biryani',
category : 'shop1',
rating : 4.3,
price: 18,
img: 'images/biryani/egg-biryani.jpeg',
quantity: 1
},
{
id: 4,
name: 'Goan Fish Biryani',
category : 'shop1',
rating : 4.3,
price: 15,
img: 'images/biryani/goan-fish-biryani.jpg',
quantity: 1
},
{
id: 5,
name: 'Mutton Biryani',
category : 'shop1',
rating : 4.3,
price: 10,
img: 'images/biryani/hyd-Mutton-Biryani.jpg',

31
 quantity: 1
},
{
id: 6,
name: 'Kamrupi Biryani',
category : 'shop1',
rating : 4.3,
price: 12,
img: 'images/biryani/kamrupi-biryani.jpg',
quantity: 1
},
{
id: 7,
name: 'Kashmiri Biryani',
category : 'shop1',
rating : 4.3,
price: 13,
img: 'images/biryani/kashmiri.pulao.jpg',
quantity: 1
},
{
id: 8,
name: 'Memoni Biryani',
category : 'shop1',
rating : 4.3,
price: 20,
img: 'images/biryani/memonibiryani.png',
quantity: 1
},
{
id: 9,
name: 'Mughlai Biryani',
category : 'shop1',
rating : 4.3,
price: 15,
img: 'images/biryani/mughlai-biryani.jpg',
quantity: 1
},
{
id: 10,
name: 'Chicken Roast',
category : 'chicken',
rating : 4.3,
price: 11,
img: 'images/chicken/Chicken_roast.jpg',
quantity: 1
},
{
32
 id: 11,
name: 'Chicken Curry',
category : 'chicken',
rating : 4.3,
price: 10,
img: 'images/chicken/Chicken-Curry.jpg',
quantity: 1
},
{
id: 12,
name: 'Chicken Do Pyaza',
category : 'chicken',
rating : 4.3,
price: 14,
img: 'images/chicken/Chicken-do-Pyaza.jpg',
quantity: 1
},
{
id: 13,
name: 'Chicken Masala',
category : 'chicken',
rating : 4.3,
price: 12,
img: 'images/chicken/Chicken-Masala.jpeg',
quantity: 1
},
{
id: 14,
name: 'Handi Chicken',
category : 'shop2',
rating : 4.3,
price: 17,
img: 'images/chicken/Handi-chicken.jpg',
quantity: 1
},
{
id: 15,
name: 'Murgh Musallam',
category : 'chicken',
rating : 4.3,
price: 20,
img: 'images/chicken/Murgh-Musallam.jpg',
quantity: 1
},

33
4.Index.js

import {foodItem} from './fooditem.js'

function displayItems(){
var biryani= document.getElementById('shop1');
var paneer= document.getElementById('shop2');;
var chicken= document.getElementById('shop3');
var vegetable= document.getElementById('shop4');
var chinese= document.getElementById('shop5');
var southIndian= document.getElementById('shop6');

const biryaniData= foodItem.filter((item)=>item.category=='shop1');

const chickenData= foodItem.filter((item)=>item.category=='shop2');
const PaneerData= foodItem.filter((item)=>item.category=='shop3');
const vegetableData= foodItem.filter((item)=>item.category=='shop4');
const chineseData= foodItem.filter((item)=>item.category=='shop5');
const southData= foodItem.filter((item)=>item.category=='shop6');
biryaniData.map(item=>{

var itemCard= document.createElement('div');

itemCard.setAttribute('id','item-card')

var cardTop= document.createElement('div');

cardTop.setAttribute('id','card-top');

var star= document.createElement('i');

star.setAttribute('class','fa fa-star');
star.setAttribute('id','rating');
star.innerText= ' ' + item.rating;

var heart= document.createElement('i');

heart.setAttribute('class','fa fa-heart-o add-to-cart');
heart.setAttribute('id',item.id)

cardTop.appendChild(star);
cardTop.appendChild(heart);

var img= document.createElement('img');

img.src=item.img;

var itemName= document.createElement('p');

itemName.setAttribute('id','item-name');
34
 itemName.innerText= item.name;

var itemPrice= document.createElement('p');

itemPrice.setAttribute('id','item-price');
itemPrice.innerText= 'Price : ₹ ' + item.price;

itemCard.appendChild(cardTop);
itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);

biryani.appendChild(itemCard);

})

chickenData.map(item=>{
var itemCard= document.createElement('div');
itemCard.setAttribute('id','item-card')

var cardTop= document.createElement('div');

cardTop.setAttribute('id','card-top');

var star= document.createElement('i');

star.setAttribute('class','fa fa-star');
star.setAttribute('id','rating');
star.innerText= ' ' + item.rating;

var heart= document.createElement('i');

heart.setAttribute('class','fa fa-heart-o add-to-cart');
heart.setAttribute('id',item.id)

cardTop.appendChild(star);
cardTop.appendChild(heart);

var img= document.createElement('img');

img.src=item.img;

var itemName= document.createElement('p');

itemName.setAttribute('id','item-name');
itemName.innerText= item.name;

var itemPrice= document.createElement('p');

itemPrice.setAttribute('id','item-price');
itemPrice.innerText= 'Price : ₹ ' + item.price;

itemCard.appendChild(cardTop);
35
 itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);

chicken.appendChild(itemCard)

})

36
 CHAPTER -6

OUTPUT SCREENSHOT

37
REFERENCES
1. Introduction – Webocreation
https://webocreation.com/blog/introduction-of-final-year-project-on-ecommerce-or-eshopping/

2. Introduction to Responsive Web Designing – W3Schools

https://www.w3schools.com/html/html_responsive.asp

3. Introduction to HTML- W3Schools

https://www.w3schools.com/html/
4.Introduction to CSS – W3Schools
https://www.w3schools.com/w3css/defaulT.asp

38