i am creating a simple BMI calculator app for JavaScript practice, which takes two inputs weight and height. but after providing inputs and submitting the web page doesn't show calculated BMI. also in devtools network it shows request method get. i have attached the related code. please help!!
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: true})); // for input data coming from html form
// home route for calculator
app.get("/", (req, res)=>{
res.sendFile(__dirname+"/index.html"); //sending index.html as a response using res.sendFile method
})
//processing post request for calculator
app.post("/", (req, res)=>{
var num1 =Number(req.body.num1);
var num2 =Number(req.body.num2);
var total = num1 + num2;
res.send(`<h1>the total is ${total}</h1>`);
})
// route for get request for bmicalculator
app.get("/bmicalculator", function(req, res){
res.sendFile(__dirname+"/BMIcalculator.html");
})
// processing post request and returning calculated BMI
app.post("/bmicalculator", function(req, res){
var weight = parseFloat(req.body.weight);
var height = parseFloat(req.body.height);
var BMI = weight / Math.pow(height, 2);
console.log(BMI);
res.send(BMI);
})
app.listen(3000, ()=>{
console.log("server is listening at port 3000");
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI calculator</title>
</head>
<body style="background-color: darkkhaki;">
<h1>calculate your BMI</h1>
<form action="/bmicalculator" method="post"></form>
<input type="text" name="weight" placeholder="enter your weight">
<input type="text" name="height" placeholder="enter your height in meters">
<button type="submit" name="Submit">calculate BMI</button>
</body>
</html>Keep your INPUT tags inside FORM tag then only request went to server and you will receive response back.