I am working on a To-do app following my instructor. My instructor's code was working while mine foe loop isn't working. Though almost all code is except variable names.
App.js file
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
var items = ["test", "test", "test"];
app.get("/", function (req, res) {
var today = new Date();
var options = { weekday: "long", day: "numeric", month: "long" };
var currentDay = today.toLocaleDateString("en-US", options);
console.log(items)
res.render("list", { kindofDay: currentDay, newListItem: items });
});
app.post("/", function (req, res) {
var item = req.body.newItem;
items.push(item)
res.redirect("/")
})
app.listen(3000, function () {
console.log("Server started on port 3000");
});
List.ejs file
<!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>To Do List</title>
</head>
<body>
<h1><%= kindofDay %></h1>
<ul>
<% for (var i = 0; i < newListItem.lenght; i++){ %>
<li><%= newListItem[i] %></li>
<% } %>
</ul>
<form action="/" method="post">
<label for="listItem">New Item: </label>
<input type="text" name="newItem" id="listItem" />
<button type="submit" name="button">Add</button>
</form>
</body>
</html>
//TYPING mistake in 'length' property name
<!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>To Do List</title>
</head>
<body>
<h1><%= kindofDay %></h1>
<ul>
<% for (var i = 0; i < newListItem.length; i++){ %>
<li><%= newListItem[i] %></li>
<% } %>
</ul>
<form action="/" method="post">
<label for="listItem">New Item: </label>
<input type="text" name="newItem" id="listItem" />
<button type="submit" name="button">Add</button>
</form>
</body>
</html>