https://github.com/gregolive/etch-a-sketch
Draw using your mouse and relive the classic handheld toy.
https://github.com/gregolive/etch-a-sketch
Last synced: about 1 year ago
JSON representation
Draw using your mouse and relive the classic handheld toy.
- Host: GitHub
- URL: https://github.com/gregolive/etch-a-sketch
- Owner: gregolive
- Created: 2021-09-18T04:53:33.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-10T14:26:27.000Z (over 4 years ago)
- Last Synced: 2025-03-30T15:14:04.738Z (over 1 year ago)
- Language: CSS
- Homepage: https://gregolive.github.io/etch-a-sketch/
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Etch a Sketch
Draw using your mouse and relive the classic handheld toy.
[Live demo](https://gregolive.github.io/etch-a-sketch/) 👈
## Functionality
- The Etch A Sketch console was made using CSS and is modeled after the original toy.
- Select between 3 input options...
- Greyscale adds layers of gray and on mulitple these stack and darken.
- Psycadelic adds random colors from an array of 20+ of javascripts prenamed colors.
- Custom allows the user to select a color from a color picker and input a color of their choice.
- The grid density is also customizeable using a slider.
- The screen is cleared using a clear button on the Etch A Sketch console. Clicks are accompanied by a shake animation as a nod to how the handheld toy was cleared by physcially shaking it.
## Reflection
This project was a big step up from the Janken Javascript project, but the knowledge from the before made this a fun problem to tackle. The biggest problem was implementing the color picker, however, a helpful Stackoverflow thread made this manageable. Setting up the grid using Javascript was also difficult at first and it took me a while to realized that a second nested for loop was needed to make both rows and columns.
Otherwise laying everything out in a visually pleasing way with CSS took some time, especially when it came to making the Etch A Sketch device. I was quite happy with the result of this in the end, though, and the extra time was worth it.
-Greg Olive