Skip to content

Commit 25ba9c8

Browse files
loianeloiane
committed
added main examples page
1 parent 445e382 commit 25ba9c8

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

‎examples/index.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>DataStructures and Algorithms with JavaScript</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
9+
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
10+
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
11+
<base target="myFrame" />
12+
<style>
13+
.mdl-layout__content {
14+
padding: 10px;
15+
}
16+
.mdl-layout__drawer {
17+
width: 290px;
18+
}
19+
.iframe-padding {
20+
padding-left: 295px;
21+
}
22+
.mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
23+
color: rgb(103, 58, 183);
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<!-- Simple header with scrollable tabs. -->
30+
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
31+
<header class="mdl-layout__header">
32+
<div class="mdl-layout__header-row">
33+
<!-- Title -->
34+
<span class="mdl-layout-title">Learning JavaScript Data Structures and Algorithms</span>
35+
</div>
36+
<!-- Chapters -->
37+
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
38+
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">01</a>
39+
<a href="#scroll-tab-2" class="mdl-layout__tab">02</a>
40+
<a href="#scroll-tab-2" class="mdl-layout__tab">03</a>
41+
<a href="#scroll-tab-2" class="mdl-layout__tab">04</a>
42+
<a href="#scroll-tab-2" class="mdl-layout__tab">05</a>
43+
<a href="#scroll-tab-2" class="mdl-layout__tab">06</a>
44+
</div>
45+
</header>
46+
<main class="mdl-layout__content">
47+
<span class="iframe-padding">Please open the Developer Tools Console to see the output</span>
48+
<!-- Where the examples will be displayed -->
49+
<div id="myFrame" class="iframe-padding"><iframe name="myFrame" src=""></iframe></div>
50+
<!-- Where the examples will be displayed - end -->
51+
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
52+
<div class="page-content mdl-layout--fixed-drawer">
53+
<div class="mdl-layout__drawer is-visible">
54+
<nav class="mdl-navigation">
55+
<a class="mdl-navigation__link" href="chapter01/01-HelloWorld.html">01-HelloWorld</a>
56+
<a class="mdl-navigation__link" href="chapter01/02-Variables.html" >02-Variables</a>
57+
<a class="mdl-navigation__link" href="chapter01/03-Operators.html" >03-Operators</a>
58+
<a class="mdl-navigation__link" href="chapter01/04-TruthyFalsy.html" >04-Truthy Falsy</a>
59+
<a class="mdl-navigation__link" href="chapter01/05-EqualsOperators.html" >05-Equals Operators</a>
60+
<a class="mdl-navigation__link" href="chapter01/06-ConditionalStatements.html" >06-Conditional Statements</a>
61+
<a class="mdl-navigation__link" href="chapter01/07-Loops.html" >07-Loops</a>
62+
<a class="mdl-navigation__link" href="chapter01/08-Functions.html" >08-Functions</a>
63+
<a class="mdl-navigation__link" href="chapter01/10-ObjectOrientedJS.html" >09-Object Oriented JS</a>
64+
<a class="mdl-navigation__link" href="chapter01/11-ES2015-ES6-letconst.html" >11-ES2015-letconst</a>
65+
<a class="mdl-navigation__link" href="chapter01/12-ES2015-ES6-StringTemplates.html" >12-ES2015-String Templates</a>
66+
<a class="mdl-navigation__link" href="chapter01/13-ES2015-ES6-ArrowFunctions.html" >13-ES2015-Arrow Functions</a>
67+
<a class="mdl-navigation__link" href="chapter01/14-ES2015-ES6-ParameterHandling.html" >14-ES2015-Parameter Handling</a>
68+
<a class="mdl-navigation__link" href="chapter01/15-ES2015-ES6-EnhancedObjectProperties.html" >15-ES2015-EnhancedObject Properties</a>
69+
<a class="mdl-navigation__link" href="chapter01/16-ES2015-ES6-Classes.html" >16-ES2015-Classes</a>
70+
<a class="mdl-navigation__link" href="chapter01/17-ES2015-ES6-Modules.html" >17-ES2015-Modules</a>
71+
<a class="mdl-navigation__link" href="chapter01/18-ES2016-ES7-ExponentiationOperator.html" >18-ES2016-ExponentiationOperator</a>
72+
</nav>
73+
</div>
74+
</div>
75+
</section>
76+
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
77+
<div class="page-content">
78+
Soon.
79+
</div>
80+
</section>
81+
</main>
82+
</div>
83+
</body>
84+
85+
</html>

0 commit comments

Comments
 (0)