Я делаю калькулятор стоимости для фармацевтической компании. Я изо всех сил пытаюсь выяснить, какие технологии и методы я могу использовать, чтобы показать результаты калькулятора на той же странице в окне вывода, а также иметь возможность хранить входные данные клиентов. Я использую HTML, CSS, Javascript, Node.js и Express. Спасибо!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vancomycin Dose Cost Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<h1>What is the cost of a 1 g Vancomycin dose?</h1>
<div class="heading col-lg-6">
<p class="main">xellia</p>
<p>Pharmaceuticals</p>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Vancomycin cost: </label>
<div class="col-sm-2">
<input type="text" name="vancomycin" class="form-control" placeholder="$">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Diluent cost: </label>
<div class="col-sm-2">
<input type="text" name="diluent" class="form-control" placeholder="$">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Ancillary cost: </label>
<div class="col-sm-2">
<input type="text" name="ancillary" class="form-control" placeholder="$">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> % Waste: </label>
<div class="col-sm-2">
<input type="text" name="waste" class="form-control" placeholder="%">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Pharmacy Tech: </label>
<div class="col-sm-2">
<input type="text" name="tHourly" class="form-control" placeholder="Hourly Rate"> <br>
<input type="text" name="tMinutes" class=" tm form-control" placeholder="Time per dose (min)">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"> Pharmacist: </label>
<div class="col-sm-2">
<input type="text" name="pHourly" class="form-control" placeholder="Hourly Rate"> <br>
<input type="text" name="pMinutes" class=" pm form-control" placeholder="Time per dose (min)">
</div>
<button type="button" name="totalCost" class="btn btn-light">Total cost per dose</button>
</div>
</form>
</body>
</html>
//jshint esversion: 6
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(express.static("public"));
app.use(bodyParser.urlencoded({
extended: true
}));
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/index.html", function(req, res) {
let vancomycin = parseFloat(req.body.vancomycin);
let diluent = parseFloat(req.body.diluent);
let ancillary = parseFloat(req.body.ancillary);
let waste = parseFloat(req.body.waste);
let tHourly = parseFloat(req.body.tHourly);
let pHourly = parseFloat(req.body.pHourly);
let tMinutes = parseFloat(req.body.tMinutes);
let pMinutes = parseFloat(req.body.pMinutes);
let supplyCost = vancomycin + diluent + ancillary;
let laborCost = (pHourly * pMinutes / 60) + (tHourly * tMinutes / 60);
let totalCost = (supplyCost + laborCost) * (1 + waste);
res.send("Total cost per dose is " + totalCost.toFixed(2));
});
app.listen(3000, function() {
console.log("Server is running on port 3000.")
});