JavaScript 系列六：第5課 ── 熟悉匿名函式

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列六：第5課 ── 熟悉匿名函式</title>
    <link rel="stylesheet" href="./05_js_boolean.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>   <span></span>
                    <button class="btn_li btn_on||btn_off">標示為已完成</button>
                    <button class="btn_li delBtn">刪除</button>
                </li>
                
            </ul>
        </div>

    </div> -->
    <!--***** 切版end *****-->
   
    <script src="./05_js_boolean.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Playwrite+CU:[email protected]&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;
}
span{
    width: 90%;
}
.btn_li{
    width: 10%;
}
.btn_on{
    color:#f00;
    background-color: inherit;
}
.btn_off{
    color: #fff;
    background-color: #17507b;
    
}
.btn_on , .btn_off{
    width:80px;
    height: 50px;
    border: none;

    /* font-size: 15px; */
    border-radius: 3px;
    padding: 5px;
}
.btn_on:hover , .btn_off:hover{
    cursor: pointer;
}

.delBtn{
    width:80px;
    height: 50px;
   ...

JavaScript

// 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 元素的鍵盤事件
   ...