Need help with Weather App- Background images

my Weather app is complete but the background images are not change dynamically based on current weather Can any one help me?
you can viewed it live here : [Weather App (incomplete)](https://codepen.io/Hooriahic/pen/aKodaM)

In JS, when you try to change the background (for example line 25 i nJS), just log the image background location to make sure the value is valid.

Also You may just set the background-image (backgroundImage in js) property, and once set the center, cover and other generic confs onces with CSS(if applicable)

For setting values for url() in background image in css by js, please place the url inside two single quotes, e.g.

$("body").css(
      "backgroundImage","url('" +weather[conditions] +"')"
    );

Or

$("body").css(
      "background-image","url('" +weather[conditions] +"')"
    );//maybe jquery goes this way!?

Also log the value of url image weather[conditions] to make sure the value is a valid url path

1 Like

i tried but it still not working

Don’t give up. This is simple to fix.

just log the value you set as background image using console.log() and check if the value is a valid url path.

Also note:(important)
This is possible that the domain provides the image, block(reject) the image request from you work/app. so how to find? easy. Once you log the value for image, and found it’s a valid value. Try to load the image directly by your browser to see if the image loads or not. if it’s okay by calling the image directly, and not working with your app, so this mean the domain you are trying to load the image blocks your app(mostly becasue of invalid origin, expected)

keep on great work, don’t give up. we all here to help each other, fix this issue.

hi @NULL_dev
the function is right and working but i don’t no how to call that function to show dynamically changing background based on weather conditions

You need to have some static resources(images) for each available weather condition. for example having a cimage of great clouds for cloudy days(everyone loves cloudy days). So the challenge here to find out the weather situation once you grab some data from the external API.

You need to read up the available results from the target API, to code it right. For example an API provider may identify the conditions using int numbers, while another one could set it as simple string. The key is the way API tells you data.

keep going on great work, like to see this project finished, working great.

1 Like