Programación Para Tontos


Este es el proyecto donde todo lo anterior (arrays, funciones, eventos, localStorage) se junta. Si llegaste hasta aquí siguiendo los tutoriales anteriores, esto te va a resultar sorprendentemente familiar.

## Paso 1: el HTML

```html
<form id="formulario-tarea">
  <input type="text" id="nueva-tarea" placeholder="Nueva tarea" />
  <button type="submit">Agregar</button>
</form>
<ul id="lista-tareas"></ul>
```

## Paso 2: el estado de tu app (un array, nada más)

```js
let tareas = JSON.parse(localStorage.getItem('tareas')) || [];
```

Al cargar la página, intentamos recuperar las tareas guardadas. Si no hay nada guardado (primera visita), usamos un array vacío gracias al operador `||`.

## Paso 3: dibuja las tareas en pantalla

```js
function renderizarTareas() {
  const lista = document.querySelector('#lista-tareas');
  lista.innerHTML = '';

  tareas.forEach((tarea, indice) => {
    const item = document.createElement('li');
    item.textContent = tarea;

    const botonBorrar = document.createElement('button');
    botonBorrar.textContent = 'Eliminar';
    botonBorrar.addEventListener('click', () => eliminarTarea(indice));

    item.appendChild(botonBorrar);
    lista.appendChild(item);
  });
}
```

## Paso 4: agrega y elimina tareas, y guarda todo

```js
function guardarTareas() {
  localStorage.setItem('tareas', JSON.stringify(tareas));
}

function eliminarTarea(indice) {
  tareas = tareas.filter((_, i) => i !== indice);
  guardarTareas();
  renderizarTareas();
}

document.querySelector('#formulario-tarea').addEventListener('submit', (evento) => {
  evento.preventDefault();
  const input = document.querySelector('#nueva-tarea');
  const texto = input.value.trim();

  if (texto === '') return;

  tareas.push(texto);
  input.value = '';
  guardarTareas();
  renderizarTareas();
});

renderizarTareas();
```

Cada vez que agregas o eliminas una tarea: actualizas el array, lo guardas en `localStorage`, y vuelves a dibujar la lista completa. Es un patrón que vas a repetir toda tu carrera como desarrollador, así que memorízalo bien (o simplemente guarda este tutorial en favoritos, no hay trampa).

## ¿Qué acabas de aprender?

- Cómo combinar arrays, eventos del DOM y `localStorage` en un proyecto real.
- El patrón "actualizar datos → guardar → volver a dibujar" que vas a usar constantemente.
- Que sí puedes construir algo funcional con lo que ya sabes, sin frameworks todavía.


Combina arrays, eventos y localStorage para construir una lista de tareas real que recuerda tus datos.

Tutorial: construye una lista de tareas (to-do list) completa


Si recargas tu página y todo lo que hiciste desaparece, tu app tiene memoria de pez dorado. `localStorage` es la solución más simple para que recuerde algo, aunque el usuario cierre el navegador.

## Paso 1: guarda un valor

```js
localStorage.setItem('nombre', 'Sofía');
```

`localStorage.setItem(clave, valor)` guarda un dato en el navegador del usuario, en su propia computadora, sin necesidad de un servidor. Sobrevive a recargas de página y hasta a reinicios de la computadora.

## Paso 2: lee el valor guardado

```js
const nombre = localStorage.getItem('nombre');
console.log(nombre); // 'Sofía'
```

Si la clave no existe, `getItem` devuelve `null` en vez de lanzar un error. Siempre es buena idea revisar eso antes de usar el valor.

## Paso 3: guarda objetos (no solo texto)

`localStorage` solo guarda strings, así que para objetos necesitas convertirlos con `JSON`:

```js
const usuario = { nombre: 'Sofía', nivel: 'principiante' };

localStorage.setItem('usuario', JSON.stringify(usuario));

const usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));
console.log(usuarioGuardado.nivel); // 'principiante'
```

`JSON.stringify` convierte un objeto en texto para poder guardarlo. `JSON.parse` hace lo contrario: convierte ese texto de vuelta en un objeto usable. Sin esto, JavaScript te va a devolver el string `"[object Object]"`, que no sirve para absolutamente nada.

## Paso 4: elimina datos guardados

```js
localStorage.removeItem('usuario'); // borra solo esa clave
localStorage.clear(); // borra TODO lo guardado (con cuidado)
```

## ¿Qué acabas de aprender?

- Cómo guardar y leer datos con `setItem` y `getItem`.
- Por qué necesitas `JSON.stringify` / `JSON.parse` para guardar objetos.
- Cómo borrar datos guardados sin arrepentirte después.


Aprende a usar localStorage para recordar información del usuario entre visitas a tu página.

Tutorial: guarda datos en el navegador con localStorage


Hasta ahora tus páginas solo usaban datos que tú mismo escribiste. Hoy vamos a pedirle datos a internet, en vivo, usando `fetch`. Bienvenido al mundo real.

## Paso 1: haz tu primera petición

```js
fetch('https://api.github.com/users/octocat')
  .then((respuesta) => respuesta.json())
  .then((datos) => console.log(datos))
  .catch((error) => console.error('Algo salió mal:', error));
```

`fetch(url)` pide datos a esa dirección. La respuesta llega en un formato que hay que convertir a JSON con `.json()` (que, sorpresa, también es asíncrono, por eso otro `.then`). Si algo falla (sin internet, la API está caída), `.catch` te avisa en vez de romper tu página en silencio.

## Paso 2: la versión moderna con `async/await`

```js
async function obtenerUsuario() {
  try {
    const respuesta = await fetch('https://api.github.com/users/octocat');
    const datos = await respuesta.json();
    console.log(datos.name, datos.public_repos);
  } catch (error) {
    console.error('Algo salió mal:', error);
  }
}

obtenerUsuario();
```

`async/await` es la misma idea que `.then()`, pero se lee de arriba hacia abajo como código normal, en vez de anidarse como una muñeca rusa. `try/catch` cumple el mismo rol que `.catch()`: atrapar errores sin que exploten en la consola.

## Paso 3: muestra los datos en la página

```html
<div id="usuario"></div>
```

```js
async function mostrarUsuario() {
  const respuesta = await fetch('https://api.github.com/users/octocat');
  const datos = await respuesta.json();

  document.querySelector('#usuario').innerHTML = `
    <h3>${datos.name}</h3>
    <p>Repositorios públicos: ${datos.public_repos}</p>
  `;
}

mostrarUsuario();
```

Ahora tu página ya no está atada a datos fijos: muestra información real, actualizada, que ni siquiera vive en tu computadora. Esto es, técnicamente, el 90% de lo que hacen las aplicaciones web modernas.

## ¿Qué acabas de aprender?

- Cómo pedir datos de internet con `fetch`.
- La diferencia entre `.then()` y `async/await` (son la misma idea, distinta sintaxis).
- Cómo manejar errores con `try/catch` sin que tu app se rompa en silencio.


Aprende a usar fetch para pedir datos a internet y mostrarlos en tu página.

Tutorial: consume una API con fetch - clima en vivo


El navegador ya valida algunas cosas solas (`required`, `type="email"`), pero para mensajes de error personalizados necesitas JavaScript. Vamos a validar un formulario de registro simple.

## Paso 1: el HTML

```html
<form id="formulario">
  <input type="text" id="usuario" placeholder="Nombre de usuario" />
  <input type="password" id="clave" placeholder="Contraseña" />
  <button type="submit">Registrarse</button>
  <p id="error" style="color: #ff6b6b;"></p>
</form>
```

## Paso 2: escucha el evento submit

```js
const formulario = document.querySelector('#formulario');
const error = document.querySelector('#error');

formulario.addEventListener('submit', (evento) => {
  evento.preventDefault();
  error.textContent = '';

  const usuario = document.querySelector('#usuario').value;
  const clave = document.querySelector('#clave').value;

  if (usuario.length < 3) {
    error.textContent = 'El usuario debe tener al menos 3 caracteres.';
    return;
  }

  if (clave.length < 6) {
    error.textContent = 'La contraseña debe tener al menos 6 caracteres.';
    return;
  }

  console.log('Formulario válido, enviando...');
});
```

`evento.preventDefault()` evita que la página se recargue (el comportamiento por defecto de un formulario). Sin esa línea, tu mensaje de error aparecería y desaparecería en una fracción de segundo, y pensarías que tu código no funciona cuando en realidad el navegador te está "ayudando" de más.

## Paso 3: valida mientras el usuario escribe (opcional, para nota extra)

```js
document.querySelector('#clave').addEventListener('input', (evento) => {
  const valor = evento.target.value;
  error.textContent =
    valor.length > 0 && valor.length < 6
      ? 'Muy corta todavía...'
      : '';
});
```

El evento `input` se dispara cada vez que el usuario teclea algo. Esto te permite dar retroalimentación instantánea en vez de esperar a que intenten enviar el formulario.

## ¿Qué acabas de aprender?

- Cómo escuchar el evento `submit` y evitar el recargado de página con `preventDefault()`.
- Cómo validar valores con condicionales simples.
- Cómo dar retroalimentación en tiempo real con el evento `input`.


Agrega validación en tiempo real a un formulario HTML usando JavaScript, sin librerías externas.

Tutorial: valida un formulario con JavaScript


Una función es una cajita de instrucciones a la que le pones un nombre para no tener que reescribirlas cada vez. Hoy vas a construir una calculadora de propinas (útil, a diferencia de la mayoría de ejemplos de "hola mundo").

## Paso 1: declara tu primera función

```js
function calcularPropina(cuenta, porcentaje) {
  return cuenta * (porcentaje / 100);
}

console.log(calcularPropina(200, 15)); // 30
```

`function nombre(parametros) { ... }` es la forma clásica de declarar una función. `cuenta` y `porcentaje` son parámetros: valores que le "prestas" a la función cada vez que la usas.

## Paso 2: usa un valor por defecto

```js
function calcularPropina(cuenta, porcentaje = 10) {
  return cuenta * (porcentaje / 100);
}

console.log(calcularPropina(200)); // 20 (usa 10% por defecto)
console.log(calcularPropina(200, 20)); // 40
```

Si no pasas `porcentaje`, JavaScript usa el valor por defecto en vez de darte `undefined`. Menos errores, menos drama.

## Paso 3: la versión moderna - arrow functions

```js
const calcularTotal = (cuenta, propina) => cuenta + propina;

console.log(calcularTotal(200, 30)); // 230
```

Las arrow functions (`=>`) son una forma más corta de escribir funciones, muy comunes en código moderno. Cuando el cuerpo es una sola expresión, ni siquiera necesitas `return` ni llaves.

## Paso 4: combina todo

```js
function resumenDeCuenta(cuenta, porcentajePropina = 10) {
  const propina = calcularPropina(cuenta, porcentajePropina);
  const total = calcularTotal(cuenta, propina);
  return `Cuenta: $${cuenta}, propina: $${propina}, total: $${total}`;
}

console.log(resumenDeCuenta(500, 18));
```

Una función puede llamar a otras funciones. Así es como el código "grande" en realidad son muchas funciones pequeñas trabajando juntas, no un genio escribiendo 500 líneas de corrido.

## ¿Qué acabas de aprender?

- Cómo declarar funciones con parámetros y valores por defecto.
- La sintaxis moderna de arrow functions.
- Que las funciones pueden combinarse para resolver problemas más grandes.


Aprende a declarar y usar funciones en JavaScript creando una pequeña calculadora de propinas.

Tutorial: funciones en JavaScript - empaqueta tu código reutilizable


Si un array es una lista, un objeto es una ficha: un conjunto de datos con nombre, como una tarjeta de presentación. Vamos a construir una.

## Paso 1: crea tu objeto

```js
const persona = {
  nombre: 'Sofía',
  edad: 28,
  profesion: 'Desarrolladora',
  saludar() {
    return `Hola, soy ${this.nombre}`;
  },
};
```

Cada `clave: valor` es una propiedad. `saludar` es un método: una función que vive dentro del objeto. `this.nombre` significa "el nombre de este mismo objeto".

## Paso 2: accede y modifica propiedades

```js
console.log(persona.nombre); // 'Sofía'

persona.edad = 29; // cumplió años, felicidades

console.log(persona.edad); // 29
```

Puedes leer y cambiar propiedades con `objeto.propiedad`. No hace falta pedir permiso, ni firmar nada.

## Paso 3: llama a un método

```js
console.log(persona.saludar()); // 'Hola, soy Sofía'
```

## Paso 4: recorre las propiedades del objeto

```js
for (const clave in persona) {
  if (typeof persona[clave] !== 'function') {
    console.log(`${clave}: ${persona[clave]}`);
  }
}
```

`for...in` recorre todas las claves del objeto. El `if` evita imprimir el método `saludar` como si fuera un dato más (nadie quiere ver el código fuente de una función en su tarjeta de presentación).

## ¿Qué acabas de aprender?

- Cómo crear un objeto con propiedades y métodos.
- Cómo acceder y modificar propiedades con `objeto.propiedad`.
- Cómo recorrer las claves de un objeto con `for...in`.


Aprende a crear y usar objetos en JavaScript construyendo una tarjeta de presentación digital.

Tutorial: objetos en JavaScript - crea una tarjeta de presentación


Un array es una lista ordenada de cosas: tareas pendientes, productos de un carrito, nombres de tus amigos que nunca contestan el chat grupal. Hoy vas a aprender a manipularlos de verdad, no solo a crearlos.

## Paso 1: crea un array y agrega elementos

```js
const tareas = ['Comprar leche', 'Estudiar JavaScript'];

tareas.push('Sacar la basura');

console.log(tareas);
// ['Comprar leche', 'Estudiar JavaScript', 'Sacar la basura']
```

`.push()` agrega un elemento al final del array. Simple, directo, sin drama.

## Paso 2: quita elementos con `.filter()`

```js
const tareasHechas = ['Comprar leche'];

const tareasPendientes = tareas.filter(
  (tarea) => !tareasHechas.includes(tarea)
);

console.log(tareasPendientes);
// ['Estudiar JavaScript', 'Sacar la basura']
```

`.filter()` crea un array nuevo con solo los elementos que cumplen una condición. Aquí nos quedamos con las tareas que NO están en la lista de hechas. El array original no se toca (Filter no destruye, crea).

## Paso 3: transforma cada elemento con `.map()`

```js
const tareasConEmoji = tareas.map((tarea) => `📌 ${tarea}`);

console.log(tareasConEmoji);
// ['📌 Comprar leche', '📌 Estudiar JavaScript', '📌 Sacar la basura']
```

`.map()` recorre el array y devuelve uno nuevo con cada elemento transformado. Es como pasar cada tarea por una máquina que le pega una etiqueta encima.

## Paso 4: recorre el array con `.forEach()`

```js
tareas.forEach((tarea, indice) => {
  console.log(`${indice + 1}. ${tarea}`);
});
```

`.forEach()` es para cuando solo quieres "hacer algo" con cada elemento (como imprimirlo), sin crear un array nuevo.

## ¿Qué acabas de aprender?

- Cómo agregar elementos con `.push()`.
- Cómo filtrar con `.filter()` sin modificar el array original.
- Cómo transformar datos con `.map()` y recorrerlos con `.forEach()`.


Domina los métodos más usados de arrays (push, filter, map) creando una lista de tareas simple.

Tutorial: arrays en JavaScript - organiza una lista de tareas


Si alguna vez copiaste y pegaste la misma línea de código diez veces cambiando solo un número, felicidades: acabas de reinventar (mal) el bucle. Hoy vamos a hacerlo bien.

## Paso 1: el bucle `for`

```js
for (let i = 1; i <= 5; i++) {
  console.log(`Repetición número ${i}`);
}
```

Un `for` tiene tres partes separadas por punto y coma: dónde empieza (`let i = 1`), hasta cuándo continúa (`i <= 5`) y qué cambia en cada vuelta (`i++`, que suma 1). El resultado: cinco líneas impresas sin escribir `console.log` cinco veces.

## Paso 2: recorre un array con `for`

```js
const nombres = ['Ana', 'Luis', 'Sofía'];

for (let i = 0; i < nombres.length; i++) {
  console.log(`Hola, ${nombres[i]}!`);
}
```

`nombres.length` te da el tamaño del array, así el bucle se detiene exactamente donde debe, sin que tengas que contar a mano (ni arriesgarte a un "undefined" vergonzoso).

## Paso 3: el bucle `while`

```js
let intentos = 0;

while (intentos < 3) {
  console.log(`Intento ${intentos + 1}`);
  intentos++;
}
```

`while` repite el bloque mientras la condición sea verdadera. Es perfecto cuando no sabes de antemano cuántas veces se va a repetir (por ejemplo, "hasta que el usuario adivine el número").

## Cuidado con esto

```js
// while (true) { console.log('esto nunca para'); }
```

Si olvidas actualizar la variable que controla la condición, tu bucle nunca termina y tu navegador se congela. A todos nos ha pasado al menos una vez (bueno, técnicamente al menos una vez por semana).

## ¿Qué acabas de aprender?

- Cómo repetir código con `for` y con `while`.
- Cómo recorrer un array usando su `.length`.
- Por qué un bucle infinito es un problema, no una característica.


Aprende for y while creando una lista de saludos repetidos sin copiar y pegar código.

Tutorial: bucles en JavaScript - repite tareas sin volverte loco


Tu código, igual que tú, necesita tomar decisiones todo el día: "si el usuario está logueado, muestra esto; si no, muestra esto otro". Eso se llama una condicional, y hoy vas a construir un semáforo con ellas.

## Paso 1: el `if` más simple

```js
const color = 'rojo';

if (color === 'rojo') {
  console.log('Detente');
}
```

`if (condición)` ejecuta el bloque solo si la condición es verdadera (`true`). Si `color` no fuera `'rojo'`, no pasaría nada. Emocionante, lo sé.

## Paso 2: agrega un `else`

```js
if (color === 'rojo') {
  console.log('Detente');
} else {
  console.log('Puedes avanzar');
}
```

`else` es el plan B: se ejecuta cuando el `if` es falso. Ahora tu código siempre dice algo, en vez de quedarse callado como cuando te preguntan si viste el mensaje.

## Paso 3: encadena varias opciones con `else if`

```js
function semaforo(color) {
  if (color === 'rojo') {
    return 'Detente';
  } else if (color === 'amarillo') {
    return 'Prepárate';
  } else if (color === 'verde') {
    return 'Avanza';
  } else {
    return 'Color desconocido';
  }
}

console.log(semaforo('amarillo')); // 'Prepárate'
```

`else if` te permite revisar varias condiciones en orden, de arriba hacia abajo, hasta que una sea verdadera. El último `else` es tu red de seguridad para cuando nada más aplica (como cuando alguien te manda un color que no existe, porque siempre hay alguien).

## Reto extra

Modifica `semaforo` para que, si le pasas un color en mayúsculas (`'ROJO'`), también funcione correctamente. Pista: busca el método `.toLowerCase()`.

## ¿Qué acabas de aprender?

- Cómo usar `if`, `else` y `else if` para tomar decisiones.
- Que las condiciones se evalúan en orden, de arriba hacia abajo.
- Que un buen `else` final evita que tu código se quede sin respuesta.


Aprende if, else y else if construyendo un semáforo que decide qué mensaje mostrar.

Tutorial: condicionales en JavaScript - un semáforo de decisiones


Ahora que ya tienes una página con HTML y CSS, vamos a agregarle un botón que reaccione cuando alguien haga clic. Tranquilo, nadie va a explotar, es solo JavaScript.

## Paso 1: agrega un botón a tu HTML

En tu archivo `index.html`, dentro de `<body>`, agrega:

```html
<button id="boton-saludo">Saludar</button>
<p id="mensaje"></p>
<script src="script.js"></script>
```

## Paso 2: crea tu archivo JavaScript

Crea `script.js` en la misma carpeta:

```js
const boton = document.querySelector('#boton-saludo');
const mensaje = document.querySelector('#mensaje');

boton.addEventListener('click', () => {
  mensaje.textContent = '¡Hola! Acabas de ejecutar tu primer JavaScript.';
});
```

## Paso 3: prueba en el navegador

Abre `index.html`, haz clic en el botón "Saludar" y observa cómo aparece el mensaje. Si no pasa nada, revisa la consola del navegador antes de culpar a la computadora, casi siempre es un typo (lo sabemos por experiencia, no juzgamos). Acabas de:

1. Seleccionar elementos del HTML desde JavaScript.
2. Escuchar un evento (`click`).
3. Modificar el contenido de la página dinámicamente.

## Reto extra

Modifica el script para que, en lugar de un mensaje fijo, salude usando el valor de un campo de texto:

```html
<input id="nombre" type="text" placeholder="Tu nombre" />
```

```js
const input = document.querySelector('#nombre');

boton.addEventListener('click', () => {
  mensaje.textContent = `¡Hola, ${input.value || 'amigo'}!`;
});
```

¡Felicidades! Ya combinaste HTML, CSS y JavaScript en un solo proyecto. Guárdate ese ego boost, te lo has ganado (aunque tu código tenga un console.log de más por ahí).


Agrega interactividad a tu página web con tu primer script en JavaScript, paso a paso.

JavaScript