Responsive Web Design - Technical Documentation Page

index.html

<!-- Side navigation -->
<nav id="navbar" class="sidenav bg-info">
  <header class="text-white px-3">
    <h1>ES6 Basics</h1>
  </header>

  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Introduction">Introduction</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#What_You_Should_Already_Know">What You Should Already Know</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Let_and_Const">Let and Const</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Arrow_Functions">Arrow Functions</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Default_Parameters">Default Parameters</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#For_Of_Loop">For Of Loop</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Spread_Attributes">Spread Attributes</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Maps">Maps</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Sets">Sets</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Static_Methods">Static Methods</a>
  <hr class="hr--nav">

  <a class="nav-link text-white" href="#Getters_and_Setters">Getters and Setters</a>
  <hr class="hr--nav">
</nav>

<!-- Page content -->
<main id="main-doc" class="main">

  <!-- Introduction -->
  <section id="Introduction" class="main-section pt-4">

    <header>
      <h2>Introduction</h2>
    </header>

    <p class="lead">Information gathered from the Medium article by <a href="https://codeburst.io/es6-tutorial-for-beginners-5f3c4e7960be" target="_blank">Codeburst.io</a>, <a href="https://www.w3schools.com/js/js_es6.asp" target="_blank">W3Schools</a> and <a href="https://www.tutorialspoint.com/es6/"
        target="_blank">TutorialsPoint</a>.</p>

    <p>ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. It is used by applications to enable client-side scripting. Languages like JavaScript, Jscript and ActionScript are governed by this specification. This
      tutorial introduces you to ES6 implementation in JavaScript.</p>

    <p>These are the topics that will be covered:</p>

    <ul>
      <li>Let and Const</li>
      <li>Arrow Functions</li>
      <li>Default Parameters</li>
      <li>For...Of Loop</li>
      <li>Spread Attributes</li>
      <li>Maps</li>
      <li>Sets</li>
      <li>Static Methods</li>
      <li>Getters and Setters</li>
    </ul>
  </section>

  <hr>

  <!-- What You Should Know -->
  <section id="What_You_Should_Already_Know" class="main-section">

    <header>
      <h2>What You Should Already Know</h2>
    </header>

    <ol>
      <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
      <li>A general understanding of HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) and how they are used to create web pages.</li>
      <li>Some expereince with programming. Many of the concepts can be learned without previous knowledge of JavaScript.</li>
    </ol>

  </section>

  <hr>

  <!-- Let and Const -->
  <section id="Let_and_Const" class="main-section">
    <header>
      <h2>Let and Const</h2>
    </header>

    <p class="pl-4"><strong>Let</strong> is similar to var but let has scope. let is only accessible in the block level it is defined.</p>

    <pre><code>
    if (true) {
        let a = 40;
        console.log(a); //40
    }
    console.log(a); // undefined
    </code></pre>

    <p class="pl-4"><strong>Const</strong> is used to assign a constant value to the variable. And the value cannot be changed. Its fixed.</p>

    <pre><code>
    const a = 50;
    a = 60; // shows error. You cannot change the value of const.
    const b = "Constant variable";
    b = "Assigning new value"; // shows error.
    </code></pre>

  </section>

  <hr>

  <!-- Arrow Functions -->
  <section id="Arrow_Functions" class="main-section">
    <header>
      <h2>Arrow Functions</h2>
    </header>

    <p>The function syntax for ES6 has changed quite a bit.</p>

    <pre><code>
      // Old Syntax
      function oldOne() {
       console.log("Hello World..!");
      }
      
      // New Syntax
      var newOne = () => {
       console.log("Hello World..!");
      }
      </code></pre>

    <p>There are two parts of the syntax: <br>
      <ul>
        <li>var newOne = ()</li>
        <li> => {}</li>
      </ul>
    </p>

    <p>The first part is just declaring a variable and assigning the function (i.e) () to it. It just says the variable is actually a function.</p>
    <p>Then the second part is declaring the body part of the function. The arrow part with the curly braces defines the body part.</p>
  </section>

  <hr>

  <!-- Default Parameters -->
  <section id="Default_Parameters" class="main-section">
    <header>
      <h2>Default Parameters</h2>
    </header>

    <p><strong>Default parameters</strong> are parameters which are given by default while declaring a function. But it’s value can be changed when calling the function. In the example, we are passing only one parameter. The function makes use of the default
      parameter and executes the function.</p>

    <pre><code>
      let Func = (a, b = 10) => {
       return a + b; 
      }
      Func(20); // 20 + 10 = 30
      </code></pre>

    <p>When you are calling the function with parameters they get assigned in the order. (i.e) the first value gets assigned to the first parameter and the second value gets assign to the second parameter and so on..</p>

    <p>In the second example, the value 20 gets assigned to parameter ‘a’ and ‘b’ is not having any value. So we are not getting any output.</p>

    <pre><code>
      let NotWorkingFunction = (a = 10, b) => {
       return a + b;
      }
      NotWorkingFunction(20); // NAN. Not gonna work.
      </code></pre>

    <p>But the third example will work:</p>

    <pre><code>
       NotWorkingFunction(20, 30); // 50;
      </code></pre>

  </section>

  <hr>

  <!-- For..Of Loop -->
  <section id="For_Of_Loop" class="main-section">
    <header>
      <h2>For Of Loop</h2>
    </header>
    <p>The <strong>For...Of</strong> iterates through list of elements (i.e) like Array and returns the elements (not their index) one by one. Note that the variable ‘value’ outputs each element in the array not the index.</p>

    <pre><code>
    let arr = [2,3,4,1];
    for (let value of arr) {
     console.log(value);
    }
    Output:
    2
    3
    4
    1
    </code></pre>

    <p>This also works with strings.</p>

    <pre><code>
    let string = "Javascript";
    for (let char of string) {
     console.log(char);
    }
    Output:
    J
    a
    v
    a
    s
    c
    r
    i
    p
    t
    </code></pre>

  </section>

  <hr>

  <!-- Spread Attributes -->
  <section id="Spread_Attributes" class="main-section">
    <header>
      <h2>Spread Attributes</h2>
    </header>

    <p>Spread attributes help to spread the expression as the name suggests. In simple words, it converts a list of elements to an array and vice versa.</p>

    <pre><code>
    // ES5 Example
    let SumElements = (arr) => {
    console.log(arr); // [10, 20, 40, 60, 90]
    let sum = 0;
    for (let element of arr) {
      sum += element;
     }
     console.log(sum); // 220. 
    }
    SumElements([10, 20, 40, 60, 90]); 
    
    // ES6 Example
    let SumElements = (...arr) => {
    console.log(arr); // [10, 20, 40, 60, 90]
    let sum = 0;
     for (let element of arr) {
      sum += element;
     }
     console.log(sum); // 220. 
    }
    
    SumElements(10, 20, 40, 60, 90); 
    
    // Note we are not passing array here. Instead we are passing the elements as arguments. 
    </code></pre>

    <p>An example using Math.max():</p>

    <pre><code>
    // Note: Math.max is a simple method that returns the maximum element from given list. It doesn’t accept an array.
    
    let arr = [10, 20, 60];
    Math.max(...arr); // 60 
    
    // Here the spread attribute converts the array to list of elements.
    </code></pre>
  </section>

  <hr>

  <!-- Maps -->
  <section id="Maps" class="main-section">
    <header>
      <h2>Maps</h2>
    </header>

    <p><strong>Maps</strong> holds key-value pairs. It’s similar to an array but we can define our own index. And indexes are unique in maps and we can use any value as key or value.</p>

    <pre><code>
    var NewMap = new Map();
    NewMap.set('name', 'John'); 
    NewMap.set('id', 2345796);
    NewMap.set('interest', ['js', 'ruby', 'python']);
    
    NewMap.get('name'); // John
    NewMap.get('id'); // 2345796
    NewMap.get('interest'); // ['js', 'ruby', 'python']
    </code></pre> This examples uses map.keys() and returns the keys of the map but it returns it in an Iterator object. It means that it can’t be displayed as it is. It should be displayed only by iterating.

    <pre><code>
    var map = new Map();
    map.set('name', 'John');
    map.set('id', 10);
    map.size; // 2. Returns the size of the map.
    map.keys(); // outputs only the keys. 
    map.values(); // outputs only the values.
    for (let key of map.keys()) {
     console.log(key);
    }
    
    Output:
    name
    id
    </code></pre>

  </section>

  <hr>

  <!-- Sets -->
  <section id="Sets" class="main-section">
    <header>
      <h2>Sets</h2>
    </header>

    <p><strong>Sets</strong> are used to store the unique values of any type. Note that no duplicate values are displayed. Unique values are displayed. And also note that sets are iterable objects. We have to iterate through the elements to display it.</p>

    <pre><code>
    var sets = new Set();
    sets.add('a');
    sets.add('b');
    sets.add('a'); // We are adding duplicate value.
    for (let element of sets) {
     console.log(element);
    }
    
    Output:
    a
    b
    </code></pre> Additional ways to use Sets:

    <pre><code>
    var sets = New Set([1,5,6,8,9]);
    
    sets.size; // returns 5. Size of the size.
    sets.has(1); // returns true. 
    sets.has(10); // returns false.
    </code></pre>

    <p>Size is self-explanatory. There is another method ‘has’ which return a boolean value based on whether the given element is present in the set or not.</p>

  </section>

  <hr>

  <!-- Static Methods -->
  <section id="Static_Methods" class="main-section">
    <header>
      <h2>Static Methods</h2>
    </header>

    <p>Static methods are introduced in ES6. You can call the function without creating any instance for the class.</p>

    <pre><code>
    class Example {
     static Callme() {
     console.log("Static method");
     }
    }
    
    Example.Callme();
    Output:
    Static method
    
    // The keyword ‘function’ is not used inside Class.
    </code></pre>

  </section>

  <hr>

  <!-- Getters and Setters -->
  <section id="Getters_and_Setters" class="main-section">
    <header>
      <h2>Getters and Setters</h2>
    </header>

    <p><strong>Getters and Setters</strong> are one of the useful features in ES6 and comes in handy when using classes.</p>

    <pre><code>
    class People {
    constructor(name) {
          this.name = name;
        }
        get Name() {
          return this.name;
        }
        set Name(name) {
          this.name = name;
        }
    }
    
    let person = new People("Jon Snow");
    console.log(person.Name);
    
    person.Name = "Dany";
    console.log(person.Name);
    </code></pre>

    <p>here are two functions inside class People with ‘get’ and ‘set’ properties. The ‘get’ property is used to get the value of the variable and ‘set’ property is used to set the value to the variable.</p>

    <p>And you can see that getName function is called without parenthesis. And setName function is called without parenthesis and it’s just like assigning a value to the variable.</p>

  </section>

  <!-- Return to Top Button -->
  <button onclick="topFunction()" id="myBtn" title="Go to top" class="font-weight-bold btn btn-info">&Hat; Return to Top</button>

</main>

responsive-web-design-technical-documentation-page.markdown

Responsive Web Design - Technical Documentation Page

Technical document showing the basics of ES6 (ECMAScript 6). The site uses Bootstrap 4 styles and a Vanilla JS for the Return to Top button. CSS is used to style the scrollbar for the menu and the main content. (*Scrollbar styles only work in Chrome.)

A Pen by Danielle on CodePen.

License.

script.js

// Source: W3Schools
// https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

style.css

.sidenav {
    height: 100%;
    width: 330px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}

.sidenav a:hover {
    text-decoration: underline;
}

.hr--nav {
  border: 1px solid #ffffff;
}

.main {
    margin-left: 340px; 
    padding: 15px 20px;
}

.main a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}

pre {
  background-color: #dfe0e1;
  border: 2px solid #eee;
  border-radius: 10px;
}

pre > code {
  color: #DC143C;
  font-weight: 600;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    /*background-color: red;*/ /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/* - Custom Scrollbar - */

/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    background: white;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: lightblue; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: darkblue; 
}

@media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
      width: 100%;
      height: 200px;
      position: absolute;
  }
    .sidenav a {
      font-size: 22px;
      padding-left: 50px;
  }
  
  .main {
    margin-top: 200px;
    margin-left: 50px;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />