0% found this document useful (0 votes)
19 views98 pages

manisha file

Report file

Uploaded by

CreWx Gamer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views98 pages

manisha file

Report file

Uploaded by

CreWx Gamer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 98

PROJECT REPORT

ON
E-COMMERCE WEBSITE
A Project submitted in partial fulfilment of the
requirements for the award of the degree
Of
BACHELOR OF TECHNOLOGY
In
COMPUTER SCIENCE & ENGINEERING
Submitted By: Manisha kamal (2021218214)
Submitted To: Mr. Sagar (Asst. Professor)
Asia Pacific Institute Of Information & Technology,
Panipat

Affiliated to
Kurukshetra University Kurukshetra, India
Batch (2021 – 2025)
CERTIFICATE

ii
DECLARATION

I, Manisha kamal hereby declare that the Project Report entitled,E-


commerce website submitted by me to the Kurukshetra University,
kurukshetra, in partial fulfilment of the requirement for the award of degree
of Bachelor of Technology under the guidance of Mr. Sagar (Assitant
Professor), is my original work and the conclusion drawn there in are based
on the material collected by myself.
The report submitted is my own work and not been duplicated from any other
source. I shall be responsible for any unpleasure moment / situation.

Place: Panipat Manisha kamal


Date: 3/12/ 2024

iii
ACKNOWLEDGEMENT

A successful Project Report is the result of team work and co-ordination that
includes not only the group of developers who put forth the ideas, logic and
efforts but also those who guide them, so at the completion of the Project
Report, I feel obliged to extent my gratitude towards all those who made
valuable contribution through my training period.
I am thankful for all the knowledge, guidance and support imparted by Dr.
Prateek Mishra (Director) to me who gave me valuable knowledge during
the IT period.
In addition, I wish to convey deep sense of gratitude towards Mr. Rajesh
Choudhary ( Head of CSE Department) at any time I needed.
At the end just as significantly, I would like to express my sincere thanks to,
Mr. Sagar (Assistant Professor) and all the other staff members who have
provided me excellent knowledge and support throughout my Graduation.
I am very much thankful to my parents, brother/sister and friends for their
continuous support.

Place: Panipat Manisha kamal


Date: 3/12/ 2024

iv
INDEX

Sr.
TITLE PAGE NO. SIGNATURE
No.

1. INTRODUCTION 1

OBJECTIVES OF THE
2. 2
PROJECT

TOOLS USED IN
3. 3
PROJECT

4. INTRODUCTION TO TOOLS 4

5. CODE OF PROJECT 5-85

6. SCREENSHOTS OF PROJECT 86-91

7. CONCLUSION 92

8. BIBLIOGRAPHY 93

v
INTRODUCTION

Welcome to Shoplane – Your One-Stop Destination for Fashion and


Accessories!

At Shoplane, we redefine your online shopping experience with a seamless


blend of style, convenience, and variety. Whether you're looking for the latest
fashion trends, timeless wardrobe essentials, or unique accessories to
complement your look, Shoplane has it all.

Our platform is designed with a customer-first approach, ensuring you have a


smooth and enjoyable shopping journey. From trendy clothing to versatile
accessories, we cater to every style preference and occasion. Shoplane offers
an extensive collection of high-quality products that meet the diverse needs of
our customers, whether you're revamping your wardrobe, hunting for the
perfect gift, or exploring the latest trends.

What Sets Shoplane Apart?

1. Wide Range of Products: Explore a curated selection of clothing for men,


women, and kids, along with a variety of stylish accessories like bags,
jewelry, and more.
2. Trendy and Timeless Designs: Our collection features both the latest
fashion trends and classic pieces that never go out of style, ensuring there's
something for everyone.
3. Affordable Luxury: Shoplane believes in making fashion accessible to
all. We combine style and affordability, offering premium-quality products
at competitive prices.
4. User-Friendly Experience: Our website is designed for effortless
navigation, making it easy for you to browse, filter, and find exactly what
you're looking for.
5. Secure and Convenient Shopping: Shoplane prioritizes your safety with
secure payment gateways and reliable delivery services, giving you peace
of mind as you shop.

Why Choose Shoplane?


Shopping on Shoplane is more than just a transaction; it's an experience. We
understand that fashion is a form of self-expression, and our mission is to help
you express yourself confidently and stylishly. Our collections are updated
regularly, keeping pace with the ever-changing world of fashion, so you can
stay ahead of the curve.

1
OBJECTIVES OF THE PROJECT

The objective of Shoplane is to create a seamless and enjoyable online


shopping experience by offering a diverse range of high-quality clothing and
accessories. We aim to cater to the evolving fashion needs of our customers by
providing:

1. Trendy and Timeless Collections – Delivering a curated selection of


stylish, affordable, and durable fashion items for all genders and age
groups.
2. Customer-Centric Approach – Ensuring a user-friendly platform, secure
payments, and prompt delivery services to enhance customer satisfaction.
3. Sustainability and Ethics – Promoting responsible sourcing and eco-
friendly practices to contribute to a sustainable future.
4. Accessibility and Affordability – Making fashionable clothing and
accessories accessible to everyone at competitive prices.

Shoplane strives to become a trusted, go-to shopping destination, empowering


customers to express their unique style with confidence and ease.

2
TOOLS USED IN PROJECT

1. Visual code
2. Java scripts
3. Html
4. Css

1. Visual Studio Code (VS Code)

A free, open-source code editor developed by Microsoft, designed for


writing and managing code across various programming languages. It
features syntax highlighting, debugging tools, and an extension
marketplace to enhance functionality.

2. JavaScript (JS)

A versatile programming language primarily used for creating


interactive and dynamic content on websites, such as animations, form
validation, and real-time updates. It runs on both the client-side (in
browsers) and the server-side (with Node.js).

3. HTML (HyperText Markup Language)

The foundational markup language for structuring and displaying


content on the web. It uses elements and tags like <div>, <h1>, and
<p> to organize text, images, and multimedia on web pages.

4. CSS (Cascading Style Sheets)

A style sheet language used to design the visual appearance of web


pages. It controls layout, colors, fonts, and responsive design to ensure
the website looks appealing and functions well across devices.

3
INTRODUCTION TO TOOLS

Introduction to tools used in Shoplance Development


The development of Shoplane, our e-commerce platform, has been achieved
using a combination of powerful tools and technologies that ensure seamless
performance, an intuitive user interface, and a visually appealing design.
Here's an overview of the tools and technologies utilized:

1.Visual Studio:

As the primary development environment, Visual Studio offers a


comprehensive suite of features for coding, debugging, and project
management. It ensures a streamlined development process with its robust
tools for writing clean and efficient code, making it the perfect choice for
building a scalable and functional website like Shoplane.

2. HTML (HyperText Markup Language):

HTML forms the backbone of the Shoplane website, providing the structure
and layout for every page. From product categories to user-friendly navigation
menus, HTML ensures that all content is organized and accessible.

3. CSS (Cascading Style Sheets):

CSS is used to style the Shoplane website, delivering a visually appealing and
responsive design. It ensures consistent aesthetics across all devices, from
desktop to mobile, enhancing the user experience with attractive layouts,
colors, and typography.

4. JavaScript (JS Scripts):

JavaScript brings interactivity and functionality to the Shoplane platform.


From dynamic content updates to form validation and user-friendly features
like interactive product galleries and smooth navigation, JavaScript enhances
the overall usability of the website.

These tools and technologies work cohesively to create a fast, secure, and
engaging e-commerce platform that provides customers with a seamless
shopping experience. With this robust tech stack, Shoplane combines
functionality with design excellence, ensuring customer satisfaction at every
step.

4
CODE OF PROJECT

HTML CODE
Index html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY
PRIYANKA SHARMA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>

5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(2).innerHTML = req.responseText;

6
}
</script>
<!-- CONTENT SECTION -->
<div id="3"></div>
<script>
load("content.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(3).innerHTML = req.responseText;
}
</script>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>

7
<!-- slider JS START -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()
{
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
});
});
</script>
<!-- slider JS ENDS -->
<!-- content JS -->
<script src="content.js"></script>
</html>

8
Header html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> HEADER | E-COMMERCE WEBSITE </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- EXTERNAL LINKS -->
<link rel="stylesheet" href="css/header.css">
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<section>
<!-- MAIN CONTAINER -->
<div id="container">
<!-- SHOP NAME -->
<div id="shopName"><a href="index.html"> <b>SHOP</b>LANE
</a></div>
<!-- COLLCETIONS ON WEBSITE -->
<div id="collection">

9
<div id="clothing"><a href="clothing.html"> CLOTHING </a></div>
<div id="accessories"><a href="accessories.html"> ACCESSORIES
</a></div>
</div>
<!-- SEARCH SECTION -->
<div id="search">
<i class="fas fa-search search"></i>
<input type="text" id="input" name="searchBox" placeholder="Search for
Clothing and Accessories">
</div>
<!-- USER SECTION (CART AND USER ICON) -->
<div id="user">
<a href="cart.html"> <i class="fas fa-shopping-cart addedToCart"><div
id="badge"> 0 </div></i></a>
<a href="#"> <i class="fas fa-user-circle userIcon"></i> </a>
</div>
</div>
</section>
</header>
</body>
</html>

10
Content 1 html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT | E-COMMERCE WEBSITE BY EDYODA </title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet"> <!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<div id="mainContainer">
<h1> clothing for men and women </h1>
<div id="containerClothing">
<!-- JS rendered code --> </div>
<h1> accessories for men and women </h1>
<div id="containerAccessories">
<!-- JS rendered code -->
</div> </div>
</body>
<script src="content.js"> </script>
</html>

11
Content 2 html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT | E-COMMERCE WEBSITE BY EDYODA </title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<div id="mainContainer">
<h1> clothing for men and women </h1>
<div id="containerClothing">
<!-- JS rendered code -->
</div>
</div>
</div>
</body>
<script src="content.js"></script>
</html>

12
Content 3 html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT | E-COMMERCE WEBSITE BY EDYODA </title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<link rel="stylesheet" href="css/content.css">
</head>
<body>
<div id="mainContainer">
<div id="containerClothing">
<!-- JS rendered code --> </div>
<h1> accessories for men and women </h1>
<div id="containerAccessories">
<!-- JS rendered code -->
</div> </div>
</body>
<script src="content.js"></script>
</html>

13
Content detail html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> CONTENT DETAILS | E-COMMERCE WEBSITE BY EDYODA
</title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- <link rel="stylesheet" href="/box1.css"> -->
<link rel="stylesheet" href="css/contetDetails.css">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)

14
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<div id="containerProduct">
<!-- JS rendered code -->
</div>
<script src="/contentDetails.js"></script>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>

</html>

15
Clothing html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY
PRIYANKA SHARMA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>

16
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(2).innerHTML = req.responseText;
}
</script>
<!-- CONTENT SECTION -->
<div id="3"></div>

17
<script>
load("content2.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(3).innerHTML = req.responseText;
}
</script>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>
<!-- slider JS START -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()

18
{
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
});
});
</script>
<!-- slider JS ENDS -->
<!-- content JS -->
<script src="content.js"></script>
</html>

19
Accessories html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="/style.css"> -->
<title> E-COMMERCE WEBSITE BY EDYODA | CREATED BY
MANISHA KAMAL & HARSHITA </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- header links -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<!-- slider links -->
<!-- <script src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> -->
<script src="js/jQuery3.4.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
</head>

20
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- SLIDER -->
<div id="2"></div>
<script>
load("slider.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(2).innerHTML = req.responseText;
}
</script>
<!-- CONTENT SECTION -->
<div id="3"></div>

21
<script>
load("content3.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(3).innerHTML = req.responseText;
}
</script>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>
<!-- slider JS START -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()

22
{
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
});
});
</script>
<!-- slider JS ENDS -->
<!-- content JS -->
<script src="content.js"></script>
</html>

23
Footer html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> FOOTER | E-COMMERCE WEBSITE BY EDYODA </title>
<!-- EXTERNAL LINKS -->
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<footer>
<section>
<div id="containerFooter">
<div id="webFooter">
<h3> online store </h3>
<p> men clothing </p>
<p> women clothing </p>
<p> men accessories </p>
<p> women accessories </p>
</div>

24
<div id="webFooter">
<h3> helpful link </h3>
<p> home </p>
<p> about </p>
<p> contact </p>
</div>
<div id="webFooter">
<h3> partners </h3>
<p> zara </p>
<p> pantaloons </p>
<p> levis </p>
<p> ucb </p>
<p> + many more </p>
</div>
<div id="webFooter">
<h3> address </h3>
<p> building 101 </p>
<p> central avenue </p>
<p> la - 902722 </p>
<p> united states </p>
</div> </div>
<div id="credit"><a href="https://linkedin.com/in/MANISHA-KAMAL-
b79401142"> © MANISHA KAMAL & HARSHITA </a>
&nbsp&nbsp&nbsp | &nbsp&nbsp&nbsp <a href="https://www.edyoda.com/"
target="_blank"> EDYODA </a></div>
</section> </footer>
</body>
</html>

25
Cart html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> FOOTER | E-COMMERCE WEBSITE BY EDYODA </title>
<!-- EXTERNAL LINKS -->
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/footer.css">
</head>
<body>
<footer>
<section>
<div id="containerFooter">
<div id="webFooter">
<h3> online store </h3>
<p> men clothing </p>
<p> women clothing </p>
<p> men accessories </p>
<p> women accessories </p>
</div>

26
<div id="webFooter">
<h3> helpful link </h3>
<p> home </p>
<p> about </p>
<p> contact </p>
</div>
<div id="webFooter">
<h3> partners </h3>
<p> zara </p>
<p> pantaloons </p>
<p> levis </p>
<p> ucb </p>
<p> + many more </p>
</div>
<div id="webFooter">
<h3> address </h3>
<p> building 101 </p>
<p> central avenue </p>
<p> la - 902722 </p>
<p> united states </p>
</div> </div>
<div id="credit"><a href="https://linkedin.com/in/MANISHA-KAMAL-
b79401142"> © MANISHA KAMAL & HARSHITA </a>
&nbsp&nbsp&nbsp | &nbsp&nbsp&nbsp <a href="https://www.edyoda.com/"
target="_blank"> EDYODA </a></div>
</section> </footer>
</body>
</html>

27
Order placed html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> ORDER PLACED | E-COMMERCE WEBSITE BY EDYODA
</title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- fontawesome -->
<script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/orderPlaced.css">
</head>
<body>
<!-- HEADER -->
<div id="1"></div>
<script>
load("header.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);

28
req.send(null);
document.getElementById(1).innerHTML = req.responseText;
}
</script>
<!-- OREDER PLACED -->
<div id="orderContainer">
<div id="check"><i class="fas fa-check-circle"></i></div>
<div id="aboutCheck">
<h1> Order Placed Successfully! </h1>
<p> We've sent you an email with the Order details. </p>
</div>
</div>
<!-- FOOTER -->
<div id="4"></div>
<script>
load("footer.html");
function load(url)
{
req = new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
document.getElementById(4).innerHTML = req.responseText;
}
</script>
</body>
<script src="/orderPlaced.js"></script>
</html>

29
Slider html code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> SLIDER | E-COMMERCE WEBSITE </title>
<!-- favicon -->
<link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-
0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo"
type="image/gif" sizes="16x16">
<!-- EXTERNAL LINKS -->
<script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-
CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick-theme.min.css">
<style>
body
{
margin: 0;
}
#containerSlider
{
margin: auto;

30
width: 90%;
text-align: center;
padding-top: 100px;
box-sizing: border-box;
}
#containerSlider img
{
width: 100%;
height: 140%;
text-align: center;
align-content: center;
}
@media(max-width: 732px)
{
#containerSlider img
{
height: 12em;
}
}
@media(max-width: 500px)
{
#containerSlider img
{
height: 10em;
}}
</style>
</head>

31
<body>
<section>
<div id="containerSlider">
<div id="slidingImage"> <img src="img/img1.png" alt="image1"> </div>
<div id="slidingImage"> <img src="img/img2.png" alt="image2"> </div>
<div id="slidingImage"> <img src="img/img3.png" alt="image3"> </div>
<div id="slidingImage"> <img src="img/img4.png" alt="image4"> </div>
</div>
</section>
</body>
<!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js”></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-
carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function()
{
$('#containerSlider').slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
</html>

32
CSS CODES
Cart css code

body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
#cartMainContainer
{
padding: 90px 50px;
}
#cartContainer
{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
img
{
width: 80px;
float: left;
border-radius: 10px;
margin-right: 50px;
}
#boxContainer
{

33
display: grid;
grid-gap: 20px;
padding: 20px;
width: 100%;
/* float: left; */
}
#box
{
background-color: white;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
border-radius: 10px;
width: 100%;
/* margin: auto */
padding: 20px 10px;
}
#box:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
#totalContainer
{
width: 50%;
padding: 20px;
margin: auto;
background-color: white;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);

34
}
#totalContainer:hover
{
box-shadow: 0px 1px 3px 2px rgb(185, 185, 185);
}
button
{
padding: 8px 12px;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;
cursor: pointer;
}
button a
{
text-decoration: none;
color: white;
font-size: 15px;
}
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
}

35
/* ----------------------------- MEDIA QUERY --------------------------- */

@media(max-width: 800px)
{
img
{
width: 60px;
margin-right: 20px;
}
h3, h4
{
font-size: 14px;
}
h2
{
font-size: 18px;
}
#cartMainContainer
{
padding: 90px 20px;
}
}
@media(max-width: 555px)
{
#cartContainer
{

36
display: grid;
grid-template-columns: 1fr;
}
#boxContainer
{
padding: 20px;
width: 80%;
}
}

37
Content 1 css

body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
h1
{
width: 90%;
margin: auto;
padding: 50px 0;
letter-spacing: 2px;
font-weight: 700;
text-transform: capitalize;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(5, 1fr);
width: 90%;
margin: auto;
padding-bottom: 40px;
}
#box
{

38
width: 100%;
background-color: white;
align-content: center;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#box:hover
{
box-shadow: 1px 6px 3px 0 rgb(185, 185, 185);
}
#containerClothing img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#containerAccessories img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#details
{
padding: 0 15px;
text-transform: capitalize;
}

39
#box a
{
text-decoration: none;
color: rgb(29, 29, 29);
}
h3
{
font-size: 16px;
}
h4
{
font-weight: 100;
}
h2
{
color: rgb(3, 94, 94);
}
/* ----------------------------- MEDIA QUERY --------------------------- */
@media(max-width: 1070px)
{
h1
{
font-size: 25px;
}
#containerClothing, #containerAccessories
{
width: 95%;

40
grid-gap: 10px;
}
}
@media(max-width: 850px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(3, 1fr);
width: 80%;
}
}
@media(max-width: 650px)
{
h1
{
font-size: 20px;
}
h1
{
width: 90%;
}

41
#containerClothing, #containerAccessories
{
width: 90%;
}
}
@media(max-width: 600px)
{
h1
{
width: 70%;
}
#containerClothing, #containerAccessories
{
width: 70%;
}
}
@media(max-width: 505px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
width: 80%;
grid-template-columns: repeat(2, 1fr);
}}

42
Content 2 css code

body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
h1
{
width: 90%;
margin: auto;
padding: 50px 0;
letter-spacing: 2px;
font-weight: 700;
text-transform: capitalize;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(5, 1fr);
width: 90%;
margin: auto;
padding-bottom: 40px;
}
#box
{

43
width: 100%;
background-color: white;
align-content: center;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#box:hover
{
box-shadow: 1px 6px 3px 0 rgb(185, 185, 185);
}
#containerClothing img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#containerAccessories img
{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#details
{
padding: 0 15px;
text-transform: capitalize;
}

44
#box a
{
text-decoration: none;
color: rgb(29, 29, 29);
}
h3
{
font-size: 16px;
}
h4
{
font-weight: 100;
}
h2
{
color: rgb(3, 94, 94);
}

/* ----------------------------- MEDIA QUERY --------------------------- */

@media(max-width: 1070px)
{
h1
{
font-size: 25px;
}
#containerClothing, #containerAccessories

45
{
width: 95%;
grid-gap: 10px;
}
}
@media(max-width: 850px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
display: grid;
grid-gap: 70px 20px;
grid-template-columns: repeat(3, 1fr);
width: 80%;
}}
@media(max-width: 650px)
{
h1
{
font-size: 20px;
}
h1
{
width: 90%;

46
}
#containerClothing, #containerAccessories
{
width: 90%;
}}
@media(max-width: 600px)
{
h1
{
width: 70%;
}
#containerClothing, #containerAccessories
{
width: 70%;
}
}
@media(max-width: 505px)
{
h1
{
width: 80%;
}
#containerClothing, #containerAccessories
{
width: 80%;
grid-template-columns: repeat(2, 1fr);
}}

47
Content details css code

body
{
margin: 0;
text-transform: capitalize;
font-family: 'Lato', sans-serif;
font-weight: 100;
}

#containerProduct
{
padding-top: 80px;
}
#containerD
{
width: 90%;
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr;
padding: 80px 40px;
}
#imageSection
{
width: 80%;
margin: auto;
}

48
#imageSection img
{
width: 100%;
float: right;
border-radius: 10px;
box-shadow: 1px 2px 6px 2px rgb(219, 219, 219);
}
#imageSection img:hover
{
box-shadow: 1px 0px 9px 1px rgb(3, 122, 122);
}
#productDetails
{
width: 100%;
}
h1
{
font-size: 35px;
letter-spacing: 1px;
word-spacing: 2px;
}
h4
{
font-size: 15px;
font-weight: bold;
color: rgb(3, 122, 122);
letter-spacing: 1px;

49
word-spacing: 2px;
}
#productPreview
{
padding-bottom: 10px;
}
#productPreview > img
{
width: 50px;
padding: 10px 10px;
border-radius: 15px;
cursor: pointer;
}
p
{
font-size: 15px;
word-spacing: 2px;
letter-spacing: 1px;
line-height: 25px;
}
button
{
padding: 10px 15px;
color: white;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;

50
cursor: pointer;
font-size: 20px;
}
button a
{
text-decoration: none;
font-size: 18px;
}
button:hover
{
background-color: rgb(3, 94, 94);
}
button a:focus
{
outline: none;
}

/* ----------------------------- MEDIA QUERY --------------------------- */

@media(max-width: 1300px)
{
h1
{
font-size: 28px;
}
#productPreview > img
{

51
width: 40px;
padding: 10px 10px;
padding-bottom: 30px;
}
button
{
padding: 8px 13px;
background-color: rgb(3, 122, 122);
border: none;
border-radius: 5px;
cursor: pointer;
}
}

@media(max-width: 1170px)
{
h1
{
font-size: 22px;
}
#productPreview > img
{
width: 40px;
padding: 10px 10px;
padding-bottom: 30px;
}
button a

52
{
font-size: 15px;

}
h4, p
{
font-size: 13px;
}
h3
{
font-size: 15px;
}

@media(max-width: 900px)
{
/* #containerProduct */
#containerD
{
width: 60%;
margin: auto;
display: grid;
grid-template-columns: 1fr;
}
#imageSection
{

53
width: 100%;
text-align: center;
}
#imageSection img
{
text-align: center;
width: 70%;
float: none;
}
#productDetails
{
width: 100%;
}
#button
{
text-align: center;
}
}

@media(max-width: 650px)
{
#containerD
{
width: 80%;
}
}

54
Header css code

body
{
margin: 0;
}
#badge
{
position: absolute;
background-color: rgb(255, 30, 30);
color: white;
border-radius: 50%;
padding: 5px 8px;
font-size: 14px;
top: 10px;
right:158px;
}
#container
{
background-color: white;
margin: auto;
text-align: center;
width: 100%;
display: grid;
grid-gap: 10px;
grid-template-columns: 1.5fr 1.5fr 5fr 1fr;
font-family: 'Lato', sans-serif;

55
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
box-sizing: border-box;
position: fixed;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 2px 6px 2px rgba(60, 64,
67, 0.149);
}
#shopName
{
font-size: 40px;
font-family: 'Lato', sans-serif;
}
#shopName a
{
text-decoration: none;
color: rgb(29, 29, 29);
}
#shopName > b
{
font-weight: 900;
font: black;
}

#collection
{
font-weight: bold;

56
display: grid;
grid-template-columns: 1fr 1fr;
}
#collection a
{
text-decoration: none;
color: rgb(29, 29, 29);
}

.search
{
padding: 14px;
/* color: gray; */
color: rgb(29, 29, 29);
min-width: 25px;
text-align: center;
position: absolute;
}
.addedToCart
{
font-size: 1.5em;
margin-right: 25px;
}
#user
{
display: flex;
/* float: right; */

57
align-items: center;
}
.userIcon
{
font-size: 45px;
}
#input
{
width: 35em;
height: 3em;
padding: 2px 50px;
background-color: rgb(241, 241, 241);
border: none;
border-radius: 5px;
}
#input::placeholder
{
font-weight: bold;
}
#input:focus
{
outline: none;
}
#user a
{
color: rgb(29, 29, 29)
}

58
/* ----------------------------- MEDIA QUERY --------------------------- */

@media(max-width: 1300px)
{
#collection
{
font-size: 13px;
}
#input
{
width: 25em;
}
}
@media(max-width: 1212px)
{
#collection
{
font-size: 13px;
}
#input
{
width: 20em;
}
.addedToCart
{
font-size: 1.5em;

59
margin: 10px 20px;
}
}

@media(max-width: 1090px)
{
#container
{
display: grid;
grid-template-columns: 1fr 2fr 0.5fr;
}
#search
{
display: none;
}
}
@media(max-width: 750px)
{
#shopName
{
font-size: 28px;
}
#collection
{
font-size: 12px;
}
.userIcon

60
{
font-size: 35px;
}
.addedToCart
{
font-size: 1.2em;
margin: 10px 20px;
}
}

@media(max-width: 650px)
{
#shopName
{
font-size: 24px;
}
#collection
{
font-size: 10px;
}
.userIcon
{
font-size: 30px;
}
}
@media(max-width: 550px)
{

61
#container
{
padding: 20px 25px;
}
}

/* badge media */

@media(max-width: 1480px)
{
#badge
{
right:150px;
}
}
@media(max-width: 1426px)
{
#badge
{
right:142px;
}
}
@media(max-width: 1360px)
{
#badge
{
right:136px;

62
}
}
@media(max-width: 1320px)
{
#badge
{
right:129px;
}
}
@media(max-width: 1259px)
{
#badge
{
right:119px;
}}
@media(max-width: 1212px)
{
#badge
{
right: 96px;
}}
@media(max-width: 1155px)
{
#badge
{
right: 87px;
}}

63
@media(max-width: 1090px)
{
#badge
{
right: 119px;
}}
@media(max-width: 1030px)
{
#badge
{
right: 109px;
}}
@media(max-width: 970px)
{
#badge
{
right: 100px;
}}
@media(max-width: 910px)
{
#badge
{
right: 94px;
}}
@media(max-width: 850px)
{
#badge

64
{
right: 87px;
}}
@media(max-width: 750px)
{
#badge
{
right: 87px;
padding: 3px 6px;
font-size: 12px;
top: 12px;
}}
@media(max-width: 650px)
{
#badge
{
right: 78px;
}
}
@media(max-width: 550px)
{
#badge
{
right: 62px;
top: 18px;
}

65
Footer css code

body
{
margin: 0;
font-family: 'Lato', sans-serif;
}
#containerFooter
{
width: 100%;
background-color: rgb(29, 29, 29);
color: white;
letter-spacing: 1px;
display: grid;
grid-template-columns: repeat(4, 1fr);
text-transform: uppercase;
font-size: 15px;
padding: 15px 300px;
box-sizing: border-box;
}
#containerFooter h3:hover, #containerFooter p:hover
{
color: lightslategray;
cursor: pointer;
}
#webFooter
{

66
padding-top: 30px;
font-size: 12px;
}
#credit
{
width: 100%;
margin: auto;
padding: 20px 0;
text-align: center;
background-color: rgb(29, 29, 29);
color: white;
font-size: 11px;
letter-spacing: 1px;
}
#credit a
{
color: white;
text-decoration: none;
position: relative;
}
#credit a::after {
content: "";
background: white;
mix-blend-mode: exclusion;
width: calc(100% + 18px);
height: 0;
position: absolute;

67
bottom: -4px;
left: -10px;
transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
#credit a:hover::after {
height: calc(100% + 8px)
}
/* ----------------------------- MEDIA QUERY --------------------------- */
@media(max-width: 1350px)
{
#containerFooter
{
padding: 15px 200px;
}}
@media(max-width: 1166px)
{
#containerFooter
{
padding: 15px 100px;
}}
@media(max-width: 950px) {
#containerFooter
{
padding: 15px 50px;
}}
@media(max-width: 850px)
{

68
#containerFooter
{
font-size: 13px;
}
#webFooter
{
font-size: 10px;
}}
@media(max-width: 750px)
{
#containerFooter
{
display: grid;
grid-template-columns: 1fr 1fr;
padding: 15px 100px;
}
#webFooter
{
padding: 15px 20px;
}}
@media(max-width: 540px)
{
#containerFooter
{
padding: 0 25px;
}
}

69
Oder placed css code

#orderContainer
{
font-family: 'Lato', sans-serif;
width: 80%;
padding-top: 250px;
padding-bottom: 150px;
margin: auto;
text-align: center;
}
#orderContainer i
{
color: rgb(5, 187, 5);
padding-bottom: 30px;
font-size: 10em;
}
#aboutCheck p
{
font-weight: 100;
letter-spacing: 1px;
}
#aboutCheck h1
{
letter-spacing: 1px;
word-spacing: 1px;
}

70
/* ----------------------------- MEDIA QUERY --------------------------- */

@media(max-width: 700px)
{
#orderContainer i
{
font-size: 8em;
padding-bottom: 30px;
}
h1
{
font-size: 18px;
}
p
{
font-size: 15px;
}
}

71
Java script code
Cart css code

console.clear();

if(document.cookie.indexOf(',counter=')>=0)
{
let counter = document.cookie.split(',')[1].split('=')[1]
document.getElementById("badge").innerHTML = counter
}
let cartContainer = document.getElementById('cartContainer')

let boxContainerDiv = document.createElement('div')


boxContainerDiv.id = 'boxContainer'

// DYNAMIC CODE TO SHOW THE SELECTED ITEMS IN YOUR CART


function dynamicCartSection(ob,itemCounter)
{
let boxDiv = document.createElement('div')
boxDiv.id = 'box'
boxContainerDiv.appendChild(boxDiv)

let boxImg = document.createElement('img')


boxImg.src = ob.preview
boxDiv.appendChild(boxImg)

let boxh3 = document.createElement('h3')

72
let h3Text = document.createTextNode(ob.name + ' × ' + itemCounter)
// let h3Text = document.createTextNode(ob.name)
boxh3.appendChild(h3Text)
boxDiv.appendChild(boxh3)

let boxh4 = document.createElement('h4')


let h4Text = document.createTextNode('Amount: Rs' + ob.price)
boxh4.appendChild(h4Text)
boxDiv.appendChild(boxh4)

// console.log(boxContainerDiv);

buttonLink.appendChild(buttonText)
cartContainer.appendChild(boxContainerDiv)
cartContainer.appendChild(totalContainerDiv)
// let cartMain = document.createElement('div')
// cartmain.id = 'cartMainContainer'
// cartMain.appendChild(totalContainerDiv)

return cartContainer
}

let totalContainerDiv = document.createElement('div')


totalContainerDiv.id = 'totalContainer'

let totalDiv = document.createElement('div')


totalDiv.id = 'total'

73
totalContainerDiv.appendChild(totalDiv)

let totalh2 = document.createElement('h2')


let h2Text = document.createTextNode('Total Amount')
totalh2.appendChild(h2Text)
totalDiv.appendChild(totalh2)

// TO UPDATE THE TOTAL AMOUNT


function amountUpdate(amount)
{
let totalh4 = document.createElement('h4')
// let totalh4Text = document.createTextNode(amount)
let totalh4Text = document.createTextNode('Amount: Rs ' + amount)
totalh4Text.id = 'toth4'
totalh4.appendChild(totalh4Text)
totalDiv.appendChild(totalh4)
totalDiv.appendChild(buttonDiv)
console.log(totalh4);
}

let buttonDiv = document.createElement('div')


buttonDiv.id = 'button'
totalDiv.appendChild(buttonDiv)

let buttonTag = document.createElement('button')


buttonDiv.appendChild(buttonTag)

74
let buttonLink = document.createElement('a')
buttonLink.href = '/orderPlaced.html?'
buttonTag.appendChild(buttonLink)

buttonText = document.createTextNode('Place Order')


buttonTag.onclick = function()
{
console.log("clicked")
}
//dynamicCartSection()
// console.log(dynamicCartSection());

// BACKEND CALL
let httpRequest = new XMLHttpRequest()
let totalAmount = 0
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4)
{
if(this.status == 200)
{
// console.log('call successful');
contentTitle = JSON.parse(this.responseText)

let counter = Number(document.cookie.split(',')[1].split('=')[1])


document.getElementById("totalItem").innerHTML = ('Total Items: ' +
counter)

75
let item = document.cookie.split(',')[0].split('=')[1].split(" ")
console.log(counter)
console.log(item)
let i;
let totalAmount = 0
for(i=0; i<counter; i++)
{
let itemCounter = 1
for(let j = i+1; j<counter; j++)
{
if(Number(item[j]) == Number(item[i]))
{
itemCounter +=1;
}}
totalAmount += Number(contentTitle[item[i]-1].price) * itemCounter
dynamicCartSection(contentTitle[item[i]-1],itemCounter)
i += (itemCounter-1)
}
amountUpdate(totalAmount)
}}
else
{
console.log('call failed!');
}
}
httpRequest.open('GET',
'https://5d76bf96515d1a0014085cf9.mockapi.io/product', true)
httpRequest.send()

76
content js code

// console.clear();
let contentTitle;
console.log(document.cookie);
function dynamicClothingSection(ob) {
let boxDiv = document.createElement("div");
boxDiv.id = "box";
let boxLink = document.createElement("a");
// boxLink.href = '#'
boxLink.href = "/contentDetails.html?" + ob.id;
// console.log('link=>' + boxLink);
let imgTag = document.createElement("img");
// imgTag.id = 'image1'
// imgTag.id = ob.photos
imgTag.src = ob.preview;
let detailsDiv = document.createElement("div");
detailsDiv.id = "details";
let h3 = document.createElement("h3");
let h3Text = document.createTextNode(ob.name);
h3.appendChild(h3Text);
let h4 = document.createElement("h4");
let h4Text = document.createTextNode(ob.brand);
h4.appendChild(h4Text);
let h2 = document.createElement("h2");
let h2Text = document.createTextNode("rs " + ob.price);
h2.appendChild(h2Text);

77
boxDiv.appendChild(boxLink);
boxLink.appendChild(imgTag);
boxLink.appendChild(detailsDiv);
detailsDiv.appendChild(h3);
detailsDiv.appendChild(h4);
detailsDiv.appendChild(h2);
return boxDiv;
}

// TO SHOW THE RENDERED CODE IN CONSOLE


// console.log(dynamicClothingSection());

// console.log(boxDiv)

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


let containerClothing = document.getElementById("containerClothing");
let containerAccessories =
document.getElementById("containerAccessories");
// mainContainer.appendChild(dynamicClothingSection('hello world!!'))

// BACKEND CALLING

let httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status == 200) {

78
// console.log('call successful');
contentTitle = JSON.parse(this.responseText);
if (document.cookie.indexOf(",counter=") >= 0) {
var counter = document.cookie.split(",")[1].split("=")[1];
document.getElementById("badge").innerHTML = counter;
}
for (let i = 0; i < contentTitle.length; i++) {
if (contentTitle[i].isAccessory) {
console.log(contentTitle[i]);
containerAccessories.appendChild(
dynamicClothingSection(contentTitle[i])
);
} else {
console.log(contentTitle[i]);
containerClothing.appendChild(
dynamicClothingSection(contentTitle[i])
);
}}
} else {
console.log("call failed!");
}}};
httpRequest.open(
"GET",
"https://5d76bf96515d1a0014085cf9.mockapi.io/product",
true
);
httpRequest.send();

79
content detail js code

console.clear()
let id = location.search.split('?')[1]
console.log(id)
if(document.cookie.indexOf(',counter=')>=0)
{
let counter = document.cookie.split(',')[1].split('=')[1]
document.getElementById("badge").innerHTML = counter
}
function dynamicContentDetails(ob)
{
let mainContainer = document.createElement('div')
mainContainer.id = 'containerD'
document.getElementById('containerProduct').appendChild(mainContainer);
let imageSectionDiv = document.createElement('div')
imageSectionDiv.id = 'imageSection'
let imgTag = document.createElement('img')
imgTag.id = 'imgDetails'
//imgTag.id = ob.photos
imgTag.src = ob.preview
imageSectionDiv.appendChild(imgTag)
let productDetailsDiv = document.createElement('div')
productDetailsDiv.id = 'productDetails'
// console.log(productDetailsDiv);
let h1 = document.createElement('h1')
let h1Text = document.createTextNode(ob.name)

80
h1.appendChild(h1Text)
let h4 = document.createElement('h4')
let h4Text = document.createTextNode(ob.brand)
h4.appendChild(h4Text)
console.log(h4);
let detailsDiv = document.createElement('div')
detailsDiv.id = 'details'
let h3DetailsDiv = document.createElement('h3')
let h3DetailsText = document.createTextNode('Rs ' + ob.price)
h3DetailsDiv.appendChild(h3DetailsText)
let h3 = document.createElement('h3')
let h3Text = document.createTextNode('Description')
h3.appendChild(h3Text)
let para = document.createElement('p')
let paraText = document.createTextNode(ob.description)
para.appendChild(paraText)
let productPreviewDiv = document.createElement('div')
productPreviewDiv.id = 'productPreview'
let h3ProductPreviewDiv = document.createElement('h3')
let h3ProductPreviewText = document.createTextNode('Product Preview')
h3ProductPreviewDiv.appendChild(h3ProductPreviewText)
productPreviewDiv.appendChild(h3ProductPreviewDiv)
let i;
for(i=0; i<ob.photos.length; i++)
{
let imgTagProductPreviewDiv = document.createElement('img')
imgTagProductPreviewDiv.id = 'previewImg'

81
imgTagProductPreviewDiv.src = ob.photos[i]
imgTagProductPreviewDiv.onclick = function(event)
{
console.log("clicked" + this.src)
imgTag.src = ob.photos[i]
document.getElementById("imgDetails").src = this.src
}
productPreviewDiv.appendChild(imgTagProductPreviewDiv)
}
let buttonDiv = document.createElement('div')
buttonDiv.id = 'button'
let buttonTag = document.createElement('button')
buttonDiv.appendChild(buttonTag)
buttonText = document.createTextNode('Add to Cart')
buttonTag.onclick = function()
{
let order = id+" "
let counter = 1
if(document.cookie.indexOf(',counter=')>=0)
{
order = id + " " + document.cookie.split(',')[0].split('=')[1]
counter = Number(document.cookie.split(',')[1].split('=')[1]) + 1
}
document.cookie = "orderId=" + order + ",counter=" + counter
document.getElementById("badge").innerHTML = counter
console.log(document.cookie)
}

82
buttonTag.appendChild(buttonText)
console.log(mainContainer.appendChild(imageSectionDiv));
mainContainer.appendChild(imageSectionDiv)
mainContainer.appendChild(productDetailsDiv)
productDetailsDiv.appendChild(h1)
productDetailsDiv.appendChild(h4)
productDetailsDiv.appendChild(detailsDiv)
detailsDiv.appendChild(h3DetailsDiv)
detailsDiv.appendChild(h3)
detailsDiv.appendChild(para)
productDetailsDiv.appendChild(productPreviewDiv)
productDetailsDiv.appendChild(buttonDiv)
return mainContainer
}
// BACKEND CALLING
let httpRequest = new XMLHttpRequest()
{
httpRequest.onreadystatechange = function()
{
if(this.readyState === 4 && this.status == 200)
{
console.log('connected!!');
let contentDetails = JSON.parse(this.responseText)
{
console.log(contentDetails);
dynamicContentDetails(contentDetails)
}

83
}
else
{
console.log('not connected!');
}}}
httpRequest.open('GET',
'https://5d76bf96515d1a0014085cf9.mockapi.io/product/'+id, true)
httpRequest.send()

84
order placed js code

document.cookie = "orderId="+0 +",counter="+0


let httpRequest = new XMLHttpRequest(),
jsonArray,
method = "GET",
jsonRequestURL = "https://5d76bf96515d1a0014085cf9.mockapi.io/order";
httpRequest.open(method, jsonRequestURL, true);
httpRequest.onreadystatechange = function()
{
if(httpRequest.readyState == 4 && httpRequest.status == 200)
{
// convert JSON into JavaScript object
jsonArray = JSON.parse(httpRequest.responseText)
console.log(jsonArray)
jsonArray.push(
{
"id": (jsonArray.length)+1, "amount": 200,"product":["userOrder"]02
})
// send with new request the updated JSON file to the server:
httpRequest.open("POST", jsonRequestURL, true)
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-
urlencoded")
httpRequest.send(jsonArray)
}}
httpRequest.send(null);

85
SCREENSHOTS
Index

86
87
Clothing option

Accessories options

88
Orders view

89
90
Check out cart

Order placed

91
CONCLUSION
The development of Shoplane using tools like Visual Studio, HTML, CSS,
and JavaScript demonstrates the power of combining structure, design, and
interactivity to create a user-centric e-commerce platform. These technologies
ensure a seamless, responsive, and visually appealing shopping experience
while maintaining robust functionality.

By leveraging this efficient tech stack, Shoplane achieves its mission of


offering customers a convenient, secure, and enjoyable platform to explore
and purchase clothing and accessories. As we continue to innovate, our focus
remains on enhancing user satisfaction, scalability, and performance, making
Shoplane a reliable destination for online shopping.

92
BIBLIOGRAPHY
The following resources were referred to and utilized during the
development of this project:
1. W3Schools For HTML
https://www.w3schools.com/html/default.asp

2. W3Schools For CSS


https://www.w3schools.com/css/default.asp

3. W3Schools For JAVASCRIPT


https://www.w3schools.com/js/default.asp

4. Javascript For Building a Shopping Cart


https://www.tutorjoes.in/JS_tutorial/food_shopping_cart_in_js

5. GitHub(open-source e-commerce project for inspiration)


i) https://github.com/search?q=e-
commerce+website&type=repositories
ii) https://github.com/bradtraversy/ecommerce

93

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy