JavaScript 系列六：第2課

── 認識陣列操作

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課 ── 認識陣列操作</title>
    <link rel="stylesheet" href="./06_js_array.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>
        </div>
        <div class="todos_container">
            <ul class="todoList">
                <li></li>
                <button class="del"></button>
            </ul>
        </div>

    </div> -->
    <!--***** 切版end *****-->
</body>
<script src="./06_js_array.js"></script>
</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 20px 20px 30px;
    padding-left: 5px;
    font-size: 20px;
    line-height: 2;
    border: 1px solid #889fad;
}
input:hover, input:focus {
    outline: none;
    background-color: #eaeaa9;
}
button{
    border: none;
    font-size: 18px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
button:hover{
    cursor: pointer;
    background-color: #17507b;
}
ul{
    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{
    margin: 10px 20px;
    border-bottom: 1px dotted #28292b;
    font-size: 18px;
}

JavaScript

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');

    // 取得現有的 root 容器
    const root = document.querySelector('#root');
 
    wrap.append(h2);
    wrap.append(hr);
    wrap.append(input_todo);
    wrap.append(add_btn);
    wrap.append(root);

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


function add()
{
  // 請寫出此函式內容（更新 todos 陣列）
    const input_todo = document.querySelector('input');
    console.log(input_todo.value);
    let todo = input_todo.value.trim();
    if(todo !== ''){
        todos.push(todo);
        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='totoList';
    todos.forEach(function(item){
        const li=document.createElement('li');
        li.textContent=item;
        ul.append(li);
    })


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

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