Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
</head>
<main id="main-doc">
  <!-- <div class="container" id="flex"> -->
  <!-- <div class="container" id="navigationBar"> -->
  <div class="container" id="mainContent">
  <nav id="navbar">
    <header>
      <h1>JavaScript</h1>
    </header>
    <ul>
    <li><a id="intro" class="nav" title="introduction" href="#introduction">Introduction</a></li>
    <li><a id="scopeA" class="nav" title="scope" href="#scope">Scope</a></li>
    <li><a id="methodA" class="nav" title="methods" href="#methods">Methods</a></li>
    <li><a id="AjaxA" class="nav" title="Ajax" href="#ajax">Ajax</a></li>
    <li><a id="MathA" class="nav" title="Math" href="#math">Math</a></li>
<!-- </div> -->
    </ul>
  </nav>

  <section id="introduction" class="main-section">
    <header>
      <h2>JavaScript intro<h2>
    </header>
    <p>JavaScript is a popular programming language that was created in 1995.  it was submitted to Ecma international where it got standards and was released as ECMAscript 1.  They have been updating it pretty regularly and the latest edition is ECMAscript 6 which was released in June 2015.  JavaScript adds funtionality to webpages and that's what this documentation will focus on.</p>
    <p>I'm going to focus on the parts of JavaScript that I'm trying to clarify.</p></section>
  <section id="scope" class="main-section">
    <header>
      <h2>Scope</h2>
    </header>
    <!-- need 5 li items in document -->
    <p>Scope is an important thing to consider while coding in JavaScript.  There is a lot of buzz around funcional programming right now.  Funcional programming focuses on only using variables with limited scope so as to not mess up other functions.  Global scope is a different way to approach variable in which they are declared so they are accesible throughout the entire webpage.</p>
    <p id="local scope">When working with functions, variables can have two types of scope:local and global. Variables have local scope when they are declared inside the funcion like so,<br>
    <code><span id="blue">function</span> myFunction()<br> {
    <span id="blue">var</span> carName = "Volvo";}</code><br></p>
    <p id="global scope">Variables have global scope when declared outside of a function.  This means it can be used throughout the whole page. Here's an example of a variable being declared outside of a function so it has global scope. <br>
    <code><span id="blue">var</span> carName = " Volvo";<br>
    <span id="blue">function</span> myFunction() {}</code><br></p>
    <p>Another way of declaring a variable so that it has global scope is by declaring it inside a function without declaring it with the keywords var, let or const.  Here's an example<br>
    <code>myFunction();<br>
      <span id="blue">function</span> myFunction() {
      carName = "Volvo";</code><br>
    in this case, car name gets set as a variable with global scope even though it was declared inside a function.</p>
  </section>
  <section id="methods" class="main-section">
    <header>
      <h2>Methods</h2>
    </header>
    <p>There are many ways to manipulate data with JavaScript.  Some of the most useful methods to manipulate JavaScript objects are map, reduce, and filter. Below we'll go over how they can help make you a better programmer.</p>
    <ul>When it's useful to manipulate data
      <li>When data is coming from an api</li>
      <li>When creating something that runs randomly</li>
      <li>When filtering data is necessary</li>
      <li>To iterate through lists and modify data</li>
      <li>When you're bored.</li>
    </ul>
    <p id="map">Are you tired of writing for loops? Well the <code>map()</code> method could be your ideal solution. It creates a new array with the results of calling a provided function on every element in the calling array.<br>
    that basically means that it iterates through the array and creates a new array as a result. Below, you'll find an example
    <code><span id="blue">var</span> numbers = [1, 4, 9];<br>
    <span id="blue">var</span> doubles = numbers.map(function(num) {<br>
           return num * 2;<br>
    });</code> <br>
    this makes doubles equal to [2, 8, 18]</p>
    <p id="reduce">the <code>reduce()</code> method is used to manipulate data in arrays. If there are just numbers in the array, you can use it to add up all the values.  If you want to group items in an array, it can do that for you to.  It can remove duplicates from an array, it can reduce an array of arrays into one array. This method is very versatile, below, you can see examples of reduce in action.  If you want more info, click <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics"> here</a><br>
    this is how you can reduce duplicates with reduce: <br>
    <code>let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];<br>
    let result = arr.sort().reduce((accumulator, current) => { <br>
        const length = accumulator.length <br>
        if (length === 0 || accumulator[length - 1] !== current) { <br>
            accumulator.push(current); <br>
        }<br>
        return accumulator; <br>
    }, []);<br>
    console.log(result); </code> this returns [1,2,3,4,5]</p>
    <p id="filter">The <code>filter()</code> method creates a new array with all elements that pass the test implemented by the provided function.<br>
    here's an example <br>
    <code>funcion canDrink(age){<br>
        return value>=21; <br>
      }
    var fitlered =[11,15,18,25,26,35,40,85].filter(canDrink);<br></code>
    This is going to return all the ages that are equal to or greater than 21.</p>
  </section>
    <section id="ajax" class="main-section">
    <header>
      <h2>Ajax</h2>
    </header>
    <p>APIs are application programming interfaces and they're what you can request data from.  There are browser APIs like geolocation and thrid party APIs that you would have to make a request to.</p>
    <p>Here's an example of how to request data from a third party API.<br>
    <code>var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';<br>
    var request = new XMLHttpRequest();<br>
    request.open('GET', requestURL);<br>
    request.responseType = 'json';<br>
    request.send();<br>
    request.onload = function() {<br>
      var superHeroes = request.response;<br>
      populateHeader(superHeroes);<br>
      showHeroes(superHeroes);<br>
  }</code><br>
    This will get an aray in json that has superhero information in it.  Not all JSON is equal meaning it doesn't always come in the same format.  If JSON comes in a string and you want an object, you can use <code>Parse()</code>. if it comes as an object and you want it in a string, you can use <code>strigiify()</code>
  </p></section>
  <section id="math" class="main-section">
    <header>
      <h2>Math</h2>
    </header>
    <p>The built-in Math object has properties and methods for mathematical constants and functions. For example, if you do <code>console.log(Math.PI)</code> in the console, you would see the value of pie.  Perhaps the most valuable Math method is <code>Math.random()</code> it spits out a random number between 0 and 1.
    </p></section>
  </div>
    <!-- <footer>scope credit to: https://www.w3schools.com/js/js_scope.asp
      other credit to MDN web docs. </footer> -->
<!-- </div> -->
</main>

              
            
!

CSS

              
                #blue{
  color: blue;
}
#flex{
  display: flex;
}
#navbar{
  float: left;
  position: fixed;
  height: 100%
  border-style:solid;
  border-width: 2.5px;
  justify-content: space-around;
}
@media (max-width:800px){
  #navbar{
    float: none;
    height: auto;
    width: 100%;
    position: static;
  }
}
li{
  height: 35px;
}
/* #navigationBar{
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 20% 20% 20% 20%;

} */

#mainContent{
  display: grid;
  grid-template-columns: 20% 80%;
  /* grid-template-rows: 142px 365px 700px 350px 100px 100px 100px; */
  grid-template-rows: auto;
  grid-template-areas: "nava contenta"
                      "navb contentb"
                      "navc contentc"
                      "navd contentd"
                      "nave contente"
                      "navf contentf"
                      "navg contentg"
}
@media(max-width:1024px;) {
  #mainContent{
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    grid-template-areas: "nav"
                          "contenta"
                          "contentb"
                          "contentc"
                          "contentd"
                          "contente"
                          "contentf"
                          "contentg"
  }
}
.nav{
  grid-area: nav;
}
#intro{
  grid-area:  nava;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#scopeA{
  gird-area: navb;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#methodA{
  grid-area: navc
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#AjaxA{
  grid-area: navd
  height:auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#MathA{
  grid-area: nave
  height:auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
/* #nav{
  grid-area: nav;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px; */

#introduction{
    grid-area:  contenta;
    height: auto;
    border-style:solid;
    border-width: .5px;
    padding: 10px;
}

#scope{
  grid-area: contentb;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#methods{
  grid-area: contentc;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#ajax{
  grid-area: contentd;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}
#math {
  grid-area: contente;
  height: auto;
  border-style:solid;
  border-width: .5px;
  padding: 10px;
}

              
            
!

JS

              
                
              
            
!
999px

Console