angusgrant/week4-lesson2.html

## week4-lesson2.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dragon Trainer Monthly</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}
		</style>
	</head>
	<body>

		<h1>Dragon Trainer Monthly</h1>

		<div id="app"></div>

		<script>
			const appendPoint = document.querySelector('#app');
            const jsonEndpoint = 'https://vanillajsacademy.com/api/dragons.json';
            const jsonEndpoint2 = 'https://vanillajsacademy.com/api/dragons-authors.json';

            //wrap in iife to fire function on page load.
            (async function getDragons () {
                try {
                    const response1 = await fetch(jsonEndpoint);
                    const response2 = await fetch(jsonEndpoint2);
                    if (!response1.ok){
                        throw response1.status;
                    } else if (!response2.ok){
                        throw response2.status;
                    }

                    const articleData = await response1.json();
                    const authorData =  await response2.json();

                    //combine into one object (articleData) required data
                    articleData.articles.forEach(function(art) {
                        authorData.authors.find(function (author) {
                            if(author.author === art.author)
                                art['authorBio'] = author.bio;
                        })
                    });

                    //check if some data exists
                    if (articleData.articles[0].title){

                        //send to render HTML function return HTML String
                        const htmlString = renderHTML(articleData)

                       //append to the DOM app element
                        appendPoint.innerHTML = htmlString;
                    }
                } catch (error) {
                    appendPoint.innerHTML = `<h2>Something went wrong!</h2>
                                               <p>This is the error returned from the API:</p>
                                               <p>${error}</p>`;
                }
            })();

            function renderHTML(dragonData) {
                let htmlToAppend = '';

                //append to template literal string use map function to augment the array of Articles
                htmlToAppend = `${dragonData.articles.map(function(art) {
                            // let authorBio = dragonData.authors.find(function (author) {
                            //                   if(author.author === art.author)
                            //                   return `<p><strong>Bio:</strong> ${author.bio}</p>`;
                            //             })
                            // not sure why above didnt work i get Obj[Object] back :-(
                            return `<article style="margin-bottom:10px">
                                        <h2>${art.title}</h2>
                                        <p><strong>By:</strong> ${art.author}<p>
                                        ${art.authorBio ? `<p><strong>Bio:</strong>  ${art.authorBio}</p>` : ''}
                                        <p>${art.article}</p>
                                        <time style="display:block;text-align:right;">${art.pubdate}</time>
                                    </article>`
                        }).join('')}`;

                        return htmlToAppend;
            }


		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dragon Trainer Monthly</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}
	</style>
	</head>
	<body>

	<h1>Dragon Trainer Monthly</h1>

	<div id="app"></div>

	<script>
	const appendPoint = document.querySelector('#app');
	const jsonEndpoint = 'https://vanillajsacademy.com/api/dragons.json';
	const jsonEndpoint2 = 'https://vanillajsacademy.com/api/dragons-authors.json';

	//wrap in iife to fire function on page load.
	(async function getDragons () {
	try {
	const response1 = await fetch(jsonEndpoint);
	const response2 = await fetch(jsonEndpoint2);
	if (!response1.ok){
	throw response1.status;
	} else if (!response2.ok){
	throw response2.status;
	}

	const articleData = await response1.json();
	const authorData = await response2.json();

	//combine into one object (articleData) required data
	articleData.articles.forEach(function(art) {
	authorData.authors.find(function (author) {
	if(author.author === art.author)
	art['authorBio'] = author.bio;
	})
	});

	//check if some data exists
	if (articleData.articles[0].title){

	//send to render HTML function return HTML String
	const htmlString = renderHTML(articleData)

	//append to the DOM app element
	appendPoint.innerHTML = htmlString;
	}
	} catch (error) {
	appendPoint.innerHTML = `<h2>Something went wrong!</h2>
	<p>This is the error returned from the API:</p>
	<p>${error}</p>`;
	}
	})();

	function renderHTML(dragonData) {
	let htmlToAppend = '';

	//append to template literal string use map function to augment the array of Articles
	htmlToAppend = `${dragonData.articles.map(function(art) {
	// let authorBio = dragonData.authors.find(function (author) {
	// if(author.author === art.author)
	// return `<p><strong>Bio:</strong> ${author.bio}</p>`;
	// })
	// not sure why above didnt work i get Obj[Object] back :-(
	return `<article style="margin-bottom:10px">
	<h2>${art.title}</h2>
	<p><strong>By:</strong> ${art.author}<p>
	${art.authorBio ? `<p><strong>Bio:</strong> ${art.authorBio}</p>` : ''}
	<p>${art.article}</p>
	<time style="display:block;text-align:right;">${art.pubdate}</time>
	</article>`
	}).join('')}`;

	return htmlToAppend;
	}


	</script>
	</body>
	</html>