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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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>
      
<main id="main-doc">
            <nav id="navbar">
              <header id="nav-title">Learn the basics of Java language</header>
              <ul>
                <li><a class="nav-link" href="#introduction">Introduction</a></li>
                <li><a class="nav-link" href="#hello_world">Hello World</a></li>
                <li><a class="nav-link" href="#variables_and_types">Variables and Types</a></li>
                <li><a class="nav-link" href="#conditionals">Conditionals</a></li>
                <li><a class="nav-link" href="#arrays">Arrays</a></li>
                <li><a class="nav-link" href="#loops">Loops</a></li>
                <li><a class="nav-link" href="#functions">Functions</a></li>
                <li><a class="nav-link" href="#objects">Objects</a></li>
                <li><a class="nav-link" href="#reference">Reference</a></li>
              </ul>
            </nav>
            <section id="content-section">
            <section class="main-section" id="introduction">
                <header>Introduction</header>
                <p>Java is one of the most popular and widely used programming language and platform. A platform is an environment that helps to develop and run programs written in any programming language.
                Java is fast, reliable and secure. From desktop to web applications, scientific supercomputers to gaming consoles, cell phones to the Internet.<br>
                About Java:
                <ul>
                  <li><strong>Java is a simple language:</strong> Java is easy to learn and its syntax is clear and concise. It is based on C++ (so it is easier for programmers who know C++). Java has removed many confusing and rarely-used features e.g. explicit pointers, operator overloading etc.</li>
                  <li><strong>Java is a platform-independent language:</strong> The programs written in Java language, after compilation, are converted into an intermediate level language called the bytecode which is apart of the Java platform irrespective of the machine on which the programs run.</li>
                  <li><strong>Java is an object-oriented programming language:</strong> OOP makes the complete program simpler by dividing it into a number of objects. The objects can be used as a bridge to have data flow from one function to another.</li>
                  <li><strong>Java is a multithreaded language:</strong> Java can perform many tasks at once by defining multiple threads.</li>
                  <li><strong>Java programs can create applets:</strong> Applets are programs that run in web browsers.</li>
                  <li><strong>Java does not require any preprocessor:</strong> It does not require inclusion of header files for creating a Java application.</li>
                </ul>
                
                </p>
            </section>
            <section class="main-section" id="hello_world">
                <header>Hello World</header>
                  <p>Java is an object oriented language (OOP). Java objects are part of so-called "Java classes".</p>
<p>Let's go over the Hello world program, which simply prints "Hello, World!" to the screen</p>
<pre class="begin"><code>
public class Main {
public static void main(String[] args) {
   System.out.println("Hello World!");
}
}
</code></pre>
              <p>The first line defines a class called Main.</p>
<code class="start">public class Main {}</code>
              <p>In Java, every line of code that can actually run needs to be inside a class. This line declares a class named Main, which is public, that means that any other class can access it. This is not important for now, so don't worry. For now, we'll just write our code in a class called Main, and talk about objects later on.

Notice that when we declare a public class, we must declare it inside a file with the same name (Main.java), otherwise we'll get an error when compiling.

When running the examples on the site, we will not use the public keyword, since we write all our code in one file.

The next line is:</p>
<code class="start">public static void main(String[] args) {</code>
              <p>This is the entry point of our Java program. the main method has to have this exact signature in order to be able to run our program.</p>
              <ul>
                <li><span>public<span> again means that anyone can access it.</li>
                <li><span>static<span> means that you can run this method without creating an instance of Main.</li>
                <li><span>void<span> means that this method doesn't return any value.</li>
                <li><span>main<span> is the name of the method.</li>  
              </ul>
<code class="start">System.out.println("This will be printed");</code>
              <ul>
                <li><span>System</span> is a pre-defined class that Java provides us and it holds some useful methods and variables.</li>
                <li><span>out<span> is a static variable within System that represents the output of your program (stdout).</li>
                <li><span>println<span> is a method of out that can be used to print a line.                       </li>
             </ul>
            </section>
            <section class="main-section" id="variables_and_types">
                <header>Variables and Types</header>
                <p>Although Java is object oriented, not all types are objects. It is built on top of basic variable types called primitives.</p>
                <p>Here is a list of all primitives in Java:</p>
                <ul>
                  <li><span>byte</span> (number, 1 byte)</li>
                  <li><span>short</span> (number, 2 bytes)</li>
                  <li><span>int</span> (number, 4 bytes)</li>
                  <li><span>long</span> (number, 8 bytes)</li>
                  <li><span>float</span> (float number, 4 bytes)</li>
                  <li><span>double</span> (float number, 8 bytes)</li>
                  <li><span>char</span> (a character, 2 bytes)</li>
                  <li><span>boolean</span> (true or false, 1 byte)</li>
                 </ul>
                 <p>String is not a primitive. It's a real type, but Java has special treatment for String.Here are some ways to use a string:</p>
<pre class="begin"><code>
// Create a string with a constructor
String s1 = new String("Who let the dogs out?");
// Just using "" creates a string, so no need to write it the  previous way.
String s2 = "Who who who who!";
// Java defined the operator + on strings to concatenate:
String s3 = s1 + s2;
</code></pre>
            </section>
            <section class="main-section" id="conditionals">
                <header>Conditionals</header>
               <p>Java uses boolean variables to evaluate conditions. The boolean values true and false are returned when an expression is compared or evaluated. For example:</p>
<pre class="begin"><code>
int a = 4;
boolean b = a == 4;
if (b) {
   System.out.println("It's true!");
}
</code></pre>
              <p>The if, else statement in Java is pretty simple.</p>
<pre><class="begin"><code>
if (a == b) {
    // a and b are equal
}</code></pre>
              <p>And we can also add an else statement after an if, to do something if the condition is not true</p>
<pre class="begin"><code>
if (a == b) {
    // a and b are equal 
} else {
   // a and b are not equal... :/
}
</code></pre>
            </section>
            <section class="main-section" id="arrays">
                <header>Arrays</header>
              <p>Arrays in Java are also objects. They need to be declared and then created. In order to declare a variable that will hold an array of integers, we use the following syntax:</p>
<code>int[] arr;</code>
              <p>Notice there is no size, since we didn't create the array yet.</p>
<code>arr = new int[10];</code>
              <p>This will create a new array with the size of 10. We can check the size by printing the array's length:</p>
<code class="start">System.out.println(arr.length);</code>
              <p>We can access the array and set values:</p>
<pre class="begin"><code>
arr[0] = 4;
arr[1] = arr[0] + 5;
</code></pre>
              <p>We can also create an array with values in the same line:</p>
<code class="start">int[] arr = {1, 2, 3, 4, 5};</code>
            </section>
            <section class="main-section" id="loops">
                <header>Loops</header>
              <p>There are two kind of loops in Java, for and while.</p>
              <p>The for loop has three sections:</p>
<code class="begin">for (int i = 0; i < 3; i++) {}</code>
                <ul>
                  <li>First section runs when we enter the loop</li>
                  <li>Second section is the gate keeper, if it returns true, we run the statements in the loop, if it returns false, we exit the loop. It runs right after the first section for the first time, then every time the loop is finished and the third section is run.                        </li>
                  <li>The third section is the final statement that will run every time the loop                         runs.</li>
                </ul>
                <p>We can omit the first and third section of the loop (although it will be weird), and the loop will still work:</p>
<code>for (;i < 5;) {}</code>
                  <p>While syntax is very similar to the previous for we looked at:<p>
    <code>while (condition) {}</code>
                  <p>The condition will run for the first time when entering and every time the loop is done. If it returns false, the loop will not run.</p>
                  <p>If we want the loop to always run at least one, we can use do-while</p>
<pre class="begin"><code>
do {

} while(condition);
</code></pre>
                    <p>Another version of for, is the foreach. The keyword we use is still for, but when we want to iterate on the elements inside an array we can simply use it:</p>
<pre class="begin"><code>
int[] arr = {2, 0, 1, 3};
for (int el : arr) {
   System.out.println(el);
}
</code></pre>
            </section>
            <section class="main-section" id="functions">
                <header>Functions</header>
              <p>In Java, all function definitions must be inside classes. We also call functions methods. Let's look at an example method</p>
<pre class="begin"><code>
public class Main {
    public static void foo() {
        // Do something here
    }
}</pre></code>
                <p>foo is a method we defined in class Main. Notice a few things about foo.</p>
                <ul>
                  <li>static means this method belongs to the class Main and not to a specific instance of Main. Which means we can call the method from a different class like that Main.foo().                     </li>
                  <li>void means this method doesn't return a value. Methods can return a single value in Java and it has to be defined in the method declaration. However, you can use return by itself to exit the method.</li>
                  <li>This method doesn't get any arguments, but of course Java methods can get arguments as we'll see further on.</li>
                </ul>
                <p>I always like to say that arguments to Java methods are passed by value, although some might disagree with my choice of words, I find it the best way to explain and understand how it works exactly.</p>
<pre class="begin"><code>
public void bar(int num1, int num2) {
  
}
</code> </pre>
            <p>Here is a another place in the code, where bar is called</p>
<pre class="begin"><code>
int a = 3;
int b = 5;
bar(a, b);
</code></pre>
              <p>If the arguments were objects, the rules remain the same, but it acts a bit differently. Here is a an example:</p>
<pre class="begin"><code>
public void bar2(Student s1, Student s2) {
  
}</code></pre>
              <p>And here is how we use it</p>
<pre><code>
Student joe = new Student("joe");
Student jack = new Student("jack");
bar2(joe, jack);
</code></pre>
            </section>
            <section class="main-section" id="objects">
                <header>Objects</header>
                <p>Everything in Java is within classes and objects. Java objects hold a state, state are variables which are saved together within an object, we call them fields or member variables.</p>
              <p>Let start with an example:</p>
<pre class="begin"><code>
class Point {
   int x;
   int y;
}
</code></pre>
              <p>This class defined a point with x and y values.</p>
              <p>In order to create an instance of this class, we need to use the keyword new</p>
<code class="start">Point p = new Point();</code>
              <p>In this case, we used a default constructor (constructor that doesn't get arguments) to create a Point. All classes that don't explicitly define a constructor has a default constructor that does nothing.</p>
              <p>We can define our own constructor:</p>
<pre class="begin"><code>
class Point {
    int x;
    int y;

    Point(int x, int y) {
        this.x = x;
        this.y = y;
    }
}
</code></pre>
              <p>This means we can not longer use the default constructor new Point(). We can now only use the defined constructor new Point(4, 1).</p>
              <p>We can define more than one constructor, so Point can be created in several ways. Let's define the default constructor again.</p>
<pre class="begin"><code>
class Point {
    int x;
    int y;

    Point() {
      this(0, 0);
    }

    Point(int x, int y) {
      this.x = x;
      this.y = y;
    }
}
</code></pre>
            </section>
            <section class="main-section" id="reference">
                <header>Reference</header>
                <p>All the documentation in this page is taken from:
                   <ul id="ref-link">
                     <li><a href="https://www.learnjavaonline.org" target="_blank">Learnjavaonline</a></li>
                     <li><a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a></li>
              </ul></p>
            </section>
        </section>
          </main>


              
            
!

CSS

              
                * {
    box-sizing: border-box;
  }

body {
   width: 100%;
   background-color: #eee;
}

#main-doc {
    position: relative;
    display: flex;
    justify-content: space-around;
    /*opacity: 0.9;*/
}
@media (max-width: 650px){
    #main-doc {
        width: 100%;
        display: flex;
        flex-direction: column;

    }
}

#navbar {
    width: 25%;
    position: fixed;
    top: 0;
    left: 5px;
    display: flex;
    flex-direction: column;
}
@media (max-width: 650px){
    #navbar {
        width: 100%;
        position: fixed;
        top: 0;
        margin-top: 0px;
        padding: 5px;
        height: 200px;
        background: #000000;
        overflow-y: scroll;
    }
}

#nav-title{
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 15px;
    font-size: 30px;
}

#navbar ul {
    list-style: none;
    padding-left: 0px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
}

#navbar li {
    background-color: #FFF;
    border-left-style: solid;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    margin-bottom: 5px;
}

#navbar a:hover {
    text-decoration: underline;
}


.nav-link {
    text-decoration: none;
    color: #000000;
    font-size: 25px;
}
@media (max-width: 650px){
    #nav-title{
        padding: 10px;
        font-size: 20px;
    }
    #navbar li {
        padding: 5px;
        margin-bottom: 5px;
    }
    .nav-link {
        font-size: 15px;
    }
}

#content-section {
    background-color: #FFF;
    width: 75%;
    display: flex;
    flex-direction: column;
    padding: 30px;
    margin-left: 320px;
}

@media (max-width: 650px){
    #content-section {
        width: 100%;
        margin-top: 200px;
        margin-left: 0px;
    }
}

#content-section .main-section {
    margin-bottom: 20px;
}

.main-section header {
    font-size: 35px;
}

.main-section p {
    font-size: 20px;
}
.main-section ul li {
    margin-bottom: 5px;
    font-size: 20px;
}

@media (max-width: 650px){
    #content-section .main-section {
        margin-bottom: 15px;
    }
    
    .main-section header {
        font-size: 25px;
    }
    
    .main-section p {
        font-size: 20px;
    }

}

pre, code{
    background-color: #DDD;
    display: flex;
    align-items: center;
    padding: 5px;

}








              
            
!

JS

              
                // !! 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. 

              
            
!
999px

Console