Build a Currency Converter - Build a Currency Converter

JavaScript
1

Tell us what’s happening:

Number 5 isn’t passing but my project seems to be doing what 5 asks.

Your code so far

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

const money = [
  { id: 1, moneyCode: "USD", moneySymbol: "$" },
  { id: 2, moneyCode: "GBP", moneySymbol: "£" },
  { id: 3, moneyCode: "JPY", moneySymbol: "¥" },
  { id: 4, moneyCode: "EUR", moneySymbol: "€" },
  { id: 5, moneyCode: "BRL", moneySymbol: "R$" },
];

const usdToOtherCurrency = {
  USD: 1,
  GBP: 0.74,
  JPY: 158,
  EUR: 0.85,
  BRL: 5.15,
  convertUsd: function (output) {
    return this.USD * this[output];
  },
};

const gbpToOtherCurrency = {
  GBP: 1,
  USD: 1.35,
  JPY: 213,
  EUR: 1.15,
  BRL: 6.86,
  convertGbp: function (output) {
    return this.GBP * this[output];
  },
};

const eurToOtherCurrency = {
  EUR: 1,
  USD: 1.17,
  JPY: 185,
  GBP: 0.87,
  BRL: 5.96,
  convertEur: function (output) {
    return this.EUR * this[output];
  },
};

const jpyToOtherCurrency = {
  JPY: 1,
  USD: 0.0063,
  EUR: 0.0054,
  GBP: 0.0047,
  BRL: 0.032,
  convertJpy: function (output) {
    return this.JPY * this[output];
  },
};

const brlToOtherCurrency = {
  "BRL": 1,
  "USD": 0.2,
  "EUR": 0.17,
  "GBP": 0.15,
  "JPY": 31.0,
  convertBrl: function (output) {
    return this["BRL"] * this[output];
  },
};

export function CurrencyConverter() {
  // Initializing state variables
  const [moneyTable] = useState(money);
  const [amount, setAmount] = useState(1);
  const [inputCurrency, setInputCurrency] = useState("USD");
  const [outputCurrency, setOutputCurrency] = useState("USD");

  // Function to set the final currency
  function handleOutputCurrency(e) {
    setOutputCurrency(e.target.value);
  }

  // Function to set the amount of money
  function handleInputChange(e) {
    e.preventDefault();
    setAmount(e.target.value);
  }

  // Function to set the base currency
  function handleInputCurrency(e) {
    e.preventDefault();
    setInputCurrency(e.target.value);
  }

  const currencyConverter = useMemo(() => {
    if (inputCurrency === "BRL") {
      return (amount * brlToOtherCurrency.convertBrl(outputCurrency)).toFixed(2);
    } else if (inputCurrency === "JPY") {
      return (amount * jpyToOtherCurrency.convertJpy(outputCurrency)).toFixed(2);
    } else if (inputCurrency === "USD") {
      return (amount * usdToOtherCurrency.convertUsd(outputCurrency)).toFixed(2);
    } else if (inputCurrency === "EUR") {
      return (amount * eurToOtherCurrency.convertEur(outputCurrency)).toFixed(2);   
    } else if (inputCurrency === "GBP") {
      return (amount * gbpToOtherCurrency.convertGbp(outputCurrency)).toFixed(2);
    }
  }, [amount, inputCurrency, outputCurrency]);

  return (
    <div className="converter">
      <h1 className="title">Currency Converter</h1>

      {/*Input for amount to be converted */}
      <label htmlFor="number">Amount:</label>
      <input
        type="number"
        id="number"
        name="number"
        className="currency-option"
        value={amount}
        onChange={handleInputChange}
        inputMode="numeric"
        onKeyDown={(evt) =>
          ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()
        }
        placeholder="Ex. 10.50"
        min="0"
      />
      {/* */}

      {/* This is the input for the base currency */}
      <label htmlFor="inputCurrency">From:</label>
      <select
        id="inputCurrency"
        className="currency-option"
        defaultValue={inputCurrency}
        onChange={handleInputCurrency}
      >
        {moneyTable.map((currencyName) => (
          <option key={currencyName.id} value={currencyName.moneyCode}>
            {currencyName.moneyCode.toUpperCase()}
          </option>
        ))}
      </select>
      {/*  */}

      {/* This is the input for the final currency */}
      <label htmlFor="outputCurrency">To:</label>
      <select
        id="outputCurrency"
        className="currency-option"
        defaultValue={outputCurrency}
        onChange={handleOutputCurrency}
      >
        {moneyTable.map((currencyName) => (
          <option key={currencyName.id} value={currencyName.moneyCode}>
            {currencyName.moneyCode}
          </option>
        ))}
      </select>
      {/*  */}

      {/* This is the result */}
      <h2>Converted Amount: <span>{currencyConverter} {outputCurrency}</span></h2>
      {/* */}
    </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

2

Hi @LrdCaptainHelmer

Note the format required:

Your CurrencyConverter component should render an element showing the converted amount in the format XX.XX CCC, where XX.XX is the converted amount and CCC is the currency code.

Happy coding

3

Here’s a slightly updated code:

const money = [
  { id: 1, moneyCode: "USD", moneySymbol: "$" },
  { id: 2, moneyCode: "GBP", moneySymbol: "£" },
  { id: 3, moneyCode: "JPY", moneySymbol: "¥" },
  { id: 4, moneyCode: "EUR", moneySymbol: "€" },
  { id: 5, moneyCode: "BRL", moneySymbol: "R$" },
];

const usdToOtherCurrency = {
  "USD": 1,
  "GBP": 0.74,
  "JPY": 158,
  "EUR": 0.85,
  "BRL": 5.15,
  convertUsd: function (output) {
    return this["USD"] * this[output];
  },
};

const gbpToOtherCurrency = {
  "GBP": 1,
  "USD": 1.35,
  "JPY": 213,
  "EUR": 1.15,
  "BRL": 6.86,
  convertGbp: function (output) {
    return this["GBP"] * this[output];
  },
};

const eurToOtherCurrency = {
  "EUR": 1,
  "USD": 1.17,
  "JPY": 185,
  "GBP": 0.87,
  "BRL": 5.96,
  convertEur: function (output) {
    return this["EUR"] * this[output];
  },
};

const jpyToOtherCurrency = {
  "JPY": 1,
  "USD": 0.0063,
  "EUR": 0.0054,
  "GBP": 0.0047,
  "BRL": 0.032,
  convertJpy: function (output) {
    return this["JPY"] * this[output];
  },
};

const brlToOtherCurrency = {
  "BRL": 1,
  "USD": 0.2,
  "EUR": 0.17,
  "GBP": 0.15,
  "JPY": 31.0,
  convertBrl: function (output) {
    return this["BRL"] * this[output];
  },
};

export function CurrencyConverter() {
  // Initializing state variables
  const [moneyTable] = useState(money);
  const [amount, setAmount] = useState(1);
  const [inputCurrency, setInputCurrency] = useState("USD");
  const [outputCurrency, setOutputCurrency] = useState("USD");

  // Function to set the final currency
  function handleOutputCurrency(e) {
    setOutputCurrency(e.target.value);
  }

  // Function to set the amount of money
  function handleInputChange(e) {
    e.preventDefault();
    setAmount(e.target.value);
  }

  // Function to set the base currency
  function handleInputCurrency(e) {
    e.preventDefault();
    setInputCurrency(e.target.value);
  }

  const currencyConverter = useMemo(() => {
    if (inputCurrency === "BRL") {
      return (Number(amount * brlToOtherCurrency.convertBrl(outputCurrency))).toFixed(2);
    }
    else if (inputCurrency === "JPY") {
      return (Number(amount * jpyToOtherCurrency.convertJpy(outputCurrency))).toFixed(2);
    }
    else if (inputCurrency === "USD") {
      return (Number(amount * usdToOtherCurrency.convertUsd(outputCurrency))).toFixed(2);
    }
    else if (inputCurrency === "EUR") {
      return (Number(amount * eurToOtherCurrency.convertEur(outputCurrency))).toFixed(2);
    }
    else if (inputCurrency === "GBP") {
      return (Number(amount * gbpToOtherCurrency.convertGbp(outputCurrency))).toFixed(2);
    }
  }, [amount, inputCurrency, outputCurrency]);

  return (
    <div className="converter">
      <h1 className="title">Currency Converter</h1>

      {/*Input for amount to be converted */}
      <label htmlFor="number">Amount:</label>
      <input
        type="number"
        id="number"
        name="number"
        className="currency-option"
        value={amount}
        onChange={handleInputChange}
        inputMode="numeric"
        onKeyDown={(evt) =>
          ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()
        }
        placeholder="Ex. 10.50"
        min="0"
      />
      {/* */}

      {/* This is the input for the base currency */}
      <label htmlFor="inputCurrency">From:</label>
      <select
        id="inputCurrency"
        className="currency-option"
        defaultValue={inputCurrency}
        onChange={handleInputCurrency}
      >
        {moneyTable.map((currencyName) => (
          <option key={currencyName.id} value={currencyName.moneyCode}>
            {currencyName.moneyCode.toUpperCase()}
          </option>
        ))}
      </select>
      {/*  */}

      {/* This is the input for the final currency */}
      <label htmlFor="outputCurrency">To:</label>
      <select
        id="outputCurrency"
        className="currency-option"
        defaultValue={outputCurrency}
        onChange={handleOutputCurrency}
      >
        {moneyTable.map((currencyName) => (
          <option key={currencyName.id} value={currencyName.moneyCode}>
            {currencyName.moneyCode}
          </option>
        ))}
      </select>
      {/*  */}

      {/* This is the result */}
      <p>Converted Amount: {currencyConverter} {outputCurrency}</p>
      {/* */}
    </div>
  );
}

The converted amount is shown with the format requested, which is XX.XX CCC, but it doesn’t pass no. 9.
Am I supposed to do it elsewhere in the code or is it something I didn’t notice?

4

I’ve been stuck for over a week on this problem.

5

I already solved all problems but no. 6.
I had to remove e.preventDefault()

6

Problem was successfully solved.