Functional DOM Manipulation

const SVG_NS = 'http://www.w3.org/2000/svg'; export const el = type => document.createElement(type); export const svg = type => document.createElementNS(SVG_NS, type); export const text = value => document.createTextNode(value); export const append = (parent, children) => { const fragment = document.createDocumentFragment(); fragment.append(...children); parent.appendChild(fragment); }; export const appendChild = (parent, child) => parent.appendChild(child); export const attr = (node, name, value) => { if(!value) { node.removeAttribute(value); return; } node.setAttribute(name, value); }; export const addClass = (node, ...classNames) => node.classList.add(...classNames); export const setTextContent = (node, text) => node.textContent = text; export const on = (node, type, handler) => node.addEventListener(type, handler); export const off = (node, type, handler) => node.removeEventListener(type, handler); 

import { el, on, off, setTextContent, text, attr, addClass, append, appendChild } from './tookit.js'; const createDeleteTodoBtn = handleTodoDelete => { const deleteTodoBtn = el('button'); setTextContent(deleteTodoBtn, 'Delete Todo'); const handleDelete = () => { off(deleteTodoBtn, 'click', handleDelete); handleTodoDelete(); }; on(deleteTodoBtn, 'click', handleDelete); return deleteTodoBtn; }; const createTodo = ({ todo, id }) => { const todoItem = el('li'); const todoText = text(todo); const handleDelete = () => { todoItem.remove(); // do cleanup stuff }; const deleteTodoBtn = createDeleteTodoBtn(handleDelete); addClass(todoItem, 'todo'); attr(todoItem, 'data-id', id); append(todoItem, [todoText, deleteTodoBtn]); return todoItem; }; const createTodoList = data => { const todoList = el('ul'); addClass(todoList, 'todo-list'); const todos = data.map(createTodo); append(todoList, todos); return todoList; }; const createTodoForm = handleForm => { const todoForm = el('div'); addClass(todoForm, 'todo-form'); const todoInput = el('input'); const handleSubmit = e => { e.preventDefault(); const todo = todoInput.value; if(!todo) { return; } handleForm({ todo, id: crypto.randomUUID(); }); }; on(todoForm, 'submit', handleSubmit); return todoForm; }; const createTodoApp = initialData => { const appContainer = el('div'); addClass(appContainer, 'todo-app'); const todoList = createTodoList(initialData); const handleFormSubmit = todo => { appendChild(todoList, createTodo(todo)); }; const todoForm = createTodoForm(handleFormSubmit); append(appContainer, [todoForm, todoList]); return appContainer; };