Build a Currency Converter - Build a Currency Converter

DRAGOROD · March 9, 2026, 11:46am

Tell us what’s happening:

Need Help! not meeting condition 7 & 8 even though the display showing the values just fine

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

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() {
  let rates={
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
  }
  let [amount, setAmount]=useState(0);
  let [frOm,setFrom]=useState("USD")
  let [to,setTo]=useState("EUR")
  let currencyInUsd=useMemo(()=>{
    if(!amount) return 0;
    return amount/rates[frOm]
  },[amount,frOm])

let converted=currencyInUsd*rates[to]

return (
  <>
  <input type="number" value={amount} onChange={(e)=>setAmount(Number(e.target.value))}/>
  <select onChange={(e)=>setFrom(e.target.value)} value={frOm}>
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
    <option value="JPY">JPY</option>
  </select>
  <select value={to} onChange={(e)=>setTo(e.target.value)}>
  <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
    <option value="JPY">JPY</option>
  </select>
  <span>{converted.toFixed(2)} {to}</span>
  </>
)
}

Your browser information:

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

Challenge Information:

Build a Currency Converter - Build a Currency Converter

DRAGOROD · March 9, 2026, 5:35pm

Need Help! even though my output showing the value accordingly condition 7 & 8 aren’t meeting

1. 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.

<!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>

const { useState, useMemo } = React;

export function CurrencyConverter() {
 let rates={
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
 }
 let [amount,setAmount]=useState("");
 let [frOm,setForm]=useState("USD");
 let [to,setTo]=useState("EUR");
 let currencyForUsd=useMemo(()=>{
   if(!amount) return 0;
   return amount/rates[frOm]
 },[amount,frOm])
 let converted=currencyForUsd*rates[to]

 return (
   <>
   <input type="number" value={amount} onChange={x=>setAmount(Number(x.target.value))}/>
   <select onChange={x=>setForm(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <select onChange={x=>setTo(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <p>{converted.toFixed(2)} {to}</p>
   </>
 )
}

faust.levity · March 9, 2026, 5:49pm

Can you please share a link for this challenge?

DRAGOROD · March 9, 2026, 5:50pm

here: Build a Currency Converter: Build a Currency Converter | freeCodeCamp.org

DRAGOROD · March 10, 2026, 6:53am

Need Help! even though my output showing the value accordingly condition 7 & 8 aren’t meeting

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

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>

JSX

const { useState, useMemo } = React;

export function CurrencyConverter() {
 let rates={
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
 }
 let [amount,setAmount]=useState("");
 let [frOm,setForm]=useState("USD");
 let [to,setTo]=useState("EUR");
 let currencyForUsd=useMemo(()=>{
   if(!amount) return 0;
   return amount/rates[frOm]
 },[amount,frOm])
 let converted=currencyForUsd*rates[to]

 return (
   <>
   <input type="number" value={amount} onChange={x=>setAmount(Number(x.target.value))}/>
   <select onChange={x=>setForm(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <select onChange={x=>setTo(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <p>{converted.toFixed(2)} {to}</p>
   </>
 )
}

DRAGOROD · March 12, 2026, 2:37pm

Need Help! even though my output showing the value accordingly condition 7 & 8 aren’t meeting

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

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>

JSX

const { useState, useMemo } = React;

export function CurrencyConverter() {
 let rates={
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7
 }
 let [amount,setAmount]=useState("");
 let [frOm,setForm]=useState("USD");
 let [to,setTo]=useState("EUR");
 let currencyForUsd=useMemo(()=>{
   if(!amount) return 0;
   return amount/rates[frOm]
 },[amount,frOm])
 let converted=currencyForUsd*rates[to]

 return (
   <>
   <input type="number" value={amount} onChange={x=>setAmount(Number(x.target.value))}/>
   <select onChange={x=>setForm(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <select onChange={x=>setTo(x.target.value)}>
   <option>USD</option>
   <option>EUR</option>
   <option>GBP</option>
   <option>JPY</option>
   </select>
   <p>{converted.toFixed(2)} {to}</p>
   </>
 )
}

Problem Link: https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-currency-converter/build-a-currency-converter

ILM · March 12, 2026, 3:23pm

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

DRAGOROD · March 12, 2026, 3:32pm

@ILM Can you help me

ILM · March 12, 2026, 3:40pm

I have restored the message I had left accidentally so there is no confusion, you have left the link of the project and code properly formatted so you don’t need to do that (that’s why I deleted it)

ILM · March 12, 2026, 3:43pm

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Thanks.

ILM · March 12, 2026, 3:44pm

there is this suggestion in a previous post:

did you try chaing the initial value?

DRAGOROD · March 12, 2026, 3:50pm

No I didn’t do it because I didn’t understand why I have to change it 0 to 1

DRAGOROD · March 12, 2026, 3:55pm

ahh It worked but can you tell me why? wasn’t the initial value suppose to be 0 since nothing entered yet?

ILM · March 12, 2026, 3:59pm

This is actually a test issue rather than a problem with your code logic.

Tests 7 and 8 work by capturing the converted amount displayed before changing a select, then changing the select, and checking that the displayed amount is different afterwards. The problem is that the tests never set the input to a non-zero value before running — they rely on whatever initial state you gave to amount.

If your initial amount state is 0, any conversion will display 0.00 regardless of which currency is selected. So when the test changes the from-currency, the displayed value is still 0.00 — unchanged — and the test fails.

Setting the initial amount to 1 (or any non-zero value) makes the tests pass because changing the currency actually produces a different number.

This is a limitation of these tests — the requirement for a non-zero initial amount is implicit and not stated in the user stories. I have opened an issue to track the fix: Build a Currency Converter: tests 7 and 8 implicitly require non-zero initial amount · Issue #66396 · freeCodeCamp/freeCodeCamp · GitHub

system · April 9, 2026, 3:59pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Build a Currency Converter - Build a Currency Converter JavaScript	3	87	February 12, 2026
Build a Currency Converter - Build a Currency Converter JavaScript	1	78	December 24, 2025
Build a Currency Converter - Build a Currency Converter JavaScript	3	65	March 7, 2026
Build a Currency Converter - Build a Currency Converter JavaScript	4	213	January 13, 2026
Build a Currency Converter - Build a Currency Converter JavaScript	3	41	April 9, 2026

Build a Currency Converter - Build a Currency Converter

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics