When you make a new item on the todo list it makes a new row but when you make a second one instead of making a new item on the todo list it changes the previous one. How would you go around making a new item on the list?
Backend JS:
import express from "express";
import bodyParser from "body-parser";
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
app.listen(port, (req, res) => {
console.log(`website is online at ${port}.`)
});
app.get("/", (req, res) => {
res.render("index.ejs");
});
app.post("/items", (req, res) => {
let data = {
task: req.body.padText
};
res.render("index.ejs", data);
});
The EJS file where the new item will be made. Also the new items on the todo list should be inside the .pad div. Right under the place where you submit items for the todo list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BLOGGERS</title>
<link rel="stylesheet" href="/styles/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap" rel="stylesheet">
</head>
<body>
<div class="navBox">
<nav>
<p id="headerText">
BLOOGERS
</p>
</nav>
</div>
<div class="container">
<div class="pad">
<form class="rowContainer" action="/items" method="POST">
<input class="inputBox" placeholder="New post to the ol pad..." type="text" name="padText" required>
<button type="submit">+</button>
</form>
<% if (locals.task) { %>
<div class="rowContainer2">
<input class="inputBox" value="<%= task %>" type="text" required>
<button class="delButton">del</button>
</div>
<% } %>
</div>
</div>
<footer>
<p>IKM © 2024</p>
</footer>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="/index.js" charset="UTF-8"></script>
</body>
</html>
I really don’t know what I’m doing tbh but I tried a bunch of stuff like trying to use local storage and some other things which lead to nowhere. I’d like to keep the code that makes the new item on the todo list only on the ejs file and/or the backend js file. If you think you can remotely help me please put a message. Also if there’s something i messed up with the stackoverflow question tell me because this is my first time using this.
TroglodyteTerry is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.