.png)
En este proyecto rehice una calculadora moderna y totalmente funcional en JavaScript que incorpora aritmética básica suma, resta, multiplicación y división, operaciones científicas sin, cos, tan, log, raíz y potencia, un interruptor de modo oscuro y claro, y un diseño responsive que se adapta perfectamente a dispositivos móviles. A continuación se explica de forma clara la estructura HTML, el estilo CSS y la lógica JavaScript paso a paso, optimizada para que cualquiera pueda implementarla.
Estructura HTML
La interfaz se organiza dentro de un contenedor principal que incluye un título, una barra con dos botones para alternar modos oscuro y claro y para activar el panel científico, un campo de entrada donde se muestran los números y resultados, una cuadrícula con los botones numéricos y operadores básicos, un botón de borrado y una segunda cuadrícula opcional con las funciones científicas sin, cos, tan, log, raíz, potencia y cierre de paréntesis. Esta arquitectura facilita la lectura del DOM y simplifica la interacción con JavaScript.
Estilos CSS
- Centrando con flexbox: el cuerpo se configura con alineación vertical y horizontal para que la calculadora quede centrada en pantalla. - Modo oscuro y claro: al alternar la clase color en el contenedor se modifica el fondo y, si se desea, el contraste del encabezado para una mejor legibilidad. - Rejilla de botones: la disposición de los botones usa cuadrícula con cuatro columnas proporcionales, logrando una interfaz limpia y consistente. - Diseño responsive: con media queries se ajustan tamaños de botones, tipografía y espaciados para ofrecer una experiencia fluida en móviles.
Lógica JavaScript
1. Selección de elementos Se referencian el campo de entrada para mostrar la expresión y los resultados, y la sección inferior de botones científicos para poder mostrarla u ocultarla dinámicamente.
2. Añadir valores Al pulsar un botón se concatena su valor al contenido del campo de entrada, de modo que el usuario va construyendo la expresión matemática de forma natural.
3. Borrar entrada El botón C limpia el contenido del campo de entrada, útil para reiniciar rápidamente el cálculo.
4. Calcular la expresión Se evalúa la expresión escrita y se actualiza el resultado en pantalla. En caso de que la expresión sea inválida se muestra un mensaje de error. Sugerencia de seguridad y calidad: valida la entrada, controla división por cero y evita cadenas malformadas. Para entornos de producción es recomendable reemplazar eval por un evaluador matemático seguro o por un parser propio.
5. Alternar modo oscuro y claro Se alterna la clase color en el contenedor y una clase en el título para asegurar contraste adecuado en ambos modos.
6. Modo científico Se cambia la visibilidad del panel inferior. Cuando está activo aparecen los botones de funciones trigonométricas sin, cos, tan, logaritmo, raíz cuadrada, operador de potencia y paréntesis de cierre, lo que permite construir expresiones complejas con precisión.
Buenas prácticas adicionales - Accesibilidad: añade roles y etiquetas aria al panel de botones y al campo de entrada. - Teclado: mapea pulsaciones para escribir números, operadores, Enter para calcular y Escape para limpiar. - Prevención de errores: limita operadores consecutivos y comprueba paréntesis balanceados. - Estado visual: proporciona retroalimentación con estados de foco y pulsación en los botones.
¿Por qué este enfoque? Separar claramente estructura, estilos y lógica hace que la calculadora sea fácil de mantener, ampliar y personalizar. Gracias a la cuadrícula de botones y a la clara separación de funciones en JavaScript, puedes añadir nuevas operaciones como exponenciales avanzadas o funciones estadísticas sin reescribir la base.
Q2BSTUDIO, tu socio tecnológico
En Q2BSTUDIO diseñamos y desarrollamos aplicaciones a medida y software a medida con estándares de calidad empresarial, integrando inteligencia artificial cuando aporta valor real. Podemos empaquetar esta calculadora dentro de un panel de negocio, un sistema de informes o incorporarla a un portal de autoservicio, y desplegarla en entornos escalables con servicios cloud aws y azure, garantizando además ciberseguridad y cumplimiento. Si buscas una solución robusta y personalizada, descubre cómo abordamos proyectos de aplicaciones a medida y software a medida con enfoque en rendimiento, accesibilidad y experiencia de usuario.
También ayudamos a crear soluciones con ia para empresas, desde asistentes operativos y agentes IA que automatizan procesos hasta analítica avanzada. Explora nuestras capacidades en inteligencia artificial y descubre cómo combinamos datos, automatización y modelos de lenguaje para mejorar la productividad.
SEO y analítica
Integrar esta calculadora en un panel de indicadores es sencillo con servicios inteligencia de negocio y herramientas como power bi, y se beneficia de una arquitectura segura con ciberseguridad, así como de despliegues eficientes en servicios cloud aws y azure. Nuestro equipo puede añadir trazabilidad de eventos, pruebas E2E y pipelines de CI para que evoluciones la app sin fricciones.
Resumen Has visto cómo construir una calculadora completa con aritmética básica, funciones científicas, modo oscuro y claro y diseño responsive, organizada por capas y lista para ampliarse. Si necesitas llevarla a producción o integrarla en un ecosistema empresarial, Q2BSTUDIO puede ayudarte con desarrollo, automatización de procesos, agentes IA y gobierno de datos de principio a fin.
