<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Widget</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
text-align: center;
}
#weather {
margin: 20px;
padding: 20px;
border: 1px solid #333;
display: inline-block;
background-color: rgb(197, 197, 197);
}
#longboard-image-container {
margin: 20px;
padding: 1px;
background-color: #fff;
margin: auto;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
margin: auto;
background-color: #fff;
}
</style>
</head>
<body>
<h1>Want to Longboard?</h1>
<div id="weather">
<p>Loading weather...</p>
</div>
<script>
$(document).ready(function(){
const apiKey = 'b2b74200b3004ce29bd15443242704';
const city = 'Charlottesville';
const url = 'http://api.weatherapi.com/v1/forecast.json?key=' + apiKey + '&q=' + city + '&days=1&aqi=no&alerts=no';
$.getJSON(url, function(data) {
const time = data.current.last_updated;
const temp = data.current.temp_f;
const weather = data.current.condition.text;
const icon = data.current.condition.icon;
const past_precip = data.current.precip_in;
const eight_precip = data.forecast.forecastday[0].hour[8].chance_of_rain;
const eight_icon = data.forecast.forecastday[0].hour[8].condition.icon;
const eight_temp = data.forecast.forecastday[0].hour[8].temp_f;
const nine_precip = data.forecast.forecastday[0].hour[9].chance_of_rain;
const nine_icon = data.forecast.forecastday[0].hour[9].condition.icon;
const nine_temp = data.forecast.forecastday[0].hour[9].temp_f;
const four_precip = data.forecast.forecastday[0].hour[16].chance_of_rain;
const four_icon = data.forecast.forecastday[0].hour[16].condition.icon;
const four_temp = data.forecast.forecastday[0].hour[16].temp_f;
const five_precip = data.forecast.forecastday[0].hour[17].chance_of_rain;
const five_icon = data.forecast.forecastday[0].hour[17].condition.icon;
const five_temp = data.forecast.forecastday[0].hour[17].temp_f;
const six_precip = data.forecast.forecastday[0].hour[18].chance_of_rain;
const six_icon = data.forecast.forecastday[0].hour[18].condition.icon;
const six_temp = data.forecast.forecastday[0].hour[18].temp_f;
$('#weather').html(`
<h3>Current Weather</h3>
<p>Time: ${time}</p>
<p>${temp}°F - ${weather}</p>
<p>Rain on ground: ${past_precip} inches</p>
<p><img src="${icon}"></p>
<table>
<tr>
<th>Time</th>
<th>Temperature</th>
<th>Precipitation Chance</th>
<th>Condition</th>
</tr>
<tr>
<td>8am</td>
<td>${eight_temp}°F</td>
<td>${eight_precip}%</td>
<td><img src="${eight_icon}"></td>
</tr>
<tr>
<td>9am</td>
<td>${nine_temp}°F</td>
<td>${nine_precip}%</td>
<td><img src="${nine_icon}"></td>
</tr>
<tr>
<td>4pm</td>
<td>${four_temp}°F</td>
<td>${four_precip}%</td>
<td><img src="${four_icon}"></td>
</tr>
<tr>
<td>5pm</td>
<td>${five_temp}°F</td>
<td>${five_precip}%</td>
<td><img src="${five_icon}"></td>
</tr>
<tr>
<td>6pm</td>
<td>${six_temp}°F</td>
<td>${six_precip}%</td>
<td><img src="${six_icon}"></td>
</tr>
`);
});
});
</script>
</body>
</html>