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_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>
        <a href="#scroll-tab-7" class="mdl-layout__tab">07</a>
        <a href="#scroll-tab-8" class="mdl-layout__tab">08</a>
        <a href="#scroll-tab-9" class="mdl-layout__tab">09</a>
        <a href="#scroll-tab-10" class="mdl-layout__tab">10</a>
        <a href="#scroll-tab-11" class="mdl-layout__tab">11</a>
        <a href="#scroll-tab-12" class="mdl-layout__tab">12</a>
        <a href="#scroll-tab-13" class="mdl-layout__tab">13</a>
        <a href="#scroll-tab-14" class="mdl-layout__tab">14</a>
        <a href="#scroll-tab-15" class="mdl-layout__tab">15</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_02/01-HelloWorld.html">01-HelloWorld</a>
              <a class="mdl-navigation__link" href="chapter01_02/02-Variables.html">02-Variables</a>
              <a class="mdl-navigation__link" href="chapter01_02/03-Operators.html">03-Operators</a>
              <a class="mdl-navigation__link" href="chapter01_02/04-TruthyFalsy.html">04-Truthy Falsy</a>
              <a class="mdl-navigation__link" href="chapter01_02/05-EqualsOperators.html">05-Equals Operators</a>
              <a class="mdl-navigation__link" href="chapter01_02/06-ConditionalStatements.html">06-Conditional Statements</a>
              <a class="mdl-navigation__link" href="chapter01_02/07-Loops.html">07-Loops</a>
              <a class="mdl-navigation__link" href="chapter01_02/08-Functions.html">08-Functions</a>
              <a class="mdl-navigation__link" href="chapter01_02/09-ObjectOrientedJS.html">09-Object Oriented JS</a>
              <a class="mdl-navigation__link" href="chapter01_02/10-ES2015-ES6-letconst.html">10-ES2015-letconst</a>
              <a class="mdl-navigation__link" href="chapter01_02/11-ES2015-ES6-variableScope.html">11-ES2015-variableScope</a>
              <a class="mdl-navigation__link" href="chapter01_02/12-ES2015-ES6-StringTemplates.html">12-ES2015-String Templates</a>
              <a class="mdl-navigation__link" href="chapter01_02/13-ES2015-ES6-ArrowFunctions.html">13-ES2015-Arrow Functions</a>
              <a class="mdl-navigation__link" href="chapter01_02/14-ES2015-ES6-ParameterHandling.html">14-ES2015-Parameter Handling</a>
              <a class="mdl-navigation__link" href="chapter01_02/15-ES2015-ES6-EnhancedObjectProperties.html">15-ES2015-EnhancedObject Properties</a>
              <a class="mdl-navigation__link" href="chapter01_02/16-ES2015-ES6-Classes.html">16-ES2015-Classes</a>
              <a class="mdl-navigation__link" href="chapter01_02/17-ES2015-ES6-Modules.html">17-ES2015-Modules</a>
              <a class="mdl-navigation__link" href="chapter01_02/18-ES2016-ES7-ExponentiationOperator.html">18-ES2016-ExponentiationOperator</a>
            </nav>
          </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-Introduction.html">01-Introduction</a>
                <a class="mdl-navigation__link" href="chapter03/02-CreatingAndInitialingArrays.html">02-Creating Initialing Arrays</a>
                <a class="mdl-navigation__link" href="chapter03/03-AddingRemovingElements.html">03-Adding Removing Elements</a>
                <a class="mdl-navigation__link" href="chapter03/04-TwoDimensionalMultiDimensional.html">04-Two Dimensional - MultiDimensional</a>
                <a class="mdl-navigation__link" href="chapter03/05-ArrayMethods.html">05-ArrayMethods</a>
                <a class="mdl-navigation__link" href="chapter03/06-ES2015Methods.html">06-ES2015+ Methods</a>
                <a class="mdl-navigation__link" href="chapter03/07-Sorting.html">07-Sorting</a>
                <a class="mdl-navigation__link" href="chapter03/08-Searching.html">08-Searching</a>
                <a class="mdl-navigation__link" href="chapter03/09-TypedArrays.html">09-TypedArrays</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-Stack.html">01-Stack</a>
                <a class="mdl-navigation__link" href="chapter04/02-BalancedSymbols.html">02-BalancedSymbols</a>
                <a class="mdl-navigation__link" href="chapter04/03-DecimalToBinary.html">03-DecimalToBinary</a>
                <a class="mdl-navigation__link" href="chapter04/04-TowerOfHanoi.html">04-TowerOfHanoi</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-Queue.html">01-Queue</a>
                <a class="mdl-navigation__link" href="chapter05/02-Deque.html">02-Deque</a>
                <a class="mdl-navigation__link" href="chapter05/03-HotPotato.html">03-HotPotato</a>
                <a class="mdl-navigation__link" href="chapter05/04-PalindromeChecker.html">04-PalindromeChecker</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-6">
        <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="chapter06/01-LinkedList.html">01-LinkedList</a>
                <a class="mdl-navigation__link" href="chapter06/02-DoublyLinkedList.html">02-DoublyLinkedList</a>
                <a class="mdl-navigation__link" href="chapter06/03-CircularLinkedList.html">03-CircularLinkedList</a>
                <a class="mdl-navigation__link" href="chapter06/04-SortedLinkedList.html">04-SortedLinkedList</a>
                <a class="mdl-navigation__link" href="chapter06/05-StackLinkedList.html">05-StackLinkedList</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-7">
        <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="chapter07/01-Set.html">01-Set</a>
                <a class="mdl-navigation__link" href="chapter07/02-SetOperations.html">02-SetOperations</a>
                <a class="mdl-navigation__link" href="chapter07/03-ES2015Set.html">03-ES2015Set</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-8">
        <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="chapter08/01-Dictionaries.html">01-Dictionaries</a>
                <a class="mdl-navigation__link" href="chapter08/02-HashTable.html">02-HashTable</a>
                <a class="mdl-navigation__link" href="chapter08/03-HashCollisionSeparateChaining.html">03-HashCollision SeparateChaining</a>
                <a class="mdl-navigation__link" href="chapter08/04-HashCollisionLinearProbing.html">04-HashCollision LinearProbing</a>
                <a class="mdl-navigation__link" href="chapter08/05-ES2015Map.html">05-ES2015 Map</a>
                <a class="mdl-navigation__link" href="chapter08/06-ES2015WeakMap.html">06-ES2015 WeakMap</a>
                <a class="mdl-navigation__link" href="chapter08/07-ES2015WeakSet.html">07-ES2015 WeakSet</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-9">
        <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="chapter09/01-IntroRecursion.html">01-IntroRecursion</a>
                <a class="mdl-navigation__link" href="chapter09/02-Factorial.html">02-Factorial</a>
                <a class="mdl-navigation__link" href="chapter09/03-JSCallStack.html">03-JSCallStack</a>
                <a class="mdl-navigation__link" href="chapter09/04-Fibonacci.html">04-Fibonacci</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-10">
          <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="chapter10/inorder.html">中序遍历  </a>
                <a class="mdl-navigation__link" href="chapter10/preorder.html">前序遍历  </a>
                <a class="mdl-navigation__link" href="chapter10/postorder.html">后序遍历  </a>
                </nav>
              </div>
            </div>
          </div>
        </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-11">
        <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="chapter11/01-UsingMinHeap.html">01-UsingMinHeap</a>
                <a class="mdl-navigation__link" href="chapter11/02-UsingMaxHeap.html">02-UsingMaxHeap</a>
                <a class="mdl-navigation__link" href="chapter11/03-HeapSort.html">03-HeapSort</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-12">
        <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="chapter12/01-UsingGraphs.html">01-UsingGraphs</a>
                <a class="mdl-navigation__link" href="chapter12/02-BFS.html">02-BFS</a>
                <a class="mdl-navigation__link" href="chapter12/03-DFS.html">03-DFS</a>
                <a class="mdl-navigation__link" href="chapter12/04-Dijkstra.html">04-Dijkstra</a>
                <a class="mdl-navigation__link" href="chapter12/05-Floyd-Warshall.html">05-Floyd-Warshall</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-13">
        <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="chapter13/01-BubbleSort.html">BubbleSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-SelectionSort.html">SelectionSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-InsertionSort.html">InsertionSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-MergeSort.html">MergeSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-QuickSort.html">QuickSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-CountingSort.html">CountingSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-BucketSort.html">BucketSort</a>
                  <a class="mdl-navigation__link" href="chapter13/01-RadixSort.html">RadixSort</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-14">
        <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="chapter14/01-DC-BinarySearch.html">01-DC-BinarySearch</a>
                <a class="mdl-navigation__link" href="chapter14/02-MinCoinChangeDP.html">02-MinCoinChangeDP</a>
                <a class="mdl-navigation__link" href="chapter14/03-MinCoinChangeGreedy.html">03-MinCoinChangeGreedy</a>
                <a class="mdl-navigation__link" href="chapter14/04-KnapsackProblemDP.html">04-KnapsackProblemDP</a>
                <a class="mdl-navigation__link" href="chapter14/05-KnapSackProblemRecursive.html">05-KnapSackProblemRecursive</a>
                <a class="mdl-navigation__link" href="chapter14/06-KnapSackProblemGreedy.html">06-KnapSackProblemGreedy</a>
                <a class="mdl-navigation__link" href="chapter14/07-LongestCommonSubsequenceDP.html">07-LongestCommonSubsequenceDP</a>
                <a class="mdl-navigation__link" href="chapter14/08-LongestCommonSubsequenceRecursive.html">08-LongestCommonSubsequenceRecursive</a>
                <a class="mdl-navigation__link" href="chapter14/09-MatrixChainMultiplicationDP.html">09-MatrixChainMultiplicationDP</a>
                <a class="mdl-navigation__link" href="chapter14/10-MatrixChainMultiplicationRecursive.html">10-MatrixChainMultiplicationRecursive</a>
                <a class="mdl-navigation__link" href="chapter14/11-RatInMaze.html">11-RatInMaze</a>
                <a class="mdl-navigation__link" href="chapter14/12-SudokuSolver.html">12-SudokuSolver</a>
                <a class="mdl-navigation__link" href="chapter14/13-IntroFunctionalProgramming.html">13-IntroFunctionalProgramming</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
      <section class="mdl-layout__tab-panel" id="scroll-tab-15">
        <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="chapter15/01-BigONotation.html">01-BigONotation</a>
                  <a class="mdl-navigation__link" href="chapter15/bigOChart/index.html" target="_blank">Chart</a>
              </nav>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</body>

</html>