Debug Log

✗ Bug 1: btnfilter.addEventListener — listener en la lista entera, no en cada elemento

→ Fix: querySelectorAll devuelve una lista — recorrer con forEach primero

✗ Bug 2: btn.addEventListener("click", =>{ — arrow function sin ()

→ Fix: la función anónima siempre lleva () antes de la flecha

✗ Bug 3: myspan.style.textDecoration = "none" && myspan.style.color = "black" — dos asignaciones con &&

→ Fix: cada asignación va en su propia línea

✗ Bug 4: Llave extra } suelta — SyntaxError: missing ) after argument list

→ Fix: contar llaves de cierre — cada bloque abre y cierra el suyo

✓ TodoList operativa: añadir, eliminar, completar y descompletar funcionan

Código del día

// Checkbox que tacha solo el texto, no el botón
const myspan = document.createElement("span");
myspan.innerText = texto;
miLista.appendChild(myspan);

const completada = document.createElement("input");
completada.type = "checkbox";
miLista.appendChild(completada);

completada.addEventListener("click", () => {
  if (completada.checked) {
    myspan.style.textDecoration = "line-through";
    myspan.style.color = "red";
  } else {
    myspan.style.textDecoration = "none";
    myspan.style.color = "black";
  }
});
      

"No copié nada. Cada error fue mío — y por eso lo recuerdo."

Debug Log

✗ Bug 1: event usado sin declarar como parámetro de la función

→ Fix: el evento llega como parámetro — function(e) o function(event)

✗ Bug 2: innerHTML() con paréntesis — confundí propiedad con método

→ Fix: las propiedades se asignan con =, los métodos se llaman con ()

✗ Bug 3: classList.remove("li") — confundí eliminar elemento con eliminar clase CSS

→ Fix: miLista.remove() sin argumentos elimina el elemento entero del DOM

✗ Bug 4: lista.appendChild(eliminarTarea) — metí el botón en el <ul> en vez del <li>

→ Fix: el botón pertenece a la tarea (miLista), no a la lista padre

✗ Bug 5 (entorno): CodePen 2.0 ejecutaba el código sin errores visibles pero nada funcionaba

→ Fix: migrar a JSFiddle — el problema era el entorno, no el código

✓ Todo list funcional en JSFiddle — añadir y borrar tareas operativos

Código del día

// Crear tarea con botón borrar integrado
añadir.addEventListener("click", function(e) {
  const texto = tarea.value;

  if (texto !== "") {
    const miLista = document.createElement("li");
    miLista.textContent = texto;

    // Montar el plato completo antes de servir
    const eliminarTarea = document.createElement("button");
    eliminarTarea.textContent = "Eliminar";
    eliminarTarea.addEventListener("click", function() {
      miLista.remove(); // elimina el elemento, no una clase
    });

    miLista.appendChild(eliminarTarea); // botón → li
    lista.appendChild(miLista);         // li → ul
    tarea.value = "";
  }
});
      

En acción

"CSS para estilos. JS para lógica. El botón hover no necesita JavaScript — necesita dos líneas de CSS."

Debug Log

✗ Bug 1: document.createElement sin el prefijo document — JS no encontraba la función

→ Fix: siempre document.createElement(), no createElement() suelto

✗ Bug 2: El span de error se creaba antes de comprobar si ya existía uno — spans duplicados en cada blur

→ Fix: el condicional de limpieza siempre al principio del método, antes de crear nada

✗ Bug 3: Llave extra }} cerraba la clase antes de tiempo — showSuccess quedaba fuera

→ Fix: contar llaves de apertura y cierre. Una clase, un cierre.

✗ Bug 4: esCorrecto nunca se actualizaba a true — el formulario nunca se enviaba

→ Fix: resetear a true antes del forEach, y ponerlo a false dentro si validarCampos devuelve false

✓ Resultado: ValidarFormulario funciona. Feedback visual en tiempo real. Lista para Campus & Crema.

Código del día

showError(input, message) {
  // Primero limpia — luego crea
  if (input.nextElementSibling &&
      input.nextElementSibling.classList.contains("error-message")) {
    input.nextElementSibling.remove();
  }
  const error1 = document.createElement("span");
  error1.classList.add("error-message");
  error1.textContent = message;
  input.classList.add("input-error");
  input.after(error1);
}
      

"nextElementSibling: la mesa de al lado en el café."

Debug Log (8 bugs atrapados)

✗ Bug 1 — Confusión conceptual (Array.from): No entendía cómo Array.from(this.form.querySelectorAll()) accedía a los inputs. Asumía que había "magia" de binding implícito o acceso automático al scope global.

→ Fix: Debuggué paso a paso en papel: (1) this.form = referencia al objeto Form del DOM (guardada en constructor), (2) .querySelectorAll() = retorna NodeList (colección, NO array), (3) Array.from() = convierte NodeList a array iterable. Sin magia. Lógica secuencial.

✗ Bug 2 — Sintaxis objeto literal (comas): Olvidé comas entre propiedades en el objeto rules. Código no compilaba. Error: SyntaxError: Unexpected identifier

→ Fix: Objeto literal = propiedad, coma, siguiente propiedad. { email: /.../, password: /.../ }. En JavaScript los métodos/propiedades dentro de objetos usan sintaxis clave-valor, no declaraciones separadas.

✗ Bug 3 — Template literal en comentario: Intenté interpolación ${minLength} dentro de un comentario de RegEx. Las comillas internas rompían la sintaxis. Error silencioso — la interpolación no funcionaba.

→ Fix: Separé comentario fuera de la RegEx: // Mínimo 8 letras y 1 número. Los comentarios inline pueden romper cadenas. Patrón limpio: RegEx ejecutable, comentario separado en línea siguiente.

✗ Bug 4 — Paréntesis faltantes: Escribí querySelectorAll('input[required]') sin los paréntesis finales. Error: no ejecutaba la función, solo la referenciaba (quedaba undefined).

→ Fix: querySelectorAll(...) es un método — SIEMPRE necesita () al final. Sin paréntesis = función sin ejecutar. Patrón: métodos = parens, propiedades = sin parens.

✗ Bug 5 — this.init sin paréntesis (inicialización): En el constructor escribí this.init en lugar de this.init(). El código no fallaba pero init() nunca se ejecutaba — solo se guardaba la referencia a la función.

→ Fix: Para LLAMAR un método: paréntesis obligatorios. this.init(). Sin parens = referencia sin ejecutar. Crítico en constructores donde necesitas ejecución inmediata — el listeners no se attachaban.

✗ Bug 6 — Selector CSS con ID vs clase: Pasé #contact-form como selector pero el HTML tenía class="contact-form". El constructor no encontraba el formulario. this.form quedaba null — siguiente línea fallaba.

→ Fix: Verificar el HTML antes de escribir selector. #id-name vs .class-name es diferente. Patrón: revisar estructura HTML PRIMERO, luego escribir selectores. El error ocurrió silenciosamente — null no dispara error hasta usar métodos en this.form.

✗ Bug 7 — this binding incorrecto (scope): Copié código de un tutorial donde usaban arrow functions vs métodos normales. Olvidé que en clases ES6, los métodos usan this automáticamente sin necesidad de bind(). Pero escribí un callback con function() {} normal — perdía contexto.

→ Fix: En clases ES6, métodos normales conservan this automáticamente. PERO: si pasas un callback a un event listener, usa arrow function () => {} para mantener scope. Patrón: método de clase = normal, callback = arrow.

✗ Bug 8 — Orden de ejecución (constructor vs init): Llamé this.init() ANTES de guardar this.form y this.inputs. El init() intentaba usar propiedades que aún no existían. Error: "Cannot read property 'addEventListener' of undefined"

→ Fix: Orden importa en constructores. (1) Asignar propiedades, (2) llamar métodos que dependen de esas propiedades. El constructor es SECUENCIAL — cada línea depende de la anterior. Visualizar en papel ayuda enormemente a ver orden de dependencias.

✓ Resultado final: Constructor completamente funcional. Todos los inputs con [required] detectados correctamente. Rules de validación listos. Estado isValid inicializado. init() se ejecuta en orden correcto. this.form no es null. Listeners attachados correctamente. Listo para siguiente fase: métodos validate(), displayError(), removeError().

Código del día: Constructor FormValidator

class FormValidator {
  constructor(formSelector) {
    // GUARDAR EL FORMULARIO como referencia al objeto DOM
    this.form = document.querySelector(formSelector);

    // TRAER TODOS LOS INPUTS QUE REQUIEREN VALIDACIÓN
    // querySelectorAll() retorna NodeList
    // Array.from() convierte NodeList a Array iterable
    this.inputs = Array.from(
      this.form.querySelectorAll('input[required]')
    );

    // DEFINIR REGLAS DE VALIDACIÓN (Regex)
    // Patrón config-object — escalable y reutilizable
    this.rules = {
      email: /^[\w\S]+@[\w\S]+\.[\w\S]+$/,
      password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
      // Email: básico pero funcional
      // Password: mínimo 8 caracteres + al menos 1 letra + al menos 1 número
    };

    // ESTADO: ¿El formulario es válido?
    // Se actualizará en métodos de validación
    this.isValid = false;

    // EJECUTAR INICIALIZACIÓN
    // Sin paréntesis = referencia sin ejecutar
    // Con paréntesis = ejecuta inmediatamente
    this.init();
  }

  init() {
    // Próximamente: attachEventListeners()
    this.attachEventListeners();
  }
}

// USO:
const formularioContacto = new FormValidator('#contact-form');
// ✓ Instancia creada
// ✓ Inputs detectados
// ✓ Listeners attachados
      

"El constructor no VALIDA aún — solo prepara el escenario. Almacena referencias, define reglas, inicializa estado. La validación ocurre en métodos separados (validate, displayError). Separación de responsabilidades = código mantenible."

FormValidator Project Roadmap

Debug Log

✗ Conflicto de nombres: this.numero como elemento DOM y como fuente de verdad a la vez

→ Fix: separar responsabilidades — this.numero (elemento), this.indiceActual (estado)

✗ Llaves anidadas: métodos con cierre de llaves en el lugar equivocado, generando métodos dentro de métodos

→ Fix: escribir } inmediatamente al abrir — nunca dejar llaves abiertas

✗ Ejecución inmediata: this.anterior() con paréntesis en addEventListener — se ejecutaba al cargar, no en click

→ Fix: this.anterior.bind(this) — pasar referencia, no invocación

✗ Selector colisionante: .mi-slide en contenedor y en slides — conflicto CSS

→ Fix: renombrar a .carousel (contenedor) y .slide (items)

✗ Dirección inversa: translateX sin signo negativo — carousel movía al revés

→ Fix: -(this.indiceActual * 100)% — el negativo invierte la dirección

○ Descartado — v0 intencionalmente simple: enMovimiento (bloqueo durante animación), iraSlide(posicion) (click en puntitos), DOMContentLoaded

→ Decisión: primero funcione limpio, luego robusto. Mejoras pendientes para v1.1

✓ Resultado final: carousel funcional, tested, integrado en producción, código documentado

Código del día

El corazón del carousel: cuando el índice cambia, actualizarUI() recalcula la posición, actualiza los indicadores, y muestra el número. Todo fluye de ahí.

class Carousel {
  constructor(selector) {
    this.contenedor = document.querySelector(selector);
    this.track = this.contenedor.querySelector(".track");
    this.slides = this.contenedor.querySelectorAll(".slide");
    this.botonPrev = this.contenedor.querySelector(".prev");
    this.botonNext = this.contenedor.querySelector(".next");
    this.numero = this.contenedor.querySelector(".numero");
    
    this.indiceActual = 0;
    this.botonEscuchaActiva();
  }

  // El método que conecta estado con UI
  actualizarUI() {
    const desplazar = -(this.indiceActual * 100);
    this.track.style.transform = `translateX(${desplazar}%)`;

    document.querySelectorAll(".indicador")
      .forEach((punto, posicion) => {
        punto.classList.toggle(
          "active",
          posicion === this.indiceActual
        );
      });

    this.numero.innerText = this.indiceActual + 1;
  }

  siguiente() {
    this.indiceActual = (this.indiceActual + 1) % this.slides.length;
    this.actualizarUI();
  }

  anterior() {
    this.indiceActual = (this.indiceActual - 1 + this.slides.length) 
      % this.slides.length;
    this.actualizarUI();
  }

  botonEscuchaActiva() {
    this.botonPrev.addEventListener("click", this.anterior.bind(this));
    this.botonNext.addEventListener("click", this.siguiente.bind(this));
  }
}

// Instancia única
const carousel = new Carousel(".carousel-container");
      

"Los desarrolladores no memorizan sintaxis. Memorizan patrones. La sintaxis la buscan en Google. Lo importante es entender por qué."

Debug Log

✗ Bug 1: item.push[Lunch item] — push llamado sobre el item en vez del array

→ Fix: el método pertenece al contenedor, no al elemento. arr.push(item)

✗ Bug 2: return arr.length — devuelve un número cuando se espera el array

→ Fix: si la función promete una lista, devuelve la lista. return arr

✗ Bug 3: getRandomLunch devuelve el array en caso vacío y un string en caso normal — tipos inconsistentes

→ Fix: una función debe devolver siempre el mismo tipo en todos sus caminos

✗ Bug 4: const maskEmail(email => ...) — sintaxis mezclada entre function declaration y arrow function

→ Fix: const maskEmail = (email) => { ... }

✗ Bug 5: username[0] + + masked — doble operador produce NaN

→ Fix: un solo + entre operandos. NaN aparece cuando JS intenta sumar un hueco vacío

✓ Resultado final: email masker funcional para todos los casos del enunciado

Código del día

const maskEmail = (email) => {
  const atIndex  = email.indexOf('@')
  const username = email.slice(0, atIndex)
  const domain   = email.slice(atIndex)
  const masked   = "*".repeat(username.length - 2)
  return username[0] + masked + username[username.length - 1] + domain
}

// "apple.pie@example.com" → "a*******e@example.com"
// "freecodecamp@example.com" → "f**********p@example.com"
// "info@test.dev" → "i**o@test.dev"
      

"slice sin segundo argumento corta hasta el final. No necesitas más."

Análisis del Aprendizaje

Hoy he descubierto que la programación funcional en JS es como un colador. filter elige qué pasa, map transforma lo que pasa y reduce lo comprime todo en un solo resultado.

Lo más difícil ha sido dejar de intentar "adivinar" y empezar a "leer" los errores de la consola. El undefined ya no me asusta; ahora sé que significa que estoy buscando en el lugar equivocado.

Debug Log

✗ Error de Acceso: products.name devolvía undefined.

→ Fix: Usar products.forEach(p => p.name). No puedes pedirle el nombre a la lista, sino a cada elemento.

✗ Sintaxis de Reduce: reduce(acc, val => ...) fallaba por falta de paréntesis.

→ Fix: reduce((acc, val) => acc + val.price, 0). Siempre paréntesis si hay más de un argumento.

✗ Auto-referencia: const dev = dev.find(...)

→ Fix: Usar el nombre del array original developers.find(...). No se puede usar la variable que estás creando.

Código del día

/* Valor total del inventario y descuento */
const valorTotal = products.reduce((total, p) =>
total + (p.price * p.stock), 0
);

const conDescuento = products.map(p => ({
...p,
price: p.price * 0.90
}));

/* Filtrado complejo */
const techLowStock = products.filter(p =>
p.category === "tech" && p.stock < 10
);

Debug Log

✗ Bug: Event Bubbling al clickear botones de acción en la carta.

→ Fix: Uso de stopPropagation() para aislar la lógica de botones.

✗ Bug: El maná bajaba a números negativos.

→ Fix: Validación previa con un "Early Return" y feedback visual de error (shake).

✓ Resultado: Motor táctico estable con sincronización de UI.

Código del día (Mana System)

function intentarAtacar(carta) {
  if (manaPlayer >= carta.coste) {
    manaPlayer -= carta.coste;
    ejecutarDuelo(carta);
    actualizarBarras();
  } else {
    log.innerText = "¡Energía insuficiente!";
    this.classList.add('shake');
  }
}
      

"Hoy he pasado de programar acciones a programar sistemas interconectados."

Lo que significa una tarde

Hace un mes esto me habría costado días.

La navbar fija lateral — haberla entendido, haberla depurado, haberla hecho responsive — eso es acumulación. No lo sentí mientras pasaba. Lo vi hoy, cuando terminé antes de lo que esperaba y no sabía muy bien por qué.

En hostelería hay un momento que reconoces en los empleados nuevos: el día que dejan de pensar en los pasos del check-in y empiezan a hablar con el cliente a la vez que los ejecutan. No saben exactamente cuándo ocurrió. Ocurrió.

Hoy fue ese día con el CSS de posicionamiento.

Debug Log

✗ Bug 1 — el main debajo de la navbar: con position: fixed la navbar sale del flujo. El contenido empezaba desde el borde izquierdo, tapado por la navbar.

→ Fix: margin-left: 280px en el #main-doc — el mismo valor que el ancho de la navbar. El contenido se desplaza, la navbar se queda quieta.

✗ Bug 2 — la navbar tapaba el título al hacer clic: al navegar a una sección, el título quedaba escondido detrás de la navbar. El ancla llegaba al píxel exacto pero la navbar lo cubría.

→ Fix: scroll-margin-top: 1rem en cada .main-section. Una línea. Existe exactamente para esto.

✗ Bug 3 — el código de EquiShift rompía el layout: el bloque con el comentario largo se salía del contenedor en pantallas medianas.

→ Fix: overflow-x: auto; white-space: pre-wrap en el pre. El bloque hace scroll horizontal si el código es más largo que el contenedor.

✓ Todos los user stories pasados. GitHub Pages live. La cabeza descansada para volver a JavaScript mañana.

Código del día

/* El patrón completo de navbar fija lateral */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  overflow-y: auto;
}

#main-doc {
  margin-left: 280px; /* mismo valor que la navbar */
}

.main-section {
  scroll-margin-top: 1rem; /* evita que la navbar tape el título */
}

/* Responsive — navbar horizontal en móvil */
@media (max-width: 768px) {
  #navbar {
    position: static;
    width: 100%;
    height: auto;
  }
  #main-doc {
    margin-left: 0;
  }
}
      

"scroll-margin-top existe exactamente para este problema.
Hay propiedades CSS que solo encuentras
cuando tienes el problema que resuelven."

Debug Log — truncateString

✗ Intento 1: return `string... + num` — todo dentro de backticks sin ${}. Le pedí que ejecutara algo y me devolvió la receta escrita en papel.

→ Backticks sin ${} son texto con acento grave. Nada más.

✗ Intento 2: return " slice(string... + num)" — cambié los backticks por comillas. Mismo resultado. El código entre comillas es un string, no una instrucción.

→ Las comillas son para datos. No para órdenes.

✗ Intento 3: string.slice(num) — corta desde num hasta el final. Al revés de lo que necesitaba.

→ slice(0, num) — desde el principio hasta num. El orden de los argumentos define la dirección.

✓ string.slice(0, num) + "..." ✅

Debug Log — confirmEnding

✗ Error 1: target.length.slice() — los números no tienen slice(). El número entra dentro de slice(), no lo llama.

→ string1.slice(-target.length) — el número es el argumento, no el objeto.

✗ Error 2: if(string1.slice(-2) = string2) — no estaba comparando. Estaba asignando.

→ = es una orden. === es una pregunta. Dentro de un if siempre pregunto.

✓ string1.slice(-string2.length) === string2 ✅

Debug Log — esTurnoLegal

✗ Error de arquitectura: escribí la regla noche→mañana fuera de la función. Dupliqué la lógica en el lugar equivocado. Y el return devolvía un string en lugar de un booleano. Tres errores en tres líneas.

→ La regla vive dentro de esTurnoLegal. El exterior solo pregunta — ¿es legal? — y actúa. No necesita saber por qué.

→ return false ≠ return "false". Una función de validación devuelve booleanos. Siempre.

✓ Arquitectura clara. Código pendiente. Hoy es suficiente con saber dónde tiene que vivir la lógica.

Código del día

// truncateString — 6 intentos, 1 solución
function truncateString(string, num) {
  if (string.length > num) {
    return string.slice(0, num) + "...";
  } else {
    return string;
  }
}

// confirmEnding — slice negativo, dinámico
// lo encontré solo. no lo busqué.
function confirmEnding(string, target) {
  if (string.slice(-target.length) === target) {
    return true;
  } else {
    return false;
  }
}

// esTurnoLegal — la regla del hotel en código
// recibe turnoAyer y turnoHoy
// devuelve false si la combinación es ilegal
// devuelve true si es válida
// noche → mañana: siempre false
// TODO — próxima sesión. este frente no se abre
// hasta que esté cerrado.
function esTurnoLegal(turnoAyer, turnoHoy) {
  // la lógica vive aquí dentro
  // no fuera
}
      

"slice(-n) no es un truco raro. Es una herramienta que estaba ahí y yo no sabía que existía. Ahora sí."

Patrón de error del día — 5 ejercicios

✗ Card Counting: card <= 0 en lugar de count <= 0 — confundí entrada con estado acumulado.

→ El parámetro entra. El acumulador evoluciona. No son intercambiables.

✗ Leap Year: %{year} en lugar de ${year} — error de sintaxis en template literal.

→ Template literal = ${}. Siempre.

✗ Golf Score: strokes >= 2 en lugar de strokes >= par + 2 — lógica desacoplada del input.

→ Las condiciones deben depender de los parámetros, no de números fijos.

✗ Book Organizer: function filteredBooks.filter() — mezcla de declaración y ejecución.

→ filter() devuelve datos. No define funciones.

✗ Quiz Game: computerChoice.answer — asumí estructura donde solo había valor.

→ Comparar valor con valor: computerChoice === question.answer.

✓ Cinco ejercicios completados y validados por freeCodeCamp ✅

Código más relevante del día

// sort() con callback propio — Book Organizer
function sortByYear(book1, book2) {
  if (book1.releaseYear < book2.releaseYear) return -1;
  if (book1.releaseYear > book2.releaseYear) return 1;
  return 0;
}

// Math.random() para elemento aleatorio — Quiz Game
function getRandomQuestion(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}

// includes() para múltiples valores — Card Counting
if ([10, "J", "Q", "K", "A"].includes(card)) {
  count -= 1;
}
      

"La soltura no llega entendiendo más.
Llega repitiendo hasta que no tienes que pensar."

Debug Log

✗Bug 1: El botón hamburguesa desaparecía en móvil.

→Fix: Estaba dentro del nav, que se ocultaba con media queries.

✗Bug 2: El JS no encontraba el botón para el evento click.

→Fix: Mover el botón fuera del nav y apuntar correctamente con getElementById.

✓Resultado final: menú hamburguesa totalmente funcional en Campus & Crema.

Código del día

// Script del menú hamburguesa (Campus & Crema)
const btn = document.getElementById("hamburgerBtn");
const nav = document.querySelector(".nav");

btn.addEventListener("click", () => {
  nav.classList.toggle("active");
});
      

"La interacción no es magia: es estructura + estilo + lógica."

Debug Log

✗ Bug 1 — Array trabajadores sin cerrar: faltaba ]; al final del array. Error de sintaxis que bloqueaba todo el script.

→ Fix: ]; al final. Los arrays, como las clases, se cierran una sola vez.

✗ Bug 2 — Coma faltante en objetos: calendario: [] sin coma antes de turnosNoche: 0 — JavaScript no sabe dónde termina una propiedad y empieza la siguiente.

→ Fix: calendario: [], — cada propiedad excepto la última lleva coma al final.

✗ Bug 3 — Condición de fin de semana incorrecta: comparé i === 3 && i === 4 — un número no puede ser dos cosas a la vez. Nunca se cumplía.

→ Fix: comparar el resto con || — i % 7 === 3 || i % 7 === 4. No el día, el resto. No Y, sino O.

✓ console.log(findeSemana) → 104 ✅

Código del motor

// El día 1 de 2026 es jueves — punto de anclaje
// i % 7 da la posición en la semana:
//   resto 1 = jueves · resto 2 = viernes
//   resto 3 = sábado · resto 4 = domingo
//   resto 5 = lunes  · resto 6 = martes
//   resto 0 = miércoles

let findeSemana = 0;

for (let i = 1; i <= 365; i++) {
  if (i % 7 === 3 || i % 7 === 4) {
    findeSemana += 1;
  }
}

console.log(findeSemana); // → 104 ✅

// Próximo paso: asignar turnos dentro del bucle
// mañana, tarde y noche con rotación equitativa
// criterio: el que menos fines de semana libres
// lleva, descansa primero
      

"El operador % no multiplica — divide y da el resto.
Ese resto es el mapa del tiempo."

Repositorio

Código completo, README actualizado y commits documentados:

github.com/anudoranador87/EquiShift-Málaga-2026

Debug Log

✗ Bug 1: this.name en describe() devolvía undefined — el parámetro del constructor tenía nombre distinto al de la propiedad

→ Fix: this.name = name — el lado izquierdo es la propiedad del objeto, el derecho es el parámetro que entra. Son dos cosas distintas con el mismo nombre por convención, no por magia.

✗ Bug 2: addProduct() no acumulaba — el array items estaba declarado fuera del constructor, no como propiedad de la instancia

→ Fix: this.items = [] dentro del constructor. Cada instancia de Cart necesita su propio carrito, no uno compartido entre todas.

✓ Resultado: cart.addProduct(leche) y cart.addProduct(pan) — ambos en cart.items, listos para que getTotal() los sume con reduce()

Código del día

class Product {
  constructor(name, price) {
    this.name  = name;
    this.price = price;
  }
  describe() {
    return `${this.name} — €${this.price}`;
  }
}

class Cart {
  constructor() {
    this.items = [];
  }
  addProduct(product) {
    this.items.push(product);
  }
  // getTotal() con reduce() → Día 74
}

const leche = new Product("Leche", 1.20);
const pan   = new Product("Pan",   0.85);
const cart  = new Cart();
cart.addProduct(leche);
cart.addProduct(pan);
console.log(cart.items); // [leche, pan] ✅
      

"Cada clase tiene una sola responsabilidad. Product sabe lo que es. Cart sabe lo que tiene. Nadie hace el trabajo del otro."

La Pelea con el Código

✗ Bug 1 — Loop: i <= 3 y platos.nombre sin índice. El array tiene índices 0,1,2 — el 3 no existe. Y platos es el array entero, no un objeto.

→ Fix: platos[i].nombre — la i es el acceso. Sin ella no hay objeto, hay error.

✗ Bug 2 — Template literal: ${platos[0]} con índice fijo. El loop existe pero la i no se usaba — todos los ciclos imprimían el mismo plato.

→ Fix: el for declara la i para usarla. Si no la usas, el loop no sirve de nada.

✗ Bug 3 — Función: intenté pasar i como parámetro. La i no viene de fuera — vive dentro del for.

→ Fix: el loop va dentro de la función, no al revés. La función es la caja, el loop es el contenido.

✗ Bug 4 — finalPrice: finalPrice.precio — intenté acceder a una propiedad de una variable vacía recién declarada.

→ Fix: finalPrice es un contenedor vacío. El valor viene de dishData[i].price.

✗ Bug 5 — Paréntesis: if(typeof guests === "number") cerraba el if a mitad — las otras condiciones quedaban fuera del condicional.

→ Fix: contar paréntesis antes de ejecutar. Todas las condiciones deben estar dentro de if( ... ).

✓ Lab completado — getPrices() y getDiscount() funcionando. Primer intento en el lab después del calentamiento.

Código del día

function getPrices(taxBoolean) {
  for (let i = 0; i < dishData.length; i++) {
    let finalPrice;
    if (taxBoolean === true)
      finalPrice = dishData[i].price * 1.2;
    else if (taxBoolean === false)
      finalPrice = dishData[i].price;
    else {
      console.log("You need to pass a boolean!");
      return;
    }
    console.log(
      `Dish: ${dishData[i].name} Price: $${finalPrice}`
    );
  }
}

function getDiscount(taxBoolean, guests) {
  getPrices(taxBoolean);
  if (typeof guests === "number" &&
      guests > 0 && guests < 30) {
    let discount = guests < 5 ? 5 : 10;
    console.log("Discount is: $" + discount);
  } else {
    console.log(
      "The second argument must be a number between 0 and 30"
    );
  }
}

"La i no es un contador. Es la llave que abre cada objeto del array."

Arquitectura actual

       ┌───────────────┐
       │  GitHub Pages │
       └───────┬───────┘
               │
   ┌───────────┴───────────┐
   │                       │
diario-365.html     diario-365en.html
   (Spanish)            (English)
   │                       │
   └───────────┬───────────┘
               │
          styles.css

JS pendiente — Contadores

// Estado actual — manual
const STATS = {
  days: 19,
  bugs: 24,
  proj: 4,
  streak: 19
};

// Objetivo — automático

// Opción 1: contar entradas del DOM
document.querySelectorAll(".entry").length

// Opción 2: índice JSON externo
[{"day": 1, "date": "2026-02-19"}, ...]

// Opción 3: parsear fechas del DOM
// → calcular racha y días activos

// Opción 4: generador estático en build
// → 11ty / Jekyll calculan antes del deploy

// Pendiente hasta afianzar lógica DOM

⚠️ Technical Debt introducido

✗ Contenido duplicado entre idiomas

✗ Sincronización manual de entradas

✓ Aceptable — proyecto pequeño, dos idiomas, mantenimiento manejable

→ Revisar antes del Día 100 si el diario supera las 5.000 líneas

Prefer the simplest solution that satisfies the current requirements.

Debug Log

✗case default mal escrito: puse case default: como si fuera un case normal.

→El default no compara nada — captura todo lo que no coincidió. No lleva case delante.

✗addEventListener sin referencia: addEventListener('click', fn) sin el elemento delante.

→Sin referencia JS no sabe a quién escuchar. Siempre: elemento.addEventListener()

✗find() sin condición: return buscoNombre.nombre devuelve el valor, no compara.

→find() necesita === — una condición que devuelva true o false.

✗código fuera del addEventListener: la batalla se ejecutaba al cargar la página, no al hacer clic.

→Todo lo que depende del clic tiene que vivir dentro de las {} del listener.

✓Sistema de batalla funcionando — clic en carta real dispara batalla real en consola.

Código del día — Sistema de Batalla

const mazo = [
  { nombre: "Dragón", tipo: "fuego", ataque: 95, defensa: 40 },
  { nombre: "Sirena", tipo: "agua",  ataque: 60, defensa: 80 },
  { nombre: "Fénix",  tipo: "fuego", ataque: 85, defensa: 50 },
  // ...
];

cartas.forEach((carta) => {
  carta.addEventListener('click', function() {

    // 1. Carta del jugador — lee data-nombre del HTML
    const nombreElegido = this.dataset.nombre;
    const cartaJugador = mazo.find(function(b){
      return b.nombre === nombreElegido;
    });

    // 2. Carta de la máquina — al azar
    const cartaMaquina = mazo[
      Math.floor(Math.random() * mazo.length)
    ];

    // 3. Batalla
    if(cartaJugador.ataque > cartaMaquina.ataque) {
      console.log(`${nombreElegido} (${cartaJugador.ataque})
vs ${cartaMaquina.nombre} (${cartaMaquina.ataque})
→ ¡Gana ${nombreElegido}!`);
    } else {
      console.log(`¡Gana la máquina con ${cartaMaquina.nombre}!`);
    }

  });
});

"En recepción: Reservada → Check-in → En casa → Check-out. En código: arr[0] → arr[1] → arr[2] → arr[3]. Llevo 8 años gestionando estados sin saberlo."

Debug Log

✗Bloques mal cerrados: error recurrente en funciones dentro de métodos de array.

→La función abre con { y debe cerrarse con } antes del ) del método.

✗return con comas: return nombre, contrato, festivos no crea un objeto.

→Un objeto necesita { propiedad: valor } — las llaves son obligatorias.

✗Template literals dentro de objetos: confusión de contexto.

→Template literals → generar texto. Objetos → almacenar datos. No se mezclan.

✗forEach sobre array incorrecto: aplicado a mazo en lugar del resultado de filter.

→El forEach recorre el resultado del filter, no el array original.

✓Lógica correcta en los 4 problemas. Todos los errores fueron de sintaxis, no de concepto.

Código del día — EquiShift

const menosFestivo = trabajadores.map(
  function(trabajador) {

    if(trabajador.festivosDisponibles === 13){
      return {
        ...trabajador,
        festivosDisponibles:
          trabajador.festivosDisponibles - 1
      }
    }

    return trabajador
  }
);

// Jose María → 12 festivos
// Salvador   → 12 festivos
// Miguel     → 12 festivos
// Diego      → 14 festivos (sin cambios)
// Rafa       → 14 festivos (sin cambios)

"El proyecto crece al mismo ritmo que mi aprendizaje. No al revés."

Debug Log — Los 5 Intentos

✗Intento 1: Confundí nombre de función con parámetro. Dos puntos en lugar de flecha.
const maquinaFormato = formatearPrevio => 5:

→El parámetro es un nombre temporal, no un valor fijo.

✗Intento 2: const formatearPrecio = 5 => — el 5 es un pasajero concreto, no un asiento.

✗Intento 3: Backtick de cierre faltaba. El código moría en silencio.

→Todo lo que abre necesita cerrarse. Sin excepción.

✗Intento 4: Orden invertido — ${cantidad}${moneda} devuelve "5€" en lugar de "€5".

✗Intento 5: El "bb" al final del template literal. Señal de saturación. Pausa estratégica.

✓Resultado: función construida desde cero con comprensión real de cada parte.

Función Final

// Arrow Function + parámetro por defecto
const formatearPrecio =
  (moneda = "€", cantidad) =>
    `${moneda}${cantidad}`;

formatearPrecio(5);        // → "€5"
formatearPrecio("£", 5);   // → "£5"

// Desafío Día 68 — sin pistas
// Añadir unidades → precio total
// (moneda = "€", cantidad, unidades) => ???
      

"Antes usaba Declarations porque era lo único que conocía. Ahora elijo conscientemente."

La decisión

La saturación no es bloqueo — es el síntoma de haber absorbido demasiado bien. Cuando vuelva, muchas cosas que hoy han costado esfuerzo saldrán de forma natural. El cerebro también necesita tiempo para compilar.

Estructura del modelo de datos

// Cada empleado — escalable y justo
{
  id: 1,
  nombre: "Jose María",
  contrato: 37.50,
  festivosDisponibles: 13,
  vacacionesDisponibles: 28,
  calendario: [] // Target del bucle maestro
}
      

Algoritmo de rotación modular

function calcularTurno(dia, idx) {
  return turnos[
    (dia + idx) % turnos.length
  ];
}
// % garantiza rotación perfecta
// sin importar plantilla o días
      

"Pensar la arquitectura antes de escribir código no es perder tiempo. Es construir sobre roca, no sobre arena."

Arquitectura del toggle

/* Design Token System */
:root {
  --bg:   #ffffff;
  --text: #333333;
}

.dark-mode {
  --bg:   #121212;
  --text: #f0f0f0;
}

// JS — un solo toggle lo cambia todo
btn.addEventListener('click', () =>
  document.body.classList
    .toggle('dark-mode')
);
      

Arquitectura modular

+ formatearPrecio() — Procesador. Número → dinero con símbolo.

+ imprimirTicket() — Interfaz. Le habla al humano.

+ realizarCompra() — Controlador. Coordina el flujo entre ambas.

Código del generador

function formatearPrecio(cantidad) {
  return `€${cantidad}`;
}

function imprimirTicket(prod, precio) {
  console.log(
    `${prod} → ${precio}`
  );
}

function realizarCompra(art, val) {
  let r = formatearPrecio(val);
  imprimirTicket(art, r);
}

realizarCompra("Manzanas", 5);
// → "Manzanas → €5"
      

Debug Log

✗ El Conflicto del Else: Al volver a 0, el efecto dorado desaparecía tan rápido que mataba la UX.

→ Reorganización del flujo if/else para priorizar la persistencia visual del hito alcanzado.

✗ Paréntesis extra: {(this... código muerto al instante.

✗ Punto dentro de classList: classList no lleva punto. Carácter huérfano = motor parado.

→ Los bloques de código deben estar limpios de caracteres huérfanos.

Código del motor

// Motor circular
if (nivel >= 10) {
  // Mostrar Modo Legendario primero
  activarLegendario();
  nivel = 0; // luego resetear
} else {
  nivel++;
}
      

El patrón que cambió todo

// Perfil de usuario — array dentro de objeto
const usuario = {
  nombre: "Jose",
  rol: "admin",
  permisos: ["leer", "escribir", "borrar"]
};

// = destruye el array entero ❌
usuario.permisos = "publicar";
// → permisos: "publicar" (string, no array)

// .push() añade al final ✅
usuario.permisos.push("publicar");
// → ["leer","escribir","borrar","publicar"]
      

Este patrón — objeto con array anidado — es exactamente la base del modelo de datos de EquiShift. Sin haberlo practicado hoy, la arquitectura del Día 9 habría sido imposible.

JavaScript y la Lógica de Reservas

+ Decisión inteligente: tiré el código y empecé de cero. Derribar el edificio para construir cimientos sólidos.

✗ = vs ===: usar === en un bucle es como hacer una pregunta sin anotar la respuesta.

✗ Punto y coma tras for: bloqueó todo el motor. Un carácter invisible, consecuencias totales.

✗ El caos de paréntesis y llaves: el if que se quedaba cojo por no tener su "cajita".

Código del día

/* Ejemplo simplificado del patrón corregido */
if (reservaActiva === true) {
  procesarReserva();
} else {
  mostrarError();
}
      

Código de las decisiones

/* Sombra con dirección — eje Y únicamente */
box-shadow: 0 8px 15px
  rgba(0,0,0,0.1);

/* Micro-interacción que se siente viva */
.btn:hover {
  transform: translateY(-3px);
  transition: 0.3s ease;
}

/* Grid de inputs alineado */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
      

Mi primer bloque de código

Hola Mundo
Esta es mi primera página web.
      

No era gran cosa. Pero era mío. Y lo más importante: entendí cada línea. Ese fue el verdadero inicio.