Test 10 - Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Failing # 10 even though my code does what it states. The input amount is different than the converted amount unless you choose the same sign for both selects.

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 */
body {
  background-color: lightblue;
}
#container {
  background-color: Lightgrey;
  max-width: 500px;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  border: 2px solid Lightgrey;
  border-radius: 10px;
  padding: 10px;
}
input {
  max-width: 50%;
  margin: 0 auto;
}
select {
  margin: 0 auto;
}


/* file: index.jsx */
const { useState, useMemo, useCallback, useEffect } = React;

export function CurrencyConverter() {
  const [currentCurrency, setCurrentCurrency] = useState(1.5);
  const [startCurrencySign, setStartCurrencySign] = useState("USD");
  const [targetCurrencySign, setTargetCurrencySign] = useState("JPY");
  let results = 0;
  const conversionTable = {
    USD: 1.0,
    JPY: 144,
    GBP: 0.75,
    EUR: 0.86,
    Pesos: 62.36,
  };
  const handleCurrentCurrencySign = useCallback((e) => {
    setStartCurrencySign(e.target.value);
  }, []);

  const handleTargetCurrencySign = useCallback((e) => {
    setTargetCurrencySign(e.target.value);
  }, []);
  const handleChange = useCallback((e) => {
    const amount = Number(e.target.value);
    setCurrentCurrency(amount);
  }, []);

  const targetCurrency = useMemo(() => {
    const newTable = { ...conversionTable };
    for (const key in newTable) {
      newTable[key] =
        (currentCurrency / conversionTable[startCurrencySign]) *
        conversionTable[key];
    }
    return newTable;
  }, [currentCurrency, startCurrencySign]);
  console.log("target currency amount: ", targetCurrency[targetCurrencySign]);
  console.log("this is the sign", targetCurrencySign);
  console.log("this is the newTable after return: ", targetCurrency);
  console.log("is this a number? :", targetCurrency[targetCurrencySign]);
  return (
    <section id="container">
      <label htmlFor="amount">Enter amount: </label>
      <input
        type="number"
        id="amount"
        value={currentCurrency}
        onChange={handleChange}
      />

      <label htmlFor="currentCurrency">Choose current currency: </label>
      <select id="currentCurrency" onChange={handleCurrentCurrencySign}>
        <option >USD</option>
        <option>JPY</option>
        <option>GBP</option>
        <option>EUR</option>
        <option>Pesos</option>
      </select>

      <label htmlFor="targetCurrency">Choose target currency: </label>
      <select id="targetCurrency" onChange={handleTargetCurrencySign}>
        <option>JPY</option>
        <option>USD</option>
        <option>EUR</option>
        <option>Pesos</option>
        <option>GBP</option>
      </select>
      <p>
        Converted Amount:
        <span>{`${targetCurrency[targetCurrencySign].toFixed(
          2
        )} ${targetCurrencySign}`}</span>
      </p>
    </section>
  );
}

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

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

Here are some troubleshooting steps you can follow.

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

I’m still trying to work out exactly what’s being tested but:

Your CurrencyConverter component should memoize the calculation of the converted amounts for the from currency such that a change in the to select option will not recalculate the converted amounts.

There is 1 instruction which specifies exactly what to memoize. However, you are using useCallback 3 times and useMemo

This is the only case memorization should happen. If you’re doing more or less than this then the tests will likely fail.

CurrencyConverter component should memoize the calculation of the converted amounts

This is what to memoize.

a change in the to select option will not recalculate the converted amounts.

This is the condition.