Skip to content

Instantly share code, notes, and snippets.

@felds

felds/index.html

Created March 17, 2024 22:51
Show Gist options
  • Save felds/23dd0031f37406ee10ade48cb2090187 to your computer and use it in GitHub Desktop.
Save felds/23dd0031f37406ee10ade48cb2090187 to your computer and use it in GitHub Desktop.
Download ZIP
TODO rapidinho com a M
Raw
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>
Raw
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();
Raw
types.d.ts
type Item = {
text: string
completed: boolean
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment