Klimate - My Weather App

This lab was so much fun. I took it a little further and tried to do something a little different and really try and make it unique. Let me know what you think!

I used the API that Code Camp recommended then passed that information to google’s geo-locating API to get a more consistent and accurate location of where the person is. Then I have a switch statement in JavaScript that loads a background video depending on the weather where the individual is located. (You may see the different background images if you go in the JavaScript code and manually change the “weather” variable to either (“rain”, “thunderstorm”, “clouds”, “clear”, “drizzle”, or “snow”)).

Link to my project

Resources used to make this project:

  1. Navigator.geolocation
  2. Google API
  3. Coolors for flat colors scheme
  4. Hex to RGBA Converter
  5. Font Awesome Icons
  6. Backgrounds from Giphy
  7. Catamaran Font

If anyone finds any bugs or has any issues, please let me know so I can try and figure it out. Some features I am thinking about adding if I have spare time are :

  1. Menu for more weather info on click
  2. Background image search utilizing an image API, to search by location and weather type.

Thanks everyone for checking it out.

Daniel Bailey

1 Like

I really like how the page is simple, clear and neat. It really makes you want to bookmark it as a starting page when you open the browser :slight_smile:

1 Like


It looks nice!

Altough it doesn’t load on my phone (samsonung - chrome or samsung browser - it could be that is because i’m using my mobile network instead of wifi).

On both it hangs on “please wait while we load …”

1 Like

That’s always good to hear. Thanks man!

hmm that’s strange. It works on my phone. Where are you located?

Could it possible that you disabled the location services?

1 Like

That’s what I am thinking if he is on mobile.

That’s right , now you mention it… god damn sorry :slight_smile:
But it still doesn’t work after enabling it…must be my phone as it works for others;

1 Like

haha no problem man. Don’t worry about it. Let’s hope so

@DanielJBailey well, you could, if you find interesting, check if the location comes from the device and if not ( or as a secondary choice ) addinng the possibility to pick up a place explicitely. Also for that I think there is a public API feed.

1 Like

I really like it. Not only the functionality, which is the same to all of us who have created the project, but the design and the style that you gave it!

1 Like

Thanks I appreciate that @Dimitrios51 !