Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

I have tried everything but test number 7: changing the value of the first select element should display the new converted amount. and test number 8: Changing the value of the second select element should display the new converted amount and currency. still keep on appearing

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 exchangeRates = {
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
  }

  const [exchangeAmount, setExchangeAmount] = useState(0)
  const [selectedCurrency, setSelectedCurrency] = useState('USD')
  const [targetCurrency, setTargetCurrency] = useState('EUR')

const convertedAmount = useMemo(() => {
  if (!exchangeAmount || isNaN(exchangeAmount)) return 0;

  const sourceRate = exchangeRates[selectedCurrency];
  return exchangeAmount / sourceRate;
}, [exchangeAmount, selectedCurrency]);

const displayedAmount = `${(convertedAmount * exchangeRates[targetCurrency]).toFixed(2)} ${targetCurrency}`

  return(
    <div>
      <h1>Currency converter</h1>
      <label htmlFor="amount">How much do you have?</label>
      <input id="name" type="number" value={exchangeAmount} onChange={(e) => setExchangeAmount(e.target.value)}/>
      <h2>Enter your currency</h2>
      <select value={selectedCurrency} onChange={(e)=>setSelectedCurrency(e.target.value)}>
        {Object.keys(exchangeRates).map((curr) => (
          <option key={curr} value={curr}>{curr}</option>
        ))}
      </select>
      <h2>Enter the target currency</h2>
      <select value={targetCurrency} onChange={(e)=>setTargetCurrency(e.target.value)}>
        {Object.keys(exchangeRates).map((curr) => (
          <option key={curr} value={curr}>{curr}</option>
        ))}
      </select>
      <h3>Your converted amount is</h3>
      <p>{displayedAmount}</p>
    </div>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 OPR/124.0.0.0 (Edition ms_store)

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

Just change initial value of exchange amount from 0 to 1. It’s also set to 1 in the example project. You should pass after that small fix. Happy coding.