How to Build a Currency Converter with HTML, CSS, and JavaScript

Published on June 19, 2024

Welcome to our tutorial on creating a simple currency converter using HTML, CSS, and JavaScript. In this video, we’ll walk you through step by step on how to build a basic currency converter that allows users to input an amount in one currency and convert it to another.

Let’s start with the HTML structure. As you can see, we have a basic HTML document set up. We have a title for our page, “Currency Converter“, and we’ve linked a CSS file for styling.

Inside the body tag, we have a container div that holds all our content. We start with a heading, “Currency Converter“, to give users a clear indication of what this page does. Then, we have a div with the class “converter” which contains our input fields and convert button. We have an input field where users can enter the amount they want to convert, and two dropdown menus labelled “From” and “To” for selecting the currencies.

Now, let’s move on to the JavaScript part. We’ve linked a jQuery library and our own JavaScript file at the bottom of the body. Inside our script file, we’ll write the logic to handle the currency conversion. When the “Convert” button is clicked, it triggers a function that calculates the converted amount based on the selected currencies and the input amount.

CSS

Now, let’s move on to the CSS part to design our currency converter. In this video, we will teach you how to style our currency converter using CSS to make it visually appealing and user-friendly.

We start by resetting the default margin and padding of all elements using the universal selector (*). This ensures a consistent layout across different browsers.

Next, we set the background colour of the body to a shade of green (#3db166) to give our page a fresh and modern look.

Inside the container class, we define the width, margin, padding, background colour, border-radius, and box shadow to create a card-like appearance for our currency converter. This will make our converter stand out on the page.

The h1 heading is centred and styled with a margin-bottom to provide spacing between the heading and the rest of the content. We’ve chosen a dark grey colour (#2a2a2a) for better readability.

The converter class contains the main section of our currency converter. We’ve set a margin-bottom for spacing and specified a width of 100% to ensure it takes up the entire width of its container.

The amount-box class styles the input field where users can enter the amount they want to convert. We’ve used flexbox to align the input field and label horizontally with a small gap between them. The input field has a light grey background (#eef3f8) and is styled to be centred with padding and a border.

The ct class styles the select boxes for choosing the currencies to convert from and to. We’ve used flexbox to align the labels and select boxes horizontally with some margin at the top. The select boxes have a light grey background, padding, border, and border-radius for a clean look.

The button class styles the convert button with a green background colour (#3db166), white text, padding, border, border-radius, and box shadow to make it stand out and inviting for users to click.

Finally, the result class styles the result text that will display the converted amount. It’s centred, with a larger font size and bold weight for emph

JAVASCRIPT

Now, let’s move on to the JavaScript part to give functionality to our currency converter. In this video, we will teach you how to use JavaScript to make our converter interactive, allowing users to input an amount, choose currencies, and get the converted result.

We start by using jQuery’s document ready function to ensure our JavaScript code executes only after the HTML document has finished loading. This helps prevent any issues with accessing elements before they’re fully loaded.

Next, we attach a click event handler to the “Convert” button. This means that when the button is clicked, it will trigger a function to execute.

Inside the click event handler function, we retrieve the amount, “from” currency, and “to” currency selected by the user from the input fields.

We then perform input validation to ensure that the amount entered is a valid number. If not, we display an error message prompting the user to enter a valid amount.

If the amount is valid, we proceed to make an AJAX request to an API (ExchangeRate-API) to fetch the latest exchange rates based on the “from” currency selected by the user.

Upon successful retrieval of data from the API, we extract the conversion rate for the “to” currency from the response data. If the rate is available, we calculate the converted amount and display it along with the original and target currencies.

If there’s any error during the AJAX request, such as network issues or an invalid API response, we display an error message informing the user that there was an issue fetching the conversion rate.

Now, let’s take our currency converter for a spin and see it in action! If you encountered any issues or have suggestions for improvements, feel free to customise the JavaScript further. Your feedback is valuable for enhancing the functionality of our converter. If you found this tutorial beneficial and wish to stay updated on more web development tutorials, don’t forget to hit that subscribe button below. Thanks for tuning in, and happy coding!