Minor Project 1 Report
Minor Project 1 Report
Minor Project 1 Report
(A Central University)
Srinagar Garhwal, Uttarakhand
School of Engineering and Technology
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.
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.
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
3
LIST OF ABBREVIATIONS
4
CHAPTER – 1
INTRODUCTION
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. 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.
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.
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:
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
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 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 asingle
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.
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
<!DOCTYPE html>
<html>
<head>
<title>Demo Web Page</title>
</head>
<body>
<h1>hello world</h1>
</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.
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.
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:
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
19
The idea of separation of concerns was lost
Example:
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
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
#unique
Color: red;
Class Selector
21
group
Color: red;
CSS Colors
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
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;
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>
<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>
</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>
<div class="item-container">
<div class="category-header" id="category-header">
</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
#category-name,.item-menu{
margin: 10px;
font-size: 35px;
color: coral;
font-family: 'Aclonica', sans-serif;
}
#item-card{
width: 180px;
height: 220px;
padding: 10px;
margin: 10px;
display: inline-block;
border-radius: 5px;
background: rgb(253, 221, 226);
cursor: pointer;
transition: 0.5s all step-end;
}
#item-card:hover img{
transform: scale(1.2);
}
#card-top{
display: flex;
margin: 5px 0;
justify-content: space-between;
}
#rating{
padding: 7px;
color: goldenrod;
background: black;
font-size: 14px;
border-radius: 15px;
}
.fa-heart-o{
padding: 6px;
border-radius: 50%;
background: white;
cursor: pointer;
}
.toggle-heart{
background: orangered;
color: white;
}
#item-card img{
width: 120px;
height: 120px;
border-radius: 50%;
margin: auto;
display: block;
31
margin-bottom: 15px;
transition: 0.5s all ease-in-out;
}
#item-name{
margin: 5px 0;
font-weight: 600;
color: darkslategray;
font-size: 18px;
}
#item-price{
margin: 0;
color: rgb(2, 27, 27);
font-weight: 500;
font-size: 18px;
}
.food-items{
display: none;
}
.cart-toggle{
display: none;
}
#cart-page{
background: white;
margin: 40px 10px;
margin-right: 50px;
padding: 20px 30px;
padding-bottom: 30px;
position: relative;
}
#cart-title{
font-size: 35px;
margin: 0;
color: indianred;
}
#cart-page table{
width: 100%;
margin-top: 20px;
text-align: center;
}
#cart-page table thead td{
font-size: 25px;
padding-bottom: 10px;
}
.cart-btn{
outline: none;
border: none;
32
background: crimson;
color: white;
padding: 10px 25px;
border-radius: 20px;
font-size: 18px;
text-transform: uppercase;
bottom: 30px;
margin: 15px 0;
cursor: pointer;
}
#cart-page table tbody td{
padding: 10px 0;
font-size: 20px;
}
#cart-page table tbody button{
outline: none;
border: none;
font-size: 16px;
background: none;
background: lightcoral;
color: white;
border-radius: 3px;
cursor: pointer;
margin: 0 5px;
}
#cart-page table tbody img{
width: 75px;
height: 75px;
border-radius: 50%;
}
#checkout{
text-align: center;
margin: 40px auto;
border-radius: 5px;
background: white;
padding: 10px 20px;
}
#checkout p{
margin: 15px 0;
float: left;
}
#total-price,#total-item{
font-size: 25px;
color: indianred;
}
#delievery{
font-size: 20px;
color: limegreen;
33
}
#cart{
background: whitesmoke;
padding-right: 30px;
overflow-y: scroll;
}
.item-menu{
margin: 0;
font-size: 30px;
margin-top: 40px;
color: indianred;
background: whitesmoke;
}
.list-card{
display: flex;
align-items: center;
margin-top: 15px;
border-radius: 25px;
cursor: pointer;
transition: 0.3s all ease-in-out;
}
.list-card:hover{
background: rgb(255, 216, 222);
}
.list-card:hover img{
transition: 0.5s all ease-in-out;
transform: scale(1.2);
}
.list-card img{
width: 50px;
height: 50px;
border-radius: 50%;
}
.list-name{
font-size: 20px;
margin: 0 10px;
text-decoration: none;
text-transform: capitalize;
color: rgb(94, 43, 43);
}
.taste-header{
padding-top: 40px;
padding-bottom: 10px;
position: sticky;
top: 0;
background: whitesmoke;
34
}
#mobile-view{
display: none;
}
#shop1{
margin-top: 10px;
}
#m-total-amount{
display: none;
}
@media screen and (max-width : 800px) and (-webkit-min-device-pixel-ratio: 2){
.container{
display: none;
}
#mobile-view{
display: grid;
grid-template-rows: 120px 1fr 50px;
height: 100%;
overflow: hidden;
width: 100vw;
}
.mobile-top{
padding: 5px 15px;
background: white;
z-index: 1;
}
.item-container{
overflow-y: scroll;
}
.logo-box,.top-menu{
display: flex;
justify-content: space-between;
align-items: center;
}
#logo{
width: 90px;
height: 70px;
}
.logo-box .your-address{
font-size: 18px;
width: 150px;
color: crimson;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
35
.top-menu{
color: indianred;
}
.top-menu i{
font-size: 20px;
cursor: pointer;
padding: 12px 5px ;
border-radius: 50%;
}
.m-cart-toggle{
color: white;
background: lightcoral;
}
.category-header{
display: flex;
width: 100vw;
overflow-x: scroll;
position: sticky;
top: 0;
background: white;
z-index: 1;
border-bottom: 1px solid rgb(219, 219, 219);
margin: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.toggle-category{
display: none;
position: relative;
}
.list-card{
margin: 0 10px;
text-align: center;
}
.list-card img{
width: 60px;
height: 60px;
border-radius: 50%;
}
.list-card:hover{
background: none;
}
.list-card:hover img{
transform: none;
transition: none;
}
36
.list-name{
margin: 5px 0;
color: coral;
width: max-content;
font-size: 16px;
}
#food-items{
padding: 5px 10px;
}
.mobile-footer{
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 15px;
background: white;
border-top: 1px solid rgb(219, 219, 219);
}
.mobile-footer{
color: indianred;
text-transform: uppercase;
font-size: 16px;
position: static;
}
#category-name{
font-size: 25px;
font-family: 'Aclonica', sans-serif;
}
#item-card{
width: 150px;
height: 200px;
}
#item-card img{
width: 100px;
height: 100px;
}
#item-name,#item-price{
font-size: 16px;
}
.list-card{
flex-direction: column;
}
#cart-page{
margin: 3px 0;
padding: 10px 5px;
padding-bottom: 30px;
border-top: 1px solid rgb(219, 219, 219);
}
37
#cart-page table thead td{
font-size: 20px;
}
#cart-page table tbody td{
font-size: 18px;
}
#cart-page table tbody img{
width: 60px;
height: 60px;
}
#cart-title{
font-size: 25px;
display: inline-block;
font-family: 'Aclonica', sans-serif;
}
#m-total-amount{
display: inline-block;
color: lightcoral;
padding: 5px 10px;
margin: 0;
border: 1px solid lightcoral;
float: right;
}
.cart-btn{
font-size: 14px;
background: lightcoral;
padding: 8px 15px;
margin: auto;
}
.btn-box{
text-align: center;
}
38
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',
39
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
},
{
40
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
},
{
id: 16,
name: 'Matar Paneer',
category : 'paneer',
41
rating : 4.3,
price: 15,
img: 'images/paneer/Matar-Paneer.jpg',
quantity: 1
},
{
id: 17,
name: 'Palak Paneer',
category : 'paneer',
rating : 4.3,
price: 10,
img: 'images/paneer/palak-paneer.jpg',
quantity: 1
},
{
id: 18,
name: 'Paneer Butter Masala',
category : 'paneer',
rating : 4.3,
price: 15,
img: 'images/paneer/paneer-butter-masala.jpg',
quantity: 1
},
{
id: 19,
name: 'Paneer Do Pyaza',
category : 'paneer',
rating : 4.3,
price: 12,
img: 'images/paneer/Paneer-Do-Pyaza.jpg',
quantity: 1
},
{
id: 20,
name: 'Hyderabadi Paneer',
category : 'paneer',
rating : 4.3,
price: 8,
img: 'images/paneer/Paneer-Hyderabadi.jpg',
quantity: 1
},
{
id: 21,
name: 'Paneer Lababdar',
category : 'shop3',
42
rating : 4.3,
price: 7,
img: 'images/paneer/paneer-lababdar.jpg',
quantity: 1
},
{
id: 22,
name: 'Shahi Paneer',
age: '32',
category : 'paneer',
rating : 4.3,
price: 5,
img: 'images/paneer/shahi-paneer.jpg',
quantity: 1
},
{
id: 23,
name: 'Navratan Korma',
category : 'vegetable',
rating : 4.3,
price: 8,
img: 'images/vegetable/navratan-korma_-vegetable.png',
quantity: 1
},
{
id: 24,
name: 'Veg Jalfrezi',
category : 'vegetable',
rating : 4.3,
price: 7,
img: 'images/vegetable/VEG-JALFREZI.jpg',
quantity: 1
},
{
id: 25,
name: 'Veg Biryani',
category : 'vegetable',
rating : 4.3,
price: 5,
img: 'images/vegetable/vegetable-biryani.jpg',
quantity: 1
},
{
id: 26,
name: 'Veg Curry',
category : 'vegetable',
rating : 4.3,
price: 7,
43
img: 'images/vegetable/vegetable-curry.jpeg',
quantity: 1
},
{
id: 27,
name: 'Veg Kolhapur',
category : 'vegetable',
rating : 4.3,
price: 10,
img: 'images/vegetable/vegetable-kolhapuri.jpg',
quantity: 1
},
{
id: 28,
name: 'Veg Masala',
category : 'vegetable',
rating : 4.3,
price: 4,
img: 'images/vegetable/vegetable-masala.jpg',
quantity: 1
},
{
id: 29,
name: 'Veg Pakora',
category : 'shop4',
rating : 4.3,
price: 4,
img: 'images/vegetable/vegetable-pakora.jpg',
quantity: 1
},
{
id: 30,
name: 'Momos',
category : 'chinese',
rating : 4.3,
price: 8,
img: 'images/chinese/cabbage-momos-.jpg',
quantity: 1
},
{
id: 31,
name: 'Chicken Manchurian',
category : 'chinese',
rating : 4.3,
price: 7,
img: 'images/chinese/ChickenManchurian.jpg',
quantity: 1
},
44
{
id: 32,
name: 'Chili Chicken',
category : 'chinese',
rating : 4.3,
price: 5,
img: 'images/chinese/Chili-Chicken.jpg',
quantity: 1
},
{
id: 33,
name: 'Chowmein',
category : 'chinese',
rating : 4.3,
price: 16,
img: 'images/chinese/chowmin.jpg',
quantity: 1
},
{
id: 34,
name: 'Spring Roll',
category : 'chinese',
rating : 4.3,
price: 14,
img: 'images/chinese/spring-rolls.jpg',
quantity: 1
},
{
id: 35,
name: 'Szechuan Chicken',
category : 'chinese',
rating : 4.3,
price: 10,
img: 'images/chinese/szechuan-chicken.jpg',
quantity: 1
},
{
id: 36,
name: 'Fried Rice',
category : 'shop5',
rating : 4.3,
price: 8,
img: 'images/chinese/veg-fried-rice.jpg',
quantity: 1
},
{
id: 37,
name: 'Butter Masala Dosa',
45
category : 'shop6',
rating : 4.3,
price: 18,
img: 'images/south indian/Butter-Masala-Dosa.png',
quantity: 1
},
{
id: 38,
name: 'Idli',
category : 'south indian',
rating : 4.3,
price: 20,
img: 'images/south indian/idli-with-rice-flour.jpg',
quantity: 1
},
{
id: 39,
name: 'Masala Dosa',
category : 'south indian',
rating : 4.3,
price: 12,
img: 'images/south indian/masala-dosa.jpg',
quantity: 1
},
{
id: 40,
name: 'Mysore Bonda',
category : 'south indian',
rating : 4.3,
price: 10,
img: 'images/south indian/mysore-bonda.jpg',
quantity: 1
},
{
id: 41,
name: 'Onion Uttapam',
category : 'south indian',
rating : 4.3,
price: 15,
img: 'images/south indian/onion-uttapam.jpg',
quantity: 1
},
{
id: 42,
name: 'Plain Dosa',
category : 'south indian',
rating : 4.3,
price: 40,
46
img: 'images/south indian/plain-dosa.jpeg',
quantity: 1
},
{
id: 43,
name: 'Rava Uttapam',
category : 'south indian',
rating : 4.3,
price: 25,
img: 'images/south indian/Rava-Uttapam.jpg',
quantity: 1
},
{
id: 44,
name: 'Sambhar Vada',
category : 'south indian',
rating : 4.3,
price: 34,
img: 'images/south indian/sambhar-vada.jpg',
quantity: 1
},
]
export {foodI
47
4.Index.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');
cardTop.appendChild(star);
cardTop.appendChild(heart);
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')
cardTop.appendChild(star);
cardTop.appendChild(heart);
itemCard.appendChild(cardTop);
itemCard.appendChild(img);
49
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);
chicken.appendChild(itemCard)
})
PaneerData.map(item=>{
var itemCard= document.createElement('div');
itemCard.setAttribute('id','item-card')
cardTop.appendChild(star);
cardTop.appendChild(heart);
itemCard.appendChild(cardTop);
itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);
paneer.appendChild(itemCard)
})
vegetableData.map(item=>{
50
var itemCard= document.createElement('div');
itemCard.setAttribute('id','item-card')
cardTop.appendChild(star);
cardTop.appendChild(heart);
itemCard.appendChild(cardTop);
itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);
vegetable.appendChild(itemCard)
})
chineseData.map(item=>{
var itemCard= document.createElement('div');
itemCard.setAttribute('id','item-card')
cardTop.appendChild(star);
cardTop.appendChild(heart);
itemCard.appendChild(cardTop);
itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);
chinese.appendChild(itemCard)
})
southData.map(item=>{
var itemCard= document.createElement('div');
itemCard.setAttribute('id','item-card')
itemCard.appendChild(cardTop);
itemCard.appendChild(img);
itemCard.appendChild(itemName);
itemCard.appendChild(itemPrice);
southIndian.appendChild(itemCard)
})
}
displayItems();
function selectTaste(){
var categoryList= document.getElementById('category-list');
vegData.map(item=>{
console.log(item)
var listCard= document.createElement('div');
listCard.setAttribute('class','list-card');
listCard.appendChild(listImg);
53
listCard.appendChild(listName);
document.querySelectorAll('.add-to-cart').forEach(item=>{
item.addEventListener('click',addToCart)
})
document.getElementById('cart-plus').innerText=
' ' + cartData.length + ' Items';
document.getElementById('m-cart-plus').innerText=
' ' + cartData.length;
totalAmount();
cartItems();
}
function cartItems(){
var tableBody= document.getElementById('table-body');
tableBody.innerHTML= '';
cartData.map(item=> {
var tableRow= document.createElement('tr');
rowData3.appendChild(btn1);
rowData3.appendChild(span);
rowData3.appendChild(btn2);
tableRow.appendChild(rowData1);
tableRow.appendChild(rowData2);
tableRow.appendChild(rowData3);
tableRow.appendChild(rowData4);
tableBody.appendChild(tableRow);
})
document.querySelectorAll('.increase-item').forEach(item=>{
item.addEventListener('click',incrementItem)
})
document.querySelectorAll('.decrease-item').forEach(item=>{
item.addEventListener('click',decrementItem)
})
}
function incrementItem(){
let itemToInc= this.parentNode.previousSibling.innerText;
console.log(itemToInc)
var incObj= cartData.find(element=>element.name==itemToInc);
incObj.quantity+=1;
var currPrice= 0;
function decrementItem(){
let itemToInc= this.parentNode.previousSibling.innerText;
let decObj= cartData.find(element=>element.name==itemToInc);
let ind= cartData.indexOf(decObj);
if(decObj.quantity >1){
currPrice= (decObj.price*decObj.quantity - decObj.price*(decObj.quantity-
1))/(decObj.quantity);
decObj.quantity-= 1;
decObj.price= currPrice*decObj.quantity;
}
else{
document.getElementById(decObj.id).classList.remove('toggle-heart')
cartData.splice(ind,1);
document.getElementById('cart-plus').innerText= ' ' + cartData.length + ' Items';
document.getElementById('m-cart-plus').innerText= ' ' + cartData.length;
if(cartData.length < 1 && flag){
document.getElementById('food-items').classList.toggle('food-items');
document.getElementById('category-list').classList.toggle('food-items');
document.getElementById('m-cart-plus').classList.toggle('m-cart-toggle')
document.getElementById('cart-page').classList.toggle('cart-toggle');
document.getElementById('category-header').classList.toggle('toggle-category');
document.getElementById('checkout').classList.toggle('cart-toggle');
flag= false;
alert("Currently no item in cart!");
console.log(flag)
}
}
totalAmount()
cartItems()
}
function totalAmount(){
var sum=0;
cartData.map(item=>{
sum+= item.price;
})
document.getElementById('total-item').innerText= 'Total Item : ' + cartData.length;
document.getElementById('total-price').innerText= 'Total Price : ₹ ' + sum;
document.getElementById('m-total-amount').innerText= 'Total Price : ₹ ' + sum;
}
document.getElementById('cart-plus').addEventListener('click',cartToggle);
document.getElementById('m-cart-plus').addEventListener('click',cartToggle);
56
var flag= false;
function cartToggle(){
if(cartData.length > 0){
document.getElementById('food-items').classList.toggle('food-items');
document.getElementById('category-list').classList.toggle('food-items');
document.getElementById('category-header').classList.toggle('toggle-category');
document.getElementById('m-cart-plus').classList.toggle('m-cart-toggle')
document.getElementById('cart-page').classList.toggle('cart-toggle');
document.getElementById('checkout').classList.toggle('cart-toggle');
flag= true;
console.log(flag)
}
else{
alert("Currently no item in cart!");
}
}
function addEvents(){
document.querySelectorAll('.add-to-cart').forEach(item=>{
item.addEventListener('click',addToCart)
});
57
document.querySelectorAll('.increase-item').forEach(item=>{
item.addEventListener('click',incrementItem)
})
document.querySelectorAll('.decrease-item').forEach(item=>{
item.addEventListener('click',decrementItem)
})
}
document.getElementById('add-address').addEventListener('click',addAddress);
document.getElementById('m-add-address').addEventListener('click',addAddress);
function addAddress(){
var address= prompt('Enter your address','');
if(address){
document.getElementById('add-address').innerText= ' ' + address;
}
else{
alert("Address not added")
}
}
58
CHAPTER -6
OUTPUT SCREENSHOT
59
REFERENCES
1. Introduction – Webocreation
https://webocreation.com/blog/introduction-of-final-year-project-on-ecommerce-or-eshopping/
60