Calculadora JavaScript con Modo Oscuro
Calculadora JavaScript con Modo Oscuro
Una calculadora digital con dos temas distintos: un modo oscuro y un modo claro. Implementa este diseño usando HTML, CSS y JavaScript.
Creado: 11/06/2023 por Dustin Usey
Nivel de habilidad: principiante
Temas utilizados:
Tiempo estimado de finalización: 4 horas
Las operaciones aritméticas básicas deben ser funcionales: suma, resta, multiplicación y división. La tecla "AC" debe borrar la entrada actual y reiniciar la calculadora. La tecla de punto decimal debe permitir cálculos con números decimales. La tecla de igual debe calcular la operación actual y mostrar el resultado. Los iconos de sol y luna se utilizan para alternar entre modos claro y oscuro.
Números en JavaScript
En este curso, aprenderás cómo usar números para tareas útiles en tus programas de JavaScript, incluyendo hacer matemáticas, convertir cadenas a números, generar números aleatorios y más.
JavaScript y el DOM
JavaScript te permite crear páginas web interactivas que pueden responder a las acciones del usuario. En este curso, aprenderás a dar vida a las páginas web usando el poder de JavaScript.
Interactuando con el DOM
Junto con la selección de elementos DOM en JavaScript, también podemos escribir código que les dé comportamiento a los elementos. En este curso, primero exploraremos cómo observar la interacción y responder usando el método addEventListener.
DOM Scripting por Ejemplo
Usa JavaScript para construir una aplicación web RSVP. Muchas de las características que construirás son comunes a otras aplicaciones web.
Usando Almacenamiento Local con JavaScript
Local Storage es parte de la API de Almacenamiento Web y te permite, como desarrollador, almacenar datos en el navegador del usuario.
-
0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
-
1
Usa CSS Flexbox o Grid para diseñar las teclas de la calculadora.
-
2
Usa variables CSS para almacenar los valores de color para los temas de la calculadora.
-
3
Usa JavaScript para agregar escuchadores de eventos a las teclas de la calculadora.
-
4
Usa JavaScript para realizar los cálculos y actualizar la pantalla.
-
5
Usa JavaScript para alternar entre los temas claro y oscuro.
-
6
Desafío Extra: Usa localStorage para guardar el tema actualmente seleccionado y establecer el tema guardado al cargar la página.