Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

I cannot seem to pass the step 9 not matter what I do for currency converter

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;

export function CurrencyConverter() {
const[Currentcurrency,setCurrentCurrency] = useState(1);
const[Currentvalue,setCurrentValue] = useState("USD");
const[Targetvalue,setTargetValue] = useState("EUR");

const goodMapping = {
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
};
const covertedAmount = useMemo(() => {
    if (Currentvalue === Targetvalue) {
    return "selected a different currecy";
    }
    const Number = parseFloat(Currentcurrency) || 0;
    const Cur = goodMapping[Currentvalue];
    const Base = Number / Cur;
    const result = {};
    for(const [currency, rate] of Object.entries(goodMapping)) {
        result[currency] = (Base * rate).toFixed(2);
    }
return result;
}, [Currentcurrency,Currentvalue]);

return(
<div>
<h1>Currency Converter</h1>
<p>{Currentvalue} to {Targetvalue} Conversion</p>
<input type="number" onChange={(e) => setCurrentCurrency(e.target.value)} value={Currentcurrency}/>

<p>Start Currency:</p>
<select onChange={(e) => setCurrentValue(e.target.value)} value={Currentvalue}>
{Object.keys(goodMapping).map((c) => (
    <option key={c} value={c}>
    {c}
    </option>
))}
</select>

<p>Target Currency:</p>
<select onChange={(e) => setTargetValue(e.target.value)} value={Targetvalue}>
{Object.keys(goodMapping).map((c) => (
    <option key={c} value={c}>
    {c}
    </option>
))}
</select>
<h3>Converted Amount:{covertedAmount[Targetvalue]} {Targetvalue}</h3>
</div>
)}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

Hi.

You need a way to show the conversion, right now one can only enter the values, the currency, and that it then apply the format as suggested in the step.

1 Like
3

Oh, I see. The word is very confusing to me. Thank you, have clear my coding.