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.

            
              <!-- use this as source material https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types-->

<body>
  <div id="side-navbar-flexbox">
      <nav id="navbar">
        <header id="page-title">
          <h1>JavaScript Guide</h1>
        </header>
        <div class="nav-link-container">
          <a class="nav-link" href="#Introduction">Introduction</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Grammar_and_types">Grammar and types</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Control_flow_and_error_handling">Control flow and error handling</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Loops_and_iteration">Loops and iteration</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Functions">Functions</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Expressions_and_operators">Expressions and operators</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Numbers_and_dates">Numbers and dates</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Text_formatting">Text formatting</a>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#Regular_expressions">Regular expressions</a>
        </div>
      </nav>
  </div>

  <main id="main-doc">
    <div>
      <section class="main-section" id="Introduction">
        <header>
          <h2>Introduction</h2>
        </header>
        <h3>What you should already know</h3>
        <p>This guide assumes you have the following basic background:</p>
        <ul>
          <li>A general understanding of the Internet and the World Wide Web (WWW).</li>
          <li>Good working knowledge of HyperText Markup Language (HTML).</li>
          <!-- TODO: Add the link to the js page-->
          <li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about JavaScript.</li>
        </ul>
        <h3>What is JavaScript?</h3>
        <p>JavaScript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.x. having complex animations, clickable buttons, popup menus, etc.). There are also more advanced server side versions of JavaScript such as
          Node.Js which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple computers). Inside a host environment (for example, a web browser), JavaScript can be connected to
          the objects of its environment to provide programmatic control over them.</p>
        <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing
          it with additional objects; for example:</p>
        <ul>
          <li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events
            such as mouse clicks, form input, and page navigation.</li>
          <li>Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a database, provide continuity of information from
            one invocation to another of the application, or perform file manipulations on a server.</li>
        </ul>
        <p>This means that in the browser, JavaScript can change the way the webpage (DOM) looks. And, likewise, Node.js JavaScript on the server can respond to custom requests from code written in the browser.</p>
        <h3>JavaScript and Java</h3>
        <p>JavaScript and Java are similar in some ways but fundamentally different in some others. The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript follows most Java expression syntax, naming
          conventions and basic control-flow constructs which was the reason why it was renamed from LiveScript to JavaScript.</p>
        <p>In contrast to Java's compile-time system of classes built by declarations, JavaScript supports a runtime system based on a small number of data types representing numeric, Boolean, and string values. JavaScript has a prototype-based object model
          instead of the more common class-based object model. The prototype-based model provides dynamic inheritance; that is, what is inherited can vary for individual objects. JavaScript also supports functions without any special declarative requirements.
          Functions can be properties of objects, executing as loosely typed methods.</p>
        <p>JavaScript is a very free-form language compared to Java. You do not have to declare all variables, classes, and methods. You do not have to be concerned with whether methods are public, private, or protected, and you do not have to implement
          interfaces. Variables, parameters, and function return types are not explicitly typed.</p>
        <p>Java is a class-based programming language designed for fast execution and type safety. Type safety means, for instance, that you can't cast a Java integer into an object reference or access private memory by corrupting Java bytecodes. Java's
          class-based model means that programs consist exclusively of classes and their methods. Java's class inheritance and strong typing generally require tightly coupled object hierarchies. These requirements make Java programming more complex than
          JavaScript programming.</p>
        <p>In contrast, JavaScript descends in spirit from a line of smaller, dynamically typed languages such as HyperTalk and dBASE. These scripting languages offer programming tools to a much wider audience because of their easier syntax, specialized
          built-in functionality, and minimal requirements for object creation.</p>
        <h3>JavaScript and the ECMAScript specification</h3>
        <p>JavaScript is standardized at Ecma International — the European association for standardizing information and communication systems (ECMA was formerly an acronym for the European Computer Manufacturers Association) to deliver a standardized, international
          programming language based on JavaScript. This standardized version of JavaScript, called ECMAScript, behaves the same way in all applications that support the standard. Companies can use the open standard language to develop their implementation
          of JavaScript. The ECMAScript standard is documented in the ECMA-262 specification. See New in JavaScript to learn more about different versions of JavaScript and ECMAScript specification editions.</p>
        <p>The ECMA-262 standard is also approved by the ISO (International Organization for Standardization) as ISO-16262. You can also find the specification on the Ecma International website. The ECMAScript specification does not describe the Document
          Object Model (DOM), which is standardized by the World Wide Web Consortium (W3C) and/or WHATWG (Web Hypertext Application Technology Working Group). The DOM defines the way in which HTML document objects are exposed to your script. To get a
          better idea about the different technologies that are used when programming with JavaScript, consult the article JavaScript technologies overview.</p>
        <h4>JavaScript documentation versus the ECMAScript specification</h4>
        <p>The ECMAScript specification is a set of requirements for implementing ECMAScript; it is useful if you want to implement standards-compliant language features in your ECMAScript implementation or engine (such as SpiderMonkey in Firefox, or V8
          in Chrome).</p>
        <p>The ECMAScript document is not intended to help script programmers; use the JavaScript documentation for information on writing scripts.</p>
        <p>The ECMAScript specification uses terminology and syntax that may be unfamiliar to a JavaScript programmer. Although the description of the language may differ in ECMAScript, the language itself remains the same. JavaScript supports all functionality
          outlined in the ECMAScript specification.</p>
        <p>The JavaScript documentation describes aspects of the language that are appropriate for a JavaScript programmer.</p>
      </section>
      <section class="main-section" id="Grammar_and_types">
        <header>
          <h2>Grammar and types</h2>
        </header>
        <h3>Basics</h3>
        <p>JavaScript borrows most of its syntax from Java, but is also influenced by Awk, Perl and Python.</p>
        <p>JavaScript is case-sensitive and uses the Unicode character set. For example, the word Früh (which means "early" in German) could be used as a variable name.</p>
        <pre><code>var Früh = "foobar";</code></pre>
        <p>But, the variable früh is not the same as Früh because JavaScript is case sensitive.</p>
        <p>In JavaScript, instructions are called statements and are separated by semicolons (;).</p>
        <p>A semicolon is not necessary after a statement if it is written on its own line. But if more than one statement on a line is desired, then they must be separated by semicolons. ECMAScript also has rules for automatic insertion of semicolons (ASI)
          to end statements. (For more information, see the detailed reference about JavaScript's lexical grammar.) It is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed. This practice
          reduces the chances of bugs getting into the code.</p>
        <p>The source text of JavaScript script gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments, or whitespace. Spaces, tabs, and newline characters are considered
          whitespace.
        </p>
        <h3>Comments</h3>
        <p>The syntax of comments is the same as in C++ and in many other languages:</p>
        <pre><code>// a one line comment

/* this is a longer, 
 * multi-line comment
 *
 
/* You can't, however, /* nest comments */ SyntaxError */</code></pre>
        <p>Comments behave like whitespace and are discarded during script execution.</p>
        <h3>Declarations</h3>
        <p>There are three kinds of declarations in JavaScript.</p>
        <pre><code>var</code></pre>
        <p>Declares a variable, optionally initializing it to a value.</p>
        <pre><code>let</code></pre>
        <p>Declares a block-scoped, local variable, optionally initializing it to a value.</p>
        <pre><code>const</code></pre>
        <p>Declares a block-scoped, read-only named constant.</p>
        <h4>Variables</h4>
        <p>You use variables as symbolic names for values in your application. The names of variables, called identifiers, conform to certain rules.</p>
        <p>A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters
          "a" through "z" (lowercase).</p>
        <p>You can use most of ISO 8859-1 or Unicode letters such as å and ü in identifiers (for more details see this blog post). You can also use the Unicode escape sequences as characters in identifiers.</p>
        <p>Some examples of legal names are Number_hits, temp99, $credit, and _name.</p>
        <h4>Declaring variables</h4>
        <p>You can declare a variable in three ways:</p>
        <ul>
          <li>With the keyword var. For example, var x = 42. This syntax can be used to declare both local and global variables.</li>
          <li>By simply assigning it a value. For example, x = 42. If this form is used outside of a function, it declares a global variable. It generates a strict JavaScript warning. You shouldn't use this variant.</li>
          <li>With the keyword let. For example, let y = 13. This syntax can be used to declare a block-scope local variable. See Variable scope below.</li>
        </ul>
        <h4>Evaluating variables</h4>
        <p>A variable declared using the var or let statement with no assigned value specified has the value of undefined.</p>
        <p>An attempt to access an undeclared variable results in a ReferenceError exception being thrown:</p>
        <pre><code>var a;
console.log('The value of a is ' + a); // The value of a is undefined<br>
<br>
console.log('The value of b is ' + b); // The value of b is undefined
var b;
// This one may puzzle you until you read 'Variable hoisting' below<br>
<br>
console.log('The value of c is ' + c); // Uncaught ReferenceError: c is not defined<br>
<br>
let x;
console.log('The value of x is ' + x); // The value of x is undefined<br>
<br>
console.log('The value of y is ' + y); // Uncaught ReferenceError: y is not defined
let y;</code></pre>
        <p>You can use undefined to determine whether a variable has a value. In the following code, the variable input is not assigned a value, and the if statement evaluates to true.</p>
        <pre><code>var input;
if (input === undefined) {
  doThis();
} else {
  doThat();
}</code></pre>
        <p>The undefined value behaves as false when used in a boolean context. For example, the following code executes the function myFunction because the myArray element is undefined:</p>
        <pre><code>var myArray = [];
if (!myArray[0]) myFunction();</code></pre>
        <p>The undefined value converts to NaN when used in numeric context.</p>
        <pre><code>var a;
a + 2;  // Evaluates to NaN</code></pre>
        <p>When you evaluate a null variable, the null value behaves as 0 in numeric contexts and as false in boolean contexts. For example:</p>
        <pre><code>var n = null;
console.log(n * 32); // Will log 0 to the console</code></pre>
        <h4>Constants</h4>
        <p>A constant cannot change value through assignment or be re-declared while the script is running. It must be initialized to a value.</p>
        <p>The scope rules for constants are the same as those for let block-scope variables. If the const keyword is omitted, the identifier is assumed to represent a variable.</p>
        <p>You cannot declare a constant with the same name as a function or variable in the same scope. For example:</p>
        <pre><code>// THIS WILL CAUSE AN ERROR
function f() {};
const f = 5;

// THIS WILL CAUSE AN ERROR TOO
function f() {
  const g = 5;
  var g;

  //statements
}</code></pre>
        <p>However, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.</p>
        <pre><code>const MY_OBJECT = {'key': 'value'};
MY_OBJECT.key = 'otherValue';</code></pre>
        <p>Also, the contents of an array are not protected, so the following statement is executed without problems.</p>
        <pre><code>const MY_ARRAY = ['HTML','CSS'];
MY_ARRAY.push('JAVASCRIPT');
console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];</code></pre>
        <h3>Data structures and types</h3>
        <h4>Data types</h4>
        <p>The latest ECMAScript standard defines seven data types:</p>
        <ul>
          <li>Six data types that are primitives:</li>
          <ul>
            <li>Boolean. true and false.</li>
            <li>null. A special keyword denoting a null value. Because JavaScript is case-sensitive, null is not the same as Null, NULL, or any other variant.</li>
            <li>undefined. A top-level property whose value is not defined.</li>
            <li>Number. An integer or floating point number. For example: 42 or 3.14159.</li>
            <li>String. A sequence of characters that represent a text value. For example: "Howdy"</li>
            <li>Symbol (new in ECMAScript 2015). A data type whose instances are unique and immutable.</li>
          </ul>
          <li>and Object</li>
        </ul>
        <p>Although these data types are relatively few, they enable you to perform useful functions with your applications. Objects and functions are the other fundamental elements in the language. You can think of objects as named containers for values,
          and functions as procedures that your application can perform.</p>
        <h4> Data type conversion</h4>
        <p>JavaScript is a dynamically typed language. That means you don't have to specify the data type of a variable when you declare it, and data types are converted automatically as needed during script execution. So, for example, you could define a
          variable as follows:</p>
        <pre><code>var answer = 42;</code></pre>
        <p>And later, you could assign the same variable a string value, for example:</p>
        <pre><code>answer = 'Thanks for all the fish...';</code></pre>
        <p>Because JavaScript is dynamically typed, this assignment does not cause an error message.</p>
        <p>In expressions involving numeric and string values with the + operator, JavaScript converts numeric values to strings. For example, consider the following statements:</p>
        <pre><code>x = 'The answer is ' + 42 // "The answer is 42"
y = 42 + ' is the answer' // "42 is the answer"</code></pre>
        <p>In statements involving other operators, JavaScript does not convert numeric values to strings. For example:</p>
        <pre><code>'37' - 7 // 30
'37' + 7 // "377"</code></pre>
        <h4>Converting strings to numbers</h4>
        <p>In the case that a value representing a number is in memory as a string, there are methods for conversion.</p>
        <ul>
          <li>parseInt()</li>
          <li>parseFloat()</li>
        </ul>
        <p>parseInt only returns whole numbers, so its use is diminished for decimals. Additionally, a best practice for parseInt is to always include the radix parameter. The radix parameter is used to specify which numerical system is to be used.</p>
        <p>An alternative method of retrieving a number from a string is with the + (unary plus) operator:</p>
        <pre><code>'1.1' + '1.1' // '1.11.1'
(+'1.1') + (+'1.1') // 2.2   
// Note: the parentheses are added for clarity, not required.</code></pre>
        <h3>Literals</h4>
          <ul>
            <li>Array literals</li>
            <li>Boolean literals</li>
            <li>Floating-point literals</li>
            <li>Integers</li>
            <li>Object literals</li>
            <li>RegExp literals</li>
            <li>String literals</li>
          </ul>
          <h4>Array literals</h4>
          <p>An array literal is a list of zero or more expressions, each of which represents an array element, enclosed in square brackets ([]). When you create an array using an array literal, it is initialized with the specified values as its elements,
            and its length is set to the number of arguments specified.</p>
          <p>The following example creates the coffees array with three elements and a length of three:</p>
          <pre><code>var coffees = ['French Roast', 'Colombian', 'Kona'];</code></pre>
          <p>If an array is created using a literal in a top-level script, JavaScript interprets the array each time it evaluates the expression containing the array literal. In addition, a literal used in a function is created each time the function is
            called.
          </p>
          <p>Array literals are also Array objects. See Array and Indexed collections for details on Array objects.</p>
          <h4>Boolean literals</h4>
          <p>The Boolean type has two literal values: true and false.</p>
          <p>Do not confuse the primitive Boolean values true and false with the true and false values of the Boolean object. The Boolean object is a wrapper around the primitive Boolean data type. See Boolean for more information.</p>
          <h4>Numeric literals</h4>
          <p>Integers can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8) and binary (base 2).</p>
          <ul>
            <li>A decimal integer literal consists of a sequence of digits without a leading 0 (zero).</li>
            <li>A leading 0 (zero) on an integer literal, or a leading 0o (or 0O) indicates it is in octal. Octal integers can include only the digits 0-7.</li>
            <li>A leading 0x (or 0X) indicates a hexadecimal integer literal. Hexadecimal integers can include digits (0-9) and the letters a-f and A-F. (The case of a character does not change its value, e.g. 0xa = 0xA = 10 and 0xf = 0xF = 15.)</li>
            <li>A leading 0b (or 0B) indicates a binary integer literal. Binary integers can only include the digits 0 and 1.</li>
          </ul>
          <p>Some examples of integer literals are:</p>
          <pre><code>0, 117 and -345 (decimal, base 10)
015, 0001 and -0o77 (octal, base 8) 
0x1123, 0x00111 and -0xF1A7 (hexadecimal, "hex" or base 16)
0b11, 0b0011 and -0b11 (binary, base 2)</code></pre>
          <h4>Floating-point literals</h4>
          <p>A floating-point literal can have the following parts:</p>
          <ul>
            <li>A decimal integer which can be signed (preceded by "+" or "-"),</li>
            <li>A decimal point ("."),</li>
            <li>A fraction (another decimal number),</li>
            <li>An exponent.</li>
          </ul>
          <p>The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-"). A floating-point literal must have at least one digit and either a decimal point or "e" (or "E").</p>
          <p>More succinctly, the syntax is:</p>
          <pre><code>[(+|-)][digits].[digits][(E|e)[(+|-)]digits]</code></pre>
          <p>For example:</p>
          <pre><code>3.1415926
-.123456789
-3.1E+12
.1e-23</code></pre>
          <h4>Object literals</h4>
          <p>An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}). Do not use an object literal at the beginning of a statement. This will lead to an error or not behave as
            you expect, because the { will be interpreted as the beginning of a block.</p>
          <p>The following is an example of an object literal. The first element of the car object defines a property, myCar, and assigns to it a new string, "Saturn"; the second element, the getCar property, is immediately assigned the result of invoking
            the function (carTypes("Honda")); the third element, the special property, uses an existing variable (sales).</p>
          <pre><code>var sales = 'Toyota';

function carTypes(name) {
  if (name === 'Honda') {
    return name;
  } else {
    return "Sorry, we don't sell " + name + ".";
  }
}

var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales };

console.log(car.myCar);   // Saturn
console.log(car.getCar);  // Honda
console.log(car.special); // Toyota</code></pre>
          <p>Additionally, you can use a numeric or string literal for the name of a property or nest an object inside another. The following example uses these options.</p>
          <pre><code>var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' };

console.log(car.manyCars.b); // Jeep
console.log(car[7]); // Mazda</code></pre>
          <p>Object property names can be any string, including the empty string. If the property name would not be a valid JavaScript identifier or number, it must be enclosed in quotes. Property names that are not valid identifiers also cannot be accessed
            as a dot (.) property, but can be accessed and set with the array-like notation("[]").</p>
          <pre><code>var unusualPropertyNames = {
  '': 'An empty string',
  '!': 'Bang!'
}
console.log(unusualPropertyNames.'');   // SyntaxError: Unexpected string
console.log(unusualPropertyNames['']);  // An empty string
console.log(unusualPropertyNames.!);    // SyntaxError: Unexpected token !
console.log(unusualPropertyNames['!']); // Bang!</code></pre>
          <h4>RegExp literals</h4>
          <p>A regex literal (which is defined in detail later) is a pattern enclosed between slashes. The following is an example of a regex literal.</p>
          <pre><code>var re = /ab+c/;</code></pre>
          <h4>String literals</h4>
          <p>A string literal is zero or more characters enclosed in double (") or single (') quotation marks. A string must be delimited by quotation marks of the same type; that is, either both single quotation marks or both double quotation marks. The
            following are examples of string literals:</p>
          <pre><code>'foo'
"bar"
'1234'
'one line \n another line'
"John's cat"</code></pre>
          <p>You can call any of the methods of the String object on a string literal value—JavaScript automatically converts the string literal to a temporary String object, calls the method, then discards the temporary String object. You can also use the
            String.length property with a string literal:</p>
          <pre><code>console.log("John's cat".length) 
// Will print the number of symbols in the string including whitespace. 
// In this case, 10.</code></pre>
          <p>In ES2015, template literals are also available. Template literals are enclosed by the back-tick (` `) (grave accent) character instead of double or single quotes. Template strings provide syntactic sugar for constructing strings. This is similar
            to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.</p>
          <pre><code>// Basic literal string creation
`In JavaScript '\n' is a line-feed.`

// Multiline strings
`In JavaScript template strings can run
 over multiple lines, but double and single
 quoted strings cannot.`

// String interpolation
var name = 'Bob', time = 'today';
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix used to interpret the replacements and construction
POST`http://foo.org/bar?a=${a}&b=${b}
     Content-Type: application/json
     X-Credentials: ${credentials}
     { "foo": ${foo},
       "bar": ${bar}}`(myOnReadyStateChangeHandler);</code></pre>
          <p>You should use string literals unless you specifically need to use a String object. See String for details on String objects.</p>
          <!-- TODO: Add in the special characters and escaping characters parts -->
      </section>
      <section class="main-section" id="Control_flow_and_error_handling">
        <header>
          <h2>Control flow and error handling</h2>
        </header>
      </section>
      <section class="main-section" id="Loops_and_iteration">
        <header>
          <h2>Loops and iteration</h2>
        </header>
      </section>
      <section class="main-section" id="Functions">
        <header>
          <h2>Functions</h2>
        </header>
      </section>
      <section class="main-section" id="Expressions_and_operators">
        <header>
          <h2>Expressions and operators</h2>
        </header>
      </section>
      <section class="main-section" id="Numbers_and_dates">
        <header>
          <h2>Numbers and dates</h2>
        </header>
      </section>
      <section class="main-section" id="Text_formatting">
        <header>
          <h2>Text formatting</h2>
        </header>
      </section>
      <section class="main-section" id="Regular_expressions">
        <header>
          <h2>Regular expressions</h2>
        </header>
      </section>
      </section>
</body>
            
          
!
            
              body {
  font-family: "Roboto";
  margin-left: 0;
}

h2,
h3,
h4,
h5 {
  font-family: "Share Tech Mono";
}

h2 {
  font-size: 40pt;
  border-bottom: solid;
}

h3 {
  font-size: 20pt;
}

h4 {
  font-size: 15pt;
}

@media screen and (min-width: 480px) {
  #page-title {
    margin-bottom: 40px;
    border-bottom: solid;
    border-color: #72e26c;
  }

  h1 {
    color: #72e26c;
    font-family: "Share Tech Mono";
    font-size: 30pt;
    padding-left: 10px;
  }

  #side-navbar-flexbox {
    height: 100%;
    top: 0;
    position: fixed;
    border-right: solid;
    width: 250px;
    background-color: black;
    font-family: "Share Tech Mono";
  }

  .nav-link-container {
    height: 50px;
    border: solid;
    padding-left: 10px;
  }

  .nav-link {
    width: 100%;
    color: #72e26c;
    text-decoration: none;
    font-weight: bold;
  }

  #main-doc {
    margin-left: 250px;
    padding: 44px 30px 30px 30px;
  }
}

@media screen and (max-width: 480px) {
  body {
    margin: 0;
    padding: 0;
    background-color: black;
  }
  #page-title {
    margin-bottom: 40px;
    border-bottom: solid;
    border-color: #72e26c;
  }

  h1 {
    color: #72e26c;
    font-family: "Share Tech Mono";
    font-size: 30pt;
    padding-left: 10px;
  }

  #side-navbar-flexbox {
    top: 0;
    width: 100%;
    background-color: black;
    font-family: "Share Tech Mono";
  }

  .nav-link-container {
    height: 30px;
    border: solid;
    padding-left: 10px;
  }

  .nav-link {
    width: 100%;
    color: #72e26c;
    text-decoration: none;
    font-weight: bold;
  }

  #main-doc {
    padding: 44px 30px 30px 30px;
    background-color: white;
  }
}

pre {
  background-color: black;
  max-width: 700px;
  border-radius: 10px;
  padding: 15px;
  white-space: pre-wrap;
}

code {
  color: #72e26c;
  font-family: "Share Tech Mono";
}

            
          
!
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