JSFiddle - React, Tailwind, and code Playground

by wimp9487

HTML

<button class="loading" onClick="loading()">Load Products</button>

<hr>

<ul class="list"></ul>
<div class="container">
  <div class="pd-modal">
    <div class="pd-photo">
      <img class="product-img" src="" alt="">
    </div>
    <div class="pd-content">
      <h2 class="title"></h2>
      <span class="category"></span>
      <p class="description"></p>
      <span class="price"></span>
      <button class="close-btn"">關閉畫面</button>
    </div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
  list-style: none;
}
img {
  width: 100px;
  height: 100px;
}
.product-li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
span {
  display: flex;
  text-align: center;
}
button {
  width: 25vw;
  height: 25px;
  border-radius: 10px;
  background-color: rgb(75, 175, 175);
  transition: all 0.3s; 
}
button:hover {
  background-color: rgb(175, 175, 75);
}
.container  {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  .pd-modal {
    display: flex;
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(69, 69, 69, 0.3);
    .pd-photo {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        display: block;
        width: 300px;
        height: 300px;
        object-fit: contain;
      }
    }
    .pd-content {
      display: flex;
      flex-direction: column;
      width: 800px;
      margin-left: 20px;
      .title {
        text-transform: uppercase;
        font-size: 20px;
      }
      .category {
        text-transform: uppercase;
        color: blue;
      }
      .description {
        color: blue;
        font-size: 14px;
        margin: 15px 0;
      }
      .price {
        color: red;
        font-weight: 700;
        font-size: 20px;
      }
    }
   
  }
}

JavaScript

const loading = () => {
  fetch('https://fakestoreapi.com/products')
            .then(res=>res.json())
            .then(json=>{
              for (const product of json) {
                const list = document.querySelector('.list');
                const li = document.createElement('li');
                const span = document.createElement('span');
                const div = document.createElement('div');
                const img = document.createElement('img');
                const btn = document.createElement('button');
                const btn2 = document.createElement('button');
                const container = document.querySelector('.container');
                const title = document.querySelector('.title');
                const category = document.querySelector('.category');
                const description = document.querySelector('.description');
        const price = document.querySelector('.price');
                const productImg = document.querySelector('.product-img');
                const closeBtn = document.querySelector('.close-btn');
                list.append(li);
                li.append(div);
                li.append(span);
                li.append(btn);
                li.append(btn2);
                div.append(img);
                li.className = "product-li";
                li.dataset.image = product.image;
                li.dataset.category = product.category;
                li.dataset.title = product.title;
                 li.dataset.description = product.description;

        li.dataset.price = product.price;
                span.textContent = product.title;
                img.src = product.image;
                btn.textContent = 'Details';
                btn2.textContent = 'Delete';
               
                btn.onclick = () => {
                  let productLi = event.target.closest('li');
                  container.style.display = 'block';
                  title.textContent = productLi.dataset.title;
...