ToDoアプリをJavascriptだけで作ったよ②

ToDoアプリをJavascriptだけで作った２つ目のパターンです。今回は配列に入力した情報をいれて、それを画面で見せるようにするというやり方。

挙動

このコードでは、activeのみを表示させた時にステータスを変更したときは、activeのみ表示のままステータスを変更可能。activeのみ表示のときに追加すると、ALLに移動してしまいます。削除した場合はactiveのみの表示から移動せず、そのまま削除される仕様。

コード

ToDo2 - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

コードは以下のようなかんじ

html

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-9">
      <h1>ToDo</h1>
      <div class="todo-app">
        <input id="todo-title2" class="todo-input2" type="text" name="" value="">
        <button id="button2" type="button" name="button">追加</button>

        <ul id="todo-list">

        </ul>


        <div>
          <input type="radio" id="all2" name="todo" value="all" checked>
          <label for="all">all</label>
        </div>

        <div>
          <input type="radio" id="active2" name="todo" value="active">
          <label for="active">active</label>
        </div>

        <div>
          <input type="radio" id="completed2" name="todo" value="completed">
          <label for="completed">completed</label>
        </div>

      </div>
    </div>
  </div>
</div>

css

ul {
  list-style: none;
}

.template-none {
  display: none;
}

.completed {
  text-decoration: line-through;
}

.none {
  display: none;
}

javascript

console.log('aaaa');

var todos = [
  // {title: 'やること1', status: 'active', display: 'on' },
  // {title: 'やること2', status: 'completed', display: 'none' },
  // {title: 'やること3', status: 'active', display: 'none' },
  // {title: 'やること4', status: 'active', display: 'on' }
];


var completed = []
var active = []

var index = function(todos) {
  // console.log('index');
  var todoList = '';
  for (var i = 0; i < todos.length; i++) {
    todoList += '<li class="' + todos[i]['display'] + '"><input class="comp2" type="checkbox" name="" value=""><span class="' + todos[i]['status'] + '">' + todos[i]['title'] + '</span><button class="delete2" type="button" name="button">削除</button></li>'; // = ではなく += を使う
  }
  document.getElementById('todo-list').innerHTML = todoList;

  // ToDoを削除する
  var btnEl = document.querySelectorAll('.delete2');
  for (var i = 0; i < btnEl.length; i++) {

    (function(j) {
      btnEl[j].addEventListener('click', function() {
        // console.log(j);
        // delete todos[j];
        todos.splice(j, 1);
        console.log(todos);
        index(todos);
      });
    })(i);
  }

  // ToDoのstatusを切り替える
  var checkEl = document.querySelectorAll('.comp2');
  for (var k = 0; k < checkEl.length; k++) {
    (function(l) {
      checkEl[l].addEventListener('change', function() {
        // console.log(l);

        if (todos[l]['status'] == 'active') {
          todos[l]['status'] = 'completed';
        } else {
          todos[l]['status'] = 'active';
        }

        index(todos);
      });
    })(k);
  }

  // index(todos);
}


//ToDoのタイトル
var title = document.getElementById('todo-title2');

//ToDoを追加する
document.getElementById("button2").addEventListener('click', function() {
  //タイトル未記入時はアラート
  if (!title.value) {
    alert("ToDoが未記入です");
    return;
  }

  todos.push({
    title: title.value,
    status: 'active'
  });

  // すべてdisplayをonに
  for (var i = 0; i < todos.length; i++) {
    if (todos[i].display == "none") {
      todos[i].display = "on";
      console.log(i);
    }
  }

  index(todos);

  //ラジオボタンをAllに
  var element = document.getElementById("all2");
  // 選択状態にする
  element.checked = true;

  // titleの値を空に
  title.value = '';
});

//ToDoの表示All
document.getElementById("all2").addEventListener('change', function() {
  for (var i = 0; i < todos.length; i++) {
    if (todos[i].display == "none") {
      todos[i].display = "on";
      console.log(i);
    }
  }
  // console.log(todos);
  index(todos);
});


//ToDoのactiveのみ表示
document.getElementById("active2").addEventListener('change', function() {
  for (var i = 0; i < todos.length; i++) {
    if (todos[i].status == "active") {
      todos[i].display = "on";
      // console.log(i);
    }

    if (todos[i].status == "completed") {
      todos[i].display = "none";
      // console.log(i);
    }
  }
  // console.log(todos);
  index(todos);

});

//ToDoのcompletedのみ表示
document.getElementById("completed2").addEventListener('change', function() {
  for (var i = 0; i < todos.length; i++) {
    if (todos[i].status == "completed") {
      todos[i].display = "on";
      // console.log(i);
    }

    if (todos[i].status == "active") {
      todos[i].display = "none";
      // console.log(i);
    }
  }
  console.log(todos);
  index(todos);

});

index(todos);