Table of Contents
This project was created with the intention to recreate the feel of using an actual Etcha Sketch as much as I can on a website. I used Vanilla JS because there was no purpose for a library.
- JavaScript
- CSS & HTML
For the grid I am dynamically creating the amount of Boxes and Rows, for the default value of Size or the users input from a range of 1-70. Each square in Rows are created by DOM and have its own event listener added when returned. Which listens for mousehover, mouseon, etc. and converts the background color to black.
Each grid is created on run and can be dynamically changed by user input. To generate a new one.
For animations, I am adding and removing class names that are associated with CSS animations. After I add them I set a timeout for the specified length of that animation to then remove the class names. Clearing it for the next animation.
With the title I wanted to get as close as possible to the actual Etch A Sketch font, after searching I found one similar and I used:
- Rondo (for the main text)
- Fortrack Regular (for the sub text)
Because the Etch A Sketch's title is usually a metallic color, I used a long gradient under the image which moves left to right. Mimicking a shimmer of metal to the light.
The grid is styled by the squares inside, which is being styled with a solid border, and equal height and width
The Fading animation of your drawing is made by creating a CSS animation which fades background color from black to white
The dials are created just by a simple circle with a solid gray border, and it rotates as you click it with transforms rotate in a CSS animation.
Draw with your mouse on the grid, and reset to shake it away. No saving just like classic Etch A Sketch!
John Farina - [email protected]
My Website: johnfarina.co
Project Link: github.com/john-farina/etchaSketch