Hay días que nos despertamos y no sabemos qué hacer. Pero también hay días que nos despertamos y hay tantas cosas que tenemos que hacer que no sabemos ni por dónde empezar.

Es entonces el momento perfecto para aprender desarrollo web y crear nuestra propia lista de tareas.

Existen muchas formas de crear una to-do list, pero nosotros lo vamos a hacer por la vía simple, usando HTML, CSS y Javascript. Así te sirve para practicar antes de meterte en otros proyectos más gordos.

Como siempre, tienes por aquí la versión en vídeo. Pero también tienes debajo la versión en texto para que puedas copiar y pegar si es lo que quieres.

Lo mejor es que uses el vídeo para ver los pasos y luego pues... si quieres seguir el texto pues mira qué bien. Eres libre.

Lo primero es lo primero.

Parte 1. La interfaz de la lista de tareas.

Crearemos una interfaz típica y muy sencilla, porque hoy no es un día para ponerse a reinventar la rueda.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de tareas</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" type="text/javascript" defer></script>
</head>
<body>
    <div class="list roundBorder">
        <div class="date">
            <div class="dateRight">
                <div id="dateNumber"></div>
                <div>
                    <div id="dateMonth"></div>
                    <div id="dateYear"></div>
                </div>
            </div>
            <div id="dateText"></div>
        </div>
        <form onsubmit="addNewTask(event)" >
            <input type="text" name="taskText" autocomplete="off" placeholder="Nueva tarea" class="roundBorder">
            <button type="submit" class="addTaskButton">+</button>
            <button type="button" class="orderButton roundBorder" onclick="renderOrderedTasks()">Ordenar</button>
        </form>
        <div id="tasksContainer"></div>
    </div>
</body>
</html>

Ya ves que no tiene nada de misterio, la única parte que puede sonar a misterio es que estamos cargando el script usando el atributo defer. Ya en su día hice un artículo explicando la diferencia entre async y defer. Míralo si quieres, no lo mires si no quieres.

Ahora lo que de verdad nos importa es meterle a eso un poco de estilo, para que no nos asustemos al mirarlo.

Código CSS:

:root {
    --primary: #A5C882;
    --secondary: #D33F49;
    --light: #fff;
    --dark: #000;
    --diabled: #e7e7e7;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    height: 100vh;
    background-color: var(--diabled);
}

*:first-letter {
    text-transform: capitalize;
}

.roundBorder {
    border-radius: 5px;
}

.list {
    margin: 25px auto;
    padding: 25px;
    background-color: var(--light);
    width: 100%;
    max-width: 350px;
}

.date {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dateRight {
    display: flex;
    align-items: center;
}

#dateNumber {
    font-size: 50px;
}

#dateText {
    letter-spacing: 3px;
    text-transform: uppercase;
}

#dateMonth,
#dateNumber,
#dateText  {
    font-weight: bold;
}

#dateMonth,
#dateYear {
    margin-left: 7px;
    font-size: 20px;
}

form {
    margin: 20px 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 35px auto;
    grid-column-gap: 15px;
}

input {
    border: none;
    padding-left: 10px;
    background-color: var(--diabled);
}

input:focus {
    outline: none;
}

.addTaskButton,
.orderButton {
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.addTaskButton {
    height: 35px;
    border-radius: 50%;
    font-size: 18px;
    background-color: var(--diabled);
}

.orderButton {
    background-color: var(--secondary);
    color: var(--light);
}

.task {
    background-color: var(--primary);
    padding: 15px;
    margin-top: 15px;
    color: var(--light);
    cursor: pointer;
}

.done {
    background-color: var(--diabled);
    text-decoration: line-through;
    color: var(--dark);
}

Ahora lo que nos faltaría es meterle a eso toda la lógica que controla las acciones de añadir tareas y demás.

Parte 2. Programando la lógica en Javascript.

Crearemos las funciones necesarias para añadir tareas y establecer el estado de las mismas, por ejemplo si ya están completadas o no.

// Info date
const dateNumber = document.getElementById('dateNumber');
const dateText = document.getElementById('dateText');
const dateMonth = document.getElementById('dateMonth');
const dateYear = document.getElementById('dateYear');

// Tasks Container
const tasksContainer = document.getElementById('tasksContainer');

const setDate = () => {
    const date = new Date();
    dateNumber.textContent = date.toLocaleString('es', { day: 'numeric' });
    dateText.textContent = date.toLocaleString('es', { weekday: 'long' });
    dateMonth.textContent = date.toLocaleString('es', { month: 'short' });
    dateYear.textContent = date.toLocaleString('es', { year: 'numeric' });
};

const addNewTask = event => {
    event.preventDefault();
    const { value } = event.target.taskText;
    if(!value) return;
    const task = document.createElement('div');
    task.classList.add('task', 'roundBorder');
    task.addEventListener('click', changeTaskState)
    task.textContent = value;
    tasksContainer.prepend(task);
    event.target.reset();
};

const changeTaskState = event => {
    event.target.classList.toggle('done');
};

const order = () => {
    const done = [];
    const toDo = [];
    tasksContainer.childNodes.forEach( el => {
        el.classList.contains('done') ? done.push(el) : toDo.push(el)
    })
    return [...toDo, ...done];
}

const renderOrderedTasks = () => {
    order().forEach(el => tasksContainer.appendChild(el))
}

setDate();

Y ya está, con eso ya tendrías tu super lista de tareas creada por ti. Puedes modificarla a tu gusto, por ejemplo si te gusta Harry Potter puedes meterle un poco de magia, eso ya depende de ti.

Luego tienes que crear las tareas que vayas a hacer y no te saltes ninguna porque me daré cuenta!

Por cierto, te puedes descargar el código aquí. Y si quieres puedes mirarte el capítulo de cómo crear un cronómetro.

Saludos.