2024-10-06 課後作業-JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

發表於 更新於 分類於 閱讀次數：
課後作業-JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

課後作業-JavaScript 系列五：第7課 ── 學會 AJAX 與 data attribute 的結合

05_js_data-attribute.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列五：第6課 ── 學會 AJAX 與各種 HTTP 請求方法</title>
    <link rel="stylesheet" href="./05_js_data-attribute.css">
</head>
<body>
    <div class="container">
        <button id="load_products_btn" class="btn">Load Products</button>
        <div class="msg">抱歉，請稍後重新嘗試</div>
    </div>

    <hr>

    <div class="container">
        <ul id="products_lists" class="products_lists"></ul>
    </div>

    <div class="modal_wrap">
        <div class="detail-modal" id="detail-modal">
            <div class="image_div">
                <img src="" alt="" class="image">
            </div>
            <div class="product_content">
                <h2 class="title"></h2>
                <span class="category"></span>
                <p class="description"></p>
                <span class="price"></span>
            </div>

            <button id="btn-close" class="btn-close">✕</button>
        </div>
    </div>
    
    <script src="./05_js_data-attribute.js"></script>
</body>
</html>

05_js_data-attribute.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
const load_products_btn = document.querySelector('#load_products_btn');

// 延遲5秒鐘
const set_display_timeout = (in_elem) => {
    in_elem.style.display = "block";
    setTimeout(() => {
        in_elem.style.display = "none";
    }, 5000);
};

const do_delete = (product_id, in_elem, msg) => {
    fetch('https://fakestoreapi.com/products/' + product_id, {
        method: "DELETE"
    })
    .then(res => res.json())
    .then(json => {
        if (json === null) {
            msg.style.display = 'block';
            set_display_timeout(msg);
        } else {
            in_elem.remove();
        }
    })
    .catch(error => {
        msg.style.display = 'block';
        set_display_timeout(msg);
        console.error('Error delete products:', error);
    });
};

const loadproducts = () => {
    const products_lists = document.querySelector('#products_lists');
    products_lists.innerHTML = ''; // 清除列表之前的產品
    const msg = document.querySelector('.msg');
    msg.style.display = 'none';

    fetch('https://fakestoreapi.com/products')
        .then(res => res.json())
        .then(json => {
            json.forEach(product => {
                const li = document.createElement('li');
                const img = document.createElement('img');
                const span = document.createElement('span');
                const detail_btn = document.createElement('button');
                const del_btn = document.createElement('button');
                const title = document.querySelector('.title');
                const category = document.querySelector('.category');
                const description = document.querySelector('.description');
                const price = document.querySelector('.price');
                const image =  document.querySelector('.image');
                const modal_wrap = document.querySelector('.modal_wrap');

                img.src = product.image;
                img.alt = product.title;
                li.appendChild(img);

                span.textContent = product.title;
                li.appendChild(span);

                detail_btn.textContent = 'Details';
                li.dataset.title = product.title;
                li.dataset.category = product.category;
                li.dataset.description = product.description;
                li.dataset.price = product.price;
                li.dataset.image = product.image; // 保存圖片URL

                detail_btn.onclick = () => {
                    title.textContent = product.title;
                    category.textContent = product.category;
                    description.textContent = product.description;
                    price.textContent = `$${product.price}`;
                    image.src = product.image; // 設定圖片來源
                    image.alt = product.title; // 設定圖片的替代文字
                    modal_wrap.style.display = 'block';
                };
                li.appendChild(detail_btn);

                del_btn.textContent = 'Delete';
                del_btn.onclick = () => {
                    do_delete(product.id, li, msg);
                };
                li.appendChild(del_btn);

                products_lists.appendChild(li);
            });
        })
        .catch(error => {
            msg.style.display = 'block';
            set_display_timeout(msg);
            console.error('Error fetching products:', error);
        });
};

load_products_btn.onclick = loadproducts;

// 添加關閉按鈕的事件監聽
document.querySelector('#btn-close').onclick = () => {
    document.querySelector('.modal_wrap').style.display = 'none';
};

05_js_data-attribute.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
* {
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    box-sizing: border-box;
}

#load_products_btn {
    width: 120px;
    height: 80px;
    color: #ccc;
    background-color: rgb(8, 81, 81);
    font-size: 20px;
    padding: 10px;
    margin: 20px 30px;
}

#load_products_btn:hover
{
    color: rgb(8, 81, 81);
    background-color: rgb(156, 176, 20);
    cursor: pointer;
}

#products_lists li button:nth-child(3):hover {
    color: rgb(8, 81, 81);
    background-color: rgb(156, 176, 20);
    cursor: pointer;
}

#products_lists button:last-child:hover {
    color: #fff;
    background-color: #f00;
    cursor: pointer;
}

.msg {
    position: absolute;
    top: 20px;
    width: 200px;
    height: 30px;
    display: none;
    background-color: #EDCAC7;
    color: #902105;
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
    animation: my_message 5s;
    opacity: 0;
}

@keyframes my_message {
    from {
        left: 200px;
        opacity: 100;
    }
    to {
        left: 300px;
        opacity: 0;
    }
}

#products_lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

#products_lists li {
    width: 200px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#products_lists span {
    text-align: center;
    color: rgb(100, 100, 100);
    margin-bottom: 10px;
}

#products_lists button {
    width: 100px;
    padding: 5px;
    margin-top: 10px;
    color: rgb(238, 245, 245);
    background-color: rgb(69, 69, 68);
    border-radius: 5px;
}

#products_lists img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.modal_wrap {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);

}

#detail-modal {
    position: relative;
    max-width: 800px;
    min-height: 350px;
    /* background-color: #242424;
    color: #F2F2F2; */
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    display:flex;
    flex : wrap;
}
.image_div{
    width: 45%;
}
.image_div img{
    width: 300px;
    height: 300px;
    object-fit: contain;
}
.product_content{
    margin-left: 20px;
}
.category{
    text-transform: uppercase;
    color: #777;
}
.description{
    font-size: 17px;
    color: #777;
    margin: 18px 0;
}
.price{
    font-weight: 700;
    color: #f00;
    font-size: 20px;
}
#btn-close {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #f6a3a3;
    color: #242424;
    font-size: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

作業取自： https://codelove.tw/@howtomakeaturn/post/X3KXRa
by 站長阿川