More than 3 years have passed since last update.

To Do リスト【JavaScript】

Last updated at 2020-09-14Posted at 2020-08-25

#今回実現したのはコチラ
実装デモ

#【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>

#【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;
}

#【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');
    }
  });
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

To Do リスト 【JavaScript】

To Do リスト【JavaScript】