Build a Currency Converter - Build a Currency Converter

Curriculum Help
,
1

Tell us what’s happening:

If i try to pass the 6th the 8th fails and vice-versa.
How can i pass this?

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 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

input, select, button {
    font: inherit;
}

body {
  background-color: rgb(2, 2, 37);
  color: white;
  width: 100%;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

.main {
  width: clamp(300px, 80%, 600px);
  background-color: rgb(28, 28, 55);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.main__form {
    margin: 1rem auto;
}

.form__h1 {
    padding: 1rem 0.5rem;
}

.form__p {
    padding: 10px;
}

.main__form input,select {
    display: block;
    margin-bottom: 0.8rem;
    width: 100%;
    padding: 0.4rem;
    border-radius: 5px;
    border: none;
}

.main__form label {
    display: block;
    margin-bottom: 5px;
}

.main__converted-amount {
    font-size: 1.2rem;
    font-weight: bold;
    color: hsl(84, 60%, 60%);
}

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

const exchangeRates = {
  USD: 1,
  EUR: 0.92,
  GBP: 0.78,
  JPY: 156.7,
};

export function CurrencyConverter() {
  const [amount, setAmount] = useState(0);
  const [currency, setCurrency] = useState({
    startCurrency: "USD",
    targetCurrency: "EUR",
  });

  function currencyConversion() {
    console.log("apple");
    return (
      (exchangeRates[currency.targetCurrency] /
        exchangeRates[currency.startCurrency]) *
      amount
    ).toFixed(2);
  }

  const convertedAmount = useMemo(
    () => currencyConversion(),
    [amount, currency.startCurrency]
  );
const handleChange = (e) => {
    const { name, value } = e.target;
    setCurrency((prev) => ({ ...prev, [name]: value }));
  }

  return (
    <main className="main">
      <form className="main__form">
        <h1 className="form__h1">Currency Converter</h1>
        <p className="form__p">USD to EUR Conversion</p>
        <input
          type="number"
          id="amount"
          name="amount"
          className="form__amount-input"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />
        <label className="form__start-currency-label" htmlFor="start-currency">
          Start Currency:
        </label>
        <select
          name="startCurrency"
          id="start-currency"
          defaultValue={currency.startCurrency}
          onChange={handleChange}
        >
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="GBP">GBP</option>
          <option value="JPY">JPY</option>
        </select>
        <label
          className="form__target-currency-label"
          htmlFor="target-currency"
        >
          Target Currency:
        </label>
        <select
          name="targetCurrency"
          id="target-currency"
          defaultValue={currency.targetCurrency}
          onChange={handleChange}
        >
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="GBP">GBP</option>
          <option value="JPY">JPY</option>
        </select>
      </form>
      <p className="main__converted-amount">
        Converted Amount: {convertedAmount}{" "}
        {currency.targetCurrency.toUpperCase()}
      </p>
    </main>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.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

I somehow passes it but i dont understand what changed. In the code that i used before when i used both start and target currency as dependency it worked sam like this but didnt pass.

code removed by moderator

3

Congratulations on solving the challenge! You should be proud of your achievement…we are! But we are removing your working solution, so it is not available to others who have not yet done the work to get there. Again, congrats!

4

Try using a tool like WinMerge to compare both versions of your code to see the differences.

6

I tried to ask AI about this. It said the challenge probably wants me to convert starting currency into all the other remaining currency within an object and then only display the one needed for target currency.
In my solution in only converted the target currency.
Now it makes sense how changing targetcurrency shouldnt recalculate. Beacuse all the target currencies were already calculated and stored.
Is this explanation correct.
Should i redo this challlenge or this works;

7

you can just make this change, redoing the whole challenge seems a lot, unless you really want to