The styles are not rendering correctly on the specified route: 'http://localhost:5000/exams/add-new'
However, they are working fine on the following routes:
- 'http://localhost:5000'
- 'http://localhost:5000/exams'
- 'http://localhost:5000/about'
The CSS file is located in the assets folder:
assets/css/styles.css
This is the server.js configuration:
const express = require('express')
const path = require('path')
const app = express()
app.set('view engine', 'ejs')
app.use('/css', express.static(path.resolve(__dirname, 'assets/css')))
app.use('/', require('./server/routes/router'))
app.listen(5000)
Here is the code snippet from index.ejs in the views folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<title>Home Page</title>
</head>
<body>
<header>
<div>
<nav>
<h1 class="logo">
<a href="/">B<span>log</span></a>
</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/exams">Exams</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Home Page</h1>
</main>
</body>
</html>
And here is the code for the exams page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<title>Home Page</title>
</head>
<body>
<header>
<div>
<nav>
<h1 class="logo">
<a href="/">B<span>log</span></a>
</h1>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/exams">Exams</a></li>
<li><a href="/">About</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="addNewQuestionsButton">
<a href="/exams/add-new-questions">
<span>Add new questions</span>
</a>
</div>
</main>
</body>
</html>
Please help me understand why this issue is occurring and what steps can be taken to resolve it.