ToDoリストを作りたいと思います。

ちゃんと作るにはToDoデータベースが必要で、MongoDBがオススメらしいです。
今回はデータベースを使わずにやります。

必要な機能は以下の通りです。

• タスク一覧表示
• タスク追加
• タスク削除
• （余裕があれば）実行済みのチェックマークOR取消線

リストを表示する仕組みを作る

まず、HelloWorldページを複製してリストを表示するページを作ります。

// app.js 
// TODOリストページを追加します
const todoRouter = require('./routes/todo')
app.use('/todo', todoRouter);

// todo.html
  <ul>
    <%  for (var i = 0; i < listItems.length; i++){ %>
    <li><%= listItems[i] %></li>
    <% } %>
  </ul>

// todo.js
const items= ["purchase food", "cook food", "eat food "];
let workItems =[];

// define the home page route
router.get('/', function (req, res, next) {
  const data = {
    title: 'TODOリスト',
    content: 'TODOを入力してください',
    listItems: items
  }
  res.render('todo', data);
})

送信ボタンを押したらTODOリストに追加

続いて、フォームにテキストを入力して「送信」ボタンを押した時にTODOリストに追加されるようにします。

// todo.html
  <form action="todo" method="post">
    <input type="text" name="todo" value="">
    <input type="submit" name="送信">
  </form>

// todo.js

router.post('/', (req, res, next) => {
  const todo = req.body['todo'];
  items.push(todo)
  const data = {
    title: 'TODOリスト',
    content: todo + 'を追加しました。',
    listItems: items
  }
  res.render('todo', data);
})

フォームにTODOを入力して「送信」ボタンを押すとリストに追加されるようになりました。
get()とpost()を使い分けることがポイントですね。

ちなみに、データベースを使っていないのでサーバを落とすとフォームで追加した分は消えてしまいます。

参考にしたページ