JavaScript 系列二：第3課

認識 for 迴圈

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>待辦事項管理</title>
    <link rel="stylesheet" href="./js_DOM.css">
</head>
<body>
    <div class="bg-container">
      
       
        <div class="input_text">
            <h1>
                To Do List
            </h1>
            <input type="text" name="to_do" id="to_do" placeholder="想記錄些什麼...">
            <button id ="add_List" onclick="addList()">新增</button>
            <button class="export_btn" onclick="exportList()">匯出清單</button>
        </div>
        <div class="to_do_list">
            <h3>待辦事項的清單</h3>
            <ul id="toDoList">

            </ul>
        </div> 

  
    </div>
    <script src="./js_DOM.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;
    
} 

.input_text{
    margin-left: 40px;
}
.input_text input{
    min-width: 300px;
    height: 2em;
    font-size: 18px;
    padding-left: 10px;
}
.input_text button{
    border: none;  
    color: #fff;
    background-color: #82715f;
    width: 100px;
    height: 2em;
    border-radius: 8px;
    margin-left: 15px;
    font-size: 18px;
    cursor: pointer;
}

.to_do_list{
    background-color: #f2eee2;
    border-radius: 10px;
    width: 540px;
    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 ;
}

.to_do_list ul li span button{
    float: right;
    width: 25px;
    height: 25px;
    color: #fff;
    background-color:#82715f;
    font-size: 20px;

}
.to_do_list ul li span button:hover{
    background-color: #ff0000;
    cursor: pointer;
}

JavaScript

let elem_toDo = document.getElementById('to_do');
elem_toDo.addEventListener("keypress",
    function(event){
        if(event.key === "Enter") {
            document.getElementById('add_List').click();
        }
    })

function addList(){
    let toDoValue = document.getElementById('to_do').value;

    function delItem() {
        let grandParent = event.target.closest('li');
        // alert(grandParent);
        grandParent.remove();
    }

    if (toDoValue!="") {
        console.log(toDoValue);
        let elem_li = document.createElement('li');
   
        let elem_span =  document.createElement('span');

        let elem_del_btn =  document.createElement('button');
        elem_del_btn.textContent="✖︎";
        elem_del_btn.onclick= delItem;

        let app_ul = document.getElementById('toDoList');

        app_ul.append(elem_li);
        elem_li.append(elem_span);
        elem_span.textContent= toDoValue;
        elem_span.value=toDoValue;
        elem_span.append(elem_del_btn);
    }
    elem_toDo.value="";
    elem_toDo.focus();

}

function exportList(){

    let lists = document.getElementsByTagName('span');

    if (lists.length!=0) {
        let list = "";
        let num = 1;
        let text = "";
        console.log(lists);
        for (list of lists) {
            console.log(list.value);
            text = text+ num.toString() + '. ' + list.value + "\n";
            num += 1;
        }
        alert('今日待辦:\n' + text);
    }

}