<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <div id="main" class="page active">
      <h1>Forside</h1>
      Alle og en hver ser ut til å ha en formening om bompenger i disse dager.
      Jeg har skal ikke stille meg på en side i denne saken, men tenker jeg kan
      bidra i saken med å samle informasjon om de bumpengene vi har i Norge i
      dag og dere takster.
      <br />
      <br />
      <a href="#toll" class="click-me">Oversikt over bompenger med takster</a>
      <br />
      <br />
      <a href="#denne-siden-finnes-ikke" class="click-me">404</a>
    </div>
    <div id="toll" class="page">
      <a href="#main">&lt; Tilbake til forsiden</a>
      <h1>Bompenger</h1>
      <div id="tollStations"></div>
    </div>
    <div id="page404" class="page">
      <h1>404</h1>
      <h2 id="page404-error"></h2>
    </div>
    <script src="main.js"></script>
  </body>
</html>
body {
  background: #eee;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.click-me {
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  background: orange;
  color: black;
  text-decoration: none;
  box-shadow: 5px 5px grey;

  margin: 0 0 3px 0;
}

.click-me:hover {
  margin: 3px 0 0 3px;
  box-shadow: 2px 2px grey;
}

.toll {
  border: 1px solid grey;
  box-shadow: 5px 5px grey;
  border-radius: 10px;
  margin: 50px 30px;
  padding: 10px;
}

.toll:hover {
  transition-duration: 0.5s;
  transform: scale(1.1);
}
// Define html element references
PAGES = {};

// Main page
PAGES.main = {};
PAGES.main.page = document.querySelector("#main");

// Some other page
PAGES.toll = {};
PAGES.toll.page = document.querySelector("#toll");
PAGES.toll.content = document.querySelector("#tollStations");

// 404
PAGES.page404 = {};
PAGES.page404.page = document.querySelector("#page404");
PAGES.page404.error = document.querySelector("#page404-error");

// Code to run for each page
pageFunctions = {};

// Custom code to run when showing the 404 page
pageFunctions.page404 = function() {
  PAGES.page404.error.innerHTML = `Page ${location.hash.substr(1)} not found!`;
};

pageFunctions.toll = function() {
  fetch("https://hotell.difi.no/api/json/vegvesen/bomstasjoner?")
    .then(response => response.json())
    .then(json => {
      PAGES.toll.content.innerHTML = json.entries.reduce((acc, toll) => {
        return (acc += tollInfo(toll));
      }, "");
    });
};

function tollInfo(toll) {
  return `
  <div class="toll">
  <h2>${toll.navn}</h2>
  <h3>Takst stor bil: ${toll.takst_stor_bil}</h3>
  <h3>Takst liten bil: ${toll.takst_liten_bil}</h3>
  </div>
  `;
}

var path;

// Navigation
function navigate() {
  // Get the url path in a easy
  path = location.hash
    .substr(1)
    .toLowerCase()
    .split("/");

  // Find what page to show
  var currentPage = path[0];
  if (!PAGES.hasOwnProperty(currentPage)) {
    if (path[0] === "") {
      currentPage = "main";
    } else {
      currentPage = "page404";
    }
  }

  // Hide the previous active page
  for (var page in PAGES) {
    if (PAGES.hasOwnProperty(page)) {
      PAGES[page].page.classList.remove("active");
    }
  }

  // Show the active page and run its custom script
  PAGES[currentPage].page.classList.add("active");

  //Run custom page code if it exists
  if (pageFunctions.hasOwnProperty(currentPage)) {
    pageFunctions[currentPage]();
  }
}

// First time loading the page
navigate();

window.onhashchange = navigate;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.