Skip to content
Related Articles

Related Articles

How to create a Currency converter app in ReactJS ?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 20 Aug, 2021
Improve Article
Save Article

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. 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.

Prerequisites: The pre-requisites for this project are:

Creating a React application and installing some npm packages:

  • 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: It will look like this.

Example: Here App.js is the only default component of our app that 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 in the world and also their conversion rates. We are using the react-dropdown npm package to list all the available currencies and also we react-icons npm package for the switch button. 

Now write down the following code in the App.js file. 

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;

Now let’s edit the file named App.css

App.css




  
.App {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 120px;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}
.heading{
  font-family: 'Pacifico', cursive;
  font-size: 35px;
}
.container{
  height: 300px;
  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;
  margin-top: 25px;
  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;
  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:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!