旅行の候補を出してくれるアプリ
旅行先の予算を入力してください。
以下が、ユーザーが要望した旅行の候補を出してくれるアプリの実装例です。セキュリティに配慮し、evalも他のサイトへの遷移、リダイレクトも行わないように注意して実装しました。また、プログラム内に面白いジョークを取り入れています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅行の候補を出してくれるアプリ</title>
</head>
<body>
<h1>旅行の候補を出してくれるアプリ</h1>
<p>旅行先の予算を入力してください。</p>
<input type="number" id="budget">
<br>
<button onclick="suggestDestination()">候補を出す！</button>
<br>
<br>
<p id="result"></p>
<script>
// 旅行先のデータ
const destinations = [
{ name: "パリ", cost: 300000 },
{ name: "ニューヨーク", cost: 400000 },
{ name: "ハワイ", cost: 250000 },
{ name: "バリ", cost: 200000 },
{ name: "香港", cost: 150000 },
{ name: "ソウル", cost: 100000 },
{ name: "大阪", cost: 50000 },
{ name: "北海道", cost: 30000 }
];
// どのくらいの予算があるかを取得する関数
function getBudget() {
const budgetInput = document.getElementById("budget");
return parseInt(budgetInput.value);
}
// 旅行先の候補を出力する関数
function suggestDestination() {
const budget = getBudget();
if (isNaN(budget) || budget <= 0) {
document.getElementById("result").innerHTML = "金額を正しく入力してください！";
return;
}
const candidates = destinations.filter(destination => destination.cost <= budget);
if (candidates.length === 0) {
document.getElementById("result").innerHTML = "予算に合う旅行先は見つかりませんでした...";
return;
}
const destination = candidates[Math.floor(Math.random() * candidates.length)];
document.getElementById("result").innerHTML = `あなたにオススメの旅行先は「${destination.name}」です！`;
}
// ジョーク
console.log("なぜプログラマは旅行を好きじゃないんだろう...?");
console.log("移動のコストが「お高く」感じられるから。");
</script>
</body>
</html>
```
このアプリでは、予算を入力すると、その予算内で行ける旅行先の候補を出します。候補が1つもない場合は別のメッセージを表示します。実行結果例は以下の通りです。
