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>
                    <form id="taskForm" action="">
                        <div class="form-group">
                            <input type="text" id="newTask" class="form-input" placeholder="請輸入任務" autocomplete="on">
                            <select name="statusType" id="statusType" class="form-input" onchange="showValue()">
                                <option value="" selected disabled>狀態</option>
                                <option value="normal">一般</option>
                                <option value="important">重要</option>
                                <option value="urgent">緊急</option>
                            </select>
                            <button class="btn btn-primary" onclick="addTask()" id="submitBtn"type="submit">新增</button>     
                        </div> 
                    </form>
                </div>
                <div class="tasks-box">
                    <h3>今日待辦</h3>
                    <ul id="incomplete-tasks" class="task-list">
                        <li>
                            <span>洗衣服</span>
                            <button onclick="deleteTask()" class="btn btn-outline-primary">刪除</button>
                        </li>
                        <li class="status-danger">
                            <span>買文具</span>
                            <button onclick="deleteTask()" class="btn btn-outline-primary">刪除</button>
                        </li>
                        <li class="status-warning">
                            <span>去健身房</span>
                            <button onclick="deleteTask()" class="btn btn-outline-primary">刪除</button>
                        </li>
                    </ul>
                    <button class="btn btn-secondary"...

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
    }
    *{
        box-sizing: border-box;
        font-size: 1rem;
    }
    body{
        background: var(--background);
        color: var(--gray800);
        font-family: Lato, sans-serif;
    }
    .card{
        width: 560px;
        margin: 40px auto 0;
        padding: 1rem;
        background: var(--white);
        border-radius: 0.25rem;
        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;
    } 
    .input-warning{
        border-color: var(--warning);
        background-color: var(--warning100);
    }
    .input-warning:focus{
        border-color: var(--warning);
        box-shadow: 0px 0px 0px 3px rgb(234 88 12 / 40%);
        outline: none;
    }
    .input-danger{
        border-color: var(--danger);
        background-color: var(--danger100);
    }
    .input-danger:focus{
        border-color: var(--danger);
        box-shadow: 0px 0px 0px 3px rgb(220 38 38/ 40%);
   ...

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元素
            let deleteBtn = document.createElement('button');
            let statusType = document.getElementById('statusType').value;

            if (taskInput === ''){
                return alert('請輸入新任務')
            }else{
                incompleteTasksHolder.append(taskList); //在ul底下新增li
                taskList.append(createNewTaskEl); //在li底下新增span
                
                createNewTaskEl.append(taskInput);  //把input的value新增進li

                // 判斷任務分類
                if( statusType === 'important'){
                    taskList.className = taskList.className + 'status-warning'
                }else if(statusType === 'urgent'){
                    taskList.className = taskList.className + 'status-danger'
                }
                clearInput();
                taskList.append(deleteBtn); //增加按鈕
                deleteBtn.textContent ='刪除';
                deleteBtn.classList.add('btn', 'btn-outline-primary');
                deleteBtn.onclick = deleteTask;
                
            }
        }

        // 清空input
        function clearInput(){
            let taskInput = document.getElementById('newTask');
            taskInput.value ='';
            taskInput.classList.remove('input-warning', 'input-danger');
            document.getElementById('statusType').value ='';
        }
        function deleteTask(){
            event.target.parentElement.remove();
        }

        // 點擊enter送出表單
        let taskForm = document.getElementById('taskForm');
        
        taskForm.addEventListener('submit', (e) => {
            e.preventDefault();
        })

 ...