Upon initially loading the page, I was successful in getting the CSS to load. However, when I submit data using POST with a button, the post functionality works fine but the CSS fails to load. As a result, the screen appears plain with only the post information visible. Here is some relevant code snippets below:
app.use(express.static(__dirname + "/public"));
app.get('/', (req,res)=>{
res.sendFile(__dirname + "/index.html")
})
The HTML form:
<form action="/" method="post">
<input type="text" name="n1" placeholder="First Number">
<input type="text" name="n2" placeholder="Second Number">
<button type="submit" name="submit">Calculate</button>
</form>
The POST request:
app.post("/",function(req,res){
var num1 = Number(req.body.n1);
var num2 = Number(req.body.n2);
var result = num1 + num2;
res.send("The result is " + result);
})
Although the page loads with the background color just fine initially, the issue arises when clicking the calculate button where the CSS stops loading. I'm seeking advice on what additional steps may be required to ensure that the CSS displays properly across all pages.