Calculadora Digital Neumorfismo
Calculadora Digital Neumorfismo
Una calculadora digital diseñada en la tendencia de diseño neomorfismo. Implementa este diseño usando HTML, CSS y JavaScript.
Creado: 11/06/2023 por Brian Jensen
Nivel de habilidad: principiante
Temas utilizados:
Tiempo estimado de finalización: 2 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.
Diseño de Diseño CSS Flexbox
Flexbox es un conjunto de propiedades de CSS que te proporciona una forma flexible de diseñar contenido.
Diseño de Cuadrícula CSS
CSS Grid Layout proporciona una forma integrada y más eficiente de diseñar diseños basados en cuadrículas en el navegador.
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.
Neumorfismo y CSS
Neumorfismo (también conocido como neomorfismo) es una tendencia de diseño relativamente nueva y un término que ha generado bastante expectativa últimamente. Su estética se caracteriza por una interfaz de usuario minimalista y de aspecto realista.
-
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 JavaScript para agregar escuchadores de eventos a las teclas de la calculadora.
-
3
Usa JavaScript para realizar los cálculos y actualizar la pantalla.
-
4
Desafío Extra: Crea un tema claro de neumorfismo para la calculadora.
-
5
Desafío Extra: Usa variables CSS para almacenar los valores de color para los temas de la calculadora.
-
6
Desafío Extra: Usa JavaScript para alternar entre los temas claro y oscuro.
-
7
Desafío Extra: Usa localStorage para guardar el tema actualmente seleccionado y establecer el tema guardado al cargar la página.