etch-a-sketch - Live Preview
![](https://private-user-images.githubusercontent.com/130125082/261866829-920aa289-2519-4e07-b382-da6d51743a00.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMzI0NDUsIm5iZiI6MTcyNjEzMjE0NSwicGF0aCI6Ii8xMzAxMjUwODIvMjYxODY2ODI5LTkyMGFhMjg5LTI1MTktNGUwNy1iMzgyLWRhNmQ1MTc0M2EwMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwOTA5MDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xY2IyOTBlZjVlMDgzYTEwYzUyOWIxNTk0NzZhMzBjMjczNDQyZGRiZTI3MDhiNmRhZjUyNmVmMTE2NjQ1N2Y1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.RbehIksIbOD9aLXR8ORTH5yEMD2r8phxHiOAJE9Dsqw)
This project is part of TheOdinProject curriculum. The project's lesson can be found here.
I've made a Figma mockup that I used as a starting point. Apart from the title, the website is pretty much identic with the mockup.
- draw by hovering the mouse on the grid
- 3 color modes: using Color Picker, random RGB and brush to wipe
- resize the grid by scrolling up/down with the mouse
- reset
- share drawing by copying to clipboard
- HTML5
- CSS3
- JavaScript
- alwan for the Color Picker
- html2canvas to save the drawing as screenshot
- git
- Figma
I changed the original color of some of the icons.