Etch A Sketch
User Guide
- An Etch A Sketch created with HTML, CSS and Javascript.
- Move your cursor across the grid to color in the boxes
- The buttons at the top of the page change the color of the boxes
- The Clear Grid button will erase and reset the grid, allowing you to start over
- Grid squares are shaded; 50% opacity per mouse pass over
- The Eraser button allows user to return grid box to default color
- Default Brush color is set to Black.
- Brush Color buttons do not clear the grid when pressed, allowing you to use multiple brush colors
Project Notes
- Added a div 'Grid Container' to HTML body to act as the grid template. This serves as the 'screen' of the etch-a-sketch.
- To create grid boxes using Javascript, instead of just copy/pasting endless divs in the HTML, I used a for loop within a function to create infinite # of divs that will serve as grid boxes, then append them to the grid container.
- The creation of grid box divs is limited by the size of the grid container.
- The etch-a-sketch grid is created by calling the global function 'generateGrid' whenever the web page is opened unless the script is not loaded
- Dynamically change the background color to allow user to draw on grid by attaching an event listener to each grid square
- Added Event Listener to each div, when mouse enters the grid square, a function is executed that changes the background color of the grid square
- Draw function uses an if else statement to target each div box on the grid container
- On target of the boxes, change the background color of the div's within the grid container to imitate coloring
- Used a Switch statement, declaring each cases' ID to be the different functions attached to the buttons.
- Added the different Brush colors and Eraser to the Draw function's if, else statement
- Checks against cases to determine brush color, then changes background color according to the selection returned.