Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create a Currency converter app in ReactJS ?

  • Difficulty Level : Expert
  • Last Updated : 20 Aug, 2021

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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
Recommended Articles
Page :