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://kit.fontawesome.com/3fb55c09cc.js" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
 
<body>
    <header id="header">
        <div id="logo">
            <i class="fa-brands fa-wolf-pack-battalion"></i>
            <h1>MikeDocs</h1>
        </div>

        <div id="social-header">
            <a href="https://www.facebook.com/maikel.iriarte.5/" target="_blank"><i
                    class="fa-brands fa-facebook"></i></a>
            <a href="https://www.freecodecamp.org/Mike01" target="_blank"><i
                    class="fa-brands fa-free-code-camp"></i></a>
        </div>
    </header>

    <input type="checkbox" id="check">
    <label for="check">
        <i id="list" class="fa-solid fa-list"></i>
        <i id="cancel" class="fa-solid fa-square-xmark"></i>
    </label>

    <section id="sidebar">
        <ul>
            <li><a onclick="handleCloseNav()" href="#introduction_to_recursion">Introduction</a></li>
            <li><a onclick="handleCloseNav()" href="#recursive_function_call">Recursive function</a></li>
            <li><a onclick="handleCloseNav()" href="#stack_limitation">Stack size</a></li>
            <li><a onclick="handleCloseNav()" href="#recursive_functions_and_algorithns">Functions and algorithms</a></li>
            <li><a onclick="handleCloseNav()" href="#base_case">Base case</a></li>
            <li><a onclick="handleCloseNav()" href="#single_recursion_and_multiple_recursion">Single/multiple recursion</a></li>
            <li><a onclick="handleCloseNav()" href="#indirect_recursion">Indirect Recursion</a></li>
            <li><a onclick="handleCloseNav()" href="#anonymous_recursion">Anonymous recursion</a></li>
            <li><a onclick="handleCloseNav()" href="#recursion_versus_iteration">Recursion and iteration</a></li>
            <li><a onclick="handleCloseNav()" href="#container-over">More information</a></li>
        </ul>
    </section>

    <nav id="navbar">
        <header>Recursion</header>
        <ul>
            <li><a class="nav-link" href="#introduction_to_recursion">Introduction to recursion</a></li>
            <li><a class="nav-link" href="#recursive_function_call">Recursive function call</a></li>
            <li><a class="nav-link" href="#stack_limitation">Stack limitation</a></li>
            <li><a class="nav-link" href="#recursive_functions_and_algorithns">Recursive functions and algorithns</a></li>
            <li><a href="#base_case">Base case</a></li>
            <li><a class="nav-link" href="#single_recursion_and_multiple_recursion">Single recursion and multiple recursion</a></li>
            <li><a class="nav-link" href="#indirect_recursion">Indirect Recursion</a></li>
            <li><a class="nav-link" href="#anonymous_recursion">Anonymous recursion</a></li>
            <li><a class="nav-link" href="#recursion_versus_iteration">Recursion versus iteration</a></li>
            <li><a href="#container-over">More information</a></li>
        </ul>
    </nav>


    <main id="main-doc">
        <section class="main-section" id="introduction_to_recursion">
            <header class="subt">Introduction to Recursion</header>
            <p class="content">The act of a function calling itself, recursion is used to solve problems
                that contain smaller sub-problems.A recursive function can receive two
                inputs: a base case (ends recursion) or a recursive case (resumes recursion).</p>
          <h2>Why recursion?</h2>
          <ul>
            <li> Learning recursion makes you a better programmer</li>
            <li>Using recursion makes the code clearer</li>
            <li>Recursion is data structure's best friend</li>
            <li>helps you improve your problem solving skills</li>
            <li>Recursion code is simpler and shorter than an iterative code</li>
          </ul>
        </section>

        <section class="main-section" id="recursive_function_call">
            <header class="subt" id="title">Recursive function call</header>
            <p class="content">The following Python code defines a function that takes a number, prints it, and then
                calls itself again with the number's value -1. It keeps going until the number is
                equal to 0, in which case it stops.</p>
            <p class="content exercise"><code>&nbsp<span class="blue">def</span> <span class="red">recurse</span>(x): <br>
                &nbsp &nbsp <span class="blue">if</span> x > <span class="green">0</span>:<br>
                &nbsp &nbsp &nbsp &nbsp <span class="blue">print</span>(x) <br>
                &nbsp &nbsp &nbsp &nbsp <span class="blue">recurse</span>(x - <span class="green">1</span>) <br><br>

                &nbsp recurse(10)</code></p>
            <p class="content">The output will look like this: <br><br>

                10 9 8 7 6 5 4 3 2 1</p>
        </section>

        <section class="main-section" id="stack_limitation">
            <header class="subt title" >Stack limitation</header>
            <p class="content">The following code defines a function that returns the maximum size
                of the call stack available in the JavaScript runtime in which the
                code is run.</p>
            <p class="content exercise"><span class="blue"><code>const</span> <span class="red">getMaxCallStackSize</span> =
                (i)
                => { <br>
                &nbsp<span class="blue">try</span> { <br>
                &nbsp<span class="blue">return</span> <span class="red">getMaxCallStackSize</span>(++i);<br>
                &nbsp} <span class="blue">catch</span> { <br>
                &nbsp &nbsp<span class="blue">return</span> i; <br>
                &nbsp} <br>
                }; <br>

                console.<span class="red">log</span>(<span class="red">getMaxCallStackSize</span>(0));</code></p>
        </section>

        <section class="main-section" id="recursive_functions_and_algorithns">
            <header class="subt title" >Recursive functions and algorithns</header>
            <p class="content">A common algorithm design tactic is to divide a problem into sub-problems of the
                same type as the original, solve those sub-problems, and combine the results.
                This is often referred to as the divide-and-conquer method; when combined with
                a lookup table that stores the results of previously solved sub-problems
                (to avoid solving them repeatedly and incurring extra computation time),
                it can be referred to as dynamic programming or memoization.</p>

            <h4 class="subt title" id="base_case">Base case</h4>
            <p class="content">A recursive function definition has one or more base cases,
                meaning input(s) for which the function produces a result trivially
                (without recurring), and one or more recursive cases, meaning input(s)
                for which the program recurs (calls itself). For example, the factorial
                function can be defined recursively by the equations 0! = 1 and, for all n > 0,
                n! = n(n - 1)!. Neither equation by itself constitutes a complete definition;
                the first is the base case, and the second is the recursive case. Because the
                base case breaks the chain of recursion, it is sometimes also called the
                "terminating case".</p>
        </section>

        <section class="main-section" id="single_recursion_and_multiple_recursion">
            <header class="subt title" >Single recursion and multiple recursion</header>
            <p class="content">Recursion that contains only a single self-reference is known as <b>single
                    recursion</b>, while recursion that contains multiple self-references is known
                as <b>multiple recursion</b>. Standard examples of single recursion include list
                traversal, such as in a linear search, or computing the factorial function,
                while standard examples of multiple recursion include tree traversal, such as
                in a depth-first search.</p>
        </section>

        <section class="main-section" id="indirect_recursion">
            <header class="subt title">Indirect recursion</header>
            <p class="content">Most basic examples of recursion, and most of the examples presented
                here, demonstrate direct recursion, in which a function calls itself. Indirect
                recursion occurs when a function is called not by itself but by another function
                that it called (either directly or indirectly). For example, if f calls f, that
                is direct recursion, but if f calls g which calls f, then that is indirect
                recursion of f. Chains of three or more functions are possible; for example,
                function 1 calls function 2, function 2 calls function 3, and function 3 calls
                function 1 again.</p>

            <p class="content">Indirect recursion is also called mutual recursion, which is a
                more symmetric term, though this is simply a difference of emphasis, not a
                different notion. That is, if f calls g and then g calls f, which in turn calls
                g again, from the point of view of f alone, f is indirectly recursing, while
                from the point of view of g alone, it is indirectly recursing, while from the
                point of view of both, f and g are mutually recursing on each other. Similarly a
                set of three or more functions that call each other can be called a set of
                mutually recursive functions.</p>
        </section>

        <section class="main-section" id="anonymous_recursion">
            <header class="subt title" >Anonymous recursion</header>
            <p class="content">Recursion is usually done by explicitly calling a function by name.
                However, recursion can also be done via implicitly calling a function based on the
                current context, which is particularly useful for anonymous functions, and is known
                as anonymous recursion.</p>

        </section>

        <section class="main-section" id="recursion_versus_iteration">
            <header class="subt title">Recursion versus iteration</header>
            <p class="content">Recursion and iteration are equally expressive: recursion can be
                replaced by iteration with an explicit call stack, while iteration can be replaced
                with tail recursion. Which approach is preferable depends on the problem under
                consideration and the language used. In imperative programming, iteration is
                preferred, particularly for simple recursion, as it avoids the overhead of function
                calls and call stack management, but recursion is generally used for multiple
                recursion. By contrast, in functional languages recursion is preferred, with tail
                recursion optimization leading to little overhead. Implementing an algorithm using
                iteration may not be easily achievable.</p>
            <p class="content exercise"><code>function recursive(n)<br>
                &nbsp if n == base <br>
                &nbsp &nbsp return xbase <br>
                &nbsp &nbsp &nbsp else <br>
                &nbsp &nbsp &nbsp &nbsp return f(n, recursive(n-1))</code></p>
            <br>
            <p class="content exercise"><code>function iterative(n) <br>
                &nbsp x = xbase <br>
                &nbsp for i = base+1 to n <br>
                &nbsp &nbsp x = f(i, x) <br>
                &nbsp &nbsp &nbsp return x</code></p>
        </section>
    </main>

    <footer>
        <div id="container-over">
            <p id="creator"><code>Mike01's Project</code></p>
            <div id="social_footer">
                <a href="https://www.facebook.com/maikel.iriarte.5/" target="_blank"><i
                        class="fa-brands fa-facebook"></i></a>
                <a href="https://www.freecodecamp.org/Mike01" target="_blank"><i
                        class="fa-brands fa-free-code-camp"></i></a>
            </div>

        </div>
        <diV id="description_container">
            <div id="description">
                <h5>About The creator</h5>
                <p>This is the documentation page I have created for the responsive web design Certification in
                    Freecodecamp.
                    I started this journey of becoming a software developer many years ago, when I was 17 years old, but
                    the lack of resources and the bad economy in my country did not allow me to do it. Nonetheless, I've
                    taken
                    it back with faith and a new opportunity. In october I discovered the Freecodecamp website and its
                    youtube channel
                    and at first I couldn't beleive it. Since then I've been taking all of its courses and now I am
                    building the
                    responsive web design certification projects.
                </p>
            </div>
            <div></div>
            <div id="resources">
                <p>Resources</p>
                <ul>
                    <li><a href="https://en.wikipedia.org/wiki/Recursion_(computer_science)" target="_blank">MDN Web
                            Docs</a></li>
                    <li><a href="https://en.wikipedia.org/wiki/Recursion_(computer_science)"
                            target="_blank">Wikipedia</a></li>
                    <li><a href="https://www.programiz.com/javascript/recursion" target="_blank">Programiz</a></li>
                </ul>
            </div>
            <div id="more">
                <p>More</p>
                <ul>
                    <li><a href="https://www.freecodecamp.org/learn/" target="_blank">FreeCodeCamp</a></li>
                    <li><a href="https://www.youtube.com/c/Freecodecamp" target="_blank">Youtube Channel</a></li>
                    <li><a href="https://forum.freecodecamp.org/" target="_blank">FCC Forum</a></li>
                </ul>

            </div>
            <div></div>
        </diV>
    </footer>
    <script>
        const sidebarLinks = document.querySelectorAll("#sidebar a");
        const navCheckBox = document.querySelector("#check");

        function handleCloseNav() {
            navCheckBox.checked = '';
        }
        sidebarLinks.forEach((link) => {
            link.addEventListener("click", handleCloseNav);
        });
    </script>

</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Fira+Sans:wght@200;400&family=Playfair+Display&family=Roboto:ital,wght@0,400;1,100&family=Shizuru&family=Source+Code+Pro:wght@200;600&family=Source+Sans+Pro:wght@200&display=swap');

html, body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
* {
     text-decoration: none;
     list-style: none;
 }
/*HEADER STYLE*/
#header {
    display: flex;
    width: 100%;
    background-color: #1167b1;
}
#logo {
    display: flex;
    color: aliceblue;
}
#logo i {
    margin-top: 32px;
    transform: scale(2);
    margin-left: 15px;
}
#logo h1 {
    font-size: 25px;
    margin-left: 10px;
}
#social-header {
    margin-top: 30px;
}
#social-header a {
    text-decoration: none;
    color: aliceblue;
}
#social-header {
    margin-left: auto;
    margin-right: 25px;
    transform: scale(1.5);
}
#social-header a:nth-child(2) {
    margin-left: 5px;
}


/*LIST OF TOPICS STYLE*/
input {
    display: none;
}
/*No display and mobile and tablet version*/
#navbar {
    display: none;
}
#sidebar {
    opacity: 0.9;
    position: absolute;
    left: -600px;
    width: 100vw;
    background-color: #d9dddc;
    transition: all .5s ease;
}
#sidebar ul {
    padding: 0;
    width: 100vw;
    line-height: 45px;
}
#sidebar ul li {
    margin-top: 40px;
}
#sidebar ul li a {
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    display: block;
    color: #333;
}
#sidebar label a:nth-child(1) {
    margin-top: 50px;
} 
#check {
    width: 100vw;
}
label i {
    z-index: 1111;
    border-radius: 10px;
    padding: 3px 7px;
    color: #fff;
    background-color: #1167b1;
    font-size: 28px;
    position: absolute;
    margin-top: 10px;
    transition: all .6s ease;
}
label i:hover {
    cursor: pointer;
}
label i:nth-child(1) {
    left: 10px;
}
label i:nth-child(2) {
    z-index: 1111;
    left: -265px;
    opacity: 0;
}
#check:checked ~ #sidebar {
    width: 100%;
    left: 0px;
}
#check:checked ~ label #list {
    left: 100px;
    opacity: 0;
}
#check:checked ~ label #cancel{
    left: 80%;
    opacity: 1; 
}
section .subt {
    text-align: center;
    margin-top: 70px; 
    font-size: 22px;
    font-weight: 600;
}
#introduction {
    width: 100%;
    transition: .5s ease;
}
.main-section h2 {
  margin-top: 30px; 
  text-align: center;
  font-size: 22px; 
}
.main-section ul { 
  padding: 0; 
  margin: 0; 
}
.main-section ul li {
  text-align:center;
  margin-top: 20px;
  font-weight: 600; 
}
#indirect_recursion {
    margin-top: 40px;
}
section .content {
    margin-left: 15px;
    margin-right: 5px;
    line-height: 30px;
}
section p .blue {
    color: blue;
}
section p .red  {
    color: red; 
}
section p .green {
    color: green;
}
section .exercise  {
    word-break: break-all;
    font-size: 14px;
    background-color: #d9dddc;
    border-radius: 10px;
    padding: 10px 0;
    padding-left: 30px;
    margin: 0 10px;
}
footer {
    padding: 20px 0;
    margin-top: 30px;
    width: 100%; 
    height: max-content;
    background-color: #333;
}
#container-over {
    display: flex;
    padding: 0;
    margin: 0;
    border-bottom: #fff 1px solid;
}
#social_footer {
    padding-top: 15px;
    width: max-content;
    margin-left: auto;
}
#social_footer a {
    color: #fff;
}
#social_footer a i{ 
    transform: scale(1.5);
    margin-right: 15px;
}
#creator {
    color: #fff;
    margin-left: 15px;
}
#description_container {
    display: grid;
    grid-template-columns: 2fr 3fr 3fr 2fr;
    grid-template-rows: 1fr 200px;
}
#description {
    grid-column: 1/-1;
    margin-left: 20px;
    margin-right: 50px;
    color: #fff;
}
#description h5 {
    font-size: 18px;
}
#description p {
    font-size: 14px;
    line-height: 25px;
}
#resources, #more {
    margin-top: 25px;
}
#resources{
    font-family: monospace;
    color: #fff;
    text-align: center;
    margin-right: 20px;
}
#resources p {
    font-size: 20px;
    font-weight: 600;
}
#resources ul {
    padding: 0;
}
#resources ul li {
    margin-top: 10px;
}
#resources ul li a {
    font-size: 16px;
    color: #fff;
}
#resources ul li a:hover {
    color: blue;
}
#more {
    font-family: monospace;
    color: #fff;
    text-align: center;
    margin-left: 20px;
}
#more p {
    font-size: 20px;
    font-weight: 600;
}
#more ul {
    padding: 0;
}
#more ul li {
    margin-top: 10px;
}
#more ul li a {
    font-size: 16px;
    color: #fff;
}
#more ul li a:hover {
    color: blue;
}

/*MEDIA FOR TABLET*/
@media (min-width: 580px) {
    #sidebar {
        left: -800px;
    }
    #list, #cancel {
        transform: scale(1.5);
    }
    label i:nth-child(1) {
        left: 20px;
        top: 75px;
    }
    label i:nth-child(2) {
        top: 75px;
    }
    #check:checked ~ label #cancel{
        left: 90%;
        opacity: 1; 
    }
    section .content {
        margin-left: 40px;
        margin-right: 40px;
    }

}

/*MEDIA FOR DESTOKP*/
@media (min-width: 1024px) {
    body {
        display: grid;
        grid-template-columns: 1fr 3fr 1.5fr;
        grid-template-rows: auto 1fr auto;
    }
    #sidebar {
        display: none;
    }
    label {
        display: none;
    }
    header {
        grid-column: 1/ -1;
    }
    #logo {
        margin-left: 30px;
    }
    #logo i {
        margin-top: 45px;
        transform: scale(3);
    }
    #logo h1 {
        font-size: 30px;
        margin-left: 15px;
    }
    #social-header {
        margin-right: 120px;
        margin-top: 40px;
        transform: scale(2);
    }
    footer {
        grid-column: 1/ -1;
    }
    #main-doc {
        grid-column: 2 / 3;
    }
    #navbar {
        display: block;
        text-align: center;
        grid-column: 1 / 2;
        border-right: #d9dddc solid 2px;

    }
    #navbar ul {
        padding-left: 0;
    }
    #navbar ul li {
        margin-top: 30px;
        border-bottom: #d9dddc groove 1px;
        padding-bottom: 5px;
    }
    #navbar ul li a{
        color: #111;
    }
    #navbar ul li a:hover {
        color: blue;
    }
    #navbar header {
        font-size: 28px;
        font-weight: 600;
        width: 100%;
        background-color: #d9dddc;
        border-bottom: #666 solid 2px;
        border-right:#d9dddc groove 2px ;
        margin-top: 0;
        padding: 40px 0px;
    }
    #creator {
        margin-left: 80px;
        font-size: 16px;
    }
    #social_footer {
        margin-right: 80px;
    }
    #description_container {
        justify-content: center;
        grid-template-columns: 35em 200px 200px;
        grid-template-rows: 1fr;
    }
    #description {
        grid-column: 1 / 2;
    }
    #resources {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    #more {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
}

/*Some Fixing*/
@media (min-width: 775px) {
    #sidebar {
        left: -100em;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console