Ya sabes cómo trabajar con IA — ahora ponlo en práctica. Primero pídele a la IA que genere una calculadora lista, luego completa 20 tareas para mejorarla una por una.
Por dónde empezar
Antes de comenzar las tareas — pídele a la IA que genere una calculadora básica. Usa este prompt:
Cambiar el color de los botones de operador
Los botones +, −, ×, ÷ y = deben tener un color diferente — por ejemplo naranja o azul. Así se distinguen inmediatamente entre los dígitos.
Agregar un título a la calculadora
Debe haber un encabezado encima de los botones, por ejemplo "Mi Calculadora". Puedes poner el nombre que quieras.
Cambiar el estilo general a tu gusto
Cambia el fondo de la página, la fuente o el border-radius de los botones. Hazlo como te guste — es tu calculadora.
Animación al presionar botón
Al presionar un botón debe "hundirse" ligeramente. Esto hace que la calculadora se sienta viva y agradable.
Cambio de tema
Agrega un botón 🌙 / ☀️ — cambia entre vista oscura y clara. Todo cambia de color suavemente al hacer clic.
El tema se guarda
Si seleccionaste el tema oscuro y recargaste la página — el tema oscuro debe permanecer. El navegador debe recordar la elección.
División por cero — mostrar "Error"
Ahora la calculadora muestra "Infinity" al dividir por cero. Reemplázalo con un mensaje claro "Error" en rojo.
Evitar dos puntos decimales en un número
Si un número ya tiene punto decimal y lo presionas de nuevo — no debe pasar nada. Un punto decimal por número.
Botón ⌫ — borrar último carácter
Agrega un botón ⌫ (retroceso). Presiónalo — se borra el último carácter ingresado. Si no queda nada — muestra "0".
Botón % — calcula porcentajes
Agrega un botón %. Ejemplo: escribe 200 + 10% = y obtienes 220. Útil para cálculos de descuentos.
Botón "Copiar resultado"
Agrega un pequeño botón 📋 junto al display. Presiónalo — el resultado se copia al portapapeles. Aparece "¡Copiado!" por un segundo.
Mostrar los últimos 5 cálculos
Debajo de la calculadora aparece una lista: los últimos 5 ejemplos y sus resultados. Por ejemplo: "2 + 3 = 5".
El historial persiste al recargar
Cerraste la pestaña, la abriste de nuevo — el historial sigue ahí. El navegador recuerda todos tus cálculos.
Mostrar hora de cada cálculo
Junto a cada entrada del historial agrega la hora en que se realizó. Por ejemplo: "14:32".
Clic en entrada — inserta el resultado
Hiciste clic en una entrada del historial — su resultado aparece en el display. Puedes continuar calculando inmediatamente.
Botón de borrar historial con confirmación
Agrega un botón "Borrar historial". Al hacer clic aparece un popup: "¿Estás seguro?" con botones "Sí" y "No".
Soporte de teclado
Puedes calcular sin hacer clic con el ratón: dígitos desde el teclado, Enter = calcular, Escape = resetear, Backspace = borrar carácter.
Tamaño de dígitos en el display
Agrega dos pequeños botones A+ y A−. Presiona A+ — los dígitos en el display se hacen más grandes. A− — más pequeños.
Se ve bien en móvil
Abre la calculadora en un teléfono o reduce la ventana del navegador — debe ser cómoda. Botones grandes, todo cabe en pantalla.
Botón "Modo ingeniero"
Agrega un toggle que revele una fila extra de botones: √ (raíz cuadrada), x² (cuadrado). Presiónalo de nuevo — la fila se oculta.