Currency Converter

In this lab, you will create a simple currency converter application using React. This app will allow users to convert a value from one currency to another by fetching real-time exchange rates from an API.

Steps to Build the App

1. Create Input Fields: Add two text input elements with IDs #from and #to. These will be used for entering the currency codes (e.g., USD, EUR) that the user wants to convert between.

   <input type="text" id="from" maxlength="3" placeholder="From: e.g., USD" />
   <input type="text" id="to" maxlength="3" placeholder="To: e.g., EUR" />

2. Add a Convert Button: Include a button with the ID #convert. This button, when clicked, will trigger the currency conversion process.

   <button id="convert">Convert</button>

3. Display Area: Implement a div element with the ID #currencyValue where the conversion result will be displayed.

   <div id="currencyValue"></div>

4. Styling (Optional): You may add CSS to give your application a pleasant look. Consider using different colors for inputs, button, and result display.

Using the Currency Conversion API

• API Endpoint: https://open.er-api.com/v6/latest/{currencyCode}
• Fetching Data: Replace {currencyCode} with the currency code from the #from input field to get the latest exchange rates.
• Parsing the Response:
  • The API returns a JSON object with a rates property containing currency values.
  • Example response snippet: {"rates": {"USD": 1, "INR": 90.23}}
• Calculating Conversion:
  • Retrieve the rate for the #to currency from the rates object.
  • Calculate the converted value and display it in the #currencyValue div.

Example

// Example of fetching exchange rates for USD
fetch('https://open.er-api.com/v6/latest/USD')
  .then(response => response.json())
  .then(data => {
    const rate = data.rates['EUR']; // Assuming EUR is the target currency
    const convertedValue = 1 * rate; // Convert 1 unit of USD to EUR
    document.getElementById('currencyValue').innerText = convertedValue;
  });

Challenges

Challenge 1: Implement Input Fields for Currency Codes

• Objective: Create two text input elements for entering currency codes.
• Requirements:
  • Create an input field for the currency being converted from with an ID of #from. This input should accept and restrict the input to a maximum of three letters, representing standard currency codes.
  • Create a second input field for the currency being converted to with an ID of #to, also limiting the input to three letters.

Challenge 2: Create a Convert Button

• Objective: Provide a button to initiate the currency conversion.
• Requirements:
  • Introduce a button element in the HTML.
  • This button must have the ID #convert.
  • The button should be labeled in a way that indicates its purpose for converting currencies.

Challenge 3: Design an Output Display Element

• Objective: Establish a space for displaying the conversion results.
• Requirements:
  • Create a div element where the result of the currency conversion will be shown.
  • Assign this element the ID #currencyValue.

Challenge 4: Implement Conversion Logic and Display

• Objective: Activate the conversion process through the button click.
• Requirements:
  • Program the #convert button so that when clicked, it calculates the equivalent value of one unit of the #from currency in the #to currency.
  • Use the API endpoint https://open.er-api.com/v6/latest/{from} for fetching conversion rates.
  • Display the conversion result in the #currencyValue div. Ensure the div updates to show the result after the button click.