Posted on Jul 19 It is impossible to underplay how crucial Currency converters are for navigating the complex nature of the global economy, whether they take the shape of web platforms, smartphone applications, or integrated banking systems. The ability to accurately price goods and services across borders, as well as the ability to track changes in exchange rate valuations in real time, make currency conversion valuable in international trade, foreign exchange, travel and other areas of life. This article demonstrates how to create a Currency Converter app in Vanilla JS using a REST API.Understanding of API interactionAn ExchangeRate-API account, create one here Knowledge of jQuery animationThe repository for this project is located at Github; fork it to get started. A live demo of this app can also be found on Vercel.jQuery is a Javascript library that optimizes web development by providing solutions that shorten and simplify Javascript code. An instance of this is its collection of preset effects that can be used to manipulate the DOM.To include jQuery in the app, we download it from jQuery and copy the jquery.min file from it into our app's root directory.A RESTful API is a method for online information sharing and communication across various computer systems. It functions like a collection of guidelines that allow communication between software programs. When a client (such a web or mobile application) wants to receive or send data while using a REST API, It makes a request to the API which responds to the request by returning data that was requested by the client.In this project, we require a REST API that can provide data containing up-to-date conversions between currencies, a great example which is used for this project is ExchangeRate-API. It also offers access to historical exchange rate data, allowing developers to retrieve rates for dates or past periods.After creating an Exchange Rates API account, we head over to the dashboard to find our API key, URL, and information on our API usage. We can find the link to the documentation in the sidebar to learn more about ExchangeRate-API. NOTE: Don't share your ExchangeRate API key or URLFirst, we create a file named index.js an insert the following code into the body tag:In the code above:-We create two select tags whose values represent the source and destination currencies respectively.To include additional currencies in the app, more option tags can be added.Next, the app is styled in style.css:Next, we create a script.js file in the appp's directory to store the code that interacts with the API to fetch the conversion rates.The first step is to define the variables that will be used in this project. Some of these variables will be assigned to DOM elements.Next, we develop a function that translates the display price figures to currency format and reduces them to a maximum of two fraction digits. To achieve this, we use Javascript's Intl.NumberFormat which accepts two parameters namely:Language which specifies what language the number is displayed in, e.g., 'en-US', 'de-DE', 'en-GB'A list of options used to customize the resultThe function above contains an object called options which contain the following properties:style: This property determines the formatting style for the number, e.g., decimal, currency, percentcurrency: This property specifies the currency code or symbol to be used for formatting the number as currencymaximumFractionDigits: This property specifies the maximum number of digits to display after the decimal pointcurrencyDisplay: This property determines how the currency should be displayed, e.g., symbol, code, nameNext up, we create an async function getExRate which awaits for the rates to be fetched from the api before calculating the conversion result using the rate between the currencies selected:The function in the code block above:Collects the value of money to be converted, the currency it is being converted from, and the currency to be converted toDefines a variable url to store the combination of the Exchange rates URL and API key.Creates the variables api and data which fetches the data and converts it to a readable format respectivelyCalculates the equivalent of the amount in the latter currencyNow that the functions needed for the currency conversion is complete, we call it whenever the convert button is clicked.Now that the functionality of the app is complete, we add animations that are performed once the app is loaded:The jQuery code above is placed in a $(document).ready() function and is executed once only when the DOM is fully loaded.fadeIn() used in the first function is one of the preset effects available in the JQuery library, to learn more on these effects, click here.As for the remaining functions, the targeted elements have their position property set to relative, and have all been displaced in a direction. The code above reverts their displacement to the default position using the animate function.In jQuery , DOM elements are accessed with the following methods:By Tag Name e.g $('div')By ID e.g $('#myElement')By Class e.g $('.myClass')By Using CSS Selectors e.g $('#myDiv .myClass')By Traversing the DOM e.g .parent(), .children(), .siblings(), .find(), etc.In summary, this article gives an overview of REST APIs and then demonstrates how to use JavaScript to retrieve data from ExchangeRate-API in a currency converter application. By following the steps mentioned, we are able to provide seamless currency conversion functionality for our application.REST APIExchangeRate-APIjQueryIntl.NumberFormatTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Jhonata Vinicius Da Silva Araujo - Jun 27 Burak Boduroğlu - Jul 14 Rajaniraiyn R - Jul 15 Sadeedpv - Jul 14 Once suspended, gbadeboife will not be able to comment or publish posts until their suspension is removed. Once unsuspended, gbadeboife will be able to comment and publish posts again. Once unpublished, all posts by gbadeboife will become hidden and only accessible to themselves. If gbadeboife is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Gbadebo ifedayo. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag gbadeboife: gbadeboife consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging gbadeboife will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.