stefan22
8/29/2017 - 10:24 PM

Adding a # sign prevents URL from refreshing the page and allows you to add html dynamically into a page without get or post requests That's

Adding a # sign prevents URL from refreshing the page and allows you to add html dynamically into a page without get or post requests That's essentially a single page app.

singlePageApp.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Frontend, single page app</title>
  </head>

  <body>
    <a href="#tiger">Tiger</a> |
    <a href="#lion">Lion</a> |
    <a href="#cheetah">Cheetah</a> |
    <a href="#leopard">Leopard</a>

    <div id="animal"></div>

    <script>
      makeUrlChangeShowAnimalForCurrentPage();

      function makeUrlChangeShowAnimalForCurrentPage() {
        window.addEventListener("hashchange", showAnimalForCurrentPage);
      };

      function showAnimalForCurrentPage() {
        showAnimal(getAnimalFromUrl(window.location));
      };

      function getAnimalFromUrl(location) {
        return location.hash.split("#")[1];
      };

      function showAnimal(animal) {
        document
          .getElementById("animal")
          .innerHTML = animal;
      };
    </script>
  </body>
</html>