![]() We then change the value of the pound input to our calculation we just created. We create three const the first euroamount gets the exchange rate from the api, the euro const gets the value from the euro input and the last const pound does the calculation and rounds up the numbers to 2 decimal places. We then use the response we just fetched and get the data from it to do our calculation. To something which we can use for our script. So we then parse it using the json method. Setting Up A Currency Convertor With ExchangeRatesApi.io 6 min read API, Tutorials, Coding Share on Twitter, LinkedIn Amazon allows visitors to display prices in their own currency. Get JSON data and Convert Using Javascri. I will show how to build a currency converter with these following features: Huge range of Currencies can be converted Fetch the exchange rate from internet (with the help of. When using the fetch command the data which is returned is just a response. In this video youll learn how to Create a Currency Converter With HTML, CSS and JAVASCRIPT using API. ![]() document.querySelector(".convertButton").addEventListener("click", mone圜onvert) ĮuroField.addEventListener("input", mone圜onvert) įinally we going to use the fetch command to get a an up to date exchange value. The event listener fires an event if the input changes in the euro field or if the user presses the convert button. We now going to create two event listeners which will execute our function which we will create shortly. ![]() const endpoint = '' Ĭonst euroField = document.querySelector(".euro") Ĭonst poundField = document.querySelector(".pound") The other two is the euro and pound inputs from our HTML. The first one is the endpoint of Fixer api. We first start by setting our const we be using. A few years back to center something vertically would either a css fudge or a Javascript solution. Flexbox still amazes me how easy it is to center items vertically and horizontally. To center the content I be using Flexbox and the properties jusitfy-content and align-center. Before we begin, everyone should be familiar with what APIs are. Įnter your amount in Euro to see how much it is Poundsįor the background will be using a purple radial gradient. In this article, well make a simple Currency Converter using HTML and JavaScript. Finally we have a button to submit the conversion. Below is a link of what we aim to have built by the end of this tutorial.įor the HTML we have two inputs with type of number one for the euro and another one for the values in pound.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |