🌞🌧️ 気象データフィルタリングゲーム 🌧️ 🌞
データを取得中... 🚀
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>気象データフィルタリングゲーム</title>
<style>
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes flash {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
div.bounce-animation {
display: inline-block;
animation: bounce 1s infinite;
}
div.flash-animation {
display: inline-block;
animation: flash 0.5s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; margin: auto;">
<div style="text-align:center; font-size: 24px; margin-bottom: 20px;">
<span class="bounce-animation">🌞</span>🌧️ 気象データフィルタリングゲーム 🌧️ <span class="bounce-animation">🌞</span>
</div>
<div style="margin-bottom: 10px;">
<label for="startDate">開始日: </label>
<input type="date" id="startDate">
</div>
<div style="margin-bottom: 20px;">
<label for="endDate">終了日: </label>
<input type="date" id="endDate">
</div>
<div>
<button onclick="fetchData()" style="width: 100%; padding: 10px; background-color: #FFA500; border: none; border-radius: 5px; font-size: 20px;">データフィルタリング 🚀</button>
</div>
<div id="result" style="margin-top: 20px; height: 200px; overflow-y: scroll; border: 2px solid #FFA500; border-radius: 10px; padding: 10px; background-color: #FFF8DC;">
<div style="text-align:center; font-size: 20px;">データを取得中... 🚀</div>
</div>
</div>
<script>
const sampleData = [
{ date: '2023-10-01', avgTemp: 15, rain: 5, sunshine: 0.5 },
{ date: '2023-10-02', avgTemp: 20, rain: 0, sunshine: 2 },
{ date: '2023-10-03', avgTemp: 17, rain: 4, sunshine: 0.5 },
// ここにもっとサンプルデータを追加する
];
function fetchData() {
const startDate = new Date(document.getElementById('startDate').value);
const endDate = new Date(document.getElementById('endDate').value);
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = ''; // Clear previous results
sampleData.forEach(data => {
const date = new Date(data.date);
if (date >= startDate && date <= endDate &&
data.avgTemp >= 10 && data.avgTemp <= 20) {
if (data.rain >= 4 || data.sunshine <= 1) {
const div = document.createElement('div');
div.style = "margin-bottom: 10px; padding: 10px; border: 2px solid #000; border-radius: 5px; background-color: #FFF;";
div.innerHTML = `<span class="flash-animation">📅</span> 日付: ${data.date}, 🌡️ 平均気温: ${data.avgTemp}℃, ☔ 降水量: ${data.rain}mm, 🌞 日照時間: ${data.sunshine}時間`;
resultDiv.appendChild(div);
}
}
});
if (resultDiv.innerHTML === '') {
resultDiv.innerHTML = '<div style="text-align:center; font-size: 20px;">該当するデータはありません 💦</div>';
}
}
</script>
</body>
</html>
```