When I run my website via Terminal (nodemon calculator.js) an external CSS file doesn't work (only HTML and JS work).
The opposite happens if I use Atom Live Cerver - both HTML and CSS files work nicely (but not JS).
The first case will run as supposed only if I incorporate all CSS rules into the HTML file.
Please, help me with this issue!
How to make it run properly using Terminal?
Thanks in advance!
const bodyParser = require("body-parser");
const fs = require("fs");
const express = require("express");
const app = express();
var result;
app.set('view engine', 'pug')
app.use(bodyParser.urlencoded({extended: true}));
app.get("/", function(request, respond) {
respond.sendFile(__dirname + "/index.html");
});
app.get("/result", function(request, respond) {
respond.render('result', { title: 'Your BMI', message: result });
});
app.post("/", function(request, respond) {
let weight = request.body.weight;
let height = request.body.height;
let BMI;
console.log(BMI);
// let result;
if (weight > 0 && weight < 200) {
if (height > 0 && height < 2) {
BMI = Math.round(weight / (height * height) * 100) / 100;
result = "The result of calculating BMI is " + BMI;
} else {
result = "Invalid height./nPlease type in a value between 0.5 and 3.00 metres";
}
} else {
result = "Invalid weight./nPlease type in a value between 1.0 and 700 kilos";
}
// let resultFile = '<body style="background-color: #54BAB9; color: #E9DAC1; font-family: "Dancing Script", cursive;"><h1>' + result + '</h1></body>';
// respond.send(resultFile);
respond.redirect("/result");
});
app.listen(3000, function() {
console.log("App is running on the port 3000.");
});
#result {
background-color: #54BAB9;
color: #E9DAC1;
font-family: 'Dancing Script', cursive;
margin: 50%;
}
.container {
background-color: #54BAB9;
color: #E9DAC1;
font-family: 'Dancing Script', cursive;
display: grid;
gap: 10px;
}
.child {
display: flex;
align-items: center;
justify-content: center;
}
.input {
margin: 2%;
height: 70%;
width: 12%;
background-color: #188E90;
color: #E9DAC1;
border: 0;
border-radius: 80px;
font-size: 2rem;
text-align: center;
}
.title {
font-size: 9rem;
grid-column: 1;
grid-row: 1;
margin-bottom: 5%;
margin-top: 15%;
}
::placeholder {
color: #E9DAC1;
}
form {
grid-column: 1;
grid-row: 2;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="stylesheet.css">
<title>BMI Calculator</title>
</head>
<body class="container">
<h1 id="title" class="child title">BMI Calculator</h1>
<form class="child" action="/" method="post">
<input class="input" type="text" name="weight" placeholder="Weight, kg" required>
<input class="input" type="text" name="height" placeholder="Height, m" required>
<button class="input" type="submit" name="submit">Calculate BMI</button>
</form>
<div id="test">
</div>
<script type="text/javascript">
let url="http://localhost:3000/";
fetch(url).then(response => response.json())
.then( (result) => {
console.log('success:', result)
let div=document.getElementById('test');
div.innerHTML=`${result.message}`;
})
.catch(error => console.log('error:', error));
</script>
</body>
</html>
Here is the template:
html
head
title=title
link(rel="preconnect", href="https://fonts.googleapis.com")
link(rel="preconnect", href="https://fonts.gstatic.com", crossorigin)
link(href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap", rel="stylesheet")
link(rel="stylesheet", href="stylesheet.css")
body
h1#result=message
