Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

I’m having problems passing tests 6-10 but I want help with 9 specifically because it may be causing the other tests to fail.
9 is “The converted amount should be displayed in the format XX.XX CCC, where XX.XX is the converted amount rounded to two decimal places and CCC is the currency code.”
I feel like it should be passing because it looks okay in the preview window.

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: index.jsx */
const { useState, useMemo } = React;

const conversionRate ={
    USD: 1,
    EUR: 0.85,
    GBP: 0.74,
    JPY: 156.45
  }

const currencyOptions = ['USD','EUR','GBP','JPY']

export function CurrencyConverter() {
  const [input, setInput] = useState(1);
  const [convertFrom, setConvertFrom] = useState('EUR');
  const [convertTo, setConvertTo] = useState('JPY');

const memoMath = useMemo(() => {
  return {
    USD: input/conversionRate[convertFrom]*conversionRate.USD,
    EUR: input/conversionRate[convertFrom]*conversionRate.EUR,
    GBP: input/conversionRate[convertFrom]*conversionRate.GBP,
    JPY: input/conversionRate[convertFrom]*conversionRate.JPY
  }
},[input, convertFrom]) 


  return (
    <div>
    <form>
    <label htmlFor="money">Convert:</label>
    <input 
      type='number' 
      value={input} 
      onChange={e => setInput(e.target.value)} placeholder='000' />
  </form>

  <select value={convertFrom} onChange={e => {setConvertFrom(e.target.value)}}>
            <option value=''>
              Convert From
            </option>
           {currencyOptions.map(source => (
             <option key={source} value={source}>
                {source}
              </option>
            ))}
          </select>

  <select value={convertTo} onChange={(e) => setConvertTo(e.target.value)}>
            <option value=''>
              Convert To
            </option>
           {currencyOptions.map(source => (
             <option key={source} value={source}>
                {source}
              </option>
            ))}
          </select> 
          <p>{memoMath[convertTo].toFixed(2)} {convertTo}</p>       
  
  </div>)}

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

Consider what would happen, if selected would be option that’s not present in the conversionRate.

3

I hadn’t considered that. Even AI couldn’t help me. Thank you!