playground/event-loop.html

<!-- eslint-disable prefer-arrow-callback -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Event Loop</title>
  <link rel="stylesheet" href="../base.css">
</head>

<body>
  <style>
    .go {
      margin: 5rem;
      background: white;
      padding: 5rem;
      width: 25rem;
      height: 25rem;
      transition: all 0.2s;
    }

    .go.circle {
      border-radius: 50%;
    }

    .go.red {
      background: red;
    }

    .go.purple {
      color: white;
      background: purple;
    }

    .go.fadeOut {
      opacity: 0;
    }
  </style>

  <div class="go">Click Me</div>

  <script>
    // eslint-disable prefer-arrow-callback

    // console.log('Starting');

    // setTimeout(() => {
    //   console.log('Running...');
    // }, 2000);

    // console.log('Ending');
    const go = document.querySelector('.go');
    // Change text to 'Go' when clicked
    go.addEventListener('click', (e) => {
      const element = e.currentTarget;
      console.log(element);
      element.textContent = 'GO!';

      // Make it a circle after 2 seconds
      setTimeout(() => {
        console.log('Transforming to circle');
        element.classList.add('circle');

        // Make it red after 0.5 seconds
        setTimeout(() => {
          console.log('Becoming red');
          element.classList.add('red');

          // Make it square after 0.25 seconds
          setTimeout(() => {
            console.log('Back to square');
            element.classList.remove('circle');

            // Make it purple after 0.3 seconds
            setTimeout(() => {
              console.log('Becoming purple');
              element.classList.remove('red');
              element.classList.add('purple');

              // Fade out after 0.3 seconds
              setTimeout(() => {
                console.log('Fading out');
                element.classList.add('fadeOut');
              }, 500);
            }, 300);
          }, 250);
        }, 500);
      }, 2000);
    });
  </script>
</body>

</html>