Pen Settings

HTML

CSS

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

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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
  <header id="header">C++ Documentation</header>
  <ul>
    <li><a class="nav-link" href="#Introduction">Introduction</a></li>
    <li><a class="nav-link" href="#C_&_C++">C & C++</a></li>
    <li><a class="nav-link" href="#Hello_World">Hello World</a></li>
    <li><a class="nav-link" href="#Variables">Variables</a></li>
    <li><a class="nav-link" href="#Constants">Constants</a></li>
    <li><a class="nav-link" href="#Data_Types">Data Types</a></li>
    <li><a class="nav-link" href="#Loops">Loops</a></li>
    <li><a class="nav-link" href="#Refrence">Refrence</a></li>
  </ul>
</nav>
<main id="main-doc">
  <section class="main-section" id="Introduction">
    <header>Introduction</header>
    <article>
      <p>C++ is a general-purpose programming language that was developed as an enhancement of the C language to include object-oriented paradigm. It is an imperative and a compiled language.</p>
      <p>C++ is a middle-level language rendering it the advantage of programming low-level (drivers, kernels) and even higher-level applications (games, GUI, desktop apps etc.). The basic syntax and code structure of both C and C++ are the same. </p>
      <ul>
        <li>Simple: It is a simple language in the sense that programs can be broken down into logical units and parts, has a rich library support and a variety of data-types.</li>
        <li>Rich library support: Has a rich library support (Both standard ~ built-in data structures, algorithms etc.) as well 3rd party libraries (e.g. Boost libraries) for fast and rapid development.</li>
        <li>Object-Oriented: One of the strongest points of the language which sets it apart from C. Object-Oriented support helps C++ to make maintainable and extensible programs. i.e. Large-scale applications can be built. Procedural code becomes difficult to maintain as code-size grows.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="C_&_C++">
    <header>C & C++</header>
    <article>
      <p>The difference between C and C++ wraps up to one conclusion that as a programmer, it’s your decision to choose the language for your project.</p>
      <p>After a glance at the features, drawbacks, and advantages of both C and C++, you could make out that both of the languages are suitable for different kinds of projects.
        C is more suitable for low programming level applications, but also is one of the foundational languages for a beginner.</p>
      <p>C++ as an extension of this language provides the additional OOP concepts that help to build complex applications faster, better, and secure. Plus, the demand for this language proceeds to a bright scope for developers. Therefore, to make your unbiased decision on which one is between C and C++, you need a thorough reading of this article.</p>
    </article>
  </section>
  <section class="main-section" id="Hello_World">
    <header>Hello World</header>
    <article>
      <p>A "Hello, World!" is a simple program that outputs Hello, World! on the screen. Since it's a very simple program, it's often used to introduce a new programming language to a newbie</p>
      <h5>Let's see how C++ "Hello, World!" program works</h5>
      <code>// Your First C++ Program

        #include <iostream>

          int main() {
          std::cout << "Hello World!" ; return 0; } </code>
            <br>
            Output:
            <code>Hello World!</code>
            <p> Select the code in the pad and hit Ctrl+R to watch it unfold in your
              browser!</p>
    </article>
  </section>
  <section class="main-section" id="Variables">
    <header>Variables</header>
    <article>
      <p>A variable is a name given to a memory location. It is the basic unit of storage in a program</p>
      <ul>
        <li>The value stored in a variable can be changed during program execution.</li>
        <li>A variable is only a name given to a memory location, all the operations done on the variable effects that memory location.</li>
        <li>In C++, all the variables must be declared before use.</li>
      </ul>
      <h6>How to declare variables?</h6>
      <p>A typical variable declaration is of the form:</p>
      <code>
        // Declaring a single variable
        type variable_name;

        // Declaring multiple variables:
        type variable1_name, variable2_name, variable3_name;
      </code>
      <p>A variable name can consist of alphabets (both upper and lower case), numbers and the underscore ‘_’ character. However, the name must not start with a number.
      </p>
      <h6>Examples: </h6>
      <code>// Declaring float variable
        float simpleInterest;

        // Declaring integer variable
        int time, speed;

        // Declaring character variable
        char var; </code>
      <h6>Types of variables</h6>
      <ul>
        There are three types of variables based on the scope of variables in C++:
        <li>Local Variables</li>
        <li>Instance Variables</li>
        <li>Static Variables</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Constants">
    <header>Constants</header>
    <article>
      <p>As the name suggests the name constants are given to such variables or values in C/C++ programming language which cannot be modified once they are defined. They are fixed values in a program. There can be any types of constants like integer, float, octal, hexadecimal, character constants, etc. Every constant has some range.</p>
      <h6>Defining Constants: </h6>
      <ul>
        <li>Using #define preprocessor directive</li>
        <li>Using a const keyword</li>
      </ul>
      <h6>Literals</h6>
      <ul>
        <li>Using #define preprocessor directive: This directive is used to declare an alias name for existing variable or any value. We can use this to declare a constant as shown below:
        </li>
        <code>#define identifierName value</code>
        <li>Using a const keyword: Using const keyword to define constants is as simple as defining variables, the difference is you will have to precede the definition with a const keyword.</li>
      </ul>
    </article>
  </section>
  <section class="main-section" id="Data_Types">  
    <header>Data Types</header>
    <article>
      <p>All variables use data-type during declaration to restrict the type of data to be stored. Therefore, we can say that data types are used to tell the variables the type of data it can store. Whenever a variable is defined in C++, the compiler allocates some memory for that variable based on the data-type with which it is declared. Every data type requires a different amount of memory.</p>
      <p> Data types in C++ is mainly divided into three types:</p>
      <ul>
        <li>Primitive Data Types: These data types are built-in or predefined data types and can be used directly by the user to declare variables. example: int, char , float, bool etc. Primitive data types available in C++ are:
          <ol>
            <li>Integer</li>
            <li>Character</li>
            <li>Boolean</li>
            <li>Floating Point</li>
            <li>Double Floating Point</li>
            <li>Valueless or Void</li>
          </ol>
        </li>

        <li>Derived Data Types: The data-types that are derived from the primitive or built-in datatypes are referred to as Derived Data Types. These can be of four types namely:
          <ol>
            <li>Function</li>
            <li>Array</li>
            <li>Pointer</li>
            <li>Reference
            </li>

          </ol>
        </li>
        <li>Abstract or User-Defined Data Types: These data types are defined by user itself. Like, defining a class in C++ or a structure. C++ provides the following user-defined datatypes:
          <ol>
            <li>Class</li>
            <li>Structure</li>
            <li>Union</li>
            <li>Enumeration</li>
            <li>Enumeration</li>
          </ol>
        </li>

      </ul>

    </article>
  </section>
  <section class="main-section" id="Loops">
    <header>Loops</header>
    <article>
      <p>Loops in programming come into use when we need to repeatedly execute a block of statements.There are mainly two types of loops:</p>
      <ul>
        <li>Entry Controlled loops: In this type of loops the test condition is tested before entering the loop body. For Loop and While Loop are entry controlled loops.</li>
        <li>Exit Controlled Loops: In this type of loops the test condition is tested or evaluated at the end of loop body. Therefore, the loop body will execute atleast once, irrespective of whether the test condition is true or false. do – while loop is exit controlled loop.</li>
      </ul>
      <h6>For Loop</h6>
      <p>A for loop is a repetition control structure which allows us to write a loop that is executed a specific number of times. The loop enables us to perform n number of steps together in one line.</p>
      <code>for (initialization expr; test expr; update expr)
        {
        // body of the loop
        // statements we want to execute
        }</code>
      <h6>While Loop</h6>
      <p>While studying for loop we have seen that the number of iterations is known beforehand, i.e. the number of times the loop body is needed to be executed is known to us. while loops are used in situations where we do not know the exact number of iterations of loop beforehand. The loop execution is terminated on the basis of test condition.</p>
      <code>initialization expression;
        while (test_expression)
        {
        // statements

        update_expression;
        }</code>
      <h6>Do While Loop</h6>
      <p>In do while loops also the loop execution is terminated on the basis of test condition. The main difference between do while loop and while loop is in do while loop the condition is tested at the end of loop body, i.e do while loop is exit controlled whereas the other two loops are entry controlled loops.</p>
      <code>initialization expression;
        do
        {
        // statements

        update_expression;
        } while (test_expression);</code>
    </article>
  </section>
  <section class="main-section" id="Refrence">
    <header>Refrence</header>
    <article>
      All the documentation in this page is taken from <a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=lbp" id="gfg">GeeksforGeeks.</a>
    </article>
  </section>
</main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Lora&family=Roboto&display=swap');

html ,body{
  font-family: 'Roboto', sans-serif;
  background-color: #e6e6e6;
}
header{
  font-family: 'Lora', serif;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 5px;
}
nav> ul> li{
  list-style-type: none;
}
code{
  display: block;
  text-align: left;
  white-space: pre-line;
  position: relative;
  word-break: normal;
  word-wrap: normal;
  line-height: 2;
  background-color:#000000;
  color: #FFFFFF;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}
h6{
  font-size: 0.9rem;
}

#header{
  font-family: 'Lora', serif;
  font-size: 2.2rem;
  font-weight: bold;
}
#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  background-color: #dee1e3;
  border-color: rgba(0, 22, 22, 0.4);
}
#navbar ul{
  height: 88%;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
#navbar li {
  color: #4d4e53;
  border-top: 1px solid;
  list-style: none;
  position: relative;
  width: 100%;
}
#navbar a {
  display: block;
  padding: 20px 40px;
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}
#navbar a:hover{
  background-color: #e6e6e6;
  color: #EEA200;
}
#gfg{
  color: #00700b;
  text-decoration: none;
}
#gfg:hover{
  background-color: #ffffff;
}
#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}
@media only screen and (max-width: 815px) {
   #navbar ul {
    border: 1px solid;
    height: 175px;
  }
  #navbar {
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    max-height: 275px;
    border: none;
    z-index: 1;
    border-bottom: 2px solid;
  }
  #main-doc{
    position: relative;
    margin-left: 0px;
    margin-top: 270px;
  }
  #header{
    text-align:center;
    font-size:1.8rem;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console