js2-7

by wang_siang

HTML

<main>
        <section class="topblock">
            <p>待辦事項</p>
            <button type="button" id="alert">
                <svg stroke-linejoin="round" stroke-linecap="round" stroke-width="2.2" stroke="#ffffff" fill="none"
                    viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.5 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V8.5L15.5 3Z"></path>
                    <path d="M15 3v6h6"></path>
                </svg>
            </button>
        </section>
        <section class="midblock m-y">
            <div>
                <input type="text" id="textInput">
            </div>

            <select name="" id="borderColor">
                <option value="" disabled hidden selected>層級</option>
                <option value="borderGreen">一般</option>
                <option value="borderOrange">重要</option>
                <option value="borderRed">緊急</option>
            </select>

            <button type="button" id="add">+</button>
        </section>
        <section class="bottomblock m-y">
            <ul id="note">
                <li class="borderRed">
                    <div>
                        <span>倒垃圾</span>
                        <span class="undone">（已完成）</span>
                    </div>

                    <div class="btnblock">
                        <button type="button" class="doneBtn">[標示為已完成]</button>
                        <button type="button" class="deleteBtn">[刪除]</button>
                    </div>
                </li>
                <li class="borderOrange">
                    <div>
                        <span>繳電話費</span>
                        <span class="undone">（已完成）</span>
                    </div>
                    <div class="btnblock">
                        <button type="button" class="doneBtn">[標示為已完成]</button>
                        <button type="button" class="deleteBtn">[刪除]</button>
                    </div>
         ...

CSS

* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            width: 100%;
            display: flex;
            justify-content: center;

        }

        main {
            color: black;
            font-size: 18px;
            font-weight: 600;
            margin: 50px 0;
            display: flex;
            gap: 12px;
            flex-direction: column;
            border-radius: 8px;
            background-image: linear-gradient(160deg, #0093E9 0%, #7ac1ff 100%);
        }


        .m-y {
            margin: 0 40px;
        }

        .topblock {
            background: #4f4f4f85;
            padding: 10px 10px 10px 40px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .topblock p {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 800;
            font-size: 24px;
            padding: 0;
            margin: 0;
        }

        .topblock #alert {
            background: transparent;
            border: transparent;
            border-radius: 6px;
            cursor: pointer;
            margin-top: 4px;
        }

        .topblock #alert:hover {
            opacity: 0.8;
        }

        .midblock {
            display: flex;

            justify-content: space-between;
            padding: 18px 0;
        }

        .midblock input {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            height: 42px;
            border: transparent;
            padding: 0 10px;
            background: transparent;
            border: 2px solid rgb(255, 255, 255);
            border-right: transparent;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
            outline: none;
        }

        input.borderRed {
            border: 2px solid rgb(255, 62, 62);
           ...

JavaScript

document.querySelector('#add').addEventListener('click', addList);
        document.querySelector('#alert').addEventListener('click', listAlert);
        document.querySelector('#borderColor').addEventListener('change', ColorChange);
        document.querySelectorAll('.deleteBtn').forEach(function (btn) {
            btn.addEventListener('click', remove);
        });
        document.querySelectorAll('.doneBtn').forEach(function (btn) {
            btn.addEventListener('click', done);
        });

        function addList() {
            const note = document.querySelector('#note');
            const textInput = document.querySelector('#textInput');
            const borderColor = document.querySelector('#borderColor');

            const deleteBtn = document.createElement('button');
            const doneBtn = document.createElement('button');
            const list = document.createElement('li');
            const lisrDiv = document.createElement('div');
            const listText = document.createElement('span');
            const listText1 = document.createElement('span');
            const listBtnBlock = document.createElement('div');


            if (textInput.value.trim() == '') {
                alert('請輸入代辦事項');
                return;
            }

            if (borderColor.value == '') {
                alert('請選取層級');
                return;
            } else {
                list.classList.add(`${borderColor.value}`)
            }

            listText.textContent = textInput.value;
            listText1.textContent = '（已完成）';
            listText1.classList.add('undone')
            listBtnBlock.classList.add('btnblock');

            deleteBtn.textContent = '[刪除]';
            deleteBtn.classList.add('deleteBtn');
            deleteBtn.onclick = remove;

            doneBtn.textContent = '[標示為已完成]';
            doneBtn.classList.add('doneBtn');
            doneBtn.onclick = done;

            note.append(list);
           ...