March 2023 Agenda
 |
<!doctype html>
<html lang="en">
<head>
<title>NEW Weather</title></head>
<body>
<header class="topbar">
<div>Dashboard</div>
//<input id="globalSearch" placeholder="Search or type URL..." />
</header>
<div class="container">
<main class="main">
<div class="weather">
<div id="alerts"></div>
<h3 id="locationLabel">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>
const data={"Favorites":[{title:"Google",url:"https://google.com"}]};
const sidebar=document.getElementById('sidebar');
function render(){sidebar.innerHTML='';Object.entries(data).forEach(([cat,links])=>{const d=document.createElement('div');d.className='cat';d.innerHTML=`<div class='cat-title'>${cat}</div>`;const list=document.createElement('div');list.className='links-list';links.forEach(l=>{const item=document.createElement('div');item.className='link-item';const domain=new URL(l.url).hostname;item.innerHTML=`<img src='https://www.google.com/s2/favicons?domain=${domain}'><div>${l.title}</div>`;item.onclick=()=>window.open(l.url);list.appendChild(item)});d.appendChild(list);sidebar.appendChild(d)});}render();
// search
const search=document.getElementById('globalSearch');
search.addEventListener('keydown',e=>{if(e.key==='Enter'){const v=search.value;if(v.startsWith('http'))location.href=v;else if(v.includes('.'))location.href='https://'+v;else location.href='https://google.com/search?q='+v;}});
// 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>
