Todo List

A To-do List web application integrated with a database, to keep track of all your tasks.

This web application presents a simple interface to manage your daily tasks. Any user can add a list of their tasks, and cross them or delete them once finished. The page is rendered dynamically to show all the to-dos that have been saved by a user.

Tech Stack

• MongoDB
• Node.js
• Express
• jQuery

The database is maintained through MongoDB. It needs to be individually connected for each user to maintain privacy. Node.js is used for the backend to maintain the routing and the database. The backend is implemented using the Express framework for Node.js.

Implementation

The input text invokes the post rout on the router, which then creates a new to-do and adds it to the database.

app.post("/", function(req, res) {
	Todo.create(req.body.Todo, function(err, todo) {
		if(err) {
			console.log(err);
		} else {
			res.redirect("/");
		}
	})
});

A trash can icon appears on hovering over any of the to-dos. Clicking it fires off the delete route which deletes that particular to-do.

app.delete("/:id", function(req, res) {
	Todo.findByIdAndRemove(req.params.id, function(err) {
		if(err) {
			console.log(err);
		} else {
			res.redirect("/");
		}
	})
});

There is another option to cross any finished to-do by clicking on the to-do. This is implemented in the front-end using javascript.

Demo