JavaScript 系列六：第7課 ── 資料序列化

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 系列六：第6課 ── 認識 data model 的優點</title>
    <link rel="stylesheet" href="./07_js_localstorage.css">
</head>
<body>
    <input type="text">
    <button id="add_btn" onclick="add()">新增事項</button>
    <button id="export_btn" onclick="export_todos()">匯出</button>
    <button id="save_btn" onclick="save_todos()">儲存</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>
            <button id="export_btn" onclick="export()">匯出</button>
            <button id="save_btn" onclick="save_todos()">儲存</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="./07_js_localstorage.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: 400px;
    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 , #export_btn ,#save_btn{
    margin-left: 5px;
    border: none;
    font-size: 18px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
#add_btn:hover, #save_btn:hover{
    cursor: pointer;
    background-color: #17507b;
}
#export_btn:hover{
    cursor: pointer;
    background-color: #b91919;
}
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 {
    display: block;
    word-wrap: break-word; 
    width: 70%; 
    margin-right: 10px; 

}

.btn_li {
    flex-shrink: 0;
    width: 30%;
    margin-left: 10px; /* 按鈕之間的間距 */
}


.btn_on{
    color:#f00;
    background-color: inherit;
}
.btn_off{
    color: #fff;
   ...

JavaScript

// todo 長這樣
// var todos = [
//     {
//       title: "倒垃圾",
//       category: "normal",
//       isCompleted: false
//     },
//     {
//       title: "繳電話費",
//       category: "important",
//       isCompleted: false
//     },
//     {
//       title: "採買本週食材",
//       category: "urgent",
//       isCompleted: false
//     },
//   ];


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 export_btn = document.querySelector('#export_btn');
    const save_btn = document.querySelector('#save_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(export_btn);
    wrap.append(save_btn);
    wrap.append(root);

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


    // 監聽 select 的變化
    select.addEventListener('change', function () {
        const selectedValue = select.value;
        select.className...