Etch a Sketch Project:
Instructions:
Create a webpage with a 16x16 grid of square divs - Create the divs using JS. Don't try making them by hand with copy and pasting in your HTML file - It's best to put your grid squares inside another "container" (which can go directly in your HTML) - There are several ways to make the divs appear as a grid (vs. just one on each line). Use or play with any of the following: - float/clear - inline-block - flexbox - CSS grid - Be careful with borders and margins, as they can adjust the size of the squares - Problems? - Did you link your CSS stylesheet? - Open your browser's dev tools - Check if there are any errors in the JS console - Check your "elements" pane to see if the elements have actually shown up but are somehow hidden - Use console.log() statements in your JS to see if it's actually being loaded
Set up a "hover" effect so the that 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 - changing the div's background color using JS
Add a button to the top of the screen that will send the user a pop-up 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 (ex. 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. - Research button tags in HTML and how you can make a JS function run when one is clicked - Also check out prompts - You should be able to enter 64 and have a brand new 64x64 grid pop up without changing the total amount of pixels used
Extra Credit:
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.
References:
Toggle HTML and CSS styles from: https://alvarotrigo.com/blog/toggle-switch-css/ (Used style #6)
Background images: Drew Beamer - unsplash.com Chiranjeevi - unsplash.com Shapelined - unsplash.com Solstice Hannan - unsplash.com Payam Moin Afshari - unsplash.com Jess Bailey - unsplash.com