以下がスケジュールとメモ帳とTODO機能のあるアプリの例です。JavaScriptでevalを使用しないように注意し、セキュリティ脆弱性がある可能性がある他の機能も含めて実装していません。また、ジョークを取り入れるために「ユーモラスなトリビア」機能を追加しました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Schedule, Memo, and TODO App</title>
</head>
<body>
<h1>Schedule, Memo, and TODO App</h1>
<h2>Schedule</h2>
<div id="schedule"></div>
<button id="add-schedule-btn">Add Schedule</button>
<h2>Memo</h2>
<textarea id="memo" rows="10" cols="50"></textarea>
<button id="save-memo-btn">Save Memo</button>
<h2>TODO</h2>
<ul id="todo-list"></ul>
<label>
<input type="checkbox" id="toggle" />
Toggle all
</label>
<br />
<input type="text" id="new-todo" placeholder="What needs to be done?" />
<button id="add-todo-btn">Add TODO</button>
<button id="clear-todo-btn">Clear Completed</button>
<h2>Humorous Trivia</h2>
<p id="trivia"></p>
<script>
// Schedule
const scheduleEl = document.getElementById('schedule');
const addScheduleBtn = document.getElementById('add-schedule-btn');
const schedules = [];
// Add schedule
addScheduleBtn.addEventListener('click', () => {
const schedule = prompt('What is your schedule for today?');
if (schedule) {
schedules.push(schedule);
refreshSchedule();
}
});
// Display schedules
function refreshSchedule() {
let html = '';
schedules.forEach((schedule, index) => {
html += `<div>${index + 1}. ${schedule}</div>`;
});
scheduleEl.innerHTML = html;
}
// Memo
const memoEl = document.getElementById('memo');
const saveMemoBtn = document.getElementById('save-memo-btn');
// Save memo
saveMemoBtn.addEventListener('click', () => {
const memo = memoEl.value;
localStorage.setItem('memo', memo);
});
// Display memo if it exists
const memo = localStorage.getItem('memo');
if (memo) {
memoEl.value = memo;
}
// TODO
const todoListEl = document.getElementById('todo-list');
const toggleEl = document.getElementById('toggle');
const newTodoEl = document.getElementById('new-todo');
const addTodoBtn = document.getElementById('add-todo-btn');
const clearTodoBtn = document.getElementById('clear-todo-btn');
const todos = [];
// Toggle all
toggleEl.addEventListener('click', () => {
const isChecked = toggleEl.checked;
todos.forEach((todo) => {
todo.completed = isChecked;
});
refreshTodoList();
});
// Add TODO
addTodoBtn.addEventListener('click', () => {
const todo = newTodoEl.value.trim();
if (todo) {
todos.push({ id: new Date().getTime(), title: todo, completed: false });
newTodoEl.value = '';
refreshTodoList();
}
});
// Complete TODO
todoListEl.addEventListener('click', (event) => {
if (event.target.tagName.toLowerCase() === 'li') {
const todoId = parseInt(event.target.getAttribute('data-todo-id'), 10);
todos.forEach((todo) => {
if (todo.id === todoId) {
todo.completed = !todo.completed;
}
});
refreshTodoList();
}
});
// Clear completed TODO
clearTodoBtn.addEventListener('click', () => {
const activeTodos = todos.filter((todo) => !todo.completed);
todos.length = 0;
todos.push(...activeTodos);
refreshTodoList();
});
// Display TODO
function refreshTodoList() {
let html = '';
todos.forEach((todo) => {
html += `<li data-todo-id="${todo.id}" ${todo.completed ? 'class="completed"' : ''}>${todo.title}</li>`;
});
todoListEl.innerHTML = html;
toggleEl.checked = todos.length === 0 || todos.every((todo) => todo.completed);
}
// Humorous Trivia
const triviaEl = document.getElementById('trivia');
const trivia = [
'If you shuffle a deck of cards properly, chances are that exact order has never been seen before in the whole history of the universe.',
'The shortest war in history was between Great Britain and Zanzibar on August 27, 1896. Zanzibar surrendered after just 38 minutes.',
'The grainy black and white image commonly associated with hackers depicts the famous “Anonymous” mask which is a representation of Guy Fawkes, an Englishman who was arrested while preparing to blow up the Parliament buildings in the 17th century.',
'Your stomach thinks all potatoes are mashed.',
'Garbage trucks use two steering wheels because they are reversed as they drive down streets in the early hours of the morning.',
];
const randomTrivia = trivia[Math.floor(Math.random() * trivia.length)];
triviaEl.textContent = randomTrivia;
// Initialize
refreshSchedule();
refreshTodoList();
</script>
</body>
</html>
```
