<!-- 

Hello Camper!

Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->
<script src='https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js'></script>

<main id="main-doc">
    
    <nav id="navbar">
     <header>JavaScript</header>
     <ul>
     <li><a href="#Basics_of_Javascript" class="nav-link">Basics of JavaScript</a></li>
     <li><a href="#Variables" class="nav-link">Variables</a></li>
     <li><a href="#Arrays" class="nav-link">Arrays</a></li>
     <li><a href="#Operators" class="nav-link">Operators</a></li>
     <li><a href="#Functions" class="nav-link">Functions</a></li>
     <li><a href="#Loops" class="nav-link">Loops</a></li>
     <li><a href="#If-Else_Statements" class="nav-link">If-Else Statements</a></li>
     <li><a href="#Strings" class="nav-link">Strings</a></li>
     </ul>
   </nav>
   
<div class="content-container">

<section class="main-section" id="Basics_of_Javascript">
    <header>Basics of Javascript</header>
  <p>JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. <br>JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries.</p><br>
    <p>Let’s start off with the basics – how to include JavaScript in a html file.</p>
    <br>
    <h2>Including JavaScript in an HTML Page</h2>
    <p>To include JavaScript inside a page, you need to wrap it in
    <code>&lt;script&#62;&lt;/script&#62;</code>
        tags:
    </p>
    <pre class="code-style">
        &lt;script type="text/javascript"&#62;

        //JavaScript code goes here

        &lt;&#47;script&#62;
        </pre>
    <p>With this input, the browser can identify and execute the code properly.</p>
  <h2>Including an External JavaScript File</h2>
  <p>You can also place JavaScript in its own file and call it inside your HTML. That way, you can keep different types of
code separate from one another, making for better-organized files. If your code is in a file called <code>myscript.js</code>, you
would call it:</p>
<pre class="code-style">
    &lt;script src="myscript.js"&#62;&lt;&#47;script&#62;

</pre>
<h2>Including Comments</h2>
<p>Comments are important because they help other developers understand what is going on in your code or remind you if you
forgot something yourself. Keep in mind that they have to be marked properly so the browser won’t try to execute them.</p>
<p>In JavaScript you have two different options:</p>
<ul>
    <li class="li-text"><strong>Single-line comments</strong> — To include a comment that is limited to a single line, precede it with <code>//</code>
    </li>
    <br>
    <li class="li-text"><strong>Multi-line comments</strong> — In case you want to write longer comments between several lines, wrap it in 
    <code>/*</code> 
    and 
    <code>*/</code> to avoid it from being executed</li>
</ul>
</section>

<section class="main-section" id="Variables">
    <header>Variables</header>
    <p>Variables are stand-in values that you can use to perform operations. You should be familiar with them from math class.</p>
    <h2> var, const, let</h2>
    <code></code>
<ul>
    <li class="li-text"><code>var</code> — The most common variable. It can be reassigned but only accessed within a function. Variables defined with <code>var</code> move to the top when the code is executed.
    </li>
    <li class="li-text"><code>const</code> — Can not be reassigned and not accessible before they appear within the code.</li>
    <li class="li-text"><code>let</code> — Similar to <code>const</code>, the <code>let</code> variable can be reassigned but not re-declared.</li>
</ul>
<h2>Data Types</h2>
<p>Variables can contain different types of values and data types. You use <code>=</code> to assign them:</p>
<ul>
<li class="li-text">Intergers — <code>var age = 23</code></li>
<li class="li-text">Variables — <code>var x</code></li>
<li class="li-text">Text (strings) — <code>var a = "init"</code></li>
<li class="li-text">Operations — <code>var b = 1 + 2 + 3</code></li>
<li class="li-text">Boolean — <code>var c = true</code></li>
<li class="li-text">Constant numbers — <code>const PI = 3.14</code></li>
<li class="li-text">Objects — <code>var name = {firstName:"John", lastName:"Doe"}</code></li>
</ul>
<p>There are more possibilities. Note that variables are case sensitive. That means <code>lastname</code> and <code>lastName</code> will be handled
as two different variables.</p>
<h2>Objects</h2>
<p>Objects are certain kinds of variables. They are variables that can have their own values and methods. The latter are
actions that you can perform on objects.</p>

<pre class="code-style">
    var person = {
        firstName:"John",
        lastName:"Doe",
        age:21,
        nationality:"German"
    };
        </pre>
</section>

<section class="main-section" id="Arrays">
    <header>Arrays</header>
    <p>Arrays are part of many different programming languages. They are a way of organizing variables and properties into
    groups. Here’s how to create one in JavaScript:</p>
    <pre class="code-style">
    var car = ["BMW", "Tesla", "Toyota"];
    </pre>
    <p>Now you have an array called <code>fruit</code> which contains three items that you can use for future operations.</p>
    <h2>Array Methods</h2>
    <p>Once you have created arrays, there are a few things you can do with them:</p>
    <ul><li class="li-text"><code>concat()</code> — Join several arrays into one</li>
    <li class="li-text"><code>indexOf()</code> — Returns the first position at which a given element appears in an array</li>
    <li class="li-text"><code>join()</code> — Combine elements of an array into a single string and return the string</li>
    <li class="li-text"><code>lastIndexOf()</code> — Gives the last position at which a given element appears in an array</li>
    <li class="li-text"><code>pop()</code> — Removes the last element of an array</li>
    <li class="li-text"><code>push()</code> — Add a new element at the end</li>
    <li class="li-text"><code>reverse()</code> — Sort elements in a descending order</li>
    <li class="li-text"><code>shift()</code> — Remove the first element of an array</li>
    <li class="li-text"><code>slice()</code> — Pulls a copy of a portion of an array into a new array</li>
    <li class="li-text"><code>sort()</code> — Sorts elements alphabetically</li>
    <li class="li-text"><code>splice()</code> — Adds elements in a specified way and position</li>
    <li class="li-text"><code>toString()</code> — Converts elements to strings</li>
    <li class="li-text"><code>unshift()</code> — Adds a new element to the beginning</li>
    <li class="li-text"><code>valueOf()</code> — Returns the primitive value of the specified object</li>
    </ul>
</section>

<section class="main-section" id="Operators">
    <header>Operators</header>
    <p>If you have variables, you can use them to perform different kinds of operations. To do so, you need operators.</p>
    <h2>Basic Operators</h2>
    <ul>
        <li class="li-text"><code>+</code> — Addition</li>
        <li class="li-text"><code>-</code> — Subtraction</li>
        <li class="li-text"><code>*</code> — Multiplication</li>
        <li class="li-text"><code>/</code> — Division</li>
        <li class="li-text"><code>(...)</code> — Grouping operator, operations within brackets are executed earlier than those outside</li>
        <li class="li-text"><code>%</code> — Modulus (remainder )</li>
        <li class="li-text"><code>++</code> — Increment numbers</li>
        <li class="li-text"><code>--</code> — Decrement numbers</li>
    </ul>
    <h2>Comparison Operators</h2>
    <ul>
        <li class="li-text"><code>==</code> — Equal to</li>
        <li class="li-text"><code>===</code> — Equal value and equal type</li>
        <li class="li-text"><code>!=</code> — Not equal</li>
        <li class="li-text"><code>!==</code> — Not equal value or not equal type</li>
        <li class="li-text"><code>></code> — Greater than</li>
        <li class="li-text"><code><</code> — Less than</li>
        <li class="li-text"><code>>=</code> — Greater than or equal to</li>
        <li class="li-text"><code><=</code> — Less than or equal to</li>
        <li class="li-text"><code>?</code> — Ternary operator</li>
    </ul>
    <h2>Logical Operators</h2>
    <ul>
        <li class="li-text"><code>&&</code> — Logical and</li>
        <li class="li-text"><code>||</code> — Logical or</li>
        <li class="li-text"><code>!</code> — Logical not</li>
    </ul>
</section>

<section class="main-section" id="Functions">
    <header>Functions</header>
    <p>JavaScript functions are blocks of code that perform a certain task. A basic function looks like this:</p>
    <pre class="code-style">
  function name(parameter1, parameter2, parameter3) {
  // what the function does
  }
    </pre>
    <p>As you can see, it consists of the <code>function</code> keyword plus a name. The function’s parameters are in the brackets and you
    have curly brackets around what the function performs. You can create your own, but to make your life easier – there are
    also a number of default functions.</p>
    <h2>Outputting Data</h2>
    <p>A common application for functions is the output of data. For the output, you have the following options:</p>
    <ul>
        <li class="li-text"><code>alert()</code> — Output data in an alert box in the browser window</li>
        <li class="li-text"><code>confirm()</code> — Opens up a yes/no dialog and returns true/false depending on user click</li>
        <li class="li-text"><code>console.log()</code> — Writes information to the browser console, good for debugging purposes</li>
        <li class="li-text"><code>document.write()</code> — Write directly to the HTML document</li>
        <li class="li-text"><code>prompt()</code> — Creates a dialogue for user input</li>
    </ul>
    <h2>Global Functions</h2>
    <p>Global functions are functions built into every browser capable of running JavaScript. Here are some of them:</p>
    <ul>
        <li class="li-text"><code>isFinite()</code> — Determines whether a passed value is a finite number</li>
        <li class="li-text"><code>isNaN()</code> — Determines whether a value is NaN or not</li>
        <li class="li-text"><code>Number()</code> — Returns a number converted from its argument</li>
        <li class="li-text"><code>parseFloat()</code> — Parses an argument and returns a floating-point number</li>
        <li class="li-text"><code>parseInt()</code> — Parses its argument and returns an integer</li>
</section>

<section class="main-section" id="Loops">
    <header>Loops</header>
    <p>Loops are part of most programming languages. They allow you to execute blocks of code desired number of times with
    different values:</p>
    <pre class="code-style">
  for (before loop; condition for loop; execute after loop) {
      // what to do during the loop
  }
    </pre>
    <p>You have several parameters to create loops:</p>
    <ul>
    <li class="li-text"><code>for</code> — The most common way to create a loop in JavaScript</li>
    <li class="li-text"><code>while</code> — Sets up conditions under which a loop executes</li>
    <li class="li-text"><code>do while</code> — Similar to the <code>while</code> loop but it executes at least once and performs a check at the end to see if the condition is met
    to execute again</li>
    <li class="li-text"><code>break</code> — Used to stop and exit the cycle at certain conditions</li>
    <li class="li-text"><code>continue</code> — Skip parts of the cycle if certain conditions are met</li>
    </ul>
</section>

<section class="main-section" id="If-Else_Statements">
    <header>If-Else Statements</header>
    <p>These types of statements are easy to understand. Using them, you can set conditions for when your code is executed. If
    certain conditions apply, something is done, if not – something else is executed.</p>
    <pre class="code-style">
        if (condition) {
            // what to do if condition is met
        } else {
           // what to do if condition is not met
        }
    </pre>
    <p>A similar concept to <code>if else</code> is the <code>switch</code> statement. However, using the switch you select one of several code blocks to
    execute.</p>
    <h2>An If-Else Statement example</h2>
    <pre class="code-style">
        const x = 9;
        if (x === 10){
            console.log('x is equal to 10');
        } else{
            console.log('x is not 10');
        }
    </pre>
        <p>console will display <code>x is not 10</code></p>
</section>

<section class="main-section" id="Strings" style="margin-bottom:1em;">
    <header>Strings</header>
    <p>Strings are what JavaScript calls to text that does not perform a function but can appear on the screen.
    </p>
    <pre class="code-style">
    var person = "John Doe";
    </pre>
    <p>In this case, <code>John Doe</code> is the string.</p>
   <h2>Escape Characters</h2>
   <p>In JavaScript, strings are marked with single or double-quotes. If you want to use quotation marks in a string, you need
to use special characters:</p>
 <ul>
    <li class="li-text"><code>\'</code> — Single quote</li>
    <li class="li-text"><code>\"</code> — Double quote</li>
 </ul>
 <p>Aside from that you also have additional escape characters:</p>
 <ul>
<li class="li-text"><code>\\</code> — Backslash</li>
<li class="li-text"><code>\b</code> — Backspace</li>
<li class="li-text"><code>\f</code> — Form feed</li>
<li class="li-text"><code>\n</code> — New line</li>
<li class="li-text"><code>\r</code> — Carriage return</li>
<li class="li-text"><code>\t</code> — Horizontal tabulator</li>
<li class="li-text"><code>\v</code> — Vertical tabulator</li>
 </ul>
 <h2>String Methods</h2>
   <p>There are many different ways to work with strings, here are some:</p>
   <ul>
    <li class="li-text"><code>slice()</code> — Extracts a section of a string and returns it as a new string</li>
    <li class="li-text"><code>split()</code> — Splits a string object into an array of strings at a specified position</li>
    <li class="li-text"><code>substr()</code> — Similar to <code>slice()</code> but extracts a substring depending on a specified number of characters</li>
    <li class="li-text"><code>substring()</code> — Also similar to <code>slice()</code> but can’t accept negative indices</li>
    <li class="li-text"><code>toLowerCase()</code> — Convert strings to lower case</li>
    <li class="li-text"><code>toUpperCase()</code> — Convert strings to upper case</li>
   </ul>
</section>

<div class="coder-link">
    <span>Reference</span>
    : <a href="https://websitesetup.org/javascript-cheat-sheet/" target="_blank" id="reference">JavaScript Cheat Sheet</a></span>
    <div>
    <cite>Written by <a href="twitter.com/iStevenZion" target="twitter.com/iStevenZion" id="coder">Steven </a></cite>
   </div>
</div>

</div>

</main>

*{
  margin:0;
  box-sizing:border-box;
}

body {
  font-family: Karla,Arial, sans-serif;
  background: #222;
  color: #000;
  font-size:1.1rem;
  min-width: 400px;
}

p {
  line-height: 20px;
  word-wrap: break-word;
  padding-right: 2rem;
}
.code-style {
  border: 2px solid yellow;
  color: #111;
  font-size: 1.2rem;
  background-color: grey;
  border-radius: 7px;
  width: 70%;
  border-radius: 0 10px 20px;
}
.li-text {
  line-height: 36px;
}

#main-doc {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100vh;
  margin-left: -1rem;
  margin-top: -1rem;
}
#navbar {
  width: 200px;
  height: 100%;
  position: fixed;
  padding-bottom: 10rem;
  text-align: left;
  box-shadow: 5px 5px 7px #000;
  background-color: #222;
  min-width: 250px;
  margin-top: 1rem;
}

.content-container {
  background: yellow;
  padding-left: 5rem;
  margin-right: -5.5rem;
  position: relative;
  right: 9rem;
  margin-left: 35rem;
  width: 100%;
  border: 2px solid #00203fff;
  border-radius: 0 10px 20px;
  margin-top: 1rem;
}

#navbar header {
  margin-left: -1rem;
  padding: 25px 6px 25px 10px;
  text-align: center;
  width: 100%;
  background: yellow;
  text-shadow: none;
  border: none;
  font-size: 2rem;
  font-weight:700;
  color: #111;
}

#navbar ul {
  padding-right: 2rem;
  font-size: 1.2rem;
  font-family: Karla;
}

#navbar ul li {
  list-style: none;
  width: 100%;
  text-docoration:none
  text-shadow: 5px 5px 7px #000;
  margin-bottom: 20px;
  padding-top: 10px;
  color: #111;
}

#navbar ul li a {
  color: rgb(255, 255, 255);
  text-decoration:none;
  height: 30px;
  color: yellow;
  font-weight: 600;
}

#navbar ul li a:hover {
  color: rgb(255, 250, 250);
  text-decoration: none;
  width: 100%;
}

#main-doc {
  display: flex;
  flex-direction: row;
}
.main-section {
  min-height: 100vh;
  width: 100%;
  margin-left: -2rem;
  border-bottom: 2px solid #00034c;
  padding-bottom: 1rem;
}

.main-section header {
  font-size: 3rem;
  padding-top: 20px;
  font-weight: 700;
}
h2 {
  font-size: 1.5rem;
  padding-top: 10px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.main-section ul li {
  margin-bottom: 15px;
}

pre {
  padding: 10px 2px 2px 2px;
  margin: 10px 40px 25px 20px;
}

code {
  color: grey;
  text-align: 1.2rem;
  font-weight: bolder;
  font-size: 1rem;
}
.coder-link {
  width: 90%;
  padding-top: 3rem;
  padding-left: 20rem;
  padding-right: 20rem;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  background: #000;
  color: yellow;
  min-height: 4rem;
  border-radius: 7px;
}
cite {
  display: inline-block;
  padding-top: 2rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
#reference,
#coder {
  color: purple;
}

@media (max-width: 1000px) {
  .coder-link {
    font-size: 0.8rem;
    padding-bottom: 2rem;
  }
  pre {
    min-width: 490px;
  }
}

@media (max-width: 950px) {
  p {
    width: 100%;
  }
  .pre {
    margin-left: 0;
  }
}

@media (max-width: 815px) {
  .content-container {
    margin-right: 5rem;
  }
}

@media (max-width: 521px) {
  .code-style {
    margin-left: -0.25rem;
  }
  .content-container {
    min-width: 500px;
  }
  #reference {
    display: block;
  }
}

@media (max-height: 560px) {
  #navbar {
    overflow-y: scroll;
  }
}

// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.