Skip to content

Instantly share code, notes, and snippets.

@dukex

dukex/links.md

Created October 3, 2021 04:10
Show Gist options
  • Save dukex/ae10fc4d38c2cf9472797f7d1ba0e0c8 to your computer and use it in GitHub Desktop.
Save dukex/ae10fc4d38c2cf9472797f7d1ba0e0c8 to your computer and use it in GitHub Desktop.
Download ZIP
02102021 - Conversas com Alan
Raw
todolist.html
<html>
<head>
<style>
ul {
padding: 0
}
li label {
display: flex;
}
li.completed {
text-decoration: line-through;
}
li p {
margin: 0
}
</style>
</head>
<body>
<div id="app">
<label for="todo">Todo:</label>
<input id="todo" />
<ul id="todos">
<li class="--js-todo-template">
<label>
<input type="checkbox" />
<p>sample data</p>
</label>
</li>
</ul>
</div>
<script type="text/javascript">
const todoTemplate = document.querySelector(".--js-todo-template");
todoTemplate.style.display = "none"
const app = document.querySelector("#app")
const input = document.querySelector("#todo")
const list = document.querySelector("#todos")
const renderTodo = (todo) => {
const listItem = todoTemplate.cloneNode(true)
listItem.classList.remove("--js-todo-template")
listItem.style.display = "block"
const text = listItem.querySelector("p")
const checkbox = listItem.querySelector("input")
console.log("render");
console.log(listItem)
checkbox.addEventListener('change', function (e) {
const completed = e.currentTarget.checked
if (completed) {
listItem.classList.add('completed')
} else {
listItem.classList.remove('completed')
}
});
if (todo.completed) {
listItem.classList.add('completed')
} else {
listItem.classList.remove('completed')
}
checkbox.checked = todo.completed
text.innerText = todo.text
return listItem
}
// todos.forEach(function (todo) {
// const listItem = renderTodo(todo);
// list.appendChild(listItem)
// })
app.appendChild(list)
// -------------------------
input.addEventListener("keyup", function (e) {
const input = e.target;
if (e.keyCode === 13 && input.value.length > 0) {
const listItem = renderTodo({ text: input.value, completed: false })
list.appendChild(listItem)
input.value = ""
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment