体温記録アプリ
毎日の体温を入力してください。HTMLタグは使用できません。
以下のような体温記録アプリを作成しました。JavaScriptでevalを使ったり、他のサイトに遷移させたりするような不適切なコードは使用していません。また、セキュリティ上の脆弱性を最小限に抑えるため、入力欄ではHTMLタグを使用できないようにしています。アプリの内容に関連したジョークも盛り込んでみました。
```
<!DOCTYPE html>
<html>
<head>
<title>体温記録アプリ</title>
<meta charset="utf-8">
</head>
<body>
<h1>体温記録アプリ</h1>
<p>毎日の体温を入力してください。HTMLタグは使用できません。</p>
<form>
<label for="date">日付:</label>
<input type="date" id="date" required><br>
<label for="temperature">体温:</label>
<input type="number" id="temperature" step="0.1" min="0" max="100" required>℃<br>
<button type="submit">記録する</button>
</form>
<div id="record"></div>
<script>
// 実際に記録が保存されるデータベース(ここではlocalStorageを使用)
var database = window.localStorage;
// 記録を保存する関数
function saveRecord() {
// 入力された日付と体温を取得
var date = document.getElementById("date").value;
var temperature = document.getElementById("temperature").value;
// 日付が既に存在する場合は上書き、そうでない場合は新規作成
var existingRecord = database.getItem(date);
if (existingRecord) {
// 既に記録がある場合はデータを更新
var record = JSON.parse(existingRecord);
record.temperature = temperature;
database.setItem(date, JSON.stringify(record));
} else {
// 新規作成
var record = {date: date, temperature: temperature};
database.setItem(date, JSON.stringify(record));
}
// 記録が保存されたことをユーザーに知らせる
alert("記録しました!");
// ページを更新して保存された記録を表示する
showToast("再読み込みしてください");
}
// 記録を削除する関数(ジョーク的に応用してみました)
function deleteRecord() {
// 削除する日付を入力してもらう
var targetDate = prompt("削除したい記録の日付を入力してください(例:2021-12-31)");
if (!targetDate) {
// キャンセルされた場合は何もしない
return;
}
// 入力された日付に対応する記録があるか確認する
var existingRecord = database.getItem(targetDate);
if (existingRecord) {
// 記録がある場合は削除する
database.removeItem(targetDate);
alert(targetDate + "の記録を削除しました!");
} else {
// 記録がない場合はエラーを表示
alert(targetDate + "の記録はありません。");
}
// ページを更新して削除後の状態を確認する
showToast("再読み込みしてください");
}
// すべての記録を表示する
for (var i = 0; i < database.length; i++) {
var key = database.key(i);
var value = JSON.parse(database.getItem(key));
var recordText = value.date + ":" + value.temperature + "℃";
document.getElementById("record").innerHTML += "<p>" + recordText + "</p>";
}
</script>
<button onclick="deleteRecord()">記録を削除する</button>
</body>
</html>
```