Etch-A-Sketch toy

Project to create an Etch-A-Sketch toy using only HTML, CSS and Vanilla JS

🔗 Live preview: https://crystaltai.github.io/etch-a-sketch/

Built with

Technologies

• HTML
• CSS
• JS

Tools

• Visual Studio Code
• Git and GitHub

Third party code

• Google Fonts
• Font Awesome

Summary

What I learned

• Generating a grid of cells through JS, within an HTML container
  • Using nested for loops to create child elements in a grid-like fashion and appending them to the container
• Grabbing collection of elements within a container, and looping through to add Event Listeners to really help clean up code and avoid copying and pasting same lines multiple times
• Creating more complex shapes (toy console) with CSS
• Breaking down and organizing functions to focus on one logic

Project Summary

12/11/21

• Created an Etch-A-Sketch toy that changes cell colors whenever the user's mouse hovers over the toy screen, leaving a trail of colors
• The toy inclues different features:
  • Pixel Size: User can change the size of the pixels (grid cells) from small, medium and large
  • Color Mode: User can choose between classic (grey) or color (rainbow) hovering color effects