In this lovely month, I would love to spend my meaningless life on something that’s meaningful. It’s 30 day JavaScript challenge.

This is the first challenge. It’s not tricky but lots of fun. Clone my repo if you are interested and here’s the demo.

It’s quite interesting because this is the first time I manipulate SVG image using JavaScript. I forget that SVG is just XML-based vector image and can be parsed into the DOM.

  // we can query element on SVG image by its id attribute
  // just like regular HTML file.
  document.querySelector('#Snare-Drum')

Here’s my simple boring JavaScript code…

Until today I have added event listener to click, keyup, keydown, submit, and change in my daily JavaScript code. Now, I know there are lots of interesting events can be triggered in the browser. In my case, they are animationend and transitionend.

Here’s CSS code that manipulates SVG image when certain character on keyboard typed.

  /* It's for manipulating SVG image */
  .animation {
    animation-duration: 0.1s;
    animation-name: rollDrum;
  }

  @keyframes rollDrum {
    from {
      transform-origin: 50% 50%;
      transform: scale(0.99);
    }

    to {
      transform-origin: 50% 50%;
      transform: scale(1.05);
    }
  }

  /* It's for manipulating key button */
  .playing {
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #ffc600;
  }

I hope I can manage to finish the rest of the challenges. I am not sure, but tomorrow’s challenge is waiting…