Etch-A-Sketch

Remember the classic Etch-A-Sketch toy? Now you can try it out as a digital version!

Implementation

• Create a webpage with a 16x16 grid of square divs using JavaScript.

  • Set up a container div in the HTML file, and create the cell divs in JS.
  • Use Flexbox to makes the divs appear as a grid.

• Set up a hover effect so grid divs change color when mouse moves over them.

  • Set up event listener as starting point.
  • Implement function to pick random colors as mouse moves.

• Add button to allow user to change grid size.

  • Prompt user for new grid size, clear old grid and create a new grid.
  • Note grid size limit is between 2 and 100.

Highlights

• I enjoyed this project a lot. I had a few difficulties, such as figuring out how to get the square cells to appear as a grid with Flexbox and how to clear the old grid before creating the new grid with the size inputted by user. I used what I learned so far in JavaScript and DOM manipulation, as well as some HTML/CSS. I am satisfied with how it turned out, but I might come back to it in the future to add more features.

Possible features to add:

• Implement a button for single color of user's choice
• Opacity slider
• Change classic mouse cursor to a paintbrush
• Eraser button
• Export/Save sketch option

Video

video.mp4