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

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <link rel="stylesheet" href="c.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <header>
                <h1>Module 3</h1>
                <p class="subheading">Making website interactive</p>
            </header>
            <div id="about" class="click-div">
                <p class="show invisible">About Module</p>
                <div class="hidden hide">
                    <p><em>It's website made by a casual so it shouldn't be taken as professional programming resource!</em><br> Use this if you want to learn web development: <a href="https://developer.mozilla.org/">MDN</a></p>
                    <p>With that out of the way here is my description of Module 3. We're starting to get to interesting things , in this part <a href="https://scrimba.com/learn/frontend" target="_blank">course</a> stops being <em>easy</em>, you can check <a href="https://scrimba.com/learn/introtojavascript" target="_blank">Introduction to JavaScript</a> if you're a beginner because this course has a very quick transition from Javascript basics to DOM which can be hard for beginners. As with every new thing you have to <strong>repeat and repeat</strong> to be able to use it proficiently but understanding the concept definitely helps to learn it quicker and that's what this pen tries to do.</p>
                </div>
            </div>
            <div class="click-div">
                <p class="show invisible">Here are definitions of some basic concepts</p>
                <div class="tutorial hidden hide">
                    <div class="flexbox">
                        <button>console.log()</button>
                        <button>Data Types</button>
                        <button>Arrays</button>
                        <button>Objects</button>
                        <button>Comparison Operators</button>
                        <button>Conditionals</button>
                        <button>Logic Operators</button>
                        <button>let and const</button>
                        <button>For loops</button>
                        <button>Functions</button>
                        <button>Math.random() and Math.floor()</button>
                        <button>slice()</button>
                        <button>push and pop</button>
                        <button>unshift and shift</button>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>console.log()</strong> makes everything you type in parenthesis show in the web console</p>
                        <code>console.log("Hello")</code>
                        <p>console:</p>
                        <code class="console">> Hello</code>
                    </div>
                    <div class="hidden2 hide">
                        <p>There are many <strong>Data Types</strong> in Javascript, variables don't have a set data type so you can have a variable with one datatype and change it to other datatype. Those are basic datatypes:</p>
                        <code>
                            let num = 2; // number <br>
                            let string = "3"; // string<br>
                            let bool = true; // boolean
                        </code>
                    </div>
                    <div class="hidden2 hide">
                        <p><strong>Array</strong> is a complex datatype, it's a type that stores variables and every value has it's index, if array has for example 3 values first value will have index 0, second 1 etc. We use square brackets to create an array</p>
                        <code>
                            let array = ["hi", 1, false]<br>
                            console.log(array[0]) <br> 
                            console.log(array[2])
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > hi <br>
                            > false <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Objects</strong> is another complex datatype that is used for creating something, a car for example, we have properties and values which are to describe an object, we use curly brackets to create an object.</p>
                        <code>
                            let car = { <br>
                                color: "red", <br>
                                year: "1999", <br>
                                isFast: true <br>
                            } <br>
                            console.log(car.color);
                        </code>
                        <p>console:</p>
                        <code class="console">> red</code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Comparison Operators</strong> give you an option to compare two variables, they return true or false.</p>
                        <code>console.log(2 == 2); // equal <br>
                            console.log(2 != 2); // not equal <br>
                            console.log(2 > 2); // greater than <br>
                            console.log(2 < 2); // less than <br>
                            console.log(2 >= 2); // greater or equal <br>
                            console.log(2 <= 2); // less or equal 
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > true <br>
                            > false <br>
                            > false <br>
                            > false <br>
                            > true <br>
                            > true <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Conditionals</strong> if code returns true it executes code in "if", if it doesn't and you used "else" it executes the code inside "else" </p>
                        <code>if (2 == 3) { <br>
                            console.log("true!") <br>
                            } else {<br>
                            console.log("not true!") <br>
                            } 
                        </code>
                        <p>console:</p>
                        <code class="console">> not true!</code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>Thanks to <strong>Logical Operators</strong> your conditions can be more complicated. "&&" returns true if both values are true and false if they're not, "||" returns true if at least one value returns true. "!" changes "true" to "false" and "false" to "true".</p>
                        <code>console.log(2 == 2 && 2 > 1); // both values are true<br>
                            console.log(2 == 2 && 2 < 1); // second value is false<br>
                            console.log(2 == 2 || 2 > 1); // both values are true<br>
                            console.log(2 == 2 || 2 < 1); // second value is false<br>
                            console.log(!(2 > 1)); //changing true to false<br>
                            console.log(!(3 > 20)); // changing false to true<br>
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > true <br>
                            > false <br>
                            > true <br>
                            > true <br>
                            > false <br>
                            > true 
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>before <strong>let and const</strong> there was "var", var was similar to "let" but it always had a global scope so if you declared a variable in "if" you could use it outside of if. let has a local scope so when declared in brackets it can be accessed only in those brackets. Const works like let but you can't change it's value</p>
                        <code>if (2 == 2) {<br>
                            var num = 3;<br>
                            let num2 = 4;<br>
                            }<br>
                            console.log(num);<br>
                            console.log(num2);<br>
                            const string = "hello"; <br>
                            string = "hi";
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > 3<br>
                            ReferenceError<br>
                            TypeError: Assignment to constant variable<br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>For loops</strong> will repeat some code as long as condition isn't met. For loop also has 3 parts, first when you can declare some variable, second when you can check condition and third when you can change a variable, change will be made after executing the code</p>
                        <code>for(let i = 0; i < 3; i++) { // i++ adds 1 to i <br>
                            console.log(i)<br>
                            }<br>

                        </code>
                        <p>console:</p>
                        <code class="console">
                            > 0<br>
                            > 1<br>
                            > 2<br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Function</strong> is a piece of code that will execute when you call it, you can pass variables to it and  return the value from function after executing it. You call a function by it's name</p>
                        <code>
                            function sum(a, b) { <br>
                            return a + b;<br>
                            }<br>
                            console.log(sum(5, 6))
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > 11<br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Math.random()</strong> gives a value between 0 and 1 but excluding 1 , <strong>Math.floor()</strong> rounds a number downwards to nearest integer. Using both you can get a random integer multiplying the result from Math.random and rounding it downward so you get the result between zero and multiplier</p>
                        <code>
                            console.log(Math.random()) <br>
                            console.log(Math.floor(4.3)) //rounding downwards<br>
                            let num = Math.random() * 3 // integer between 0 and 3 excluding 3<br>
                            console.log(num) <br>
                            console.log(Math.floor(num)) 
                        </code>
                        <p>console (exemplary values):</p>
                        <code class="console">
                            0.7570535587802254<br>
                            4 <br>
                            1.7888837320251891 <br>
                            1 <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>slice()</strong> makes a new array from some part of original array, first parameter means from what index you start and second parameter means to what index you end slicing. The original array is unchanged. If you skip the second parameter you slice from the first parameter to the end of the array. </p>
                        <code>
                            let array = ["apple", "banana", "mango", "strawberry", "lemon"]; <br>
                            console.log(array.slice(2,4))<br>
                            console.log(array.slice(1))
                        </code>
                        <p>console:</p>
                        <code class="console">
                            [ 'mango', 'strawberry']<br>
                            [ 'banana', 'mango', 'strawberry', 'lemon' ]
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>push()</strong> adds an element in parenthesis to the end of an array and <strong>pop()</strong> deletes the last element of the array </p>
                        <code>
                            let array = ["apple", "banana", "mango", "strawberry", "lemon"]; <br>
                            console.log(array) <br>
                            array.pop() // deleting last element <br>
                            console.log(array) <br>
                            array.push("orange") // adding orange <br>
                            console.log(array) <br>
                        </code>
                        <p>console:</p>
                        <code class="console">
                            [ 'apple', 'banana', 'mango', 'strawberry', 'lemon' ] <br>
                            [ 'apple', 'banana', 'mango', 'strawberry' ] <br>
                            [ 'apple', 'banana', 'mango', 'strawberry', 'orange' ]
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>shift()</strong> and <strong>unshift()</strong> work nearly the same as pop() and push(). shift() deletes first element of an array and unshift() adds element to start of an array. </p>
                        <code>
                            let array = ["apple", "banana", "mango", "strawberry", "lemon"]; <br>
                            console.log(array) <br>
                            array.shift() <br>
                            console.log(array) <br>
                            array.unshift("orange") <br>
                            console.log(array) <br>
                        </code>
                        <p>console:</p>
                        <code class="console">
                            [ 'apple', 'banana', 'mango', 'strawberry', 'lemon' ] <br>
                            [ 'banana', 'mango', 'strawberry', 'lemon' ] <br>
                            [ 'orange', 'banana', 'mango', 'strawberry', 'lemon' ]
                        </code>
                    </div>
                </div>
            </div>
            <div class="click-div">
                <p class="show invisible">DOM tutorial</p>
                <div class="tutorial hidden hide">
                    <div class="flexbox">
                        <button>DOM</button>
                        <button>getElementById()</button>
                        <button>getElementsByClassName()</button>
                        <button>getElementsByTagName()</button>
                        <button>querySelector()</button>
                        <button>querySelectorAll()</button>
                        <button>textContent</button>
                        <button>innerHtml</button>
                        <button>Changing style</button>
                        <button>classList</button>
                        <button>className()</button>
                        <button>createElement()</button>
                        <button>append()</button>
                        <button>addEventListener()</button>
                    </div>
                    <div class="hidden2 hide">
                        <p><strong>DOM</strong> means "Document Object Model" and it gives us an option to get an HTML element and use it in JavaScript. A HTML document can be displayed as HTML code or as window on the web page. With DOM we can represent this same object in JavaScript and if it can be represented you can manipulate it.</p>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>If a HTML element has an id we can choose it with <strong>getElementById()</strong>. We can store the choosen element in variable but before that we have to decide where we look for. In most cases you will look in HTML document so it will look like that: document.getElementById("idName").<br>Try entering an existing id name in input</p>
                        <code class="choose">&lt;html> <br>
                            &nbsp;<span>&lt;h1 id="foo">Welcome&lt;/h1></span> <br>
                            &nbsp;<span>&lt;p id="bar">hi&lt;/p></span> <br>
                            &nbsp;&lt;p>hello&lt;/p> <br>
                            &nbsp;<span>&lt;strong id="bold">HELLO&lt;/strong></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;console.log(document.getElementById("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="20">")) <br>
                            &nbsp;&lt;/script> <br>
                            &lt;/html> <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>If one or more HTML elements have class we can choose it with <strong>getElementsByClassName()</strong>. Be aware because if it's a class there can be multiple elements so it will make an array out of them and you will have to use index to access every individual element. </p>
                        <code class="choose">&lt;html> <br>
                            &nbsp;<span>&lt;h1 class="class">Welcome&lt;/h1></span> <br>
                            &nbsp;<span>&lt;p class="class">hi&lt;/p></span> <br>
                            &nbsp;&lt;p>hello&lt;/p> <br>
                            &nbsp;<span>&lt;strong class="hello">HELLO&lt;/strong></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;document.getElementsByClassName("<span class="spanHide"></span><input class="input" type="text" placeholder="type here" maxlength="20">") <br>
                            &nbsp;&lt;/script> <br>
                            &lt;/html> <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>If you want to choose elements by tag (h1 or button) use <strong>getElementsByTagName()</strong>. This method also returns an array so if you want to access first element for example you must use index 0</p>
                        <code class="choose"><span>&lt;html></span> <br>
                            &nbsp;<span>&lt;h1 class="class">Welcome&lt;/h1></span> <br>
                            &nbsp;<span>&lt;p class="class">hi&lt;/p></span> <br>
                            &nbsp;<span>&lt;p>hello&lt;/p> </span> <br>
                            &nbsp;<span>&lt;strong class="hello">HELLO&lt;/strong></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;<span>document.getElementsByTagName("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="20">")</span> <br>
                            &nbsp;<span>&lt;/script> </span><br>
                            <span>&lt;/html> </span><br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>If element you're looking for is more specific you can use <strong>querySelector()</strong>. The parameters for finding some object are the same as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">css selectors</a>, so there are many ways of choosing an element, here I will show "+" selector, in "h1 + p" for example it chooses every "p" element that's just after "h1" element. After this method finds a match it stops looking so only one element will be choosen. to insert a class you have to write ".className" and for id it's "#idName"</p>
                        <code class="choose"><span>&lt;html></span> <br>
                            &nbsp;<span>&lt;h1 class="class">Welcome&lt;/h1></span> <br>
                            &nbsp;<span>&lt;p class="class">hi&lt;/p></span> <br>
                            &nbsp;<span>&lt;p>hello&lt;/p> </span> <br>
                            &nbsp;<span>&lt;h2 id="bye">&lt;/h2> </span><br>
                            &nbsp;<span>&lt;strong class="hello">HELLO&lt;/strong></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;<span>document.querySelector("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10"> + <span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10">")</span> <br>
                            &nbsp;<span>&lt;/script> </span><br>
                            <span>&lt;/html> </span><br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>querySelectorAll()</strong>. Is exactly the same as querySelector() but it doesn't stop after finding one matching element, and just like with other methods mathing multiple elements it will create an array of all elements. We will also use "+" selector here</p>
                        <code class="choose"><span>&lt;html></span> <br>
                            &nbsp;<span>&lt;h1 class="class">Welcome&lt;/h1></span> <br>
                            &nbsp;<span>&lt;p class="class">hi&lt;/p></span> <br>
                            &nbsp;<span>&lt;p>hello&lt;/p> </span> <br>
                            &nbsp;<span>&lt;p class="hello">yay&lt;/p></span> <br>
                            &nbsp;<span>&lt;strong class="hello">HELLO&lt;/strong></span> <br>
                            &nbsp;<span>&lt;h2 id="bye">&lt;/h2> </span><br>

                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;<span>document.querySelectorAll("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10"> + <span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10">")</span> <br>
                            &nbsp;<span>&lt;/script> </span><br>
                            <span>&lt;/html> </span><br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>textContent</strong> is used to get the text from html element, it ignores all tags within an element. Here you can choose elements by Id and see what will show in console.</p>
                        <code class="choose"><span>&lt;html></span> <br>
                            &nbsp;<span>&lt;h2 id="hello">Hi!&lt;/h2></span> <br>
                            &nbsp;</span>&lt;p id="bye">&lt;span>bye bye&lt;/span>&lt;/p></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;<span>console.log(document.getElementById("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10">").textContent)</span> <br>
                            &nbsp;<span>&lt;/script> </span><br>
                            <span>&lt;/html> </span><br>
                        </code>
                        <p>console:</p>
                        <code class="console last">
                            >
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>innerHtml</strong> works pretty much the same except it doesn't ignore tags so it will also take span tag in this example. </p>
                        <code class="choose"><span>&lt;html></span> <br>
                            &nbsp;<span>&lt;h2 id="hello">Hi!&lt;/h2></span> <br>
                            &nbsp;</span>&lt;p id="bye">&lt;span>bye bye&lt;/span>&lt;/p></span> <br>
                            &nbsp;<span>&lt;script></span> <br>
                            &nbsp;&nbsp;<span>console.log(document.getElementById("<span class="spanHide"></span><input type="text" placeholder="type here" maxlength="10">").textContent)</span> <br>
                            &nbsp;<span>&lt;/script> </span><br>
                            <span>&lt;/html> </span><br>
                        </code>
                        <p>console:</p>
                        <code class="console last">
                            >
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>Changing style</strong> we can also style an element using JavaScript, you have to add <br> .style.someProperty = "someValue"; so it has to look like that </p>
                        <code class="console">
                            <h2 style="color:red" id="color">Hi!</h2>
                            <p>h2 will be red</p>
                        </code>
                        <code>
                            &lt;html> <br>
                            &nbsp;&lt;h2 id="color">Hi!&lt;/h2><br>
                            &nbsp;&lt;p>h2 will be red&lt;/p><br>
                            &nbsp;&lt;script><br>
                            &nbsp;&nbsp;document.getElementById("color").style.color = "red" <br>
                            &nbsp;&lt;/script><br>
                            &lt;/html> <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>ClassList()</strong> can be used to add a class using add() or remove class from html element using remove()  </p>
                        <code class="console">
                            <h2>Hi!</h2>
                            <p style="color:red">now this will be red</p>
                        </code>
                        <code>
                            &lt;html> <br>
                            &nbsp;&lt;style> <br>
                            &nbsp;&nbsp;.color { <br>
                            &nbsp;&nbsp;&nbsp;color: red; <br>
                            &nbsp;&nbsp;} <br>
                            &nbsp;&lt;/style> <br> <br>
                            &nbsp;&lt;h2 id="color">Hi!&lt;/h2><br>
                            &nbsp;&lt;p>now this will be red&lt;/p><br> <br>
                            &nbsp;&lt;script><br>
                            &nbsp;&nbsp;document.getElementById("h2").classList.remove("color") <br>
                            &nbsp;&nbsp;document.getElementById("paragraph").classList.add("color") <br>
                            &nbsp;&lt;/script><br>
                            &lt;/html> <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>className</strong> returns a string from element's class name so it will show all classes in an element, we can also manipulate this string so for example we can reassign a class of some element. However ClassList() is more flexible.</p>
                        <code class="console">
                            <h2 style="color:blue">Hi!</h2>
                        </code>
                        <code>
                            &lt;html> <br>
                            &nbsp;&lt;style> <br>
                            &nbsp;&nbsp;.red { <br>
                            &nbsp;&nbsp;&nbsp;color: red; <br>
                            &nbsp;&nbsp;} <br>
                            &nbsp;&nbsp;.blue { <br>
                            &nbsp;&nbsp;&nbsp;color: blue; <br>
                            &nbsp;&nbsp;} <br>
                            &nbsp;&lt;/style> <br> <br>
                            &nbsp;&lt;h2 id="h2" class="red">Hi!&lt;/h2><br><br>
                            &nbsp;&lt;script><br>
                            &nbsp;&nbsp;console.log(document.getElementById("h2").className) <br>
                            &nbsp;&nbsp;document.getElementById("h2").className = "blue" <br>
                            &nbsp;&nbsp;console.log(document.getElementById("h2").className) <br>
                            &nbsp;&lt;/script><br>
                            &lt;/html> <br>
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > red <br>
                            > blue
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p><strong>createElement()</strong> gives us an option to create custom element and add it to out html by append() which is covered in the next button. Here's how to create a paragraph, how to style it and give it text </p>
                        <code>
                            let p = document.createElement("p"); <br>
                            p.classList.add("red"); <br>
                            p.textContent = "new element"; <br>
                            console.log(p) <br>
                        </code>
                        <p>console:</p>
                        <code class="console">
                            > &lt;p class="red">new element&lt;/p>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>Now using <strong>append()</strong> we can append newly created element to html body or to some other element. </p>
                        <code class="console">
                            <h2 style="color:red">Hi!</h2>
                            <p style="color:red;">new element</p>
                        </code>
                        <code>
                            &lt;html> <br>
                            &nbsp;&lt;style> <br>
                            &nbsp;&nbsp;.red { <br>
                            &nbsp;&nbsp;&nbsp;color: red; <br>
                            &nbsp;&nbsp;} <br>
                            &nbsp;&lt;/style> <br> <br>
                            &nbsp;&lt;h2 id="h2" class="red">Hi!&lt;/h2><br><br>
                            &nbsp;&lt;script><br>
                            &nbsp;&nbsp;let p = document.createElement("p"); <br>
                            &nbsp;&nbsp;p.classList.add("red"); <br>
                            &nbsp;&nbsp;p.textContent = "new element"; <br>
                            &nbsp;&nbsp;document.body.append(p) <br>
                            &nbsp;&lt;/script><br>
                            &lt;/html> <br>
                        </code>
                    </div>
                    <div class="hidden2 hide"> 
                        <p>Last but not least, <strong>addEventListener()</strong> gives us an option to make some code that activates when some event is done on choosen element. We have to choose a type of event    (for example <em>"scroll"</em> ) and give it a function that will execute some code after the event is triggered. For example we can choose h2 by it's id and make it's background after we click a button using <em>"click"</em> event</p>
                        <code class="console">
                            <h2 id="toRed">Hi!</h2>
                            <button id="normalBtn">click this</button>
                        </code>
                        <code>
                            &lt;html> <br>
                            &nbsp;&lt;h2 id="h2">Hi!&lt;/h2><br>
                            &nbsp;&lt;button> id="btn">click this&lt;/button><br> <br>
                            &nbsp;&lt;script><br> 
                            &nbsp;&nbsp;let btn = document.getElementById("btn"); <br>
                            &nbsp;&nbsp;let h2 = document.getElementById("h2") <br>
                            &nbsp;&nbsp;btn.addEventListener("click", function() { <br>
                            &nbsp;&nbsp;&nbsp;h2.style.color = "red" <br>
                            &nbsp;&nbsp;}) <br>
                            &nbsp;&lt;/script><br>
                            &lt;/html> <br>
                        </code>
                    </div>
                </div>
            </div>
            <div class="click-div">
                <p class="show invisible">Here are the websites you will make in this tutorial</p>
                <div class="hidden hide">
                    <p>This module also offers many challenges you can do yourself such as: </p>
                    <div class="flexboxImg">
                        <div>
                            <h3>Pacman board!</h3>
                            <img src="https://dev-to-uploads.s3.amazonaws.com/i/d3jz60dcu3r56kkio8di.png" alt="emojis app">
                        </div>
                        <div>
                            <h3>Your personality in emojis</h3>
                            <img src="https://dev-to-uploads.s3.amazonaws.com/i/uq4avzucqsou69bgzafs.png" alt="emojis app">
                        </div>
                        <div>
                            <h3>Your personal diary</h3>
                            <img src="https://dev-to-uploads.s3.amazonaws.com/i/nidshx7gmjtw6iisetdz.png" alt="your diary"> 
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
        <footer>
            <p>Thanks for visiting! This pen was made for my blog on <a href="https://dev.to/dominikgorczyca/series/10565">DEV</a></p>
            <p>If you want you can also follow my <a href="https://codepen.io/pr0grammingteenager">CodePen</a> account</p>
        </footer>
    </div>
    <script src="js.js"></script>
</body>
</html>
              
            
!

CSS

              
                /* 
#8860D0
#C1C8E4
#5580E9
#5AB8EB
#84CEEB
font-family: 'Zilla Slab', serif;
*/

/* ----------------------
        Typography
 -----------------------*/

body {
    font-family: 'Zilla Slab', serif;
    
    background: linear-gradient(90deg, #8860D0 1%,#84CEEB 48%, #C1C8E4 88%);
    color: white;
    margin: 0;
}
.container {
    position: relative;
    box-sizing: border-box;
    width: 60%;
    min-height: 100vh;
    margin: auto;
    background: linear-gradient(90deg, rgba(85,128,233,1) 0%, rgba(90,184,235,1) 100%);
    box-shadow: 0 0 10px 2px #5580E9;
}
.wrapper {
    padding: 2em;
    padding-bottom: 10rem;
}
header {
    margin-bottom: 3em;
}
h1 {
    font-weight: 700;
    margin: 0 0 0.2em 0;
}
a {
    color: #5580E9;
}
a:hover {
    color: darkblue;
    text-decoration: underline;
}
.subheading {
    margin-top: 0;
    font-weight: 500;
}


/* ------------------------
        Hidden elements 
    ----------------------- */

.show {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.5em;
    margin: 0;
}
.invisible:hover {
    color: #5580E9;
    background-color: #C1C8E4;
    cursor: pointer;
    user-select: none; /* Standard */
}
.hidden, .hidden2 {
    width: 70%;
    font-size: 1.1rem;
    font-weight: 400;
    padding: 0 0 1em 1em;
}
.hidden > * {
    margin: 0;
}
.hide {
    display: none;
}
.visible {
    background-color: #5AB8EB;
}
.visible2 {
    background: #5580E9 !important;
}
.spanHide, input {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    padding: 2px;
}
.spanHide {
    position: absolute;
    height: 0;
    overflow: hidden;
    white-space: pre;
}
.backlit {
    color: #8860D0;
    background-color: white;
}

/* ----------------------
        Styles
------------------------- */

.tutorial {
    width: 100%;
}
.flexbox {
    display: grid;
    grid-template-columns: repeat(7, auto);
}
.tutorial > button,
.flexbox > button {
    background: linear-gradient(90deg, #5580E9 0%, #5AB8EB 100%);
    color: white;
    border-radius: 5px;
    outline: none;
    border: none;
    margin: 0.2em;
    padding: 0.5em;
    cursor: pointer;
    user-select: none;
}
.tutorial p {
    margin: 0.5rem 0;
}
code {
    display: block;
    background: #8860D0;
    padding: 0.3em 1em;
    margin: 1em;
    line-height: 1.6em;
}
.console {
    background: white;
    color: black;
    margin: 1em;
}
input {
    width: 4.2em;
    outline: none;
    color: #8860D0;
}
.inherit {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
}
img {
    width: 300px;
    height: 250px;
    margin: 5px 0;
}
.hidden:last-child {
    width: 100%;
}
.flexboxImg {
    display: flex;
    width: 90%;
    text-align: center;
    justify-content: space-between;
}

/* ----------------------
        Footer
------------------------- */
footer {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    padding: 1rem;
    text-align: center;
    width: 100%;
    height: 6rem;  
}
footer a {
    color: #8860D0;
}
              
            
!

JS

              
                let show = document.querySelectorAll(".show");
let hidden = document.querySelectorAll(".hidden")
let div = document.querySelectorAll(".click-div")
let buttons = document.querySelectorAll(".flexbox button")
let hidden2 = document.querySelectorAll(".hidden2")
let input = document.querySelectorAll("input");
let spanHide = document.querySelectorAll(".spanHide")

show.forEach((paragraph, i) => {
    paragraph.addEventListener("click", () => {
        h2.style.color = "black"
        if(!paragraph.classList.contains("visible")) {
            hidden.forEach((v) => v.classList.add("hide"))
            div.forEach((v) => v.classList.remove("visible"))
            show.forEach((v) => v.classList.add("invisible"))

            hidden[i].classList.remove("hide")
            div[i].classList.add("visible")
            show[i].classList.remove("invisible")
        }
    })
})
buttons.forEach((paragraph, i) => {
    paragraph.addEventListener("click", () => {
        h2.style.color = "black"
        if(!paragraph.classList.contains("visible2")) {
            hidden2.forEach((v) => v.classList.add("hide"));
            buttons.forEach((v) => v.classList.remove("visible2"));

            hidden2[i].classList.remove("hide");
            buttons[i].classList.add("visible2");
        }
    })
})

let regex = [];
let endRegex = [];

input.forEach((input,i) => {
    input.addEventListener("input", () => {
        h2.style.color = "black"
        let choose = input.parentElement.parentElement
        let spans = choose.querySelectorAll("span");
        let regex1 = input.value.replace(/\#/, "&#35;").replace(/\./, "&#46;")
        let regex2 = input.value.slice(1);

        
        switch(i) {
            case 0:
                regex[i] = new RegExp("id=\"" + regex1 + "\"")
                break;
            case 1:
                regex[i] = new RegExp("class=\"" + regex1 + "\"")
                break;
            case 2:
                regex[i] = new RegExp("\<" + regex1 + "[ \>]")
                endRegex[i] = new RegExp("\<\/" + regex1 + "[ \>]")
                break;
            case 3:
            case 4:
            case 5:
            case 6:
                regex[i] = new RegExp("(\<" + regex1 + "[ \>])|(\"" + regex2 + "\")")
                endRegex[i] = new RegExp("(\<\/" + regex1 + "[ \>])|(\"" + regex2 + "\")")
                break;
            case 7:
                regex[i] = new RegExp(input.value)
        }   
        if(input.value == "") {
            input.style.width = "4.2em";
        } else {
            spanHide[i].textContent = input.value;
            input.style.width = spanHide[i].offsetWidth + "px";
        }

        

        const hasIt = () => {
            let TagEnd = false;
            let once = 0;
            if(i == 0 || i == 1 || i == 2) {
                spans.forEach((v, index) => {
                    v.classList.remove("backlit")
                    if(v.textContent.match(regex[i])) {
                        v.classList.add("backlit")
                        TagEnd = true;
                    } 
                    if(endRegex[i] != "" && TagEnd == true) {
                        v.classList.add("backlit")
                        if(v.textContent.match(endRegex[i])) {
                            TagEnd = false;
                        }
                    }   
                })
            } else if (i == 3 | i == 5) { 
                spans.forEach((v, index) => {
                    v.classList.remove("backlit");
                    if(v.textContent.match(regex[i+1]) && once != 1) {
                        if(spans[index-1].textContent.match(regex[i])) {
                            v.classList.add("backlit")
                            TagEnd = true;
                            if(i == 3) once = 1;
                        }
                    }
                    if(endRegex[i+1] != "" && TagEnd == true) {
                        v.classList.add("backlit")
                        if(v.textContent.match(endRegex[i+1])) {
                            TagEnd = false;
                        }
                    }  
                });
            } else if (i == 4 || i == 6) {
                spans.forEach((v, index) => {
                    v.classList.remove("backlit");
                    if(v.textContent.match(regex[i]) && once != 1) {
                        if(spans[index-1].textContent.match(regex[i-1])) {
                            v.classList.add("backlit")
                            TagEnd = true;
                            if(i == 4) once = 1;
                        }
                    }
                    if(endRegex[i] != "" && TagEnd == true) {
                        v.classList.add("backlit")
                        if(v.textContent.match(endRegex[i])) {
                            TagEnd = false;
                        }
                    }  
                });
            } else if(i == 7 || i == 8) {
                let first = document.getElementsByClassName("last")[i - 7];
                spans.forEach((v, index) => {
                    if(v.textContent.match("^(hello)$")) {
                        first.textContent = "> Hi!";
                    } else if (v.textContent.match("^(bye)$")) {
                        if(i == 7) first.textContent = "> bye bye";
                        else first.textContent = "> <span>bye bye</span>"
                    }
                });
            }
            
        }
        hasIt()


    })
})

let btn = document.getElementById("normalBtn");
let h2 = document.getElementById("toRed")

btn.addEventListener("click", function() {
    h2.style.color = "red"
})
              
            
!
999px

Console