Currency Converter Project
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
Task - 01
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
100to guide user input.Make this field required to ensure the user enters an amount before proceeding.
Task - 02
Add two dropdown menus for selecting currencies:
Use placeholder options like
USD - United States DollarandINR - Indian Rupeefor 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.
Task - 03
Apply the
Latofont 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.
Task - 04
Set the background color of the content section to
#F8D800Center-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.
Task - 05
Add temporary texts to style the result and error messages:
Result example:
100 USD = 8,407.52 INRError 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.
Task - 06
Fetch the details like
currency name,code, andflagdetails 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.
Task - 07
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
yourApiKeywith your unique API key.Use
fromCurrencyandtoCurrencyvariables 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.
