- Ejemplo: resumen automático de un pedido
- Línea por línea
- ¿Quieres verlo en acción con diseño?
- ¿Y ahora?
¡Felicidades! Aprendiste a combinar texto, números, funciones, propiedades y métodos. Ahora puedes hacer cosas útiles como calcular pedidos, transformar textos y mostrar mensajes claros. 🛒
Ejemplo: resumen automático de un pedido
Este pequeño programa simula algo que hacen miles de negocios reales cada día: procesar y mostrar un resumen de un pedido. Veamos los problemas que resuelve:
Abre la consola (clic derecho → Inspeccionar → pestaña Consola) y copia este código:
// Datos del pedido
let producto = 'Chocolate';
let precio = 4500;
let cantidad = 3;
let cliente = 'andrés';
// Procesar datos
let total = precio * cantidad;
let nombreFormateado = cliente.trim().toUpperCase();
let resumen = `🧾 Pedido de ${producto.toUpperCase()} x${cantidad}`;
// Mostrar en consola
console.log(`👋 Hola, ${nombreFormateado}`);
console.log(resumen);
console.log(`💰 Total a pagar: $${total.toFixed(2)} COP`);
console.log('✅ ¡Gracias por tu compra!');
Línea por línea
✅ Guardas datos como el nombre del producto, precio, cantidad y cliente.
✅ Multiplicas el precio por la cantidad para obtener el total a pagar.
✅ Usas .trim(), .toUpperCase() y .toFixed() para limpiar el nombre, ponerlo en mayúsculas y redondear números.
✅ Construyes mensajes como Hola, ANDRÉS y Total a pagar: $13.500 con interpolación.
✅ Tipos de datos: sabes que cliente es un texto (string), precio es un número (number) y que .toFixed() devuelve una cadena (string).
✅ Mensajes claros: presentas la información como lo haría una app de compras real: saludo, detalle del pedido, total y mensaje final.
¿Quieres verlo en acción con diseño?
También creamos una versión en HTML, CSS y JavaScript para que puedas ver cómo este mismo ejemplo se vería en una página web. Puedes probarlo en CodePen y cambiar el nombre del cliente o precio para ver cómo se actualiza todo automáticamente.
👉 Mira el ejemplo en CodePen
Nota: En CodePen no usamos console.log porque no queremos mostrar el resultado en la consola del navegador. En lugar de eso, usamos document.getElementById().textContent para mostrar los mensajes directamente en la pantalla. Pero no te preocupes por eso ahora. Este es solo un ejemplo con fines educativos, para ayudarte a entender cómo funcionan las variables, los cálculos y la salida de información.
¿Y ahora?
Trabajo independiente
Este ejercicio no es obligatorio, pero te ayudará muchísimo a practicar lo que acabas de aprender. Puedes probarlo directamente en la consola del navegador.
✏️ Ejercicio 3: Función con descuento y mensaje especial
Tu tienda ya imprime pedidos. Ahora vas a hacer que la app calcule el total y muestre un mensaje especial si el monto supera cierto valor.
Instrucciones:
- Crea una función llamada
procesarPedido(cliente, producto, precio, cantidad, descuento = 0) - Calcula el total después del descuento
- Si el total supera $10.000, muestra un mensaje especial:
🎉 Envío gratis incluido - Usa
.trim(),.toUpperCase()y.toFixed(2)para formatear - Muestra un mensaje final con todos los datos: cliente, producto, total y el mensaje extra si aplica
- Llama la función al menos dos veces con distintos datos
🎯 Objetivo:
Reutilizar funciones, aplicar lógica condicional y formatear correctamente los datos.
✅ Resultado esperado:
El resumen completo del pedido con o sin mensaje especial, dependiendo del monto final.
Para acceder completo a curso necesitas un plan básico
El plan básico te dará acceso completo a todos los cursos, ejercicios y lecciones de Códica, proyectos y acceso de por vida a la teoría de las lecciones completadas. La suscripción se puede cancelar en cualquier momento.
