Weather project: how to change CSS depending on different forecasts?

I created the cloud below with just CSS, and I would like to make one of other weather symbols. Is it possible to switch between the CSS of a symbol I create depending on the forecast? And if so, can you lead me in the right direction of how to acheive it?

I think the best way to do that would be to create a separate css class for each of the different symbols and then use jQuery to change classes whenever necessary, by using the .removeClass() and .addClass() functions.

2 Likes

Would you recommend using a switch or if/else statements for this?

I realized it’s actually difficult to test if the different scenarios actually work, since it depends on real-time weather results. For example, I can’t test to see if the given symbol for “sunny” displays when it’s sunny if the location I’m in has rainy weather… Is there a way around this?

You could try doing something similar to what I did. If the user doesn’t allow the browser to read their location, a bootstrap modal pops up to allow them to manually enter coordinates. That way they can actually check the weather for any location in the world, if they have the latitude and longitude. I was in a similar situation as you, because I coded my wallpaper to change depending on the weather. I checked that my function was working by checking the weather for different cities, and then googling the location of the city with the kind of weather that I was looking for. It worked perfectly for me. Here’s a link to my weather app:

Feel free to look through my code to try and find what you need. If you have question, let me know :wink:

(You probably will because I don’t really comment my code. I’m too lazy :sleepy:)