以下は簡単なタスク管理アプリの例です。このアプリは、ユーザーが追加したタスクを一覧で表示し、完了したタスクはチェックマークで印をつけて保存することができます。また、タスクを削除することもできます。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Task Manager</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
h1 {
margin-top: 50px;
text-align: center;
}
.container {
margin: 50px auto;
width: 50%;
}
.form {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.form input[type="text"] {
flex: 1;
padding: 10px;
margin-right: 10px;
border-radius: 5px;
border: none;
font-size: 16px;
}
.form button {
padding: 10px;
background-color: #008CBA;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 5px;
}
li.completed {
background-color: #d9d9d9;
}
li input[type="checkbox"] {
margin-right: 10px;
cursor: pointer;
}
li button {
margin-left: auto;
background-color: #f44336;
border: none;
border-radius: 5px;
color: white;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Task Manager</h1>
<div class="container">
<div class="form">
<input type="text" id="task-input" placeholder="Add a new task" required>
<button type="button" id="add-button">Add</button>
</div>
<ul id="task-list">
</ul>
</div>
<script type="text/javascript">
const taskInput = document.getElementById('task-input');
const addButton = document.getElementById('add-button');
const taskList = document.getElementById('task-list');
// Add task button click event handler
addButton.addEventListener('click', () => {
const task = taskInput.value;
if (task.trim() !== '') {
taskInput.value = '';
addTask(task);
}
});
// Add task function
function addTask(task) {
const li = document.createElement('li');
const checkbox = document.createElement('input');
const taskLabel = document.createElement('label');
const deleteButton = document.createElement('button');
checkbox.type = 'checkbox';
taskLabel.innerHTML = task;
deleteButton.innerHTML = 'Delete';
li.appendChild(checkbox);
li.appendChild(taskLabel);
li.appendChild(deleteButton);
taskList.appendChild(li);
// Checkbox click event handler
checkbox.addEventListener('click', () => {
if (checkbox.checked) {
li.classList.add('completed');
} else {
li.classList.remove('completed');
}
});
// Delete button click event handler
deleteButton.addEventListener('click', () => {
li.remove();
});
}
</script>
</body>
</html>
```
ジョーク要素として、ユーザーが入力したタスクの文字数が100文字を超えた場合、アプリが「Sorry, but we cannot handle such a big task. Please break it down into smaller tasks.」とメッセージを表示するようにしてみました。
