Build a currency converter app using an API for real-time rates. Design a simple layout where users pick two currencies and enter an amount, then show the converted result instantly.
Resources: Lato Font - Google Fonts, Country list API endpoint, Exchange Rate API Website, Currency Conversion API Endpoint
Things you need to know: Flexbox, Grid, Semantic HTML, Creating front-end using data, Searching/finding elements in an array
Add a heading to the page: Currency Converter.
Create an input field for the user to enter an amount.
Label the field with Enter amount" for clarity.
Set a placeholder value of 100
to guide user input.
Make this field required to ensure the user enters an amount before proceeding.
Add two dropdown menus for selecting currencies:
Use placeholder options like USD - United States Dollar
and INR - Indian Rupee
for now.
Display a TO label or text between the two dropdowns to indicate conversion direction.
Below the dropdown menus, add a button labeled "Convert":
This button will trigger the conversion calculation when clicked.
Apply the Lato
font family from Google Fonts for the entire page.
Set the background color of the page to #f4f4f4
.
Add a shadow effect to the text.
Center-align the content both vertically and horizontally.
Set the background color of the content section to #F8D800
Center-align all the text inside the section and set the content section's height to automatically adjust based on the content inside it.
Add a slight shadow and round the corners of the section.
When the user clicks inside the input, highlight it with a border color of #555
.
Add a slight shadow and round the corners of the input and the dropdowns.
Style the Convert button with a blue background #007bff
, white text, and a slight shadow for depth.
Add other styles to the input fields as per the image.
Add temporary texts to style the result and error messages:
Result example: 100 USD = 8,407.52 INR
Error example: An error occurred, please try again later
Style the result message to be centered and bold.
Make the error message red so it catches attention if something goes wrong.
Remove the result text and hide the error text after styling, as they will be displayed dynamically using JavaScript.
Fetch the details like currency name,
code
, and flag
details using the Country List API.
Populate the currency dropdown menus with this data.
Display each currency in a readable format like "USD - United States Dollar"
with the country flag as shown in the image.
Create an account on the ExchangeRate API website.
Upon registration, you will receive an API key, which is a unique string that you will use to authenticate your requests.
Update your Currency Conversion API endpoint:
Replace the placeholder yourApiKey
with your unique API key.
Use fromCurrency
and toCurrency
variables to represent the user-selected currencies in the API request.
When a user clicks on the Convert button, calculate and display the converted value on the screen using this conversion rate.
These are some of the projects you'll build while learning.