Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Tests 7, 8 are failing even though the converter works, thanks!

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 [num, setNum] = useState(0)
   const [curr1, setCurr1] = useState("USD")
   const [curr2, setCurr2] = useState("USD")

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

const  convert = useMemo(() => {
  return (num / goodMapping[curr1])
}, [curr1, num])


  return (
    <div>
    <input value={num} type="number" onChange={(e) => setNum(e.target.value)}></input>
    <select value={curr1} onChange={(e) => setCurr1(e.target.value)}>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
    </select>
    <select value={curr2} onChange={(e) => setCurr2(e.target.value)}>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
    </select>
    <p>{(convert * goodMapping[curr2]).toFixed(2)} {curr2}</p>
    </div>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:146.0) Gecko/20100101 Firefox/146.0

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

What have you done to investigate so far?

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

Got it figured out, Muchos gracias

1 Like