Table of Contents

1. Challenge

   Introduction to the Currency Converter App

   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 target currency. You’ll build the application step by step, completing specific coding tasks with detailed instructions.

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

   After you complete a task, click the Validate button to check your work. If you get stuck or want to compare solutions, you can refer to the solution directory, which contains the completed project files.

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

   1. In the Terminal tab, run npm run build to build the application.
      • This creates the transpiled .js files inside the src/dist directory.
   2. Run npm run start to start the application.
      • The Terminal shows a URL such as http://127.0.0.1:8000/.
      • Click the link to open the application in a new browser tab, or navigate using: {{localhost:8000}}

   If you want to preview the application before completing any tasks, you can still build and run it using the commands above. You’ll see a page with two empty dropdowns, an input box for the amount, and an output box for the converted value.

2. Challenge

   Set up

   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.

3. Challenge

   Making a HTTP GET Request to Fetch Exchange Rate Data

   In this step, you'll first define an asynchronous function that takes in the base currency as a string parameter.

   Then, implement the function so that it makes an HTTP GET request using the JavaScript Fetch API (fetch()) to fetch the exchange rates for a given base currency for an external API.

4. Challenge

   Implementing the Currency Conversion Logic

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

5. Challenge

   Bind Functionality to UI

   In this step, you'll bind the functionality to the UI by implementing the handleInput() function to read input values and call the convertCurrency() method of the Util class.

   Then, you'll populate the resulting value in the UI and bind the event-handling logic to the event listener of the input event so everything works end to end.

6. Challenge

   Fine Tuning

   In this step, you'll perform error handling and formatting to improve the application.

   You will:

   • Add error handling for failed HTTP requests in the fetchForexRates() function,
   • Add error handing for invalid user input.
   • Implement the formatCurrency() function and use it to format the converted amount in the target currency. You've now completed the Currency Converter in TypeScript!

   Run the build command npm run build then the start command npm run start in the Terminal tab. Launch the application in the browser as instructed in Step 1, and you should see the fully functional Currency Converter in action.

   When you enter a value in the Amount input box and select from and to currencies, the application displays the converted amount in the box below them, formatted in the target currency.