Currency convertor

React JS

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [amount, setAmount] = useState(1);
  const [fromCur, setFromCur] = useState("EUR");
  const [toCur, setToCur] = useState("USD");
  const [converted, setConverted] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(
    function () {
      async function convert() {
        try {
          setIsLoading(true);
          const res = await fetch(
            `https://api.frankfurter.app/latest?amount=${amount}&from=${fromCur}&to=${toCur}`,
          );
          if (!res.ok) throw new Error("Error fetching data");
          const data = await res.json();
          setConverted(data.rates[toCur]);
        } catch (error) {
          console.error("Failed to fetch data:", error);
          setConverted("Error");
        } finally {
          setIsLoading(false);
        }
      }

      if (fromCur === toCur) return setConverted(amount);
      convert();
    },
    [amount, fromCur, toCur],
  );

  return (
    <div className="app-container">
      <h1 className="title">Currency Converter</h1>
      <div className="input-group">
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(Number(e.target.value))}
          disabled={isLoading}
          className="input-amount"
          min="1"
        />
        <div className="select-group">
          <select
            value={fromCur}
            onChange={(e) => setFromCur(e.target.value)}
            disabled={isLoading}
            className="select-currency"
          >
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="CAD">CAD</option>
            <option value="INR">INR</option>
          </select>
          <select
            value={toCur}
            onChange={(e) => setToCur(e.target.value)}
            disabled={isLoading}
            className="select-currency"
          >
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="CAD">CAD</option>
            <option value="INR">INR</option>
          </select>
        </div>
      </div>
      <p className="result">
        {isLoading ? "Loading..." : `${converted} ${toCur}`}
      </p>
    </div>
  );
}

CSS Convertor

React TS

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [amount, setAmount] = useState<number>(1);
  const [fromCur, setFromCur] = useState<string>("EUR");
  const [toCur, setToCur] = useState<string>("USD");
  const [converted, setConverted] = useState<string | number>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);

  useEffect(() => {
    async function convert() {
      try {
        setIsLoading(true);
        const res = await fetch(
          `https://api.frankfurter.app/latest?amount=${amount}&from=${fromCur}&to=${toCur}`,
        );
        if (!res.ok) throw new Error("Error fetching data");
        const data = await res.json();
        setConverted(data.rates[toCur]);
      } catch (error) {
        console.error("Failed to fetch data:", error);
        setConverted("Error");
      } finally {
        setIsLoading(false);
      }
    }

    if (fromCur === toCur) return setConverted(amount);
    convert();
  }, [amount, fromCur, toCur]);

  return (
    <div className="app-container">
      <h1 className="title">Currency Converter</h1>
      <div className="input-group">
        <input
          type="number"
          value={amount}
          onChange={(e) => setAmount(Number(e.target.value))}
          disabled={isLoading}
          className="input-amount"
          min="1"
        />
        <div className="select-group">
          <select
            value={fromCur}
            onChange={(e) => setFromCur(e.target.value)}
            disabled={isLoading}
            className="select-currency"
          >
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="CAD">CAD</option>
            <option value="INR">INR</option>
          </select>
          <select
            value={toCur}
            onChange={(e) => setToCur(e.target.value)}
            disabled={isLoading}
            className="select-currency"
          >
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="CAD">CAD</option>
            <option value="INR">INR</option>
          </select>
        </div>
      </div>
      <p className="result">
        {isLoading ? "Loading..." : `${converted} ${toCur}`}
      </p>
    </div>
  );
}

CSS Convertor