I am currently working on a project to create a dynamic To-Do-List using Express and EJS. My goal is to implement a feature in the To-Do-List where checking a checkbox will cause the corresponding content to be striked-through.
Initially, my approach involved using body-parser to retrieve the checkbox value, store it in a variable, and then pass it to my index.ejs file. However, when I attempted to use the variable in the EJS file, it did not yield the desired outcome. Upon further investigation, I found that the displayed value was "undefined".
import express from "express";
import bodyParser from "body-parser";
const app = express();
const port = 3000;
const Item = [];
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
app.get('/',(req,res)=>{
res.render("index.ejs",{Item})
})
app.post('/submit',(req,res)=>{
const {Item: newData} = req.body;
const checked = req.body["check"];
Item.push(newData)
res.render("index.ejs",{Item,checked})
console.log(checked)
})
app.listen(port,()=>{
console.log("Server is running on port",port);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>ToDoList</title>
</head>
<body>
<div class="container">
<form action="/submit" method="POST">
<input
type="text"
placeholder="New Item"
name="Item"
class="input-area"
required
/>
<input type="submit" class="btn" value="Add" />
</form>
</div>
<% Item.forEach(item => { %>
<div class="container-2">
<input type="checkbox" class="checkBox" name="check" required />
<%= item %>
</div>
<% }) %>
</body>
</html>