js6-7

by wang_siang

HTML

<input type="text" id="textInput">
    <select id="list-rank">
        <option value="normal">一般</option>
        <option value="important">重要</option>
        <option value="urgent">緊急</option>
    </select>
    <button onclick="add()">新增</button>
    <button onclick="exportList()">匯出</button>
    <button onclick="save()">儲存</button>

    <div id="root">
    </div>

CSS

li {
            margin-bottom: 10px;
        }

        li span {
            margin-right: 22px;
        }

        li button {
            margin: 0 12px;
        }

JavaScript

var todos = [
            {
                title: "倒垃圾",
                category: "normal",
                isCompleted: false
            },
            {
                title: "繳電話費",
                category: "important",
                isCompleted: false
            },
            {
                title: "採買本週食材",
                category: "urgent",
                isCompleted: false
            },
        ];

        function render() {
            const root = document.querySelector('#root');
            const allList = document.createElement('ul');
            root.textContent = '';
            root.append(allList);

            todos.forEach((item, index) => {
                const listLi = document.createElement('li');
                const listSpan = document.createElement('span');
                const doneSpan = document.createElement('span');
                const doneBtn = document.createElement('button');
                const deleteBtn = document.createElement('button');

                doneSpan.textContent = '(已完成)'

                deleteBtn.textContent = '刪除';
                listSpan.textContent = `${item.title}`;

                allList.append(listLi);
                listLi.append(listSpan);
                listLi.append(doneSpan);
                listLi.append(doneBtn);
                listLi.append(deleteBtn);

                if (item.category == 'normal') {
                    listSpan.style.color = 'green'
                } else if (item.category == 'important') {
                    listSpan.style.color = 'orange'
                } else if (item.category == 'urgent') {
                    listSpan.style.color = 'red'
                }

                if (item.isCompleted == false) {
                    doneSpan.style.display = 'none'
                    doneBtn.textContent = '標示為已完成'
                } else if (item.isCompleted == true) {
                    doneSpan.style.display = 'inline-block'
                   ...