TEST-7 and TEST-8 -- Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

my code doesnt pass test 7 and test 8 even tho it does what is described.

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

thx for any help

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

export function CurrencyConverter() {
  const [startCr , setStartCr]=useState("USD");
  const [endCr , setEndCr]=useState("USD");
  const [startNr , setStartNr]=useState("");

const memoized = useMemo(()=>{
  const rate = currencyMap[startCr] * currencyMap[endCr];
  return (startNr*rate).toFixed(2);
}, [startCr ,startNr])

  return(
    <div className="container">
      <input type="number" value={startNr}   onChange={(e) => {
    if (/^\d*$/.test(e.target.value)) {
      setStartNr(e.target.value);
    }else{
      alert("only integers pls");
    }
  }}/>

      {/* START CURRENCY */}
      <label htmlFor="startCurrency">Start Currency</label>
      <select id="startCurrency" value={startCr} onChange={(e)=>(setStartCr(e.target.value))}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>

      {/* END CURRENCY */}
      <label htmlFor="endCurrency">End Currency</label>
      <select id="endCurrency" value={endCr} onChange={(e)=>(setEndCr(e.target.value))}>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
        <option value="JPY">JPY</option>
      </select>

      <h2>ans = {memoized} {endCr}</h2>
    </div>
  )
}

/* file: styles.css */
.container{
  border:1px solid red;
  display:flex;
  flex-direction:column;
  width:400px;
  height:300px;
  margin:auto;
}

Your browser information:

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

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

Welcome to the forum @ckrts12

Try using your app to convert a single US dollar to British pound sterling, all other currency units.

Happy coding

3

Hi **ckrts12,

Try to set initial value for** startNr to number 1, not empty string.
The calculation inside useMemo I think is wrong too. It should be:
const rate = currencyMap[endCr] / currencyMap[startCr];

Also, in your input onChange function, convert value to Number ( Number(e.target.value) )

Try this, and see if that helps!

1 Like