Using different images foreach object in one class

August 22, 2022

I am trying to make a catalog for online shop like ebay. How to make each box with different image and title. Am I supposed to use JS here and if so how to do it?

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

html {
  background-color: #E7E7E7;
  font-family: system-ui;
  color: #000;
}

.container {
  display: grid;
  grid-template-columns: 20rem 1fr;
  margin: 2.6rem;
}

.box {
  border-radius: 3%;
  background-color: #fff;
  box-shadow: 10px 10px 20px#bababa;
  width: 15rem;
  height: 17.5rem;
}

.image {
  position: relative;
  top: 10px;
  background-color: #fff;
  background-image: url(Reference/Shoes/Air\ Jordan\ 1\ Retro\ High\ OG\ Shoes.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px;
  margin: 0 10px;
}

.title {
  margin: 20px 20px 0 20px;
}

.creator {
  color: #525252;
  font-size: 9.5pt;
  margin: 0 20px 20px 20px;
}

<div class="container">
  <div class="box">
    <div class="image"></div>
    <div class="title">
      <p>Nike Air Max Jordan 1</p>
    </div>
    <div class="creator">
      <p>Martingrgv</p>
    </div>
    <div class="price"></div>
  </div>
  <div class="box">
    <div class="image"></div>
    <div class="title">
      <p>Nike Air Max Jordan 1</p>
    </div>
    <div class="creator">
      <p>Martingrgv</p>
    </div>
    <div class="price"></div>
  </div>
</div>

Result:

I am new to building a website so you might see beginner mistakes.
If you have any suggestions to improve the code I am open.

>Solution :

Do you mean this – you can ajax the object from your server:

const items = [ 
{ image: "nike1.jpg", title:"Nike Air Max Jordan 1",price:150, creator:"Martingrgv"},
{ image: "nike2.jpg", title:"Nike Air Max Jordan 2",price:160, creator:"Martingrgv"}
]
 
 document.getElementById("container").innerHTML = items.map(item =>
   `<div class="box">
    <div class="image"><img src="${item.image}" /></div>
    <div class="title">
      <p>${item.title}</p>
    </div>
    <div class="creator">
      <p>${item.creator}</p>
    </div>
    <div class="price">$${item.price}</div>
  </div>`)
  .join("");

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

html {
  background-color: #E7E7E7;
  font-family: system-ui;
  color: #000;
}

#container {
  display: grid;
  grid-template-columns: 20rem 1fr;
  margin: 2.6rem;
}

.box {
  border-radius: 3%;
  background-color: #fff;
  box-shadow: 10px 10px 20px#bababa;
  width: 15rem;
  height: 17.5rem;
}

.image {
  position: relative;
  top: 10px;
  background-color: #fff;
  padding: 100px;
  margin: 0 10px;
}

.title {
  margin: 20px 20px 0 20px;
}

.creator {
  color: #525252;
  font-size: 9.5pt;
  margin: 0 20px 20px 20px;
}