Build a Currency Converter - Build a Currency Converter

Curriculum Help
1

Tell us what’s happening:

I’m confused because Tests 6 and 8 seem to contradict each other. Test 6 says I shouldn’t recalculate when the target currency changes, but Test 8 expects the conversion to be recalculated when the target currency changes. How can both of these requirements be met? Am I misunderstanding one of the tests?

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 */
.main{
  width: 450px;
  padding: 20px;
  margin: 30px;
  height: 60vh;
  background-color: #1E293B;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body{
  background-color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F8FAFC;
  font-family: 'Inter', sans-serif;
}

input{
  width: 90%;
  height: 5px;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 30px;
}

label{
  color: #94A3B8;
}

select{
  width: 94%;
  height: 27px;
  border-radius: 5px;
  margin-bottom: 30px;
}

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

export function CurrencyConverter() {

  const [start, setStart] = useState('USD') 
  const [to, setTo] = useState('EUR')
  const [changed, setChanged] = useState(0)

  const convert = useMemo(() => {

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

    for (let key1 in goodMapping){
      if (start == key1){
        fromVal = goodMapping[key1]
      }
    }

    for (let key2 in goodMapping){
      if (to == key2){
        toVal = goodMapping[key2]
      }
    }

    let frFromVal = fromVal * changed

    let finalVal = frFromVal/toVal

    return finalVal.toFixed(2)


  }, [start, changed, to])




  return (<div className='main'>
 
          <h1>Currency converter</h1>
          
          <label>From {start.toUpperCase()} To {to.toUpperCase()}</label>
          <input type='number' placeholder='0' onChange={(e) => setChanged(e.target.value)}></input>

          <label>Start Currency</label>
          <select onChange={(e) => setStart(e.target.value)}>
          <option value='USD'>USD</option>
          <option value='EUR'>EUR</option>
          <option value='GBP'>GBP</option>
          <option value='JPY'>JPY</option>
          </select>

          <label>Target Currency</label>
          <select onChange={(e) => {
            setTo(e.target.value)
          }}>
          <option value='EUR'>EUR</option>
          <option value='USD'>USD</option>
          <option value='GBP'>GBP</option>
          <option value='JPY'>JPY</option>
          </select>

          <p><strong>Converted Amount {convert}{to.toUpperCase()}</strong></p>
     
         </div>)

}

Your browser information:

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

you are misquoting the tests. Here’s what they actually said:

6. Changing the value of the second select element should not cause the converted amounts to be recalculated.

8. Changing the value of the second select element should display the new converted amount and currency.

First one is talking about how your code behaves behind the scenes. It should not need to recalculate the convertions.
Second one is talking about how the GUI (or graphical user interface) behaves. That is, how does what the user see change? This is unrelated to what is happening in the backend in terms of calculations.