Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

i need help on test #8 it is not passing

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, useEffect } = React;
const currencies = {
  USD: 1.5,
  EUR: 1.92,
  GBP: 0.78,
  JPY: 156.7
}

export function CurrencyConverter() {
  const [fromAmount, setFromAmount] = useState('USD');
  const [toAmount, setToAmount] = useState('USD');
  const [currency, setCurrency] = useState(0);
  const values = ['USD', 'GBP', 'JPY', 'EUR'];

  const converted = useMemo(() => {
    return {USD: (currency / currencies['USD']).toFixed(2), GBP: (currency / currencies['GBP']).toFixed(2), JPY: (currency / currencies['JPY']).toFixed(2), EUR: (currency / currencies['EUR']).toFixed(2)}
  }, [currency, fromAmount])
 
  return (
    <form>
      <input value={currency} type="number" onChange={(e) => setCurrency(e.target.value)} />
      <p>From:</p>
      <select onChange={(e) => setFromAmount(e.target.value)}>
        {values.map((value) =>
          <option key={value} value={value}>{value}</option>
        )}
      </select>
      <p>To:</p>
      <select onChange={(e) => setToAmount(e.target.value.toUpperCase())}>
        {values.map((value) =>
          <option key={value} value={value}>{value}</option>
        )}
      </select>
      <p>Converted amount: {converted[fromAmount]} {toAmount}</p>
    </form>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36 OPR/131.0.0.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

hello!

when i entered 1 in the input the output had “1 USD → 0.67 USD”, which doesn’t seem right.

then when i changed the second select element to “GBP” or “EUR”, the output had “1 USD → 0.67 GBP” and “1 USD → 0.67 EUR”. that means the actual converted amount is not changing when the 2nd select is changed, only the currency changes.