以下が、ビールをおすすめしてくれるアプリの実装例です。セキュリティの脆弱性を避けるため、evalや外部サイトへの遷移、リダイレクトは行いません。また、エラー処理は省略しているので、必要に応じて実装してください。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ビールおすすめアプリ</title>
<style>
body {
font-family: sans-serif;
text-align: center;
background-color: #f5f5f5;
}
h1 {
margin-top: 50px;
font-size: 40px;
}
form {
margin-top: 50px;
}
label {
display: block;
margin-bottom: 10px;
font-size: 20px;
}
select {
font-size: 20px;
padding: 5px;
border-radius: 5px;
}
button {
font-size: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 5px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #3E8E41;
}
.result {
margin-top: 50px;
font-size: 30px;
font-weight: bold;
color: #4CAF50;
}
</style>
</head>
<body>
<h1>ビールおすすめアプリ</h1>
<form>
<label for="type">ビールの種類：</label>
<select id="type">
<option value="pilsner">ピルスナー</option>
<option value="ipa">IPA</option>
<option value="stout">スタウト</option>
</select>
<button type="button" onclick="recommendBeer()">おすすめを教えて！</button>
</form>
<div class="result" id="result"></div>
<script>
function recommendBeer() {
const type = document.getElementById("type").value;
let result = "";
switch(type) {
case "pilsner":
result = "「ハイネケン」がおすすめです！泡立ちが良く、爽やかな味わいが特徴です。";
break;
case "ipa":
result = "「エールスミス デッドポニーエール」がおすすめです！ホップの爽やかな香りと、クセになる味わいがたまらないです。";
break;
case "stout":
result = "「ギネス ダブルスタウト」がおすすめです。口当たりにクリーミィさがあり、豊かなコクと味わいが楽しめます。";
break;
default:
result = "申し訳ありません。選択されたビールの種類には対応していません。";
break;
}
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
```
ジョークとして、ボタンのテキストを「おすすめをピルスナーして！」とすると、少し笑いが取れるかもしれません。ただし、適切な表現かどうかは状況によって異なるため、注意してください。
