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" selected>一般</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 class="done">(已完成)</span>
                            <span class="task-label">洗衣服</span>
                            <button onclick="finishedTask()" class="btn btn-outline-primary" id="finishedTask">標示為已完成</button>
                            <button onclick="deleteTask()" class="btn btn-outline-danger">刪除</button>
                        </li>
                        <li class="status-danger">
                            <span class="done">(已完成)</span>
                            <span class="task-label">買文具</span>
                            <button onclick="finishedTask()" class="btn btn-outline-primary" id="finishedTask">標示為已完成</button>
                           ...

CSS

:root{
        --primary: #4f46e5;
        --secondary:#2563eb;
        --secondary100: #dbeafe;
        --gray800: #333;
        --white: #fff;
        --background:#e4e4e4;
        --warning100 :#ffedd5;
        --warning : #ea580c;
        --danger100 :#fee2e2;
        --danger : #dc2626;
        --success : #059669;
        --success100: #ecfdf5;
    }
    *{
        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);
...

JavaScript

// 新增任務
        function addTask(){
            let taskInput = document.querySelector('#newTask').value; // 建立變數，取得input的value
            let incompleteTasksHolder = document.querySelector('#incomplete-tasks'); // 建立變數，取得ul的id

            let taskList = document.createElement('li'); // 建立變數，新增li元素
            let createNewTaskEl = document.createElement('span'); // 建立變數，新增span元素
            
            let doneEl = document.createElement('span'); //建立span元素

            let deleteBtn = document.createElement('button');
            let FinishBtn = document.createElement('button');
            let statusType = document.querySelector('#statusType').value;

            // 建立新任務
            if (taskInput === ''){
                return alert('請輸入新任務')
            }else{
                incompleteTasksHolder.append(taskList); //在ul底下新增li
                // 已完成標籤
                taskList.append(doneEl); //任務項目中建立span標籤
                doneEl.textContent ='(已完成)'; //賦予span內容
                doneEl.classList.add('done'); //新增span的class name

                // 任務名稱
                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(); //清除input內容

                //增加已完成按鈕
                taskList.append(FinishBtn); 
                FinishBtn.textContent ='標示為已完成';
                FinishBtn.classList.add('btn', 'btn-outline-primary');
                FinishBtn.onclick = finishedTask;

                //增加刪除按鈕
                taskList.append(deleteBtn); 
                deleteBtn.textContent ='刪除';
                deleteBtn.classList.add('btn', 'btn-outline-danger');
            ...