# Math object

The Math object is a built-in object with mathematical constants (properties) and methods
- Unlike many other built-in objects, Math is a static object which has no constructor, so every property/method starts with Math.

# Frequently used (static) properties

property	description
`Math.PI` (opens new window)	a constant that approximately equals `3.14159`

# Frequently used (static) methods

methode	description
`Math.ceil(<x>)` (opens new window)	round `<x>` up to the nearest integer
`Math.floor(<x>)` (opens new window)	round `<x>` down to the nearest integer
`Math.round(<x>)` (opens new window)	round `<x>` to the nearest integer (`>= .5` round up, `< .5` round down)
`Math.random()` (opens new window)	generate a random number between `0` (included) and `1` (excluded)
`Math.abs(<x>)` (opens new window)	returns the absolute value of `<x>`

# Examples

# Cylinder volume

Open es6/math/cylinder.html and es6/math/cylinder.js
Calculate the volume of a cylinder (and round it to 2 decimal points)

<div class="border-gray">
    <p>
        <label for="radius">radius</label>
        <input type="number" name="radius" id="radius" step=".5" value="5" /> cm *
        <label for="height">height</label>
        <input type="number" name="height" id="height" step=".5" value="2" /> cm
    </p>

    <p id="volume1">Volume = <b></b></p>
    <p id="volume2">Volume (rounded) = <b></b></p>
    <p id="volume3">Volume (rounded to 2 decimal points)= <b></b></p>
</div>
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12

document.querySelectorAll('[type=number]').forEach(function (input) {
    input.addEventListener('blur', function (e) {
        const radius = document.getElementById('radius').value;
        const height = document.getElementById('height').value;
        const volume = radius * radius * Math.PI * height;

        document.querySelector('#volume1 b').innerHTML = `${volume} cm<sup>3</sup>`;
        
        // rounded
        document.querySelector('#volume2 b').innerHTML = `${Math.round(volume)} cm<sup>3</sup>`;
        
        // rounded to 2 decimal points
        // document.querySelector('#volume3 b').innerHTML = `${Math.round(volume * 100) / 100} cm<sup>3</sup>`;
        document.querySelector('#volume3 b').innerHTML = `${volume.toFixed(2)} cm<sup>3</sup>`;
    });
});

// dispatch (trigger) blur event
document.getElementById('radius').dispatchEvent(new Event('blur'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Roll the dice

Open es6/math/dice.html and es6/math/dice.js

<div class="border-gray">
    <p><button type="button" class="primary">roll the dice</button></p>
    <figure></figure>
</div>
 
        Copied!

1
2
3
4

Line 8: Use the formula Math.floor(Math.random() * (max-min+1) + min) to calculate a random integer number between min and max (both boundaries included)
Line 14: we use the slice() (opens new window) method to remove the 2 last characters (+ and a space) from the string caption

const diceButton = document.querySelector('main button');

diceButton.addEventListener('click', function (e) {
    let dices = '';
    let caption = '';
    let sum = 0;
    for (let i = 0; i < 3; i++) {
        const roll = Math.floor(Math.random() * 6 + 1);
        sum += roll;
        caption += `${roll} + `;
        dices += `<img src="/assets/dices/dice${roll}.svg" alt="dice ${roll}">`;
    }
    // remove last 2 characters from the string and add the sum
    caption = `${caption.slice(0, -2)} = ${sum}`;
    document.querySelector('main figure').innerHTML = `${dices}<figcaption><h4>${caption}</h4></figcaption>`;
});

// dispatch (trigger) click event
diceButton.dispatchEvent(new Event('click'));
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

READING TIPS

# Exercises

Open exercises/index.html and make the exercises under the tab ES6 > Math object