1// JS Tip of the Day
2// Simple Pipe Function (https://www.youtube.com/watch?v=Ua2Jw0fFywE)
3
4const pipe = (...funcs) => {
5    return v => {
6        return funcs.reduce((res, func) => {
7            return func(res);
8        }, v);
9    }
10}
11// more compact version:
12// const pipe = (...funcs) => v => funcs.reduce((res, func) => func(res), v);
13
14const addHero = (v) => `Bat${v}`;
15const addEmoji = (v) => `🦇 ${v}`;
16const addPrefix = str => {
17    return strX => `${str} ${strX}`;
18}
19const count = (v) => v.length;
20
21console.log(pipe(addHero, addPrefix('I\'m'), addEmoji)('Ciccio'));  // 🦇 I'm BatCiccio
22console.log(pipe(addHero, count)('Ciccio'));  // 9

1// JS Tip of the Day
2// Force ClassList Toggle
3
4let el = document.querySelector('#custom-header');
5
6const hero = {
7	name: 'Batman',
8  	isAwake: false,
9};
10	
11// It is the same of classList.remove
12el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is false 
13console.log(el.classList.length); // 0
14
15hero.isAwake = true;
16// It is the same of classList.add
17el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is true
18console.log(el.classList.length); // 1
19
20// It is the same of classList.add...It isn't toggled!
21el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is true
22console.log(el.classList.length); // 1
23
24/*
25	The classItem.toggle method with second parameter is equivalent to:
26
27    let hasClass  = el.classList.contains('save-the-city');
28    if (hero.isAwake && !hasClass) el.classList.add('save-the-city')
29    if (!hero.isAwake && hasClass) el.classList.remove('save-the-city')
30*/

1// JS Tip of the Day
2// Work with the CSS classes of an element
3
4// <p id="hero" class="steel-wing">Batman</p>
5
6let elem = document.querySelector('#hero');
7
8// Add multiple classes
9elem.classList.add('dark-knight', 'caped-crusader'); 
10// class="steel-wing dark-knight caped-crusader"
11
12// Remove multiple classes
13elem.classList.remove('steel-wing');
14// class="dark-knight caped-crusader"
15
16// Toggle a class
17elem.classList.toggle('dark-knight');
18// class="caped-crusader"
19
20elem.classList.toggle('dark-knight');
21// class="dark-knight caped-crusader"
22
23// Replace a class
24elem.classList.replace("caped-crusader", "batsy");
25
26// Check if an element has a class
27if (elem.classList.contains('dark-knight')) {
28	console.log("I'm the night!");
29}
30
31// Get the number of classes 
32console.log(elem.classList.length); // 2

1// JS Tip of the Day
2// Random Ticker
3
4let minDelay = 1000;
5let maxRandomDelay = 3000;
6
7let timerId = setTimeout(
8  function request(randomDelay) {
9    let tickDelay = Math.floor(Math.random() * randomDelay + minDelay);
10    console.log('tick', tickDelay);
11    timerId = setTimeout(request, tickDelay, randomDelay);
12  }, 
13  minDelay, 
14  maxRandomDelay
15);

1// JS Tip of the Day
2// Displays tabular data as a table
3
4console.table(['Batman', 'Superman', 'Green Arrow']);
5console.table({ name: 'Batman', weapon: 'Batarang', vehicle: 'Batmobile' });
6console.table([
7                { name: 'Batman', superPower: 'Money', partner: 'Robin' },
8				{ name: 'Superman', superPower: 'Strenght', partner: 'Wonder Girl' },
9             ]);