I'm new to js in general and trying to implement a simple ejs page using header and footer template. I followed the instruction from https://ejs.co/ but the header.ejs and footer.ejs are not successfully added into my list.ejs page
My code for list.ejs
<%- include('header'); -%>
<div class="box" id="heading">
<h1>
<%= listTitle %>
</h1>
</div>
<div class="box">
<% for(let i=0; i<newListItem.length; i++){ %>
<div class="item">
<input type="checkbox">
<p>
<%= newListItem[i] %>
</p>
</div>
<% } %>
<form class="item" action="/" method="POST">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="list" value=<%=listTitle %>>+</button>
</form>
</div>
<%- include('footer'); -%>
My header.ejs
<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>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
My footer ejs
</body>
<footer>
copy right info
</footer>
</html>
In my main app.js I already included app.set("view engine", 'ejs'). The views folder include: app.js, header.ejs, footer.ejs, list.ejs
