examples/index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Data Structures 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-3" class="mdl-layout__tab">03</a>
        <a href="#scroll-tab-4" class="mdl-layout__tab">04</a>
        <a href="#scroll-tab-5" class="mdl-layout__tab">05</a>
        <a href="#scroll-tab-6" 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/09-ObjectOrientedJS.html">09-Object Oriented JS</a>
              <a class="mdl-navigation__link" href="chapter01/10-ES2015-ES6-letconst.html">10-ES2015-letconst</a>
              <a class="mdl-navigation__link" href="chapter01/11-ES2015-ES6-variableScope.html">11-ES2015-variableScope</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">
          <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="chapter02/01-Introduction.html">01-Introduction</a>
                <a class="mdl-navigation__link" href="chapter02/02-CreatingAndInitialingArrays.html">02-Creating Initialing Arrays</a>
                <a class="mdl-navigation__link" href="chapter02/03-AddingRemovingElements.html">03-Adding Removing Elements</a>
                <a class="mdl-navigation__link" href="chapter02/04-TwoDimensionalMultiDimensional.html">04-Two Dimensional - MultiDimensional</a>
                <a class="mdl-navigation__link" href="chapter02/05-ArrayMethods.html">05-ArrayMethods</a>
                <a class="mdl-navigation__link" href="chapter02/06-ES6Methods.html">06-ES2015+ Methods</a>
                <a class="mdl-navigation__link" href="chapter02/07-Sorting.html">07-Sorting</a>
                <a class="mdl-navigation__link" href="chapter02/08-Searching.html">08-Searching</a>
                <a class="mdl-navigation__link" href="chapter02/09-TypedArrays.html">09-TypedArrays</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-3">
        <div class="page-content">
          <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="chapter03/01-Stack.html">01-Stack</a>
                <a class="mdl-navigation__link" href="chapter03/02-BalancedSymbols.html">02-BalancedSymbols</a>
                <a class="mdl-navigation__link" href="chapter03/03-DecimalToBinary.html">03-DecimalToBinary</a>
                <a class="mdl-navigation__link" href="chapter03/04-TowerOfHanoi.html">04-TowerOfHanoi</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-4">
        <div class="page-content">
          <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="chapter04/01-Queue.html">01-Queue</a>
                <a class="mdl-navigation__link" href="chapter04/02-Deque.html">02-Deque</a>
                <a class="mdl-navigation__link" href="chapter04/03-HotPotato.html">03-HotPotato</a>
                <a class="mdl-navigation__link" href="chapter04/04-PalindromeChecker.html">04-PalindromeChecker</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-5">
        <div class="page-content">
          <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="chapter05/01-LinkedList.html">01-LinkedList</a>
                <a class="mdl-navigation__link" href="chapter05/02-DoublyLinkedList.html">02-DoublyLinkedList</a>
                <a class="mdl-navigation__link" href="chapter05/03-CircularLinkedList.html">03-CircularLinkedList</a>
                <a class="mdl-navigation__link" href="chapter05/04-SortedLinkedList.html">04-SortedLinkedList</a>
                <a class="mdl-navigation__link" href="chapter05/05-StackLinkedList.html">05-StackLinkedList</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-6">
        <div class="page-content">
          Soon.
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-7">
        <div class="page-content">
          Soon.
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-8">
        <div class="page-content">
          Soon.
        </div>
      </section>
    </main>
  </div>
</body>

</html>