Show the local weather Switch stmt to show images

1

I am having a lot of trouble getting my switch statement to display anything. I am not sure what I missing to get the switch to change the images.

2

Your assigning to conditions the function you want to use but you never call it, also at the top of the function you change img to all lowercase but keep capitals in your switch cases.

3

Thanks so much for your response. I fixed the upper case in my case statements. I do see I dont call img anywhere, but im not sure how I am supposed to be calling it in order to get it to display as the background. is it something like “background-image.img”? im having a hard time understaning how my javascript interacts with css and html in this scenario.

4

At line 25, you define a variable called conditions then at line 46 you assign it to a function that will change your background image, this is confusing and I would recommend creating a new variable for the function with a more suitable name. Next you would need to call that function with weatherData.weather[0].main as an argument. You did fine connecting javascript with the html and css.

$("#someElement").css("color", "red");

is changing #someElement’s css color to red.

CSS equivalent:

#someElement{
    color:red;
}

$("#someElement").html("Stuff here")

is changing #someElement’s html.
HTML equivalent:

<div id="someElement">Stuff Here</div>
5

Alright, so my CSS calls are good, Im still having trouble getting the function to work. I must be missing something simple. I’ve reworked this a dozen times or so with images still not showing up. here is I think as close as Ive come.

 function backgroundImg(cond) {
    cond = cond.toLowerCase();
      switch (cond) {
      case 'clouds':
        $('#background').css("background-image", "url(http://static1.uk.businessinsider.com/image/57855b6ddd0895a1588b4afa-480/clouds.jpg)");    
        break;
      case 'rain':
        $('#background').css("background-image", "url(https://i.ytimg.com/vi/J5OSRpRyl6g/maxresdefault.jpg)");
        break;
      case 'snow':
        $('#background').css("background-image", "url(https://i.ytimg.com/vi/ea1GMrjjJ1A/maxresdefault.jpg)");
        break;
      case 'clear':
        $('#background').css("background-image:", "url(http://www.richardhowe.com/wp-content/forum/uploads/2014/03/bright-sun.jpg)");
        break;
      case 'thunderstom':
       $('#background').css("background-image", "url(http://i.telegraph.co.uk/multimedia/archive/03432/stormSUM_3432625b.jpg)");
        break;
      default:
        $('#backgroud').css("background-image", "url(http://www.backdropsfantastic.com/backdrop_images/300%27s/EL-024-Weather-Map.jpg)");
        break;
    }
     
  }
   backgroundImg(weatherData.weather[0].main);
    ```
7

That did it. That got me through it! functionality is working. Thank you so much for the advice!! I appreciate your time. Now to make it look nice…