Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

My code is failing the Test 7: Changing the value of the first select element should cause textual change on the page.
There is textual change happening on the page when changing first select element, i cant figure out what the issue is.
It is passing all other test cases.

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 goodMapping = {
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
};

const [amount, setAmount] = useState(0);
const [fromCurr, setFromCurr] = useState("USD");
const [toCurr, setToCurr] = useState("USD");
//const [converted, setConverted] = useState(0);

const convertCurrency = useMemo(() => {
    const numericAmount = parseFloat(amount) || 0;
    const baseInUSD = numericAmount / goodMapping[fromCurr];
    const result = baseInUSD * goodMapping[toCurr];
    return result.toFixed(2); 
  }, [amount, fromCurr]);

  const finalDisplay = `${convertCurrency} ${toCurr}`;

return (
  <div>
    <label>Amount: <input type="number" value={amount} onChange={(e) => setAmount(e.target.value)}/></label>
    <label>From:
      <select value={fromCurr} onChange={(e) => setFromCurr(e.target.value)}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>
    </label>
    <label>To: 
      <select value={toCurr} onChange={(e) => setToCurr(e.target.value)}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>
    </label>

    <p>{finalDisplay}</p>
  </div>
);

}

Your browser information:

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

Challenge Information:

Build a Currency Converter - Build a Currency Converter
https://www.freecodecamp.org/learn/full-stack-developer/lab-currency-converter/build-a-currency-converter

2

Could you point to the text that’s being changed when value of first select is changed?

Please notice also that the converted value doesn’t seem to change when target currency is changed, but it stays the same for all currencies.

3

on changing the first select (fromCurr state in my code), the final display amount is changed.

Yeh i dont recalculate the converted value when the target currency is changed because one of the test says that there shouldnt be any recalculation when second select element is changed.

I am sorry if i am missunderstanding something obvious.
Thanks!

4

But what text changes other than the value?

For example, if the amount is 5:
USD → USD

5.00 USD

But then changing the second currency, will show wrong results:
USD → EUR

5.00 EUR

USD → GBP

5.00 GBP

USD → JPY

5.00 JPY

This doesn’t seem to be right.