Changing the background display based on the user's location

Ask the community
,
1

Hello,

I’m a beginner coder so I hope that what I explain below makes some sense (forgive me if it doesn’t), but I would like to have the background change based on the user’s location.

For example, if the user is located in London, England and the current weather there is that it is snowing, I would like for the background to be animated with snow drifting downward. Likewise, if there is someone living in Sydney, Australia where it might be currently storming, I would like for the background to show thunder and lightning.

I have found JavaScript templates of code and right now I believe that the way to approach this would be to set up the code in a back-end module. It may involve integrating the Wix API with third-party weather API using a key. Once the back-end code is finalized, I’m thinking to use Wix fetch so that the code works in the front-end.

The problem that I have is the pre-defined name spaces (??). Based on the Wix API, the terms in the template code that I would want to use are not predefined and they error out.

My other problem is that even if I get this set up in the back-end module, how would I really call it in the front-end code? Using “.background.src =” will only apply to strings so I doubt this is the way. I am guessing my best bet would be to use Wix-fetch but I’m not sure.

Is what I would like to achieve even possible? If yes, do I have the right approach and what am I missing?

Hashtags: #background #Fetch api #Wixfetch #display

Thank you in advance!

2

You can use the Yahoo weather api and It’ll return the current weather, like “cloudy” then you use a Switch or an I F statement to display the proper image. Something like this

let currentWeather = FetchedItem.weather //cloudy
if (currentWeather === 'cloudy') {$w('#myImage').src=myImageSrc;
//Where myImageSrc is the src of the cloudy weather matching image
3

Thank You!! I feel as though I can definitely build from this. I just have one other question if you don’t mind. Is there any way to have the image as not static (besides using a GIF URL as the source)?