Skip to content

Instantly share code, notes, and snippets.

@angusgrant

angusgrant/index.html

Last active February 6, 2023 18:53
Show Gist options
  • Save angusgrant/cfd50f8ebf3a1d2e4dd2f2e01f6d8aad to your computer and use it in GitHub Desktop.
Save angusgrant/cfd50f8ebf3a1d2e4dd2f2e01f6d8aad to your computer and use it in GitHub Desktop.
Download ZIP
week1 task1 Web Apps
Raw
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>
Raw
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>
Raw
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>
<img src="${matchingPhotoObj.url}" alt="${matchingPhotoObj.description}">`;
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);
}
}
Raw
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%;
}
Raw
week1_task1_web_apps.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...
async function getData() {
try {
const response = await fetch('https://vanillajsacademy.com/api/photos.json');
const data = await response.json();
const appendPoint = document.getElementById("app");
const photosContainer = document.createElement("div");
photosContainer.classList.add('photo');
photosContainer.id = "photos";
let html = "";
data.forEach(photo => {
html += `<div>
<img src="${photo.url}" alt="${photo.description}">
</div>`;
});
photosContainer.innerHTML= html;
appendPoint.innerHTML =photosContainer.outerHTML;
} catch (error) {
console.error(error);
}
}
getData();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment