JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div class="wrap">

        <button class="btn btn-primary" id="loadBtn">Load Products</button>

        <ul id="productList" class="collection"></ul>
        <hr>
    </div>

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }    
    *,
    *::after,
    *::before {
        padding: 0px;
        margin: 0px;
        font-family: inherit;
        box-sizing: border-box;
        line-height: 1.6;
    }
    html,
    body {
        height: 100vh;
    }

    body {
        font-family: sans-serif;
        font-size: 16px;
        display: flex;
        /* flex-direction: column;
        align-items: center;
        justify-content: center; */
        background-color: aliceblue;
    }
    .wrap{
        margin: 0 auto;
    }
    .btn,button{
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        border-radius: 0.25rem;
        background-color: var(--gray);
        color: #475569;
        cursor: pointer;
    }
    .btn-primary{
        background-color: var(--primary);
        color: var(--white);
    }
    .btn-primary:hover{
        background-color: #3730a3;
    }
    .btn-outline-primary{
        border-color: var(--primary);
        color: var(--primary);
        background-color: transparent;
    }
    ul,li{
        list-style: none;
    }
    .collection{
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .product-card{
        grid-column: span 1;
        /* grid-row: span 2; */
    }
    .product-item__image{
        padding: 2rem;
        max-width: 100%;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 0.875rem;
    }
    .product-item__caption{
        display: flex;
        flex-direction: column;   
    }
    .product-item__title{
        margin: 0.5rem 0;
        display:...

JavaScript

// 分割功能：創建商品元件
        function createProductCard(product){
            let productList = document.querySelector('#productList');
            let li = document.createElement('li');
            let item = document.createElement('div');
            let image = document.createElement('img');
            let caption = document.createElement('div');
            let title = document.createElement('h3');
            let price = document.createElement('span');
            let btnBox = document.createElement('div');
            let detailBtn = document.createElement('button'); 
            let deleteBtn = document.createElement('button');

            li.classList.add('product-card');
            item.classList.add('product-item');
            image.classList.add('product-item__image');
            caption.classList.add('product-item__caption');
            title.classList.add('product-item__title');
            price.classList.add('product-item__price');
            btnBox.classList.add('product-item__btnbox');
            detailBtn.classList.add('btn', 'btn-outline-primary');
            deleteBtn.classList.add('btn', 'btn-outline-danger');

            li.append(item);
            item.append(image);
            item.append(caption);
            caption.append(title);
            caption.append(price);
            caption.append(btnBox);
            btnBox.append(detailBtn);
            btnBox.append(deleteBtn);

            //串接資料
            image.src = product.image;
            title.textContent = product.title;
            price.textContent = '$ ' + product.price;
            detailBtn.textContent = 'detail';
            deleteBtn.textContent = '刪除';

            detailBtn.onclick = () => {
                alert(product.id);
                alert(product.category);
                alert(product.description);
            }
            //刪除
            deleteBtn.onclick = () =>{
                let e = event.target;
               ...