Skip to content

Commit 3d61471

Browse files
pauekpauek
committed
TODO List acabado
1 parent 9b03230 commit 3d61471

File tree

5 files changed

+156
-6
lines changed

5 files changed

+156
-6
lines changed

‎2023-04-22/todos-vanilla/index.html

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,21 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vite + TS</title>
6+
<title>TODO List</title>
7+
<script src="/src/main.ts" type="module"></script>
78
</head>
89
<body>
9-
<script type="module" src="/src/main.ts"></script>
10+
<h1>Lista de Tareas</h1>
11+
<form>
12+
<input id="texto" type="text" />
13+
<button id="boton">Añade</button>
14+
</form>
15+
<ol id="todo-list">
16+
17+
</ol>
18+
<div>
19+
<button id="borrar-todos">Borrar todos</button>
20+
<button id="borrar-marcados">Borrar marcados</button>
21+
</div>
1022
</body>
1123
</html>

‎2023-04-22/todos-vanilla/src/main.ts

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,90 @@
1-
import './style.css'
1+
import "./style.css";
22

3-
const p = document.createElement('p');
4-
p.textContent = "Vanilla Vite Project";
5-
document.body.appendChild(p);
3+
type TodoItem = {
4+
tarea: string;
5+
hecha: boolean;
6+
};
7+
8+
let todoList: Array<TodoItem> = []; // <-- Modelo!!!
9+
10+
const pintarModelo = () => {
11+
// Esto genera el DOM necesario para visualizar el modelo
12+
const listElem = document.querySelector<HTMLOListElement>("#todo-list")!;
13+
listElem.textContent = null; // Vaciar un elemento del DOM
14+
15+
for (const todoItem of todoList) {
16+
const item = document.createElement("li");
17+
18+
// Creamos checkbox
19+
const checkbox = document.createElement("input");
20+
checkbox.type = "checkbox";
21+
checkbox.checked = todoItem.hecha;
22+
item.appendChild(checkbox);
23+
24+
// Descripción tarea
25+
const tareaElem = document.createElement("span");
26+
tareaElem.textContent = todoItem.tarea;
27+
if (todoItem.hecha) {
28+
tareaElem.classList.add("checked");
29+
}
30+
item.appendChild(tareaElem);
31+
32+
// Botón de borrar tarea
33+
const borrar = document.createElement('div');
34+
borrar.innerHTML = '&times;'
35+
borrar.classList.add('boton-borrar');
36+
borrar.addEventListener("click", borrarItem(todoItem));
37+
item.appendChild(borrar);
38+
39+
// Click al item
40+
item.addEventListener("click", marcarItem(todoItem));
41+
42+
listElem.appendChild(item);
43+
}
44+
};
45+
46+
const añadeItem = () => {
47+
const input = document.querySelector<HTMLInputElement>("#texto")!;
48+
if (input.value !== "") {
49+
todoList.push({ tarea: input.value, hecha: false }); // Actualizar modelo
50+
pintarModelo();
51+
input.value = "";
52+
console.log(todoList);
53+
}
54+
};
55+
56+
const marcarItem = (todoItem: TodoItem) => () => {
57+
todoItem.hecha = !todoItem.hecha;
58+
pintarModelo();
59+
}
60+
61+
const borrarItem = (todoItem: TodoItem) => () => {
62+
todoList = todoList.filter(it => it !== todoItem);
63+
pintarModelo();
64+
}
65+
66+
const borrarMarcados = () => {
67+
todoList = todoList.filter(x => !x.hecha);
68+
pintarModelo();
69+
}
70+
71+
const borrarTodos = () => {
72+
todoList = [];
73+
pintarModelo();
74+
}
75+
76+
const programarEventos = () => {
77+
let form = document.querySelector<HTMLFormElement>("form")!;
78+
form.addEventListener("submit", (e: Event) => {
79+
e.preventDefault();
80+
añadeItem();
81+
});
82+
83+
let btnBorrarMarcados = document.querySelector<HTMLButtonElement>('#borrar-marcados')!;
84+
btnBorrarMarcados.addEventListener('click', borrarMarcados);
85+
86+
let btnBorrarTodos = document.querySelector<HTMLButtonElement>('#borrar-todos')!;
87+
btnBorrarTodos.addEventListener('click', borrarTodos);
88+
};
89+
90+
document.addEventListener("DOMContentLoaded", programarEventos);

‎2023-04-22/todos-vanilla/src/prueba.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var a = 0;
2+
console.log(a + 7);

‎2023-04-22/todos-vanilla/src/prueba.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
let a : number = 0;
3+
console.log(a + 7);

‎2023-04-22/todos-vanilla/src/style.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
:root {
2+
font-family: Inter, sans-serif;
3+
}
4+
#todo-list {
5+
list-style-type: none;
6+
padding: 0;
7+
}
8+
#todo-list li {
9+
padding: .6rem 1rem;
10+
border: 1px solid lightgrey;
11+
border-top: none;
12+
display: flex;
13+
flex-direction: row;
14+
align-items: center;
15+
user-select: none;
16+
cursor: pointer;
17+
}
18+
#todo-list li span {
19+
flex: 1;
20+
}
21+
#todo-list li .boton-borrar {
22+
display: none;
23+
}
24+
#todo-list li:hover .boton-borrar {
25+
display: flex;
26+
width: 1rem;
27+
height: 1rem;
28+
padding-bottom: .1rem;
29+
border-radius: 50%;
30+
justify-content: center;
31+
align-items: center;
32+
}
33+
#todo-list li:hover .boton-borrar:hover {
34+
color: white;
35+
background-color: red;
36+
}
37+
#todo-list li:hover {
38+
background-color: #f7f7f7;
39+
}
40+
#todo-list li:first-child {
41+
border-top: 1px solid lightgrey;
42+
}
43+
#todo-list li input[type=checkbox] {
44+
margin-right: 1rem;
45+
}
46+
#todo-list li .checked {
47+
text-decoration: line-through;
48+
}

0 commit comments

Comments
 (0)