每当您点击“添加到购物车”按钮时，该商品就会添加到购物车中。然后价格将根据您输入的任何输入值进行调整，并且还将根据您决定添加到购物车的任何其他项目进行调整。那么每当添加一个项目时，输入值都将重置为值“1”。感谢任何反馈，我在这里学习。
代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Commerce Website</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css"><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<a href="#p1"><li class="topnavlink">Home</li></a>
<a href="#p2"><li class="topnavlink">Shop</li></a>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg"><div class="overlay"></div></div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal"id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js"async></script>
</body>
</html>
CSS：
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar{
display: none;
}
.wrapper{
overflow-x: hidden;
}
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a{
text-decoration: none;
color: black;
}
.topleftnav{
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
margin-right: 2.5%;
}
.navcartcontainer{
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover{
transform: scale(1.15);
}
.p1{
height: 100vh;
position: relative;
}
.p1 img{
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after{
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn{
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover{
background-color: rgb(11, 70, 75);
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 2.2rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: 120vh;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
@media only screen and (max-width: 600px){
.topnavcont{
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav{
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li{
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover{
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle{
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer{
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber{
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i{
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody{
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal{
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i{
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover{
transform: scale(1.15);
}
.cartbody input{
width: 1.5rem;
height: auto;
}
.cartbodyactive{
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle{
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem{
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle{
font-size: 1.2rem;
}
.cartitems{
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn{
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2{
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title{
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img{
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2{
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn{
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover{
background-color: black;
color: white;
font-weight: bold;
}
.arrow{
color: white;
}
}
JAVASCRIPT：
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbtn = document.getElementById("cartbtn");
const closeicon = document.getElementById("closeicon");
const cartbody = document.querySelector(".cartbody");
const removebtn = document.getElementsByClassName("removebtn");
const carttotal = document.querySelector(".carttotal");
let price = document.querySelector(".actualprice");
let itempricestring = document.getElementsByClassName("itemprice");
let globalquantinput = document.querySelector(".qinput");
cartbtn.addEventListener("click", function () {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function () {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function () {
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
//GETTING THE SHOP ELEMENTS AND APPENDING THEM TO THE CART
let shopitem = button.parentElement;
let shoptitle =shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("div");
let cartitems = document.getElementsByClassName("cartitems")[0];
let cartrowcontent = `<li class="cartitem"><span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput"><button class="removebtn">Remove</button></li>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
//ADJUSTING THE TOTAL
let priceint = price.innerText;
let pricerounded = parseFloat(priceint.replace("Total: $", ""));
let shopprice2 = shopprice.replace("$", "");
let shoppriceint = parseFloat(shopprice2);
console.log(shoppriceint);
console.log(pricerounded);
price.innerText = "Total: $" + (shoppriceint + pricerounded).toFixed(2);
//REMOVING ELEMENTS AND DECREASING NUMBER
cartitems.lastChild
.querySelector(".removebtn")
.addEventListener("click", function () {
let TotalNumbervalue = parseInt(TotalNumber.innerText);
console.log(TotalNumbervalue);
if (TotalNumbervalue > 0) {
let shopremoveitem = this.parentElement.parentElement;
let shopremoveprice =
shopremoveitem.getElementsByClassName("itemprice")[0].innerText;
let shopremoveprice2 = shopremoveprice.replace("$", "");
let shopremovepriceint = parseFloat(shopremoveprice2);
let quantin = document.querySelector(".qinput");
let quantinval = quantin.value;
let priceafteradded = parseFloat(
price.innerText.replace("Total: $", ""));
TotalNumber.innerText--;
Math.round(shopremovepriceint);
price.innerText ="Total: $" +
(priceafteradded - shopremovepriceint * quantinval).toFixed(2);
}
this.parentElement.parentElement.remove();
updateAmounts()
});
//PRICEINT1 PRICEINT2 AND PRICEINT3 ARE TO GET THE INNER TEXT OF THE PRICE IN EACH FUNCTION.
//MAKING SURE THE INPUTS DONT GO OVER 1 AND ALSO MAKING SURE THEY WORK
let qinput = document.getElementsByClassName("qinput");
for (let i = 0; i < qinput.length; i++) {
qinput[i].value = 1;
function updateAmounts() {
//MAKE SURE INPUT NUMBERS DONT GO BELOW 1
if (qinput[i].value < 1) {
qinput[i].value = 1;
console.log('works')
price.innerText = document.querySelector('.actualprice'.innertext);
}
//ADDING/UPDATING THE QUANTITIES TO THE TOTAL PRICE
let total = 0;
document.querySelectorAll(".qinput").forEach(function (input) {
let qty = +input.value;
let price = +input.closest(".cartitem").querySelector(".itemprice").innerText.replace("$", "");
total += qty * price;
});
console.log(document.querySelector('.actualprice'))
document.querySelector(".actualprice").innerHTML = `Total: $${total.toFixed(2)}`;
}
document.querySelectorAll(".qinput").forEach(function (input){
input.addEventListener("change", () => updateAmounts())
});
// let carttitle = document.querySelector('.itemtitle')
// if(shoptitle.innertext = carttitle.innertext){
// console.log('they are the same')
// }
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function () {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});
答案 0 :(得分：0)
我只是稍微更改了脚本。它现在有效。只有当已经添加了一个项目时，才不会再添加项目总数，而是增加一个项目。
let TotalNumber = document.querySelector(".totalnumber");
const Atc = document.getElementsByClassName("atcbtn");
const cartbody = document.querySelector(".cartbody");
let price = document.querySelector(".actualprice");
cartbtn.addEventListener("click", function() {
cartbody.classList.toggle("cartbodyactive");
});
closeicon.addEventListener("click", function() {
cartbody.classList.remove("cartbodyactive");
});
function AddItemtoCart() {
//INCREASING THE TOTAL NUMBER
for (i = 0; i < Atc.length; i++) {
let button = Atc[i];
button.addEventListener("click", function() {
let shopitem = button.parentElement;
let shoptitle = shopitem.getElementsByClassName("item-title")[0].innerText;
let shopprice = shopitem.getElementsByClassName("itemprice")[0].innerText;
let itemtitles = document.getElementsByClassName("itemtitle");
var isNew = false;
let totalPriceRounded = 0;
if (itemtitles.length > 0) {
//update basket
for (j = 0; j < itemtitles.length; j++) {
if (itemtitles[j].innerText == shoptitle) {
var quantity = parseInt(itemtitles[j].nextSibling.nextSibling.value) + 1;
itemtitles[j].nextSibling.nextSibling.value = quantity;
totalPriceRounded = parseFloat(price.innerText.replace("Total: $", ""));
totalPriceRounded = totalPriceRounded + parseFloat(shopprice.replace("$", ""));
price.innerText = "Total: $" + (totalPriceRounded).toFixed(2);
isNew = true;
}
}
}
//add to basket
if (!isNew) {
shoppriceall = shopitem.getElementsByClassName("itemprice").innerText;
let cartrow = document.createElement("li");
let cartitems = document.getElementsByClassName("cartitems")[0];
cartrow.classList.add("cartitem");
let cartrowcontent = `<span class="itemtitle">${shoptitle}</span><span class="itemprice">${shopprice}</span><input type="number" class="qinput"id="qinput" value='${1}'><button class="removebtn" bid="${shoptitle.replace(" ", "")}">Remove</button>`;
cartrow.innerHTML = cartrowcontent;
cartitems.append(cartrow);
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > -1) {
TotalNumber.innerHTML++;
}
totalPriceRounded = parseFloat(price.innerText.replace("Total: $", ""));
totalPriceRounded = totalPriceRounded + parseFloat(shopprice.replace("$", ""));
price.innerText = "Total: $" + (totalPriceRounded).toFixed(2);
let btnRemoves = document.getElementsByClassName("removebtn");
var m = shoptitle.replace(" ", "");
for (j = 0; j < btnRemoves.length; j++) {
var t = btnRemoves[j].getAttribute('bid');
if (t.localeCompare(m) == 0) {
let removebutton = btnRemoves[j];
removebutton.addEventListener("click", function() {
let parent = this.parentElement;
var quantity = parseInt(this.previousSibling.value);
var removedPrice = this.previousSibling.previousSibling.innerText;
totalPriceRounded = parseFloat(price.innerText.replace("Total: $", ""));
totalPriceRounded = totalPriceRounded - parseFloat((quantity * parseFloat(removedPrice.replace("$", ""))));
price.innerText = "Total: $" + (totalPriceRounded).toFixed(2);
let TotalNumbervalue = TotalNumber.innerHTML;
if (TotalNumbervalue > 0) {
TotalNumber.innerHTML--;
}
//remove row
parent.remove();
});
}
}
}
});
}
}
//ALERTING USER THAT ITEMS HAVE BEEN PURCHASED
AddItemtoCart();
let purchasebtn = document.getElementById("purchasebtn");
purchasebtn.addEventListener("click", function() {
location.reload();
alert("Your items have been purchased!");
});
//SMOOTH SCROLL
const scroll = new SmoothScroll('a[href*="#"]', {
speed: 1000,
speedAsDuration: true,
easing: "easeinquad",
});
//SWIPER
const swiper = new Swiper(".swiper-container", {
// Optional parameters
direction: "horizontal",
loop: true,
speed: 300,
// If we need pagination
pagination: {
el: ".swiper-pagination",
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: ".swiper-scrollbar",
},
});* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
overflow-x: hidden;
}
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
a {
text-decoration: none;
color: black;
}
.topleftnav {
display: flex;
justify-content: space-between;
width: 10%;
margin-left: -3%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1.05rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
margin-right: 2.5%;
}
.navcartcontainer {
display: flex;
margin-right: -1%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.topnavcont i:hover {
transform: scale(1.15);
}
.p1 {
height: 100vh;
position: relative;
}
.p1 img {
object-fit: cover;
height: 100vh;
width: 100%;
}
.p1 .overlay::after {
content: "";
position: absolute;
top: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
height: 90vh;
width: 100%;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 25vw;
top: 10%;
left: 75%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.purchasebtn {
background-color: rgb(22, 113, 119);
margin-bottom: 5em;
padding: 1em 2.5em;
border-radius: 0.3em;
color: white;
margin-left: 35%;
font-weight: bold;
font-size: 1rem;
outline: none;
border: none;
cursor: pointer;
transition: 0.3s ease;
}
.purchasebtn:hover {
background-color: rgb(11, 70, 75);
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 2.2rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: 120vh;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
@media only screen and (max-width: 600px) {
.topnavcont {
padding: 1em 0em;
align-items: center;
height: 10vh;
width: 100vw;
display: flex;
justify-content: space-around;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.10) 0px 3px 6px, rgba(0, 0, 0, 0.20) 0px 3px 6px;
position: fixed;
z-index: 5;
}
.topleftnav {
display: flex;
justify-content: space-evenly;
width: 55%;
margin-left: 1%;
padding-right: 5%;
font-weight: bold;
}
.topleftnav li {
cursor: pointer;
list-style: none;
font-size: 1rem;
transition: 0.3s ease;
border-bottom: transparent solid 2px;
}
.topleftnav li:hover {
border-bottom: black solid 2px;
transform: scale(1.1);
}
.topnavtitle {
font-size: 1.8rem;
width: 80%;
}
.navcartcontainer {
display: flex;
padding-right: 5%;
margin-left: 0%;
}
.topnavcont .totalnumber {
color: black;
padding: 0.2em 0.4em;
border-radius: 50%;
font-size: 1.25rem;
height: fit-content;
/* cursor: pointer; */
font-weight: bold;
}
.topnavcont i {
font-size: 2rem;
margin-left: 0.3em;
cursor: pointer;
transition: 0.4s ease;
}
.cartbody {
background-color: white;
position: fixed;
height: 100vh;
width: 80vw;
top: 10%;
left: 20%;
z-index: 2100;
overflow-y: auto;
transform: translateX(100%);
transition: 0.6s ease;
box-shadow: rgba(0, 0, 0, 0.0) 0px 0px 0px, rgba(0, 0, 0, 0.30) 0px 3px 6px;
}
.carttotal {
font-size: 2rem;
color: rgb(22, 113, 119);
font-weight: bold;
margin-top: 1.5em;
text-align: center;
margin-bottom: 3em;
}
.cartbody i {
font-size: 2.2rem;
margin-left: 0.4em;
margin-top: 0.2em;
color: black;
font-weight: 200;
cursor: pointer;
transition: 0.3s ease;
}
.cartbody i:hover {
transform: scale(1.15);
}
.cartbody input {
width: 1.5rem;
height: auto;
}
.cartbodyactive {
transform: translateX(0%);
transform: scale(1);
background-color: white;
}
.carttitle {
text-align: center;
margin-top: 1em;
margin-bottom: 2em;
}
.cartitem {
display: flex;
justify-content: space-evenly;
padding-bottom: 2em;
}
.cartitem .itemtitle {
font-size: 1.2rem;
}
.cartitems {
display: flex;
flex-direction: column;
row-gap: 3em;
overflow-y: auto;
list-style: none;
padding-left: 0.5em;
}
.removebtn {
background-color: red;
color: black;
font-weight: bold;
outline: none;
border: none;
padding: 0.5em 1em;
cursor: pointer;
}
.p2 {
height: fit-content;
padding-bottom: 20%;
position: relative;
}
.p2title {
color: black;
padding-top: 2.5em;
margin-left: 7%;
}
.p2 img {
height: 200px;
width: 300px;
object-fit: cover;
}
.itemcontainer {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.itemcontainer2 {
margin-top: 6em;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
min-height: 355px;
justify-content: space-around;
padding-bottom: 2em;
}
.atcbtn {
background-color: white;
cursor: pointer;
text-decoration: none;
color: black;
width: 40%;
text-align: center;
font-weight: bold;
border: black solid 2px;
padding: 0.8em 0.5em;
transition: 0.4s ease;
}
.atcbtn:hover {
background-color: black;
color: white;
font-weight: bold;
}
.arrow {
color: white;
}
}<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="/fonts/fontawesome-free-5.3.1-web/css/all.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<div class="wrapper">
<div class="p1" id="p1">
<div class="topnavcont">
<ul class="topleftnav">
<a href="#p1">
<li class="topnavlink">Home</li>
</a>
<a href="#p2">
<li class="topnavlink">Shop</li>
</a>
</ul>
<h1 class="topnavtitle">The Store</h1>
<div class="navcartcontainer">
<h3 class="totalnumber">0</h3>
<i class="fas fa-shopping-cart" id="cartbtn"></i>
</div>
</div>
<!-- <img src="clark-street-mercantile-vC-GqGbakJo-unsplash.jpg" alt="" class="bgimg"> -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="clark-street-mercantile-P3pI6xzovu0-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<div class="swiper-slide"><img src="michela-ampolo-7tDGb3HrITg-unsplash.jpg" alt="" class="bgimg">
<div class="overlay"></div>
</div>
<!-- <div class="swiper-slide">Slide 3</div>
... -->
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev arrow"></div>
<div class="swiper-button-next arrow"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<div class="cartbody">
<i class="fal fa-times" id="closeicon"></i>
<h2 class="carttitle">Shopping Cart</h2>
<ul class="cartitems">
<!-- <div><li class="cartitem"><span class="itemtitle">Shirt1</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt2</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div>
<div><li class="cartitem"><span class="itemtitle">Shirt3</span><span class="itemprice">$8.99</span><input type="number"class="qinput"id="qinput"><button class="removebtn">Remove</button></li></div> -->
</ul>
<h3 class="actualprice carttotal" id="actualprice">Total: $0</h3>
<button class="purchasebtn" id="purchasebtn">Purchase</button>
</div>
</div>
<div class="p2" id="p2">
<h1 class="p2title">My Shop</h1>
<div class="itemcontainer">
<div class="item">
<img src="anomaly-WWesmHEgXDs-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">White Shirt</h1>
<h3 class="itemprice">$8.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="revolt-164_6wVEHfI-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Red Shoes</h1>
<h3 class="itemprice">$4.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="sebastian-coman-travel-dtOTQYmTEs0-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Sunglasses</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
<div class="itemcontainer2">
<div class="item">
<img src="haley-phelps-RgJ-NU_qWjM-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Jeans</h1>
<h3 class="itemprice">$1.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="olive-tatiane-ImEzF9B91Mk-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Necklace</h1>
<h3 class="itemprice">$6.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
<div class="item">
<img src="rafael-silva-fc2Q2DKBCYY-unsplash.jpg" alt="" class="item-img">
<h1 class="item-title">Beanie</h1>
<h3 class="itemprice">$2.99</h3>
<!-- <a href="#" class="atcbtn">Add To Cart</a> -->
<button class="atcbtn">Add To Cart</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="app.js" async></script>