Create a beginner-level project Dynamic Currency Converter Beginner React Project
Tags: webdev, react, beginners, reactproject
Published: 2024-01-11 15:10:09

In this article we will Build a Dynamic Currency Converter Beginner React Project. I am Daman sure you all are familiar with this type of project. However, i think there are many beginners who do not know [How to Build a Dynamic Currency Converter Beginner React Project using react js](https://ziontutorial.com/how-to-build-a-dynamic-currency-converter-using-react/). Hopefully, this article will help you out.

If you want you can watch the live demo with this [link](https://ziontutorial.com/how-to-build-a-dynamic-currency-converter-using-react/).

Don't miss this article : https://bit.ly/3zFCQ8F

if you are a beginner do follow my steps what I am doing to create this beautiful Currency Converter application using react js .

Download the source code : https://bit.ly/482LApG

**App.js**
```
`// 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;`

```


**The App.css**
```
@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;
}

```

If you are facing any Problem Full source code is available here 
with the working output [Link
](https://ziontutorial.com/how-to-build-a-dynamic-currency-converter-using-react/)

Conclusion
I hope you enjoyed this little tutorial. Let me know over on

Happy Coding! 😇