Build a Currency Converter - Build a Currency Converter

Curriculum Help
1

Tell us what’s happening:

Tests 7-10 keep failing and I don’t understand what I am doing wrong.

It might have to do with the fact that I don’t understand #7 and #8, as in the task.
but I have no idea what #9 and #10’s problems are.

Advice would be greatly appreciated

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, useRef } = React;

const conversionTable = {
  USD: 1,
  EUR: 0.92,
  GBP: 0.78,
  JPY: 156.7,
}

export function CurrencyConverter() {
  const [result, setResult] = useState(0);
  const [number, setNumber] = useState(0);
  const [toCurrency, setToCurrency] = useState("USD");
  const [toValue, setToValue] = useState(1);
  const [fromValue, setFromValue] = useState(1);

  const calculate = useMemo(() => {
    let rate = toValue / fromValue;
    let value = (number * rate).toFixed(2);
    setResult(value);
  }, [number, fromValue]);

  return (
    <>
    <input type="number" onInput={(e) => setNumber(e.target.value)}/>
      <br/>
      <br/>
      <label htmlFor="from">From:</label>
      <select name="from" id="from" onChange={(e) => setFromValue(conversionTable[e.target.value])}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>
      <br/>
      <label htmlFor="to">To:</label>
      <select name="to" id="to" onChange={(e) => {
          setToValue(conversionTable[e.target.value]);
          setToCurrency(e.target.value);
        }}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>
      <p id="result">{result} {toCurrency}</p>
    </>
  )
}

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:153.0) Gecko/20100101 Firefox/153.0

Challenge Information:

Build a Currency Converter - Build a Currency Converter

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-currency-converter/67eaa957114d373deb3a9149.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Edit: I’ve removed the “useRef” import, thats something that I just tested out, so it didn’t fix anything

4

update: the discord server helped me a lot while solving this.

the main issue was the fact, that you have to use “onChange” for everything.

another issue was the fact, that I didn’t understand what the test wanted from me.

If you want to convert your value from USD to EUR, it wants you to calculate EVERY OTHER POSSIBILITY TOO, so from USD to JPY and from USD to GBP.

Also, I didn’t understand, that I had to use the “calculated” variable and not set another variable

That’s all that I’ll say, the rest can be figured out