#CodepenChallenge 5 Lines: Smiley That Will Be Distorted

#codepen #javascript #css #showdev

Using 5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript, I tried to create a smiley that will be distorted when clicked (or should I say mouse down).

First, with hack, I tried to duplicate the smiley's second eye using filter: drop-shadow. I used it, because you can't actually use the box-shadow to duplicate the eye.

I used Bootstrap to add a background color, and align the SVG element to center.

I used jQuery to minimize the code into 5 lines of Javascript. If I used vanilla, it will take 6 lines, and yes, honestly,I think jQuery is more readable.

I used GSAP to animate the SVG path. Actually, I only intended to use the CSS, but because it doesn't work in other browser, I decided to use Javascript, and GSAP.

Using Sass (Not SCSS) also helped me to save lines. Well, because it doesn't require me to use brackets.

Also the Pug HTML preprocessor, because it doesn't require me to put an end tag in every element.