To Do リスト 【JavaScript】


#今回実現したのはコチラ
<b>[実装デモ](https://okinawandream.github.io/Todo/)
:point_up::point_up::point_up:



#【HTML】 
<details><summary></summary><div>

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="0914.css">
  </head>
  <body>
    <h1 id="today"></h1>
    <section class="container">
      <h1>To do App</h1>
        <input type="text" id="task" placeholder="タスクを入力">
        <button id="add">Add</button>

      <ul id="tasks">
      </ul>

      <div id="btn" class="disabled alldone"><span class="material-icons">
        delete_forever
        </span></div>
        <section id="alldone" class="hidden">
          <p>All Done!</p>
          <a href="">Again</a>
        </section>
      </section>    
    <script src ="0914.js"></script>
  </body>
</html>
```
</div></details>

#【CSS】
<details><summary></summary><div>

```css
body {
  background: #ffcc33;
  font-size: 14px;
  font-family: sans-serif;
}

#today {
  margin: 100px 30px 0;
  font-size: 30px;
}

.container {
  width: 350px;
  margin: 30px 100px auto;
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  position: relative;
}

h1 {
  font-size: 20px;
}

input[type="text"] {
  padding: 10px;
  width: 73%;
  margin: 0 auto;
  font-size: 20px;
  background: #efefef;
  border-radius: 4px;
  color: #333333;
}

input[type="text"]::placeholder {
  color: #9caeb7;
}

#add {
  padding: 10px;
  font-size: 20px;
  margin-left: 5px;
  background: coral;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

#add:focus {
  opacity: 0.6;
  pointer-events: auto;
}

#add:hover {
  opacity: 0.6;
  pointer-events: auto;
}

span {
  user-select: none;
  vertical-align: middle;
}

.material-icons {
  font-size: 50px;
}

#tasks {
  list-style: none;
  padding: 0;
  margin-bottom: 16px;
}

#tasks > li {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}

#tasks > li:hover {
  background: #f8f8f8;
}

#tasks > li.correct {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  font-weight: bold;
}

#tasks > li.correct::before {
  content: '✔︎';
  padding-right: 15px;
}


#btn, #alldone > a {
  background: #3498db;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  color: #fff;
  box-shadow: 0 4px 0 #2880b9;
}

#btn.disabled {
  background: #ccc;
  box-shadow: 0 4px 0 #bbb;
  opacity: 0.7;
}

#btn.alldone {
  pointer-events: none;
}

#alldone {
  position: absolute;
  width: 250px;
  background: #fff;
  padding: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  top: 25px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 4px;
  text-align: center;
  transition: 0.4s;
}

#alldone.hidden {
  transform: translateY(-500px)
}

#alldone > p {
  font-size: 24px;
}

#alldone > a {
  display: block;
  text-decoration: none;
  padding: 5px 0;
  font-size: 20px;
}
 ```
</div></details>

#【JavaScript】
<details><summary></summary><div>

```javascript

'use strict';
{
 //今日の日付を取得
 let date = new Date();
 let month = date.getMonth() + 1;
 let year = date.getFullYear();
 let day = date.getDate();

 document.getElementById('today').textContent = `${year}年${month}月${day}日`;
//---------------------------------------------------------------------------------//

  const button = document.getElementById('add');
  const input = document.getElementById('task');
  const ul = document.getElementById('tasks');
  const btn = document.getElementById('btn');
  const result = document.getElementById('alldone');


  button.addEventListener('click', () => {
    if (input.value === '') {
      return;
    }
    const li = document.createElement('li');
    li.textContent = input.value;
    ul.appendChild(li);
    input.value = ''
    input.focus();
    
    li.addEventListener('click', () => {
      li.classList.toggle('correct');  //} class 付与
      btn.classList.remove('disabled', 'alldone'); //} ゴミ箱表示
    });
  });  


  //+ 課題//
  //* 全ての < li >  から、correct が外れた時、 btn に disabled を付ける。

  
  btn.addEventListener('click', () => { //}  削除機能
    const lis = document.querySelectorAll('li');
    lis.forEach(li => {
      if (li.classList.contains('correct')) {
        li.remove();
        btn.classList.add('disabled')
      }
    });
    if (ul.children.length === 0) {
      result.classList.remove('hidden');
      btn.classList.add('alldone');
    }
  });
}
```
</div></details>