Skip to content

Commit

Permalink
Add 10 day forecast.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cwmoriarty
cwmoriarty authored Nov 3, 2023
1 parent 72f3ee3 commit 1a22a0a
Showing 1 changed file with 95 additions and 2 deletions.
97 changes: 95 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,32 @@
<body>
<h1><span id="city"></span> Weather</h1>
Currently <span id="temp"></span> and <b><span id="shortForecast"></span></b><br>
<br>
<h2>Current Forecast</h2>
<ul>
<li>Today <span id="maxTemp"></span>/ <span id="minTemp"></span></li>
<li>Tomorrow <span id="maxTempTomorrow"></span> / <span id="minTempTomorrow"></span></li>
<li>Then <span id="maxTempFollowing"></span> / <span id="minTempFollowing"></span></li>
<li>Then <span id="maxTempFollowing2"></span> / <span id="minTempFollowing2"></span></li>
<li>Then <span id="maxTempFollowing3"></span> / <span id="minTempFollowing3"></span></li>
<li>Then <span id="maxTempFollowing4"></span> / <span id="minTempFollowing4"></span></li>
<li>Then <span id="maxTempFollowing5"></span> / <span id="minTempFollowing5"></span></li>
<li>Then <span id="maxTempFollowing6"></span> / <span id="minTempFollowing6"></span></li>
<li>Then <span id="maxTempFollowing7"></span> / <span id="minTempFollowing7"></span></li>
</ul>


<br>
<img id="weather_icon" src="">
<br><Br>
<b>forecastGridData:</b> <a id="forecastGridData" href="">API</a><br>
<b>Zipcode:</b> <span id="zip"></span><br>
<b>Lat, Lon:</b> <span id="latlon"></span>



<script type="text/javascript">

//Get client Lat/Lon
fetch('https://ipapi.co/json') //ssl-tax free version of http://ip-api.com/json/
.then(response => response.json())
Expand All @@ -31,7 +48,12 @@ <h1><span id="city"></span> Weather</h1>
})
.then(response => response.json())
.then(data => {
localforecastURL = `${data.properties.forecastHourly}` //?units=si for celcius
localforecastURL = `${data.properties.forecastHourly}` //?units=si for celcius, ?units=us for "us"
forecastGridData = `${data.properties.forecastGridData}`
//data.properties.forecast "https://api.weather.gov/gridpoints/BOX/76,100/forecast"
//data.properties.forecastHourly "https://api.weather.gov/gridpoints/BOX/76,100/forecast/hourly"
//data.properties.forecastGridData "https://api.weather.gov/gridpoints/BOX/76,100 " //box is fixed to celcius




Expand All @@ -57,6 +79,77 @@ <h1><span id="city"></span> Weather</h1>
.catch(error => {
console.error("Error fetching Forecast data:", error);
});







//Get Forecast Grid (eg: https://api.weather.gov/gridpoints/BOX/76,100)
fetch(forecastGridData, {
method: 'GET',
headers: { 'User-Agent': '(cwmoriarty.github.io/sunblock, [email protected])', }
})
.then(response => response.json())
.then(data => {
//console.log(data);
//maxTempTime = data.properties.maxTemperature.values[0].validTime.split('/')[0]; //Not accurate, just the "valid time"

maxTemp = data.properties.maxTemperature.values[0].value * 9 / 5 + 32;
maxTempTomorrow = data.properties.maxTemperature.values[1].value * 9 / 5 + 32;
maxTempFollowing = data.properties.maxTemperature.values[2].value * 9 / 5 + 32;
maxTempFollowing2 = data.properties.maxTemperature.values[3].value * 9 / 5 + 32;
maxTempFollowing3 = data.properties.maxTemperature.values[4].value * 9 / 5 + 32;
maxTempFollowing4 = data.properties.maxTemperature.values[5].value * 9 / 5 + 32;
maxTempFollowing5 = data.properties.maxTemperature.values[6].value * 9 / 5 + 32;
maxTempFollowing6 = data.properties.maxTemperature.values[7].value * 9 / 5 + 32;
maxTempFollowing7 = data.properties.maxTemperature.values[8].value * 9 / 5 + 32;

minTemp = data.properties.minTemperature.values[0].value * 9 / 5 + 32;
minTempTomorrow = data.properties.minTemperature.values[1].value * 9 / 5 + 32;
minTempFollowing = data.properties.minTemperature.values[2].value * 9 / 5 + 32;
minTempFollowing2 = data.properties.minTemperature.values[3].value * 9 / 5 + 32;
minTempFollowing3 = data.properties.minTemperature.values[4].value * 9 / 5 + 32;
minTempFollowing4 = data.properties.minTemperature.values[5].value * 9 / 5 + 32;
minTempFollowing5 = data.properties.minTemperature.values[6].value * 9 / 5 + 32;
minTempFollowing6 = data.properties.minTemperature.values[7].value * 9 / 5 + 32;
minTempFollowing7 = data.properties.minTemperature.values[8].value * 9 / 5 + 32;

document.getElementById("forecastGridData").href = forecastGridData;

document.getElementById("maxTemp").innerHTML = maxTemp + "F";
document.getElementById("maxTempTomorrow").innerHTML = maxTempTomorrow + "F";
document.getElementById("maxTempFollowing").innerHTML = maxTempFollowing + "F";
document.getElementById("maxTempFollowing2").innerHTML = maxTempFollowing2 + "F";
document.getElementById("maxTempFollowing3").innerHTML = maxTempFollowing3 + "F";
document.getElementById("maxTempFollowing4").innerHTML = maxTempFollowing4 + "F";
document.getElementById("maxTempFollowing5").innerHTML = maxTempFollowing5 + "F";
document.getElementById("maxTempFollowing6").innerHTML = maxTempFollowing6 + "F";
document.getElementById("maxTempFollowing7").innerHTML = maxTempFollowing7 + "F";

document.getElementById("minTemp").innerHTML = minTemp + "F";
document.getElementById("minTempTomorrow").innerHTML = minTempTomorrow + "F";
document.getElementById("minTempFollowing").innerHTML = minTempFollowing + "F";
document.getElementById("minTempFollowing2").innerHTML = minTempFollowing2 + "F";
document.getElementById("minTempFollowing3").innerHTML = minTempFollowing3 + "F";
document.getElementById("minTempFollowing4").innerHTML = minTempFollowing4 + "F";
document.getElementById("minTempFollowing5").innerHTML = minTempFollowing5 + "F";
document.getElementById("minTempFollowing6").innerHTML = minTempFollowing6 + "F";
document.getElementById("minTempFollowing7").innerHTML = minTempFollowing7 + "F";
})



.catch(error => {
console.error("Error fetching Forecast data:", error);
});






})
.catch(error => {
console.error("Error fetching Weather Station data:", error);
Expand Down

0 comments on commit 1a22a0a

Please sign in to comment.