manisha file
manisha file
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
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.
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
7. CONCLUSION 92
8. BIBLIOGRAPHY 93
v
INTRODUCTION
1
OBJECTIVES OF THE PROJECT
2
TOOLS USED IN PROJECT
1. Visual code
2. Java scripts
3. Html
4. Css
2. JavaScript (JS)
3
INTRODUCTION TO TOOLS
1.Visual Studio:
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.
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.
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>
    |     <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>
    |     <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(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(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')
72
let h3Text = document.createTextNode(ob.name + ' × ' + itemCounter)
// let h3Text = document.createTextNode(ob.name)
boxh3.appendChild(h3Text)
boxDiv.appendChild(boxh3)
// 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
}
73
totalContainerDiv.appendChild(totalDiv)
74
let buttonLink = document.createElement('a')
buttonLink.href = '/orderPlaced.html?'
buttonTag.appendChild(buttonLink)
// 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)
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;
}
// console.log(boxDiv)
// BACKEND CALLING
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
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.
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
93