Help me find the name, sort by price, share button for each product in following code !?

Ask everyone to help me find the name, sort by price, share button for each product !?

Thanks !

in the following code:

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta charset="UTF-8">



<title>Shop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
:root {
font-size: 16px;
color: white;
font-family: "Montserrat", sans-serif;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

div {
display: -webkit-box;
display: flex;
}

button {
border: none;
background: none;
outline: none;
color: white;
cursor: pointer;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.banner {
position: relative;
height: 100vh;
width: 100vw;
background: -webkit-gradient(linear, right top, left top, from(#8942a8), to(#ba382f));
background: linear-gradient(to left, #8942a8, #ba382f);
overflow: hidden;
}
.banner .stock-limit {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 20px;
background-color: #010101;
width: 400px;
height: 180px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
display: none;
}
.banner .stock-limit em {
position: absolute;
width: 80%;
top: 20%;
left: 0;
right: 0;
margin: 0 auto;
line-height: 1.5rem;
text-align: center;
font-weight: 600;
font-size: 1.2rem;
}

.banner .cover {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
display: none;
}

.box-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.box-area li {
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: white;
overflow: hidden;
-webkit-animation: animation 20s linear infinite;
animation: animate 20s linear infinite;
bottom: -120px;
}

.box-area li:nth-child(1) {
left: 86%;
width: 80px;
height: 80px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.box-area li:nth-child(2) {
left: 12%;
width: 30px;
height: 30px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
}

.box-area li:nth-child(3) {
left: 70%;
width: 100px;
height: 100px;
-webkit-animation-delay: 5.5s;
animation-delay: 5.5s;
}

.box-area li:nth-child(4) {
left: 42%;
width: 150px;
height: 150px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}

.box-area li:nth-child(5) {
left: 65%;
width: 40px;
height: 40px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.box-area li:nth-child(6) {
left: 15%;
width: 110px;
height: 110px;
-webkit-animation-delay: 3.5s;
animation-delay: 3.5s;
-webkit-animation-duration: 15s;
animation-duration: 15s;
}

@-webkit-keyframes animate {
0% {
-webkit-transform: translateY(0) rotate(0deg);
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateY(-100vh) rotate(360deg);
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
@keyframes animate {
0% {
-webkit-transform: translateY(0) rotate(0deg);
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateY(-100vh) rotate(360deg);
transform: translateY(-100vh) rotate(360deg);
opacity: 0;
}
}
.fa-shopping-cart {
position: absolute;
right: 2rem;
top: 1.2rem;
color: black;
}

.fa-shopping-cart:hover {
color: white;
}

.total-qty {
position: absolute;
height: 1rem;
width: 1rem;
background: white;
color: black;
border-radius: 50%;
border: 1px solid white;
text-align: center;
line-height: 1rem;
font-weight: 600;
top: 1rem;
right: 1.5rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.main-cart {
position: absolute;
-webkit-box-pack: space-evenly;
justify-content: space-evenly;
flex-wrap: wrap;
width: 90%;
height: 100%;
margin-left: 5%;
align-self: center;
-webkit-box-align: center;
align-items: center;
}

.card {
position: relative;
flex-shrink: 0;
height: 300px;
width: 200px;
background-color: #010101;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 7px 5px -5px #4d4b4b;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.card .img-container {
position: absolute;
height: 185px;
width: 185px;
margin: 0 auto;
left: 0;
right: 0;
-webkit-transform: translateY(35px);
transform: translateY(35px);
}
.card .img-container img {
width: 100%;
align-self: center;
}
.card .img-container .out-of-stock-cover {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
display: none;
}
.card .img-container .out-of-stock-cover span {
font-weight: 900;
color: rgba(255, 200, 200, 0.75);
font-size: 1.5rem;
}

.top-bar {
-webkit-transform: translateY(0.5rem);
transform: translateY(0.5rem);
width: 100%;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: baseline;
align-items: baseline;
padding: 0 1rem;
}
.top-bar .fa-apple {
font-size: 1.5rem;
}
.top-bar .stocks {
font-size: 0.8rem;
color: lightgreen;
}

.card .details {
position: absolute;
height: 220px;
width: 100%;
background-color: #2e2f33;
border-radius: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
padding: 20px;
bottom: -165px;
-webkit-transition: 0.25s;
transition: 0.25s;
}

.card .details .name-fav {
-webkit-box-pack: justify;
justify-content: space-between;
}

.card .details .name-fav strong {
font-weight: 600;
}

.fav {
color: red;
}

.card .details .wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-transform: translateY(5px);
transform: translateY(5px);
display: none;
}

.details .wrapper p {
font-size: 0.9rem;
padding: 5px 0;
font-weight: light;
}

.card .details .purchase {
width: 100%;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
}

.card .details .purchase p {
font-weight: 500;
}

.details .purchase .add-btn {
border-radius: 20px;
border: 1px solid white;
background: none;
color: white;
padding: 6px 10px;
}

.details .purchase .add-btn:hover {
background: white;
color: black;
}

.main-cart .card:hover {
height: 450px;
width: 260px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.main-cart .card:hover .details {
bottom: 0;
}

.main-cart .card:hover .wrapper {
display: block;
}

.side-nav {
position: absolute;
background: #010101;
opacity: 0.95;
height: 100%;
width: 60%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
top: 0;
right: -100%;
z-index: 10;
overflow: hidden;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.side-nav .fa-times {
position: absolute;
top: 20px;
right: 30px;
font-size: 1.5rem;
}

.side-nav h2 {
align-self: center;
-webkit-transform: translateY(1rem);
transform: translateY(1rem);
font-size: 2rem;
font-weight: 600;
}

.side-nav .cart-items {
position: absolute;
width: 90%;
margin: 0 5%;
height: 50%;
top: 10%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.side-nav .cart-items .empty-cart {
margin: auto 0;
font-size: 2rem;
font-weight: 900;
text-align: center;
color: rgba(255, 255, 255, 0.25);
}

.side-nav .cart-items .cart-item {
height: 5rem;
width: 100%;
-webkit-box-align: center;
align-items: center;
justify-content: space-around;
border-bottom: 1px solid whitesmoke;
}
.side-nav .cart-items .cart-item:hover {
background: rgba(255, 255, 255, 0.25);
}
.side-nav .cart-items .cart-item .cart-img {
width: 5rem;
height: 5rem;
-webkit-box-pack: center;
justify-content: center;
}
.side-nav .cart-items .cart-item .cart-img img {
width: 100%;
align-self: center;
}

.side-nav .final {
position: absolute;
align-self: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
bottom: 10%;
}

.side-nav .final strong {
align-self: flex-end;
font-size: 1.2rem;
font-weight: 600;
margin-right: 20px;
margin-bottom: 1rem;
}

.side-nav .final .action {
-webkit-box-pack: space-evenly;
justify-content: space-evenly;
}

.side-nav .final .action .btn {
font-size: 1.2rem;
padding: 1rem 2rem;
border: 1px solid white;
margin-right: 20px;
border-radius: 10px;
}

.side-nav .final .action .btn:hover {
color: black;
box-shadow: inset 20em 0 0 0 white;
}

.qty-change {
-webkit-box-pack: space-evenly;
justify-content: space-evenly;
-webkit-box-align: baseline;
align-items: baseline;
}

.btn-qty {
border: 1px solid white;
border-radius: 50%;
padding: 2px 5px;
}
.btn-qty:hover {
background: white;
color: black;
}

.qty {
padding: 2px 5px;
}

.invoice {
position: absolute;
height: 90%;
width: 90%;
background: rgba(0, 0, 0, 0.95);
padding: 5% 4%;
margin: 0 auto;
left: 0;
right: 0;
align-self: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
border-radius: 20px;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.invoice .shipping-items {
padding: 10px 0;
width: 100%;
-webkit-box-pack: justify;
justify-content: space-between;
}
.invoice .shipping-items .item-names,
.invoice .shipping-items .items-price {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
justify-content: space-around;
}
.invoice .payment {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.invoice .payment em,
.invoice .payment div {
margin-top: 10px;
font-weight: 600;
-webkit-box-pack: justify;
justify-content: space-between;
}
.invoice .order {
position: absolute;
bottom: 10%;
width: 40%;
justify-content: space-around;
}
.invoice .order .btn {
padding: 1rem 2rem;
border-radius: 10px;
font-size: 1.2rem;
}
.invoice .order .btn-order {
background: #00bbf9;
}
.invoice .order .btn-cancel {
background: #bb342f;
}
.invoice .order-details {
height: 300px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
justify-content: space-around;
}
.invoice .order-details em,
.invoice .order-details p {
border-bottom: 1px dashed white;
padding-bottom: 10px;
}
.invoice .order-details em {
font-size: 1.2rem;
font-weight: 600;
}
.invoice .order-details .thanks {
position: absolute;
text-align: center;
margin: auto;
border: none;
left: 0;
right: 0;
bottom: 55%;
}
.invoice .order-details p {
font-size: 1.1rem;
}
.invoice .order-details p span {
font-weight: 600;
}

.btn-ok {
position: absolute;
width: 80%;
font-size: 1.2rem;
border-radius: 10px;
padding: 1rem 2rem;
margin: auto;
bottom: 10%;
left: 0;
right: 0;
background: #5bc0be;
}

@media (max-width: 768px) {
.side-nav {
width: 80%;
}

.invoice .order {
width: 60%;
}

.main-cart {
overflow: scroll;
}
}
@media (max-width: 576px) {
.side-nav {
width: 100%;
}
.side-nav .cart-img {
display: none;
}

.invoice .order {
width: 80%;
}

.nav {
width: 576px;
height: 4rem;
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-filter: invert(1);
filter: invert(1);
}

.main-cart {
-webkit-box-pack: start;
justify-content: flex-start;
flex-wrap: nowrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 95%;
top: 4rem;
}
.main-cart .card {
margin: 20px auto;
}
}
</style>

<script>
window.console = window.console || function(t) {};
</script>



<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>


</head>

<body translate="no">
<p>Search</p>

<input type="text" id="Search" name="Search"><br><br>
<div id="app">
<div>

<div class="banner">
<ul class="box-area">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<script src="MWadRJY_data/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a6.js"></script>



<script id="rendered-js">
const productDetails = [
{
name: "Airpods Pro",
price: 24900,
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJiKtlpQGkIeOyAPV3qQMNkl8uuRzfGWZtIDb_WgDnam8WjhpL&usqp=CAU",
qty: 10,
heading: "Wireless Noise Cancelling Earphones",
des:
"Airpods Pro." },

{
name: "Apple Watch",
price: 40900,
imageUrl: "https://purepng.com/public/uploads/large/apple-watch-pcq.png",
qty: 15,
heading: "You’ve never seen a watch like this",
des:
"Apple Watch." },

{
name: "Macbook Pro",
price: 199900,
imageUrl: "https://pngimg.com/uploads/macbook/macbook_PNG8.png",
qty: 20,
heading: "The best for the brightest",
des:
"Macbook Pro." },

{
name: "iPhone 11 pro",
price: 106600,
imageUrl:
"https://store.storeimages.cdn-apple...ei=1112&fmt=png-alpha&qlt=80&.v=1566954990073",
qty: 35,
heading: "Pro cameras. Pro display. Pro performance",
des:
"iPhone 11 pro." },

{
name: "iPad Pro",
price: 71900,
imageUrl:
"https://store.storeimages.cdn-apple...ei=1112&fmt=png-alpha&qlt=80&.v=1583553704156",
qty: 25,
heading: "Your next computer is not a computer",
des:
"iPad Pro." }];


const cartDetails = [];

//click events {
function addItem(event) {
let btnClicked =
event.parentElement.parentElement.parentElement.parentElement.parentElement;
let noStocks = btnClicked.getElementsByClassName("out-of-stock-cover")[0];
if (noStocks.style.display == "flex") return;
let name = btnClicked.getElementsByClassName("product-name")[0].innerText;
let price = parseFloat(
btnClicked.
getElementsByClassName("product-price")[0].
innerText.replace("₹ ", ""));

let imgSrc = btnClicked.getElementsByClassName("product-img")[0].src;
SwitchBtns(btnClicked);
let cartItem = {
name,
price,
imgSrc,
qty: 1 };

CartItems(cartItem);
cartDetails.push(cartItem);
RenderCart();
CartItemsTotal();
}

function removeItem(event) {
let btnClicked = event.parentElement;
let itemName = btnClicked.getElementsByClassName("name")[0].innerText;
let productNames = document.getElementsByClassName("product-name");
cartDetails.forEach((item, i) => {
if (itemName == item.name) {
cartDetails.splice(i, 1);
for (let name of productNames) {
if (itemName == name.innerText) {
let found = name.parentElement.parentElement;
SwitchBtns(found);
}
}
}
});
RenderCart();
CartIsEmpty();
CartItemsTotal();
}

function clearCart() {
ToggleBackBtns();
cartDetails.length = 0;
RenderCart();
CartIsEmpty();
CartItemsTotal();
}

function qtyChange(event, handler) {
let btnClicked = event.parentElement.parentElement;
let isPresent = btnClicked.classList.contains("btn-add");
let itemName = isPresent ?
btnClicked.parentElement.parentElement.getElementsByClassName(
"product-name")[
0].innerText :
btnClicked.parentElement.getElementsByClassName("name")[0].innerText;
let productNames = document.getElementsByClassName("product-name");
for (let name of productNames) {
if (itemName == name.innerText) {
let productBtn = name.parentElement.parentElement.getElementsByClassName(
"qty-change")[
0];
cartDetails.forEach((item, i) => {
if (itemName == item.name) {
if (handler == "add" && item.qty < 10) {
item.qty += 1;
btnClicked.innerHTML = QtyBtn(item.qty);
productBtn.innerHTML = QtyBtn(item.qty);
} else if (handler == "sub") {
item.qty -= 1;
btnClicked.innerHTML = QtyBtn(item.qty);
productBtn.innerHTML = QtyBtn(item.qty);
if (item.qty < 1) {
cartDetails.splice(i, 1);
productBtn.innerHTML = AddBtn();
productBtn.classList.toggle("qty-change");
}
} else {
document.getElementsByClassName("purchase-cover")[0].style.display =
"block";
document.getElementsByClassName("stock-limit")[0].style.display =
"flex";
sideNav(0);
}
}
});
}
}
RenderCart();
CartIsEmpty();
CartItemsTotal();
}

function limitPurchase(event) {
document.getElementsByClassName("purchase-cover")[0].style.display = "none";
event.parentElement.style.display = "none";
sideNav(1);
}

function sideNav(handler) {
let sideNav = document.getElementsByClassName("side-nav")[0];
let cover = document.getElementsByClassName("cover")[0];
sideNav.style.right = handler ? "0" : "-100%";
cover.style.display = handler ? "block" : "none";
CartIsEmpty();
}

function buy(handler) {
if (cartDetails.length == 0) return;
sideNav(!handler);
document.getElementsByClassName("purchase-cover")[0].style.display = handler ?
"block" :
"none";
document.getElementsByClassName("order-now")[0].innerHTML = handler ?
Purchase() :
"";
}

function order() {
let invoice = document.getElementsByClassName("invoice")[0];
invoice.style.height = "500px";
invoice.style.width = "400px";
invoice.innerHTML = OrderConfirm();
ToggleBackBtns();
Stocks();
clearCart();
}

function okay(event) {
let container = document.getElementsByClassName("invoice")[0];
if (event.target.innerText == "continue") {
container.style.display = "none";
document.getElementsByClassName("purchase-cover")[0].style.display = "none";
} else {
event.target.innerText = "continue";
event.target.parentElement.getElementsByClassName(
"order-details")[
0].innerHTML = `<em class='thanks'>Thanks for shopping with us</em>`;
container.style.height = "180px";
}
}
//}

// button components for better Ux {
function AddBtn() {
return `
<div>
<button onclick='addItem(this)' class='add-btn'>Add <i class='fas fa-chevron-right'></i></button>
</div>`;
}

function QtyBtn(qty = 1) {
if (qty == 0) return AddBtn();
return `
<div>
<button class='btn-qty' onclick="qtyChange(this,'sub')"><i class='fas fa-chevron-left'></i></button>
<p class='qty'>${qty}</p>
<button class='btn-qty' onclick="qtyChange(this,'add')"><i class='fas fa-chevron-right'></i></button>
</div>`;
}
//}

//Ui components {
function Product(product = {}) {
let { name, price, imageUrl, heading, des } = product;
return `
<div class='card'>
<div class='top-bar'>
<i class='fab fa-apple'></i>
<em class="stocks">In Stock</em>
</div>
<div class='img-container'>
<img class='product-img' src='${imageUrl}' alt='' />
<div class='out-of-stock-cover'><span>Out Of Stock</span></div>
</div>
<div class='details'>
<div class='name-fav'>
<strong class='product-name'>${name}</strong>
<button onclick='this.classList.toggle("fav")' class='heart'><i class='fas fa-heart'></i></button>
</div>
<div class='wrapper'>
<h5>${heading}</h5>
<p>${des}</p>
</div>
<div class='purchase'>
<p class='product-price'>₹ ${price}</p>
<span class='btn-add'>${AddBtn()}</span>
</div>
</div>
</div>`;
}

function CartItems(cartItem = {}) {
let { name, price, imgSrc, qty } = cartItem;
return `
<div class='cart-item'>
<div class='cart-img'>
<img src='${imgSrc}' alt='' />
</div>
<strong class='name'>${name}</strong>
<span class='qty-change'>${QtyBtn(qty)}</span>
<p class='price'>₹ ${price * qty}</p>
<button onclick='removeItem(this)'><i class='fas fa-trash'></i></button>
</div>`;
}

function Banner() {
return `
<div class='banner'>
<ul class="box-area">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class='main-cart'>${DisplayProducts()}</div>

<div class='nav'>
<button onclick='sideNav(1)'><i class='fas fa-shopping-cart' style='font-size:2rem;'></i></button>
<span class= 'total-qty'>0</span>
</div>
<div onclick='sideNav(0)' class='cover'></div>
<div class='cover purchase-cover'></div>
<div class='cart'>${CartSideNav()}</div>
<div class='stock-limit'>
<em>You Can Only Buy 10 Items For Each Product</em>
<button class='btn-ok' onclick='limitPurchase(this)'>Okay</button>
</div>
<div class='order-now'></div>
</div>`;
}

function CartSideNav() {
return `
<div class='side-nav'>
<button onclick='sideNav(0)'><i class='fas fa-times'></i></button>
<h2>Cart</h2>
<div class='cart-items'></div>
<div class='final'>
<strong>Total: ₹ <span class='total'>0</span>.00/-</strong>
<div class='action'>
<button onclick='buy(1)' class='btn buy'>Purchase <i class='fas fa-credit-card' style='color:x6665dd;'></i></button>
<button onclick='clearCart()' class='btn clear'>Clear Cart <i class='fas fa-trash' style='color:xbb342f;'></i></button>
</div>
</div>
</div>`;
}

function Purchase() {
let toPay = document.getElementsByClassName("total")[0].innerText;
let itemNames = cartDetails.map(item => {
return `<span>${item.qty} x ${item.name}</span>`;
});
let itemPrices = cartDetails.map(item => {
return `<span>₹ ${item.price * item.qty}</span>`;
});
return `
<div class='invoice'>
<div class='shipping-items'>
<div class='item-names'>${itemNames.join("")}</div>
<div class='items-price'>${itemPrices.join("+")}</div>
</div>
<hr>
<div class='payment'>
<em>payment</em>
<div>
<p>total amount to be paid:</p><span class='pay'>₹ ${toPay}</span>
</div>
</div>
<div class='order'>
<button onclick='order()' class='btn-order btn'>Order Now</button>
<button onclick='buy(0)' class='btn-cancel btn'>Cancel</button>
</div>
</div>`;
}

function OrderConfirm() {
let orderId = Math.round(Math.random() * 1000);
let totalCost = document.getElementsByClassName("total")[0].innerText;
return `
<div>
<div class='order-details'>
<em>your order has been placed</em>
<p>Your order-id is : <span>${orderId}</span></p>
<p>your order will be delivered to you in 3-5 working days</p>
<p>you can pay <span>₹ ${totalCost}</span> by card or any online transaction method after the products have been dilivered to you</p>
</div>
<button onclick='okay(event)' class='btn-ok'>okay</button>
</div>`;
}
//}

//updates Ui components {
function DisplayProducts() {
let products = productDetails.map(product => {
return Product(product);
});
return products.join("");
}

function DisplayCartItems() {
let cartItems = cartDetails.map(cartItem => {
return CartItems(cartItem);
});
return cartItems.join("");
}

function RenderCart() {
document.getElementsByClassName(
"cart-items")[
0].innerHTML = DisplayCartItems();
}

function SwitchBtns(found) {
let element = found.getElementsByClassName("btn-add")[0];
element.classList.toggle("qty-change");
let hasClass = element.classList.contains("qty-change");
found.getElementsByClassName("btn-add")[0].innerHTML = hasClass ?
QtyBtn() :
AddBtn();
}

function ToggleBackBtns() {
let btns = document.getElementsByClassName("btn-add");
for (let btn of btns) {
if (btn.classList.contains("qty-change")) {
btn.classList.toggle("qty-change");
}
btn.innerHTML = AddBtn();
}
}

function CartIsEmpty() {
let emptyCart = `<span class='empty-cart'>Looks Like You Haven't Added Any Product In The Cart</span>`;
if (cartDetails.length == 0) {
document.getElementsByClassName("cart-items")[0].innerHTML = emptyCart;
}
}

function CartItemsTotal() {
let totalPrice = cartDetails.reduce((totalCost, item) => {
return totalCost + item.price * item.qty;
}, 0);
let totalQty = cartDetails.reduce((total, item) => {
return total + item.qty;
}, 0);
document.getElementsByClassName("total")[0].innerText = totalPrice;
document.getElementsByClassName("total-qty")[0].innerText = totalQty;
}

function Stocks() {
cartDetails.forEach(item => {
productDetails.forEach(product => {
if (item.name == product.name && product.qty >= 0) {
product.qty -= item.qty;
if (product.qty < 0) {
product.qty += item.qty;
document.getElementsByClassName("invoice")[0].style.height = "180px";
document.getElementsByClassName(
"order-details")[
0].innerHTML = `<em class='thanks'>Stocks Limit Exceeded</em>`;
} else if (product.qty == 0) {
OutOfStock(product, 1);
} else if (product.qty <= 5) {
OutOfStock(product, 0);
}
}
});
});
}

function OutOfStock(product, handler) {
let products = document.getElementsByClassName("card");
for (let items of products) {
let stocks = items.getElementsByClassName("stocks")[0];
let name = items.getElementsByClassName("product-name")[0].innerText;
if (product.name == name) {
if (handler) {
items.getElementsByClassName("out-of-stock-cover")[0].style.display =
"flex";
stocks.style.display = "none";
} else {
stocks.innerText = "Only Few Left";
stocks.style.color = "orange";
}
}
}
}

function App() {
return `
<div>
${Banner()}
</div>`;
}
//}

// injects the rendered component's html
document.getElementById("app").innerHTML = App();
//# sourceURL=pen.js
</script>

</body></html>

you have posted a lot of code, what question(s) do you have about it?

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).