ToDoリスト
プログラムにとっても計画性が一番大事です。なのでToDoリストを作りました。順を追って作り方を説明しましょう。
全体のプログラム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ToDo リスト</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#task-form {
margin-bottom: 20px;
}
#task-list {
list-style: none;
padding: 0;
}
#task-list li {
padding: 10px;
border-bottom: 1px solid #ddd;
display: flex;
justify-content: space-between;
align-items: center;
animation: slideIn 0.5s ease-in-out;
}
@keyframes slideIn {
from { transform: translateX(-100px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
#task-list li:last-child {
border-bottom: none;
}
.delete-button {
background-color: #ff6b6b;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.delete-button:hover {
background-color: #ff5252;
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.description {
font-size: 0.9em;
color: #777;
margin-top: 5px;
transition: color 0.3s ease;
}
#task-list li:hover .description {
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>ToDo リスト</h1>
<form id="task-form">
<input type="text" id="task-input" placeholder="タスクを入力" required>
<input type="text" id="description-input" placeholder="説明を入力" required>
<button type="submit">追加</button>
</form>
<ul id="task-list"></ul>
</div>
<script>
document.getElementById('task-form').addEventListener('submit', function(event) {
event.preventDefault();
var taskInput = document.getElementById('task-input');
var descriptionInput = document.getElementById('description-input');
var newTask = taskInput.value.trim();
var description = descriptionInput.value.trim();
if (newTask) {
var listItem = document.createElement('li');
listItem.textContent = newTask;
var descElem = document.createElement('div');
descElem.textContent = description;
descElem.className = 'description';
var deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
deleteButton.className = 'delete-button';
deleteButton.onclick = function() {
if(confirm('このタスクを削除してもよろしいですか？')) {
listItem.remove();
}
};
listItem.appendChild(descElem); listItem.appendChild(deleteButton);
document.getElementById('task-list').appendChild(listItem);
taskInput.value = '';
descriptionInput.value = '';
}
saveTasks();
});
function saveTasks() {
var tasks = [];
document.querySelectorAll('#task-list li').forEach(function(taskItem) {
var task = taskItem.firstChild.textContent;
var description = taskItem.querySelector('.description').textContent;
tasks.push({ task: task, description: description });
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// ローカルストレージからタスクを復活させる
function loadTasks() {
var tasks = JSON.parse(localStorage.getItem('tasks'));
if (tasks) {
tasks.forEach(function(task) {
var listItem = document.createElement('li');
listItem.textContent = task.task;
var descElem = document.createElement('div');
descElem.textContent = task.description;
descElem.className = 'description';
var deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
deleteButton.className = 'delete-button';
deleteButton.onclick = function() {
if(confirm('このタスクを削除してもよろしいですか？')) {
listItem.remove();
saveTasks();
}
};
listItem.appendChild(descElem);
listItem.appendChild(deleteButton);
document.getElementById('task-list').appendChild(listItem);
});
}
}
window.onload = loadTasks;
</script>
</body>
</html>
上のにあるcssはおわかりの通りレイアウトを考えています。
jsは、Todoリストの主なシステムを設定しおります。
ローカルストレージに保存する方法
- まずローカルストレージに保存する見ていきましょう。
function saveTasks() {
var tasks = [];
document.querySelectorAll('#task-list li').forEach(function(taskItem) {
var task = taskItem.firstChild.textContent;
var description = taskItem.querySelector('.description').textContent;
tasks.push({ task: task, description: description });
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
- 説明することはないので、自分で解読してください。（ここに書くと長くなる。）
ローカルストレージからデータを呼び起こす。
function loadTasks() {
var tasks = JSON.parse(localStorage.getItem('tasks'));
if (tasks) {
tasks.forEach(function(task) {
var listItem = document.createElement('li');
listItem.textContent = task.task;
var descElem = document.createElement('div');
descElem.textContent = task.description;
descElem.className = 'description';
var deleteButton = document.createElement('button');
deleteButton.textContent = '削除';
deleteButton.className = 'delete-button';
deleteButton.onclick = function() {
if(confirm('このタスクを削除してもよろしいですか？')) {
listItem.remove();
saveTasks(); // タスクを削除した後にローカルストレージを更新するプログラムです。
}
};
listItem.appendChild(descElem);
listItem.appendChild(deleteButton);
document.getElementById('task-list').appendChild(listItem);
});
}
}
上のプログラムはデータ呼び押しプログラムです。
その中の呼び起こしたデータを消すためのプログラムはその下です。
if(confirm('このタスクを削除してもよろしいですか？')) {
listItem.remove();
saveTasks();
で消した内容を保存するプログラムです。
読み込んだデータをTodoリストに反映させる。
window.onload = loadTasks;
はい以上です。（説明することないので）
最後に
HTMLでデータを保存したいときにこのプログラムを使うといいでしょう。
以上です。