How to build Love Calculator using Node.js ?

Last Updated : 24 Jul, 2024

In this article, we are going to create a Love Calculator. A Love Calculator is used to calculate the love percentage between the partners.

Functionality:

Take User’s Name
Take User’s Partner Name
Show the Love Percentage

Approach: We are going to use Body Parser by which we can capture user input values from the form such as the user’s name, and the user’s partner name Then we will calculate the percentage from them and send the patients’ data to the web page using EJS. EJS is a middleware that makes it easy to send data from your server file (app.js or server.js) to a web page.

Implementation: Below is the step-by-step implementation of the above approach.

Step 1: Project Setup

Initializes NPM: Create and Locate your project folder into the terminal & type the command

npm init -y

It initializes our node application & makes a package.json file.

Install Dependencies: Locate your root project directory into the terminal and type the command

npm install express ejs

To install Express, and Ejs as dependencies inside your project

Create Server File: Create an ‘app.js’ file, inside this file require the Express Module, and create a constant ‘app’ for creating an instance of the express module, then set the EJS as the default view engine.

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

Rearrange Your Directories: It is required to use ‘.ejs’ as an extension for the HTML file instead of ‘.html’ for using EJS inside it. Then you have to move every ‘.ejs’ file in the views directory inside your root directory. EJS is by default looking for ‘.ejs’ files inside the views folder.

Use EJS variable: Create a ‘home.ejs’, inside the ‘home.ejs’ you have to use EJS Variables to receive values from your server file. You can declare variables in EJS like

<%= variableName %>

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <%= variableName %>
</body>

</html>

Send data to a variable: Inside your server file ( app.js or index.js ), you can send an EJS file along with some data by using the render method.

app.get("/", (req, res) => {
    res.render("home", { variableName: "Hello Geeks!" })
})

JavaScript

const express = require('express')
const app = express()
app.set('view engine', 'ejs')

app.get("/", (req, res) => {
    res.render("home", { variableName: "Hello Geeks!" })
})

app.listen(3000, (req, res) => {
    console.log("App is running on port 3000")
})

Fetching data from form to app.js: To receive input values of a form, we have to use a node package named body-parser.

Install body-parser:

npm install body-parser

Require body-parser module:

const bodyParser = require('body-parser')

And then:

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

Then we can handle form data using the request object.

Step 2: Create Functionalities:

Take User’s Name and User’s Partner Name: For this, we have to create a form inside ‘home.ejs’ file and handle the form data inside our ‘app.js’ file using Body Parser.

<form action="/" method="post">
       <input type="text" name="username" placeholder="Your Name">
       <input type="text" name="partnername" placeholder="Your Partner Name">
       <button type="submit">Calculator</button>
</form>

Handle form data inside ‘app.js’: We have to fetch values from a form using req.body.valueName, and then perform the operation shown below to calculate a value as a percentage.

app.post('/', (req, res)=> {
   userName = req.body.username;
   partnerName = req.body.partnername;
   var combinedNames = userName + partnerName
   var lowerNames = combinedNames.toLowerCase()
   console.log(lowerNames);
   var t = lowerNames.split("t").length - 1;
   var r = lowerNames.split("r").length - 1;
   var u = lowerNames.split("u").length - 1;
   var e = lowerNames.split("e").length - 1;
   var firstDigit = t + r + u + e
   if (firstDigit < 5) {
       firstDigit = firstDigit + 5;
   }
   var l = lowerNames.split("l").length - 1;
   var o = lowerNames.split("o").length - 1;
   var v = lowerNames.split("v").length - 1;
   var e = lowerNames.split("e").length - 1;
   var secondDigit = l + o + v + e
   var lovePercentage = firstDigit + '' + secondDigit;
});

Send Value to the ‘home.ejs’ page: As in the previous step we send a string “Hello Geeks!” to the home page, now let’s send the percentage value to a variable ‘lovePercentage’.

res.render("home.ejs", {percentage:  lovePercentage});

Receive Value of lovePercentage: To Receive the value sent from the ‘app.js’ we have to use ejs variable inside ‘home.ejs’.

<p>Love Percentage: <%= percentage %></p>

Below is the complete code to build Love Calculator using Node.js:

app.js

JavaScript

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

const bodyParser = require('body-parser')

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

app.get('/', (req, res) => {
    res.render("home.ejs", {percentage:  ""});
});

app.post('/', (req, res)=> {
    userName = req.body.username;
    partnerName = req.body.partnername;

    var combinedNames = userName + partnerName

    var lowerNames = combinedNames.toLowerCase()
    console.log(lowerNames);

    var t = lowerNames.split("t").length - 1;
    var r = lowerNames.split("r").length - 1;
    var u = lowerNames.split("u").length - 1;
    var e = lowerNames.split("e").length - 1;
    var firstDigit = t + r + u + e

    if (firstDigit < 5) {
        firstDigit = firstDigit + 5;
    }

    var l = lowerNames.split("l").length - 1;
    var o = lowerNames.split("o").length - 1;
    var v = lowerNames.split("v").length - 1;
    var e = lowerNames.split("e").length - 1;
    var secondDigit = l + o + v + e

    var lovePercentage = firstDigit + '' + secondDigit;

    res.render("home.ejs", {percentage:  lovePercentage});
});

app.listen(3000);

home.ejs

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Love Calculator</title>
</head>
<body>
    <form action="/" method="post">
        <input type="text" name="username" 
               placeholder="Your Name">
        <input type="text" name="partnername" 
               placeholder="Your Partner Name">
        <button type="submit">Calculator</button>
    </form>
  
    
<p>Love Percentage: <%= percentage %></p>

</body>
</html>