Currently, I am working on a BMI calculator application in JavaScript as part of my practice. The app is supposed to take two inputs - weight and height, calculate the BMI, and display the result on the web page. However, after inputting the data and submitting, the calculated BMI does not show up on the webpage. In the DevTools network tab, I noticed that the request method shows as 'GET'. I have included the relevant code snippets below for reference. Any assistance would be greatly appreciated!
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: true})); // used for handling data from HTML forms
// Home route for the calculator
app.get("/", (req, res)=>{
res.sendFile(__dirname+"/index.html"); // Send index.html as a response using res.sendFile method
})
// Processing POST request for the 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 the BMI calculator
app.get("/bmicalculator", function(req, res){
res.sendFile(__dirname+"/BMIcalculator.html");
})
// Processing POST request and returning the 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>