Build a Currency Converter "test 8" fails

JavaScript
1

Tell us what’s happening:

The app works as described, but test 8 fails. Please help !!!

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
      href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Dancing+Script&family=Satisfy&display=swap"
      rel="stylesheet"
    />
    <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 */
* {
  box-sizing: border-box;
  /* border: 2px solid black; */
  margin: 0;
  overflow: hidden;
  padding: 0;
}
:root {
  --grey: #5e5e5e;
  --light-grey: #bbbbbb;
  --beige: #fff0db;
  --text-color: #fff;
  --danger-color: #850000;
  --danger-background: #ffadad;
  --button: #2563eb;
  --button-hover: #1d4ed8;
  --border: #454553;
  --body-background-1: #ffffff33;
  --body-background-2: #2d3748;
}
#root {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
html {
  background-color: var(--body-background-2);
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffff33;
  color: #fff;
  border-radius: 10px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
  width: 450px;
}

.number-input {
  border-radius: 10px;
  height: 40px;
  padding: 5px 5px;
  width: 50%;
  margin-top: 10px;
}
label {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-top: 10px;
}
select {
  width: 70%;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  background-color: #fff;
  border: 1.5px solid #d0d5dd;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  margin-top: 10px;

  /* Remove default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

p {
  margin-top: 10px;
  color: var(--beige);
  font-size: 20px;
}
button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background-color: #2563eb; /* blue */
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 40px;
  width: 50%;
  margin-left: 25%;
}
button:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}
button:active {
  transform: translateY(0);
}
button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}


.result {
  margin-top: 24px;
  padding: 10px 12px;
  border-radius: 12px;
  

  background: linear-gradient(135deg, #f9fafb, #eef2ff);
  border: 1px solid #e0e7ff;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
.result:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Converted text */
.conversion-result {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;

  color: #1f2937; /* dark gray */

  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Optional emphasis for currency code */
.conversion-result span {
  font-size: 28px;
  font-weight: 600;
  color: var(--danger-color); /* indigo */
}

.copyright {
  margin-top: 30px;
  font-family: "Dancing Script", cursive;
  font-size: 1.4rem;
  text-align: end;
  width: 100%;
  color: var(--beige);
  padding-right: 50px;
}


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

export function CurrencyConverter() {
  
    //  As on 10/02/2026
  const inrBaseCurrencyMap = {
    INR: 1,
    USD: 0.012, // US Dollar
    EUR: 0.0111, // Euro
    GBP: 0.0096, // British Pound
    JPY: 1.73, // Japanese Yen
    AUD: 0.0189, // Australian Dollar
    CAD: 0.0181, // Canadian Dollar
    CHF: 0.0103, // Swiss Franc
    CNY: 0.086, // Chinese Yuan
    HKD: 0.094, // Hong Kong Dollar
    NZD: 0.0218, // New Zealand Dollar
  };

  const [input, setInput] = useState(1);
  const [fromCurr, setFromCurr] = useState("INR");
  const [toCurr, setToCurr] = useState("USD");
  const [converted, setConverted] = useState("0.00");

  // Memoized FROM currency → INR

  const amountInINR = useMemo(() => {
    if (!input || input <= 0) return 0;
    return input / inrBaseCurrencyMap[fromCurr];
  }, [input, fromCurr]);

  useEffect(() => {
    if (!input || input <= 0) {
      setConverted("0.00");
      return;
    }
    const result = amountInINR * inrBaseCurrencyMap[toCurr];
    setConverted(result.toFixed(2));
  }, [input, fromCurr, toCurr]);

  return (
    <div className="main">
      <div className="container">
        <h1>Globle Currency Converter</h1>

        <label htmlFor="number"></label>
        <input
          id="number"
          className="number-input"
          type="number"
          required
          min="0"
          placeholder="Enter Amount....!!"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />

        <label htmlFor="fromCurrency"></label>
        <select
          id="fromCurrency"
          value={fromCurr}
          className="select-from"
          name="fromCurrency"
          onChange={(e) => setFromCurr(e.target.value)}
        >
          <option value="INR">INR – Indian Rupee</option>
          <option value="USD">USD – US Dollar</option>
          <option value="EUR">EUR – Euro</option>
          <option value="GBP">GBP – British Pound</option>
          <option value="JPY">JPY – Japanese Yen</option>
          <option value="AUD">AUD – Australian Dollar</option>
          <option value="CAD">CAD – Canadian Dollar</option>
          <option value="CHF">CHF – Swiss Franc</option>
          <option value="CNY">CNY – Chinese Yuan</option>
          <option value="HKD">HKD – Hong Kong Dollar</option>
          <option value="NZD">NZD – New Zealand Dollar</option>
        </select>

        <label htmlFor="fromCurrency">↓</label>
        <select
          id="fromCurrency"
          value={toCurr}
          className="select-to"
          name="fromCurrency"
          onChange={(e) => setToCurr(e.target.value)}
        >
          <option value="USD">USD – US Dollar</option>
          <option value="EUR">EUR – Euro</option>
          <option value="GBP">GBP – British Pound</option>
          <option value="JPY">JPY – Japanese Yen</option>
          <option value="AUD">AUD – Australian Dollar</option>
          <option value="CAD">CAD – Canadian Dollar</option>
          <option value="CHF">CHF – Swiss Franc</option>
          <option value="CNY">CNY – Chinese Yuan</option>
          <option value="HKD">HKD – Hong Kong Dollar</option>
          <option value="NZD">NZD – New Zealand Dollar</option>
          <option value="INR">INR – Indian Rupee</option>
        </select>

        {converted && (
          <div className="result">
            <p className="conversion-result">
              {converted} <span>{toCurr}</span>
            </p>
          </div>
        )}
      </div>
      <div className="copyright">
        Developed by
        <br /> KGM💖
      </div>
    </div>
  );
}

Your browser information:

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

Challenge Information:

Build a Currency Converter - Build a Currency Converter

2

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