<!DOCTYPE html>

<html>

<head>

<script src="https://kit.fontawesome.com/<f22b558442>.js" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" crossorigin="anonymous"></script>

<script type="text/javascript">

$(document).ready(function () {

$.ajax({

url: "https://api.openweathermap.org/data/2.5/weather?lat=<40.804621>&lon=-<73.065409>&APPID=<3db219d65a87a5fec23f38656f8cf284>&units=imperial",

dataType: 'json'

}).done(function (data) {

let sunriseTime = moment.unix(data.sys.sunrise).format('h:mm A');

let sunsetTime = moment.unix(data.sys.sunset).format('h:mm A');

$('#feelsLike').html(Math.floor(data.main.feels_like));

$('#temp').html(Math.floor(data.main.temp));

$('#sunrise').html(sunriseTime);

$('#sunset').html(sunsetTime);

$('#wind').html(Math.floor(data.wind.speed));

$('#humidity').html(data.main.humidity);

switch(data.weather[0].main) {

case 'Thunderstorm':

$('#icon').addClass('fas fa-cloud-bolt');

break;

case 'Drizzle':

$('#icon').addClass('fas fa-cloud-rain');

break;

case 'Rain':

$('#icon').addClass('fas fa-cloud-showers-heavy');

break;

case 'Snow':

$('#icon').addClass('fas fa-snowflake');

break;

case 'Atmosphere':

$('#icon').addClass('fas fa-water');

break;

case 'Clouds':

$('#icon').addClass('fas fa-cloud');

break;

default:

$('#icon').addClass('fa-sun');

}

});

$.ajax({

url: "https://api.openweathermap.org/data/2.5/forecast?lat=<40.804621>&lon=-<73.065409>&APPID=<3db219d65a87a5fec23f38656f8cf284>&units=imperial&cnt=1",

dataType: 'json'

}).done(function (data2) {

$('#pop').html((data2.list[0].pop)*100);

});

});

</script>

</head>

<body style="margin:0px;">

<div align="middle" style="font-family: Roboto,Helvetica Neue,sans-serif">

<span style="font-size:1em">Holbrook</span><br/>

<span style="font-size:0.8em">feels like <span id="feelsLike"></span>&deg;</span><br/>

<div style="font-size:1.5em; padding:5px;"><i id="icon" class="fas"></i> <span id="temp"></span>&deg;</div>

<span style="font-size:0.8em"><span id="sunrise"></span> <i class="fas fa-sun"></i> <span id="sunset"></span></span></br/>

<i class="fas fa-umbrella"></i> <span id="pop"></span>% <i class="fas fa-wind"></i> <span id="wind"></span>mph <i class="fas fa-droplet"></i> <span id="humidity"></span>%

</div>

</body>

</html>