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 store 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.js: This component of our app contains all the logic. We will be using a free opensource (no auth requires) API called ‘currency-api’ to fetch a list of all the available currencies.
- App.css: This file contains the styling of our project
Javascript
// App.jsimport { 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; |
CSS
/* App.css */Â
Â
.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;} |
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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
