1. loyiha ishining tаrkibi

JavaScript kodlari

let mobileMenuIconEl = document.querySelector(".mobile-


menu-icon");
let mobileMenuBoxEl = document.querySelector(".mobile- menu-box");
let mobileBackEl = document.querySelector(".mobile-menu- back");


// mobile menu icon click events
mobileMenuIconEl.addEventListener("click", function () { mobileMenuBoxEl.style.left = "0"; mobileBackEl.style.display = "block";
});
mobileBackEl.addEventListener("click", function () { mobileMenuBoxEl.style.left = "-80%";

mobileBackEl.style.display = "none";

});

// hero img change events
let heroSliteEl = document.querySelectorAll(".split");
let heroimg = document.querySelector(".hero-img");


for (let i = 0; i < heroSliteEl.length; i++) { heroSliteEl[0].addEventListener("click", function ()

{
});

heroimg.setAttribute("src", "image/hero-png.png");

heroSliteEl[1].addEventListener("click", function ()

{
heroimg.setAttribute("src", "image/phone-

img.png");

});

heroSliteEl[2].addEventListener("click", function ()

{
heroimg.setAttribute("src", "image/shopping-

bag.png");

});

}

let ProductImgLinkArrayEl = [ "nike-shoes-2.png",
"air-monarch-iv-mens-training-shoes-lPtRrS.png", "zoomx-vaporfly-next-2-mens-road-racing-shoes-
glWqfm.png",

"nike-shoes-2.png",

"superrep-go-2-mens-training-shoes-JdlPlj.png",


"superrep-go-2-mens-training-shoes-JdlPlj.png", "therma-fit-womens-pullover-training-hoodie-
KcgzGB.png",
"dri-fit-adv-aeroswift-nyc-womens-running-singlet-

z0qMbD.png",

"pro-dri-fit-adv-mens-long-sleeve-top-vR0lxR.png", "yoga-luxe-womens-infinalon-crop-top-5XGffB.png", "sportswear-essential-collection-womens-oversized-
fleece-hoodie-tZK0cN.png",
"therma-fit-womens-pullover-training-hoodie- KcgzGB.png",
];


let purchasedProductPriceArrayEl = [ "45 $",


"47 $",

"50 $",

"40 $",
"38 $",
"43 $",
"41 $",
"120 $",

"320 $",

"200 $",

"400 $",

"399 $",
];


let cardProductsLinkEl = document.querySelectorAll(".card-products-link"); let purchasedProductContainerEl = document.querySelector(
"#purchased-product-container"

);
let purchasedProductImgEl =

document.querySelector(".purchased-product-img"); let buyButtonNowEl = document.querySelectorAll(".buy- now-button");

let purchasedProductPriceTitleEl =

document.querySelector( ".purchased-product-price"

);
for (let i = 0; i < cardProductsLinkEl.length; i++) { cardProductsLinkEl[i].addEventListener("click",
function () {

purchasedProductContainerEl.style.display = "block";

purchasedProductImgEl.setAttribute( "src",
`image/${ProductImgLinkArrayEl[i]}`

);

purchasedProductPriceTitleEl.textContent =
`${purchasedProductPriceArrayEl[i]}`;
});

}
for (let i = 0; i < buyButtonNowEl.length; i++) { buyButtonNowEl[i].addEventListener("click", function

() {

purchasedProductContainerEl.style.display = "block";

purchasedProductImgEl.setAttribute( "src",