examples/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>DataStructures and Algorithms with JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <base target="myFrame" />
  <style>
    .mdl-layout__content {
      padding: 10px;
    }
    .mdl-layout__drawer {
      width: 290px;
    }
    .iframe-padding {
      padding-left: 295px;
    }
    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
      color: rgb(103, 58, 183);
    }
  </style>
</head>

<body>
  <!-- Simple header with scrollable tabs. -->
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">Learning JavaScript Data Structures and Algorithms</span>
      </div>
      <!-- Chapters -->
      <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="#scroll-tab-1" class="mdl-layout__tab is-active">01</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">02</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">03</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">04</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">05</a>
        <a href="#scroll-tab-2" class="mdl-layout__tab">06</a>
      </div>
    </header>
    <main class="mdl-layout__content">
      <span class="iframe-padding">Please open the Developer Tools Console to see the output</span>
      <!-- Where the examples will be displayed -->
      <div id="myFrame" class="iframe-padding"><iframe name="myFrame" src=""></iframe></div>
      <!-- Where the examples will be displayed - end -->
      <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
        <div class="page-content mdl-layout--fixed-drawer">
          <div class="mdl-layout__drawer is-visible">
            <nav class="mdl-navigation">
              <a class="mdl-navigation__link" href="chapter01/01-HelloWorld.html">01-HelloWorld</a>
              <a class="mdl-navigation__link" href="chapter01/02-Variables.html" >02-Variables</a>
              <a class="mdl-navigation__link" href="chapter01/03-Operators.html" >03-Operators</a>
              <a class="mdl-navigation__link" href="chapter01/04-TruthyFalsy.html" >04-Truthy Falsy</a>
              <a class="mdl-navigation__link" href="chapter01/05-EqualsOperators.html" >05-Equals Operators</a>
              <a class="mdl-navigation__link" href="chapter01/06-ConditionalStatements.html" >06-Conditional Statements</a>
              <a class="mdl-navigation__link" href="chapter01/07-Loops.html" >07-Loops</a>
              <a class="mdl-navigation__link" href="chapter01/08-Functions.html" >08-Functions</a>
              <a class="mdl-navigation__link" href="chapter01/10-ObjectOrientedJS.html" >09-Object Oriented JS</a>
              <a class="mdl-navigation__link" href="chapter01/11-ES2015-ES6-letconst.html" >11-ES2015-letconst</a>
              <a class="mdl-navigation__link" href="chapter01/12-ES2015-ES6-StringTemplates.html" >12-ES2015-String Templates</a>
              <a class="mdl-navigation__link" href="chapter01/13-ES2015-ES6-ArrowFunctions.html" >13-ES2015-Arrow Functions</a>
              <a class="mdl-navigation__link" href="chapter01/14-ES2015-ES6-ParameterHandling.html" >14-ES2015-Parameter Handling</a>
              <a class="mdl-navigation__link" href="chapter01/15-ES2015-ES6-EnhancedObjectProperties.html" >15-ES2015-EnhancedObject Properties</a>
              <a class="mdl-navigation__link" href="chapter01/16-ES2015-ES6-Classes.html" >16-ES2015-Classes</a>
              <a class="mdl-navigation__link" href="chapter01/17-ES2015-ES6-Modules.html" >17-ES2015-Modules</a>
              <a class="mdl-navigation__link" href="chapter01/18-ES2016-ES7-ExponentiationOperator.html" >18-ES2016-ExponentiationOperator</a>
            </nav>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-2">
        <div class="page-content">
          Soon.
        </div>
      </section>
    </main>
  </div>
</body>

</html>