JavaScript 系列五：第2課

── 學會 Local Storage 相關功能

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 系列五：第2課 ── 學會 Local Storage 相關功能</title>
    <link rel="stylesheet" href="./02_js_local-storage.css">
</head>
<body>
    <div class="bg-container">
       
        <div class="input_text">
            <h1>
                To Do List
            </h1>
            <div class="input_container">
                <input type="text" id="to_do" class="to_do" placeholder="新增待辦事項...">
                <select id="list_level"  class="list_level" >
                    <option value="normal" selected>一般</option>
                    <option value="important" >重要</option>
                    <option value="urgent" >緊急</option>
                </select>
                <button  id ="add_list" class="add_list" onclick="addList()">+</button>
                <button class="todo_btn export_btn" onclick="exportList('export')">匯出清單</button>
                <button class="todo_btn save_btn" onclick="exportList('save')">儲存</button>

            </div>


        </div>
        <div class="to_do_list">
            <h3>待辦事項的清單</h3>
            <div class="to_do_list_container">
                <ul id="to_do_list_ul" class="to_do_list_ul">

                </ul>
            </div>
        </div> 
    </div>
    <script src="./02_js_local-storage.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
body{
    color: #82715f;
}
 .bg-container{
    background-image: url('https://imgur.com/0GIPhB0.jpg');
    width: 640px;
    min-height: 100px;
    border-radius: 8px;
    margin:auto;
    padding-top: 20px;
    padding-bottom: 30px;
    
} 

select{
    padding: 5px 10px;
    /* height: 2.2em; */
    font-size: 18px;
}
.input_text h1{
    margin-left: 40px;
}
.input_container{
    margin-left: 40px;
    width: 560px;
    display: flex;
    
}

.input_text input{
    min-width: 300px;
    /* height: 2em; */
    font-size: 18px;
    padding-left: 10px;
    
}

.add_list{
    border: none;
    color: #fff;
    background-color: #82715f;
    width: 50px; 
    font-size: 30px; 

    
}

.todo_btn{
    border: none;  
    color: #fff;
    background-color: #82715f;
    width: 100px; 
    border-radius: 8px; 
    margin-left: 10px;
    padding: 5px 10px;
    font-size: 18px;
    cursor: pointer;

}

.to_do_list{
    background-color: #f2eee2;
    border-radius: 10px;
    width: 530px;
    min-height: 500px;
    margin: auto;
    margin-top: 20px;
    padding: 10px 10px;

}
.to_do_list h3{
    text-align: center;
    line-height: 2;
    letter-spacing: 0.3em;
    border-bottom: 1px dashed #C8C8C8 ;
}


.to_do_list_ul{
    padding-left: 20px;
}

.to_do_list_ul li{
    padding: 10px 10px;
    border-bottom: 1px dashed #C8C8C8 ;
}
.todo_group{
    position:relative;
    width: 480px;
}
.todo_txt{
    width: 380px;
    word-wrap: break-word;
    word-break: break-all;
    display: inline-block; /* 確保 span 元素遵守寬度規則 */
}

.important_li{
    color:#ff8c00;
}

.urgent_li{
    color:#ff0000;
}

.del_btn{
    position: absolute;
    right: 5px;
    /* float: right; */
    width: 25px;
    height: 25px;
    color: #fff;
    background-color:#82715f;
    font-size: 20px;

}
.del_btn:hover{
    background-color: #ff0000;
    cursor: pointer;
}

.on_off_btn {
    position: absolute;
    right:-25px;
    /* float: right; */
    width: 25px;
   ...

JavaScript

let elem_toDo =  document.querySelector('#to_do')  ; 
let elem_toDo_class= elem_toDo.className ;
elem_toDo.addEventListener("keypress",
    function(event)
    {
        if(event.key === "Enter") {
            document.querySelector('#add_list').click();
        }
    }
)



let elem_select = document.querySelector("#list_level");
let elem_select_class= elem_select.className ;
// 監聽選擇框的變化
elem_select.addEventListener("change", 
    function() {
        // 取得當前選擇的選項值
        let selectedValue = elem_select.value;
        // 根據選擇的值來決定文字顏色
        if (selectedValue === "important") {
            elem_select.className = elem_select_class + 
            " important_li";
            elem_toDo.className = 
            elem_toDo_class +
            " important_li";
        } else if (selectedValue === "urgent") {
            elem_select.className = 
            elem_select_class + 
            " urgent_li";
            elem_toDo.className = 
            elem_select_class +
            " urgent_li";
        } else if (selectedValue === "normal") {
            elem_select.className = 
            elem_select_class + 
            " normal_li";
            elem_toDo.className = 
            elem_select_class +
            " normal_li";
        } 
        // else {
        //     elem_select.className = elem_select_class;
        //     elem_toDo.className = elem_toDo_class
        // } 
    }
);



function addList(){
    let toDoValue = document.querySelector('#to_do').value;
    let elem_value_select = 
    document.querySelector('#list_level').value;


    if (toDoValue!="") {

        let elem_li = document.createElement('li');

        if (elem_value_select == 'important'){
            elem_li.className = "important_li";
        }
        if (elem_value_select == 'urgent'){

            elem_li.className = "urgent_li";
        }
        if (elem_value_select == 'normal'){

            elem_li.className = "normal_li";
        }


        let elem_ul =...