js5-2

by wang_siang

HTML

<main>
        <section class="topblock">
            <div class="topleftblock">
                <button type="button" id="alert" class="iconbtn">
                    <svg stroke-width="2.2" stroke="#ffffff" fill="#ffffff" viewBox="0 0 448 512" height="24"
                        width="24">
                        <path
                            d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z">
                        </path>
                    </svg>
                </button>
                <p>待辦事項</p>
            </div>

            <button type="button" id="store" class="iconbtn">
                <svg viewBox="0 0 380 512" height="22" width="22" stroke="#ffffff" fill="#ffffff">
                    <path
                        d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z">
                    </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>
       ...

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 6px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .topleftblock {
            display: flex;
            align-items: center;
        }

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

        .topblock .iconbtn {
            background: transparent;
            border: transparent;
            border-radius: 6px;
            cursor: pointer;
            margin: 6px;
        }

        .topblock .iconbtn: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:...

JavaScript

document.querySelector('#add').addEventListener('click', addList);
        document.querySelector('#alert').addEventListener('click', listAlert);
        document.querySelector('#borderColor').addEventListener('change', ColorChange);
        document.querySelector('#store').addEventListener('click', save);

        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 =...