以下が実際のプログラムの例です。注意：このコードはあくまで例であり、最善の実装方法ではありません。セキュリティ上重要なスクリプトには注意してください。
```
<!DOCTYPE html>
<html>
<head>
<title>おすすめ京都観光スポットアプリ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
text-align: center;
}
button {
display: block;
margin: 20px auto;
font-size: 1.2em;
padding: 10px;
background-color: #3cba54;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c8a39;
}
#spots {
display: none;
}
.spot {
margin: 20px auto;
width: 90%;
max-width: 600px;
padding: 10px;
background-color: #F8F8F8;
border-radius: 10px;
box-shadow: 3px 3px 5px #666666;
cursor: pointer;
}
.spot:hover {
background-color: #F1F1F1;
}
.spotheading {
font-size: 1.2em;
font-weight: bold;
margin:10px;
text-align: center;
}
.special {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1>おすすめ京都観光スポットアプリ</h1>
<div>
<button id="date">デート</button>
<button id="family">家族旅行</button>
<button id="girls">女子旅</button>
<button id="gourmet">グルメ旅行</button>
<button id="power">パワースポット巡り</button>
<button id="daytrip">日帰り旅行</button>
</div>
<div id="spots">
<h2 id="title"></h2>
<div class="spot" id="spot1"></div>
<div class="spot" id="spot2"></div>
<div class="spot" id="spot3"></div>
<div class="spot" id="spot4"></div>
<div class="spot" id="spot5"></div>
</div>
<script>
var dateBtn = document.getElementById("date");
var familyBtn = document.getElementById("family");
var girlsBtn = document.getElementById("girls");
var gourmetBtn = document.getElementById("gourmet");
var powerBtn = document.getElementById("power");
var daytripBtn = document.getElementById("daytrip");
var spotsDiv = document.getElementById("spots");
var title = document.getElementById("title");
var spot1 = document.getElementById("spot1");
var spot2 = document.getElementById("spot2");
var spot3 = document.getElementById("spot3");
var spot4 = document.getElementById("spot4");
var spot5 = document.getElementById("spot5");
dateBtn.addEventListener("click", function() {
showSpots("デート", ["金閣寺", "祇園", "清水寺", "伏見稲荷大社", "鞍馬寺"], 1, 2, 3);
});
familyBtn.addEventListener("click", function() {
showSpots("家族旅行", ["伊勢神宮", "京都水族館", "竹林の小径", "奈良公園", "京都市動物園"], 4, 5, 1);
});
girlsBtn.addEventListener("click", function() {
showSpots("女子旅", ["嵐山", "嵐山モンキーパーク", "祇園", "錦市場", "東寺"], 2, 3, 4);
});
gourmetBtn.addEventListener("click", function() {
showSpots("グルメ旅行", ["築地市場京都", "錦市場", "南禅寺茶寮", "二寧坂", "京都流産籠"], 1, 2, 5);
});
powerBtn.addEventListener("click", function() {
showSpots("パワースポット巡り", ["鞍馬寺", "貴船神社", "天龍寺", "青蓮院", "大覚寺"], 3, 4, 5);
});
daytripBtn.addEventListener("click", function() {
showSpots("日帰り旅行", ["伊勢神宮", "奈良公園", "大阪城", "神戸ハーバーランド", "琵琶湖"], 2, 4, 1);
});
function showSpots(t, s, a, b, c) {
title.textContent = t + "のおすすめスポット";
spot1.innerHTML = '<span class="spotheading">' + s[a-1] + "</span><br>・お寺や神社が多く、歴史を感じられる。<br>・美しい景色が見られる。<br>・地元の人の生活を垣間見ることができる。";
spot2.innerHTML = '<span class="spotheading">' + s[b-1] + "</span><br>・家族でも楽しめる。<br>・大自然に触れ合える。<br>・遠足気分が味わえる。";
spot3.innerHTML = '<span class="spotheading">' + s[c-1] + "</span><br>・おしゃれな雰囲気がある。<br>・買い物や食べ物が充実している。<br>・地元の人がおすすめするお店がある。";
spot4.innerHTML = '<span class="spotheading">' + s[(a+b+c)%5] + "</span><br>・文化的な体験ができる。<br>・季節によって楽しめる催しがある。<br>・子供から大人まで楽しめる。";
spot5.innerHTML = '<span class="spotheading">' + s[(a+b+c+1)%5] + "</span><br>・神秘的な雰囲気がある。<br>・エネルギーを感じられる。<br>・心が癒される。";
spotsDiv.style.display = "block";
}
</script>
</body>
</html>
```
ジョークとしては、スポット名に「自転車操業した」とか「訳ありうどん屋」と書いてみると面白いと思います。でも、実際におすすめスポットの情報を提供するアプリではあるので、ジョークはほんのりとさせる程度にしてください。
