TODOリストまねて少し改造（ZENNさんの！）
下記のサイトが大変参考になりました。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; }