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
Start Adventure

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.

Code adventure mockup image

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.
Code adventure mockup image

JavaScript and the DOM

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.
Code adventure mockup image

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.
Code adventure mockup image

DOM Scripting By Example

Use JavaScript to build an RSVP web application. Many of the features you'll build are common to other web applications.
Code adventure mockup image

Using Local Storage With JavaScript

Local Storage is part of the Web Storage API, and allows you, as a developer, to store data in a user's browser.

  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.