1// JS Tip of the Day
2// Prefixed Counter with Generators
3
4function* prefixedCounterGenerator(prefix, counter = 0) {
5  while(true) {
6    yield `${prefix}-${counter++}`;
7  }
8}
9
10const generator = prefixedCounterGenerator('bat', 20);
11
12console.log(generator.next().value); // bat-20
13console.log(generator.next().value); // bat-21
14console.log(generator.next().value); // bat-22

1// JS Tip of the Day
2// One-shot handling of an event
3
4// <button id="one-shot-hero-button">Batman! Help me!</button>
5
6const fakeHeroEl = document.getElementById('one-shot-hero-button');
7fakeHeroEl.addEventListener('click', function(event) {
8  console.log('Call me one time and no more!');
9}, {once: true});
10
11fakeHeroEl.click() // Call me one time and no more!
12fakeHeroEl.click() // 

1// JS Tip of the Day
2// Difference between childNodes and children properties
3
4/*
5  ...
6  <article class="hero_card">
7      <h4>Batman</h4>
8      <p>Batman was created by artist Bob Kane and writer Bill Finger.</p>
9      <!-- This is a comment (node) -->
10	  <ul>
11        <li>Batwing</li>
12		<li>Batwing</li>
13      </ul>
14      This is a text (node)
15  </article>
16  ...
17*/
18
19// childNodes returns a live NodeList of child nodes (elements, text and comments)
20console.log(document.querySelector('.hero_card').childNodes.length); // 9
21
22// children returns a live NodeList of child nodes (only element)
23console.log(document.querySelector('.hero_card').children.length); // 3

1// JS Tip of the Day
2// Nullish Coalescing operator 
3
4console.log(10 ?? 20); // 10
5console.log(null ?? 20); // 20
6console.log(undefined ?? 20); // 20
7console.log(0 ?? 30); // 0
8console.log(0 || 30); // 30
9
10console.log('' ?? 40); // ''
11console.log('' || 40); // 40

1// JS Tip of the Day
2// How to use an object as an event handler
3
4// <button class="help-button">Help me!</button>
5
6const heroHandler = {
7	name: 'Batman',
8    handleEvent(event) {
9      console.log(`${this.name} help! ${event.type} was fired!`);
10    }
11  };
12
13const elem = document.querySelector('.help-button');
14elem.addEventListener('click', heroHandler);