RE:DOM - TodoMVC Example

by Mauro Reis Vieira

HTML

<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css@2.2.0/index.css">
<script src="https://redom.js.org/redom.min.js"></script>

JavaScript

const { el, mount, list } = redom;
const STORAGE_KEY = 'todos-redom'

class Todo {
    constructor() {
        this.el = el("li.todo",
            el("div.view",
                this.done = el("input.toggle", {
                    type: "checkbox"
                }),
                this.title = el("label"),
                this.destroy = el("button.destroy"),
            ),
            this.edit = el("input.edit", {
                type: "text"
            })
        );

        this.done.onchange = () => {
            this.data.done = this.done.checked;
            this.update(this.data, this.data.index);
        };

        this.el.ondblclick = evt => {
            this.el.classList.add("editing");
        };

        this.edit.onkeypress = evt => {
            if (evt.charCode === 13) {
                this.data.title = this.edit.value;
                this.update(this.data, this.data.index);
                this.el.classList.remove("editing");
            }
        };

        this.destroy.onclick = evt => {
            const event = new CustomEvent("destroy", {
                detail: this.data
            });

            document.dispatchEvent(event);
        }
    }

    update(data, index) {
        this.data = data;
        this.data.index = index;
        this.done.checked = data.done;
        this.title.textContent = data.title;
        this.edit.value = data.title;

        if (data.done) {
            this.el.classList.add("completed");
        } else {
            this.el.classList.remove("completed");
        }
    }
}

class TodoApp {
    constructor() {
        this.data = [];

        this.el =
            el("div",
                el("section.todoapp",
                    (this.header = el("header.header",
                        el("h1.heading", "todos"),
                        (this.create = el(
                            "form", {},
                            (this.createInput = el("input.new-todo", {
                               ...