js2-1

by wang_siang

HTML

<main>
        <section class="topblock">
            <p>待辦事項</p>
        </section>
        <section class="midblock m-y">
            <div>
                <input type="text" id="textInput">
            </div>
            <button type="button" id="add">+</button>
        </section>
        <section class="bottomblock m-y">
            <ul id="note">
                <li>
                    <span>倒垃圾</span>
                </li>
                <li>
                    <span>繳電話費</span>
                </li>
                <li>
                    <span>採買本週食材</span>
                </li>
            </ul>
        </section>
    </main>

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 40px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

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


        .midblock {
            display: flex;
            gap: 12px;
            justify-content: space-between;
            padding: 18px 0;
        }

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

        .midblock input:focus {
            color: black;
            background: white;
            border: 2px solid rgb(122, 122, 122);
        }

        .midblock #add {
            width: 42px;
            height: 100%;
            font-size: 24px;
            color: white;
            background: transparent;
            border: white 2px solid;
            border-radius: 16px;
            cursor: pointer;
        }

        .midblock #add:hover {
            background: #ffffff;
        ...

JavaScript

const add = document.getElementById('add');

        add.addEventListener('click', function () {
            const note = document.getElementById('note');
            const textInput = document.getElementById('textInput');

            let list = document.createElement('li')
            let listText = document.createElement('span')
            listText.textContent = textInput.value;

            note.append(list);
            list.append(listText);

            textInput.value='';
        })