witmin/fetch-api.js

## fetch-api.js
(function () {
    const form = document.querySelector('#search-form');
    const searchField = document.querySelector('#search-keyword');
    let searchedForText;
    const responseContainer = document.querySelector('#response-container');

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        responseContainer.innerHTML = '';
        searchedForText = searchField.value;

        fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
            headers: {
                // authorise with unsplash application ID:
                Authorization: 'Client-ID <insert unsplash application ID>'
            }
        })
            .then(response => response.json())
            .then(addImage)
            .catch(err => requestError(err, 'image'));


        fetch(`http://api.nytimes.com/svc/search/v2/articlesearch.json?q=${searchedForText}&api-key={apikey}`)
            .then(response => response.json())
            .then(addArticles)
            .catch(err => requestError(err, 'articles'));

    });

    function addImage(data) {
        let htmlContent = '';

        if (data && data.results && data.results.length > 1) {
            const firstImage = data.results[0];
            htmlContent = `<figure>
            <img src="${firstImage.urls.regular}" alt="${searchedForText}">
            <figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
        </figure>`;
        } else {
            htmlContent = '<div class="error-no-image">Unfortunately, no image was returned for your search.</div>'
        }

        responseContainer.insertAdjacentHTML('afterbegin', htmlContent);
    }

    function addArticles(data) {
        let htmlContent = '';
        console.log(data);

        if (data.response && data.response.docs && data.response.docs.length > 1) {
            const articles = data.response.docs;

            htmlContent = '<ul>' + articles.map(article => `<li class="article">
                    <h2><a href="${article.web_url}">${article.headline.main}</a></h2>
                    <p>${article.snippet}</p>
                </li>`
            ).join('') + '</ul>';
        } else {
            htmlContent = '<div class="error-no-articles">No articles available</div>';
        }

        responseContainer.insertAdjacentHTML('beforeend', htmlContent);
    }

    function requestError(e, part) {
        console.log(e);
        responseContainer.insertAdjacentHTML('beforeend', `<p class="network-warning">Oh no! There was an error making a request for the ${part}.</p>`);
    }

})();

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Make Asynchronous Requests</title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
</head>
<body>

    <header class="masthead">
        <h1>What are you interested in today?</h1>

        <div class="site-container">
            <form id="search-form" action="#">
                <label for="search-keyword" class="visuallyhidden">What are you interested in today?</label>
                <input id="search-keyword" type="text" name="search-keyword" placeholder="e.g. Android" required>
                <input id="submit-btn" type="submit" value="Submit">
            </form>
        </div>
    </header>

    <div class="site-container">
        <div id="response-container"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>
	(function () {
	const form = document.querySelector('#search-form');
	const searchField = document.querySelector('#search-keyword');
	let searchedForText;
	const responseContainer = document.querySelector('#response-container');

	form.addEventListener('submit', function (e) {
	e.preventDefault();
	responseContainer.innerHTML = '';
	searchedForText = searchField.value;

	fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`, {
	headers: {
	// authorise with unsplash application ID:
	Authorization: 'Client-ID <insert unsplash application ID>'
	}
	})
	.then(response => response.json())
	.then(addImage)
	.catch(err => requestError(err, 'image'));


	fetch(`http://api.nytimes.com/svc/search/v2/articlesearch.json?q=${searchedForText}&api-key={apikey}`)
	.then(response => response.json())
	.then(addArticles)
	.catch(err => requestError(err, 'articles'));

	});

	function addImage(data) {
	let htmlContent = '';

	if (data && data.results && data.results.length > 1) {
	const firstImage = data.results[0];
	htmlContent = `<figure>
	<img src="${firstImage.urls.regular}" alt="${searchedForText}">
	<figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
	</figure>`;
	} else {
	htmlContent = '<div class="error-no-image">Unfortunately, no image was returned for your search.</div>'
	}

	responseContainer.insertAdjacentHTML('afterbegin', htmlContent);
	}

	function addArticles(data) {
	let htmlContent = '';
	console.log(data);

	if (data.response && data.response.docs && data.response.docs.length > 1) {
	const articles = data.response.docs;

	htmlContent = '<ul>' + articles.map(article => `<li class="article">
	<h2><a href="${article.web_url}">${article.headline.main}</a></h2>
	<p>${article.snippet}</p>
	</li>`
	).join('') + '</ul>';
	} else {
	htmlContent = '<div class="error-no-articles">No articles available</div>';
	}

	responseContainer.insertAdjacentHTML('beforeend', htmlContent);
	}

	function requestError(e, part) {
	console.log(e);
	responseContainer.insertAdjacentHTML('beforeend', `<p class="network-warning">Oh no! There was an error making a request for the ${part}.</p>`);
	}

	})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Make Asynchronous Requests</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link href="../css/styles.css" rel="stylesheet">
	</head>
	<body>

	<header class="masthead">
	<h1>What are you interested in today?</h1>

	<div class="site-container">
	<form id="search-form" action="#">
	<label for="search-keyword" class="visuallyhidden">What are you interested in today?</label>
	<input id="search-keyword" type="text" name="search-keyword" placeholder="e.g. Android" required>
	<input id="submit-btn" type="submit" value="Submit">
	</form>
	</div>
	</header>

	<div class="site-container">
	<div id="response-container"></div>
	</div>

	<script src="app.js"></script>
	</body>
	</html>