Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > Digital Calculator Neumorphism

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.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Use CSS Flexbox or Grid to layout the calculator keys.

  3. 2

    Use JavaScript to add event listeners to the calculator keys.

  4. 3

    Use JavaScript to perform the calculations and update the display.

  5. 4

    Extra Challenge: Create a neumorphism light theme for the calculator.

  6. 5

    Extra Challenge: Use CSS variables to store the color values for the calculator themes.

  7. 6

    Extra Challenge: Use JavaScript to toggle between the light and dark themes.

  8. 7

    Extra Challenge: Use localStorage to save the currently selected theme and set the saved theme on page load.