How to make a small calculator using Express
In the index.html ,
<!DOCTYPE html><html><body><h2>Calculator</h2><form action="/" method ="post"><input type="text" name="n1" placeholder="First Number"><br><input type="text" name="n2" placeholder="Second Number"><br><button type="submit" name="Submit">Calculate</button></form></body></html>
We can include the following code in our index.html file to create the basic sketch.
The above diagram shows a snapshot of the website.
Let’s make a new file called cal.js.
const express= require("express");const app= express();app.get("/",function(req,res){res.sendFile(__dirname+"/index.html");});app.listen(3000,function(){console.log("Server started on port 3000");});
By using const express= require(“express”), we are going to create a new const that’s called express, and we’re going to require that package “express”. We now create a constant called app, which is set equal express. By using we tell it to listen on a specific port for any HTTP requests that get sent to our server. Let’s choose the port 3000. app.get() command defines what should happen when someone makes a get request to the home route. So that’s the first parameter. And then there’s a callback function that tells the server what to do when that request happens. By using res.sendFile command, this transfers the file over to the browser when they make a get request.
Let’s run this using the terminal.
When we hit the two numbers and press submit button, we get an error as below.
To make a post request, let’s first install the body-parser.
Then we can edit our cal.js file as follows:
const express= require("express");const bodyParser=require("body-parser");const app= express();app.use(bodyParser.urlencoded({extended:true}));app.get("/",function(req,res){res.sendFile(__dirname+"/index.html");});app.post("/",function(req,res){var num1=Number(req.body.n1);var num2=Number(req.body.n2);var result=num1+num2;res.send("The result "+result);});app.listen(3000,function(){console.log("Server started on port 3000");});
So we can create a new const that’s called bodyParser, and it’s going to be requiring body-parser package that we just installed. By using app.use(bodyParser.urlencoded({extended:true})), we’re going to specify the thing we wanted to use, which is bodyParser. Now Body Parser has a few modes. We’re going to be using is bodyParser.urlencoded. This is the special one that we use when we’re trying to parse data that comes from an HTML form. Let’s discuss how we are going to make our post request. So, by using Body Parser, we’re able to parse the HTTP request that we get, and by using urlencoded we can get access to the form data.
So we can, for example, log request.body.num1. Let’s think we passed a value for the number 1. So that value gets stored inside this request.body.num1.
Let’s create a variable that’s going to hold our num1, and that’s going to be equal to request.body.num1. And then we can calculate the result, which is going to be num1+ num2. And then we’re going to send back, “The result “, and then we’re going to append that variable result onto the end.
Now our small calculator is working well.
Conclusion
In this article, we discussed how to make a small calculator using Nodejs and Express.
Stay tuned for more articles!!
