A digital calculator styled in the neumorphism design trend. Implement this design using HTML, CSS, and JavaScript.
Basic arithmetic operations should be functional: addition, subtraction, multiplication, and division. The "AC" key should clear the current input and reset the calculator. The decimal point key should allow for calculations with decimal numbers. The equals key should compute the current calculation and display the result.
Font Family: Inter
Element | Hex Color |
---|---|
Gradient Blue | #87ceeb |
Gradient Pink | #ffc0cb |
Calculator Background | #50545d |
Screen Background | #cccccc |
Screen Text | #000000 |
Button Text | #ffffff |
-
Use CSS Flexbox or Grid to layout the calculator keys.
-
Use JavaScript to add event listeners to the calculator keys.
-
Use JavaScript to perform the calculations and update the display.
-
Create a neumorphism light theme for the calculator.
-
Use CSS variables to store the color values for the calculator themes.
-
Use JavaScript to toggle between the light and dark themes.
-
Use localStorage to save the currently selected theme and set the saved theme on page load.