Minimalistic Design + Icons + Dynamic Color. What do you think?

My weather app pen
WeatherApp

Please note : The “Celsius icon” (on top) & “Details” bar are clickable.
Background-Color:
1. Morning/Evening-> Shade of Orange
2. Clear Day -> Shade of White
3. Rainy/Cloudy Day -> Shade of Grey
4. Night -> Shade of Black

It took me some time to work with rich set of Icons.

But to me, what has come out is worth the effort.

There is still scope for improvement.

I am waiting for people’s reviews & suggestions.
:alarm_clock: :hourglass_flowing_sand:

PS : Open it on Mozilla / Safari / etc…, but not on CHROME. few geolocation functions have been deprecated on Chrome for few URLs. Please bear with me, I am looking for possible fix

1 Like

Well, it works and it has a nice design, so good job! You might want to try to make the background “fit” better, now you can see where the background is repeated.

I get the following error message in my console with Windows 10 Chrome:

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 https://goo.gl/rStTGz for more details.

The image resolution is 1280 x 656.

Tried using CSS property -> background-size : cover | contain | 100%
but due to its resolution, the image view is not uniform on changing window size.

The default setting appears to be the best among all the possibilities that I know of.

I would be great if you can help me fix the image sizing problem, so that it fits the entire screen.

@ZackWard,

I too got same error in Chrome, seems that it has been recently introduced.

do you know any possible fix?

Meanwhile try this on another browser.

@ZackWard,
As a fallback, I have defaulted the API call to fetch record for London.

So, now Users will see a pop up alert on Browsers that have such security restrictions telling them about limited functionality, and London’s current weather data on the page.

The issue here isn’t deprecated APIs, it’s cross origin and SSL restrictions. In order to use geolocation in Chrome (and now, Safari), your app must be served via a secure connection, ie https://codepen.io/mritzi/pen/yavYjz?editors=1010. The catch here is that if you are connected to your app securely, then your app must also make secure connections. So, http://api.openweathermap.org/ will not work. You must either use a different weather service that will offer a secure connection, or use an HTTPS proxy like https://crossorigin.me.

In full, that would be:
https://crossorigin.me/http://api.openweathermap.org...

1 Like

Also, not to throw a wet blanket on your efforts to get detailed icons working, the WeatherIcons project already has a mapping to OpenWeather’s status codes. All you need to do is add a class of wi-owm- + curWeather.weather[0].id. BUT the way you did it yourself is pretty stellar :thumbsup:

Looking great, though functionally I would like to type in my location and press enter than use the built in geolaction. The background image fits in really well

you might try adding background-attachment: fixed along with background-size: cover and see if that fixes the background issues

1 Like

@gracenut solution fixes it.

Many thanks @gracenut for the fix.

@Lee182,

Added search functionality in part.

Though it throws new set of challenges, but working for now (overlooked a few fine things).

1 Like

@PortableStick,
Actually I am sourcing these icons from jsdelivr CDN, The version that is hosted there doesn’t support new API specific classes. It also doesn’t has class definitions for recently added icons even.
That’s why I have to struggle a bit to make icons work.

Any idea on how to put latest icon files on codepen (without CDN), or any other CDN which hosts latest versions?

Maybe try

https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css

from here.

1 Like

I love it! Good job!

1 Like

It’s great the way I see it in Chrome. The colors are not those you describe, but tones of green. In Firefox the data doesn’t load.

Hi @20learncode16,

Its strange that the app is not working on firefox for you. I hope you have the latest version.
(Please share screenshots, if possible. Any error message from developer console would be even more helpful)

About the color,
The color scheme is in reference to the center block, that holds data. Color will change only here.

The entire body has a background image that is green in color, that will remain unchanged.

Hope this helps.

Many Thanks for you message.

Hi,
I have the latest version of Firefox so I’m not sure why is loading only the background page. However, it’s all right in Chrome, as everything is loaded and it looks great.

I was planning a switch to darksky.net’s API. You saved my time, all I had to do was append https://crossorigin.me… Thanks a lot :slight_smile: .