JSFiddle - React, Tailwind, and code Playground

by evon0306

HTML

<script src="https://kit.fontawesome.com/41e2a8dba7.js" crossorigin="anonymous"></script>
<h1>AJAX網路連線練習</h1>
<button id="my-btn" onclick="getData()">Load Products</button>

<hr>

<ul class="ul"></ul>

<div class="modal">
   <div class="main">
      <i onclick="x()" class="fa-regular fa-xmark"></i>
      <div class="img">
         <img src="" alt="">
      </div>
      <ul class="data">
         <li class="name"></li>
         <li class="type"></li>
         <li class="depiction"></li>
         <li class="price"></li>
      </ul>
   </div>
</div>

SCSS

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
}
.ul{
   display: flex;
   flex-wrap: wrap;
   li{
      margin: 1rem;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      border: 1px paleturquoise solid;
      border-radius: 5px;
      height: 300px;
      width: 20%;
      min-width: 270px;
      img{
         width: 120px;
         height: 120px;
         object-fit: contain;
         margin: 0 auto;
      }
      span{
         margin: 1rem auto;
         text-align: center;
         font-size: 15px;
         padding: 3px;
         display : inline-block;
         overflow : hidden;
         max-width: 230px;
         height: 70px;
      }
      button{
         background-color: aqua;
         font-size: 16px;
         padding: 3px;
         margin: 0.2rem;
         border-radius: 4px;
         border-style: none;
         bottom: 1px;
         right: 60px;
         transition: all .2s linear;
         cursor: pointer;
         &:hover{
            color: #d81616;
         }
      }
   }
}

.modal{
   display: none;
   background-color: #32323238;
   height: 100vh;
   width: 100vw;
   position: fixed;
   top: 0;
   .main{
      width: 80%;
      min-height: 400px;
      min-width: 700px;
      margin: 5rem auto;
      padding: 1rem;
      background-color: rgb(253, 253, 253);
      border-radius: 10px;
      position: relative;
      display: flex;
      i{
         background-color:rgba(0, 255, 255, 0.895);
         border: 3px solid rgba(0, 255, 255, 0.162);
         padding: 10px;
         text-align: center;
         width: 50px;
         border-radius: 50%;
         font-size: 25px;
         position:absolute;
         top: -20px;
         right: -20px;
      }
      .img{
         display: flex;
         justify-content: center;
         align-items: center;
         img{
            max-width: 400px; max-height: 300px;
         }
      }
      ul{
         display: flex;
        ...

JavaScript

function getData(){
  //利用fetch進行連線並取得資料
  fetch('https://fakestoreapi.com/products')
  .then(res=>res.json())
  .then(json=>{
    let ul = document.querySelector('.ul');
      for(let i = 0; i<json.length; i++){
        // console.log(json[i]);
        let list = document.createElement('li');
        let img = document.createElement('img');
        let span = document.createElement('span');
        let btn = document.createElement('button');
        let deleBtn = document.createElement('button');

        // 使用 dataset 將資料存儲在元素上
        list.dataset.category = json[i].category;
        list.dataset.description = json[i].description;
        list.dataset.id = json[i].id;
        list.dataset.image = json[i].image;
        list.dataset.price = json[i].price;
        list.dataset.rating = json[i].rating;
        list.dataset.title = json[i].title;

        img.src = json[i].image;
        span.textContent = json[i].title;
        btn.textContent = "Details";
        btn.onclick = () => {
          let target = event.target;
          let list = target.closest('li');

          let modal = document.querySelector('.modal');
          modal.style.display="flex";
          // console.log(list);
          modal.querySelector('img').src = list.dataset.image;
          modal.querySelector('.name').textContent = list.dataset.title;
          modal.querySelector('.type').textContent = list.dataset.category;
          modal.querySelector('.depiction').textContent = list.dataset.description
          modal.querySelector('.price').textContent = "$ " + list.dataset.price;
          
        }
        deleBtn.textContent = "Delete";
        deleBtn.onclick = () =>{
          let target = event.target;
          // 使用 dataset 取得資料
          let id = list.dataset.id;
          fetch('https://fakestoreapi.com/products/' + id,{
            method:"DELETE"
        })
            .then(res=>res.json())
            .then(json=>{
              target.closest("li").remove();
           ...