conextra/public/www/templates/to-do-list.html

Conextra for Web Development. Helps create a SPWA (Single-page Progressive Web Application).

<div class="p-2">
    <div link="/public.json" class="container py-5">
        
        <div class="position-fixed start-50 translate-middle" style="z-index:1;margin-top:-2em" 
             template="templates/progress_bar.html"></div>

        <div class="row d-flex justify-content-center align-items-center">
            <div class="col col-xl-10">

                <div class="card" style="border-radius: 15px;">

                    <div class="card-header h3 mb-3">Public Demo Todo List</div>

                    <div class="card-body p-5">

                        <form class="d-flex justify-content-center align-items-center mb-4" path="tastList" bind="context" onsubmit="
                            event.preventDefault();
                            var text = this.querySelector('input');
                            var dc = this.contextValue();
                            if (Array.isArray(dc) && text.value) { dc.push({ isDone: false, text: text.value }); }
                            text.value = '';
                            text.focus();
                            ">
                            <input type="text" class="form-control form-control-lg" placeholder="What do you need to do?" />
                            <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg ms-2">Add</button>
                        </form>

                        <ul class="list-group mb-0" path="tastList" templates="template#task">

                            <template id="task">
                                <li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                                    <input class="form-check-input me-2" type="checkbox" path="isDone" onbind="
                                    if (event.eventName === 'bind') { this.addEventListener('change', change); }
                                    this.checked = this.contextValue();
                                    var div = this.parentElement.querySelector('div');
                                    this.checked ? div.classList.add('text-decoration-line-through') : div.classList.remove('text-decoration-line-through');
                                    return true;
                                    function change(ev) { if (this.contextValue() !== undefined) { this.contextValue(this.checked); } }
                                    " />
                                    <div class="d-flex align-items-center w-100 me-4" path="text" bind onclick="
                                    var checkbox = this.parentElement.querySelector('.form-check-input');
                                    checkbox.contextValue(!checkbox.contextValue());
                                    ">
                                    </div>
                                    <button type="button" class="btn-close" title="Remove item" path="isDone" bind="visible" onclick="this.bindingContext.removeParent(); this.blur()"></button>
                                </li>
                            </template>

                        </ul>

                    </div>

                    <div class="card-footer">
                        <span class="fw-lighter">- Try in two browser windows at once</span>
                        <br />
                        <span class="fw-lighter">- Try on two devices at once</span>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>