Add history api example (#236)

* Initial version * History API example * Set alt * Not cats * Unused param * Comments * Show page in URL bar * Add history-api example to README, also Prettier * Better names * Apply suggestions from code review Co-authored-by: Jean-Yves Perrier <[email protected]> * Update title for home page too --------- Co-authored-by: Jean-Yves Perrier <[email protected]>
mdn · Nov 17, 2023 · 4e65005 · 4e65005
1 parent 0265129
commit 4e65005
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 35 deletions.
diff --git a/README.md b/README.md
diff --git a/history-api/creatures/eagle.json b/history-api/creatures/eagle.json
@@ -0,0 +1,8 @@
+{
+  "description": "Bald eagles are not actually bald.",
+  "image": {
+    "src": "images/eagle.jpg",
+    "alt": "A bald eagle"
+  },
+  "name": "Eagle"
+}
diff --git a/history-api/creatures/turtle.json b/history-api/creatures/turtle.json
@@ -0,0 +1,8 @@
+{
+  "description": "Painted turtles have anti-freeze in their blood.",
+  "image": {
+    "src": "images/turtle.jpg",
+    "alt": "A painted turtle"
+  },
+  "name": "Turtle"
+}
diff --git a/history-api/creatures/vulture.json b/history-api/creatures/vulture.json
@@ -0,0 +1,8 @@
+{
+  "description": "Turkey vultures have a keen sense of smell.",
+  "image": {
+    "src": "images/vulture.jpg",
+    "alt": "A turkey vulture"
+  },
+  "name": "Vulture"
+}
diff --git a/history-api/images/eagle.jpg b/history-api/images/eagle.jpg
diff --git a/history-api/images/puffin.jpg b/history-api/images/puffin.jpg
diff --git a/history-api/images/turtle.jpg b/history-api/images/turtle.jpg
diff --git a/history-api/images/vulture.jpg b/history-api/images/vulture.jpg
diff --git a/history-api/index.html b/history-api/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Creatures: Home</title>
+    <script src="script.js" defer></script>
+  </head>
+
+  <body>
+    <ul class="nav">
+      <li><a href="/">Home</a></li>
+      <li><a href="eagle.html" data-creature="eagle">Eagle</a></li>
+      <li><a href="vulture.html" data-creature="vulture">Vulture</a></li>
+      <li><a href="turtle.html" data-creature="turtle">Turtle</a></li>
+    </ul>
+
+    <p id="description">Let's look at some creatures.</p>
+
+    <img id="photo" src="images/puffin.jpg" alt="A puffin" />
+  </body>
+</html>
diff --git a/history-api/script.js b/history-api/script.js
@@ -0,0 +1,53 @@
+// Update the page with the new content
+function displayContent(content) {
+  document.title = `Creatures: ${content.name}`;
+
+  const description = document.querySelector("#description");
+  description.textContent = content.description;
+
+  const photo = document.querySelector("#photo");
+  photo.setAttribute("src", content.image.src);
+  photo.setAttribute("alt", content.image.alt);
+}
+
+// When a link is clicked: update the page for that creature.
+// From a user perspective, this will look like the loading of a new page.
+
+document.addEventListener("click", async (event) => {
+  const creature = event.target.getAttribute("data-creature");
+  if (creature) {
+    event.preventDefault();
+    try {
+      const response = await fetch(`creatures/${creature}.json`);
+      const json = await response.json();
+      displayContent(json);
+      // Add a new entry to the history.
+      // This simulates loading a new page.
+      history.pushState(json, "", creature);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+});
+
+// Handle forward/back buttons
+window.addEventListener("popstate", (event) => {
+  // If a state has been provided, we have a "simulated" page
+  // and we update the current page.
+  if (event.state) {
+    // Simulate the loading of the previous page
+    displayContent(event.state);
+  }
+});
+
+// Create state on page load and replace the current history with it
+const image = document.querySelector("#photo");
+const initialState = {
+  description: document.querySelector("#description").textContent,
+  image: {
+    src: image.getAttribute("src"),
+    alt: image.getAttribute("alt"),
+  },
+  name: "Home",
+};
+history.replaceState(initialState, "", document.location.href);