本地简易测BMI的JS

 1 /***
 * A simple Node JS Server To Calculate BMI 
 * Take height and weight as operand
 * Example:
 * http://localhost:8000/calculateBMI
 * The server responds with
 * Hi Sunny. You are 25. years old. Your calculated BMI is: 20.959183673469386. You are normal. 
 * To run simply node ./app.js
 * */
let http = require('http');
var fs = require('fs');
let urlParse = require('url');
const {
    parse
} = require('querystring');
/**
 * 
1. http: To create a http based server/client. 
2. fs: FileSystem module to help us with file/folders related operations
3. url: Uniform Resource Locator module to help us with URL related operations
 */
http.createServer(function (request, response) {
    let filePath = './index.html';
    const {
        method,
        url
    } = request; // get the URL and method from the request
    // const {url} = request;  <==> const url=request.url;
    //const {method}=request <==> const method=request.method;
    console.log(url, method); // print them out
    let q = urlParse.parse(url, true).query; // parse the query part of the URL
    let pathName = urlParse.parse(url, true).pathname; 
    if (pathName === '/') // if homepage: http://localhost:8000
    {
        fs.readFile(filePath, function (error, content) { // send the home page back to the user
            // use the fs package to read the file index.html from the local drive
            response.writeHead(200, {
                'Content-Type': 'text/html'
            });
            response.end(content, 'utf-8');
        });
    } else if (pathName === '/calculateBMI') {
        console.log('We got post');
        
        if (request.method === 'POST') {
            let body = '';
            request.on('data', chunk => {
                body += chunk.toString();
            });
            request.on('end', () => {
                let items = parse(body); // convert the data into an object. i.e. {height=178,weight=60}
                let calculatedBMI = 0;
               /****  
                * Metric BMI Formulae: - BMI= (weight in Kilograms/ (height in meters*height in meters))
                * Less than 18.5 is represents underweight
                * mid 18.5 -24.9 indicate normal weight
                * Between 25 -29.9 denotes over weigh
                * Beyond 30 signifies obesity
                * */
               /**
                * Using Math.round(num * 100) / 100 function to show BMI value upto 2 decimal.
               */

                calculatedBMI = Math.round((items.weight * 10000 / (items.height * items.height)) * 100)/100
                if(calculatedBMI < 18.5){
                    response.write('Hi ' + items.name +'. You are '+ items.age +'. years old. Your calculated BMI is: '+ calculatedBMI + '. You are underweight.');
                    console.log('Your result is: ' + calculatedBMI);
                }
                else if(calculatedBMI >=18.5 || calculatedBMI <= 24.9){
                    response.write('Hi ' + items.name +'. You are '+ items.age +'. years old. Your calculated BMI is: '+ calculatedBMI + '. You are normal.');
                    console.log('Your result is: ' + calculatedBMI);
                }
                else if(calculatedBMI >= 25 || calculatedBMI <= 29.9){
                    response.write('Hi ' + items.name +'. You are '+ items.age +'. years old. Your calculated BMI is: '+ calculatedBMI + '. You are over weight.');
                    console.log('Your result is: ' + calculatedBMI);
                }
                else if(calculatedBMI >= 30){
                    response.write('Hi ' + items.name +'. You are '+ items.age +'. years old. Your calculated BMI is: '+ calculatedBMI + '. You weigh much more which signifies.');
                    console.log('Your result is: ' + calculatedBMI);
                }
                response.end();
            });
        }
    } else {
        console.log('We got Error');
        response.writeHead(404); 
        response.write('Request not Found');
        response.end();
    }
}).listen(8000); // Setting to default port 8000

Then create an HTML file with a form.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap JS CDN  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Internal CSS -->
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text],input[type=number]{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
#bmi{
  width: 50%;
  padding: 12px;
  /* padding: 12px;
  margin-top: 6px;
  margin-bottom: 16px; */
  resize: vertical;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>
<br>
<h3 style="text-align: center">BMI Calculator Form</h3>
<!-- A Basic General Information Form -->
<div class="container">
        <form action="/calculateBMI" method="post">
                <div class="form-group">
                  <label for="name">Name:</label>
                  <input type="text" class="form-control" name="name" id="name" aria-describedby="name" placeholder="Enter name">
                </div>
                <div class="form-group">
                  <label for="age">Age:</label>
                  <input type="number" class="form-control" name="age" id="age" placeholder="Enter age">
                </div>
                <div class="row">
                    <div class="form-group col">
                        <label for="height">Height [in cm]:</label>
                        <input type="number" class="form-control" id="height" name="height" placeholder="Your height in cm.."> 
                    </div>
                    <div class="form-group col">
                        <label for="weight">Weight [in kg]:</label>
                        <input type="number" class="form-control" id="weight" name="weight" placeholder="Your weight in kg..">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
              </form>
</div>
</body>
</html>

The eventual outcome has been shown in below screenshot