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>

<body>
    <nav id="navbar">
        <header>What is Javascript?</header>
        <ul>
            <li>
                <a href="#A_high-level_definition" class="nav-link">A high-level definition</a>
            </li>
            <li>
                <a href="#So_what_can_it_really_do?" class="nav-link">So what can it really do?</a>
            </li>
            <li>
                <a href="#What_is_Javascript_doing_on_your_page?" class="nav-link">What is Javascript doing on your page?</a>
            </li>
            <li>
                <a href="#How_do_you_add_JavaScript_to_your_page?" class="nav-link">How do you add JavaScript to your page?</a>
            </li>
            <li>
                <a href="#Comments" class="nav-link">Comments</a>
            </li>
            <li>
                <a href="#Reference" class="nav-link">Reference</a>
            </li>
        </ul>
    </nav>
    <main id="main-doc">
        <section class="main-section" id="A_high-level_definition">
            <header>A high-level definition</header>
            <article>
                <p>JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content
                    updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>and
                    <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>) we have covered in much more detail in other parts of the Learning Area.</p>
                <ul>
                    <li>HTML is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.</li>
                    <li>CSS is a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.</li>
                    <li>JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few
                        lines of JavaScript code.)</li>
                </ul>
                <p>The three layers build on top of one another nicely. Let's take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:</p>
                <pre><code><span class="code">p</span>Player 1: Chris<span class="code">/p</span></code></pre>
                <div>Player 1: Chris</div>
                <p>Then we can add some CSS into the mix to get it looking nice:</p>
                <pre>
                    <code>
p {
    font-family: 'helvetica neue', helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0,0,200,0.6);
    background: rgba(0,0,200,0.3);
    color: rgba(0,0,200,0.6);
    box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
}
                    </code></pre>
                <div class="browser">Player 1: Chris</div>
                <p>And finally, we can add some JavaScript to implement dynamic behaviour:</p>
                <pre>
                    <code>
const para = document.querySelector('p');

para.addEventListener('click', updateName);
                        
function updateName() {
    let name = prompt('Enter a new name');
    para.textContent = 'Player 1: ' + name;
}
                    </code></pre>
                <div class="browser" id="test">Player 1: None</div>
                <p>Try clicking on this last version of the text label to see what happens.</p>
                <p>JavaScript can do a lot more than that — let's explore what in more detail.</p>
            </article>
        </section>
        <section class="main-section" id="So_what_can_it_really_do?">
            <header>So what can it really do?</header>
            <article>
                <p>The core client-side JavaScript language consists of some common programming features that allow you to do things like:</p>
                <ul>
                    <li>Store useful values inside variables. In the above example for instance, we ask for a new name to be entered then store that name in a variable called <var>name</var>.</li>
                    <li>Operations on pieces of text (known as "strings" in programming). In the above example we take the string "Player 1: " and join it to the <var>name</var> variable to create the complete text label, e.g. ''Player 1: Chris".</li>
                    <li>Running code in response to certain events occurring on a web page. We used a click event in our example above to detect when the button is clicked and then run the code that updates the text label.</li>
                    <li>And much more!</li>
                </ul>
                <p>What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.</p>
                <p>APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building
                    — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized
                    screws, and then put them together to make a bookshelf.</p>
                <p>They generally fall into two categories.</p>
                <p>Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:</p>
                <ul>
                    <li>The DOM (Document Object Model) API allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content
                        displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li>
                    <li>The Geolocation API retrieves geographical information. This is how Google Maps is able to find your location and plot it on a map.</li>
                    <li>The Canvas and WebGL APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies</li>
                    <li>Audio and Video APIs like HTMLMediaElement and WebRTC allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's
                        computer.
                    </li>
                </ul>
                <p>Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:</p>
                <ul>
                    <li>The Twitter API allows you to do things like displaying your latest tweets on your website.</li>
                    <li>The Google Maps API and OpenStreetMap API allows you to embed custom maps into your website, and other such functionality.</li>
                </ul>
                <p>There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And
                    that's why you're here — let's move on!</p>
            </article>
        </section>
        <section class="main-section" id="What_is_Javascript_doing_on_your_page?">
            <header>What is Javascript doing on your page?</header>
            <article>
                <p>Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.</p>
                <p>Let's briefly recap the story of what happens when you load a web page in a browser. When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab).
                    This is like a factory that takes in raw materials (the code) and outputs a product (the web page).
                </p>
                <p>A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the
                    order it appears on the page. If the JavaScript loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur. </p>
                <h1>Browser Security</h1>
                <p>Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in
                    one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other
                    such bad things.</p>
                <h1>JavaScript running order</h1>
                <p>When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our
                    first example:</p>
                <pre>
                        <code>
const para = document.querySelector('p');
    
para.addEventListener('click', updateName);
                                
function updateName() {
    let name = prompt('Enter a new name');
    para.textContent = 'Player 1: ' + name;
} 
                        </code></pre>
                <p>Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> code block
                    (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.</p>
                <p>If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — <samp>TypeError: para is undefined</samp>. This means that the para object does
                    not exist yet, so we can't add an event listener to it.</p>
                <h1>Interpreted versus compiled code</h1>
                <p>You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code
                    into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.</p>
                <p>Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into assembly language that is then run by the computer. The program is executed from
                    a binary format, which was generated from the original program source code.</p>
                <p>JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually
                    use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript
                    is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.</p>
                <p>There are advantages to both types of language, but we won't discuss them right now.</p>
                <h1>Server-side versus client-side code</h1>
                <p>You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded,
                    then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.</p>
                <p>Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also
                    be used as a server-side language, for example in the popular Node.js environment.</p>
                <h1>Dynamic versus static code</h1>
                <p>The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content
                    as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new
                    HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side)
                    usually work together.</p>
                <p>A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.</p>
            </article>
        </section>
        <section class="main-section" id="How_do_you_add_JavaScript_to_your_page?">
            <header>How do you add JavaScript to your page?</header>
            <article>
                <p>JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses <span class="code"><code>link</code></span> elements to apply external stylesheets and <span class="code"><code>style</code></span> elements to apply
                    internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the <span class="code"><code>script</code></span> element. Let's learn how this works.</p>
                <h1></h1>
                <ol>
                    <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere
                        sensible.
                    </li>
                    <li>Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.</li>
                    <li>Next, go to your text editor and add the following in your head — just before your closing <span class="code"><code>/head</code></span> tag:
                        <pre>
                        <code>
<span class="code">script</span>

// JavaScript goes here
                                      
<span class="code">/script</span> 
                        </code></pre>
                    </li>
                    <li>Now we'll add some JavaScript inside our <span class="code"><code>script</code></span> element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line:
                        <pre>
                        <code>
document.addEventListener("DOMContentLoaded", function() {
    function createParagraph() {
        let para = document.createElement('p');
        para.textContent = 'You clicked the button!';
        document.body.appendChild(para);
    }
                                  
    const buttons = document.querySelectorAll('button');
                                  
    for(let i = 0; i < buttons.length ; i++) {
        buttons[i].addEventListener('click', createParagraph);
    }
});
                        </code></pre>
                    </li>
                    <li>Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.</li>
                </ol>
                <h1>External JavaScript</h1>
                <p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p>
                <ol>
                    <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li>
                    <li>Replace your current <span class="code"><code>script</code></span> element with the following:
                        <pre>
                        <code>
<span class="code">script src="script.js" defer</span><span class="code">/script</span>
                        </code></pre>
                    </li>
                    <li>Inside <code>script.js</code>, add the following script:
                        <pre>
                        <code>
function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
}
                                  
const buttons = document.querySelectorAll('button');
                                  
for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
}
                        </code></pre>
                    </li>
                    <li>Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable
                        across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.</li>
                </ol>
                <h1>Inline JavaScript handlers</h1>
                <p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p>
                <pre class="wrong">
                    <code>
function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
}
                    </code></pre>
                <pre class="wrong">
                    <code>
<span class="code">button onclick="createParagraph()"</span>Click me!<span class="code">/button</span>
                    </code></pre>
                <p>This code has exactly the same functionality as in the previous two sections, except that the <span class="code"><code>button</code></span> element includes an inline onclick handler to make the function run when the button is pressed.</p>
                <p>Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you want the JavaScript to apply
                    to.
                </p>
                <p>Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:</p>
                <pre>
                    <code>
const buttons = document.querySelectorAll('button');

for(let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
}
                    </code></pre>
                <h1>Script loading strategies</h1>
                <p>There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript
                    to manipulate elements on the page, your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.</p>
                <p>In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.</p>
                <p>In the internal example, you can see this structure around the code:</p>
                <pre>
                    <code>
document.addEventListener("DOMContentLoaded", function() {
    ...
}); 
                    </code></pre>
                <p>This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore
                    the error is avoided.</p>
                <p>In the external example, we use a more modern JavaScript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the HTML content once the <span class="code"><code>script</code></span> tag element
                    has been reached.</p>
                <pre>
                    <code>
<span class="code">script src="script.js" defer</span><span class="code">/script</span>
                    </code></pre>
                <p>In this case both the script and the HTML will load simultaneously and the code will work.</p>
                <p>An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the <span class="code"><code>/body</code></span> tag), so that it would load after all the HTML has been
                    parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down
                    your site.</p>
                <h2>async and defer</h2>
                <p>There are actually two modern features we can use to bypass the problem of the blocking script — <code>async</code> and <code>defer</code> (which we saw above). Let's look at the difference between these two.</p>
                <p>Scripts loaded using the <code>async</code> attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in
                    any specific order, only that they will not stop the rest of the page from displaying. It is best to use <code>async</code> when the scripts in the page run independently from each other and depend on no other script on the page.</p>
                <p>For example, if you have the following script elements:</p>
                <pre>
                    <code>
<span class="code">script async src="js/vendor/jquery.js"</span><span class="code">/script</span>

<span class="code">script async src="js/script2.js"</span><span class="code">/script</span>
                            
<span class="code">script async src="js/script3.js"</span><span class="code">/script</span> 
                    </code></pre>
                <p>You can't rely on the order the scripts will load in. <code>jquery.js</code> may load before or after <code>script2.js</code> and <code>script3.js</code> and if this is the case, any functions in those scripts depending on <code>jquery</code>                    will produce an error because <code>jquery</code> will not be defined at the time the script runs.</p>
                <p><code>async</code> should be used when you have a bunch of background scripts to load in, and you just want to get them in place asap. For example, maybe you have some game data files to load, which will be needed when the game actually
                    begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading.</p>
                <p>Scripts loaded using the <code>defer</code> attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded:</p>
                <pre>
                    <code>
<span class="code">script defer src="js/vendor/jquery.js"</span><span class="code">/script</span>
    
<span class="code">script defer src="js/script2.js"</span><span class="code">/script</span>
                                
<span class="code">script defer src="js/script3.js"</span><span class="code">/script</span> 
                    </code></pre>
                <p>All the scripts with the <code>defer</code> attribute will load in the order they appear on the page. So in the second example, we can be sure that <code>jquery.js</code> will load before <code>script2.js</code> and <code>script3.js</code>                    and that <code>script2.js</code> will load before <code>script3.js</code>. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one of more elements
                    on the page).</p>
                <p>To summarize:</p>
                <ul>
                    <li><code>async</code> and <code>defer</code> both instruct the browser to download the script(s) in a separate thread, while the rest of the page (the DOM, etc.) is downloading, so the page loading is not blocked by the scripts.</li>
                    <li>If your scripts should be run immediately and they don't have any dependencies, then use <code>async</code>.</li>
                    <li>If your scripts need to wait for parsing and depend on other scripts and/or the DOM being in place, load them using <code>defer</code> and put their corresponding <span class="code"><code>script</code></span> elements in the order
                        you want the browser to execute them.</li>
                </ul>
            </article>
        </section>
        <section class="main-section" id="Comments">
            <header>Comments</header>
            <article>
                <p>As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to
                    your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:</p>
                <ul>
                    <li>A single line comment is written after a double forward slash (//), e.g.
                        <pre><code>// I am a comment</code></pre>
                    </li>
                    <li>A multi-line comment is written between the strings /* and */, e.g.
                        <pre>
                        <code>
/*
    I am also
    a comment
*/
                        </code></pre>
                    </li>
                </ul>
                <p>So for example, we could annotate our last demo's JavaScript with comments like so:</p>
                <pre>
                    <code>
// Function: creates a new paragraph and appends it to the bottom of the HTML body.

function createParagraph() {
    let para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
}
                            
/*
    1. Get references to all the buttons on the page in an array format.
    2. Loop through all the buttons and add a click event listener to each one.
                            
    When any button is pressed, the createParagraph() function will be run.
*/
                            
const buttons = document.querySelectorAll('button');
                            
for (let i = 0; i < buttons.length ; i++) {
    buttons[i].addEventListener('click', createParagraph);
}
                    </code></pre>
            </article>
        </section>
        <section class="main-section" id="Reference">
            <header>Reference</header>
            <article>
                <ul>
                    <li>All the documentation in this page taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">MDN</a></li>
                </ul>
            </article>
        </section>
    </main>
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Source+Sans+Pro&display=swap');

/*reset css*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}


/*set colors*/

:root {
    --color--green: #026e00;
    --color--black: #333;
    --color--gray: #f0f0f0;
    --color--white: #fff;
    --color--backred: #fef7f7;
    --color--red: #e66465;
}


/*set fonts*/

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 19px;
}

header {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 180%;
}

h1 {
    font-size: 1.5em;
    border-left: solid 5px var(--color--black);
    padding-left: 5px;
}

h2 {
    font-size: 1.2em;
}


/*navigation*/

#navbar header {
    font-size: 280%;
    background-color: var(--color--black);
    color: var(--color--white);
    padding: 8px;
    letter-spacing: .03em;
}

#navbar {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 295px;
}

#navbar li {
    line-height: 2em;
}

.nav-link {
    color: var(--color--green);
    display: block;
    padding-left: 8px;
    font-size: 85%;
}

.nav-link:hover {
    color: var(--color--white);
    background-color: var(--color--green);
    transition: .4s;
}


/*main*/

#main-doc {
    margin-left: 350px;
    max-width: 800px;
}

#main-doc p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

p code {
    background-color: var(--color--gray);
}

.main-section header {
    line-height: 2em;
}

.main-section ul {
    display: block;
    list-style: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.main-section ol {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.main-section a {
    color: var(--color--green);
    transition: .3s;
}

.main-section a:hover {
    color: var(--color--white);
    background-color: var(--color--green);
}

pre {
    margin: 1em 0;
    padding: 1em;
    border-radius: 5px;
    background: var(--color--black);
    color: var(--color--white);
    overflow-x: auto;
    --webkit-overflow-scrolling: touch;
}

code {
    text-align: left;
    white-space: pre;
}

.wrong {
    background: var(--color--backred);
    color: var(--color--black);
    border-left: 3px solid var(--color--red);
}


/*code signs*/

p .code::before {
    content: "\03c";
    background-color: var(--color--gray);
}

p .code::after {
    content: "\03e";
    background-color: var(--color--gray);
}

pre .code::before {
    content: "\03c";
    color: var(--color--white);
}

pre .code::after {
    content: "\03e";
    color: var(--color--white);
}

.browser {
    font-family: 'helvetica neue', helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
}


/*for tablets*/

@media only screen and (max-width:815px) {
    body {
        font-size: 18px;
    }
    #navbar {
        width: 200px;
    }
    #navbar header {
        font-size: 200%;
        padding: 8px;
    }
    #main-doc {
        margin-left: 220px;
    }
}


/*for mobile phones*/

@media only screen and (max-width: 600px) {
    #navbar {
        position: absolute;
        height: 280px;
        width: 100%;
        z-index: 1;
    }
    #navbar header {
        padding-left: 10px;
    }
    #navbar a {
        padding-left: 10px;
        font-size: 100%;
    }
    #main-doc {
        position: relative;
        margin: 290px 10px 10px 10px;
    }
}
              
            
!

JS

              
                const para = document.getElementById('test');

para.addEventListener('click', updateName);

function updateName() {
    let name = prompt('Enter a new name');
    para.textContent = 'Player 1: ' + name;
}
              
            
!
999px

Console