Currency Convertor 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.

Max Chat

Task 1

Create a basic HTML structure
  1. An input field for the amount to be converted.

  2. A drop-down to select the "from" currency value.

  3. A second drop-down to select the "to" currency value.

  4. A convert button.

  5. A <p> tag to show the converted amount.

  6. A <p> tag to show any errors that might occur during the conversion process.

Task 2

Add CSS styling as per the design.

Task 3

Fetch the list of countries using the API endpoint provided.

Task 4

Display the currency list in dropdowns.

Task 5

Retrieve the conversion rate with the ExchangeRate API.
  • Visit ExchangeRate API Website and create an account.

  • After registration, you will receive an API key, which is a unique string that you will use to authenticate your requests.

  • Use the conversion API Endpoint https://v6.exchangerate-api.com/v6/<yourApiKey>/pair/<fromCurrency>/<toCurrency> to retrieve the conversion rate.

  • Replace <yourApiKey> with the API Key you generated in the first step.

  • Replace the <fromCurrency> and <toCurrency> with the user selected currency codes.

Task 6

Use the conversion rate received to implement the currency conversion functionality.

More Projects

These are some of the other projects you can build.