Taeluf.com

todo-list.html

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

<script type="text/javascript" src="../../code/Autowire.js"></script>


<style>
    .Todo {
        border: 1px solid black;
        padding: 1.0em;
        border-radius: 0.5em;
        background: hsl(0,0,85%);
        box-shadow: 2px 0px 10px hsl(0,0,60%);
        display:inline-block;
    }
    .Todo li {
        margin-left:none;
        border-bottom: 1px solid hsl(0,0,70%);
    }
</style>

<h1>Todo-List with web-request</h1>
<div class="Todo">
    <h1>TODO</h1>
    <ol>
        <li></li>
    </ol>
</div>

<script>

class Todo extends Autowire {
    get liTemplate(){return this._liTemplate || (this._liTemplate = this.q('li'));}
    get ol(){ return this.q('ol'); }
    set h1(v){ this.q('h1').innerText = v; }

    async onAttach(groceryList) {
        this.liTemplate.parentNode.removeChild(this.liTemplate);
        const items = await this.fj('./todo-list.json');
        for (let text of items){
            this.add(text);
        }
        this.test(items);
    }

    add(text){
        const li = this.liTemplate.cloneNode(true);
        li.innerText = text
        this.ol.appendChild(li);
    }

    async test(items){
        const textItems = await this.ft('./todo-list.json');
        const textToJson = JSON.parse(textItems);
        if (JSON.stringify(textToJson) !== JSON.stringify(items)){
            console.log(items);
            console.log(textToJson);
            this.h1 = "Todo: Fetch text failed..."
        } else {
            this.h1 = "Todo: Success!"
        }
    }
}
Todo.aw();

</script>