```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アメダスデータ検索</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; overflow-y: scroll; border: 2px solid #000; margin: auto; padding: 10px; text-align: center;">
<h1 style="font-size: 20px;">🌦️アメダスデータ検索⛅</h1>
<div style="margin-bottom: 10px;">
<label>📅開始日: <input type="date" id="startDate" style="font-size: 14px;"></label>
</div>
<div style="margin-bottom: 10px;">
<label>📅終了日: <input type="date" id="endDate" style="font-size: 14px;"></label>
</div>
<button onclick="fetchData()" style="font-size: 16px; cursor: pointer;">🔍検索🔍</button>
<div id="dataContainer" style="margin-top: 20px;"></div>
</div>
<script>
function fetchData() {
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
const dataContainer = document.getElementById('dataContainer');
if (!startDate || !endDate) {
alert('開始日と終了日を入力してください。');
return;
}
dataContainer.innerHTML = '';
dataContainer.innerHTML = '<p style="animation: bounce 2s infinite;">データを取得中...🐱🐶🐭</p>';
setTimeout(() => {
dataContainer.innerHTML = '';
const dummyData = [
{ date: '2023-04-01', temperature: 15, rain: 5, sun: 0.5 },
{ date: '2023-04-05', temperature: 12, rain: 6, sun: 0.3 },
{ date: '2023-04-10', temperature: 14, rain: 7, sun: 2 },
];
dummyData.forEach(data => {
if (data.temperature >= 10 && data.temperature <= 20 && (data.rain >= 4 || data.sun <= 1)) {
const dataElem = document.createElement('div');
dataElem.style.padding = '10px';
dataElem.style.marginBottom = '10px';
dataElem.style.border = '1px solid #000';
dataElem.style.borderRadius = '5px';
dataElem.style.transition = 'all 0.3s';
dataElem.style.cursor = 'pointer';
dataElem.onmouseover = () => {
dataElem.style.transform = 'scale(1.05)';
dataElem.style.backgroundColor = '#f0f8ff';
};
dataElem.onmouseout = () => {
dataElem.style.transform = 'scale(1)';
dataElem.style.backgroundColor = '#ffffff';
};
dataElem.onclick = () => {
dataElem.style.animation = 'rotate 1s';
};
dataElem.innerHTML = `
<p>📅日付: ${data.date}</p>
<p>🌡️気温: ${data.temperature}℃</p>
<p>☔降水量: ${data.rain}mm</p>
<p>☀️日照時間: ${data.sun}時間</p>
`;
dataContainer.appendChild(dataElem);
}
});
if (!dataContainer.innerHTML) {
dataContainer.innerHTML = '<p style="animation: bounce 2s infinite;">条件に合うデータが見つかりませんでした...😿</p>';
}
}, 2000);
}
</script>
</body>
</html>
```
