🎨 Odin Etch-a-Sketch

A web-based drawing pad implementation of the classic Etch-a-Sketch toy, built to solidify JavaScript's role in DOM manipulation and dynamic styling.

📸 Demo

https://cooleditingx.github.io/odin_etchasketch/

The application provides a responsive grid canvas where users can "draw" by hovering or clicking.

---

📖 Description

This project recreates the experience of an Etch-a-Sketch using HTML, CSS, and pure JavaScript. The primary learning goals focused on dynamically generating a grid structure (using CSS Grid or Flexbox) and attaching event listeners to each grid cell to change its color upon mouse interaction (the "sketching" effect).

The application features controls that allow the user to reset the drawing board and dynamically adjust the size of the grid, challenging the developer to re-render the DOM based on user input.

---

💻 Local Setup & Usage

As a client-side web application, this project requires no server setup.

How to Copy it for Your Own Computer

1. Clone the Repository: Open your terminal or command prompt and clone the project:

   git clone [https://github.com/cooleditingx/odin_etchasketch.git](https://github.com/cooleditingx/odin_etchasketch.git)
   cd odin_etchasketch

2. Open and Use: Simply open the primary file, index.html, in your web browser.

   open index.html # For macOS/Linux
   # OR
   start index.html # For Windows

How to Use it

• Draw: Move your mouse over the grid to change the color of the cells and draw your picture.
• Clear: Click the "Clear" button (or similar control) to reset the canvas to its initial blank state.
• Resize Grid: Use the input control to specify a new number of squares per side (e.g., 16 for a 16x16 grid), and the application will generate the new drawing canvas.

---

✨ Features

The web-based Etch-a-Sketch includes the following interactive and design features:

• Dynamic Grid Generation: Programmatically creates a grid of user-defined size (e.g., 16x16, 32x32) using JavaScript and CSS Grid.
• Hover-to-Draw: Changes the color of a cell when the mouse passes over it, simulating drawing.
• Grid Resizing: Allows the user to easily change the resolution of the canvas using a dedicated button or slider.
• Canvas Reset: A clear button that instantly resets all cells to the background color.
• Custom Theme: Incorporates a unique design, including the use of a custom font (OPTIRondo-Bold) and background imagery (hexagon_pattern.jpg).

---

🛠️ Technologies Used

Technology	Role
HTML5	Provides the structure for the canvas and controls.
CSS3	Handles the styling and the creation of the responsive drawing grid.
JavaScript (ES6+)	Manages DOM manipulation, event listening, and dynamic grid generation/coloring.