Untitled

<!DOCTYPE html>
<html>
  <head lang="en">
      <meta charset="UTF-8">
      <title>Grader Gater</title>
      <link rel="stylesheet" href="index.css">
      <script>
        let loggedin = false;
        function loadSession() {
          var pager = new Pager([
            new Page('login', 'login.html', true),
            new Page('home' , 'home.html'),
            new Page('test', 'test.html'),
            new Page('question', 'question.html'),
            new Page('about', 'about.html')
          ], this.loggedin);
          return pager;
        }
      </script>
  </head>
  <body onload="loadSession();">
  <div class="app">
    <header>
      <div class="nav"><p>Grader Gater</div>
      <div class="nav" id="nav-btn"><a href="#home">Home</a></div>
      <div class="nav" id="nav-btn"><a href="#about">About</a></div>
      <div class="nav" id="logout-btn" onclick="logout()" style="visibility: hidden;">Logout</div>
    </header>
    <aside></aside>

    <main id="main">
    <!-- UI Elements get appended here -->
    </main>
    <script src="js/page.js"></script>
    <script src="js/pager.js"></script>
    <script src="js/util.js"></script>
  </div>
  </body>
</html>


------ pager

class Pager {
    constructor(pages) {
        this.pages = pages;
        this.mainEl = document.querySelector('main');
        this.init();
  }

  init() {
    var p = this.pages;
    var scope = this;
        (function(scope, r) {
            window.addEventListener('hashchange', function (e) {
                scope.pageChanged(scope, p);
            // https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event
            });
        })(this, p);
        this.pageChanged(this, p);
  }

  changePage(pageName) {
        (function(scope) {
            var url = 'pages/' + pageName,
                xhttp = new XMLHttpRequest();// get xhttp from a file on the server
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    scope.mainEl.innerHTML = this.responseText;//set the html under <main>
                }
            };
            xhttp.open('GET', url, true);
            xhttp.send();
        })(this);//sends the string literal of the xhtml
    }

    pageChanged(scope, p){
        if (window.location.hash.length > 0) {//we're measuring the url
            for (var i = 0, length = p.length; i < length; i++) {
                var page = p[i];
                if(page.isActivePage(window.location.hash.substr(1))) {
                    scope.changePage(page.pageName);//url/#page
                }
            }
        } else {
            for (var i = 0, length = p.length; i < length; i++) {
                var page = p[i];
                if(page.default) {
                    scope.changePage(page.pageName);
                }
            }
        }
    }
};