✅ Tu primer proyecto JavaScript: crea una lista de tareas desde cero

¿Acabas de empezar tu viaje en la programación? Abrázate y abróchate las zapatillas, será divertido 😄
🤖 EN aplicación Kodik enseñamos a escribir código de forma amable: paso a paso, con proyectos, consejos y apoyo.
¡Y esta lista de tareas pendientes es uno de los primeros proyectos que sin duda dominarás! 🚀

🚀 ¿Por qué una lista de tareas pendientes es el primer proyecto ideal?

Lista de tareas pendientes es uno de los proyectos más sencillos y populares con los que comienzan todos los que aprenden desarrollo web. Entrena las habilidades más importantes:

• trabajar con la estructura HTML (DOM),

• interacción con el usuario (eventos),

• lógica, condiciones y algunos ciclos,

• y, lo más importante, ¡es divertido y visual! 🎯

¿Qué necesitas?

• HTML — para establecer la estructura: campo de entrada, botón, lista de tareas.

• CSS — para el diseño básico (puede ser mínimo).

• JavaScript — para que todo funcione: adición, clics, acciones.

📦 Paso 1: Diseño (HTML)

Primero, creamos una página HTML simple donde habrá:

• campo para introducir una nueva tarea;

• botón para añadirla a la lista;

• lista vacía donde aparecerán las tareas.

Es como un cuaderno en blanco en el que escribirás tareas, pero en el navegador.

<div class="todo-container">
  <h1>Мои задачи</h1>
  <input id="taskInput" type="text" placeholder="New task..." />
  <button id="addBtn">Добавить</button>
  <ul id="taskList"></ul>
</div>

🎨 Paso 2: Estilos (CSS)

Con CSS puedes:

• establecer sangrías y alineación;

• hacer que el fondo sea agradable;

• redondear las esquinas de los elementos;

• y simplemente hacer que tu aplicación se vea ordenada.

Este paso no es obligatorio, pero ayuda a sentir lo que estás haciendo este producto, no solo un conjunto de códigos.

.todo-container {
  max-width: 400px;
  margin: auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
}

🧠 Paso 3: ¡JavaScript — ¡a darle vida!

Aquí es donde empieza lo más interesante 💡

«Enseñaremos» al botón a añadir una tarea:

• Cuando el usuario hace clic en el botón, JavaScript toma el texto del campo de entrada.

• Crea un nuevo elemento de lista (li) e inserta este texto en él.

• Añade este elemento a la lista (ul) en la página.

Luego «enseñaremos» a las tareas a reaccionar a un clic:

• Al hacer clic, la tarea se tachará, así mostraremos que se ha completado.

• Además, con un doble clic se puede eliminar.

Todo esto se hace con la ayuda de gestores de eventos - funciones especiales que responden a las acciones del usuario.

const addBtn = document.getElementById("addBtn");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");

addBtn.addEventListener("click", () => {
  const taskText = taskInput.value.trim();
  if (taskText === "") return;

  const li = document.createElement("li");
  li.textContent = taskText;

  li.addEventListener("click", () => {
    li.classList.toggle("done");
  });

  taskList.appendChild(li);
  taskInput.value = "";
});

🧩 Miniejericio: añadir la eliminación de tareas

Intenta terminar el proyecto — añadir la posibilidad eliminar tarea doble clic:

li.addEventListener("dblclick", () => {
  li.remove();
});

Ahora tu lista de tareas pendientes es aún más cómoda 💥

Estaremos encantados de verte en la aplicación Kodika, donde aprender programación es más fácil y rápido.

Y también tenemos Comunidad de Telegram, donde puedes hacer preguntas, mostrar tu código y simplemente encontrar apoyo de otros desarrolladores novatos y experimentados 👨‍💻👩‍💻

La programación es interesante, especialmente cuando estás cerca Kodik y amigos!