Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

  1. Changing the value of the first select element should display the new converted amount.
  2. Changing the value of the second select element should display the new converted amount and currency.
  3. The converted amount should be different from the input amount.

these 3 tests are not passing though my app is working according to the instructions. Can you tell me my mistakes?

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 currencies = {
    USD: 1,
    EUR: 0.92,
    GBP: 0.78,
    JPY: 156.7,
    INR: 90.23,
    DRM: 3.234,
  }


export function CurrencyConverter() {
  const [currency, setCurrency] = useState("")
  const [from, setFrom] = useState("Select")
  const [to, setTo] = useState("Select")
  
  const display = useMemo(() => {
    if(currency==="" || from==="Select") return null;
    return currency / currencies[from]
  },[currency, from])
  const result = to==="Select" ? null : (display * currencies[to]).toFixed(2) + ' ' + to


  return (
    <div id="container">
      <h1>Currency Converter</h1>
      <input id="input" type="number" min="1" value={currency} onChange={e => setCurrency(Number(e.target.value))} placeholder="Enter amount..." />
      <select value={from} onChange = {e => setFrom(e.target.value)} >
        <option>Select</option>
        <option>USD</option>
        <option>EUR</option>
        <option>GBP</option>
        <option>JPY</option>
        <option>INR</option>
        <option>DRM</option>
      </select>
      <select  value={to} onChange = {e => setTo(e.target.value)}>
        <option>Select</option>
        <option>USD</option>
        <option>EUR</option>
        <option>GBP</option>
        <option>JPY</option>
        <option>INR</option>
        <option>DRM</option>
      </select>
      <p id="result">{result}</p>
    </div>
  )
}

/* file: styles.css */
body {
  background-color: rgb(93, 93, 226);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#container {
  box-shadow: 0 0 5px rgb(0, 0, 0);
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  line-height: 60px;
  background-color: rgb(224, 171, 74);
  margin-top: 100px;
  border-radius: 2px;
  font-weight: bold;
}

input,select {
  margin-left: 130px;
  margin-right: 130px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: 2px solid rgb(0, 0, 0);
}

input {
  background-color: black;
  color: rgb(0, 255, 0);
  font-size: 20px;
  border: 2px solid white;
}

#result {
  margin-top: -3px;
  color: rgb(23, 30, 23);
}

h1 {
  color: rgb(11, 248, 82);
  text-shadow:  5px 0 5px rgb(44, 12, 12);
}

Your browser information:

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

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

There’s an example project at the top of the instructions. Try playing around with it to see how it behaves compared to yours. Try to match the expected functionality. Yours isn’t quite there yet. Happy coding.

1 Like
3

Thanks it worked. I was supposed to copy the example project UI.