- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Lista de tareas</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1 class="visually-hidden">Lista de tareas</h1>
<ul class="todo-list">
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Darle de comer al gato</span>
</label>
</li>
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Irse del país</span>
</label>
</li>
<li class="todo-list-item">
<label>
<input class="todo-list-input" type="checkbox">
<span>Darse a la fuga</span>
</label>
</li>
</ul>
<p class="empty-tasks hidden">Todas las tareas completadas. No hay tareas nuevas.</p>
<form class="add-form" action="https://codigoheroe.com/echo" method="post">
<input class="add-form-input" type="text" aria-label="Descripción de la tarea" placeholder="Por ejemplo, comprar un elefante" required>
<button class="add-form-button" type="submit">Agregar tarea</button>
</form>
<template id="task-template">
<li class="todo-list-item">
<label>
<input type="checkbox" class="todo-list-input">
<span></span>
</label>
</li>
</template>
<script src="script.js"></script>
</body>
</html>
CSS
@font-face {
font-weight: 400;
font-family: "Muller";
font-style: normal;
font-display: swap;
src: url("Muller.woff") format("woff");
}
body {
margin: 40px 32px;
font-size: 18px;
line-height: normal;
font-family: "Muller", sans-serif;
}
.visually-hidden,
.todo-list-input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(100%);
}
.hidden {
display: none;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list-item {
margin-bottom: 12px;
}
.todo-list-item label {
display: block;
padding: 12px 18px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
user-select: none;
}
.todo-list-item span {
display: flex;
align-items: center;
}
.todo-list-input + span::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 16px;
background-color: #ffffff;
border: 2px solid #69b253;
border-radius: 4px;
}
.todo-list-input:checked + span::before {
background-color: #69b253;
background-image: url("check-white.svg");
background-repeat: no-repeat;
background-position: center;
}
.todo-list-input:not(:checked):hover + span::before,
.todo-list-input:not(:checked):focus + span::before {
background-color: rgba(105, 178, 83, 0.2);
}
.empty-tasks {
color: #69b253;
}
.empty-tasks::before {
content: "";
width: 14px;
height: 13px;
margin-right: 13px;
background-image: url("check-green.svg");
background-repeat: no-repeat;
background-position: center;
}
.add-form {
display: flex;
}
.add-form-input {
flex-grow: 1;
box-sizing: border-box;
height: 46px;
margin-right: 16px;
padding: 12px;
font: inherit;
border: 1px solid #a1b5c4;
border-radius: 4px;
}
.add-form-input:focus {
border: 1px solid #69b253;
outline: none;
}
.add-form-input:hover {
box-shadow: 0 0 6px rgba(105, 178, 83, 0.6);
}
.add-form-input::placeholder {
color: #a1b5c4;
}
.add-form-button {
flex-shrink: 0;
padding: 12px;
font: inherit;
color: #ffffff;
background-color: #69b253;
border: none;
border-radius: 4px;
user-select: none;
touch-action: manipulation;
}
.add-form-button:hover,
.add-form-button:focus {
background-color: #5aa045;
outline: none;
}
.add-form-button:active {
background-color: #42862e;
}
JavaScript
var list = document.querySelector('.todo-list');
var items = list.children;
var emptyListMessage = document.querySelector('.empty-tasks');
var newItemForm = document.querySelector('.add-form');
var newItemTitle = newItemForm.querySelector('.add-form-input');
var taskTemplate = document.querySelector('#task-template').content;
var newItemTemplate = taskTemplate.querySelector('.todo-list-item');
var toggleEmptyListMessage = function () {
if (items.length === 0) {
emptyListMessage.classList.remove('hidden');
}
};
var addCheckHandler = function (item) {
var checkbox = item.querySelector('.todo-list-input');
checkbox.addEventListener('change', function () {
item.remove();
toggleEmptyListMessage();
});
};
for (var i = 0; i < items.length; i++) {
addCheckHandler(items[i]);
}
newItemForm.addEventListener('submit', function (evt) {
evt.preventDefault();
var taskText = newItemTitle.value;
var task = newItemTemplate.cloneNode(true);
var taskDescription = task.querySelector('span');
taskDescription.textContent = taskText;
addCheckHandler(task);
list.appendChild(task);
});
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
Consola
ObjetivosRealizado
0
- Agrega una rama
elseatoggleEmptyListMessage. Dentro de ella, agrega la clasehiddenaemptyListMessage. - Dentro del manejador, después de agregar
taska la lista, llama atoggleEmptyListMessage. - En la siguiente línea, borra el texto del campo:
newItemTitle.value = '';. - Completa todas las tareas de la lista.
- Agrega una tarea nueva con el texto
Irse de vacaciones. - Elimina la tarea nueva con un clic en su casilla.