I am incorporating the GIPHY API to showcase an image based on a query. The current code I have pulls the image successfully, but there is a recurring issue where the same GIF displays each time the website is visited until the query is altered. My aim is for the GIF to refresh after every visit or page reload to exhibit a new random image from the array, even if the query remains unchanged. As a newcomer to JavaScript, I am uncertain of how to tackle this issue, so any assistance would be greatly valued!
Below is the function I utilize to retrieve data:
function weather(position) {
var apiKey = '';
var url = '';
var data;
$.getJSON(url + apiKey + "/" + position.coords.latitude + "," + position.coords.longitude + "?callback=?", function(data) {
$('.js-current-item1').html(Math.floor(data.currently.temperature) + '°');
$('.js-current-item2').html(data.currently.summary);
gif(data.currently.icon)
city(position.coords.latitude + "," + position.coords.longitude)
});
}
Here is the function responsible for retrieving images from GIPHY:
function gif(status) {
var apiKey = '';
var url = 'http://api.giphy.com/v1/gifs/search?q=';
var query = status;
$.getJSON(url + query + apiKey, function(data) {
$('body').css('background-image', 'url(' + data.data[5].images.original.url + ')');
});
}