TODOリストまねて少し改造（ZENNさんの！）

2022年9月26日 14:40

下記のサイトが大変参考になりました。JSの復習と学習において。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
  <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <main>
        <div id="input">
          <label>やることTODO: <input id="todo"></label><br>
          優先度: <select>
            <option>低</option>
            <option selected>普</option>
            <option>高</option>
          </select>
          <label>期日: <input id="datedate" type="date"></label><br>
          <label>備考: <input style="width:500px" type="text"></label><br>
          <button id="submit">登録</button>
        </div>
    
        <table>
          <tr>
            <th id="todoLabel">やることTODO</th>
            <th>優先度</th>
            <th id="dateLabel">期日</th>
            <th id="textLabel">備考</th>
            <th>完了</th>
            
            
          </tr>
        </table>
      </main>
      <!--<script src="script.js"></script>-->

    <script>

        'use strict';

        const storage = localStorage;

        const table = document.querySelector('table');
        const todo = document.getElementById('todo');
        const priority = document.querySelector('select');
        const deadline = document.querySelector('input[type="date"]');
        const text = document.querySelector('input[type="text"]');
        const submit = document.getElementById('submit');

        let list = [];

        document.addEventListener('DOMContentLoaded', () => {
            const json = storage.todoList;
            if (json == undefined) {
                return;
            }
            list = JSON.parse(json);
            for (const item of list) {
                addItem(item);
            }
        });

        const addItem = (item) => {
            const tr = document.createElement('tr');

            for (const prop in item) {
                const td = document.createElement('td');
                if (prop == 'done') {
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.checked = item[prop];
                    td.appendChild(checkbox);
                    checkbox.addEventListener('change', checkBoxListener);
                } else {
                    td.textContent = item[prop];
                }
                tr.appendChild(td);
            }

            table.append(tr);
        };

        const checkBoxListener = (ev) => {
            const trList = Array.from(document.getElementsByTagName('tr'));
            const currentTr = ev.currentTarget.parentElement.parentElement;
            const idx = trList.indexOf(currentTr) - 1;
            list[idx].done = ev.currentTarget.checked;
            storage.todoList = JSON.stringify(list);
        };

        submit.addEventListener('click', () => {
            const item = {};

            if (todo.value != '') {
                item.todo = todo.value;
            } else {
                item.todo = '何かかいてー(^^)/';
            }
            item.priority = priority.value;
            if (deadline.value != '') {
                item.deadline = deadline.value;
            } else {
                const date = new Date();
                item.deadline = date.toLocaleDateString().replace(/\//g, '-');
            }

            item.text = text.value;
            item.done = false;

            // フォームをリセット

            todo.value = '';
            priority.value = '普';
            deadline.value = '';
            text.value = '';

            addItem(item);

            list.push(item);
            storage.todoList = JSON.stringify(list);
        });

        const filterButton = document.createElement('button');
        filterButton.textContent = '優先度（高）で絞り込み';
        filterButton.id = 'priority';
        const main = document.querySelector('main');
        main.appendChild(filterButton);

        filterButton.addEventListener('click', () => {
            clearTable();
            for (const item of list) {
                if (item.priority == '高') {
                    addItem(item);
                }
            }
        });

        const clearTable = () => {
            const trList = Array.from(document.getElementsByTagName('tr'));
            trList.shift();
            for (const tr of trList) {
                tr.remove();
            }
        };

        const remove = document.createElement('button');
        remove.textContent = '完了したTODOを削除する';
        remove.id = 'remove';
        const br = document.createElement('br');
        main.appendChild(br);
        main.appendChild(remove);

        remove.addEventListener('click', () => {
            clearTable();
            list = list.filter((item) => item.done == false);
            for (const item of list) {
                addItem(item);
            }
            storage.todoList = JSON.stringify(list);
        });

    </script>
</body>

</html>

:root { font-size: 16px; }
main {
  width: 1500px;
  margin: 0 auto;
  padding: 30px 30px 50px;
  box-shadow: 0 0 10px 0 rgb(8, 119, 45);
}
input, select { margin: 0.5rem 1rem 0.5rem 0;  }
input[type='number'] { width: 30px; }
button#submit, button#priority, button#remove {
  padding: 5px 10px;
  margin-top: 1rem;
  background-color: rgb(65, 225, 134);
  color: white;
  border-style: none;
}
button#priority { background-color: olivedrab; }
button#remove { background-color: rgb(34, 178, 101); }
table {
  margin-top: 2rem;
  border: solid 2px rgba(211, 211, 211, 0.979);
  border-collapse: collapse;
}
th, td {
  border: solid 1px lightgray;
  border-collapse: collapse;
}
th {
  background-color: beige;
  padding: 0 0.5rem 0;
}
th#todoLabel { width: 300px; }
th#dateLabel { width: 100px; }
th#textLabel { width: 500px; }

td { text-align: center; }
td input[type='checkbox'] { margin: 0; }

この記事が気に入ったらサポートをしてみませんか？