yuri memo

コーディングとかのメモ帳

JavaScriptでToDoアプリを作る (1)

f:id:yurixxx8:20170607232026j:plain
最近Todoアプリを作るのにはまって(?)ます。
写経するなら絶対ToDoって感じで。実用的だもん。
だいぶ前にVue.jsで書いたり最近はReact.jsで書いたりもしたのですが、いずれにしてもよくわからないので
もうとりあえず素のJSで書こうよって思い、完成するまで書き続けるメモです。
今だったらVue.jsちょっと分かるかもしれないとか思ったけどひとまず置いとこ。

実装したい機能(今のところ)

・登録した日時を表示
・終わったToDoにチェックできる
・削除ボタン

今回やったこと

・追加されたtodoの値を取得してtodoItemとする
todoItemを配列todoItemsに追加していく
・追加されたtodoをli要素として#todoListに表示させる

とりあえず、思いつく範囲で単純なのを書きましたが後から絶対変わりますね・・。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>todo list</h1>
  <div>
    <input type="text" id="item">
    <button type="button" onClick="submitItem();">Add</button>
  </div>
  <ul id="todoList"></ul>
  <script src="js/todo.js"></script>
</body>
</html>
function submitItem() {
  var todoItems = [];
  var todoItem = document.getElementById('item').value;
  todoItems.push(todoItem);
  for (var i =0; i < todoItems.length; i++) {
    var li = document.createElement('li');
    li.textContent = todoItems[i]
    document.getElementById('todoList').appendChild(li);
  }
}

所感 & 次回

document.getElementById('item').value;
値を取得するパターンがいくつかあって少し迷いました。
nameを使って取得するパターンもありましたが、とりあえずidを使うことに。
今はinputの中身が空でもなんでも通っちゃうので次回対応したいですね。