In this section, we will develop the client-side logic—the code that will run in the browser of the users. This includes the listing and managing of the to-do lists delivered by the Node.js part.
Before we start coding, let's have a look at the file structure. The following figure shows how our project should look:
The index.js file contains the Node.js code that we already wrote. The .css and .html directories hold the styles and the HTML markup of the page. In the .js folder, we will put the collection, model, and views of Backbone.js. Along with that, there are the framework's dependencies and the main application's app.js file. Let's start with the page.html file:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div id="menu">
<a href="#new">Add new ToDo</a>
<a href="#">Show...