ToDoApp

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-title" class="todo-input" type="text" name="" value="">
        <input id="button" type="button" name="button" value="追加">

        <ul id="todo-list">
        </ul>

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

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

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



        <template id="productrow">
          <li>
            <input type="checkbox" name="" value="">
            <span class="active"></span>
            <button id="todo-delete" type="button" name="button">削除</button>
          </li>
        </template>


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

CSS

ul {
    list-style: none;
  }

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

  .none {
    display: none;
  }

JavaScript

var template = document.querySelector('#productrow');
// console.log(template);

// console.log('aaa');

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

//ToDoすべて表示
document.getElementById("all").addEventListener('change', function() {
  var all_completed = document.getElementsByClassName("completed");
  var all_active = document.getElementsByClassName("active");
  // console.log(completed);

  [].forEach.call(all_completed, function(elem) {
    elem.parentNode.classList.remove('none');
  });

  [].forEach.call(all_active, function(elem) {
    elem.parentNode.classList.remove('none');
  });

  console.log("all");
});

//ToDoのactiveのみ表示
document.getElementById("active").addEventListener('change', function() {
  var completed = document.getElementsByClassName("completed");
  var active = document.getElementsByClassName("active");
  // console.log(active);

  [].forEach.call(completed, function(elem) {
    elem.parentNode.classList.add('none');
  });

  [].forEach.call(active, function(elem) {
    elem.parentNode.classList.remove('none');
  });

  // console.log("active");
});


//ToDoのcompletedのみ表示
document.getElementById("completed").addEventListener('change', function() {
  var completed = document.getElementsByClassName("completed");
  var active = document.getElementsByClassName("active");
  console.log(completed);

  [].forEach.call(completed, function(elem) {
    elem.parentNode.classList.remove('none');
  });

  [].forEach.call(active, function(elem) {
    elem.parentNode.classList.add('none');
  });

  // console.log("completed");
});




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

  // templete 要素の content 属性の有無を確認することで、
  // ブラウザーが HTML template 要素に対応しているかテストします。
  if ('content' in document.createElement('template')) {

    var todoul = document.querySelector("#todo-list");
  ...