Digital Calculator Neumorphism
Digital Calculator Neumorphism
A digital calculator styled in the neumorphism design trend. Implement this design using HTML, CSS, and JavaScript.
Created: 11/06/2023 by Brian Jensen
Skill level: beginner
Topics used: HTML CSS JavaScript
Estimated completion time: 2 Hours
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.
CSS Flexbox Layout
Flexbox is a set of CSS properties that give you a flexible way to lay out content.
CSS Grid Layout
CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.
JavaScript Numbers
In this course, you'll learn how to use numbers for useful tasks in your JavaScript programs, including doing math, converting strings to numbers, generating random numbers, and more.
Neumorphism and CSS
Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI.
-
0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
-
1
Use CSS Flexbox or Grid to layout the calculator keys.
-
2
Use JavaScript to add event listeners to the calculator keys.
-
3
Use JavaScript to perform the calculations and update the display.
-
4
Extra Challenge: Create a neumorphism light theme for the calculator.
-
5
Extra Challenge: Use CSS variables to store the color values for the calculator themes.
-
6
Extra Challenge: Use JavaScript to toggle between the light and dark themes.
-
7
Extra Challenge: Use localStorage to save the currently selected theme and set the saved theme on page load.