Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Why did I fail step 6, but when I remove targetCurrency, I got failed step 8

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 */
.container {
  display: flex;
  justify-content: center;
  text-align: center;
}

.converter {
  border: solid 2px black;
  border-radius: 10px;
  padding: 2rem;
}

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

export function CurrencyConverter() {

  const currencies = [
    "USD",
    "EUR",
    "GBP",
    "JPY"
  ]

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

  const [startCurrency, setStartCurrency] = useState("USD")
  const [targetCurrency, setTargetCurrency] = useState("EUR")
  const [amountExchange, setAmountExchange] = useState(1)

  const exchange = useMemo(() => {
    if(!amountExchange) return "";
    return (amountExchange ? (amountExchange * (exchangeRates[targetCurrency] / exchangeRates[startCurrency])).toFixed(2) : "")
  }, [amountExchange, startCurrency, targetCurrency]);

  return (
    <section className="container">
      <div className="converter">
        <h1>Currency Converter</h1>
        <p>{startCurrency} to {targetCurrency} Conversion</p>
        <input type="number" value={amountExchange} onChange={e => setAmountExchange(e.target.value)} />
        <p>Start Currency:</p>
        <select value={startCurrency} onChange={e => setStartCurrency(e.target.value)}>
          {currencies.map(currency => (
            <option key={currency} value={currency}>{currency}</option>
          ))}
        </select>
        <p>Target Currency:</p>
        <select value={targetCurrency} onChange={e => setTargetCurrency(e.target.value)}>
          {currencies.map(currency => (
            <option key={currency} value={currency}>{currency}</option>
          ))}
        </select>
        <h2>Converted Amount: {amountExchange > 0 ? exchange : 0} {targetCurrency}</h2>
      </div>
    </section>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

If the targetCurrency is the dependency of function defined in useMemo, it means that with the change of second select, values will be recalculated. But at the same time just removing the targetCurrency from dependencies, will stop updating value when target currency is changed.

What changes would be needed to calculate converted amounts for every target currency when start currency is changed?