"Start by making it work and then make it better." We recommend you follow this advice when working on this (or any) project.
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.
Step 1: Set up the project
If you'd like to build it locally, we recommend that you use vitejs.dev with the vanilla template.
These instructions assume you have
Open your terminal and then run the following command:
npm create vite@latest
cd (change directory) into your new project and install the dependencies by running:
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).
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:
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:
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
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
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:
You can use a template string for easier interpolation.
You need to set the link's
href attribute. This can be done using the
// assumes element is an anchor element node
const value = "some value";
By sending the
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
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.
FetchWrapper class you used throughout the fetch chapters.
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.
5d. Display the conversion rate
Once you have the conversion rate, display it to the user.
The value you're looking for is inside the
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
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.
You can also let us know if you have any feedback by filling out this anonymous feedback form.