Create a beginner-level project Dynamic Currency Converter Beginner React Project

`// CurrencyConverter.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css'

const App = () => {
  const [exchangeRates, setExchangeRates] = useState({});
  const [amount, setAmount] = useState(1);
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('INR');
  const [convertedAmount, setConvertedAmount] = useState(null);

  useEffect(() => {
    // Fetch exchange rates from a free API (replace with your preferred API)
    const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;

    axios.get(apiUrl)
      .then(response => {
        setExchangeRates(response.data.rates);
      })
      .catch(error => {
        console.error('Error fetching exchange rates:', error);
      });
  }, [fromCurrency]);

  useEffect(() => {
    // Convert currency when 'amount', 'fromCurrency', or 'toCurrency' changes
    const conversionRate = exchangeRates[toCurrency];
    if (conversionRate) {
      const converted = amount * conversionRate;
      setConvertedAmount(converted.toFixed(2));
    }
  }, [amount, fromCurrency, toCurrency, exchangeRates]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    switch (name) {
      case 'amount':
        setAmount(value);
        break;
      case 'fromCurrency':
        setFromCurrency(value);
        break;
      case 'toCurrency':
        setToCurrency(value);
        break;
      default:
        break;
    }
  };

  return (
    <div className='card' >
      <h1 className='text-6xl'>Currency Converter</h1>

      <div className='currency_exchnage'>

      <div className="input_container" >
        <label className="input_label">Amount:</label>
        <input
          type="number"
          name="amount"
          className="input_field"
          value={amount}
          onChange={handleChange}
        />
      </div>
      <div className="input_container">
        <label className="input_label">From Currency:</label>
        <select
          name="fromCurrency"
          value={fromCurrency}
          onChange={handleChange}
          className="input_field"
        >
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>
      <div className="input_container">
        <label className="input_label">To Currency:</label>
        <select
          name="toCurrency"
          value={toCurrency}
          onChange={handleChange}
          className="input_field"
        >
          {Object.keys(exchangeRates).map(currency => (
            <option key={currency} value={currency}>
              {currency}
            </option>
          ))}
        </select>
      </div>

      </div>

      <div className='output'>
        <h2>Converted Amount: {convertedAmount}</h2>
      </div>
    </div>
  );
};

export default App;`

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #F0F2F5;
  font-family: "Inter", sans-serif;
}

.card
{
    background-color: #ffffff;
    width: 55%;
    min-width: 550px;
    padding: 50px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
}

h1{
  /* padding: 16px; */
  background: #fff;
  font-size: 30px !important;
  margin-bottom: 2rem;
  font-weight: 700;
  color: #333;
}

.currency_exchnage
{
  display: flex;
  justify-content: space-between;
  background: #fff;
  /* align-items: center; */
}

.input_container {
  width: 30%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_label {
  font-size: 0.95rem;
  color: #8B8E98;
  font-weight: 600;
  background: #fff;
}