 |
Weather
<div class="container">
<main class="main">
<div class="weather">
<div id="alerts"></div>
<h3 id="locationLabel">NEW Weather</h3>
<div id="today"></div>
<div class="forecast" id="forecast"></div>
<div class="hourly" id="hourly"></div>
<div class="radar">
<iframe width="100%" height="250" src="https://embed.windy.com/embed2.html?lat=45.10&lon=-87.63&detailLat=45.10&detailLon=-87.63&width=650&height=250&zoom=7&level=surface&overlay=radar"></iframe>
</div>
</div>
</main>
</div>
<script>
// WEATHER
let LAT=45.1019,LON=-87.6303;
navigator.geolocation?.getCurrentPosition(pos=>{
LAT=pos.coords.latitude;
LON=pos.coords.longitude;
document.getElementById('locationLabel').textContent='Your Location Weather';
});
const todayEl=document.getElementById('today');
const forecastEl=document.getElementById('forecast');
const hourlyEl=document.getElementById('hourly');
const alertsEl=document.getElementById('alerts');
const cToF=c=>(c*9/5)+32;
const codeMap={0:'Clear',1:'Mostly clear',2:'Partly cloudy',3:'Cloudy',61:'Rain',63:'Rain',65:'Heavy rain',71:'Snow',95:'Storm'};
async function fetchWeather(){
try{
const res=await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${LAT}&longitude=${LON}&daily=temperature_2m_max,temperature_2m_min,weathercode&hourly=temperature_2m&timezone=auto&forecast_days=5`);
const d=await res.json();
todayEl.innerHTML=`<div style='font-size:24px;font-weight:700;'>${Math.round(cToF((d.daily.temperature_2m_max[0]+d.daily.temperature_2m_min[0])/2))}°F</div><div>${codeMap[d.daily.weathercode[0]]||''}</div>`;
forecastEl.innerHTML='';
d.daily.time.forEach((t,i)=>{
const date=new Date(t);
const day=date.toLocaleDateString(undefined,{weekday:'short'});
const el=document.createElement('div');
el.className='day';
el.innerHTML=`<div>${day}</div><div>${Math.round(cToF(d.daily.temperature_2m_max[i]))}° / ${Math.round(cToF(d.daily.temperature_2m_min[i]))}°</div><div>${codeMap[d.daily.weathercode[i]]||''}</div>`;
el.onclick=()=>showHourly(i,d);
forecastEl.appendChild(el);
});
showHourly(0,d);
fetchAlerts();
}catch(e){todayEl.textContent='Weather unavailable';}
}
function showHourly(dayIndex,data){
hourlyEl.innerHTML='';
const hours=data.hourly.time;
const temps=data.hourly.temperature_2m;
for(let i=dayIndex*24;i<dayIndex*24+24;i++){
const h=new Date(hours[i]).getHours();
const el=document.createElement('div');
el.className='hour';
el.innerHTML=`<div>${h}:00</div><div>${Math.round(cToF(temps[i]))}°</div>`;
hourlyEl.appendChild(el);
}
}
async function fetchAlerts(){
try{
const res=await fetch('https://api.weather.gov/alerts/active?area=WI');
const data=await res.json();
alertsEl.innerHTML='';
data.features.slice(0,2).forEach(a=>{
const div=document.createElement('div');
div.className='alert';
div.textContent=a.properties.headline;
alertsEl.appendChild(div);
});
}catch{}
}
fetchWeather();
setInterval(fetchWeather,1800000);
</script>
</body>
</html>
