Etch-a-Sketch

This project was created as part of the curriculum of The Odin Project. It helped me strengthen my skills in HTML, CSS, and JavaScript.

Features

• Dynamic Grid Creation: Users can input a grid size (from 1x1 to 100x100), and a responsive grid is generated using Flexbox.
• Interactive Hover Effects: Squares in the grid change color to a random RGB value on hover, with a progressive darkening effect that turns them fully black after 10 interactions.
• Responsive Design: The grid adjusts dynamically to maintain consistent square sizes within a fixed container width.

Key Learnings

• Leveraged DOM manipulation to dynamically create and manage grid elements.
• Gained proficiency in Flexbox for creating responsive layouts.
• Improved understanding of event handling in JavaScript for hover and input interactions.
• Implemented progressive color transformations using custom data attributes and random RGB values.

Live Demo

You can view and interact with the live project here:
Etch-a-Sketch Live Demo

How to Run Locally

1. Clone the repository:

   git clone https://github.com/mmustafa93/Etch-a-Sketch.git
   
    2.	Navigate to the project folder:
   

cd Etch-a-Sketch

3.	Open index.html in your browser to view the project.

Screenshot

This project was a fun and challenging way to practice DOM manipulation and responsive design techniques. If you have any feedback or suggestions, feel free to create an issue or open a pull request!

Notes:

• Replace screenshot.png with an actual screenshot of your project in the repository.
• If you don’t have issues enabled on GitHub, you can remove the last line about creating issues.