Weather App ... kinda on steroids

Hi all!

Having posted my Highly Inappropriate Quote Generator recently, I decided to go ahead and tackle the Weather App next. It’s a pretty basic challenge that I thought had some room for fun in it.

I went a bit beyond what was called for the in the challenge - I wanted to try some things out and see if I could make something interesting. So in the end I put together a page which incorporates a gallery of cities from around the world - 10 of them in all, spread across the planet. You can click the cities to look up their current weather. Additionally, you can manually input a city name from anywhere in the world to see it’s weather as well. You’ll get a simple four day forecast and the ability to open up the city you are viewing in google maps.

The interface incorporates some very nice royalty free weather iconography I found during the research side of this. I’ll have to look up the artist’s name - I think they did a very nice job and deserve credit!

The color palette of the page changes based on the weather as well as the time of day. It’s a simple effect, but one I like. In particular, there are some nice gradients that appear near dawn and dusk - that was a tough nut to crack! It involved Javascript Dates, UTC offsets and date math. I almost gave up on it, but it seems to be working …

In the end, I ended up including 5 different, APIs I believe. (Part of what I wanted to do with this was work with a number of APIs to generate a final result).

1.) OpenWeather API for current weather and forecast.
2.) for Sunrise and sunset times by lat/long
3.) Google geocode for easily getting lat/long for locations by name.
4.) Google timezone for getting timezone offsets for lat/long so that I could display appropriate times (and calculate is_daylight/dawn/dusk values).
5.) And finally for ipaddress based location services which I put it at the last minute because Google now blocks location access from insecure connections. But that service works pretty poorly - they place me 120 miles from where I live! If you use Firefox, it still uses the internal geolocation API which is quite accurate.

I had some more plans for this little app, but I’m supposed to be working on other things, I think I’d better call this done.

I’d really appreciate a look and any feedback - I’ve tested this on FF and Chrome and on my Android phone and it seems to be working well.

You can see it at:

My Overachieving Little Weather App.




But there is an issue typing in a city name unless it’s already loaded the forecast for a city from the button – it’s invisible white text on a white background!

Thanks very much!

Good catch on that - when a location wasn’t first loaded there was no weather style attached to the page, but I had already styled the font color to white so it was invisible in the input.

There should be a better color for input text now.

That should only have come up if the page was unable to get your current location when you loaded it. Can you tell me how you were viewing the page? I tested it with Chrome and FF and worked out a solution for locations for both … but if it didn’t work for you, I’m curious as to why.

Thanks again for having a look!


Chrome on Mac OS El Capitan. Console shows no errors, either.

Whoops! Could you try that one more time when you get a second?

I actually was working on it and added a configuration flag to skip auto loading location/weather to shorten the feedback loop since the area I was working on didn’t need the info. I still had that set until just a moment ago.

The flag wasn’t there when you first viewed the page, but I put it in this afternoon.

Thanks so much!

Ah, at least now it throws up a warning. This is a recent Chrome thing, I think, surprised its not affecting you.

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See for more details.

You can maybe fall back to which is less accurate but at least works on insecure connections. That’s what I used on my own weather app. I was surprised that Chrome worked for you with Googles service, actually.

Hmmm … now that’s really strange. I just checked again with Chrome on my side and it worked here.

I knew about the issue with Chrome removing support for non HTTPS domains for services like location, and thought I had that licked.


accepts two callbacks: success and error.

My solution is to make the attempt using that service, but I pass it an error callback so that, if it fails, it will fall back to using via a GET request.

So far I’ve tested on two systems (W7 and W10) on Firefox and Chrome and my phone, which is an Android running Chrome, and this solution works.

I wonder if there is a build difference between MacOS and Windows versions of Chrome.

If anyone else is reading this thread, do you mind having a look and letting me know if it works?

At any rate, thanks for checking that out for me … I’m going to have to come up with another way to do it.

I prefer using the built in API because the location data is much more accurate. The free service puts me 120 miles from my actual location … which isn’t very useful for “local” weather. :slight_smile:


Ah! Interestingly enough my plugin uBlock Origin is the culprit. Probably should have checked that out first. App now puts me in California, though. Thats about 2000 miles off - I live in Indiana, ha.

Oh wow! That’s even further off than me … let me see if I can put in a different service and get a better result.

Unfortunately I’m sitting at a Starbucks at the moment and have a horrendous connection, so I’ll have to fiddle with it later.

Thanks again!