JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<body>
    <div class="modal">
      <div class="container">
        <button onclick="closeModal()">X</button>
        <h2 class="title"></h2>
        <p class="catogery"></p>
        <p class="description"></p>
        <img class="image" src="" alt="產品圖片" />
        <p class="price"></p>
      </div>
    </div>

    <button id="loadBtn">Load Products</button>

    <hr />

    <ul class="product-lists"></ul>
  </body>

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
  width: 100%;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100svh;
  background-color: rgba(56, 203, 203, 0.5);
  transform: scale(0);
  transition: transform 0.2s;
  z-index: 1;
}

.modal > .container {
  width: 80%;
  height: 80%;
  background-color: #fff;
  margin: 7% 10%;
  border-radius: 10%;
}

.modal > .container > button {
  position: absolute;
  /* 去除背景色和邊框 */
  background: white;
  border: 0.1rem solid black;
  border-radius: 30%;
  top: 0;
  right: 0;
  /* 重置填充和邊距 */
  padding: 0.5rem;
  /* transform: translateX(50%);
  transform: translateY(50%); */
  /* margin: 0.5rem; */
  /* 重置字體樣式 */
  /* font: inherit; */
  /* 重置顏色 */
  /* 重置鏈接外觀 */
  /* text-decoration: none; */
  /* 設置游標為預設 */
  cursor: pointer;
}
.modal > .container > button:hover {
  transform: scale(1.1);
}

.container {
  position: absolute;
  padding: 5rem;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}

.container > img {
  width: 60%;
  height: 20svh;
  object-fit: cover;
}

.show {
  transform: scale(1);
}

ul {
  margin: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
ul > li {
  font-size: 1rem;
  list-style: none;
  text-align: center;
  width: 13rem;
}

ul > li > img {
  width: 100%;
}

JavaScript

const loadBtn = document.querySelector("#loadBtn");
const modal = document.querySelector(".modal");

loadBtn.onclick = () => {
  fetch("https://api.escuelajs.co/api/v1/products")
    .then((res) => res.json())
    .then((arr) => {
      const newArr = arr.slice(0, 20);
      return newArr;
    })
    .then((json) => {
      loader(json);
      console.log(json);
    })
    .catch((error) => alert(error + ":抱歉，請稍後再試"));
};

function loader(products) {
  const ul = document.querySelector("ul");
  products.forEach(function (product) {
    const li = document.createElement("li");
    const p = document.createElement("p");
    const img = document.createElement("img");
    const detailBtn = document.createElement("button");
    const delBtn = document.createElement("button");
    p.textContent = product.title;
    img.src = product.images[0];
    detailBtn.textContent = "Detail";
    detailBtn.onclick = () => promptModal(li);
    delBtn.textContent = "Delete";
    delBtn.onclick = () => {
      fetch(`https://api.escuelajs.co/api/v1/products/${product.id}`, {
        method: "DELETE",
      })
        .then(() => {
          li.remove();
          console.log("id " + product.id + " deleted");
        })
        .catch(() => alert("抱歉，請稍後重新嘗試刪除。"));
    };
    li.dataset.title = product.title;
    li.dataset.category = product.category.name;
    li.dataset.description = product.description;
    li.dataset.image = product.images[0];
    li.dataset.price = product.price;
    ul.appendChild(li);
    li.append(p, img, detailBtn, delBtn);
  });
}

function promptModal(productData) {
  const container = modal.children[0];
  container.children[1].textContent = productData.dataset.title;
  container.children[2].textContent = productData.dataset.category;
  container.children[3].textContent = productData.dataset.description;
  container.children[4].src = productData.dataset.image;
  container.children[5].textContent = `Price: $${productData.dataset.price}`;
 ...