In this project, you’ll be creating a pretty neat toy for your portfolio to flex your DOM manipulation skills. You’re going to build a browser version of something between a sketchpad and an Etch-A-Sketch.
If you get totally stuck, drop by the chatroom. Someone will be there to point you in the right direction.
Don’t forget to commit early & often! You can reference the Commit Message lesson here!
- Follow the instructions atop Odin’s Recipes project to set up a Git repository for this project.
- Create a webpage with a 16x16 grid of square divs.
- It’s best to put your grid squares inside another “container” div (which can go directly in your HTML).
- There are several different ways to make the divs appear as a grid (versus just one on each line). Feel free to use any or play with each of them:
- CSS Grid
- Be careful with borders and margins, as they can adjust the size of the squares!
- “OMG, why isn’t my grid being created???”
- Did you link your CSS stylesheet?
- Open your browser’s developer tools.
- Check your “elements” pane to see if the elements have actually shown up but are somehow hidden.
- Go willy-nilly and add
- 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.
- Hint: “Hovering” is what happens when your mouse enters a div and ends when your mouse leaves it. You can set up event listeners for either of those events as a starting point.
- There are multiple ways to change the color of the divs, including:
- adding a new class to the div.
- Add a button to the top of the screen that will send the user a popup asking for the number of squares per side for the new grid. Once entered, the existing grid should be removed and a new grid should be generated in the same total space as before (e.g. 960px wide) so that you’ve got a new sketch pad. Tip: Set the limit for the user input to a maximum of 100. A larger number of squares results in more computer resources being used, potentially causing delays, freezing, or crashing that we want to prevent.
- Also check out
- You should be able to enter
64and have a brand new 64x64 grid pop up without changing the total amount of pixels used.
- Push your project to GitHub!
- 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. Then try having each pass just add another 10% of black to it so that only after 10 passes is the square completely black.