I am having this issue that I have been trying to debugg for the last 24 hr. I made this shopping cart with HTML and css and JS. I first made the side list witch mounted correctly; its only css and html, but then when I made the item menu by running a function with a return statement, and template-litherals to embed the image with its border, it does not show up on the browser. I alredy debugged all my code from all the ovius mistakes that I made and the console is not reporting any errors, but for some reason I still cant load the image on my menu. I just dont know where my problem is!
Here lies my progress, as you can see its a pretty large “rabbit hole” it starts with the heading and then the item menu and finally the product menu. I have made the connection with the CSS which is “stats.css” and added the javaScript within the html with <script></script> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
perfume
</title>
<link href="stats.css" rel="stylesheet">
</head>
<body>
<div class="header">
<p class="logo">
Amazon, Spend less smile more
</p>
<div class="cart">
<i class="bi bi-cart4">
</i>
<p id="count">
0
</p>
</div>
</div>
<div class="grid">
<div id="root">
</div>
<div class="sidebar">
<div class="head">
<p>
My Stuff
</p>
</div>
<div id="cartItem">
Your cart is Empthy
</div>
<div class="foot">
<h3>
Total
</h3>
<h2 id="total">
$ 0.00
</h2>
</div>
</div>
</div>
<script type="text/javascript">
const product = [
{
id: 0,
image: "product/perfume.jpeg",
title: "Victoria Secret Perfume",
price: 50,
},
];
const categories = [
...new Set(
product.map((item) => {
return item;
}),
),
];
let i = 0;
///HERE is the return statement!
document.getElementById("root").innerHTMl = categories
.map((item) => {
let { image, title, price } = item;
return (
`<div class= 'box'>
<div class= 'img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>$ ${price}.00 </h2>` +
"<button onclick='addtocart(" +
i++ +
")'>Add to cart</button>" +
`</div>
</div>`
);
})
.join("");
</script>
</body>
</html>
Here lies my CSS I targeted several parts of the html.
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header {
height: 4em;
width: 70%;
background: #3a3b3c;
border-radius: 1em;
margin: 30px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2em;
}
.header .logo {
font-size: 4em;
font-weight: bold;
color: #fff;
}
.cart {
display: flex;
background: #fff;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 3px;
width: 80px;
}
.cart p {
height: 22px;
width: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background-color: #3a3b3c;
color: #fff;
}
.grid {
display: flex;
width: 70%;
margin-bottom: 30px;
}
#root {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.sidebar {
width: 40%;
border-radius: 5px;
background: #808080;
margin-left: 5em;
padding: 1em;
text-align: center;
}
.head {
background-color: #3a3b3c;
border-radius: 1em;
height: 2em;
padding: 5px;
margin-bottom: 1em;
color: #fff;
display: flex;
align-items: center;
}
.foot {
display: flex;
justify-content: space-between;
margin: 20px 0;
padding: 10px 0;
border-top: 1px solid #212329;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid #212329;
border-radius: 5px;
padding: 15px;
}
.img-box {
width: 100%;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.images {
max-width: ;
max-height: ;
object-fit: cover;
object-position: center;
}
.bottom {
margin-top: 20px;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 110px;
}
h2 {
font-size: 20px;
color: red;
}
button {
width: 100%;
border: none;
border-radius: 5px;
position: relative;
padding: 7px 25px;
color: #fff;
}
button:hover {
background-color: #212329;
}
