Wenn ich auf die Schaltfläche Karren klicke, gleitet es nicht wie eine Schublade, wie ich es erwartet hatte ⇐ CSS

[Anonymous]

Ich versuche eine E -Commerce -Website zu erstellen. Wenn ich das CART -Symbol in der oberen Leiste drücke, sollte das in der Funktion getData erstellte Schubladenelement von rechts nach links rutschen. Der Div sollte mit Z-Index von rechts nach links rutschen. Ich habe den Ereignishörer hinzugefügt, um den Klick auf den Wagen zu klicken, aber wenn ich klicke, passiert nichts mit der Schublade.

Code: Select all

let ismenuopen = true;
const ul = document.querySelector('ul');
const li = document.querySelectorAll('ul li');
const menu = document.querySelector('i');
let cart = document.querySelector('.fa-shopping-cart');
let number = document.querySelector('.number');
let btn = document.querySelector('.addToCart');
let num = 0;

menu.addEventListener('click', () => {
li.forEach((element) => {
if (ismenuopen) {
ul.style.display = 'flex';
element.style.display = 'list-item'
} else {
ul.style.display = 'none';
element.style.display = 'none';
}
})
ismenuopen = !ismenuopen;
})

async function getData() {
let response = await fetch(`https://fakestoreapi.com/products`);
let result = await response.json();
console.log(result);
let result1 = result.slice(0, 18);
result1.forEach((val) => {
let container = document.querySelector('.container1');
let div = document.createElement('div');
let title = document.createElement('span');
title.className = 'title';
title.textContent = val.title.split(' ').slice(0, 3).join(' ');
div.className = 'product';
container.appendChild(div);
div.appendChild(title);
let img = document.createElement('img');
img.src = val.image;
div.appendChild(img);
let price = document.createElement('p');
price.textContent = `Price: ${val.price}`;
price.className = 'price';
div.appendChild(price);
let btn = document.createElement('button');
btn.className = 'addToCart';
btn.textContent = 'Add to cart ';
div.appendChild(btn);
btn.addEventListener('click', () => {
number.textContent = ++num;
});
})
let drawer = document.createElement('div');
drawer.className = 'drawer';
document.body.appendChild(drawer);
let drawerIsOpen = false;
cart.addEventListener('click', () => {
if (!drawerIsOpen) {
drawer.style.transform = 'translateX(0%)';
drawer.style.opacity = '1';
} else {
drawer.style.opacity = '0';
drawer.style.transform = 'translateX(-100%)';
}
drawerIsOpen = !drawerIsOpen;
})
console.log(result1);
}
getData();< /code>
* {
margin: 0px;
padding: 0px;
}

nav ul {
display: flex;
gap: 50px;
justify-content: center;
list-style-type: none;
font-size: 20px;
color: white;
background-image: linear-gradient(to right, black, grey);
}

nav .fa-bars {
display: none;
}

nav .fa-shopping-cart {
margin-top: 2px;
}

.number {
padding-left: 3px;
}

.container {
background-image: url(images/desktop\ background\ image.png);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}

.product {
height: 180px;
width: 147px;
border: solid 4px gainsboro;
padding: 30px;
border-radius: 6px;
margin-top: 4px;
margin-left: 4px;
}

.product img {
height: 100px;
width: 100px;
padding-top: 13px;
padding-left: 10px;
}

.price {
padding-left: 24px;
padding-top: 10px;
}

.container1 {
display: flex;
flex-wrap: wrap;
padding-top: 4%;
padding-left: 8%;
background: linear-gradient(to right, white, grey);
}

.addToCart {
margin-top: 12px;
margin-left: 24px;
border-radius: 6px;
border-style: none;
width: 73px;
height: 16px;
}

.drawer {
height: 100vh;
width: 250px;
background-color: gainsboro;
transform: translateX(100%);
/* visibility: hidden;   */
opacity: 0;
transition: transform 2s ease-in-out;
position: fixed;
}

@media only screen and (max-width: 600px) {
body {
overflow-x: hidden;
}

nav ul {
display: none;
gap: 15px;
flex-direction: column;
margin-top: 10px;
}

nav {
background-image: linear-gradient(to right, black, grey);
overflow-x: hidden;
}

nav .fa {
display: inline;
color: azure;
}

.container {
background-image: url(images/background\ image\ for\ mobile.jpg);
height: 28vh;
}

.container1 {
padding-left: 20%;
}
}< /code>






Document
[*]






[i][/i]
[list]
Home
[*]Shop
[*]Product
[*]Details
[*]Cart
[*]Checkout
[*]Contact
[i][/i]
[/list]