Align the flex items at the center of the container:

div {
  display: flex;
  justify-content: center;
}

Align the flex items at the beginning of the container (this is default):

div {
  display: flex;
  justify-content: flex-start;
}

Align the flex items at the end of the container:

div {
  display: flex;
  justify-content: flex-end;
}

Display the flex items with space between the lines:

div {
  display: flex;
  justify-content: space-between;
}

Display the flex items with space before, between, and after the lines:

div {
  display: flex;
  justify-content: space-around;
}

The function

addEventListener

creates the specified event listener for the object. In this case we add

click

event for the div element with id

div_element

without using anonymous function. First we select the object that we want to create

click

event listener to

let div = document.getElementById('div_element');

Then we create the actual event listener for the event without anonymous function

div.addEventListener('click', func);
function func() {
    alert('You clicked me!');
}

The same example using anonymous function

div.addEventListener('click', function(){
  alert('You clicked me!');
})

HTML part of the examples:

<div id="div_element">Click Me</div>

Another method to add the event listener is to include

onclick

attribute inside opening tag

<div onclick="func()">Click Me</div>

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser. 

localStorage:

localStorage object stores data with no expiration date.The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

sessionStorage:

The 
Session storage
 — Session storage uses the sessionStorage object to store data on a temporary basis, for a single browser window or tab.

Difference between localStorage and sessionStorage:

Session storage is destroyed once the user closes the browser whereas, Local storage stores data with no expiration date. 

It's possible to have an object inside another object. In the example we have object

boyfriend

inside

cat

object

let cat = {
    name: 'Lucy',
    age: 4,
    meow() {
        console.log('Meowwww');
    },
    boyfriend: {
        name: 'Jack',
        age: 5,
        favoriteColors: ['Green', 'Yellow'],
        meow() {
            console.log('Meeoowwwwwwwwwwww');
        },
    }
}

Accessing nested object's attributes and methods:

console.log(cat.boyfriend.name); // Jack
cat.boyfriend.meow(); // Meeoowwwwwwwwwwww

The object

cat

combines attributes and behaviors of a cat in the following object

let cat = {
    age: 4,
    name: 'Bella',
    meow() {
        console.log('Meowwww');
    }
}

Instead of the object, we would have separated function and variables, which is not organized way

let catName = 'Bella';
let catAge = 4;

function meow() {
    console.log('Meowwww');
}

Simple function called

greeting

that shows the following message:

Hello, my name is john

using

alert

built-in function. Then we can call the function by typing the function name followed by parenthesis:

greeting();

function greeting() {
    alert('Hello, my name is john');
}
greeting();

The same function with more flexibility. We pass the parameter

name

to the function, so it can be called for different users. When we call the function, we need to pass a string, as an argument

greeting('John');

function greeting(name) {
    alert('Hello, my name is ' + name);
}
greeting('John');

The same function with several parameters. We added another parameter

age

to the function

function greeting(name, age) {
    alert('Hello, my name is ' + name + ' and I am ' + age + ' years old');
}
greeting('John', 25);

The following function returns value, so that we can use the function in expressions

function doubleMe(number) {
    return 2*number;
}
console.log(3*doubleMe(50));  // 300

We can assign default values to parameters if they are not passed when the function gets called

function aboutMe(profession = 'student', name, city = 'Tbilisi' ) {
    console.log('I am a ' + profession + ' from ' + city + ' and my name is ' + name);
}
aboutMe(undefined, 'Valeri');

There are several built-in functions to interact with the user:

alert('Text message');
prompt('What is your name?');
confirm('Do you want to learn JavaScript')

Function

alert

shows a text message

alert('Text message');

Function

prompt

asks the user to input a text. It can be an answer for the question that the function asks the user

prompt('What is your name?');

The function has another optional parameter, which is a default value of the input

prompt('What is your favorite programming language?', 'JavaScript');

Function

confirm

asks the user and waits for the user to accept or cancel

confirm('Do you want to learn JavaScript')

Simple example of the three interactive functions together:

if (confirm('Do you want to learn programming?')) {
    let language = prompt('Choose your favorite programming language: JS, Python, PHP', 'JS');
    alert('You will be redirected to ' + language + " tutorial's page");
    window.location.href = 'https://w3schools.com/'+language;
} else {
    alert('Go waste your time with playing video games')
}

Sets

green

background color

document.body.style.backgroundColor = 'green';

Sets

display

property to

inline-block

for the element with id

element_id

document.getElementById('element_id').style.display = 'inline-block';

Prints the current web page title

console.log(document.title);

Updates the current web page title

document.title = 'Getting started with JavaScript';

Variable

myName

will be concatenated with the string

let myName = 'Valeri';
console.log('My name is ' + myName + '.');

The result will be:

My name is Valeri.