Tell us what’s happening:
I have tried all possible options but I can’t pass #8 . Could you help me, please?
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: styles.css */
/* file: index.jsx */
const { useState, useMemo } = React;
const convertRate={USD:{
EUR: 0.92,GBP: 0.78,
JPY: 156.7},
EUR:{USD: 1.08, GBP: 0.94, JPY:180},GBP:{USD:1.28 , EUR:1.3, JPY: 200},JPY:{USD: 0.06, EUR: 0.04, GBP: 0.02}}
export function CurrencyConverter() {
const[number,setNumber]=useState(1)
const[selectFrom,setSelectFrom]=useState('USD')
const[selectTo,setSelectTo]=useState('EUR')
const total= useMemo(()=>{
if(selectFrom==selectTo)
return Number(number).toFixed(2)
return ((number * convertRate[selectFrom][selectTo]).toFixed(2))
},[selectFrom, number])
const amount=`Convert: ${total} ${selectTo}`
return(<div>
<label>Enter currency amount: <input type='number' value={number} onChange={(e)=>setNumber(Number(e.target.value))} /></label>
From:
<select value={selectFrom} onChange= {(e)=>setSelectFrom(e.target.value)}>
{Object.keys(convertRate).map(key=>(
<option value={key} key={key}>{key}</option>
))}
</select>
To:
<select value={selectTo}
onChange={(e)=>setSelectTo(e.target.value)}>
{
(Object.keys(convertRate).map(coin=>(
<option key={coin}>{coin}</option>))
)}
</select>
<p>{amount}</p>
</div>)
}
Your browser information:
User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Mobile Safari/537.36
Challenge Information:
Build a Currency Converter - Build a Currency Converter
