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 > JavaScript Calculator with a Dark Mode

JavaScript Calculator with a Dark Mode

JavaScript Calculator with a Dark Mode

A digital calculator with two distinct themes: a dark mode and a light mode. Implement this design using HTML, CSS, and JavaScript.

Desktop icon

Created: 11/06/2023 by Dustin Usey

Skill level: beginner

Topics used: HTML CSS JavaScript

Estimated completion time: 4 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. The sun and moon icons are used to toggle between light and dark modes.

  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 CSS variables to store the color values for the calculator themes.

  4. 3

    Use JavaScript to add event listeners to the calculator keys.

  5. 4

    Use JavaScript to perform the calculations and update the display.

  6. 5

    Use JavaScript to toggle between the light and dark themes.

  7. 6

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