This is a currency converter web application built using React and Vite.
The Currency Converter App allows users to convert currencies based on the latest exchange rates. It fetches real-time currency information from an external API and provides a user-friendly interface for currency conversion.
- Convert currencies with real-time exchange rates.
- Select from a wide range of currencies.
- Swap between 'from' and 'to' currencies with a single click.
- Responsive design for seamless use across devices.
To run this project locally, follow these steps:
-
Clone the repository to your local machine:
-
Navigate to the project directory:
cd currency-converter
-
Install dependencies using npm:
npm install
To start the development server and view the app in your browser, run:
npm run dev
This will start the development server at http://localhost:3000
.
// Import statements
import { useState } from "react";
import "./App.css";
import Card from "./components/Card";
import useCurrencyInfo from "./hooks/useCurrencyInfo";
function App() {
// State variables
const [amount, setAmount] = useState('');
const [from, setFrom] = useState("inr");
const [to, setTo] = useState("usd");
const [convertedAmount, setConvertedAmount] = useState('');
const currencyInfo = useCurrencyInfo(from);
const options = Object.keys(currencyInfo);
// Function to swap currencies
const swap = () => {
setFrom(to);
setTo(from);
setAmount(convertedAmount);
};
// Function to convert amount
const convert = () => {
setConvertedAmount(amount * currencyInfo[to]);
};
return (
// JSX code
);
}
export default App;
- The
App
component is the main component of the application. - It manages state variables for amount, 'from' currency, 'to' currency, and converted amount.
- It uses the
useCurrencyInfo
custom hook to fetch currency information based on the 'from' currency. - The
swap
function swaps 'from' and 'to' currencies and amounts. - The
convert
function calculates the converted amount based on the input amount and exchange rates.
// Import statement
import { useId } from "react";
// Card component
function Card({
label,
amount,
onAmountChange,
onCurrencyChange,
currencyOptions = [],
selectCurrency = "usd",
amountDisable = false,
currencyDisable = false,
}) {
// Generating unique ID for input element
const inputId = useId();
return (
// JSX code
);
}
export default Card;
- The
Card
component is a reusable component for displaying input fields and dropdowns. - It uses the
useId
hook from React to generate a unique ID for the input element. - It accepts props such as label, amount, currency options, and handlers for amount and currency change.
// Import statements
import { useEffect, useState } from "react";
// Custom hook for fetching currency information
function useCurrencyInfo(currency) {
const [data, setData] = useState({});
// Fetching data using useEffect
useEffect(() => {
fetch(
`https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${currency}.json`
)
.then((response) => response.json())
.then((response) => setData(response[currency]));
}, [currency]);
return data;
}
export default useCurrencyInfo;
- The
useCurrencyInfo
custom hook fetches currency information based on the provided currency using an external API. - It uses
useState
to manage the fetched data anduseEffect
to trigger the fetch operation when thecurrency
parameter changes.
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them.
- Push your changes to your fork.
- Submit a pull request to the main repository.
- React - A JavaScript library for building user interfaces.
- Vite - A next-generation frontend tooling.
- Currency API - An API for fetching currency exchange rates.