🎨 EtchySketchy

A logic-powered pixel sketchpad built with HTML, CSS, and JavaScript—featuring dynamic grid generation, rainbow mode, and progressive darkening effects. Inspired by The Odin Project’s classic Etch-a-Sketch challenge, but with extra flair.

---

✨ Features

• 🎮 Dynamic Grid Creation
  Custom grid size (up to 100×100) generated via JavaScript.

• 🌈 Rainbow Mode Toggle
  Switch between default hover color and randomized rainbow spectrum.

• 🌗 Progressive Darkening
  Repeated hovers gradually reduce brightness, simulating shading.

• 🧽 Clear & Reset Options
  Wipe the canvas or regenerate with new dimensions.

• 📦 Modular & Scalable Code
  Logic separated into reusable functions, with smart event delegation.

---

🛠️ Tech Stack

• HTML5: Semantic structure
• CSS3: Flexbox layout, styled buttons, hover effects
• JavaScript (Vanilla): DOM manipulation, event handling, UI logic

---

📸 Demo

Live Site: [GitHub Pages link goes here]
Hover over the grid and let the colors flow!

---

💡 Ideas to Expand

• 🖌️ Grayscale or Eraser modes
• 🎨 Themed palettes (Cyberpunk, Night Sky, Solar Flare)
• 💾 Save sketches as images
• ⌨️ Keyboard shortcuts and accessibility enhancements

---

🚀 Getting Started

1. Clone the repo

   git clone https://github.com/yourusername/etchysketchy.git
   cd etchysketchy
   

2. Open index.html in your browser

3. Click Start, input grid size, then draw with your mouse