Currency Ticker with Dark/Light Mode

Demonstration

Description

A web application that displays daily currency rates between the Korean won (KRW) and the United States dollar (USD) using an API. Users can toggle a dark/light mode with the moon/sun buttons.

Languages and Utilities Used

• JavaScript ES6 Modules
  The website consists of three JavaScript modules:

  1. getCurrency
     This module fetches the current exchange rate of USD to KRW from an API and displays it on the page. It uses the fetch API to make a GET request to the API endpoint, and then updates the DOM with the response data.

  2. getFluctuation
     This module fetches the fluctuation of the exchange rate of USD to KRW over the past day from an API and displays an arrow icon that indicates the direction of the change (up, down, or no change). It uses the fetch API to make a GET request to the API endpoint, and then updates the DOM with the response data.

  3. toggleClass
     This module toggles a class on a DOM element when the theme toggle button is clicked, to switch between light and dark mode. It uses the classList property of the DOM element to add or remove the class, depending on its current state.

• HTML

• CSS

Environments Used

• Windows 11 Pro (22H2)

Program walk-through:

Launch the website:


Light mode: