~kmaasrud/td

8642449ab08bcac49d9587b7ba23f4ba26831817 — Knut Magnus Aasrud 3 months ago 2ea5c7c
feat: add clear all button
1 files changed, 12 insertions(+), 3 deletions(-)

M src/index.html
M src/index.html => src/index.html +12 -3
@@ 48,12 48,13 @@

        .submit-area {
            display: grid;
            grid-template-columns: 1fr 20px;
            grid-template-columns: 1fr 20px 40px;
            gap: 5px;
        }

        #new,
        #add {
        #add,
        #clear {
            border: 1px solid var(--border);
            border-radius: 5px;
            padding: 5px;


@@ 62,6 63,7 @@

        #new:focus-visible,
        #add:hover,
        #clear:hover,
        .td-list li:has(*:hover) {
            outline: 1px solid var(--hl);
            background: var(--border);


@@ 114,7 116,7 @@
        }
    </style>
    <script type="module">
        const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        var tasks = JSON.parse(localStorage.getItem('tasks')) || [];
        const save = () => localStorage.setItem('tasks', JSON.stringify(tasks));
        const tdList = document.querySelector('.td-list');
        const taskInput = document.getElementById('new');


@@ 153,6 155,12 @@
            }
        };

        document.getElementById('clear').onclick = e => {
            tasks = [];
            save();
            render();
        };

        render();
    </script>
</head>


@@ 166,6 174,7 @@
        <div class="submit-area">
            <input type="text" id="new" placeholder="new item">
            <input type="submit" id="add" value="+">
            <input type="submit" id="clear" value="clear">
        </div>
        <ul class="td-list">
        </ul>