Currency Converter
L2Making a Real-Time Currency Converter app will help us understand how to fetch and display data from APIs. This will also give us a glance of how data is structured.
Step 1 - Create your API Key from this site
( 10 mins )
1out of6
Step 2 - Create a basic HTML structure
- An input field for the amount to be converted.
- A drop-down to select the "from" currency value.
- A second drop-down to select the "to" currency value.
- A convert button.
- A
<p>
tag to show the converted amount.
- A
<p>
tag to show any errors that might occur during the conversion process.
( 15 mins )
2out of6
Step 3 - Add CSS styling as per the design.
( 1 Hr )
3out of6
Step 4 - Fetch the list of countries using the API endpoint provided.
( 30 mins )
4out of6
Step 5 - Display the currency list in dropdowns.
( 30 mins )
5out of6
Step 6 - Implement the currency conversion functionality.
- Use the conversion API: https://v6.exchangerate-api.com/v6/${yourApiKey}
- Replace
yourApiKey
with the API Key you generated in the first step.
( 1 Hr )
6out of6
More projects