felds/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="color-scheme" content="dark light">
    <style>
        * {
            font-size: 32px;
        }
        li[data-completed="true"] {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="text">
        <button id="add" type="button">Adicionar</button>
    </div>

    <ul id="items"></ul>

    <script type="module" defer src="main.js"></script>
</body>
</html>

## main.js
//
//
// Definições
// - Pesquei coisas do ambiente
// - Gerei o estado inicial (fonte de verdade)
//
//

const addButton = document.querySelector("#add")
const textInput = document.querySelector("#text")
const itemsList = document.querySelector("#items")

/** @type {Item[]} */
let todos = [];


//
//
// Library
// - Funções para serem usadas no código
//
//


/**
 * Cria um objeto que represente um item.
 * @param {string} text
 * @returns {Item}
 */
function createItem(text) {
    return { text: text, completed: false }
}

/**
 * Adiciona um item na lista de todos.
 * @param {Item} item
 */
function addItem(item) {
    todos.push(item)
}

/**
 * @param {number} idx
 */
function toggleItem(idx){
    todos[idx].completed = !todos[idx].completed
}

/**
 * Exibir a lista de todos.
 */
function showTodos() {
    itemsList.innerHTML = "";
    todos.forEach((item, idx) => {
        const itemElement = document.createElement('li')
        itemElement.textContent = item.text
        itemElement.dataset.itemIdx = idx
        itemElement.dataset.completed = item.completed
        itemsList.append(itemElement)
    })
}

/**
 * Carrega os todos do local storage.
 */
function loadTodos() {
    const todosString = window.localStorage.getItem('todos')
    if (todosString) {
        todos = JSON.parse(todosString)
    }
}

/**
 * Armazena todos no local storage.
 */
function saveTodos() {
    const todosString = JSON.stringify(todos)
    window.localStorage.setItem('todos', todosString)
}

//
//
// Ações
// - Quando a página carregar
// - Quando eu interagir com a página
//
//

/**
 * Ação de inserir todo.
 */
addButton.addEventListener('click', () => {
    const text = textInput.value
    const newItem = createItem(text)
    addItem(newItem)
    showTodos()
    saveTodos()
    textInput.value = ""
})

/**
 * Marca todos como completas/incompletas
 */
itemsList.addEventListener('click', (e) => {
    const target = e.target
    const idx = target.dataset.itemIdx

    // se não vier um idx, para a execução
    if (idx === undefined) return;

    toggleItem(idx)
    saveTodos()
    showTodos()
})

/**
 * Escuta alterações no local storage de outras janelas e atualiza a lista.
 */
window.addEventListener("storage", (event) => {
    loadTodos();
    showTodos();
});

/**
 * Ler itens da memória quando a página for carregada.
 */
function main() {
    loadTodos()
    showTodos()
}
main();


## types.d.ts
type Item = {
    text: string
    completed: boolean
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<meta name="color-scheme" content="dark light">
	<style>
	* {
	font-size: 32px;
	}
	li[data-completed="true"] {
	text-decoration: line-through;
	}
	</style>
	</head>
	<body>
	<div>
	<input type="text" id="text">
	<button id="add" type="button">Adicionar</button>
	</div>

	<ul id="items"></ul>

	<script type="module" defer src="main.js"></script>
	</body>
	</html>
	//
	//
	// Definições
	// - Pesquei coisas do ambiente
	// - Gerei o estado inicial (fonte de verdade)
	//
	//

	const addButton = document.querySelector("#add")
	const textInput = document.querySelector("#text")
	const itemsList = document.querySelector("#items")

	/** @type {Item[]} */
	let todos = [];


	//
	//
	// Library
	// - Funções para serem usadas no código
	//
	//


	/**
	* Cria um objeto que represente um item.
	* @param {string} text
	* @returns {Item}
	*/
	function createItem(text) {
	return { text: text, completed: false }
	}

	/**
	* Adiciona um item na lista de todos.
	* @param {Item} item
	*/
	function addItem(item) {
	todos.push(item)
	}

	/**
	* @param {number} idx
	*/
	function toggleItem(idx){
	todos[idx].completed = !todos[idx].completed
	}

	/**
	* Exibir a lista de todos.
	*/
	function showTodos() {
	itemsList.innerHTML = "";
	todos.forEach((item, idx) => {
	const itemElement = document.createElement('li')
	itemElement.textContent = item.text
	itemElement.dataset.itemIdx = idx
	itemElement.dataset.completed = item.completed
	itemsList.append(itemElement)
	})
	}

	/**
	* Carrega os todos do local storage.
	*/
	function loadTodos() {
	const todosString = window.localStorage.getItem('todos')
	if (todosString) {
	todos = JSON.parse(todosString)
	}
	}

	/**
	* Armazena todos no local storage.
	*/
	function saveTodos() {
	const todosString = JSON.stringify(todos)
	window.localStorage.setItem('todos', todosString)
	}

	//
	//
	// Ações
	// - Quando a página carregar
	// - Quando eu interagir com a página
	//
	//

	/**
	* Ação de inserir todo.
	*/
	addButton.addEventListener('click', () => {
	const text = textInput.value
	const newItem = createItem(text)
	addItem(newItem)
	showTodos()
	saveTodos()
	textInput.value = ""
	})

	/**
	* Marca todos como completas/incompletas
	*/
	itemsList.addEventListener('click', (e) => {
	const target = e.target
	const idx = target.dataset.itemIdx

	// se não vier um idx, para a execução
	if (idx === undefined) return;

	toggleItem(idx)
	saveTodos()
	showTodos()
	})

	/**
	* Escuta alterações no local storage de outras janelas e atualiza a lista.
	*/
	window.addEventListener("storage", (event) => {
	loadTodos();
	showTodos();
	});

	/**
	* Ler itens da memória quando a página for carregada.
	*/
	function main() {
	loadTodos()
	showTodos()
	}
	main();