I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1
On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1
This is the JavaScript code I have:
const express = require("express");
var app = express();
app.use(express.static("public"));
app.set("views", "views");
app.set("view engine", "pug");
app.get('/', (req, res) => {
res.render("firstpage");
});
app.get("/cars", function(req,res){
res.render("cars");
});
app.get("/bmw/x1", function(req,res){
res.render("bmwx1");
});
app.listen(PORT, function() {
console.log("server is running);
});
In my pug file for the firstpage, I have the following structure (only part of the code):
html
head
link(rel="stylesheet", href="styles/style.css")
link(href="https://fonts.googleapis.com/css2?family=Akshar:wght@300&display=swap" rel="stylesheet")
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1")
body
nav
h3
a(href="/cars") cars
And on the /cars page, there's a button like this:
div
button(class="detailsbutton")
a(href="/bmw/x1") Details
Although everything seems to work fine, when I navigate to localhost../bmw/x1, the CSS doesn't apply properly only in that path, causing formatting issues.
I'm not certain if using app.get("/site/secondsite",...) is the correct approach or if the problem lies elsewhere.
Thank you for your help and apologies for any language errors!