Tell us what’s happening:
Why is requirement 7 & 8 failing?
7. Changing the value of the first select element should display the new converted amount.
8. Changing the value of the second select element should display the new converted amount and currency.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Currency Converter</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.jsx"
></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { CurrencyConverter } from './index.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(<CurrencyConverter />);
</script>
</body>
</html>
/* file: index.jsx */
const { useState, useMemo } = React;
const fromUSD = {
EUR: 0.92,
GBP: 0.78,
JPY: 156.7,
USD: 1
};
const fromEUR = {
USD: 1.09,
GBP: 0.85,
JPY: 170.5,
EUR: 1
};
const fromGBP = {
USD: 1.28,
EUR: 1.18,
JPY: 200.9,
GBP: 1
};
const fromJPY = {
USD: 0.0064,
EUR: 0.0059,
GBP: 0.0050,
JPY: 1
};
const conversionRates = {
USD: fromUSD,
EUR: fromEUR,
GBP: fromGBP,
JPY: fromJPY
}
const currencies = ['USD','EUR','GBP','JPY']
export function CurrencyConverter() {
const [fromCur, setFromCur] = useState('USD');
const [toCur, setToCur] = useState('EUR');
const [amount, setAmount] = useState(0);
const handleSelOne= (e)=>{
setFromCur(e.target.value)
}
const handleSelTwo = (e)=>{
setToCur(e.target.value);
}
const converted = useMemo(()=>{
if (!amount) {return 0}
let rate = conversionRates[fromCur]['USD'];
return parseFloat(amount) * rate
},[amount,fromCur]);
const handleRates = (num)=>{
let rate = conversionRates['USD'][toCur]
return num * rate
}
return (
<div className='flex-col center-y gap-20 color p-15'>
<h1 className='white'>Currency Converter</h1>
<p className='f-24 white'>{fromCur} to {toCur} converstion</p>
<input value={amount} onChange={(e)=> setAmount(e.target.value)} id='amount' className='input' type='number' min='0' placeholder='Amount' />
<label className='f-24 white'>Start currency:</label>
<select defaultValue='USD' className='input' onChange={(e)=> handleSelOne(e)}>
{currencies.map(el=> <option key={el} value={el}>{el}</option>)}
</select>
<label className='f-24 white'>Target currency:</label>
<select defaultValue='EUR' className='input' onChange={(e)=> handleSelTwo(e)}>
{currencies.map(el=> <option key={el} value={el}>{el}</option>)}
</select>
<span className='span-text f-28'>Converted Amount: {handleRates(converted).toFixed(2)} {toCur}</span>
</div>
)
}
/* file: styles.css */
* {
margin: 0;
padding:0;
font-family: Arial, sans-serif;
}
body {
background: #090d32;
}
.flex-col {
display: flex;
flex-direction: column;
max-width: 50%;
max-height: 400px;
margin: 0 auto;
}
.center-y {
align-items: center;
}
.span-text {
color: #2b762f;
}
.gap-20 {
gap: 20px;
}
.p-15 {
padding: 15px;
}
.p-20 {
padding: 20px;
}
.f-24 {
font-size: 24px;
}
.f-28 {
font-size: 28px;
}
.color {
background: hsl(234, 69%, 32%)
}
.input {
width: 300px;
height: 50px;
color: black;
}
.white {
color: #fefefe;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Challenge Information:
Build a Currency Converter - Build a Currency Converter