Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

I can’t understand why test 9 and 10 are failing, since in the UI everything shows as asked. Can you please help? Thank you.

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>





const { useState, useMemo } = React;

export function CurrencyConverter() {
  const [userAmount, setUserAmount] = useState("");
  const [sel1, setSel1] = useState("");
  const [sel2, setSel2] = useState("");

  const currencies = ["USD", "EUR", "GBP", "JPY"];
  const mapping = {
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7,
  };


  const convertedAll = useMemo(() => {
    if (!userAmount || !sel1) return null;

    const baseInUSD = Number(userAmount) / mapping[sel1];
    const result = {};
    currencies.forEach((cur) => {
      result[cur] = baseInUSD * mapping[cur];
    });
    return result;
  }, [userAmount, sel1]);


  const finalDisplay =
    userAmount && sel1 && sel2 && convertedAll
      ? `${convertedAll[sel2].toFixed(2)} ${sel2}`
      : "";


  const shouldShow =
    userAmount &&
    sel1 &&
    sel2 &&
    convertedAll &&
    Number(userAmount).toFixed(2) !== convertedAll[sel2].toFixed(2);

  return (
    <form>
      <input
        type="number"
        value={userAmount}
        onChange={(e) => setUserAmount(e.target.value)}
      />
      <select value={sel1} onChange={(e) => setSel1(e.target.value)}>
        <option value="">Select From</option>
        {currencies.map((cur) => (
          <option key={cur} value={cur}>
            {cur}
          </option>
        ))}
      </select>
      <select value={sel2} onChange={(e) => setSel2(e.target.value)}>
        <option value="">Select To</option>
        {currencies.map((cur) => (
          <option key={cur} value={cur}>
            {cur}
          </option>
        ))}
      </select>

    
      <p>{sel1}</p>
      <p>{sel2}</p>


      <p>{shouldShow ? finalDisplay : ""}</p>
    </form>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

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