En este artículo, vamos a crear una calculadora de amor. Se utiliza una calculadora de amor para calcular el porcentaje de amor entre los socios.
Funcionalidad:
- Tomar el nombre del usuario
- Tomar el nombre del socio del usuario
- Mostrar el porcentaje de amor
Enfoque: Vamos a utilizar Body Parser mediante el cual podemos capturar los valores de entrada del usuario del formulario, como el nombre del usuario y el nombre de la pareja del usuario. Luego, calcularemos el porcentaje de ellos y enviaremos los datos de los pacientes a la página web usando EJS. EJS es un middleware que facilita el envío de datos desde su archivo de servidor (app.js o server.js) a una página web.
Implementación: A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: Configuración del proyecto
Inicializa NPM: cree y ubique la carpeta de su proyecto en la terminal y escriba el comando
npm init -y
Inicializa nuestra aplicación de Node y crea un archivo package.json.
Instale dependencias: ubique el directorio de su proyecto raíz en la terminal y escriba el comando
npm install express ejs
Para instalar Express y Ejs como dependencias dentro de su proyecto
Crear archivo de servidor: cree un archivo ‘app.js’ , dentro de este archivo se requiere el módulo Express y cree una ‘aplicación’ constante para crear una instancia del módulo express, luego configure el EJS como el motor de visualización predeterminado.
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
Reorganice sus directorios: se requiere usar ‘.ejs’ como extensión para el archivo HTML en lugar de ‘.html’ para usar EJS dentro de él. Luego, debe mover todos los archivos ‘.ejs’ en el directorio de vistas dentro de su directorio raíz. EJS busca por defecto los archivos ‘.ejs’ dentro de la carpeta de vistas.
Use la variable EJS: cree un ‘home.ejs’, dentro de ‘home.ejs’ debe usar variables EJS para recibir valores de su archivo de servidor. Puede declarar variables en EJS como
<%= variableName %>
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <%= variableName %> </body> </html>
Envíe datos a una variable: dentro de su archivo de servidor ( app.js o index.js ), puede enviar un archivo EJS junto con algunos datos utilizando el método de procesamiento.
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")
})
Obtener datos del formulario a app.js: para recibir valores de entrada de un formulario, tenemos que usar un paquete de Nodes llamado body-parser.
Instale el analizador de cuerpo:
npm install body-parser
Requerir módulo analizador de cuerpo:
const bodyParser = require('body-parser')
Y entonces:
app.use( bodyParser.json() );
app.use(bodyParser.urlencoded({
extended: true
}));
Entonces podemos manejar los datos del formulario usando el objeto de solicitud.
Paso 2: Crear Funcionalidades:
Tome el nombre del usuario y el nombre del socio del usuario: para esto, debemos crear un formulario dentro del archivo ‘home.ejs’ y manejar los datos del formulario dentro de nuestro archivo ‘app.js’ usando 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>
Manejar datos de formulario dentro de ‘app.js’: tenemos que obtener valores de un formulario usando req.body.valueName y luego realizar la operación que se muestra a continuación para calcular un valor como un porcentaje.
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;
});
Enviar valor a la página ‘home.ejs’: Al igual que en el paso anterior, enviamos una string «¡Hola Geeks!» a la página de inicio, ahora enviemos el valor porcentual a una variable ‘lovePercentage’ .
res.render("home.ejs", {percentage: lovePercentage});
Recibir valor de porcentaje de amor: para recibir el valor enviado desde ‘app.js’, debemos usar la variable ejs dentro de ‘ home.ejs’ .
<p>Love Percentage: <%= percentage %></p>
A continuación se muestra el código completo para construir Love Calculator usando Node.js:
aplicación.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);
casa.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>
Pasos para ejecutar la aplicación: Dentro de la terminal, escriba el comando para ejecutar su script.
node app.js
Producción:
