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;`
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
Conclusion
I hope you enjoyed this little tutorial. Let me know over on
Happy Coding! 😇
Top comments (0)