![]() Once you have the conversion rate, display it to the user. You can start by clicking on the Example Request provided on the dashboard and then modifying the URL to use the Pair Conversion API. Your API key is visible in your dashboard once you login to. The easiest way to authenticate is using by prefixing your key in the URL. Also, if you've followed the Learn JavaScript course, you can use the same FetchWrapper class you used throughout the fetch chapters. Remember that you will need to authenticate to the API to be able to access the result. We recommend that you start with hardcoded values and only use the correct variables once you got a basic fetch request working. Now that you have the base and target currencies, you can fetch the conversion rate from the Exchange Rate API. ![]() You can look up this how to get URL search params use case on codetogo.io. This can be done using the URLSearchParams API. We need to extract the base and target currencies from the URL. Create the page's HTMLĪs mentioned before, you can start with very basic HTML for the elements that you will use (base currency, target currency, conversion rate value). It will then use the Exchange Rate API to fetch the conversion rate and display it to the user. This page will receive the base and target currencies from the URL. Remember that the results.html page does not exist yet. Tip: semantic button without stylesĪs covered in Chapter 118 of Learn HTML CSS, you can create a semantic button element without styles using the following code: button `)īy sending the base and target currencies, we'll later be able to extract them from the URL. Otherwise, you can use the ones we used in the design:įor each currency, create a button with the currency text. Make sure they are supported by the Exchange Rate API (here's a list of currencies they support). In all cases, don't try to tackle both problems (design and functionality) at the same time. While it would be nice to have the same design, we recommend you start with making the JavaScript functionality work first and then, if you want, you can spend time designing it. You can find the design of this page using the Figma link above (make sure to look at the design belonging to the Beginner difficulty). Once they do, the Track exchange rate link will be enabled. The user has to select the base currency and then the target currency. ![]() The landing page lists 3 (hardcoded) currencies. Don't worry if you don't properly understand it as we'll give you some hints when it's time to use the API. Read their official authentication guide before moving on. There are two ways to authenticate with the Exchange Rate API. We'll use the pair conversion API to build this project. In general, we recommend creating a free account as you will also get to practice authenticating to the API. ![]() However, since this is throttled based on your IP address, there's a high probability that you will hit the limit sooner than you expect. The Exchange Rate API also offers free access without needing to create an account and authenticate to the API. You do not need to add your credit card details. Once you have a project where your changes appear in the browser preview, you're ready to move on to the next step. Whenever you want to work on this project, you will need to start the development server with: npm run dev Then, cd (change directory) into your new project and install the dependencies by running: npm install Select the Vanilla option with JavaScript, for now. Open your terminal and then run the following command: npm create enter your project name for example, currency-pro, and hit enter. These instructions assume you have node and npm installed. If you'd like to build it locally, we recommend that you use v with the vanilla template. If you're a beginner and don't have a preference yet, we recommend you either build it online on a platform such as codesandbox.io (using the Vanilla and JavaScript template) or locally. You can set up this project in any way you prefer. "Start by making it work and then make it better." We recommend you follow this advice when working on this (or any) project. You will need a free account that does not require a credit card. The project uses the exchange rate API from. The beginner version of this project lets you create a two-page website where you can select and compare the conversion rate between 3 currency pairs. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |