ToDoApp3

by techyankee

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-title3" class="todo-input3" type="text" name="" value="">
        <button id="button3" type="button" name="button">追加</button>

        <ul id="todo-list">

        </ul>


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

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

        <div>
          <input type="radio" id="completed3" 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

var arr = [];

for (var i = 0; i < 1000; i++) {
  arr.push(i);
}

var alltodo = [];


var index = function(todos) {
  // console.log('index');
  var todoList = '';

  if (!todos) {
    return;
  }

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

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

    (function(j) {
      btnEl[j].addEventListener('click', function() {
        // console.log('削除ボタン押した番目', j);

        var element = document.getElementById("completed3");
        if (element.checked) {
          // チェックされている
          var todostatus = groupBy(alltodo, 'status');
          // console.log('削除ボタン押したID', todostatus.completed[j].id);
          alltodo = alltodo.filter(x => x.id != todostatus.completed[j].id);
          todostatus = groupBy(alltodo, 'status');
          // console.log(todostatus.completed);

          if (!todostatus.completed) {
            index([]);
          }

          index(todostatus.completed);
        }

        var element = document.getElementById("active3");
        if (element.checked) {
          // チェックされている
          var todostatus = groupBy(alltodo, 'status');
          // console.log('削除ボタン押したID', todostatus.active[j].id);
          alltodo = alltodo.filter(x => x.id != todostatus.active[j].id);
          todostatus = groupBy(alltodo, 'status');

          if (!todostatus.active) {
            index([]);
          }

          index(todostatus.active);
        }

        var element = document.getElementById("all3");
        if (element.checked) {
          // チェックされている
          alltodo =...