JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<div id="app">
        <div class="card">
            <div class="card-header">
                <h2>TODO LIST</h2>
            </div>
            <div class="card-body">
                <div class="add-task">
                    <h3>新增事項</h3>
                    <div class="form-group">
                        <input type="text" id="newTask" class="form-input" placeholder="請輸入任務" autocomplete="on">
                        <button class="btn btn-primary" onclick="addTask()">新增</button>
                    </div>                    
                </div>
                <div class="tasks-box">
                    <h3>待做事項</h3>
                    <ul id="incomplete-tasks" class="task-list">
                        <li>
                            <span>倒垃圾</span>
                        </li>
                        <li>
                            <span>繳電話費</span>
                        </li>
                        <li>
                            <span>採買本週食材</span>
                        </li>
                    </ul>
                </div>
                
            </div>
            
        </div>
    </div>

CSS

:root{
        --primary: #4f46e5;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
    }
    *{
        box-sizing: border-box;
        font-size: 1rem;
    }
    body{
        background: var(--background);
        color: var(--gray800);
        font-family: Lato, sans-serif;
    }
    .card{
        width: 400px;
        margin: 40px auto;
        padding: 1rem;
        background: var(--white);
        border-radius: 0.5rem;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    }
    h2 {
        text-align: center;
        margin: 1rem 0;
        font-size: 1.75rem;
    }
    h3{
        font-size: 1.125rem;
        padding: 0.5rem 0;
        border-bottom: 2px solid var(--gray800);
    }
    ul {
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }

    .form-group{
        margin-bottom: 1rem;
        display: flex;
        flex-flow: row;
    }
    .form-label{
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    .form-input{
        border: 1px solid #94a3b8;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        flex: auto;
        margin-right: 1rem;
    }
    .form-input:focus{
        border-color: var(--primary);
        box-shadow: 0px 0px 0px 3px rgb(79 70 229 / 40%);
        outline: none;
    }    
    .btn{
        padding: 0.5rem 1rem;
        border: 2px solid transparent;
        border-radius: 0.25rem;
        background-color: var(--gray);
        color: #475569;
        cursor: pointer;
    }
    .btn:hover{
    transform: scale(1.1);
    transition: all 0.3s;
    }
    .btn-primary{
        background-color: var(--primary);
        color: var(--white);
    }
    .btn-primary:hover{
        background-color: #3730a3;
    }
    .task-list li{
        padding: 1.5rem 0;
        font-size: 0.875rem;
        
    }
    .task-list li:not(:last-child){
        border-bottom: 1px solid #e2e8f0;
    }

JavaScript

function addTask(){
            let taskInput = document.getElementById('newTask').value; // 取得input的value
            let incompleteTasksHolder = document.getElementById('incomplete-tasks'); // 取得 ul的id
            let taskList = document.createElement('li'); // 新增li元素
            let createNewTaskEl = document.createElement('span'); // 新增span元素

            incompleteTasksHolder.append(taskList); //在ul底下新增li
            taskList.append(createNewTaskEl); //在li底下新增span
            
            createNewTaskEl.append(taskInput);  //把input的value塞進來
            clearInput();

            console.log(taskInput);
            console.log(taskList);
            console.log(createNewTaskEl);
            //console.log(incompleteTasksHolder);
        }
        // 清空input
        function clearInput(){
            document.getElementById('newTask').value ='';
        }