Dev Log 365 The Engineering Journal of Jose Aparicio

Debug Log

✗ Bug 1: Ternary without return — value was computed and thrown away

→ Fix: return condition ? valueA : valueB — return goes before the ternary

✗ Bug 2: sumPositive — used external variable instead of arr parameter

→ Fix: function receives arr as a parameter, not an external variable

✗ Bug 3: console.log(sumPositive) without parentheses — logged the function itself, not the result

→ Fix: console.log(sumPositive([1, -4, 7, 12, -3])) — call it with the array

✓ makeNegative ✓ — sumPositive ✓ — reverseString ✓

Code of the day

// Kata 1 — makeNegative (nested ternaries)
function makeNegative(numero) {
  return numero > 0 ? -numero
       : numero < 0 ?  numero
       : 0;
}

// Kata 2 — sumPositive (filter + reduce)
function sumPositive(arr) {
  const positivos = arr.filter(num => num > 0);
  return positivos.reduce((acc, num) => acc + num, 0);
}

// Kata 3 — reverseString (spread operator)
const reverseString = (str) =>
  [...str].reverse().join("");
      

"Every kata hides a concept. The simple exercise teaches more than it looks."

Debug Log

✗ Bug 1: Repo uploaded with an extra folder — GitHub saw campus-crema-react/ inside the repo instead of src/ at the root

→ Fix: git init from inside the correct folder + git push -f to force overwrite

✗ Bug 2: crypto.getRandomValues is not a function — Vite wouldn't start

→ Fix: Node 16 is incompatible with modern Vite. nvm install 20 + nvm use 20 solved it

✗ Bug 3: Dev server broken — module not found

→ Fix: import './Footer.css' was pointing to a file that didn't exist. One word can break the entire server

✗ Bug 4: Remote origin already exists when trying to add the repo URL

→ Fix: git remote set-url origin [url] instead of git remote add

✓ Result: 6 components working, menu grid with images, deployed on Vercel

Code of the day

// Decision: local state per component
// Carousel knows which photo to show — nobody else needs to

function Carousel() {
  const [currentIndex, setCurrentIndex] = useState(0);

  return (
    <div className="carousel">
      <img src={imagenes[currentIndex]} alt="foto" />
      <button onClick={() => setCurrentIndex(i => i - 1)}>←</button>
      <button onClick={() => setCurrentIndex(i => i + 1)}>→</button>
    </div>
  );
}

// Responsive grid with no media queries
// auto-fit does all the work
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
      

"One wrong capital letter, one missing extension — and Vite won't start. React is strict because Node is."

Debug Log

✗ Bug 1: ticket.forEach(("item", => { — extra parenthesis, "item" as a string instead of a parameter

→ Fix: ticket.forEach(item => { — no quotes, no extra parenthesis. Parameters are not strings.

✗ Bug 2: cont resultado — typo. "cont" doesn't exist in JavaScript.

→ Fix: const. Reserved words don't take shortcuts or variations.

✗ Bug 3: ticket.splice(indice, 1) — "indice" existed as an intention, not as a variable.

→ Fix: const guardoIndice = ticket.findIndex(...) first, then splice. Store before using.

✗ Bug 4: addEventListener("click," => — comma inside the quotes.

→ Fix: addEventListener("click", () => — always two arguments, comma outside the quotes.

✓ Menu rendered from data, reactive ticket, quantities and deletion working.

Code of the day

// innerHTML + template literals
ticket.forEach(item => {
  const li = document.createElement("li");
  li.classList.add("ticket-item");
  li.innerHTML = `
    ${item.nombre}
    ${item.cantidad}
    ${item.precio} €
    -
    +
  `;
  li.querySelector(".quitar").addEventListener("click", () => {
    cambiarCantidad(item.id, -1);
  });
  li.querySelector(".agregar").addEventListener("click", () => {
    cambiarCantidad(item.id, +1);
  });
  contenedor.appendChild(li);
});

// splice + findIndex — delete by id
function cambiarCantidad(id, delta) {
  const resultado = ticket.find(item => item.id === id);
  resultado.cantidad += delta;
  if (resultado.cantidad === 0) {
    const guardoIndice = ticket.findIndex(item => item.id === id);
    ticket.splice(guardoIndice, 1);
  }
  renderTicket();
}
      

"Proud of building this. It wasn't easy, but the pattern kept repeating — and that's what's finally sticking."

Pythagoras' Notebook — Full Debug Log

✗ Ex. 4 — Attempt 1: `${this.numero} + ${this.resultado}` — mixing up parameter with property.

→ Fix: this.numero does not exist. The parameter is numero. The property is this.resultado. Fundamental difference.

✗ Ex. 4 — Attempt 2: this.resultado = this.numero + this.numero — still using a property that doesn't exist.

→ Fix: use the PARAMETER numero, not this.numero. Correct: this.resultado = this.resultado + numero;

✓ Ex. 4 — Attempt 3: this.resultado = this.resultado + numero; — it was much simpler than I was making it.

✗ Ex. 5: Semicolons between methods instead of commas.

→ Fix: object methods are separated with ,, not ;. The comma is mandatory.

✗ Ex. 6: this.nivel =+ 1 && this.experiencia === 0 — three errors in one line: =+, && and === where they don't belong.

→ Fix: if(this.experiencia >= 100) { this.nivel += 1; this.experiencia = 0; } — += adds and assigns, = assigns, === only compares.

✓ Ex. 7: First try. Template literals with no errors.

✗ Ex. 8 — Attempt 1: nuevaContraseña.length === this.valor; — comparing instead of assigning.

→ Fix: inside the if I ask with ===; outside I assign with =. Two separate moments.

✗ Ex. 9 — Attempt 1: push[this.nombre, this.precio] — brackets instead of parentheses.

→ Fix: push() is a function → parentheses. The object goes inside curly braces: push({ nombre, precio }).

✗ Ex. 9 — Attempt 2: reduce((acc, item) => item + acc, 0) — summing the whole object instead of item.precio.

→ Fix: item is an object {nombre: "Laptop", precio: 1200}. Need to access the property: item.precio.

✓ Ex. 9 — Attempt 3: return this.items.reduce((acc, item) => item.precio + acc, 0) — correct.

✓ Ex. 10–12: First try on all three. Concept solid.

✗ Ex. 14: persona["nombre", "edad", "ciudad"] = persona — confusing bracket access with destructuring.

→ Fix: destructuring is const { nombre, edad, ciudad } = persona; — it extracts into variables, it does not assign back.

✗ Ex. 15: console.log(nombre.nombrePersona) — confusing destructuring with property access.

→ Fix: { nombre: nombrePersona } creates the variable nombrePersona directly. Used on its own: console.log(nombrePersona).

✗ Ex. 18 — Attempt 1: this.daño >= 0; and this.inventario.push(objeto{...}) — 20 min stuck, broken syntax everywhere.

→ Decision: delete everything and start from scratch. Clear parameters, correct validation, map/join for inventory state.

✓ Ex. 18 — Attempt 2 (final solution): Parameters (nombre, cantidad). Validation if (this.salud < 0). Inventory with map + join. Clean.

Code of the Day — Ex. 18 Final Solution

const jugador = {
  nombre: "José",
  puntos: 18,
  nivel: 10,
  salud: 100,
  inventario: [],

  sumarPuntos(cantidad) {
    this.puntos += cantidad;
  },

  resetearScore() {
    this.puntos = 0;
  },

  subirNivel() {
    this.nivel += 1;
    this.salud += 20;
  },

  recibirDaño(daño) {
    this.salud -= daño;
    if (this.salud < 0) this.salud = 0;
  },

  agregarAlInventario(nombre, cantidad) {
    this.inventario.push({ nombre, cantidad });
  },

  estado() {
    const lista = this.inventario
      .map(item => `${item.nombre} x${item.cantidad}`)
      .join(", ");
    return `${this.nombre} nivel ${this.nivel}, salud ${this.salud}. Inv: ${lista}`;
  }
};
      

Debug Log

✗ Bug 1 (Exercise 2.1 .map()): I wrote numeros.map(num => numeros.num) — tried to access a property that didn't exist. I thought numeros.num was the element.

→ Fix 1: num IS ALREADY the element. I don't need to go back to the array. Should be num => num * 2. Key pattern: inside the callback, the parameter is the data.

✗ Bug 2 (Exercise 2.3 .find() with objects): I wrote usuarios.find(id => id === 2) — the parameter was an OBJECT, not a number. Blocked for 15 minutes.

→ Fix 2: Should be usuarios.find(obj => obj.id === 2). The callback receives objects from the array. I need to access obj.id to get to the number.

✗ Bug 3 (Exercise 2.6 .forEach()): I tried to save the result of .forEach() in a variable. I wrote const iteracion = numeros.forEach(...) and then console.log(iteracion).

→ Fix 3: .forEach() returns nothing (returns undefined). It only executes. The console.log must be INSIDE the callback, not outside.

✗ Bug 4 (Exercise 3.2 .reduce() count): I wrote palabras.reduce((acc, num) => acc + num.length, 0) — summed word lengths instead of counting how many there were.

→ Fix 4: To count, it's not acc + num.length, it's acc + 1. Each iteration adds 1, not the length. I misinterpreted "count" vs "sum lengths".

✗ Bug 5 (Exercise 4.2 map + reduce with objects): After .map() I had an array of NUMBERS [2, 1, 3], but in .reduce() I wrote (acc, obj) => acc + obj.precio — obj was a number, not an object.

→ Fix 5: After each method, the data type CHANGES. .map() converts objects to numbers. So in .reduce() after .map(), the parameter is a number, not an object. I must think about what each step returns.

✗ Bug 6 (Exercise 5.2 spread - join arrays): I wrote const union = [...arr1] + [...arr2] — used + to "add" arrays.

→ Fix 6: + with arrays concatenates as strings: "1,2,34,5,6". For arrays, I need [...arr1, ...arr2] (spread inside brackets).

✗ Bug 7 (Exercise 5.3 destructuring): I did normal access const c1 = colores[0] instead of destructuring.

→ Fix 7: Destructuring is const [c1, c2, c3] = colores. It's cleaner than individual access. New concept but caught it quickly.

✗ Bug 8 (Exercise 5.5 destructuring in parameters): I wrote ({nombre, edad}) => console.log(`${nombre.nombre} tiene ${edad.edad}`) — accessed the object again when it was already destructured.

→ Fix 8: When using destructuring in parameters, I already have the values extracted. It's not nombre.nombre, just nombre. The parameter IS ALREADY the value.

✓ Final result: 18 exercises completed. Mastered methods, reduce(), chaining, spread, destructuring. Still need: automate reduce() and callbacks with objects.

Code of the day

// The pattern that was hardest to understand:
// Callbacks receive the ELEMENT, not the array

// ❌ WRONG (what I did many times):
usuarios.map(usuario => usuario.usuarios.nombre)
productos.reduce((acc, prod) => acc + prod.productos.precio, 0)

// ✅ RIGHT (what I learned):
usuarios.map(usuario => usuario.nombre)
productos.reduce((acc, prod) => acc + prod.precio, 0)

// The parameter (usuario, prod) IS ALREADY the object.
// I don't need to go back to the original array.


// Chaining — the flow:
const resultado = estudiantes
  .filter(est => est.calificacion >= 8)    // objects
  .map(est => est.nombre)                  // strings
  .length                                   // number

// Each step transforms the data type.


// Spread vs +
const arr1 = [1, 2];
const arr2 = [3, 4];

arr1 + arr2  // "1,23,4" (string, WRONG)
[...arr1, ...arr2]  // [1, 2, 3, 4] (array, RIGHT)


// Destructuring — the new thing
const [a, b, ...resto] = [1, 2, 3, 4, 5]
// a = 1, b = 2, resto = [3, 4, 5]
      

"The most common error: confusing the callback parameter (the element) with the original array. Inside a callback, the parameter IS ALREADY what you need."

Debug Log

✗ Bug 1: btnfilter.addEventListener — listener applied to the whole list, not each element

→ Fix: querySelectorAll returns a list — iterate with forEach first

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

→ Fix: anonymous functions always need () before the arrow

✗ Bug 3: myspan.style.textDecoration = "none" && myspan.style.color = "black" — two assignments with &&

→ Fix: each assignment goes on its own line

✗ Bug 4: Extra } brace — SyntaxError: missing ) after argument list

→ Fix: count closing braces — every block opens and closes its own

✓ TodoList working: add, delete, complete and uncomplete all functional

Code of the day

// Checkbox that strikes only the text, not the button
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";
  }
});
      

"I didn't copy anything. Every error was mine — and that's why I remember them."

Debug Log

✗ Bug 1: event used without declaring it as a function parameter

→ Fix: the event arrives as a parameter — function(e) or function(event)

✗ Bug 2: innerHTML() with parentheses — confused a property with a method

→ Fix: properties are assigned with =, methods are called with ()

✗ Bug 3: classList.remove("li") — confused removing an element with removing a CSS class

→ Fix: miLista.remove() with no arguments removes the entire element from the DOM

✗ Bug 4: lista.appendChild(eliminarTarea) — appended the button to the <ul> instead of the <li>

→ Fix: the button belongs to the task (miLista), not to the parent list

✗ Bug 5 (environment): CodePen 2.0 ran the code with no visible errors but nothing worked

→ Fix: switched to JSFiddle — the problem was the environment, not the code

✓ Functional todo list on JSFiddle — add and delete tasks working

Code of the day

// Create task with integrated delete button
añadir.addEventListener("click", function(e) {
  const texto = tarea.value;

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

    // Build the full dish before serving it
    const eliminarTarea = document.createElement("button");
    eliminarTarea.textContent = "Delete";
    eliminarTarea.addEventListener("click", function() {
      miLista.remove(); // removes the element, not a class
    });

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

In action

"CSS for styles. JS for logic. The hover button doesn't need JavaScript — it needs two lines of CSS."

Debug Log

✗ Bug 1: createElement without the document prefix — JS couldn't find the function

→ Fix: always document.createElement(), never bare createElement()

✗ Bug 2: Error span was created before checking if one already existed — duplicate spans on every blur

→ Fix: cleanup conditional always first, before creating anything

✗ Bug 3: Extra }} closed the class early — showSuccess ended up outside

→ Fix: count opening and closing braces. One class, one closing brace.

✗ Bug 4: esCorrecto never updated to true — form never submitted

→ Fix: reset to true before forEach, set to false inside if validarCampos returns false

✓ Result: ValidarFormulario works. Real-time visual feedback. Ready for Campus & Crema.

Code of the day

showError(input, message) {
  // Clean first — then create
  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: the table next to yours in the café."

Debug Log (8 bugs caught)

✗ Bug 1 — Conceptual confusion (Array.from): Didn't understand how Array.from(this.form.querySelectorAll()) accessed the inputs. Assumed there was "magic" implicit binding or automatic access to global scope.

→ Fix: Debugged step by step on paper: (1) this.form = reference to the DOM Form object (stored in constructor), (2) .querySelectorAll() = returns NodeList (collection, NOT array), (3) Array.from() = converts NodeList to iterable array. No magic. Sequential logic.

✗ Bug 2 — Object literal syntax (commas): Forgot commas between properties in the rules object. Code wouldn't compile. Error: SyntaxError: Unexpected identifier

→ Fix: Object literal = property, comma, next property. { email: /.../, password: /.../ }. In JavaScript, methods/properties inside objects use key-value syntax, not separate declarations.

✗ Bug 3 — Template literal in comment: Tried interpolation ${minLength} inside a RegEx comment. Inner quotes broke the syntax. Silent error — interpolation didn't work.

→ Fix: Separated comment outside the RegEx: // Min 8 letters and 1 number. Inline comments can break strings. Clean pattern: executable RegEx, separate comment on next line.

✗ Bug 4 — Missing parentheses: Wrote querySelectorAll('input[required]') without final parentheses. Error: didn't execute the function, just referenced it (returned undefined).

→ Fix: querySelectorAll(...) is a method — ALWAYS needs () at the end. Without parens = function without execution. Pattern: methods = parens, properties = no parens.

✗ Bug 5 — this.init without parentheses (initialization): In the constructor wrote this.init instead of this.init(). Code didn't fail but init() never executed — just stored the function reference.

→ Fix: To CALL a method: parentheses required. this.init(). Without parens = reference without execution. Critical in constructors where you need immediate execution — listeners weren't attaching.

✗ Bug 6 — CSS selector ID vs class: Passed #contact-form as selector but HTML had class="contact-form". Constructor didn't find the form. this.form became null — next line failed.

→ Fix: Check HTML before writing selector. #id-name vs .class-name is different. Pattern: review HTML structure FIRST, then write selectors. Error occurred silently — null doesn't error until using methods on this.form.

✗ Bug 7 — Incorrect this binding (scope): Copied code from a tutorial using arrow functions vs regular methods. Forgot that in ES6 classes, methods use this automatically without needing bind(). But wrote a callback with regular function() {} — lost context.

→ Fix: In ES6 classes, regular methods preserve this automatically. BUT: if you pass a callback to an event listener, use arrow function () => {} to maintain scope. Pattern: class method = regular, callback = arrow.

✗ Bug 8 — Execution order (constructor vs init): Called this.init() BEFORE saving this.form and this.inputs. The init() tried using properties that didn't exist yet. Error: "Cannot read property 'addEventListener' of undefined"

→ Fix: Order matters in constructors. (1) Assign properties, (2) call methods that depend on those properties. The constructor is SEQUENTIAL — each line depends on the previous one. Visualizing on paper helps enormously to see dependency order.

✓ Final result: Completely functional constructor. All inputs with [required] correctly detected. Validation rules ready. isValid state initialized. init() executes in correct order. this.form is not null. Listeners attached correctly. Ready for next phase: validate(), displayError(), removeError() methods.

Code of the Day: FormValidator Constructor

class FormValidator {
  constructor(formSelector) {
    // STORE THE FORM as reference to DOM object
    this.form = document.querySelector(formSelector);

    // FETCH ALL INPUTS REQUIRING VALIDATION
    // querySelectorAll() returns NodeList
    // Array.from() converts NodeList to iterable Array
    this.inputs = Array.from(
      this.form.querySelectorAll('input[required]')
    );

    // DEFINE VALIDATION RULES (Regex)
    // Config-object pattern — scalable and reusable
    this.rules = {
      email: /^[\w\S]+@[\w\S]+\.[\w\S]+$/,
      password: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
      // Email: basic but functional
      // Password: min 8 chars + at least 1 letter + at least 1 number
    };

    // STATE: Is the form valid?
    // Will be updated in validation methods
    this.isValid = false;

    // EXECUTE INITIALIZATION
    // Without parens = reference without execution
    // With parens = execute immediately
    this.init();
  }

  init() {
    // Coming soon: attachEventListeners()
    this.attachEventListeners();
  }
}

// USAGE:
const contactForm = new FormValidator('#contact-form');
// ✓ Instance created
// ✓ Inputs detected
// ✓ Listeners attached
      

"The constructor does NOT validate yet — it only sets the stage. Stores references, defines rules, initializes state. Validation happens in separate methods (validate, displayError). Separation of concerns = maintainable code."

FormValidator Project Roadmap

Debug Log

✗ Naming conflict: this.numero as both DOM element and source of truth simultaneously

→ Fix: separate responsibilities — this.numero (element), this.currentIndex (state)

✗ Nested braces: methods with closing braces in wrong places, creating methods nested inside methods

→ Fix: write } immediately upon opening — never leave braces open

✗ Immediate execution: this.previous() with parentheses in addEventListener — executed on load, not on click

→ Fix: this.previous.bind(this) — pass reference, not invocation

✗ Colliding selector: .my-slide on container and on slides — CSS conflict

→ Fix: rename to .carousel (container) and .slide (items)

✗ Reverse direction: translateX without negative sign — carousel moved backwards

→ Fix: -(this.currentIndex * 100)% — the negative inverts direction

○ Discarded — intentionally simple v0: isMoving (block during animation), goToSlide(position) (click dots), DOMContentLoaded

→ Decision: first make it work clean, then make it robust. Pending improvements for v1.1

✓ Final result: functional carousel, tested, integrated in production, code documented

Code of the day

The carousel's heart: when the index changes, updateUI() recalculates position, updates indicators, and displays the number. Everything flows from there.

class Carousel {
  constructor(selector) {
    this.container = document.querySelector(selector);
    this.track = this.container.querySelector(".track");
    this.slides = this.container.querySelectorAll(".slide");
    this.prevBtn = this.container.querySelector(".prev");
    this.nextBtn = this.container.querySelector(".next");
    this.counter = this.container.querySelector(".counter");
    
    this.currentIndex = 0;
    this.attachButtonListeners();
  }

  // The method that connects state to UI
  updateUI() {
    const offset = -(this.currentIndex * 100);
    this.track.style.transform = `translateX(${offset}%)`;

    document.querySelectorAll(".indicator")
      .forEach((dot, position) => {
        dot.classList.toggle(
          "active",
          position === this.currentIndex
        );
      });

    this.counter.innerText = this.currentIndex + 1;
  }

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.slides.length;
    this.updateUI();
  }

  previous() {
    this.currentIndex = (this.currentIndex - 1 + this.slides.length) 
      % this.slides.length;
    this.updateUI();
  }

  attachButtonListeners() {
    this.prevBtn.addEventListener("click", this.previous.bind(this));
    this.nextBtn.addEventListener("click", this.next.bind(this));
  }
}

// Single instance
const carousel = new Carousel(".carousel-container");
      

"Developers don't memorize syntax. They memorize patterns. Syntax they Google. What matters is understanding why."

Debug Log

✗ Bug 1: item.push[Lunch item] — push called on the item instead of the array

→ Fix: the method belongs to the container, not the element. arr.push(item)

✗ Bug 2: return arr.length — returns a number when the array is expected

→ Fix: if the function promises a list, return the list. return arr

✗ Bug 3: getRandomLunch returns an array when empty and a string otherwise — inconsistent types

→ Fix: a function should always return the same data type across all paths

✗ Bug 4: const maskEmail(email => ...) — mixed syntax between function declaration and arrow function

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

✗ Bug 5: username[0] + + masked — double operator results in NaN

→ Fix: only one + between operands. NaN occurs when JS tries to add an empty gap

✓ Final result: functional email masker for all required cases

Code of the Day

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 without a second argument cuts until the end. You don't need more."

Learning Analysis

Today I discovered that functional programming in JS is like a strainer. filter chooses what passes, map transforms what's inside, and reduce compresses it all into one result.

The hardest part was stop "guessing" and start "reading" console errors. Undefined doesn't scare me anymore; now I know it means I'm looking in the wrong place.

Debug Log

✗ Access Error: products.name returned undefined.

→ Fix: Used products.forEach(p => p.name). You can't ask the list for a name, only the items inside.

✗ Reduce Syntax: reduce(acc, val => ...) failed due to missing parentheses.

→ Fix: reduce((acc, val) => acc + val.price, 0). Always use parentheses for multiple arguments.

✗ Self-reference: const dev = dev.find(...)

→ Fix: Reference the original array developers.find(...). You can't use a variable before it's defined.

Code of the Day

/* Total Inventory Value & Discount */
const totalValue = products.reduce((sum, p) =>
sum + (p.price * p.stock), 0
);

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

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

Debug Log

✗ Bug: Event Bubbling when clicking action buttons on the card.

→ Fix: Used stopPropagation() to isolate button logic from the card container.

✗ Bug: Mana was dropping into negative numbers.

→ Fix: Added an "Early Return" validation and visual error feedback (shake).

✓ Result: Stable tactical engine with UI synchronization.

Code of the Day (Mana System)

function intentarAtacar(carta) {
  if (manaPlayer >= carta.coste) {
    manaPlayer -= carta.coste;
    ejecutarDuelo(carta);
    actualizarBarras();
  } else {
    log.innerText = "Insufficient energy!";
    this.classList.add('shake');
  }
}
      

"Today I moved from programming simple actions to programming interconnected systems."

Debug Log — truncateString

✗ Attempt 1: Code inside backticks without ${}. I asked it to execute and it gave me text.

→ Backticks without interpolation = text.

Code of the day

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

// confirmEnding
function confirmEnding(string, target) {
  return string.slice(-target.length) === target;
}

// esTurnoLegal — hotel rule in code
function esTurnoLegal(turnoAyer, turnoHoy) {
  // logic goes here
}
      

"slice(-n) isn’t a trick. It was always there. I just didn’t know."

Debug Log — truncateString

✗ Attempt 1: return `string... + num` — everything inside backticks without ${}. I asked it to execute something and it gave me back the recipe written on paper.

→ Backticks without ${} are just text with a grave accent. Nothing more.

✗ Attempt 2: return " slice(string... + num)" — swapped backticks for quotes. Same result. Code inside quotes is still a string, not an instruction.

→ Quotes are for data. Not for instructions.

✗ Attempt 3: string.slice(num) — cuts from num to the end. The exact opposite of what I needed.

→ slice(0, num) — from the start to num. The order of the arguments defines the direction.

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

Debug Log — confirmEnding

✗ Error 1: target.length.slice() — numbers don't have slice(). The number goes inside slice(), it doesn't call it.

→ string1.slice(-target.length) — the number is the argument, not the object.

✗ Error 2: if(string1.slice(-2) = string2) — I wasn't comparing. I was assigning.

→ = is an order. === is a question. Inside an if I always ask.

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

Debug Log — isShiftLegal

✗ Architecture error: I wrote the night→morning rule outside the function. Duplicated the logic in the wrong place. And return was giving back a string instead of a boolean. Three errors in three lines.

→ The rule lives inside isShiftLegal. The outside just asks — is this legal? — and acts on it. It doesn't need to know why.

→ return false ≠ return "false". A validation function returns booleans. Always.

✓ Architecture clear. Code pending. Today it's enough to know where the logic has to live.

Code of the day

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

// confirmEnding — negative slice, dynamic
// found it on my own. didn't look for it.
function confirmEnding(string, target) {
  if (string.slice(-target.length) === target) {
    return true;
  } else {
    return false;
  }
}

// isShiftLegal — the hotel rule in code
// receives shiftYesterday and shiftToday
// returns false if the combination is illegal
// returns true if it's valid
// night → morning: always false
// TODO — next session. this front doesn't open
// until it's closed.
function isShiftLegal(shiftYesterday, shiftToday) {
  // the logic lives in here
  // not outside
}
      

"slice(-n) is not a weird trick. It's a tool that was already there and I didn't know it existed. Now I do."

Error pattern of the day — 5 exercises

✗ Card Counting: card <= 0 instead of count <= 0 — confused input with accumulated state.

→ The parameter comes in. The accumulator evolves. Not interchangeable.

✗ Leap Year: %{year} instead of ${year} — template literal syntax error.

→ Template literals use ${}. Always.

✗ Golf Score: strokes >= 2 instead of strokes >= par + 2 — logic disconnected from input.

→ Conditions must depend on parameters, not hardcoded numbers.

✗ Book Organizer: function filteredBooks.filter() — mixed declaration with execution.

→ filter() returns data. It doesn’t define functions.

✗ Quiz Game: computerChoice.answer — assumed structure where there was only a value.

→ Compare value to value: computerChoice === question.answer.

✓ Five exercises completed and validated by freeCodeCamp ✅

Most relevant code of the day

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

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

// includes() for multiple values — Card Counting
if ([10, "J", "Q", "K", "A"].includes(card)) {
  count -= 1;
}
      

"Fluency doesn’t come from understanding more.
It comes from repeating until you don’t have to think."

Debug Log

✗Bug 1: The hamburger button disappeared on mobile.

→Fix: It was inside the nav, which was hidden by media queries.

✗Bug 2: The JS couldn’t find the button for the click event.

→Fix: Moved the button outside the nav and correctly targeted it with getElementById.

✓Final result: fully functional hamburger menu in Campus & Crema.

Code of the Day

// Hamburger menu script (Campus & Crema)
const btn = document.getElementById("hamburgerBtn");
const nav = document.querySelector(".nav");

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

"Interaction is not magic: it's structure + style + logic."

Debug Log

✗ Bug 1 — Unclosed workers array: missing ]; at the end. Syntax error that broke the entire script.

→ Fix: add ];. Arrays, like classes, are closed once.

✗ Bug 2 — Missing comma in object: calendario: [] without a comma before turnosNoche: 0 — JavaScript can't separate properties.

→ Fix: calendario: [], — every property except the last needs a comma.

✗ Bug 3 — Wrong weekend condition: used i === 3 && i === 4 — impossible condition, always false.

→ Fix: compare the remainder using || — i % 7 === 3 || i % 7 === 4. Not the day, the remainder. Not AND, but OR.

✓ console.log(weekendDays) → 104 ✅

Engine code

// January 1st, 2026 is Thursday — anchor point
// i % 7 gives position in the week:
//   remainder 1 = Thursday · remainder 2 = Friday
//   remainder 3 = Saturday · remainder 4 = Sunday
//   remainder 5 = Monday  · remainder 6 = Tuesday
//   remainder 0 = Wednesday

let weekendDays = 0;

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

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

// Next step: assign shifts inside the loop
// morning, afternoon, night with fair rotation
// rule: whoever has fewer free weekends rests first
      

"The % operator doesn’t multiply — it divides and returns the remainder.
That remainder is a map of time."

Debug Log

✗ Bug 1: this.name in describe() returned undefined — the constructor parameter had a different name than the property

→ Fix: this.name = name — the left side is the object property, the right side is the incoming parameter. They are two different things with the same name by convention, not by magic.

✗ Bug 2: addProduct() did not accumulate — the items array was declared outside the constructor instead of as an instance property

→ Fix: this.items = [] inside the constructor. Each Cart instance needs its own cart, not one shared across all instances.

✓ Result: cart.addProduct(leche) and cart.addProduct(pan) — both inside cart.items, ready for getTotal() to sum them using reduce()

Code of the day

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() with reduce() → Day 74
}

const leche = new Product("Milk", 1.20);
const pan   = new Product("Bread", 0.85);
const cart  = new Cart();

cart.addProduct(leche);
cart.addProduct(pan);

console.log(cart.items); // [leche, pan] ✅
      

"Each class has a single responsibility. Product knows what it is. Cart knows what it holds. No one does the other's job."

The Fight with the Code

✗ Bug 1 — Loop: i <= 3 and platos.nombre without index. Array indices are 0,1,2 — index 3 doesn't exist. And platos is the whole array, not a single object.

→ Fix: platos[i].nombre — i is the key. Without it there's no object, just an error.

✗ Bug 2 — Template literal: ${platos[0]} with hardcoded index. The loop existed but i wasn't used — every cycle printed the same dish.

→ Fix: the for declares i to use it. If you don't use it, the loop is pointless.

✗ Bug 3 — Function: tried to pass i as a parameter. i doesn't come from outside — it lives inside the for.

→ Fix: the loop goes inside the function, not the other way around. The function is the box, the loop is the content.

✗ Bug 4 — finalPrice: finalPrice.precio — tried to access a property on a freshly declared empty variable.

→ Fix: finalPrice is an empty container. The value comes from dishData[i].price.

✗ Bug 5 — Parentheses: if(typeof guests === "number") closed the if halfway — the remaining conditions ended up outside the conditional.

→ Fix: count parentheses before running. All conditions must live inside if( ... ).

✓ Lab completed — getPrices() and getDiscount() working. First attempt in the lab after the warm-up.

Code of the day

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"
    );
  }
}

"The i is not a counter. It's the key that unlocks each object in the array."

Current architecture

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

JS pending — Counters

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

// Goal — automatic

// Option 1: count DOM entries
document.querySelectorAll(".entry").length

// Option 2: external JSON index
[{"day": 1, "date": "2026-02-19"}, ...]

// Option 3: parse dates from DOM
// → calculate streak and active days

// Option 4: static generator at build time
// → 11ty / Jekyll calculate before deploy

// Pending until DOM logic is consolidated

⚠️ Technical Debt introduced

✗ Duplicated content between languages

✗ Manual entry synchronisation

✓ Acceptable — small project, two languages, manageable maintenance

→ Revisit before Day 100 if diary exceeds 5,000 lines

Prefer the simplest solution that satisfies the current requirements.

Debug Log

✗Unclosed blocks: recurring error in functions inside array methods.

→The function opens with { and must close with } before the method's ).

✗return with commas: return name, contract, holidays does not create an object.

→An object needs { property: value } — curly braces are mandatory.

✗Template literals inside objects: context confusion.

→Template literals → generate text. Objects → store data. Don't mix them.

✗forEach on wrong array: applied to deck instead of the filter result.

→forEach iterates the filter result, not the original array.

✓Correct logic in all 4 problems. Every error was syntactical, not conceptual.

Code of the day — EquiShift

const fewerHolidays = workers.map(
  function(worker) {

    if(worker.holidaysAvailable === 13){
      return {
        ...worker,
        holidaysAvailable:
          worker.holidaysAvailable - 1
      }
    }

    return worker
  }
);

// Jose María → 12 holidays
// Salvador   → 12 holidays
// Miguel     → 12 holidays
// Diego      → 14 holidays (no change)
// Rafa       → 14 holidays (no change)

"The project grows at the same pace as my learning. Not the other way around."

Debug Log — The 5 Attempts

✗Attempt 1: Confused function name with parameter. Colon instead of arrow.
const formatMachine = formatPrev => 5:

→The parameter is a temporary name, not a fixed value.

✗Attempt 2: const formatPrice = 5 => — the 5 is a concrete passenger, not a seat.

✗Attempt 3: Missing closing backtick. Code died silently.

→Everything that opens must close. No exceptions.

✗Attempt 4: Reversed order — ${amount}${currency} returns "5€" instead of "€5".

✗Attempt 5: Random "bb" at the end of the template literal. Signal of saturation. Strategic pause.

✓Result: function built from scratch with real understanding of every part.

Final Function

// Arrow Function + default parameter
const formatPrice =
  (currency = "€", amount) =>
    `${currency}${amount}`;

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

"Before I used Declarations because it was the only thing I knew. Now I choose consciously."

The decision

Saturation is not a block — it's the symptom of having absorbed too well. When I come back, many things that cost effort today will come naturally. The brain also needs time to compile.

Data model structure

// Each employee — scalable and fair
{
  id: 1,
  nombre: "Jose María",
  contrato: 37.50,
  festivosDisponibles: 13,
  vacacionesDisponibles: 28,
  calendario: [] // Target of the master loop
}
      

Modular rotation algorithm

function calcularTurno(dia, idx) {
  return turnos[
    (dia + idx) % turnos.length
  ];
}
// % guarantees perfect rotation
// regardless of roster size or days
      

"Thinking about architecture before writing code is not wasting time. It's building on rock, not on sand."

Toggle architecture

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

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

// JS — one toggle changes everything
btn.addEventListener('click', () =>
  document.body.classList
    .toggle('dark-mode')
);
      

Modular architecture

+formatPrice() — Processor. Number → money with symbol.

+printTicket() — Interface. Talks to the human.

+makePurchase() — Controller. Coordinates the flow between both.

Generator code

function formatPrice(amount) {
  return `€${amount}`;
}

function printTicket(prod, price) {
  console.log(
    `${prod} → ${price}`
  );
}

function makePurchase(item, val) {
  let r = formatPrice(val);
  printTicket(item, r);
}

makePurchase("Apples", 5);
// → "Apples → €5"
      

Debug Log

✗The Else Conflict: When resetting to 0, the golden effect disappeared so fast it killed the UX.

→Reorganised the if/else flow to prioritise the visual persistence of the milestone reached.

✗Extra parenthesis: {(this... dead code instantly.

✗Dot inside classList: classList has no dot. Orphan character = engine stopped.

→Code blocks must be clean of orphan characters.

Engine code

// Circular engine
if (level >= 10) {
  // Show Legendary Mode first
  activateLegendary();
  level = 0; // then reset
} else {
  level++;
}
      

The pattern that changed everything

// User profile — array inside object
const user = {
  name: "Jose",
  role: "admin",
  permissions: ["read", "write", "delete"]
};

// = destroys the entire array ❌
user.permissions = "publish";
// → permissions: "publish" (string, not array)

// .push() adds to the end ✅
user.permissions.push("publish");
// → ["read","write","delete","publish"]
      

This pattern — object with nested array — is exactly the foundation of the EquiShift data model. Without practising it today, the Day 9 architecture would have been impossible.

JavaScript and Booking Logic

+Smart decision: threw the code away and started from scratch. Demolish the building to build solid foundations.

✗= vs ===: using === in a loop is like asking a question without noting the answer.

✗Semicolon after for: blocked the entire engine. One invisible character, total consequences.

✗The parentheses and braces chaos: the if that was lame for not having its "box".

Code of the day

/* Simplified example of the corrected pattern */
if (activeBooking === true) {
  processBooking();
} else {
  showError();
}
      

Decision code

/* Shadow with direction — Y axis only */
box-shadow: 0 8px 15px
  rgba(0,0,0,0.1);

/* Micro-interaction that feels alive */
.btn:hover {
  transform: translateY(-3px);
  transition: 0.3s ease;
}

/* Aligned input Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
      

My first block of code

<!-- The first real block I wrote -->
<h1>Hello World</h1>
<p>This is my first web page.</p>
      

It wasn't much. But it was mine.
And most importantly: I understood every line.
That was the real beginning.