Build a Simple Currency Converter with JavaScript!

Table of Contents

1. Introduction
2. Setting up the Markup
3. Styling the Currency Converter App
4. Getting Currency Options
5. Getting Currency Rate
6. Setting up Event Listener
7. Handling Errors

Introduction

Welcome back to another web development tutorial! In this project, I'm going to show you how to build a currency converter app. If you've ever struggled to understand how the async and await keywords work, then keep watching as I guarantee this video will clear things up for you. By the end of this tutorial, you'll have a good understanding of how to get data from an API using the await keyword, populate select elements in a form with a response from the API, and catch any errors in the async code and display them to the user. So let's get started coding our currency converter app!

Setting up the Markup

Before we get stuck into the meaty part of creating the JavaScript, which will do our currency conversion, let's first set up the markup on the page and then style it so it looks like a kind of currency converter app that someone would want to use.

We'll start off by creating a container for our currency converter. Inside this container, we'll add a title and an icon for a little bit of interest. Then, we'll create a form that will allow users to enter the amount and select the different currencies they want to convert between. Finally, we'll add a button to submit the form and a placeholder to display the result of the conversion.

Styling the Currency Converter App

To make our currency converter app look good, we need to add some CSS styling. We'll start by setting the font family for everything on the page to a nice sans-serif font. We'll also set the box sizing to be border-box.

Next, we'll center everything in the page by setting the display property of our HTML and body elements to flex. We'll also set the height to be 100% and align the items and justify the content to be centered.

To make the currency converter app container look like a card, we'll add padding, border radius, and box shadow. We'll also style the title by using the display property to align it properly and reducing the size of the heading level 1 tag.

Inside the form, we'll style the labels, inputs, and select elements by adding borders, box shadow, and padding. We'll also style the button by setting the background color, color, and padding.

Finally, we'll style the convert result element, which will display the result of the conversion, by setting the width, margin, font weight, and background color.

Getting Currency Options

To populate the select elements with currency options, we need to retrieve the available currency codes and descriptions from an API. We'll create a function called getCurrencyOptions to handle this.

Inside this function, we'll make a request to the API endpoint using the fetch API and retrieve the JSON data. We'll then return the symbols property from the JSON response, which contains the currency codes and descriptions.

We'll also create a helper function called appendOptionToSelect to create and add option elements to a select element. This function will take a select element and an option item as arguments and append a new option element to the select element.

In the main function, setupCurrencies, we'll get references to the select elements and call the getCurrencyOptions function to retrieve the currency options. We'll then convert the currency options to an array format and use the appendOptionToSelect function to populate the select elements.

Getting Currency Rate

To convert an amount from one currency to another, we need to retrieve the rate of conversion between the two currencies. We'll create a function called getCurrencyRate to handle this.

Inside this function, we'll make a request to the API endpoint using the fetch API and pass in the from and to currency codes. We'll retrieve the JSON response and return the rate of conversion.

Setting up Event Listener

To handle the currency conversion, we'll set up an event listener on the form submit button. When the user clicks the button, we'll retrieve the selected currencies and the amount to convert. Then, we'll call the getCurrencyRate function to get the rate of conversion and calculate the conversion result.

If there is no error, we'll update the text content of the convert result element with the result. If there is an error, we'll catch it and update the convert result element with an error message.

Handling Errors

To handle errors in our app, we'll use a try-catch block around the code that may throw an error. In this case, we'll wrap the code that calls the getCurrencyRate function.

If an error occurs, we'll catch it and update the convert result element with an error message. We'll also add a class to the convert result element to change its background color to red, indicating an error.

Conclusion

In this tutorial, we learned how to build a currency converter app using the async and await keywords. We set up the markup and styled the app to make it visually appealing. We also retrieved currency options from an API and populated the select elements. Additionally, we obtained the currency rate and handled errors in the conversion process.

By following this tutorial, you now have the skills to create a currency converter app and understand how async and await work in JavaScript. Whether you're building a personal project or a website for clients, a currency converter app can be a valuable addition. Good luck with your future web development endeavors!

Highlights

• Build a currency converter app using the async and await keywords
• Retrieve currency options and currency rate from an API
• Handle errors in the conversion process with a try-catch block
• Style the app to make it visually appealing
• Populate select elements based on currency options

FAQ

Q: Can I use this currency converter app on my website? A: Yes, you can use this currency converter app on your website! Simply copy the HTML, CSS, and JavaScript code provided in this tutorial and integrate it into your website's codebase.

Q: Is this currency converter app customizable? A: Definitely! You can customize the currency converter app to match the design and branding of your website. Feel free to modify the CSS styles and adjust the layout to suit your needs.

Q: Is the API used in this tutorial free? A: Yes, the API used in this tutorial is free to use. You don't need to sign up for any API keys. However, make sure to check the API documentation for any usage limitations or restrictions.

Q: Can I convert currencies other than US Dollars and British Pounds? A: Absolutely! The currency conversion functionality can be extended to support any currency pair available in the API. Simply modify the code to include the desired currency options and update the conversion process accordingly.

Q: Can I use a different API for currency conversions? A: Yes, you can use a different API for currency conversions. Just make sure to update the URL endpoints and data retrieval methods in the code to match the API you're using.

Q: How can I refine the error handling in the currency converter app? A: To further enhance error handling, you can implement error messages for specific scenarios, such as API request failures or invalid currency inputs. You can also provide troubleshooting instructions or a contact form for users to report any issues they encounter.