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.
-
🎮 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.
- HTML5: Semantic structure
- CSS3: Flexbox layout, styled buttons, hover effects
- JavaScript (Vanilla): DOM manipulation, event handling, UI logic
Live Site: [GitHub Pages link goes here]
Hover over the grid and let the colors flow!
- 🖌️ Grayscale or Eraser modes
- 🎨 Themed palettes (Cyberpunk, Night Sky, Solar Flare)
- 💾 Save sketches as images
- ⌨️ Keyboard shortcuts and accessibility enhancements
-
Clone the repo
git clone https://github.com/yourusername/etchysketchy.git cd etchysketchy -
Open index.html in your browser
-
Click Start, input grid size, then draw with your mouse