Как создать калькулятор любви с помощью Node.js?

В этой статье мы собираемся создать калькулятор любви. Калькулятор любви используется для расчета процента любви между партнерами.

Функциональность:

• Возьмите имя пользователя
• Возьмите имя партнера пользователя
• Показать процент любви

Подход: мы собираемся использовать Body Parser, с помощью которого мы можем фиксировать входные данные пользователя из формы, такие как имя пользователя и имя партнера пользователя. Затем мы рассчитаем процент от них и отправим данные пациентов на веб-страницу, используя ЭЖС. EJS — это промежуточное ПО, упрощающее отправку данных из файла вашего сервера (app.js или server.js) на веб-страницу.

Реализация: Ниже приведена пошаговая реализация описанного выше подхода.

Шаг 1: Настройка проекта

Инициализирует NPM: создайте и найдите папку проекта в терминале и введите команду

npm init -y

Он инициализирует наше приложение узла и создает файл package.json.

Установите зависимости: найдите корневой каталог проекта в терминале и введите команду

npm install express ejs

Чтобы установить Express и Ejs в качестве зависимостей внутри вашего проекта

Создайте файл сервера: создайте файл «app.js» , внутри этого файла укажите модуль Express и создайте постоянное «приложение» для создания экземпляра модуля Express, затем установите EJS в качестве механизма просмотра по умолчанию.

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

Переупорядочите свои каталоги : необходимо использовать «.ejs» в качестве расширения для файла HTML вместо «.html» для использования EJS внутри него. Затем вам нужно переместить каждый файл «.ejs» в каталоге представлений внутри вашего корневого каталога. EJS по умолчанию ищет файлы '.ejs' внутри папки представлений.

Используйте переменную EJS: создайте «home.ejs», внутри «home.ejs» вы должны использовать переменные EJS для получения значений из файла вашего сервера. Вы можете объявлять переменные в EJS, например

<%= variableName %>

Отправка данных в переменную: внутри файла вашего сервера ( app.js или index.js ) вы можете отправить файл EJS вместе с некоторыми данными, используя метод рендеринга.

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

Извлечение данных из формы в app.js: чтобы получить входные значения формы, мы должны использовать пакет узлов с именем body-parser.

Установить парсер тела:

npm install body-parser

Требуется модуль body-parser:

const bodyParser = require("body-parser")

А потом:

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

Затем мы можем обрабатывать данные формы, используя объект запроса.

Шаг 2: Создайте функциональные возможности:

Возьмите имя пользователя и имя партнера пользователя: для этого мы должны создать форму внутри файла «home.ejs» и обработать данные формы в нашем файле «app.js» с помощью 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>

Обработка данных формы внутри app.js: мы должны получить значения из формы, используя req.body.valueName, а затем выполнить операцию, показанную ниже, чтобы вычислить значение в процентах.

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;
});

Отправить значение на страницу «home.ejs»: Как и в предыдущем шаге, мы отправляем строку «Hello Geeks!» на домашнюю страницу, теперь давайте отправим процентное значение в переменную 'lovePercentage' .

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

Получение значения lovePercentage: чтобы получить значение, отправленное из «app.js», мы должны использовать переменную ejs внутри « home.ejs» .

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

Ниже приведен полный код для создания калькулятора любви с использованием Node.js:

app.js

home.ejs

Шаги для запуска приложения: Внутри терминала введите команду для запуска вашего скрипта.

node app.js

Выход: