HTML, CSS y JavaScript

Definición

Toda página web se arma con tres lenguajes que el navegador entiende sin instalar nada. Cada uno tiene un trabajo distinto:

En este módulo construimos la página del menú del Restaurante en línea con los tres. Es el mismo menú que en el módulo 3 pasará a React; lo que aprendas aquí es exactamente lo que React usa por dentro.

HTML: la estructura

HTML describe el contenido con etiquetas. Una etiqueta abre y cierra un elemento (<h1>…</h1>) y puede llevar atributos (<img src="pozole.jpg" alt="Plato de pozole rojo">).

Lo importante es usar la etiqueta que dice qué es cada cosa (HTML semántico), no la que «se ve» como uno quiere:

Por qué importa la semántica:

• Accesibilidad. Un lector de pantalla anuncia «botón, Agregar» o «región principal». Un <div> con un clic no dice nada.
• Buscadores. Google entiende mejor la página cuando las etiquetas dicen qué es cada cosa.
• Mantenimiento. Seis meses después, <aside class="pedido"> se entiende solo.

Cada <input> necesita su <label for="…">: al tocar la etiqueta se activa el campo, y el lector de pantalla sabe qué se pide.

CSS: la presentación

CSS aplica reglas a los elementos que elige un selector:

.platillo .precio {      /* selector: el precio dentro de cada platillo */
  font-weight: 700;      /* propiedad: valor */
}

La cascada. Si dos reglas chocan, gana la más específica (un id pesa más que una clase, y una clase más que una etiqueta) y, a igual peso, la que aparece después. Por eso conviene estilizar casi todo con clases.

El modelo de caja. Todo elemento es una caja: contenido, padding (relleno), border (borde) y margin (separación). Con box-sizing: border-box el ancho que declaras incluye el relleno y el borde, y las cuentas salen como esperas.

Variables. --acento: #1f7a4a; en :root define un color que se reutiliza con var(--acento). Cambiarlo en un lugar cambia toda la página.

Flexbox y Grid

Son las dos herramientas modernas para acomodar elementos:

La cuadrícula de platillos se adapta sola, sin media queries:

.platillos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

«Tantas columnas como quepan, cada una de al menos 180 px». En el celular sale una; en la computadora, tres o cuatro.

Diseño adaptable (responsive)

Más de la mitad de los pedidos llegan desde un celular. Tres piezas lo resuelven:

1. La etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> en el <head>. Sin ella, el celular muestra la versión de computadora en miniatura.
2. Unidades relativas y clamp(): font-size: clamp(1.6rem, 5vw, 2.4rem) crece con la pantalla, sin pasarse.
3. Media queries para los cambios grandes:

@media (max-width: 760px) {
  .contenido { grid-template-columns: 1fr; }  /* el pedido baja debajo del menú */
}

JavaScript: el comportamiento

JavaScript corre en el navegador y puede leer y cambiar la página mientras está abierta. Lo moderno (ES6 en adelante) que usamos:

El DOM

El navegador convierte el HTML en un árbol de objetos: el DOM (Document Object Model). JavaScript lo recorre y lo cambia:

const total = document.querySelector("#total");  // buscar un elemento
total.textContent = "$45.00";                     // cambiar su texto

const li = document.createElement("li");          // crear uno nuevo
li.textContent = "3 × Enchilada verde";
document.querySelector("#lineas").append(li);      // ponerlo en la página

Usa textContent para poner texto. innerHTML interpreta etiquetas, y con datos que escribió alguien más abre la puerta a inyectar código en tu página (XSS).

Eventos

La página reacciona con escuchadores de eventos:

boton.addEventListener("click", () => agregar(platillo.id));
document.querySelector("#propina").addEventListener("input", dibujarPedido);
formulario.addEventListener("submit", (evento) => {
  evento.preventDefault();  // no recargar la página
  // ...armar y enviar el pedido
});

En los filtros usamos delegación: un solo escuchador en el contenedor .filtros que revisa qué botón se tocó con evento.target.closest("button"). Sirve aunque los botones cambien.

Asincronía: promesas, async/await y fetch

Pedir datos a otra computadora tarda. Si JavaScript esperara sin hacer nada, la página se congelaría. Por eso fetch devuelve una promesa: «te aviso cuando llegue». Con async/await el código se lee de arriba abajo:

async function cargarMenu() {
  try {
    const respuesta = await fetch("platillos.json");
    if (!respuesta.ok) throw new Error(`HTTP ${respuesta.status}`);
    menu = await respuesta.json();   // texto JSON → arreglo de objetos
    dibujarMenu("todas");
  } catch (error) {
    estado.textContent = "No se pudo cargar el menú.";
  }
}

Dos detalles que confunden al empezar:

• fetch no falla con un 404 o un 500: la promesa se cumple igual. Por eso revisamos respuesta.ok.
• fetch no funciona con archivos abiertos con doble clic (file://). Hay que servir la carpeta: para eso es servir.mjs.

En el módulo 4 cambiamos "platillos.json" por "/api/platillos", la ruta de Express, y el resto del código queda igual.

Práctica: el menú del restaurante

El código completo está en el repositorio, carpeta modulos/01-html-css-javascript:

1. Descarga el repositorio (o copia los cinco archivos en una carpeta).
2. Abre una terminal en esa carpeta y ejecuta:

node modulos/01-html-css-javascript/servir.mjs

1. Abre http://localhost:5500. Prueba:
   • Toca «Agregar» tres veces en la enchilada verde: el pedido dice 3 × Enchilada verde y el total $45.00.
   • Escribe 10 en la propina: el total pasa a $55.00.
   • Toca «Bebidas»: solo quedan el agua de jamaica y el café de olla.
   • Achica la ventana: debajo de 760 px el pedido baja debajo del menú.
2. Abre las herramientas del navegador (F12), pestaña Consola, y toca «Hacer pedido». Verás el JSON que en el módulo 4 viajará a la cocina.

Este módulo se probó con Node v24.14.1 y Chrome, en 375 px y en pantalla de computadora.

Errores comunes

Quiz del módulo

¿Qué imprime este código?

const total = 45;       // 3 enchiladas
const propina = "10";   // lo que escribió el cliente en un <input>
console.log(total + propina);

1. 55
2. "4510" (el texto 4510)
3. NaN
4. Un error

Respuesta: 2. El valor de un <input> siempre llega como texto, aunque el campo sea type="number". Cuando sumas un número con un texto, JavaScript no suma: convierte el número en texto y los pega (concatena). Resultado: "4510". En un restaurante real, ese pedido de 45 pesos se cobraría como 4,510. El arreglo es convertir antes: total + Number(propina) da 55. Con -, o / JavaScript sí convierte a número ("10" 1 es 10); el + es el único que pega texto. Pruébalo tú: node -e 'console.log(45 + "10", 45 + Number("10"))'.

Referencias

• MDN: HTML, elementos semánticos
• MDN: el modelo de caja de CSS
• MDN: Flexbox
• MDN: CSS Grid
• MDN: introducción al DOM
• MDN: async/await
• MDN: Fetch API
• MDN: suma (+) y conversión de tipos