Building a Simple Currency Converter Bot With Node JS

Are you fascinated by the programming world and looking to embark on an exciting project? Building the best currency converter bot with Node.js might be your perfect endeavor! In this blog, we will walk you through the step-by-step process of creating the best currency converter using Node.js.

Before diving into the coding journey, let’s lay the groundwork. We’ll start by discussing the prerequisites you need to have to build your best currency converter bot successfully. This includes setting up Node.js and obtaining an access key for the Fixer API. Once the prerequisites are squared away, we’ll move on to the project setup.

You’ll learn how to create a new directory for your project and initialize a Node.js project using npm. Furthermore, we’ll also guide you through the installation of Axios. It is a popular JavaScript library used for making HTTP requests.

Next, we will start building the currency converter bot. You’ll follow along as we guide you through creating a new JavaScript file for your bot. Furthermore, importing the necessary modules to perform the currency conversion. Moreover, we’ll demonstrate how to fetch the latest exchange rates using the Fixer API and display the converted results to the user.

Let’s dive in and transform your coding curiosity into a rewarding accomplishment!

What Are the Prerequisites to Building a Simple Currency Converter Bot With Node JS?

Let’s take a closer look at our prerequisites to ensure a smooth development process:

Node.js Installation and Basic Setup

To begin, you’ll need to have Node.js installed on your machine. Node.js is a powerful runtime environment allowing you to execute JavaScript code outside a web browser. Visit the official Node.js website (https://nodejs.org/ ) and download the appropriate version for your operating system. Once installed, you can verify the installation by running `node -v` in your terminal.

Basic familiarity with working in the command line and using npm will also be beneficial.

Obtain Fixer API Access Key

The Fixer API is a crucial component for obtaining up-to-date currency conversion rates. Furthermore, you must sign up for a Fixer API access key by visiting their website (https://fixer.io/ ) and registering an account. Some features require a paid subscription. However, the free tier should suffice to build a simple currency converter bot.

With Node.js installed and your Fixer API access key in hand, you’re ready to dive into the exciting process of building your currency converter bot.

How to Set up the Project When Building a Best Currency Converter Bot?

Setting up your project forms the foundation for building your Simple Currency Converter Bot with Node.js. Follow these steps to ensure your project is organized and ready for development:

Create a New Directory for the Project

Start by creating a dedicated directory for your currency converter bot project.

Next, open your terminal and navigate to the directory where you want to make the project folder.

Then, use the `mkdir` command to create a new folder with a suitable name, such as “currency-converter-bot”:

mkdir currency-converter-bot
cd currency-converter-bot

Initialize a New Node.js Project Using npm

Now that you have your project directory, it’s time to initialize a new Node.js project. Therefore, run the following command to create a `package.json` file, which will store project metadata and dependencies

npm init -y

The `-y` flag automatically accepts default values for package.json prompts.

Install Axios for The Best Currency Converter

Axios is a popular JavaScript library used for making HTTP requests. Moreover, you’ll use Axios to fetch currency exchange rates from the Fixer API. Install Axios as a dependency for your project using npm:

npm install axios

This command fetches the Axios package from the npm registry and adds it to your project’s `node_modules` folder.

With these steps completed, your project is set up and ready to incorporate functionality.

How to Build a Best Currency Converter Bot?

Here are the simple steps that you must follow.

Creating a New Javascript File for the Bot

Create a JavaScript file and name it app.js. Then, add the code to it as under:

Importing Required Modules

const express = require(‘express’);
const axios = require(‘axios’);
const bodyParser = require(‘body-parser’);

Here, we import the necessary modules: `express`, `axios`, and `body-parser`. Then, these modules will help us set up a web server, make API requests, and handle request data.

Initializing the Express Application and Setting the Port:

const app = express();
const PORT = 3000;

We create an Express application instance. Then, we define the port number (3000 in this case) on which the server will listen for incoming requests.

Configuring Middleware for Parsing Request Bodies

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

These lines set up middleware to parse incoming request bodies. Furthermore, the `body-parser` middleware handles URL-encoded and JSON request data.

Serving the HTML File

app.get(‘/’, (req, res) => {
res.sendFile(__dirname + ‘/index.html’);
});

When a user accesses the root URL (`/`), the server responds by sending the `index.html` file.

Handling POST Request for Exchange Rate

app.post(‘/getExchangeRate’, async (req, res) => {
const baseCurrency = req.body.baseCurrency;
const targetCurrency = req.body.targetCurrency;
const apiKey = ‘YOUR_API_KEY’; // Replace with your Fixer API key

try {
// Fetch exchange rates from Fixer API
const response = await axios.get(`https://data.fixer.io/api/latest?access_key=${apiKey}&base=${baseCurrency}&symbols=${targetCurrency}`);

// Extract the exchange rate for the target currency
const exchangeRate = response.data.rates[targetCurrency];

// Send JSON response with the calculated exchange rate
res.json({ exchangeRate });
} catch (error) {
// Handle errors
console.error(‘Error fetching exchange rate:’, error);
res.status(500).json({ error: ‘An error occurred while fetching exchange rate.’ });
}
});

This section defines a route that handles a POST request to `/getExchangeRate`. Then, it extracts the `baseCurrency` and `targetCurrency` from the request body and uses Axios to make a GET request to the Fixer API. Hence, fetching the exchange rates. It then extracts the desired exchange rate and returns it in a JSON response. Furthermore, if there’s an error, it handles the error gracefully.

Starting the Server

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

Finally, the serverstarts and listens on the specified port (3000). Then, a message is logged to the console indicating that the server is running.

This code sets up the foundation for your Simple Currency Converter Bot. Hence, users can input currency pairs and fetch exchange rates from the Fixer API. Moreover, you can build upon this code to create a complete currency conversion bot with a user interface and enhanced features. The final code should look like below:

const express = require(‘express’);
const axios = require(‘axios’);
const bodyParser = require(‘body-parser’);

const app = express();
const PORT = 3000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get(‘/’, (req, res) => {
res.sendFile(__dirname + ‘/index.html’);
});

app.post(‘/getExchangeRate’, async (req, res) => {
const baseCurrency = req.body.baseCurrency;
const targetCurrency = req.body.targetCurrency;
const apiKey = ‘YOUR_API_KEY’; // Replace with your Fixer API key

try {
const response = await axios.get(`https://data.fixer.io/api/latest?access_key=${apiKey}&base=${baseCurrency}&symbols=${targetCurrency}`);
const exchangeRate = response.data.rates[targetCurrency];

res.json({ exchangeRate });
} catch (error) {
console.error(‘Error fetching exchange rate:’, error);
res.status(500).json({ error: ‘An error occurred while fetching exchange rate.’ });
}
});

app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});

The next step is to create an HTML file. Let’s begin.

Create an HTML File

Create an HTML file and name it index.html. Then, add the below code to it.

Document Declaration and Head Section

This section includes the document type declaration and sets the character encoding and viewport for the webpage. Moreover, it also sets the webpage’s title on the browser tab and includes a `<style>` block for defining CSS styles.

CSS Styles

body {
/* CSS styles for body element */
}
.header {
/* CSS styles for header element */
}
/* … More CSS styles … */

The `<style>` block contains CSS styles for various elements on the page, such as the body, header, navigation bar, chat bubbles, user input, and buttons.

Header Section

<div class=”header”>
<h1>Welcome to Our Exchange Rates Chatbot By Fixer API</h1>
</div>

This section displays a header with a welcoming message.

Navigation Bar

<div class=”nav”>
<a href=”#home”>Home</a>
<a href=”#pricing”>Pricing</a>
<a href=”#blogs”>Blogs</a>
<a href=”#get-api-key”>Get Free API Key</a>
<a href=”#documentation”>Documentation</a>
</div>

This section provides navigation links to different sections of the webpage.

Chatbot Container

<div class=”container” id=”chatbot”>
<h2>Exchange Rate Chatbot</h2>
<!– … More content … –>
</div>

This section contains the main chatbot interface and its elements.

Initial Chat Area

<div class=”chat-container” id=”chatArea”>
<div class=”chat-bubble user-bubble” id=”startChat”>
Convert Currencies
</div>
<div class=”chat-bubble” id=”intro”>
Hi there! I can help you convert currencies. Please provide the base and target currencies you want to convert.
</div>
</div>

This section displays the initial chat bubble and an introduction message when the chatbot is started.

Conversation Area

This section is where chat messages exchanged between the user and the chatbot will be displayed.

User Input Area

<div class=”user-input” id=”inputArea” style=”display: none;”>
<input type=”text” id=”baseCurrency” placeholder=”Base Currency”>
<input type=”text” id=”targetCurrency” placeholder=”Target Currency”>
<button id=”convertBtn”>Convert</button>
</div>

This section contains input fields for users to enter base and target currencies and a “Convert” button.

JavaScript Code

1. The JavaScript code begins by getting references to various DOM elements.

2. The `startChat` event listener is attached to the initial chat bubble. When clicked, it hides the initial chat bubble, displays the user input area, and clears the conversation area.

3. The `convertBtn` event listener is attached to the “Convert” button. When clicked, it retrieves the base and target currencies the user enters.

4. Within the `convertBtn` event listener:

The user’s input is displayed as a chat bubble in the conversation area.
A loading message is displayed while the chatbot calculates the exchange rate.
An API request is made to the server using the `/getExchangeRate` endpoint. Hence, passing the user’s currency inputs.
The response is processed. Then, the chatbot’s response is displayed in the conversation area.
Input fields are cleared after the conversion is complete.

This code integrates the HTML structure with JavaScript to create an interactive chatbot interface for currency conversion.

Final Code

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Your Beautiful Web Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif, bold;
}

.header {
background-image: url(‘https://blog.min.io/content/images/2022/09/Achatbots-header–1-.png’);
background-size: cover;

color: white;
text-align: center;
padding: 100px;
}

.nav {
background-color: #87ceeb;
overflow: hidden;
}

.nav a {
float: left;
display: block;
color: rgb(12, 12, 12);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.nav a:hover {
background-color: #4c24bd;
color: black;
}

.container {
padding: 20px;
}

/* Chat Bubble Styles */
.chatbot-container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
}

.chat-container {
display: flex;
flex-direction: column;
margin-top: 20px;
max-width: 90%;
}

.chat-bubble {
background-color: #f1f1f1;
color: #333;
border-radius: 10px;
padding: 10px 15px;
margin-bottom: 10px;
max-width: 70%;
}

.user-bubble {
align-self: flex-start;
background-color: #87ceeb;
color: white;
}

.user-input {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
padding: 10px;
background-color: #f1f1f1;
border-radius: 10px;
max-width: 70%;
}

#baseCurrency,
#targetCurrency {
width: 40%;
border: none;
padding: 5px;
border-radius: 5px;
}

#convertBtn {
background-color: #87ceeb;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>

<div class=”header”>
<h1>Welcome to Our Exchange Rates Chatbot By Fixer API</h1>
</div>

<div class=”nav”>
<a href=”#home”>Home</a>
<a href=”#pricing”>Pricing</a>
<a href=”#blogs”>Blogs</a>
<a href=”#get-api-key”>Get Free API Key</a>
<a href=”#documentation”>Documentation</a>
</div>

<div class=”container” id=”chatbot”>
<h2>Exchange Rate Chatbot</h2>
<div class=”chat-container” id=”chatArea”>
<div class=”chat-bubble user-bubble” id=”startChat”>
Convert Currencies
</div>
<div class=”chat-bubble” id=”intro”>
Hi there! I can help you convert currencies. Please provide the base and target currencies you want to convert.
</div>
</div>
<div class=”chat-container” id=”conversation”>
<!– Chat messages will be displayed here –>
</div>
<div class=”user-input” id=”inputArea” style=”display: none;”>
<input type=”text” id=”baseCurrency” placeholder=”Base Currency”>
<input type=”text” id=”targetCurrency” placeholder=”Target Currency”>
<button id=”convertBtn”>Convert</button>
</div>
</div>

<script>
const startChat = document.getElementById(‘startChat’);
const chatArea = document.getElementById(‘chatArea’);
const conversation = document.getElementById(‘conversation’);
const inputArea = document.getElementById(‘inputArea’);
const baseCurrencyInput = document.getElementById(‘baseCurrency’);
const targetCurrencyInput = document.getElementById(‘targetCurrency’);
const convertBtn = document.getElementById(‘convertBtn’);

startChat.addEventListener(‘click’, () => {
chatArea.style.display = ‘none’;
inputArea.style.display = ‘flex’;
conversation.innerHTML = ”;
});

convertBtn.addEventListener(‘click’, async () => {
const baseCurrency = baseCurrencyInput.value.toUpperCase();
const targetCurrency = targetCurrencyInput.value.toUpperCase();

// Display user’s input as a chat bubble
const userBubble = document.createElement(‘div’);
userBubble.className = ‘chat-bubble user-bubble’;
userBubble.textContent = `You: Convert ${baseCurrency} to ${targetCurrency}`;
conversation.appendChild(userBubble);

try {

const loadingBubble = document.createElement(‘div’);
loadingBubble.className = ‘chat-bubble’;
loadingBubble.textContent = ‘Fixer Bot: Calculating…’;
conversation.appendChild(loadingBubble);

const response = await fetch(‘/getExchangeRate’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ baseCurrency, targetCurrency })
});

const data = await response.json();
const exchangeRate = data.exchangeRate;

await new Promise(resolve => setTimeout(resolve, 1500));

const chatBubble = document.createElement(‘div’);
chatBubble.className = ‘chat-bubble’;
chatBubble.textContent = `Fixer Bot: Exchange rate from ${baseCurrency} to ${targetCurrency}: ${exchangeRate}`;
conversation.removeChild(loadingBubble);
conversation.appendChild(chatBubble);

// Clear input fields
baseCurrencyInput.value = ”;
targetCurrencyInput.value = ”;
} catch (error) {
console.error(‘Error fetching exchange rate:’, error);
const errorBubble = document.createElement(‘div’);
errorBubble.className = ‘chat-bubble’;
errorBubble.textContent = ‘Fixer Bot: An error occurred while fetching exchange rate.’;
conversation.appendChild(errorBubble);
}
});
</script>

</body>
</html>

Displaying Results to the User

Run the following command in the terminal to run your Node JS web app.

node app.js

Conclusion

By combining Node.js for server-side logic and interaction with external APIs, we’ve crafted a chatbot interface that seamlessly converts currencies for users. Moreover, this project demonstrates the power of integrating front-end and back-end development to deliver a cohesive user experience. With this foundation, the possibilities for further enhancements and customization are limitless. Happy coding!

FAQs

What Is the Best Offline Currency Converter?

“Xe Currency is a top choice for offline currency conversion. Furthermore, offering accurate rates and user-friendly features.”

Is There a Money Converter App?

There are numerous money converter apps available. Hence, making currency conversion quick and convenient for users worldwide.

Where Is the Cheapest Place to Convert Currency?

Online currency exchange platforms often offer competitive rates. Hence, making them a cost-effective option for converting currency.

Should I Use Currency Converter?

Using a currency converter is beneficial for international transactions. Moreover, it also helps in travel planning, and understanding exchange rates for informed financial decisions.

Unlock Global Financial Insights with Fixer API – Seamlessly Integrate Exchange Rates into Your Applications Today!