Assignment

Don’t forget to commit early and often! You can reference the Commit Messages lesson!

Instructions

1. GitHub Repository Setup: Follow our instructions on setting up your project’s GitHub repository.

2. Creating a Webpage:

   • Create a webpage with a 16x16 grid of square divs.
   • Use JavaScript to create the divs dynamically. Avoid manually copying and pasting them in your HTML file.
   • Place the grid squares inside a "container" div in your HTML file.
   • Utilize Flexbox to arrange the divs as a grid. Avoid CSS Grid for this project, as Flexbox is the focus.
   • Pay attention to borders and margins, as they can affect the size of the squares.

3. Hover Effect:

   • Implement a hover effect where the grid divs change color as the mouse passes over them, resembling a pixelated trail.
   • Set up event listeners for mouse enter and leave events to trigger the effect.
   • Explore different methods for changing the color of the divs, such as adding a new class or directly modifying the background color using JavaScript.

4. Adding a Button:

   • Add a button at the top of the screen to prompt the user for the number of squares per side for the new grid.
   • Upon user input, remove the existing grid and generate a new grid with the specified dimensions while maintaining the total space.
   • Limit the user input to a maximum of 100 squares to prevent potential performance issues.
   • Research button tags in HTML and how to execute JavaScript functions on click events.
   • Utilize prompts for user input.

5. GitHub Push: Push your completed project to GitHub!

Extra Credit

Transform the behavior of squares when interacting with the mouse by introducing modifications:

1. Randomized RGB Values:

   • Instead of squares having uniform color, randomize their RGB values with each interaction.

2. Progressive Darkening Effect:

   • Implement a progressive darkening effect where each interaction darkens the square by 10%.
   • Aim for achieving a completely black square after ten interactions.
   • Utilize the opacity CSS property for this effect.

You can choose to tackle either one or both of these challenges for extra credit. Good luck!