See the Pen Help the Emoticon! by Joseph Bacal (@bacalj) on CodePen
For a while I have been interested in investigating how Scratch can enlighten my learning of other programming technologies, and vice-versa. Lately I have been working on my front-end web skills - HTML, CSS3, and JavaScript While trying to grasp the basics of CSS animations, I landed on the simple goal of making a sad emoticon who, when clicked, would cheer up.
I thought this simple thing would make a good project to duplicate in Scratch, and then use to compare how things work in each. The CodePen (HTML/CSS/JS) version is "live" above, and the "twin" scratch project is here. You can compare the code by "seeing inside" on the Scratch project and visiting the project on CodePen and/or clicking the code tabs above.