2024-09-26 課後作業-JavaScript 系列六：第4課 ── 熟悉 render function

發表於 更新於 分類於 閱讀次數：
課後作業-JavaScript 系列六：第4課 ── 熟悉 render function

課後作業-JavaScript 系列六：第4課 ── 熟悉 render function

04_js_render-function.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
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列六：第4課 ── 熟悉 render function</title>
    <link rel="stylesheet" href="./04_js_render-function.css">
</head>
<body>
    <input type="text">
    <button id="add_btn" onclick="add()">新增事項</button>

    <div id="root">
    </div>
    <!--***** 切版start *****-->
    <!-- <div class="wrap">
        <h2>To Do List</h2>
        <hr>
        <div class="todo_input">
            <input type="text" placeholder="新增待辦事項">
            <button id="add_btn" onclick="add()">新增事項</button>
            <select>
                <option value="normal">一般</option>
                <option value="important">重要</option>
                <option value="urgent">緊急</option>
            </select>
        </div>
        <div class="todos_container">
            <ul class="todoList">
                <li>
                     <span></span>   
                    <button class="delBtn">刪除</button>
                </li>
                
            </ul>
        </div>

    </div> -->
    <!--***** 切版end *****-->
   
    <script src="./04_js_render-function.js"></script>
</body>
</html>

04_js_render-function.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
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
// todos 會長的像這樣
// var todos = [
//     {
//       title: "倒垃圾",
//       category: "normal"
//     },
//     {
//       title: "繳電話費",
//       category: "important"
//     },
//     {
//       title: "採買本週食材",
//       category: "urgent"
//     },
//   ];


var todos = [];

function render_wrap(){
    const body = document.querySelector('body');
    const wrap = document.createElement('div');
    wrap.className='wrap';
    const h2 = document.createElement('h2');
    h2.textContent="To Do List";
    const hr = document.createElement('hr');


    // 取得現有的 input 和 button 元素
    const input_todo = document.querySelector('input');
    const add_btn = document.querySelector('#add_btn');

    // 新增事件急迫性
    const select = document.createElement('select');
    const option_normal = document.createElement('option');
    option_normal.value = 'normal';
    option_normal.textContent = '一般';
    option_normal.selected = true;
    
    const option_important = document.
    createElement('option');
    option_important.value = 'important';
    option_important.textContent = '重要';

    const option_urgent = document.createElement('option');
    option_urgent.value = 'urgent';
    option_urgent.textContent = '緊急';


    // 取得現有的 root 容器
    const root = document.querySelector('#root');

    select.append(option_normal);
    select.append(option_important);
    select.append(option_urgent);
    wrap.append(h2);
    wrap.append(hr);
    wrap.append(input_todo);
    wrap.append(select);
    wrap.append(add_btn);
    wrap.append(root);

    // 把 wrap 放到 body 裡面
    body.append(wrap);


    // 監聽 select 的變化
    select.addEventListener('change', function () {
        const selectedValue = select.value;
        select.className = ''; // 先重置 class
        if (selectedValue === 'important') {
            select.className += ' important';
        } else if (selectedValue === 'urgent') {
            select.className += ' urgent';
        }
    });


    // 監聽 input 元素的鍵盤事件
    input_todo.addEventListener('keydown', function(event) {
        // 檢查是否按下 Enter 鍵 (keyCode 13)
        if (event.key === 'Enter') {
            add(); // 執行 add 函式
        }
    });
}


function add()
{
  // 請寫出此函式內容（更新 todos 陣列）
    const input_todo = document.querySelector('input');
    const select_category = document.querySelector('select');

    let todo = input_todo.value.trim();  // 取得待辦事項的名稱
    let category = select_category.value;  // 取得選擇的分類

    if(todo !== ''){
        // 將待辦事項以物件的形式加入 todos 陣列
        todos.push({
            title: todo,
            category: category
        });
        console.log(todos);
        render();
    }else {
        input_todo.focus();
        input_todo.placeholder = "新增待辦事項";
    }
    input_todo.value = '';
}

function render(){
    console.log('render....');
    const root = document.querySelector('#root');
    root.textContent='';
    const div_container = document.createElement('div');
    div_container.className = 'todos_container';
    const ul = document.createElement('ul');
    ul.className = 'todoList';

    todos.forEach(function(item, index){
        const li = document.createElement('li');
        const span = document.createElement('span');
        const delBtn = document.createElement('button');
        delBtn.className = "delBtn";
        delBtn.textContent = '刪除';

        // 設定刪除按鈕的點擊事件，刪除對應的項目
        delBtn.onclick = () => {
            todos = todos.filter((_, i) => i !== index); // 移除該項
            render(); // 重新渲染
        };

        // 設定待辦事項的標題和分類
        span.textContent = item.title;

        // 根據 category 設定 class 以改變樣式
        li.className = item.category;

        li.append(span);
        li.append(delBtn);
        ul.append(li);
    });

    div_container.append(ul);
    root.append(div_container);
};


window.onload=()=>{
    render_wrap();
};

04_js_render-function.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
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Playwrite+CU:wght@100..400&display=swap');
*{
    padding: 0;
    margin: 0;
}

.wrap{
    margin: 30px auto;
    width: 800px;
    min-height: 600px;
    background-color: #a9c5d5;
    border-radius: 10px;
}
h2{
    padding-top: 20px;
    padding-left: 30px;
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    color:#e8626b;
}


input{
    width: 500px;
    margin: 20px 0 20px 30px;
    padding-left: 5px;
    font-size: 20px;
    line-height: 2;
    border: 1px solid #889fad;
    color:#000;
    background-color: #fff;

}
input:hover, input:focus {
    outline: none;
    background-color: #eaeaa9;
}
select{
    width: 100px;
    height: 40px;
    font-size: 20px;
    line-height: 2;
    margin-right: 20px;
    text-align: center;
}
.important{
    color: #ed7023;
}
.urgent{
    color: #cf372c;
}

#add_btn{
    border: none;
    font-size: 18px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
#add_btn:hover{
    cursor: pointer;
    background-color: #17507b;
}
ul{
    list-style-type: square;
    min-height: 400px;
    margin:  0 30px;
    padding: 5px;
    border-radius: 5px;
    background-color: #8ca8ba;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);

}
li{
    display: flex;
    justify-content: space-between; /* 元素之間平均分布 */
    align-items: center; /* 垂直置中對齊 */
    margin: 10px 20px;
    border-bottom: 1px dotted #28292b;
    font-size: 18px;
    color:#000;
}
.delBtn{
    border: none;
    font-size: 15px;
    border-radius: 3px;
    background-color: #040404;
    color: #fff;
    padding: 10px;
}

.delBtn:hover{
    cursor: pointer;
    background-color: #b91919;
}

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