Learn JavaScript Logo

Learn JavaScript Projects

Practice your  JavaScript  by building  Projects  you can add to your portfolio.

  1. Projects
  2. CurrencyPro
CurrencyPro project previewed via a mac screen.


  • DOM
  • Fetch API

Use the exchange rate API to convert currency pairs. The user starts by selecting the base currency followed by the target currency. They will then be taken to the results page showing the conversion rate.

This project lets you practice various concepts such as:

  • Reading documentation
  • Fetch API
  • Authentication with Fetch
  • Working with the DOM
  • Page navigation
View Figma designs


The beginner version of this project lets you create a two-page website where you can select and compare the conversion rate between 3 currency pairs. The project uses the exchange rate API from exchangerate-api.com. You will need a free account that does not require a credit card.

"Start by making it work and then make it better." We recommend you follow this advice when working on this (or any) project.

Step 1: Set up the project

You can set up this project in any way you prefer. If you're a beginner and don't have a preference yet, we recommend you either build it online on a platform such as codesandbox.io (using the Vanilla and JavaScript template) or locally.

If you'd like to build it locally, we recommend that you use vitejs.dev with the vanilla template.

ViteJS instructions

These instructions assume you have node and npm installed.

Open your terminal and then run the following command:

npm create vite@latest

Then, enter your project name; for example, currency-pro, and hit enter. Select the Vanilla option with JavaScript, for now.

Then, cd (change directory) into your new project and install the dependencies by running:

npm install

Whenever you want to work on this project, you will need to start the development server with:

npm run dev

Once you have a project where your changes appear in the browser preview, you're ready to move on to the next step.

Step 2: Explore the Exchange Rate API

Visit exchangerate-api.com and sign up for a free account. You do not need to add your credit card details.

The Exchange Rate API also offers free access without needing to create an account and authenticate to the API. However, since this is throttled based on your IP address, there's a high probability that you will hit the limit sooner than you expect. In general, we recommend creating a free account as you will also get to practice authenticating to the API.

We'll use the pair conversion API to build this project. Please read that page.

There are two ways to authenticate with the Exchange Rate API. Read their official authentication guide before moving on. Don't worry if you don't properly understand it as we'll give you some hints when it's time to use the API.

Step 3: Create the landing page

The landing page lists 3 (hardcoded) currencies. The user has to select the base currency and then the target currency. Once they do, the Track exchange rate link will be enabled.

You can find the design of this page using the Figma link above (make sure to look at the design belonging to the Beginner difficulty).

While it would be nice to have the same design, we recommend you start with making the JavaScript functionality work first and then, if you want, you can spend time designing it. In all cases, don't try to tackle both problems (design and functionality) at the same time.

3a. Select your 3 currencies

Select three currencies that you like. Make sure they are supported by the Exchange Rate API (here's a list of currencies they support). Otherwise, you can use the ones we used in the design:

  • USD
  • EUR
  • CAD

3b. Create the currency buttons

For each currency, create a button with the currency text.

Tip: semantic button without styles

As covered in Chapter 118 of Learn HTML CSS, you can create a semantic button element without styles using the following code:

button {
    all: unset;
    outline: revert;
    box-sizing: border-box;

Add the currency code as a data attribute to each button. For example, the Canadian Dollar button should have CAD as a data attribute.

Example button code

Here's an example of how a button with dataset would look like:

<button data-currency="CAD">Canadian Dollar</button>

The user sees the human-readable name (Canadian Dollar) while the currency code is stored in a dataset (data-code) for later use.

3c. Create the Track Exchange Rate anchor

Create the Track Exchange Rate anchor link. By default, make it point to results.html, even though this page doesn't exist yet.

This anchor should be disabled by default as we'll only enable it when the user selects a currency pair.

Step 4: Write the landing page's JS

In this step, we'll write the functionality of the landing page.

4a. Allow the user to select a base currency

Write the necessary JavaScript to allow the user to select one base currency at a time. Store the base currency in a variable for later use.

Additional hints

You will need to select the buttons in the base currency and add an event listener to each button. If a user selects another base currency, you will need to deselect the previous one.

You can read the selected currency code using the dataset property.

4b. Allow the user to select a target currency

Similarly, you want to allow the user to select one target currency and store its currency code for later.

4c. Enable the Track exchange rate link

Once the user selects a base currency and a target currency, you want to enable the Track exchange rate link. You can do this by removing the disabled attribute from the anchor.

At the same time, you must update the link's href to receive the selected base and target currency codes. For example, if the user selected EUR as a base and USD as a target, the link should point to: results.html?base=EUR&target=USD

Additional hints

You can use a template string for easier interpolation.

You need to set the link's href attribute. This can be done using the setAttribute() method.

// assumes element is an anchor element node
const value = "some value";
element.setAttribute("href", `example.html?key=${value}`)

By sending the base and target currencies, we'll later be able to extract them from the URL. Remember that the results.html page does not exist yet.

Step 5: Create the results page

We'll now create the results page. This page will receive the base and target currencies from the URL. It will then use the Exchange Rate API to fetch the conversion rate and display it to the user.

5a. Create the page's HTML

As mentioned before, you can start with very basic HTML for the elements that you will use (base currency, target currency, conversion rate value).

5b. Extract the base and target currencies

We need to extract the base and target currencies from the URL. This can be done using the URLSearchParams API.

Additional hints

You can look up this how to get URL search params use case on codetogo.io.

5c. Fetch the conversion rate

Now that you have the base and target currencies, you can fetch the conversion rate from the Exchange Rate API. We recommend that you start with hardcoded values and only use the correct variables once you got a basic fetch request working.

Remember that you will need to authenticate to the API to be able to access the result. Also, if you've followed the Learn JavaScript course, you can use the same FetchWrapper class you used throughout the fetch chapters.

Additional hints

The easiest way to authenticate is using by prefixing your key in the URL. Your API key is visible in your dashboard once you login to exchangerate-api.com.

You can start by clicking on the Example Request provided on the dashboard and then modifying the URL to use the Pair Conversion API.

Screenshot from the exchange rate API dashboard showing a sample API key with the example request link.

5d. Display the conversion rate

Once you have the conversion rate, display it to the user.

Additional hints

The value you're looking for is inside the conversion_rate key.

Use textContent to set the text content to the conversion rate you got from the fetch requests. Your code should be within the same .then() where you're able to access the conversion_rate.

console.log of the JSON response from the exchange rate API.

Step 6. Improve the project (optional tasks)

Once you've completed all the steps, feel free to work on some of the optional tasks below. Remember that it's important to make things work at first and then make them better. This is why the first optional task is to go back to your code and make it better by refactoring it.

You can also implement or improve the design by making it match the one provided on Figma.

Here are some other improvements you can make:

  • When the user selects a base currency, disable that same currency from the list of target currencies. This prevents the user from choosing the same currency pair; for example, EUR/EUR.
  • Don't allow the user to select a target currency before selecting a base currency.
  • Add the currency flags using emojis. You can write them using your emoji keyboard or using a search engine.
  • Implement the refresh button on the results page by making another call to the Exchange Rate API. However, note that the free plan of the exchange rate API updates once a day. So, this will not have any visible effect.
  • If you'd like to practice your TypeScript skills, create a new project using the TypeScript template and start fixing the errors one by one. Check out Learn TypeScript.

Step 7. Finalize and deploy

Once you're happy with the project, you can build it and deploy it.

If you're using Vite, you can build the project by running npm run build. You can then run npm run preview to preview the production version of the project.

You can then deploy it to any static hosting website, such as Netlify or GitHub pages.

Et voila! You can now use this project in your portfolio! Attribution is not required but appreciated. If you enjoyed this project, please share it with your friends and check out LearnJavaScript.online!

You can also let us know if you have any feedback by filling out this anonymous feedback form.

Learn JavaScript LogoPowered by Learn JavaScript