DEV Community

Cover image for Create a beginner-level project Dynamic Currency Converter Beginner React Project
ziontutorial
ziontutorial

Posted on • Updated on

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

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. Hopefully, this article will help you out.

If you want you can watch the live demo with this link.

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;`

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

If you are facing any Problem Full source code is available here
with the working output Link

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

Happy Coding! 😇

Top comments (0)