This sketch tool lets you doodle simple designs by hovering your mouth over the grid. I made this website as part of the second JavaScript assignment of The Odin Project to discover DOM manipulation.
The goal of this project was to create a simple sketch tool to show basic DOM manipulation skills. These are some of the conditions given by The Odin Project (see the complete assignment here):
- Create a webpage with a 16x16 grid of square divs.
- Create the divs using JavaScript. Don’t try making them by hand with copy and pasting in your HTML file!
- Set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid like a pen would.
- Instead of just changing the color of a square from black to white (for example), have each pass through with the mouse change it to a completely random RGB value.
- HTML
- CSS
- I used Flexbox to arrange the squares inside the grid
- JavaScript (Vanilla)
