Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#DCDAFF] text-white">
    <div class="container mx-auto my-4 max-w-[420px] px-4 md:px-0">
        <div class="flex flex-col items-center gap-4 relative">
            <div class="p-8 w-full text-center shadow rounded bg-[#A29BFE]">
                <h1 class="text-3xl">todo lista</h1>
            </div>
            <div class="p-8 w-full shadow rounded bg-[#ffffff] text-[#2d3436]">
                <ol id="todo-items" class="flex flex-col gap-4">
                    <li id="todo-item-template" class="hidden flex justify-between group">
                        <span></span>
                        <button class="todo-remove scale-75 hidden group-hover:flex">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                        </button>
                    </li>
                </ol>
            </div>
            <div class="absolute bottom-[-20px]">
                <form id="todo-form" class="flex rounded-full shadow bg-[#A29BFE]">
                    <input type="text" class="px-6 py-2 w-[10rem] bg-transparent placeholder-white outline-none" placeholder="Napiši nekaj...">
                    <button class="px-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        const itemsList = document.querySelector('#todo-items');

        const appendItem = (todo) => {
            const itemTemplate = document.querySelector('#todo-item-template');
            const item = itemTemplate.cloneNode(true);

            item.removeAttribute('id');
            item.classList.remove('hidden');
            item.setAttribute('data-id', todo.id);
            item.querySelector('span').innerHTML = todo.value;
            attachDeleteClickListener(item.querySelector('button'));
            itemsList.appendChild(item);
        }

        const addToStorage = (value) => {
            const items = JSON.parse(localStorage.getItem('todo')) || [];
            items.push(value);
            localStorage.setItem('todo', JSON.stringify(items));
        }

        const removeFromStorage = (id) => {
            const items = JSON.parse(localStorage.getItem('todo')) || [];
            const removed = items.filter((todo) => todo.id != id);
            localStorage.setItem('todo', JSON.stringify(removed));
        }

        const loadFromStorage = () => {
            const items = JSON.parse(localStorage.getItem('todo')) || [];

            for(const item of items) {
                appendItem(item);
            }
        }

        const removeItem = (id) => {
            itemsList.querySelector(`li[data-id="${id}"]`).remove();
            removeFromStorage(id);
        }

        const attachDeleteClickListener = (button) => {
            const id = button.parentElement.getAttribute('data-id');
            button.addEventListener('click', () => removeItem(id));
        }

        const form = document.querySelector('#todo-form');

        form.addEventListener('submit', (event) => {
            event.preventDefault();

            const input = form.querySelector('input');
            const value = input.value;

            if(value == '') {
                return;
            }

            input.value = '';

            const todo = {
                id: Date.now(),
                value
            };

            appendItem(todo);
            addToStorage(todo);
        });

        loadFromStorage();
    </script>
</body>
</html>