I'm trying to run a jQuery code to change the h1 color based on whether it's a weekday or a weekend The error I keep getting is 'ReferenceError: $ is not defined', can someone please help me? app.js is located in parentfolder/app.js while lists.ejs is located in parentfolder/views/lists.ejs . document.queryselector is not working either
app.js
const express = require("express");
const bodyPareser = require("body-parser");
const app = express();
app.use(bodyPareser.urlencoded({extended : true}));
app.set("view engine", "ejs");
app.get("/", function(req, res) {
var date = new Date();
var currentDay = date.getDay();
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
if (currentDay === 0 || currentDay === 6) {
$(h1).style.color = "red";
} else {
$(h1).style.color = "blue";
}
res.render("lists", {today : days[currentDay]});
res.sendFile(__dirname + "/views/lists.ejs");
});
app.listen("3000", function() {
console.log("Server started in 3000");
});
lists.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">
<title>Document</title>
</head>
<body>
<h1>Today is <%= today %></h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
when you are using Node you are running server-side( to use a library you need to require it ), also you cannot use client side selectors because they don't exist
inside app.js
app.get("/", function(req, res, next) {
const date = new Date();
const currentDay = date.getDay();
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day_color
if (currentDay === 0 || currentDay === 6) {
day_color = "red";
} else {
day_color = "blue";
}
res.render("lists", {today : days[currentDay],color:day_color},
(err,html) => {
if(err){
console.log(err)
return next(err)
}
res.send(html)
})
});
inside list.ejs
<h1 <%= `style=color:${color}`%> >Today is <%= today %></h1>