<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo リスト</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #333;
}
.container {
max-width: 600px;
margin: 20px auto;
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
border: none;
color: #fff;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ccc;
transition: background-color 0.3s;
cursor: pointer;
}
li:hover {
background-color: #f9f9f9;
}
.completed {
text-decoration: line-through;
color: #888;
}
.remove {
float: right;
color: #f44336;
font-weight: bold;
}
.remove:hover {
color: #d32f2f;
}
</style>
</head>
<body>
<div class="container">
<h1>Todo リスト</h1>
<input type="text" id="todoInput" placeholder="Todoを入力してください" autofocus>
<button id="addButton">追加</button>
<ul id="todoList">
</ul>
<button id="clearCompleted">完了済みを削除</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Todo追加処理
$("#addButton").click(function(){
addTodo();
});
// EnterキーでTodo追加
$("#todoInput").keypress(function(event){
if(event.which === 13) { // Enterキーのキーコードは13
addTodo();
}
});
// Todo完了処理
$(document).on("click", "li", function(){
$(this).toggleClass("completed");
});
// Todo削除処理
$(document).on("click", ".remove", function(event){
event.stopPropagation(); // 親要素へのイベント伝播を停止
$(this).parent().remove();
});
// 完了済みTodoを一括削除
$("#clearCompleted").click(function(){
$(".completed").remove();
});
// Todo追加関数
function addTodo() {
var todoItem = $("#todoInput").val().trim();
if(todoItem !== "") {
$("#todoList").append("<li>" + todoItem + "<span class='remove'>[x]</span></li>");
$("#todoInput").val(""); // 入力フィールドをクリア
$("#todoInput").focus(); // フォーカスを入力フィールドに戻す
}
}
});
</script>
</body>
</html>
main.js
'use strict';
$(document).ready(() => {
const $input = $('input');
const $list = $('ul');
const $clearCompleted = $('#clearCompleted');
const todos = JSON.parse(localStorage.getItem('todos')) || [];
// ローカルストレージからTodoアイテムを取得し、表示する
todos.forEach(todo => {
addTodoToList(todo.text, todo.completed);
});
$input.focus();
$('#addButton').click(() => {
const todoText = $input.val().trim();
if (todoText !== '' && !isDuplicate(todoText)) {
addTodoToList(todoText, false);
saveTodos();
$input.val('').focus();
}
});
// EnterキーでTodo追加
$input.keypress((event) => {
if (event.which === 13) { // Enterキーのキーコードは13
$('#addButton').click();
}
});
// Todoアイテムの完了/未完了の切り替え
$list.on('click', 'li', (e) => {
const $target = $(e.target);
if (!$target.hasClass('remove')) {
const $todoItem = $target.closest('li');
$todoItem.toggleClass('completed');
updateCompletedCount();
saveTodos();
}
});
// 完了済みTodoアイテムの削除
$clearCompleted.click(() => {
$list.find('.completed').remove();
updateCompletedCount();
saveTodos();
});
// Todoアイテムをリストに追加する関数
function addTodoToList(text, completed) {
const $todoItem = $('<li>').text(text);
if (completed) {
$todoItem.addClass('completed');
}
$todoItem.append('<span class="remove">[x]</span>').appendTo($list);
updateCompletedCount();
}
// Todoアイテムをローカルストレージに保存する関数
function saveTodos() {
const todos = [];
$list.find('li').each((index, todo) => {
todos.push({
text: $(todo).text(),
completed: $(todo).hasClass('completed')
});
});
localStorage.setItem('todos', JSON.stringify(todos));
}
// 重複するTodoアイテムをチェックする関数
function isDuplicate(text) {
return $list.find('li').filter((index, todo) => $(todo).text() === text).length > 0;
}
// 完了済みアイテムの数を更新する関数
function updateCompletedCount() {
const completedCount = $list.find('.completed').length;
$clearCompleted.text(`完了済みアイテムを削除 (${completedCount})`);
if (completedCount === 0) {
$clearCompleted.hide();
} else {
$clearCompleted.show();
}
}
});