Guided: Build a Currency Converter in TypeScript

Welcome to this guided Code Lab where you’ll get some hands-on practice with TypeScript while building a simple Currency Converter application!

This application allows the user to enter an amount, select a from currency and a to currency and then get the amount converted to the to/target currency. You’ll be building this application in steps and in each step you’ll be completing various coding tasks. You are given detailed guidelines to complete those tasks.

While working your way through this application, you’ll learn the basic Typescript syntax including types, inferences & classes, DOM Manipulation, how to make an API call using an HTTP request, asynchronous programming and error handling.

After you complete each task, they can be validated by clicking on the Validate button in each task . If you are stuck or would like to compare solutions, a solution directory has been provided for you as well with the completed project files.

After completing a step, you can build and run the application by doing the following:

1. To build the application, you can give the command npm run build in the Terminal tab of your lab environment. (This will create the transpiled .js files inside the src/dist directory )
2. To run the application, you can give the command npm run start in the Terminal tab. After giving this command, you'll see a URL like this in your Terminal window: http://127.0.0.1:8000/. Clicking on that link will open up the application on a new browser tab, or you can navigate there by clicking on the following link: {{localhost:8000}}

If you are curious to see what the application UI looks like, prior to attempting any tasks, you could still use the above 2 commands to build and run the application. You'll see a page with 2 empty dropdown boxes, an input box to enter the amount & an output box to display the converted amount.

To start off, you need to set up the Currency class to hold the currency codes and names that you'll be using to populate the from and to currency dropdown boxes in the HTML form. You also need to set up the Result class that would hold the result of converting a given amount from the source currency to the target currency. Thereafter, you are required to read the available currencies from a JSON object and load them to the HTML form.

In this step, you'll first define an asynchronous function that takes in the base currency as a string parameter. Thereafter, you should implement the function so that it makes a HTTP GET request using the JavaScript Fetch API i.e. the fetch() function, to fetch the exchange rates for a given base currency for an external API.

In this step, you'll implement the convertCurrency() method of the Util class, to call fetchForexRates() function, obtain the exchange rate for the to currency, from the result of the fetchForexRates() function call and then perform the currency conversion for the amount using the obtained value.

In this step, you'll be binding the functionality to the UI by implementing the handleInput() function to read the input values and call the convertCurrency() method of the Util class. Thereafter, populate the resulting value in the UI and then bind the event handling logic to the event listener of the input event of the form for everything to work.

In this step, you'll mainly perform error handling and formatting. You'll be adding error handling for failed HTTP request in the fetchForexRates() function, and also for invalid user input. You'll also be implementing the formatCurrency() function and use it to format the converted amount in the target currency. You are now done with implementing the Currency Converter in TypeScript! When you use the build command npm run build then the start command npm run start in the Terminal tab and launch the application in the browser as instructed in Step 1, you should see the fully functional Currency Converter in action.

When you type a value in the Amount input box and select from and to currencies, you should see the converted amount in the box below them, formatted in the target currency.