Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Hello! Tests 5-10 are failing and I’m not sure why. I’m most confused about why 5, 6, 7, and 8 are failing. I added a console.log so I know that the converted object is only being recalculated when I change startCurrency or amount, not when endCurrency is changed, and I can clearly see the text changing when both endCurrency and startCurrency are changed. Thanks for your help!

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 [startCurrency, setStartCurrency] = useState("USD");
  const [endCurrency, setEndCurrency] = useState("USD");
  const [amount, setAmount] = useState(1);

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

  const converted = useMemo(() => {
    console.log("Calculating...");
    const from = currMapping[startCurrency];
    let convert = {};
    for(let curr in currMapping){
      convert[curr] = ((currMapping[curr] / from) * amount).toFixed(2);
    }
    return convert;
  }, [startCurrency, amount]);

  return (
    <div>
      <input type="number"value={amount} onChange={(e) => setAmount(e.target.value)}/>
      <select onChange={(e) => setStartCurrency(e.target.value)}>
        <option>USD</option>
        <option>EUR</option>
        <option>GBP</option>
        <option>JPY</option>
      </select>
      <select onChange={(e) => setEndCurrency(e.target.value)}>
        <option>USD</option>
        <option>EUR</option>
        <option>GBP</option>
        <option>JPY</option>
      </select>
      <p>The converted amount is: <span>{converted[endCurrency]} {endCurrency}</span></p>
    </div>
    
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.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

Hmm, I’ve tried to submit your code, and all tests are passing. Not sure why that might be happening.

3

hmm, good to know! I have been having issues with tests randomly failing in workshops, even when I copy the code from the next step of the workshop which should pass.

4

Maybe check the browser’s console (not the console visible on page), when you run tests, to see if there aren’t any clues what might be happening.