etch-a-sketch - Live Preview
![](https://private-user-images.githubusercontent.com/130125082/261866829-920aa289-2519-4e07-b382-da6d51743a00.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0Mjc3NjUsIm5iZiI6MTcyMTQyNzQ2NSwicGF0aCI6Ii8xMzAxMjUwODIvMjYxODY2ODI5LTkyMGFhMjg5LTI1MTktNGUwNy1iMzgyLWRhNmQ1MTc0M2EwMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOVQyMjE3NDVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00YmQ1YjhiNjc2ZDk4ZjllNmJmNzU1Njg5ODViZTRjZWJhZTlmN2MyMjI3OWRhNGZlMjRkNWI4ZTI4ODA0YTQ0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.nbiSN23-22skZzC42ViXx3_DLT0gnKi-fl6Zc25pG0c)
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.