以下はセキュリティに配慮したリマインダーアプリの実装例です。
```html
<!DOCTYPE html>
<html>
<head>
<title>リマインダーアプリ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>リマインダーアプリ</h1>
<form onsubmit="addReminder(event)">
<input type="text" id="reminder" placeholder="リマインダーを入力">
<input type="datetime-local" id="date" placeholder="日時を選択">
<button type="submit">追加</button>
</form>
<ul id="reminders"></ul>
<script>
const reminders = [];
function addReminder(event) {
event.preventDefault();
const input = document.getElementById("reminder");
const dateInput = document.getElementById("date");
const reminder = input.value;
const date = new Date(dateInput.value);
if (!reminder || !date || isNaN(date.getTime())) {
alert("リマインダーまたは日時が無効です。");
return;
}
const id = new Date().getTime().toString();
const newReminder = { id, reminder, date };
reminders.push(newReminder);
updateList();
input.value = "";
dateInput.value = "";
}
function updateList() {
const list = document.getElementById("reminders");
list.innerHTML = "";
reminders.forEach(reminder => {
const listItem = document.createElement("li");
listItem.textContent = reminder.reminder + " (" +
new Intl.DateTimeFormat(undefined, {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric"
}).format(reminder.date) + ")";
const deleteButton = document.createElement("button");
deleteButton.textContent = "削除";
deleteButton.onclick = () => {
reminders.splice(reminders.findIndex(r => r.id === reminder.id), 1);
updateList();
};
listItem.appendChild(deleteButton);
list.appendChild(listItem);
const now = new Date();
if (reminder.date <= now) {
alert(reminder.reminder + " の時間が過ぎました。");
} else {
setTimeout(() => {
alert(reminder.reminder + " の時間です！");
}, reminder.date - now);
}
});
}
</script>
</body>
</html>
```
このアプリは、ユーザーが入力したリマインダーと日時をリストに追加し、指定した時間が来たらアラートで通知する機能を持っています。さらに、削除ボタンを押すことでリマインダーを削除することもできます。日時のフォーマットには、ユーザーのブラウザの設定に合わせたフォーマットを使用しています。
ジョークとして、リマインダーを設定するところで「忘れないようにリマインダーを設定しましょう！...って、そもそもリマインダーを設定するのを忘れないようにしないといけないですね。」といった注意喚起のようなコメントを表示することができます。
