angusgrant/helperFunctions.js

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

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

            return data;

        } catch (error) {
            console.error(error);
            return [];
        }
    }

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

export default getPhotoData;

## 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 type="module">
            const appendPoint = document.getElementById("app");

            function renderListingPage(data) {

                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;
                }
            }
            import getPhotoData from './helperFunctions.js';
            getPhotoData().then(function(photos){
                renderListingPage(photos);
            });


        </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 type="module">
            const appendPoint = document.getElementById("app");
            function renderItemPage(data, itemId) {

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

                if (!data || !data.length) {
                    appendPoint.innerHTML = '<p>There are no available photo Data at this time. Please try again later. Sorry!</p>';
                } else if(!matchingPhotoObj) {
                    appendPoint.innerHTML = '<p>We had a problem identifying your photo was it deleted?</p>';
                } else {
                    let html = `
                        <h1>${matchingPhotoObj.name}</h1>
                        <p>${matchingPhotoObj.description}</p>

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

                         &dollar;${matchingPhotoObj.price}
                        `;

                        appendPoint.innerHTML = html;

                }

            }
            import getPhotoData from './helperFunctions.js';
            const pageId = new URL(window.location.href).searchParams.get('id');
            getPhotoData().then(function(photos){
                renderItemPage(photos, pageId);
            });

        </script>

	</body>
</html>

## 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%;
}
	async function getPhotoData() {
	async function getData() {
	try {
	const response = await fetch('https://vanillajsacademy.com/api/photos.json');
	const data = await response.json();

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

	return data;

	} catch (error) {
	console.error(error);
	return [];
	}
	}

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

	export default getPhotoData;
	<!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 type="module">
	const appendPoint = document.getElementById("app");

	function renderListingPage(data) {

	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;
	}
	}
	import getPhotoData from './helperFunctions.js';
	getPhotoData().then(function(photos){
	renderListingPage(photos);
	});


	</script>
	</body>
	</html>
	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%;
	}