Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Style.CSS" type="text/CSS">
    <link href="https://fonts.googleapis.com/CSS?family=Fjalla+One" rel="Stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>JS Documentation</title>
  </head><script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
  <header>JS Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#How_to_run_JavaScript">How To Run JavaScript</a></li>
    <li><a class="nav-link" href="#Tools_you_need">Tools You Need</a></li>
    <li><a class="nav-link" href="#Your_First_Javascript_Code">Your First JavaScript Code</a></li>
    <li><a class="nav-link" href="#Commenting_In_JavaScript">Commenting In JavaScript</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li><a class="nav-link" href="#Scope">Scope</a></li>
    <li><a class="nav-link" href="#Let_and_Const_Keywords">Let and Const Keywords</a></li>
    <li><a class="nav-link" href="#JavaScript_Operators">JavaScript Operators</a></li>
    <li><a class="nav-link" href="#Control_Flow">Control Flow</a></li>
    <li><a class="nav-link" href="#Functions">Functions</a></li>
    <li><a class="nav-link" href="#References">References</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>
      <p>JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as part of web pages, whose implementions allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.</p>
      <p>JavaScript was first known as LiveScript, but Nescape changed its name to JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose of the has been embeddedin Netscape, Internet Explorer, and other web browsers.</p>
      <p>The ECMA-262 specification defined a stsndard version of the core JavaScript language.</p>
        <ul>
          <li>JavaScript is a lightweight, interpreted programming language.</li>
          <li>Designed for creating network-centric applications.</li>
          <li>Complementary to and integrated with Java.</li>
          <li>Complementary to and integrated with HTML.</li>
          <li>Open and cross-platform.</li>
      </ul>
      <div id="heading">Client-Side JavaScript</div>
      <p>Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML documentfor the code to be interpreted by the browser.</p>
      <p>It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.</p>
      <p>The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the the user has entered a valid e-mail address in a form.</p>
     </article>
  </section>
  <section class="main-section" id="How_to_run_JavaScript">
    <header>How To Run JavaScript</header>
    <article>
      <p>Being a scripting language JavaScript cannot run on its own. In fact, the browser is responsible for running JavaScript code. When a user requests an HTML page with JavaScript in it, the script is send to the browser and it is up to the browser to execute it. The main advantage of JavaScript is that all mdern web browsersssupport it. So, you do not need to worry about whether your site visitor uses Internet Explorer, Google Chrome, firefox or any other browser. JavaScript will be supported. Also, JavaScript runs on any operating system including Windows, Linux or Mac.</p>
    </article>
  </section>
  <section class="main-section" id="Tools_you_need">
    <header>Tools You Need</header>
    <article>
      <p>To start with, you need a text editor to write your code and a browser to display the web pages you develop. You can use a text editor of your choice including Notepad++, Visual Studio Code, Sublime Text, Atom or any other text editor you are comfortable with. You can use any web browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.</p>
    </article>
  </section>
  <section class="main-section" id="Your_First_JavaScript_Code">
    <header>Your First JavaScript Code</header>
    <article>
      <p>JavaScript can be implemented using JavaScript statements that are placed within the &lt;script&gt;...&lt;/script&gt; HTML tags in the web.</p>
    <p>You can place the &lt;script&gt; tags, containing your JavaScript, anywhere within your web page, but it is normally recommended that you should keep it within the &lt;head&gt; tags.</p>
    <p>Let us take a sample example to print out "Hello World".</p>
  <code>
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;My First JavaScript Code!!&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
      console.log("Hello World!");
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    </code>
      <p>This code will produce the following result:
        "Hello World!"</p>
    </article>
  </section>
  <section class="main-section" id="Commenting_In_Javascript">
    <header>Commenting In JavaScript</header>
    <article>
      <p>JavaScript supports both C-style and C++-style comments. Thus:</p>
        <ul>
          <li>Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript.</li>
          <li>Any text between the characters /* and */ is treated as a comment. This may span multiple lines.</li>
     </ul>
      <p>In HTML commenting starts with &lt;!--, since JavaScript is incorporated, it has to end with //--&gt;, so as to prevent browsers from reading the end of the HTML comment as a piece of JavaScript code.</p>
    </article>
  </section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
    <article>
      <p>Like many programming languages, JavaScript has variables. Variables can be thought of as named containers. You can place data into these containers and then refer  to the data by simply naming the container.</p>
      <p>Variables are used whenever there is a need to store a piece of data. They are also used to manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself.</p>
      <p>A variable contains data that that can be used in the program elsewhere. Using variables also ensures code re-usability since it can can be used to replace the same value in multiple places.</p>
      <p>Before we look at variable declaration, let us examine the data types.</p>
      <div id="heading">JavaScript Data Types</div>
      <ul>
        <li>Numbers</li>
          <p>Numbers are a primitive data type. They include the set of all integers and floating point numbers, e.g., 7, 23.2, 777 etc.</p>
       <li>Booleans.</li>
        <p>Booleans are also a primitive data type. They can be either true or false.</p>
        <li>Strings</li>
          <p>They are any grouping of characters  (letters, spaces, numbers, or symbols) surrounded by single quotes '' or double quotes "". Strings are also a primitive data type.</p>
        <li>Undefined</li>
        <li>Null</li>
        <li>Symbols</li>
        <li>Objects</li>
      </ul>
      <div id="heading">Variable Declaration</div>
      <p>Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows:</p> 
        <code>var name;</code>
      <p>You can also declare multiple variables with the same var keyword as follows:</p>
        <code>Var name, money, greetings;</code>
      <p>Storing a value in a variable is called vriable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable.</p>
      <p>For instance, you might create a variable named money and assign the value 500 to it later. For another variable, you can assign a value at the time of initialization as follows:</p>
        <code>var name = "Tsar";
          var money;
          money = 500;</code>
      <p>Note: Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You should not re-declare same variable twice.</p>
    </article>
  </section>
  <section class="main-section"  id="Scope">                              <header>Scope</header>                 <article>                              <p>Scope is a concept that refers to where values and functoins can be accessed. Various scopes include:</p>
    <ul>
      <li>Global scope (a value/function in the global scope can be used anywhere in the entire program).</li>
      <li>File or module scope (the value/function can only be accessed from within the file). This is commonly referred to as local scope.</li>
      <li>Function scope (only visible within the function).</li>
      <li>Block scope (only visible within a {...} codeblock).</li>
      <p>Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Take a look into the following example:</p>
        <code>var myVar = "global";</code>
        <code>function myScope() {
          var myVar = "local";
          console.log(myVar);
          }
        </code>
      <p>
        Will produce the following result:
        Local</p>
    </article>
  </section>
  <section class="main-section" id="Let_and_Const_Keywords">
   <header>Let and Const Keywords</header>
   <article>
     <div id="heading">Let Keyword</div>
        <p>The let keyword was introduced in ES6 and signals that the variable can be assigned a different value. Initialization during the declaration of a let variable is optional. A let variable will contain undefined if nothing is assigned to it. As an example:</p>
          <code>let meal = "Pap stew";
            control.log(meal);
        </code>
      <div id="heading">const Keyword</div>
        <p>The const keyword was also introduced in ES6, and is short for the word constant. Just like with var and let you can store any value in a const variable. The way you declare a const variable and assign a value to it follows the same structure as let and var. Take a look at the following example:</p>
          <code>const myName = "Tsar";
            control.log(myName);</code>
        <p>A const variable cannot be re-assigned becuase it is a constant. Any attempt will result in JavaScript  typeError. Constant variables must be assigned a value when declared.</p>
        <p>If you are still trying to decide which keyword to use, let or const, think about whether you will need to re-assign the variable later. If you do need to re-assign the variable use let, otherwise use const.</p>
    </article>
  </section>
  <section class="main-section" id="Javascript_Operators">
   <header>JavaScript Operators</header>
   <article>
     <div id="heading">What is an Operator?</div>
        <p>An operator is a symbol that is used to perform an operation. JavaScript supports the following types:</p>
          <ul>
            <li>Arithmetic Operators</li>
              <ul>
               <li>+ addition</li>
               <li>- subtraction</li>
               <li>* multiplication</li>
               <li>/ division</li>
               <li>% modulo/modulus</li>
             </ul>
           </li>
        </ul>
        <ul>
          <li>Assignment Operators</li>
              <ul>
              <li>+= addition assignment</li>
              <li>-= subtraction assignment</li>
              <li>*= multiplication assignment</li>
              <li>/= division assignment</li>
              <li>%= modulus assignment</li>
          </ul>
         </li>
        </ul>
        
          <ul>
           <li>Comparison Operator</li>
            <ul>
              <li>== equal</li>
              <li>=== strict equality</li>
              <li>!== not equal</li>
              <li>&gt; Greater than</li>
              <li>&lt; Less than</li>
              <li>&gt;= Greater than or Equal to</li>
              <li>&lt;= Less than or Equal to</li>
            </ul>
          </li>
    </ul>
            <ul>
              <li>Logical Operators</li>
              <ul>
                <li>&& Logical AND</li>
                <li>|| Logical OR</li>
                <li>! Logical NOT</li>
              </ul>
           </li>
          </ul>
          <ul>
            <li>The Ternary Operator</li>
                  <p>The ternary operator, also known as the conditional operator, evaluates an expression for a true or false value and then executes one of the given statements depending on the result of the evaluation. It can be read as "If condition Then expression 1 Else Expression 2". Thus, if condition is true? Then value x: Otherwise value y.</p>
    </article>
  </section>
  <section class="main-section" id="Control_Flow">
   <header>Control Flow</header>
    <article>
          <p>Control flow is in computer science the order that the instructions or statements or functions are executed. In JavaScript, we read the code starting from the first line till the last unless there is some instructions int the code to the contrary.</p>
          <ul>
            <li>The if Statements</li>
            <p>An if statement accepts an expression with a set of parentheses():</p>
            <ul>
              <li>If the expression evaluates to a truthy value, then the code within its code body executes.</li>
              <li>If the expression evaluates to a falsy value, its code body will not execute.</li>
                <code>let isDinnerTime = true;
 if(isDinnerTime) {
                  console.log("Set the Table");                
 }
              </code> 
              </li>
             </ul>
            </li>
          </ul>
        <ul>
          <li>else Statement</li>
          <ul>
            <li>An else block is added to an if block or series of if- else if blocks. The else block will be executed only if the if condition fails.</li>
   <code>let isDinnerTime = true;
     if(isDinnerTime) {
      console.log("Set the Table");
     }else {
      console.log("Go play!");
     }
              </code>
          </ul>
         </li>
       </ul>
      <ul>
        <li>if else else if Statement</li>
        <ul>
          <li>After an initial if block, else if blocks can each check an additional condition. An optional else block can be added after the else if block(s) to run by default if none of the conditionals evaluated to truthy.</li>
 <code>let isDinnerTime = true;
   if(isDinnerTime) {
   console.log("Set the Table");
   }else if (isDinnerTime = "Not Ready") {
   console.log("Mill around");
   }else {
   console.log("Go Play!")
   }
                  </code>
                </ul>
              </li>
            </ul>
    </article>
  </section>
  <section class="main-section" id="Functions">
    <header>Functions</header>
    <article>
          <p>Functions are one of the fundamental building blocks in JavaScript. A function is a reusable set of statements to perform a task or calculate a value. Functions can be passed one or more values and can return a value at the end of their execution. In order to use a function, you must define it somewhere in the scope where you wish to call it. The example code provided contains a function that takes in two values and returns the sum of those numbers:</p>
 <code>function sum(num1, num2) {
   return num1 + num2;
   }
   </code>
     <div id="heading">Function Declaration</div>
        <p>Function declarations are used to to create named functions. These functions can be called using their declared name.Function declarations are built from:</p>
          <ul>
            <li>The function keyword.</li>
            <li>The function name.</li>
            <li>An optional list of parameters separated by commas enclosed by a set of parentheses().</li>
            <li>A function body enclosed in a set of curly braces{}.</li>
        </ul>
      <div id="heading">Calling A Function</div>
        <p>JavaScript functions can be called, or executed , elsewhere in code using parentheses following the function name. When a function is called, the code inside its function body runs. To call a function in your code, you type the function name followed by parentheses. Arguments are values passed into a function when it is called.</p> 
      <div id="heading">Parameters and Arguments</div>
        <p>Some functions can take inputs and use them to perform tasks. When declaring a function, we can specify its parameters. Parameters allow functions to accept input(s). We use parameters as placeholders for information that will be passed to the function when it is called.</p>
        <p>Let us observe how to specify parameters in our function:</p>
        <code>function calculateArea(length, Width) {
          console.log(Length * Width);
          }
              </code>
            </article>
          </section>
          <section class="main-section" id="References">
           <header>References</header>
           <article>
            <ul>
              <li>All references for this document are taken from <a href="https://www.sitepoint.com/javascript-fast-string-concatenation/" target="_blank">Sitepoint</a>, <a href="https://www.w3schools.com/js/js_function_apply.asp" target="_blank">w3schools</a>, <a href="https://www.geeksforgeeks.org/variables-datatypes-javascript/" target="_blank">geeksforgeeks</a>, <a href="https://javascript.fandom.com/wiki/Tutorial/Control_flow_statements" target="_blank">fandom</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">MDN.</a>
           </li>
         </ul>
       </article>
     </section>
  </main>
</html>


        
        
        
  

     
            
            
            
              
        
        
            
    
                                              
                              
                                   
        
      
      
    
  
  
    
          
    
      
    
            
          
!
            
              html,
body {
  color: #717D7D;
  min-width: 300px;
  background-color: #82CAFA;
  font-family: helvetica, Arial, sans-serif;
  line-height: 1.7;
}

#navbar {
  position: fixed;
  min-width: 0px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: hsl(0, 100%, 50%,);
}

header {
  color: #151B8D;
  margin: 10px;
  text-align: center;
  font-size: 1.8em;
  font-weight: 400;
}

#main-doc header {
  text-align: left;
  margin: 0px;
}

#navbar ul {
  height: 90%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

#navbar li {
  color: #342D7E;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}

#navbar a {
  display: block;
  padding: 10px 30px;
  color: #F75D59;
  text-decoration: none;
  cursor: pointer;
}

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

section article {
  color: #000;
  margin: 15px;
  font-size: 0.96em;
}

section li {
  margin: 15px 0px 0px 20px;
}
#heading {
  font-size: 1.3em;
  color: #342D7E;
}

code {
  display: block;
  text-align: left;
  white-space: pre;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color: #FFF8CC;
  padding: 15px;
  margin: 10px;
  border-radius: 7px;
  border: 2px black solid;
}

@media (max-width: 900px) {
  #navbar ul {
    border: 1px solid;
    height: 207px;
  }

  #navbar {
    background-color:#F7F7F7 ;
    position: absolute;
    border-bottom: 2px solid;
    max-height: 285px;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%; 
    border: none;
    z-index: 1;
  }

  #main-doc {
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
}

@media (max-width: 600px) {
  #main-doc {
    margin-left: -10px;
  }

  code {
    margin-left: -20px;
    width: 100%;
    padding: 15px;
    padding-left: 10px;
    padding-right: 45px;
    min-width: 240px;
  }
}
@media only screen and (max-width: 600px) {
  body {
    background-color: skyblue;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console