angusgrant/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sparrow Photography</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>

		<nav class="nav">
			<a class="logo" href="index.html"><strong>Sparrow Photography</strong></a>
		</nav>

		<h1>Sparrow Photography</h1>

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


		<footer>
			<p><em>Photos by Jack Sparrow. All rights reserved.</em></p>
		</footer>


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

## photo.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sparrow Photography</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">

	</head>
	<body>

		<nav class="nav">
			<a class="logo" href="index.html"><strong>Sparrow Photography</strong></a> &gt; Photo Home
		</nav>


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


		<footer>
			<p><em>Photos by Jack Sparrow. All rights reserved.</em></p>
		</footer>

        <script src="scripts.js"></script>

	</body>
</html>

## scripts.js
        function renderListingPage(data) {
            const appendPoint = document.getElementById("app");

            if (!data || !data.length) {
                appendPoint.innerHTML = '<p>There are no available photos at this time. Please try again later. Sorry!</p>';
            } else {

                const photosContainer = document.createElement("nav");
                    photosContainer.id = "photos";
                let html = "";


                    data.forEach(photo => {
                        html += `<a href="photo.html?id=${encodeURIComponent(photo.id)}">
                            <img src="${photo.url}" alt="${photo.description}">
                        </a>`;
                    });
                photosContainer.innerHTML= html;
                    appendPoint.innerHTML =photosContainer.outerHTML;
            }
        }

        function renderItemPage(data, itemId) {
            const appendPoint = document.getElementById("app");

            const matchingPhotoObj = data.find(function(item) {
                return item.id === itemId;
            });

            if (!data || !data.length || !matchingPhotoObj || matchingPhotoObj.length) {
                appendPoint.innerHTML = '<p>There are no available photos at this time. Please try again later. Sorry!</p>';
            } else {
                let html = `
                    <h1>${matchingPhotoObj.name}</h1>
                    <p>${matchingPhotoObj.description}</p>

                    <img src="${matchingPhotoObj.url}" alt="${matchingPhotoObj.description}">

                    ${matchingPhotoObj.name} - &dollar;${matchingPhotoObj.price}
                    `;


                    appendPoint.innerHTML = html;

            }

        }


    async function getData() {
        try {
            const response = await fetch('https://vanillajsacademy.com/api/photos.json');
            const data = await response.json();

            renderHTML(data);

            sessionStorage.setItem("photos", JSON.stringify(data));


        } catch (error) {
            console.error(error);
        }
    }

    if (sessionStorage.getItem("photos") && sessionStorage.getItem("photos").length > 0){
        //get from session storage if exists
        renderHTML(JSON.parse(sessionStorage.getItem("photos")));
    } else {
        //otherwise do an ajax request to get the data from the api.
        getData();
    }

    function renderHTML(data){
        const pageId = new URL(window.location.href).searchParams.get('id');
        if (pageId) {
            renderItemPage(data, pageId);
        } else {
            renderListingPage(data);
        }
    }


## styles.css
body {
	margin: 0 auto;
	max-width: 50em;
	width: 88%;
}


/**
 * Grid Layout
 */

@media (min-width: 20em) {
	#photos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 2em;
		grid-row-gap: 2em;
	}
}

@media (min-width: 32em) {
	#photos {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 42em) {
	#photos {
		grid-template-columns: repeat(4, 1fr);
	}
}


/**
 * Nav Menu
 */

.nav {
	padding: 1em 0;
}

.nav a {
	text-decoration: none;
}

.nav a:focus,
.nav a:hover {
	text-decoration: underline;
}


/**
 * Footer
 */

footer {
	border-top: 1px solid #e5e5e5;
	margin-top: 5em;
}


/**
 * Responsive images
 */

img {
	height: auto;
	max-width: 100%;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Sparrow Photography</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>

	<nav class="nav">
	<a class="logo" href="index.html"><strong>Sparrow Photography</strong></a>
	</nav>

	<h1>Sparrow Photography</h1>

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


	<footer>
	<p><em>Photos by Jack Sparrow. All rights reserved.</em></p>
	</footer>


	<script src="scripts.js"></script>
	</body>
	</html>
	function renderListingPage(data) {
	const appendPoint = document.getElementById("app");

	if (!data \|\| !data.length) {
	appendPoint.innerHTML = '<p>There are no available photos at this time. Please try again later. Sorry!</p>';
	} else {

	const photosContainer = document.createElement("nav");
	photosContainer.id = "photos";
	let html = "";


	data.forEach(photo => {
	html += `<a href="photo.html?id=${encodeURIComponent(photo.id)}">
	<img src="${photo.url}" alt="${photo.description}">
	</a>`;
	});
	photosContainer.innerHTML= html;
	appendPoint.innerHTML =photosContainer.outerHTML;
	}
	}

	function renderItemPage(data, itemId) {
	const appendPoint = document.getElementById("app");

	const matchingPhotoObj = data.find(function(item) {
	return item.id === itemId;
	});

	if (!data \|\| !data.length \|\| !matchingPhotoObj \|\| matchingPhotoObj.length) {
	appendPoint.innerHTML = '<p>There are no available photos at this time. Please try again later. Sorry!</p>';
	} else {
	let html = `
	<h1>${matchingPhotoObj.name}</h1>
	<p>${matchingPhotoObj.description}</p>

	<img src="${matchingPhotoObj.url}" alt="${matchingPhotoObj.description}">

	${matchingPhotoObj.name} - &dollar;${matchingPhotoObj.price}
	`;



	appendPoint.innerHTML = html;

	}

	}


	async function getData() {
	try {
	const response = await fetch('https://vanillajsacademy.com/api/photos.json');
	const data = await response.json();

	renderHTML(data);

	sessionStorage.setItem("photos", JSON.stringify(data));


	} catch (error) {
	console.error(error);
	}
	}

	if (sessionStorage.getItem("photos") && sessionStorage.getItem("photos").length > 0){
	//get from session storage if exists
	renderHTML(JSON.parse(sessionStorage.getItem("photos")));
	} else {
	//otherwise do an ajax request to get the data from the api.
	getData();
	}

	function renderHTML(data){
	const pageId = new URL(window.location.href).searchParams.get('id');
	if (pageId) {
	renderItemPage(data, pageId);
	} else {
	renderListingPage(data);
	}
	}
	body {
	margin: 0 auto;
	max-width: 50em;
	width: 88%;
	}


	/**
	* Grid Layout
	*/

	@media (min-width: 20em) {
	#photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 2em;
	grid-row-gap: 2em;
	}
	}

	@media (min-width: 32em) {
	#photos {
	grid-template-columns: repeat(3, 1fr);
	}
	}

	@media (min-width: 42em) {
	#photos {
	grid-template-columns: repeat(4, 1fr);
	}
	}


	/**
	* Nav Menu
	*/

	.nav {
	padding: 1em 0;
	}

	.nav a {
	text-decoration: none;
	}

	.nav a:focus,
	.nav a:hover {
	text-decoration: underline;
	}


	/**
	* Footer
	*/

	footer {
	border-top: 1px solid #e5e5e5;
	margin-top: 5em;
	}


	/**
	* Responsive images
	*/

	img {
	height: auto;
	max-width: 100%;
	}