the Fetch Request

1
2
3
4
5
6
fetch('<URL-to-the-resource-that-is-being-requested>');
fetch('https://api.unsplash.com/search/photos?page=1&query=flowers')
 
fetch('https://api.unsplash.com/search/photos?page=1&query=${searchedForText}', {
    method: 'POST'
});

[javascriit]
fetch(‘https://api.unsplash.com/search/photos?page=1&query${searchedForText}’, {
headers: {
Authorization: ‘Client-ID abc123’
}
}).then(function(response){
debugger;
});[/javascript]

Since the Unsplash API we’re using will return JSON to us, we just need to call .json() on the response variable.

1
2
3
4
5
6
7
fetch('https://api.unsplash.com/search/photos?page=1&query${searchedForText}', {
    headers: {
        Authorization: 'Client-ID abc123'
    }  
}).then(function(response){
    return response.json();
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function addImage(data){
    let htmlContent = '';
    const firstImage = data.result[0];
 
    if (firstImage){
        htmlContent = '<figure>
            <img src="${firstImage.urls.small}" alt="${searchedForText}">
            <figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
            </figure>
    } else {
        htmlContent = 'Unfortunately, no image was returned for your search.'
    }
 
    responseContainer.insertAdjacentHTML('afterbegin', htmlContent);
}