Design Sketch - Grid Animation

Try it out or look at the code.

Today I started the awesome Javascript 30 course by Wes Bos. In the first episode Wes Bros wrote a little app that played sounds when specific keys on the keyboard are clicked. In this sketch I wanted to apply the concepts I have learned to a little product of my own.

The design sketch is called grid animation. The display is divided into 600 grid items, which have a small border. One grid item is colored in blue: The box. A user can move the box by using the arrow keys on his or her keyboard. In addition, on every move, a little sound is played.

What I learned

• The transitionend event listener. Never heard of this before but this eventListener comes in handy when a transition ends and you need for example remove a class from an element which you have programmatically added.
• data-. I didn’t use these data attributes in this app but they were essentiell in the app build by Wes Bros.
• How to add borders to a css grid. To add the borders I had to do a little workaround. I had to programmatically add 600 divs and apply a border to them. To my knowledge, there is no elegant solution to just color the borders of many grids.