My LocalWeatherApp

Hello fellow code campers!

I’ve just finished my LocalWeatherApp.

You can view it on codepen or fork it from github.

The app is getting the data from openweathermap.org API and shows the user the following:

  • city and country flag
  • current weather
    • temperature
    • humidity
    • wind direction
    • weather description
    • weather icon
  • current date & time (based on user’s system)

Based on openweathermap’s data I’m changing the icon and the background picture.
Considering the mobile users, if their screen is less than 500px there’s no background image and there’s no extra bandwidth load. Also, at this point, the main div takes over the whole document’s width and height.

The user can click on a button to get the temperature in Celsius or Fahrenheit degrees.
Finally, to spice things up a little, when the user clicks on the title, there’s a flip animation and some credits appear on the “back”.

Icons: Weather Icons by Erik Flowers

See the Pen LocalWeatherApp by Yiannis K. (@koniklos) on CodePen.

4 Likes

Wow, this is impressive. The code itself is beautiful and easy to read. I also like the colors and background image(s).

Suggestions:

  • Add some text to describe some of the icons in the weather app.

  • Reformat the date and maybe reformat the time to a 12 hour clock.

  • Increase the text size. I recommend 18px minimum.

You did amazing job with this app. Keep up the great work bud! :smile_cat:

I think the design is the strongest part here.

I was surprised though, that (at least at my machine) the picture in the background loaded after about 10 seconds after the rest.

I’m happy to see that the font you used is monospace, or at least it behaves like it was. I remember I had a problem with finding a goodlooking font that won’t move when switching the units :smiley:

Anyway, I love the design.

Beautiful man. Personally wouldn’t change anything. Great job.

Thank you all for your kind words and suggestions. Much appreciated! :smile:

1 Like

The flag is a bit off the general style, but all the rest is looking fantastic!