Etch-A-Sketch Project

This project is a simple yet interactive drawing board implemented using HTML, CSS, and JavaScript. Inspired by the classic toy, the Etch-A-Sketch allows users to draw on a grid by hovering over squares, creating a pixelated drawing experience. Users can also dynamically resize the grid by entering a new number of squares per side.

Features

• Interactive Drawing: Draw on a 16x16 grid by hovering over squares.
• Grid Resizing: Resize the grid by entering a new number of squares per side. The grid will automatically adjust while maintaining the total display area.
• Responsive Design: The grid adapts to the viewport width, ensuring a consistent drawing experience across devices.
• Hover Effects: Change the color of the grid squares on hover, simulating the traditional Etch-A-Sketch experience.
• Random Color Generation (Optional): Randomize the squares' colors upon interaction for a unique drawing experience.
• Progressive Darkening Effect (Optional): Darken the square by 10% with each interaction, leading to a fully blackened square after ten interactions.

Getting Started

Prerequisites

Ensure you have a modern web browser installed.

Installation

1. Clone the repository to your local machine.
2. Open the index.html file in your browser to start using the Etch-A-Sketch.

Usage

• Drawing: Simply hover over the grid squares to draw. Lift your cursor to stop drawing.
• Resizing the Grid: Click the "Resize Grid" button at the top of the page, enter a new number of squares per side, and press Enter. The grid will update accordingly.

Contributing

Contributions are welcome! Please feel free to submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Thanks to Odin Project for providing the foundation and guidance.