Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Test No. 6 and 10 are not passing

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 */

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* border: 1px solid; */
}


:root {
  font-size: 62.5%;
}


body {
  background-color: hsl(42, 55%, 12%);
}


.converter-container {
  background-Color: hsl(42, 27%, 40%);
  color: white;
  text-align: center;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  width:475px;
  margin: 10em auto;
  border-radius: 7px;
  min-height: 350px;
}


h1 {
  padding: 1.2em 0 0.3em;
  font-size: 3em;
}


h2 {
  padding: 0.3em 0 0.7em;
}


form {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}


#initial-value {
  border: none;
  width: 90%;
  font-size: 1.5em;
  height: 2.4em;
  padding: 0.2em 0.6em 0.2em;
  border-radius: 4px;
  margin: 0 0 0.7em;
}


.unit-container {
  width: 90%;
  font-size: 1.5em
}


select {
  width: 100%;
  height: 2.7em;
  margin: 0.2em 0 0.5em;
  border-radius: 5px;
}


#conversion-text {
  font-size: 1.7em;
  font-weight: 600;
  margin: 0.5em 0 1em;
}


/* file: index.jsx */

const { useState, useMemo } = React;


export function CurrencyConverter() {

  const units = ["USD", "EUR", "GBP", "JPY"];

  const conversionMap = [
     {
      USD: 1,
      EUR: 0.85,
      GBP: 0.74,
      JPY: 156.90
    },


    {
      USD: 1.17,
      EUR: 1,
      GBP: 0.87,
      JPY: 184.06
    },


    {
      USD: 1.36,
      EUR: 1.16,
      GBP: 1,
      JPY: 212.73
    },


     {
      USD: 0.01,
      EUR: 1.16,
      GBP: 1,
      JPY: 1
    },
  ];


/* coversionMap.map(curr => {
  console.log(String(Object.keys(curr)))
  const key = Object.keys(curr);
  console.log(curr[key][key])
  }) */




  const [startUnit, setStartUnit] = useState("USD");
  const [targetUnit, setTargetUnit] = useState("EUR");
  const [startingValue, setStartingValue] = useState(1);


  const handleInput = (e) => {
    if (e.target.value == "e" || e.target.value === "") {
      setStartingValue(0);
      return
    }

    setStartingValue(e.target.value)
  }

  const converted = useMemo(() => {
    const convert = conversionMap.filter(curr => curr[startUnit] === 1)[0];
   
    const convertedAmount = startingValue * convert[targetUnit];
    return convertedAmount.toFixed(2)
  }, [startUnit, startingValue, targetUnit])  



  return (
    <div className="converter-container">
     <h1>Currency Converter</h1>  
  <form id="form-converter">
  <h2>{startUnit} to {targetUnit} Conversion
</h2>

// INPUT NUMBER 

        <label htmlFor="initial-value"></label>
        <input type="number" 
        id="initial-value"
        value={startingValue}
        onChange={handleInput}/>


        <label className="unit-container">
        Start Currency:
          <select value={startUnit} 
          onChange={e => 
            setStartUnit(e.target.value)
            }>
          {units.map(curr => (
                <option
              key={curr}
              value={curr}>
              {curr}
              </option>
              ))}
          </select>
        </label>


        <label className="unit-container">
        Target Currency:
          <select value={targetUnit} onChange={e => setTargetUnit(e.target.value)}>
           {units.map(curr => (
                <option
              key={curr}
              value={curr}>
              {curr}
              </option>
              ))}
          </select>
        </label>


        <p id="conversion-text">Converted Amount: {converted} {targetUnit}</p>
    </form>
    </div>
  )
}

Your browser information:

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

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

hello!

changing the second select element is changing the targetUnit and since it is in the dependency list in the useMemo here, it is causing the converted amount being recalculated.

about #10 → Converting from GBP to JPY, it shows 1 GBP = 212.73 JPY. But converting from JPY to GBP, it is showing 1 JPY = 1.00 GBP (input amount and converted amount being same here). I think this is causing the problem.

3

Thank you for pointing the JPY to GBP conversion rate. I finished it now. I didn’t realize that 2 memoization were going to be used.

4

I actually found out that my initial solution worked and it’s without using 2 memoization. It’s passing the targetUnit to the conversion function itself.