/* Web Components Standard Specifications, using - Custom Elements - Shadow DOM - Templates * NO LIBRARY OR FRAMEWORK! */ function init() { // todo template const template = document.createElement("template"); template.innerHTML = `

Todo List

`; // TodoList Custom Element class TodoList extends HTMLElement { constructor() { super(); // list of todos this.list = [ {text: "buy milk", completed: false}, {text: "buy eggs", completed: false}, {text: "buy cheese", completed: false} ]; // add shadow root this.sRoot = this.attachShadow({mode: "open"}); this.sRoot.appendChild(template.content.cloneNode(true)); } connectedCallback() { // attach event to button this.btn = this.sRoot.querySelector("button"); this.btn.addEventListener("click", e => this.addTodos(e)); this.input = this.sRoot.querySelector("input"); this.ul = this.sRoot.querySelector("ul"); // event delegation this.ul.addEventListener("click", e => this.handleClick(e)); // invoke display todos after connect this.displayTodos(); } disconnectedCallback() { this.btn.removeEventListener("click", e => this.addTodos(e)); } randomColor() { let output = "#"; let hex = "0123456789ABCEDF"; for (let i = 0; i < 6; i++) { let rnd = Math.floor(Math.random() * 16); output += hex[rnd]; } return output; } handleClick(e) { if (e.target.nodeName === "LI") { let index = e.target.dataset.index; let data = prompt("enter new title"); if (data === null || data.length < 3) { return; } else this.updateTodo(index, data); } if (e.target.nodeName === "SPAN") { let index = e.target.dataset.index; this.deleteTodo(index); } } displayTodos() { // reset ul this.ul.innerHTML = ""; if (this.list.length) { this.list.map((item, i) => { // create li let li = document.createElement("li"); li.textContent = item.text; li.setAttribute("data-index", i); li.style.borderBottom = `0.015em solid ${this.randomColor()}`; // create span let span = document.createElement("span"); span.textContent = "[ X ]"; li.setAttribute("data-index", i); // append nodes li.append(span); this.ul.append(li); }) } else { let p = document.createElement("p"); p.style.cssText = ` text-transform: capitalize; text-align: center; `; p.textContent = "no todos!..😥" this.ul.append(p); } } updateTodo(idx, val) { this.list.splice(idx, 1, { text: val, completed: false }); this.displayTodos(); } addTodos(e) { e.preventDefault(); let input = this.sRoot.querySelector("input"); if (input.value.length) { let newTodo = { text: input.value, completed: false } this.list = [newTodo, ...this.list]; this.displayTodos(); input.value = ""; } } deleteTodo(index) { this.list.splice(index, 1); this.displayTodos(); } } // register custom element window.customElements.define("todo-list", TodoList); } window.addEventListener("DOMContentLoaded", init);

[Web Component] Todo-List