Currency converter app using ReactJS (original) (raw)

Last Updated : 01 Aug, 2024

In this article, we will be building a very simple currency converter app **with the help of an API. Our app contains three sections, one for taking the user input and storing it inside a state variable, a menu where users can change the units of conversion, and finally, a display section where we display the final results.

Let us have a look at how the final application will look like:

Currency Converter using ReactJS

**Prerequisites: The pre-requisites for this project are:

**Approach: At first, we call the API and store the required conversion rates inside a state variable and later we perform some operations that convert the currencies. Our app contains a flip switch where users can switch currencies at any time. We will be using functional components to create the application

**Steps to create the application:

**Step 1: Create a react application by typing the following command in the terminal:

npx create-react-app currency-converter

**Step 2: Now, go to the project folder i.e currency-converter by running the following command:

cd currency-converter

**Step 3: Let’s install some npm packages required for this project:

npm install axios
npm install react-dropdown
npm install react-icons

**Project Structure:

**The updated dependencies in package.json will look like:

"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dropdown": "^1.11.0",
"react-icons": "^4.10.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

**Example: Write the following code in respective files:

/* App.css */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

.App { height: 100vh; width: 100%; display: flex; align-items: center; flex-direction: column; background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%); }

.heading { font-family: 'Pacifico', cursive; font-size: 35px; }

.container { height: auto; width: 800px; display: flex; justify-content: space-around; align-items: center; }

input { padding-left: 5px; font-size: 20px; height: 36px; }

.middle, .right { width: 120px; }

.switch { padding: 5px; background-color: rgb(226, 252, 184); border-radius: 50%; cursor: pointer; }

.result { box-sizing: border-box; width: 800px; padding-left: 30px; }

button { width: 100px; height: 30px; font-weight: bold; font-size: 20px; margin-top: 15px; border: 2px solid forestgreen; background-color: rgb(226, 252, 184); cursor: pointer; }

p, h3, button, .switch { color: forestgreen; }

p { font-size: 30px; }

` JavaScript ``

// App.js import { useEffect, useState } from 'react'; import Axios from 'axios'; import Dropdown from 'react-dropdown'; import { HiSwitchHorizontal } from 'react-icons/hi'; import 'react-dropdown/style.css'; import './App.css';

function App() {

// Initializing all the state variables 
const [info, setInfo] = useState([]);
const [input, setInput] = useState(0);
const [from, setFrom] = useState("usd");
const [to, setTo] = useState("inr");
const [options, setOptions] = useState([]);
const [output, setOutput] = useState(0);

// Calling the api whenever the dependency changes
useEffect(() => {
    Axios.get(

https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/${from}.json) .then((res) => { setInfo(res.data[from]); }) }, [from]);

// Calling the convert function whenever
// a user switches the currency
useEffect(() => {
    setOptions(Object.keys(info));
    convert();
}, [info])

// Function to convert the currency
function convert() {
    var rate = info[to];
    setOutput(input * rate);
}

// Function to switch between two currency
function flip() {
    var temp = from;
    setFrom(to);
    setTo(temp);
}

return (
    <div className="App">
        <div className="heading">
            <h1>Currency converter</h1>
        </div>
        <div className="container">
            <div className="left">
                <h3>Amount</h3>
                <input type="text"
                    placeholder="Enter the amount"
                    onChange={(e) => setInput(e.target.value)} />
            </div>
            <div className="middle">
                <h3>From</h3>
                <Dropdown options={options}
                    onChange={(e) => { setFrom(e.value) }}
                    value={from} placeholder="From" />
            </div>
            <div className="switch">
                <HiSwitchHorizontal size="30px"
                    onClick={() => { flip() }} />
            </div>
            <div className="right">
                <h3>To</h3>
                <Dropdown options={options}
                    onChange={(e) => { setTo(e.value) }}
                    value={to} placeholder="To" />
            </div>
        </div>
        <div className="result">
            <button onClick={() => { convert() }}>Convert</button>
            <h2>Converted Amount:</h2>
            <p>{input + " " + from + " = " + output.toFixed(2) + " " + to}</p>

        </div>
    </div>
);

}

export default App;

``

**Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

**Output: Now open your browser and go to **http://localhost:3000/, you will see the following output: