I'm currently working on a notes app to enhance my skills in routing using express.
There are two endpoints: "/notes" and "/notes/add".
- The "/notes" endpoint displays a page with a list of all the notes created so far.
- The "/notes/add" endpoint should display a page where users can create a new note.
The issue I'm facing is related to styling. I have a css stylesheet in a views directory that contains some basic styles. My goal is for these styles to apply to both pages generated by the above endpoints.
However, the styling only works on the "/notes" endpoint. For the "/notes/add" endpoint, the styling is not applied, and I'm encountering an error in the browser console (refer to the attached image)...
https://i.sstatic.net/r6E7v.png
Note that in my index.js file, I have already specified that all static files should first reference the "public" directory.
If there are any experienced Express users who can provide assistance, I would greatly appreciate it. Thank you in advance.
/index.js:
const express = require('express');
const app = express();
const path = require('path');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.get('/notes/', (req, res) => {
res.render('notes');
})
app.get('/notes/add/', (req, res) => {
res.render('add');
})
app.listen(3000, () => {
console.log("LISTENING ON PORT 3000!");
})
/views/notes.ejs:
<!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="style.css"/>
<title>Document</title>
</head>
<body>
<main>
<h1>All Notes</h1>
<ul>
<li class="list">Wish List</li>
<li class="list">Homework for Friday</li>
<li class="list">Workout Plan</li>
<li class="list">Cooking Recipe</li>
<li class="list">Monthly Budget Plan</li>
</ul>
<a href="/notes/add">Add +</a>
</main>
</body>
</html>
/views/add.ejs:
<!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="style.css" type="text/css"/>
<title>Document</title>
</head>
<body>
<main>
<form action="" method="post">
<textarea></textarea>
</form>
</main>
</body>
</html>
/public/style.css:
main {
display: flex;
flex-direction: column;
align-items: center;
background-color: red;
}
.list {
font-size: 1.3rem;
}