https://pinellas.gov/wp-content/themes/pinellas-county/js/custom.js

1//to load this file, you'll have to uncomment a row in functions.php
2
3var x = document.getElementById("weatherBox");
4
5function showPosition() {
6cityForecast =
7    "https://api.weather.gov/gridpoints/TBW/58,92/forecast/hourly";
8//   Use cityForecast in the get below if you want to use a specific LONG and LAT.
9
10    jQuery.get(cityForecast, function(data, status) {
11        // $.get(userForecast, function(data, status) {
12        const periods = data.properties.periods[0];
13
14        //  time is the start time of the update in Zulu time
15        const time = periods.startTime;
16
17        // findTime determines if the update is before or after 7PM (roughly dusk)
18        let findTime = time.split(":")[0];
19        findTime = findTime.substring(11, findTime.length + 2);
20
21        //     Find the current temp
22        const currentTemp = periods.temperature + "°";
23
24        //     shortForecast is the quick summary of the conditions to expect
25        let conditions = periods.shortForecast;
26        let conditionswind = periods.windSpeed + " " + periods.windDirection;
27        let conditionsResult;
28        console.log(data.properties.periods[0]);
29
30
31        // The if/else code block below looks for keywords and then applies FontAwesome icons to associated keywords. Using indexOf because you can't tell when weather.gov will use 'Light showers' compared to 'Scattered showers', etc... So if the short forecast contains a keyword, the code applies to the conditions variable
32        if (conditions.indexOf("Sunny") > -1) {
33            conditionsResult = '<i class="fas fa-sun"></i>';
34        } else if (conditions.indexOf("Cloudy") > -1) {
35            conditionsResult = '<i class="fas fa-cloud"></i>';
36        } else if (
37        conditions.indexOf("Thunderstorms") > -1 ||
38        conditions.indexOf("T-storms") > -1
39        ) {
40            conditionsResult = '<i class="fas fa-cloud-showers-heavy"></i>';
41        } else if (
42        conditions.indexOf("Showers") > -1 ||
43        conditions.indexOf("Rain") > -1
44        ) {
45            conditionsResult = '<i class="fas fa-umbrella"></i>';
46        } else if (conditions.indexOf("Hurricane") > -1 ||
47        conditions.indexOf("Tropical Storm") > -1) {
48            conditionsResult = '<i class="fas fa-hurricane"></i>';
49        } else if (conditions.indexOf("Snow") > -1) {
50            conditionsResult = '<i class="fas fa-snowflake"></i>'
51        } else if (conditions.indexOf("Clear") > -1 && findTime >= 6) {
52            conditionsResult = '<i class="fas fa-sun"></i>';
53        } else if (conditions.indexOf("Clear") > -1 && findTime <= 18) {
54            conditionsResult = '<i class="fas fa-moon"></i>';
55        } else if (conditions.indexOf("Overcast") > -1) {
56            conditionsResult = '<i class="fas fa-cloud-sun"></i>';
57        } else {
58            conditionsResult = '<i class="fas fa-cloud"></i>';
59        }
60
61        //     Print the temp and conditions icon
62        jQuery(".temp").html(currentTemp + "F");
63        jQuery(".condition").html(conditionsResult);
64        jQuery(".conditiontext").html(conditions);
65        if (conditionswind.indexOf("null") === -1) {
66            jQuery(".conditionwind").html(" / Wind: " + conditionswind);
67        }
68
69        // Double check your work :)
70        console.log(
71        "Currently the temperature is " + currentTemp + " and " + conditions + "."
72        );
73    });
74}
75
76showPosition();