Random quote machine + random image background ....How?

1

I want add also an image generator for each new quote from these url https://unsplash.it/200/300/?random

$("#next").on(‘click’, function() {

$.ajaxSetup({cache:false});

$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=”, function(data) {
$(".quoteText").html(’"’ + data[0].content + ‘"’ + " ― " +data[0].title)
});

});

2

How about adding this inside the .getJSON callback?

fetch('https://unsplash.it/200/300/?random')
.then(response => response.blob())
.then(URL.createObjectURL)
.then(url => $('element-to-apply-background').css('background', `url(${url})`));

References:
MDN: Using Fetch
jQuery: .css()

1 Like
3

What is wrong?

$("#next").on(‘click’, function() {

$.ajaxSetup({cache:false});

$.getJSON(“https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=”, function(data) {
$(".quoteText").html(’"’ + data[0].content + ‘"’ + " ― " +data[0].title)
fetch(‘https://unsplash.it/200/300/?random’) .then(response => response.blob()) .then(URL.createObjectURL) .then(url => $(‘element-to-apply-background’).css(‘background’, url(${url})));
});
});

4

it pretty much works but element-to-apply-background is pretty much a placeholder in the sample code.
you need something else here.

5

It is working thanks alot <3