nabily4e-dev/store-front.html

## store-front.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Sparrow Photography</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        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%;
        }
    </style>
</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>
        // * Code goes here...

        /*
        This code is for Sparrow Photography Studio ecommerce platform.
        It fetches photo data from the API and displays it on the page.
        */

        // Select the #app element to display the photos
        let app = document.querySelector("#app");

        // URL for fetching photos data from the API
        const API_URL = "https://vanillajsacademy.com/api/photos.json";

        // Function to generate photo HTML template
        function photoTemplate(photos) {
            // Function to generate photo HTML template
            if (!photos.length) {
                return `<p>There aren't any wizards yet.</p>`;
            }

            // Map through each photo and generate HTML template
            return `
                        <div id="photos">
                           ${photos
                               .map(function (photo) {
                                   return `
                                   <a href="${photo.url}">
                                    <div>
                                        <img src="${photo.url}">
                                        <p>${photo.name}</p>
                                    </div>
                                    </a>
                            `;
                               })
                               .join("")};
                        </div>
                            `;
        }

        // Async function to fetch data from the API
        async function fetchData() {
            try {
                const response = await fetch(API_URL);
                return await response.json();
            } catch (error) {
                console.error(error);
            }
        }

        // Main function to fetch data and display photos
        async function main() {
            const photos = await fetchData();
            app.innerHTML = photoTemplate(photos);
        }

        // Add an event listener to call main function when the DOM is loaded
        document.addEventListener("DOMContentLoaded", main);
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Sparrow Photography</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<style>
	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%;
	}
	</style>
	</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>
	// * Code goes here...

	/*
	This code is for Sparrow Photography Studio ecommerce platform.
	It fetches photo data from the API and displays it on the page.
	*/

	// Select the #app element to display the photos
	let app = document.querySelector("#app");

	// URL for fetching photos data from the API
	const API_URL = "https://vanillajsacademy.com/api/photos.json";

	// Function to generate photo HTML template
	function photoTemplate(photos) {
	// Function to generate photo HTML template
	if (!photos.length) {
	return `<p>There aren't any wizards yet.</p>`;
	}

	// Map through each photo and generate HTML template
	return `
	<div id="photos">
	${photos
	.map(function (photo) {
	return `
	<a href="${photo.url}">
	<div>
	<img src="${photo.url}">
	<p>${photo.name}</p>
	</div>
	</a>
	`;
	})
	.join("")};
	</div>
	`;
	}

	// Async function to fetch data from the API
	async function fetchData() {
	try {
	const response = await fetch(API_URL);
	return await response.json();
	} catch (error) {
	console.error(error);
	}
	}

	// Main function to fetch data and display photos
	async function main() {
	const photos = await fetchData();
	app.innerHTML = photoTemplate(photos);
	}

	// Add an event listener to call main function when the DOM is loaded
	document.addEventListener("DOMContentLoaded", main);
	</script>
	</body>

	</html>