etch-a-sketch - Live Preview

About

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.

Features

• 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

Technologies used

• HTML5
• CSS3
• JavaScript

Libraries used

• alwan for the Color Picker
• html2canvas to save the drawing as screenshot

Tools used

• git
• Figma

Credits

I changed the original color of some of the icons.

• UI-Eric weibo for the reset icon
• siby-_- weibo for the brush icon
• Saori1994 for the favicon
• zuozuo for the share and color/RGB icon
• SofianChouaib for the Color Picker
• niklasvh for the screenshot library