ADaD: JavaScript Tutorial

Important: Keep the console open when playing with the examples (press F12)

1. Basics

Start tutorial

1.0. Introduction

1.1. Comments

1.2. Chrome DevTools

1.3. Variables

1.4. Data Types

1.5. Operators

1.6. Strings

1.7. Arrays

1.8. Objects

1.9. Troubleshooting

2. Building Blocks

Start tutorial

2.1. Conditionals

2.1.1. If ... Else commands

In any programming language, the code needs to make decisions and carry out actions accordingly depending on different inputs. For example, in a game, if the player's number of lives is 0, then it's game over. In a weather app, if it is being looked at in the morning, show a sunrise graphic; show stars and a moon if it is nighttime. In this article, we'll explore how so-called conditional commands work in JavaScript.

The if command executes a command if a specified condition is truthy. If the condition is falsy, another command can be executed.

The keyword if followed by some parentheses ()
A condition to test, placed inside the parentheses (typically "is this value bigger than this other value?", or "does this value exist?"). The condition makes use of the comparison operators we discussed in the last module and returns true or false
A set of curly braces {}, inside which we have some code — this can be any code we like, and it only runs if the condition returns true
The keyword else
Another set of curly braces {}, inside which we have some more code — this can be any code we like, and it only runs if the condition is not true — or in other words, the condition is false

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let hobbit = "Frodo";

                                                    // Check if the variable meets a certain condition (contains the value "Frodo") and output a reaction within the console
                                                    if (hobbit === "Frodo") {
                                                        console.log('Hi Frodo'); // Output: Hi Frodo
                                                    } else {
                                                        console.log('Hi Stranger'); // Doesn't get executed
                                                    }

2.1.2. Logical operators: AND, OR and NOT

If you want to test multiple conditions without writing nested if ... else constructs, logical operators AND &&, OR || and NOT ! can help you.

And: && allows you to chain together two or more expressions so that all of them have to individually evaluate to true for the whole expression to return true
Or: || allows you to chain together two or more expressions so that one or more of them have to individually evaluate to true for the whole expression to return true
Not: ! can be used to negate an expression

JavaScript Try this

                                                
                                                    // Define two variables
                                                    let hobbit = "Frodo";
                                                    let weLikeHobbits = false;

                                                    // Check if the variables meets certain conditions (variable1 contains the value "Frodo" AND variable2 is validated as truthy) and output a reaction within the console
                                                    if (hobbit === "Frodo" && weLikeHobbits === true) {
                                                        console.log('Hi Friend'); // Doesn't get executed
                                                    } else {
                                                        console.log('We have nothing to say to you'); // Output: We have nothing to say to you (hobbit equals "Frodo" but weLikeHobbits does not equal true);
                                                    }

                                                    // Check if the variables meets certain conditions (variable1 contains the value "Frodo" OR variable2 is validated as truthy) and output a reaction within the console
                                                    if (hobbit === "Frodo" || weLikeHobbits === true) {
                                                        console.log('Hi Frodo'); // Output: Hi Frodo
                                                    } else {
                                                        console.log('We have nothing to say to you'); // Doesn't get executed
                                                    }

                                                    // Check if the variables meets certain conditions (Reverse the outcome of variable1 contains the value "Frodo") and output a reaction within the console
                                                    if (!(hobbit === "Frodo")) {
                                                        console.log('Hi Frodo'); // Doesn't get executed
                                                    } else {
                                                        console.log('We have nothing to say to you'); // Output: We have nothing to say to you (hobbit equals "Frodo" but negated the whole condition)
                                                    }

2.1.3. Switch commands

if ... else constructs do the job of enabling conditional code well, but they are not without their downsides. They are mainly good for cases where you've got a couple of choices, and each one requires a reasonable amount of code to be run, and/or the conditions are complex (for example, multiple logical operators). For cases where you just want to set a variable to a certain choice of value or print out a particular command depending on a condition, the syntax can be a bit cumbersome, especially if you've got a large number of choices.

In such a case, switch commands are your friend — they take a single expression/value as an input, and then look through a number of choices until they find one that matches that value, executing the corresponding code that goes along with it.

The keyword switch, followed by a set of parentheses ()
An expression or value inside the parentheses ()
The keyword case, followed by a choice that the expression/value could be, followed by a colon :
Some code to run if the choice matches the expression
A break command, followed by a semi-colon ;. If the previous choice matches the expression/value, the browser stops executing the code block here, and moves on to any code that appears below the switch command.
As many other cases as you like
The keyword default, followed by exactly the same code pattern as one of the cases, except that default does not have a choice after it, and you don't need to break command as there is nothing to run after this in the block anyway. This is the default option that runs if none of the choices match.

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let hobbit = "Frodo";

                                                    // Check if the variable contains a certain value and output a reaction within the console
                                                    switch (hobbit) {
                                                        case 'Frodo':
                                                            console.log('Hi Frodo'); // Output: Hi Frodo
                                                        break;

                                                        case 'Samwise':
                                                            console.log('Hi Samwise'); // Doesn't get executed
                                                        break;

                                                        // include as many cases as you like

                                                        default:
                                                            console.log('Hi Stranger'); // Doesn't get executed
                                                    }

2.1.4. Further Resources

Read more Test your skills

2.2. Loops

2.2.1. Introduction

Programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete. Here we'll look at the loop structures available in JavaScript that handle such needs.

2.2.2. For Loops

Let's start exploring some specific loop constructs. The first, which you'll use most of the time, is the for loop.

This has the following syntax:

for (initializer; condition; final-expression) { // code to run }

The keyword for, followed by some parentheses ()
Inside the parentheses we have three items, separated by semi-colons ;
- An initializer — this is usually a variable set to a number, which is incremented to count the number of times the loop has run. It is also sometimes referred to as a counter variable.
- A condition — as mentioned before, this defines when the loop should stop looping. This is generally an expression featuring a comparison operator, a test to see if the exit condition has been met.
- A final-expression — this is always evaluated (or run) each time the loop has gone through a full iteration. It usually serves to increment (or in some cases decrement) the counter variable, to bring it closer to the point where the condition is no longer true.
Some curly braces {} that contain a block of code — this code will be run each time the loop iterates.

Important: With for — as with all loops — you must make sure that the initializer is incremented or, depending on the case, decremented, so that it eventually reaches the point where the condition is not true. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an infinite loop.

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let conditionCounter = 10;

                                                    // Define a counter variable, check for a terminiation condition and increase the counter variable by 1 each time the loop is executed and output a reaction within the console
                                                    for (let i = 0; i <= conditionCounter; i++) {
                                                        console.log(i); // Output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
                                                    }

2.2.3. Exiting Loops

If you want to exit a loop before all the iterations have been completed, you can use the break command. We already met this in the previous article when we looked at switch commands — when a case is met in a switch command that matches the input expression, the break command immediately exits the switch and moves on to the code after it.

It's the same with loops — a break command will immediately exit the loop and make the browser move on to any code that follows it.

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let conditionCounter = 10;

                                                    // Define a counter variable, check for a terminiation condition and increase the counter variable by 1 each time the loop is executed and output a reaction within the console
                                                    for (let i = 0; i <= conditionCounter; i++) {
                                                        if (i === 5) {
                                                            break;
                                                        }
                                                        console.log(i); // Output: 0, 1, 2, 3, 4
                                                    }

2.2.4. Skipping Iterations

The continue command works in a similar manner to break, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop.

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let conditionCounter = 10;

                                                    // Define a counter variable, check for a terminiation condition and increase the counter variable by 1 each time the loop is executed and output a reaction within the console
                                                    for (let i = 0; i <= conditionCounter; i++) {
                                                        if (i === 5) {
                                                            continue;
                                                        }
                                                        console.log(i); // Output: 0, 1, 2, 3, 4, 6, 7, 8, 9, 10 (Note: The 5 is missing)
                                                    }

2.2.5. while and do ... while

for is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.

The while loop:

while (condition) { // code to run; final-expression }

The do ... while loop is very similar, but provides a variation on the while structure:

do { // code to run; final-expression } while (condition)

JavaScript Try this

                                                
                                                    // Define a variable
                                                    let conditionCounter = 10;

                                                    let i = 0;
                                                    // Check for a terminiation condition output a reaction within the console
                                                    while (i <= conditionCounter) {
                                                        console.log(i); // Output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
                                                        i++; // Increase the initializer i or risk a infinite loop
                                                    }

                                                    let y = 0;
                                                    // Output a reaction within the console and then check for a terminiation condition (to either continue or not)
                                                    do {
                                                        console.log(y); // Output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
                                                        y++; // Increase the initializer y or risk a infinite loop
                                                    } while (y <= conditionCounter);

2.2.6. Further Resources

Read more Test your skills

2.3. Functions

2.3.1. Introduction

Another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times. In this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters.

Where do I find functions?

In JavaScript, you'll find functions everywhere. In fact, we've been using functions all the way through the course so far; we've just not been talking about them very much. Now is the time, however, for us to start talking about functions explicitly, and really exploring their syntax.

Pretty much anytime you make use of a JavaScript structure that features a pair of parentheses () and you're not using a common built-in language structure like a for loop, while or do ... while loop, or if ... else construct, you are making use of a function.

Built-in browser functions

We've made use of functions built in to the browser a lot in this course. Every time we manipulated a text string, for example:

myText.replace('Lord', 'Master'); or myArray.join(','); or Math.random();

Custom functions

Function declarations are used to create named functions. These functions can be called using their declared name.

Function declarations are built from:

The function keyword
The function name
An optional list of parameters separated by commas , enclosed by a set of parentheses ()
A function body enclosed in a set of curly braces {}

JavaScript Try this

                                                
                                                    // Define a function
                                                    function sayHello() {
                                                        console.log('Hello');
                                                    }
                                                    // Invoke the function by its name
                                                    sayHello(); // Hello

                                                    // Bind an anonymus function to a variable
                                                    let myVariable = function () {
                                                        console.log('Samwise > Frodo');
                                                    }
                                                    // Invoke the function by calling the variable
                                                    myVariable(); // Samwise > Frodo

2.3.2. Function Parameters

Some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly

Note: Parameters are sometimes called arguments, properties, or even attributes

Note: When you need to specify multiple parameters, they are separated by commas

JavaScript Try this

                                                
                                                    // Define a function
                                                    function sayHello(name) {
                                                        console.log('Hello ' + name);
                                                    }
                                                    // Invoke the function by its name
                                                    sayHello('Frodo'); // Output: Hello Frodo

                                                    // Does not require a parameter
                                                    console.log(Math.random()); // Output: Random number between 0 and 1

                                                    // Does require a parameter: Replace the letters "Lord" with "Master" and return it within the console
                                                    let myString = 'Lord of the Rings';
                                                    console.log(myString.replace('Lord', 'Master')); // Output: Master of the Rings

                                                    // Parameter is optional: Convert the array into a string and return it within the console
                                                    let myArray = ["LOTR", "is", "awesome"];
                                                    console.log(myArray.join()); // Output: LOTR,is,awesome
                                                    console.log(myArray.join(' ')); // Output: LOTR is awesome

2.3.3. Function Return Values

Functions return (pass back) values using the return keyword. return ends function execution and returns the specified value to the location where it was called. A common mistake is to forget the return keyword, in which case the function will return undefined by default.

JavaScript Try this

                                                
                                                    // Define a function
                                                    function sayHello(name) {
                                                         return 'Hello ' + name;
                                                    }

                                                    // Invoke the function and store the return value in a variable
                                                    let myHello = sayHello('Frodo');
                                                    console.log(myHello); // Output: Hello Frodo

2.3.4. Further Resources

Read more Test your skills

2.4. Scope

2.4.2. Introduction

The current context of execution. The context in which values and expressions are "visible" or can be referenced. If a variable or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

A function serves as a closure in JavaScript, and thus creates a scope, so that (for example) a variable defined exclusively within the function cannot be accessed from outside the function or within other functions.

2.4.2. Block Scope

A value/function is only visible within a { ... } codeblock.

JavaScript Try this

                                                
                                                    // Define a function
                                                    function myFunction() {
                                                        var myVar = 'Frodo';
                                                        console.log('From within the function: ' + myVar); // Output: From within the function: Frodo
                                                    }
                                                    // Invoke the function by its name
                                                    myFunction();

                                                    // Return the value from the variable "myVar" defined within the function "myFunction"
                                                    console.log('From outside the function: ' + myVar); // Output: ReferenceError: myVar is not defined

2.4.3. Global Scope

A value/function in the global scope can be used anywhere in the entire program.

JavaScript Try this

                                                
                                                    // Define a global variable
                                                    var myVar;

                                                    // Define a function
                                                    function myFunction() {
                                                        myVar = 'Frodo';
                                                        console.log('From within the function: ' + myVar); // Output: From within the function: Frodo
                                                    }
                                                    // Invoke the function by its name
                                                    myFunction();

                                                    // Return the value from the variable "myVar" defined outside the function "myFunction" (but got a new value within it)
                                                    console.log('From outside the function: ' + myVar); // Output: From outside the function: Frodo

2.4.4. Further Resources

3. Client-Side Web APIs

Start tutorial

3.1. Web APIs

3.1.1. What are APIs?

Application Programming Interfaces (APIs) are constructs made available in programming languages to allow developers to create complex functionality more easily. They abstract more complex code away from you, providing some easier syntax to use in its place.

As a real-world example, think about the electricity supply in your house, apartment, or other dwellings. If you want to use an appliance in your house, you plug it into a plug socket and it works. You don't try to wire it directly into the power supply — to do so would be really inefficient and, if you are not an electrician, difficult and dangerous to attempt.

3.1.2. APIs in Client-Side JavaScript

Client-side JavaScript, in particular, has many APIs available to it — these are not part of the JavaScript language itself, rather they are built on top of the core JavaScript language, providing you with extra superpowers to use in your JavaScript code.

They generally fall into two categories:

Browser APIs are built into your web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it. For example, the Web Audio API provides JavaScript constructs for manipulating audio in the browser — taking an audio track, altering its volume, applying effects to it, etc. In the background, the browser is actually using some complex lower-level code (e.g. C++ or Rust) to do the actual audio processing. But again, this complexity is abstracted away from you by the API.
Third-party APIs are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the Web. For example, the Twitter API allows you to do things like displaying your latest tweets on your website. It provides a special set of constructs you can use to query the Twitter service and return specific information.

3.1.3. Relationship Between JavaScript, APIs, and Other JavaScript Tools

So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language.

Let's recap this to make it clearer, and also mention where other JavaScript tools fit in:

JavaScript: A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as Node.
Browser APIs: Constructs built into the browser that sits on top of the JavaScript language and allows you to implement functionality more easily.
Third-party APIs: Constructs built into third-party platforms (e.g. Twitter, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your latest Tweets on your web page).
JavaScript libraries: Usually one or more JavaScript files containing custom functions that you can attach to your web page to speed up or enable writing common functionality. Examples include jQuery, Mootools and React.
JavaScript frameworks: The next step up from libraries, JavaScript frameworks (e.g. Angular and Ember) tend to be packages of HTML, CSS, JavaScript, and other technologies that you install and then use to write an entire web application from scratch. The key difference between a library and a framework is “Inversion of Control”. When calling a method from a library, the developer is in control. With a framework, the control is inverted: the framework calls the developer's code.

3.1.4. Common Browser APIs

There are a huge number of APIs available in modern browsers that allow you to do a wide variety of things in your code.

APIs for manipulating documents loaded into the browser. The most obvious example is the DOM (Document Object Model) API, which 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, for example, that's the DOM in action.
APIs that fetch data from the server to update small sections of a webpage on their own are very commonly used. This seemingly small detail has had a huge impact on the performance and behavior of sites — if you just need to update a stock listing or list of available new stories, doing it instantly without having to reload the whole entire page from the server can make the site or app feel much more responsive and "snappy". APIs that make this possible include XMLHttpRequest and the Fetch API. You may also come across the term Ajax, which describes this technique.
APIs for drawing and manipulating graphics are now widely supported in browsers — the most popular ones are Canvas and WebGL, which allow you to programmatically update the pixel data contained in an HTML canvas element to create 2D and 3D scenes. For example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the Canvas API, or create a complex 3D scene with lighting and textures using WebGL. Such APIs are often combined with APIs for creating animation loops (such as window.requestAnimationFrame()) and others to make constantly updating scenes like cartoons and games.
Audio and Video APIs like HTMLMediaElement, the Web Audio API, and WebRTC allow you to do really interesting things with multimedia such as creating custom UI controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to audio tracks (such as gain, distortion, panning, etc).
Device APIs are basically APIs for manipulating and retrieving data from modern device hardware in a way that is useful for web apps. Examples include telling the user that a useful update is available on a web app via system notifications (see the Notifications API) or vibration hardware (see the Vibration API).
Client-side storage APIs are becoming a lot more widespread in web browsers — the ability to store data on the client-side is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. There are a number of options available, e.g. simple name/value storage with the Web Storage API, and more complex tabular data storage with the IndexedDB API.

3.1.5. Further Resources

3.2.1. The Important Parts of a Web Browser

Web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using JavaScript. You might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. Imagine if a web site could get access to your stored passwords or other sensitive information, and log into websites as if it were you?

Despite the limitations, Web APIs still give us access to a lot of functionality that enable us to do a great many things with web pages. There are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages.

The window is the browser tab that a web page is loaded into; this is represented in JavaScript by the Windowy object. Using methods available on this object you can do things like return the window's size (see Window.innerWidth and Window.innerHeight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more.
The navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. In JavaScript, this is represented by the Navigator object. You can use this object to retrieve things like the user's preferred language, a media stream from the user's webcam, etc.
The document (represented by the DOM in browsers) is the actual page loaded into the window, and is represented in JavaScript by the Document object. You can use this object to return and manipulate information on the HTML and CSS that comprises the document, for example get a reference to an element in the DOM, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.

3.2.2. The Document Object Model (DOM)

The document currently loaded in each one of your browser tabs is represented by a document object model. This is a "tree structure" representation created by the browser that enables the HTML structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and developers like you can manipulate the DOM with JavaScript after the page has been rendered.

You can see here that each element and bit of text in the document has its own entry in the tree — each one is called a node. You will also encounter various terms used to describe the type of node, and their position in the tree in relation to one another.

Element node: An element, as it exists in the DOM
Root node: The top node in the tree, which in the case of HTML is always the HTML node (other markup vocabularies like SVG and custom XML will have different root elements)
Child node: A node directly inside another node. For example, IMG is a child of SECTION in the above example
Descendant node: A node anywhere inside another node. For example, IMG is a child of SECTION in the above example, and it is also a descendant. IMG is not a child of BODY, as it is two levels below it in the tree, but it is a descendant of BODY
Parent node: A node which has another node inside it. For example, BODY is the parent node of SECTION in the above example
Sibling node: Nodes that sit on the same level in the DOM tree. For example, IMG and P are siblings in the above example
Text node: A node containing a text string

3.2.3. Further Resources

3.3.1. Selecting and Updating DOM Elements

Note that, as with many things in JavaScript, there are many ways to select an element and store a reference to it in a variable. document.querySelector() is the recommended modern approach, which is convenient because it allows you to select elements using CSS selectors. The const link = document.querySelector('a'); call will match the first a element that appears in the document. If you wanted to match and do things to multiple elements, you could use document.querySelectorAll(), which matches every element in the document that matches the selector, and stores references to them in an array-like object called a NodeList.

Depending on the element type we can update the contents of an element in various ways:

Update the text of an element: variableName.textContent = 'Some text';
Update the value of an input element: variableName.value = 'Some text';
Update the href of a link element: variableName.href = 'https://www.url.com/';
Update the src of an image element: variableName.src = '/path/to/the/file.jpg';
...

HTML

                                                
                                                <p class="text">Frodo Beutlin</p>
<p><a class="link" href="https://www.lotro.com" title="Lord of the Rings Online">Link</a></p>
<input class="input" value="Frodo" />
<img class="image" src="https://live.staticflickr.com/4124/5031450111_df383162f3_b.jpg" alt="Frodo and Sam" />

JavaScript Try this

                                                
                                                    // Select the element with the class "text"
                                                    let myParagraph = document.querySelector('.text');
                                                    // Replace the text within the paragraph element with a new one
                                                    myParagraph.textContent = 'Samwise the brave';

                                                    // Select the element with the class "link"
                                                    let myLink = document.querySelector('.link');
                                                    // Replace the address within the link element with a new one
                                                    myLink.href = 'https://www.ardapedia.org/';

                                                    // Select the element with the class "input"
                                                    let myInput = document.querySelector('.input');
                                                    // Replace the value within the input element with a new one
                                                    myInput.value = 'Samwise';

                                                    // Select the element with the class "image"
                                                    let myImage = document.querySelector('.image');
                                                    // Replace the value within the input element with a new one
                                                    myImage.src = 'https://www.cheatsheet.com/wp-content/uploads/2020/06/Gandalf-and-Frodo.jpg';

3.3.2. Creating and Adding New Elements

You can create new elements using the document.createElement() command. To add it to the HTML document you use document.appendChild() command.

HTML

JavaScript Try this

                                                
                                                    // Create a new (empty) paragraph
                                                    let myParagraph = document.createElement('p');

                                                    // Add some context (text) to the paragraph
                                                    myParagraph.textContent = 'Samwise the brave';

                                                    // Add the paragraph to the body of the document
                                                    document.querySelector('body').appendChild(myParagraph);

3.3.3. Removing Elements

Removing a node is pretty simple, at least when you have a reference to the node to be removed and its parent - just use ParentNode.removeChild().

When you want to remove a node based only on a reference to itself, you can use Element.remove().

HTML

                                                
                                                <div class="parent">
    <p class="frodo">Frodo Beutlin</p>
</div>
<p class="samwise">Samwise</p>

JavaScript Try this

                                                
                                                    // Select the element with the class "frodo"
                                                    let myVar1 = document.querySelector('.frodo');

                                                    // Remove the element from the DOM
                                                    document.querySelector('.parent').removeChild(myVar1);

                                                    // Select the element with the class "samwise"
                                                    let myVar2 = document.querySelector('.samwise');

                                                    // Remove the element from the DOM
                                                    myVar2.remove(myVar1);

3.3.4. Manipulating Styles

It is possible to manipulate CSS styles via JavaScript in a variety of ways.

The first way is to add inline styles directly onto elements you want to dynamically style. This is done with the HTMLElement.style property, which contains inline styling information for each element in the document. You can set properties of this object to directly update element styles.

Note: Notice how the JavaScript property versions of the CSS styles are written in lower camel case whereas the CSS versions are hyphenated (e.g. backgroundColor versus background-color). Make sure you don't get these mixed up, otherwise it won't work.

A more elegant way is to simply switch the class of an element with another pre-defined CSS-class using element.classList.add('css-class-i-want-to-add'); and element.classList.remove('css-class-i-want-to-remove');

HTML

                                                
                                                <p class="frodo uncool">Frodo</p>
<p class="samwise cool">Samwise</p>

JavaScript Try this

                                                
                                                    // Select the element with the class "frodo"
                                                    let myVar1 = document.querySelector('.frodo');

                                                    // Add some basic CSS styles to the element
                                                    myVar1.style.color = 'white';
                                                    myVar1.style.backgroundColor = 'black';
                                                    myVar1.style.padding = '10px';
                                                    myVar1.style.width = '250px';
                                                    myVar1.style.textAlign = 'center';

                                                    // Select the element with the class "samwise"
                                                    let myVar2 = document.querySelector('.samwise');

                                                    // Remove the class "cool" and add the class "mega-cool"
                                                    myVar2.classList.remove('cool');
                                                    myVar2.classList.add('mega-cool');

3.3.5. Further Resources

3.4.2. Introduction

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box. In this article, we discuss some important concepts surrounding events, and look at how they work in browsers. This won't be an exhaustive study; just what you need to know at this stage.

As mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and provides a mechanism by which an action can be automatically taken (that is, some code running) when the event occurs. For example, in an airport, when the runway is clear for take off, a signal is communicated to the pilot. As a result, the plane can safely takeoff.

In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are many different types of events that can occur.

For example:

The user selects a certain element or hovers the cursor over a certain element
The user chooses a key on the keyboard
The user resizes or closes the browser window
A web page finishes loading
A form is submitted
A video is played, paused, or finishes
An error occurs
...

Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that runs when the event fires. When such a block of code is defined to run in response to an event, we say we are registering an event handler.

Note: Event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

The modern mechanism for adding event handlers is the addEventListener() method.

HTML

                                                
                                                <button class="button">Who is our hero?</button>
<p class="hero">You know who...</p>

JavaScript Try this

                                                
                                                    // Define a function that should be executed whenever the button is pressed
                                                    function displayText() {
                                                        document.querySelector('.hero').textContent = 'Samwise the brave!';
                                                    }

                                                    // Select the button
                                                    let myButton = document.querySelector('.button');

                                                    // Bind an event listener that is getting executed whenever the button is pressed
                                                    myButton.addEventListener('click', displayText);

3.4.2. Further Resources

Read more Test your skills

4. Practise: Random Students [Challenge]

Start tutorial

4.1. Introduction

4.2. HTML: Structure

4.3. JavaScript: Variables

4.4. JavaScript: EventListener

4.5. JavaScript: Random Number

4.6. JavaScript: Interims Result

4.7. JavaScript: More Variables

4.8. JavaScript: Empty Area

4.9. JavaScript: Loop

4.10. JavaScript: Final Result

5. Practise: Random Number Game

Start tutorial

5.1. Introduction

5.2. HTML: Structure

5.3. JavaScript: Variables

5.3.1. Declare Variables

Steps

Declare two empty variables using the var command

HTML

                                                
                                                <input id="js-random-number" type="number" min="0" max="5" placeholder="0 - 5" />
<button id="js-random-button" type="button">GO</button>
<p id="js-random-result"></p>

JavaScript Try this

                                                
                                                    // (1) Declare two empty variables
                                                    var randomNumber;
                                                    var result;

5.4. JavaScript: EventListener

5.4.1. Catch the Button

Steps

Select the button using the querySelector() command
Attach an EventListener to it so we can catch all (press) interactions on it using the addEventListener() command
Within an anonymous function return a message within the console (for debugging reasons) using the console.log() command

HTML

                                                
                                                <input id="js-random-number" type="number" min="0" max="5" placeholder="0 - 5" />
<button id="js-random-button" type="button">GO</button>
<p id="js-random-result"></p>

JavaScript Try this

                                                
                                                    // Declare two empty variables
                                                    var randomNumber;
                                                    var result;

                                                    // (1) Select the button and (2) attach an EventListener
                                                    document.querySelector('#js-random-button').addEventListener('click', function () {

                                                        // (3) return a message within the console (for debugging reasons)
                                                        console.log('Button was pressed');
                                                    });

5.5. JavaScript: Random Number

5.5.1. Create a Random Number

Steps

Assign a random number to the "randomNumber" variable using the Math.random() command
Return a message within the console (for debugging reasons) using the console.log() command

HTML

                                                
                                                <input id="js-random-number" type="number" min="0" max="5" placeholder="0 - 5" />
<button id="js-random-button" type="button">GO</button>
<p id="js-random-result"></p>

JavaScript Try this

                                                
                                                    // Declare two empty variables
                                                    var randomNumber;
                                                    var result;

                                                    // Select the button and attach an EventListener
                                                    document.querySelector('#js-random-button').addEventListener('click', function () {
                                                        // (1) Assign a random number to the "randomNumber" variable
                                                        randomNumber = Math.floor(Math.random() * 6); // Generates a random number between 0 - 5

                                                        // (2) return a message within the console (for debugging reasons)
                                                        console.log(randomNumber);
                                                    });

5.6. JavaScript: Conditional

5.6.1. Create a Conditional

Steps

Check if the value entered by the user equals the random number using the if ... else construct
Store a success / failure message
Return a message within the console (for debugging reasons) using the console.log() command

HTML

                                                
                                                <input id="js-random-number" type="number" min="0" max="5" placeholder="0 - 5" />
<button id="js-random-button" type="button">GO</button>
<p id="js-random-result"></p>

JavaScript Try this

                                                
                                                    // Declare two empty variables
                                                    var randomNumber;
                                                    var result;

                                                    // Select the button and attach an EventListener
                                                    document.querySelector('#js-random-button').addEventListener('click', function () {
                                                        // Assign a random number to the "randomNumber" variable
                                                        randomNumber = Math.floor(Math.random() * 6); // Generates a random number between 0 - 5

                                                        // (1) Check if the value entered by the user equals the random number
                                                        if (document.querySelector('#js-random-number').value == randomNumber) {
                                                            result = 'Yeah - Random number was: ' + randomNumber; // (2) Store a success / failure message
                                                        } else {
                                                            result = 'Bad luck - Random number was: ' + randomNumber; // (2) Store a success / failure message
                                                        }

                                                        // (3) return a message within the console (for debugging reasons)
                                                        console.log(result);
                                                    });

5.7. JavaScript: Result

5.7.1. Return the Result

Steps

Return the result message within the result area using the querySelector() and the textContent command

HTML

                                                
                                                <input id="js-random-number" type="number" min="0" max="5" placeholder="0 - 5" />
<button id="js-random-button" type="button">GO</button>
<p id="js-random-result"></p>

JavaScript Try this

                                                
                                                    // Declare two empty variables
                                                    var randomNumber;
                                                    var result;

                                                    // Select the button and attach an EventListener
                                                    document.querySelector('#js-random-button').addEventListener('click', function () {
                                                        // Assign a random number to the "randomNumber" variable
                                                        randomNumber = Math.floor(Math.random() * 6); // Generates a random number between 0 - 5

                                                        // Check if the value entered by the user equals the random number
                                                        if (document.querySelector('#js-random-number').value == randomNumber) {
                                                            result = 'Yeah - Random number was: ' + randomNumber; // Store a success / failure message
                                                        } else {
                                                            result = 'Bad luck - Random number was: ' + randomNumber; // Store a success / failure message
                                                        }

                                                        // (1) Return the result
                                                        document.querySelector('#js-random-result').textContent = result;
                                                    });

6. Practise: Surprise Me [Challenge]

Start tutorial

6.1. Introduction

6.2. HTML: Structure

6.2.1. The HTML Structure

Steps

Create a container for the whole content:

Create a <div>-tag for this (<div></div>)
Add the class "flex" (for later use in CSS)

Create a container for the first area:

Create a <div>-tag for this (<div></div>)
Add the class "flex-auto" (for later use in CSS)
Create a container where we will display the results
(Create a <div>-tag for this (<div></div>)
Add the id-attribute "js-result-motivateme" (for later use in JavaScript)
Create a button to execute the function
Create a <button>-tag for this (<button>Text</button>)
Add the id-attribute "js-motivateme" (for later use in JavaScript)

Repeat the previous step two more times to add two more areas: "Educate Me" and "Entertain Me":

Adapt the two id-attributes accordingly
Adapt the button text accordingly

HTML Try this

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

6.3. CSS: Layout

6.2.1. The CSS Layout

Steps

Create a generic Flexbox layout.

Select the class "flex")
Add the generic Flexbox declaration (display: flex;)
Select the class "flex-auto")
Distribute the children elements evenly (flex: 1;)

Create a visible distinction between the areas.

Select the children of the "flex" class (flex > div)
Add basic style declarations (e.g., background color, border, spacing, …)
Limit the width of images
Select the element type image (img)
Limit the width (max-width: 200px;)

Add a Media Query to "optimize" the page for mobile clients.

Address all media with a max-width of 767px (@media (max-width: 767px))
Overwrite the CSS rule for the previously defined Flexbox (.flex { display: block; })

HTML

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

CSS Try this

                                                
                                                    /* Initial setup */
                                                    .flex {
                                                        display: flex;
                                                    }
                                                    /* Distributes the columns evenly */
                                                    .flex-auto {
                                                        flex: 1;
                                                    }
                                            
                                                    /* Just some basic (and ugly) styles to create a visible seperation */
                                                    .flex > div {
                                                        text-align: center;
                                                        background-color: #CCC;
                                                        border: 1px solid #000;
                                                        margin: 10px;
                                                        padding: 10px;
                                                    }
                                                    /* Limit the image width so it doesn't eat up to much space */
                                                    img {
                                                        max-width: 200px;
                                                    }
                                            
                                                    /* Media query (remember: Responsive design) to line-break the layout on smaller screens */
                                                    @media (max-width: 767px) {
                                                        .flex {
                                                            display: block;
                                                        }
                                                    }

6.4. JavaScript: Variables

6.4.1. Declare Variables

Steps

Create a list to accommodate the "motivateMe" contents:

Create an array (e.g., let variablename = [];)
Enter text elements (e.g., ['text1', 'text2', …])

Repeat step 1 but for "educateMe":

Enter website addresses instead of text (e.g., ['http://www.xyz.com', …])

Repeat step 2 but for "entertainMe":

Enter image paths instead of text (e.g., ['http://www.xyz.com/pathtoimage', …])

HTML

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

CSS

                                                
                                                    /* Initial setup */
                                                    .flex {
                                                        display: flex;
                                                    }
                                                    /* Distributes the columns evenly */
                                                    .flex-auto {
                                                        flex: 1;
                                                    }
                                            
                                                    /* Just some basic (and ugly) styles to create a visible seperation */
                                                    .flex > div {
                                                        text-align: center;
                                                        background-color: #CCC;
                                                        border: 1px solid #000;
                                                        margin: 10px;
                                                        padding: 10px;
                                                    }
                                                    /* Limit the image width so it doesn't eat up to much space */
                                                    img {
                                                        max-width: 200px;
                                                    }
                                            
                                                    /* Media query (remember: Responsive design) to line-break the layout on smaller screens */
                                                    @media (max-width: 767px) {
                                                        .flex {
                                                            display: block;
                                                        }
                                                    }

JavaScript Try this

                                                
                                                    // MotivateMe list
                                                    let listMotivate = ['You are awesome', 'Keep on rocking', 'You have style'];

                                                    // EducateMe list
                                                    let listEducate = ['https://www.linkedin.com/learning/leadership-fundamentals', 'https://www.linkedin.com/learning/managing-teams-3', 'https://www.linkedin.com/learning/new-manager-foundations-2'];

                                                    // EntertainMe list
                                                    let listEntertain = ['https://img.wattpad.com/957c7f25e97a5cbddbf09f7be6caef4abb6be199/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f306479583073565246365f6778673d3d2d3331312e313462376666643931323033366337613530373434323832383639372e6a7067?s=fit&w=720&h=720', 'https://images-cdn.9gag.com/photo/ap5qr2M_700b.jpg', 'https://i.chzbgr.com/full/9135306752/h9ABDE492/lotr-meme-hair-i-think-im-in-love-with-you-aragorn-seen-1248pm']

6.5. JavaScript: MotivateMe

6.5.1. Return a motivating quote

Steps

Bind an event to the button:

Select the button with the id "js-motivateme": document.querySelector('#js-motivateme')
Bind a function to the button click: .addEventListener('click', function () { … });

Generate a random number (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random/):

Between 0 – max length of entries in our list: let randomNumber = Math.floor(Math.random() * listEducate.length);

Return a random entry:

Select the container with the id "js-result-motivateme": document.querySelector('#js-result-motivateme')
Display the random entry from the list: .textContent = listMotivate[randomNumber];

HTML

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

CSS

                                                
                                                    /* Initial setup */
                                                    .flex {
                                                        display: flex;
                                                    }
                                                    /* Distributes the columns evenly */
                                                    .flex-auto {
                                                        flex: 1;
                                                    }
                                            
                                                    /* Just some basic (and ugly) styles to create a visible seperation */
                                                    .flex > div {
                                                        text-align: center;
                                                        background-color: #CCC;
                                                        border: 1px solid #000;
                                                        margin: 10px;
                                                        padding: 10px;
                                                    }
                                                    /* Limit the image width so it doesn't eat up to much space */
                                                    img {
                                                        max-width: 200px;
                                                    }
                                            
                                                    /* Media query (remember: Responsive design) to line-break the layout on smaller screens */
                                                    @media (max-width: 767px) {
                                                        .flex {
                                                            display: block;
                                                        }
                                                    }

JavaScript Try this

                                                
                                                    // MotivateMe list
                                                    let listMotivate = ['You are awesome', 'Keep on rocking', 'You have style'];

                                                    // EducateMe list
                                                    let listEducate = ['https://www.linkedin.com/learning/leadership-fundamentals', 'https://www.linkedin.com/learning/managing-teams-3', 'https://www.linkedin.com/learning/new-manager-foundations-2'];

                                                    // EntertainMe list
                                                    let listEntertain = ['https://img.wattpad.com/957c7f25e97a5cbddbf09f7be6caef4abb6be199/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f306479583073565246365f6778673d3d2d3331312e313462376666643931323033366337613530373434323832383639372e6a7067?s=fit&w=720&h=720', 'https://images-cdn.9gag.com/photo/ap5qr2M_700b.jpg', 'https://i.chzbgr.com/full/9135306752/h9ABDE492/lotr-meme-hair-i-think-im-in-love-with-you-aragorn-seen-1248pm']

                                                    // Bind the MotivateMe-functionality to the button click
                                                    document.querySelector('#js-motivateme').addEventListener('click', function () {

                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listMotivate.length);

                                                        // Display a random entry from the Motivate list
                                                        document.querySelector('#js-result-motivateme').textContent = listMotivate[randomNumber];
                                                    });

6.6. JavaScript: EducateMe

6.6.1. Return a link to an educating video

Steps

Repeat the previous step one more time to add the functionality for the next button: "Educate Me"

Copy & paste the previous JavaScript snippet
Adapt the id-attribute accordingly
Keep the random number generator
Adapt the list.length

Create a link:

Create an empty link: let link = document.createElement('a');
Add web address from the list to the link: link.href = listEducate[randomNumber];
Add text from the list to the link: link.textContent = listEducate[randomNumber];

Return a random entry:

Create an empty link: let link = document.createElement('a');
Add web address from the list to the link: link.href = listEducate[randomNumber];
Add text from the list to the link: link.textContent = listEducate[randomNumber];

HTML

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

CSS

                                                
                                                    /* Initial setup */
                                                    .flex {
                                                        display: flex;
                                                    }
                                                    /* Distributes the columns evenly */
                                                    .flex-auto {
                                                        flex: 1;
                                                    }
                                            
                                                    /* Just some basic (and ugly) styles to create a visible seperation */
                                                    .flex > div {
                                                        text-align: center;
                                                        background-color: #CCC;
                                                        border: 1px solid #000;
                                                        margin: 10px;
                                                        padding: 10px;
                                                    }
                                                    /* Limit the image width so it doesn't eat up to much space */
                                                    img {
                                                        max-width: 200px;
                                                    }
                                            
                                                    /* Media query (remember: Responsive design) to line-break the layout on smaller screens */
                                                    @media (max-width: 767px) {
                                                        .flex {
                                                            display: block;
                                                        }
                                                    }

JavaScript Try this

                                                
                                                    // MotivateMe list
                                                    let listMotivate = ['You are awesome', 'Keep on rocking', 'You have style'];

                                                    // EducateMe list
                                                    let listEducate = ['https://www.linkedin.com/learning/leadership-fundamentals', 'https://www.linkedin.com/learning/managing-teams-3', 'https://www.linkedin.com/learning/new-manager-foundations-2'];

                                                    // EntertainMe list
                                                    let listEntertain = ['https://img.wattpad.com/957c7f25e97a5cbddbf09f7be6caef4abb6be199/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f306479583073565246365f6778673d3d2d3331312e313462376666643931323033366337613530373434323832383639372e6a7067?s=fit&w=720&h=720', 'https://images-cdn.9gag.com/photo/ap5qr2M_700b.jpg', 'https://i.chzbgr.com/full/9135306752/h9ABDE492/lotr-meme-hair-i-think-im-in-love-with-you-aragorn-seen-1248pm']

                                                    // Bind the MotivateMe-functionality to the button click
                                                    document.querySelector('#js-motivateme').addEventListener('click', function () {

                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listMotivate.length);

                                                        // Display a random entry from the Motivate list
                                                        document.querySelector('#js-result-motivateme').textContent = listMotivate[randomNumber];
                                                    });

                                                    // Bind the EducateMe-functionality to the button click
                                                    document.querySelector('#js-educateme').addEventListener('click', function () {

                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listEducate.length);

                                                        // Generate a link from the Educate list
                                                        let link = document.createElement('a'); // Create an empty link
                                                        link.href = listEducate[randomNumber]; // Add a webaddress to the link
                                                        link.textContent = listEducate[randomNumber]; // Add a text to the link

                                                        // Display the link
                                                        document.querySelector('#js-result-educateme').textContent = ''; // Empty the result area
                                                        document.querySelector('#js-result-educateme').appendChild(link); // Add the result
                                                    });

6.6. JavaScript: EntertainMe

6.6.1. Return an entertaining image

Steps

Repeat the previous step one more time to add the functionality for the next button: "Entertain Me"

Copy & paste the previous JavaScript snippet
Adapt the id attributes and variable names

Replace the "create link" logic with a "create image" logic:

let image = document.createElement('img');
image.src = listEntertain[randomNumber];

Return a random entry:

As before but this time we return the image

HTML

                                                
                                                <div class="flex"> <!-- Container -->

    <!-- First Container: Motivate Me -->
    <div class="flex-auto">
        <div id="js-result-motivateme"></div> <!-- Placeholder for the content -->
        <button id="js-motivateme">Motivate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Second container: Educate Me -->
    <div class="flex-auto">
        <div id="js-result-educateme"></div> <!-- Placeholder for the content -->
        <button id="js-educateme">Educate Me</button> <!-- Button / Trigger -->
    </div>

    <!-- Third container: Entertain Me -->
    <div class="flex-auto">
        <div id="js-result-entertainme"></div> <!-- Placeholder for the content -->
        <button id="js-entertainme">Entertain Me</button> <!-- Button / Trigger -->
    </div>

</div>

CSS

                                                
                                                    /* Initial setup */
                                                    .flex {
                                                        display: flex;
                                                    }
                                                    /* Distributes the columns evenly */
                                                    .flex-auto {
                                                        flex: 1;
                                                    }
                                            
                                                    /* Just some basic (and ugly) styles to create a visible seperation */
                                                    .flex > div {
                                                        text-align: center;
                                                        background-color: #CCC;
                                                        border: 1px solid #000;
                                                        margin: 10px;
                                                        padding: 10px;
                                                    }
                                                    /* Limit the image width so it doesn't eat up to much space */
                                                    img {
                                                        max-width: 200px;
                                                    }
                                            
                                                    /* Media query (remember: Responsive design) to line-break the layout on smaller screens */
                                                    @media (max-width: 767px) {
                                                        .flex {
                                                            display: block;
                                                        }
                                                    }

JavaScript Try this

                                                
                                                    // MotivateMe list
                                                    let listMotivate = ['You are awesome', 'Keep on rocking', 'You have style'];

                                                    // EducateMe list
                                                    let listEducate = ['https://www.linkedin.com/learning/leadership-fundamentals', 'https://www.linkedin.com/learning/managing-teams-3', 'https://www.linkedin.com/learning/new-manager-foundations-2'];

                                                    // EntertainMe list
                                                    let listEntertain = ['https://img.wattpad.com/957c7f25e97a5cbddbf09f7be6caef4abb6be199/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f306479583073565246365f6778673d3d2d3331312e313462376666643931323033366337613530373434323832383639372e6a7067?s=fit&w=720&h=720', 'https://images-cdn.9gag.com/photo/ap5qr2M_700b.jpg', 'https://i.chzbgr.com/full/9135306752/h9ABDE492/lotr-meme-hair-i-think-im-in-love-with-you-aragorn-seen-1248pm']

                                                    // Bind the MotivateMe-functionality to the button click
                                                    document.querySelector('#js-motivateme').addEventListener('click', function () {

                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listMotivate.length);

                                                        // Display a random entry from the Motivate list
                                                        document.querySelector('#js-result-motivateme').textContent = listMotivate[randomNumber];
                                                    });

                                                    // Bind the EducateMe-functionality to the button click
                                                    document.querySelector('#js-educateme').addEventListener('click', function () {

                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listEducate.length);

                                                        // Generate a link from the Educate list
                                                        let link = document.createElement('a'); // Create an empty link
                                                        link.href = listEducate[randomNumber]; // Add a webaddress to the link
                                                        link.textContent = listEducate[randomNumber]; // Add a text to the link

                                                        // Display the link
                                                        document.querySelector('#js-result-educateme').textContent = ''; // Empty the result area
                                                        document.querySelector('#js-result-educateme').appendChild(link); // Add the result
                                                    });

                                                    // Bind the EntertainMe-functionality to the button click
                                                    document.querySelector('#js-entertainme').addEventListener('click', function () {
                                                        // Generate a random number
                                                        let randomNumber = Math.floor(Math.random() * listEntertain.length);

                                                        // Generate an image from the Educate list
                                                        let image = document.createElement('img'); // Create an empty image
                                                        image.src = listEntertain[randomNumber]; // Add an image source

                                                        // Display the image
                                                        document.querySelector('#js-result-entertainme').textContent = ''; // Empty the result area
                                                        document.querySelector('#js-result-entertainme').appendChild(image); // Add the image
                                                    });

7. Practise: Calculator

Start tutorial

7.1. Introduction

7.2. HTML: Structure

7.3. JavaScript: Events

7.3.1. Bind Events

Steps

Select the input and select elements using the querySelectorAll() command
Attach an EventListener to it so we can catch all (press) interactions on it using the addEventListener() command
Within an anonymous function return a message within the console (for debugging reasons) using the console.log() command

HTML

                                                
                                                <h1>Basic calculation script</h1>
<h2>Tasks:</h2>
<ul>
    <li>Whenever there is a value change in one of the two input fields or to the dropdown list -> Perform the calculation</li>
</ul>
<h3>Here is where the magic happens:</h3>
<div>
    <input id="js-calc-value1" class="js-calc-change" type="number" name="number1" placeholder="Type in some number" />
    <select id="js-calc-operation" class="js-calc-change" name="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="/">/</option>
        <option value="*">*</option>
    </select>
    <input id="js-calc-value2" class="js-calc-change" type="number" name="number2" placeholder="Type in some number" />
    <span> = </span>
    <span id="js-calc-result">Result?</span>
</div>

JavaScript Try this

                                                
                                                    document.querySelectorAll('.js-calc-change').forEach(function (element) {
                                                        element.addEventListener('change', function () {

                                                            console.log('Input / Select value has changed');
                                                        });
                                                    });

7.4. JavaScript: Input Values

7.4.1. Store the Input Values

Steps

Store the values from both input elements in a variable (as an integer)

HTML

                                                
                                                <h1>Basic calculation script</h1>
<h2>Tasks:</h2>
<ul>
    <li>Whenever there is a value change in one of the two input fields or to the dropdown list -> Perform the calculation</li>
</ul>
<h3>Here is where the magic happens:</h3>
<div>
    <input id="js-calc-value1" class="js-calc-change" type="number" name="number1" placeholder="Type in some number" />
    <select id="js-calc-operation" class="js-calc-change" name="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="/">/</option>
        <option value="*">*</option>
    </select>
    <input id="js-calc-value2" class="js-calc-change" type="number" name="number2" placeholder="Type in some number" />
    <span> = </span>
    <span id="js-calc-result">Result?</span>
</div>

JavaScript Try this

                                                
                                                    document.querySelectorAll('.js-calc-change').forEach(function (element) {
                                                        element.addEventListener('change', function () {

                                                            var value1 = parseInt(document.querySelector('#js-calc-value1').value, 10);
                                                            var value2 = parseInt(document.querySelector('#js-calc-value2').value, 10);
                                                        });
                                                    });

7.5. JavaScript: Conditional

7.5.1. Create a Conditional

Steps

Check if the values entered by the user are integers using the if ... else construct
Return a message within the console (for debugging reasons) using the console.log() command

HTML

                                                
                                                <h1>Basic calculation script</h1>
<h2>Tasks:</h2>
<ul>
    <li>Whenever there is a value change in one of the two input fields or to the dropdown list -> Perform the calculation</li>
</ul>
<h3>Here is where the magic happens:</h3>
<div>
    <input id="js-calc-value1" class="js-calc-change" type="number" name="number1" placeholder="Type in some number" />
    <select id="js-calc-operation" class="js-calc-change" name="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="/">/</option>
        <option value="*">*</option>
    </select>
    <input id="js-calc-value2" class="js-calc-change" type="number" name="number2" placeholder="Type in some number" />
    <span> = </span>
    <span id="js-calc-result">Result?</span>
</div>

JavaScript Try this

                                                
                                                    document.querySelectorAll('.js-calc-change').forEach(function (element) {
                                                        element.addEventListener('change', function () {

                                                            var value1 = parseInt(document.querySelector('#js-calc-value1').value, 10);
                                                            var value2 = parseInt(document.querySelector('#js-calc-value2').value, 10);

                                                            if (!Number.isNaN(value1) && !Number.isNaN(value2)) {

                                                                console.log(value1);
                                                                console.log(value2);
                                                            }
                                                        });
                                                    });

7.6. JavaScript: Switch

7.6.1. Create a Switch Conditional

Steps

Check which operator has been used (+, -, *, /) using the switch construct
Perform the calculation accordingly and store it in a variable
Return the result

HTML

                                                
                                                <h1>Basic calculation script</h1>
<h2>Tasks:</h2>
<ul>
    <li>Whenever there is a value change in one of the two input fields or to the dropdown list -> Perform the calculation</li>
</ul>
<h3>Here is where the magic happens:</h3>
<div>
    <input id="js-calc-value1" class="js-calc-change" type="number" name="number1" placeholder="Type in some number" />
    <select id="js-calc-operation" class="js-calc-change" name="operation">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="/">/</option>
        <option value="*">*</option>
    </select>
    <input id="js-calc-value2" class="js-calc-change" type="number" name="number2" placeholder="Type in some number" />
    <span> = </span>
    <span id="js-calc-result">Result?</span>
</div>

JavaScript Try this

                                                
                                                    document.querySelectorAll('.js-calc-change').forEach(function (element) {
                                                        element.addEventListener('change', function () {

                                                            var value1 = parseInt(document.querySelector('#js-calc-value1').value, 10);
                                                            var value2 = parseInt(document.querySelector('#js-calc-value2').value, 10);

                                                            if (!Number.isNaN(value1) && !Number.isNaN(value2)) {

                                                                var result;
                                                                switch (document.querySelector('#js-calc-operation').value) {
                                                                    case '+':
                                                                        result = value1 + value2;
                                                                        break;
                                                                    case '-':
                                                                        result = value1 - value2;
                                                                        break;
                                                                    case '/':
                                                                        result = value1 / value2;
                                                                        break;
                                                                    case '*':
                                                                        result = value1 * value2;
                                                                        break;
                                                                }

                                                                document.querySelector('#js-calc-result').textContent = result;
                                                            }
                                                        });
                                                    });

1. Basics

1.0. Introduction

1.0.1. What is JavaScript?

1.0.2. Further Resources

1.1. Comments

1.1.1. Single-Line Comments

1.1.2. Multi-line Comments

1.1.3. Further Resources

1.2. Chrome DevTools

1.2.1. Introduction

1.2.2. Log Messages

1.2.3. Further Resources

1.3. Variables

1.3.1. Introduction

1.3.2. Declaring & Initializing Variables

1.3.3. Further Resources

1.4. Data Types

1.4.1. Introduction

1.4.2. Further Resources

1.5. Operators

1.5.1. Arithmetic Operators

1.5.2. Assignment Operators

1.5.3. Comparison Operators

1.5.4. Further Resources

1.6. Strings

1.6.1. Concatenating Strings

1.6.2. Template Literals

1.6.3. Useful String Methods

1.6.4. Further Resources

1.7. Arrays

1.7.1. Introduction

1.7.2. Useful Array Methods

1.7.3. Further Resources

1.8. Objects

1.8.1. Introduction

1.8.2. Iteration and Objects

1.8.3. Objects Methods

1.8.4. Further Resources

1.9. Troubleshooting

1.9.1. What went wrong? Troubleshooting JavaScript

2. Building Blocks

2.1. Conditionals

2.1.1. If ... Else commands

2.1.2. Logical operators: AND, OR and NOT

2.1.3. Switch commands

2.1.4. Further Resources

2.2. Loops

2.2.1. Introduction

2.2.2. For Loops

2.2.3. Exiting Loops

2.2.4. Skipping Iterations

2.2.5. while and do ... while

2.2.6. Further Resources

2.3. Functions

2.3.1. Introduction

2.3.2. Function Parameters

2.3.3. Function Return Values

2.3.4. Further Resources

2.4. Scope

2.4.2. Introduction

2.4.2. Block Scope

2.4.3. Global Scope

2.4.4. Further Resources

3. Client-Side Web APIs

3.1. Web APIs

3.1.1. What are APIs?

3.1.2. APIs in Client-Side JavaScript

3.1.3. Relationship Between JavaScript, APIs, and Other JavaScript Tools

3.1.4. Common Browser APIs

3.1.5. Further Resources

3.2. Web Browser and the Document Object Model (DOM)

3.2.1. The Important Parts of a Web Browser

3.2.2. The Document Object Model (DOM)

3.2.3. Further Resources

3.3. Manipulating Documents

3.3.1. Selecting and Updating DOM Elements

3.3.2. Creating and Adding New Elements

3.3.3. Removing Elements

3.3.4. Manipulating Styles

3.3.5. Further Resources