Pure JS TODOs demo

<h1>TODOs</h1>
<any>
    <ul>
        <li>Loading...</li>
    </ul>
</any>

<script>
    const box = scope()
    const { htmlCallbackEffect, effect } = box

    const element = document.querySelector('any')

    box.todos = JSON.parse(localStorage.getItem('todos')) ?? []
    element.innerHTML = ''
    element.appendChild(htmlCallbackEffect(() =>
        '<ul>' + (box.todos.length !== 0 ? box.todos.map((e, i) => `<li>${e}   <a style=` + 
        `"cursor: pointer" onclick="box.todos = box.todos.filter((e, i) => i != ${i})">Remove</a></li>`
        ).join('') : '<li>No TODOs.</li>') + '</ul>', 'todos'
    ))

    effect(() => {
        localStorage.setItem('todos', JSON.stringify(box.todos))
    }, 'todos')
</script>
<br>

<button onclick="let x = prompt(); if(x) box.todos = [...box.todos, x]">Add item</button><br>
<button onclick="box.todos = []">Clear all</button>