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

未分類
トップデベロッパーになるために作成したいアプリ8選 - Qiita
こちらの記事は、Indrek Lasn 氏により2017年 12月に公開された『 The Secret to Being a Top Developer Is Building Things! Here’s a List of Fun Apps to Build! 』の和...
qiita.com

上のページに有る8つのアプリのうち、ToDoアプリをJavascriptだけでまずは作ってみました。3通り作りましたが、こちらはhtmlのtemplateタグを利用した方法となっています。

挙動について

ToDoアプリを作った際に気になったのが、activeのみを表示させた時にステータスを変更したときの動き、activeのみを表示させた時の削除の挙動と追加の挙動です。

こちらでは、activeのみを表示させた時にステータスを変更したときは、activeのみ表示のままステータスを変更可能。activeのみ表示のときに追加、削除してもactiveのみの表示から移動せず、そのまま削除される仕様。なんだかんだこれが一番自然かなあと思っています。

コード

ToDoApp - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net

上のリンクはjsfiddleで動くToDoアプリです。ソースコードは以下のようになっています。

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");
    var clone = document.importNode(template.content, true);
    var span = clone.querySelectorAll("span");

    span[0].textContent = title.value;

    // ボタンが押されたらリストから削除
    clone.querySelector('button').addEventListener('click', function() {
      var parent = this.parentNode;
      parent.parentNode.removeChild(parent);
      console.log(parent);
    });

    // チェックマークが入ったら取り消し線を切り替え
    clone.querySelector('input').addEventListener('change', function() {
      var done = this.nextElementSibling;

      if (done.className == 'completed') {
        // done.removeAttribute('class');
        done.setAttribute('class', 'active');
      } else {
        done.setAttribute('class', 'completed');

      }
      // console.log(done);
    });

    //ToDoを追加
    todoul.appendChild(clone);

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

  } else {
    // HTML template 要素に対応していないので
    // 表に行を追加するほかの方法を探します。
  }
});

 

コメント

タイトルとURLをコピーしました