/Etch-A-Sketch

Etch-A-Sketch is a browser-based sketchpad that allows users to create art by hovering their mouse over a grid of squares. The color of each square changes with each pass, creating a unique and colorful design. The app is built using HTML, CSS, and JavaScript, and demonstrates the developer's skills in DOM manipulation.

Primary LanguageCSS

Etch-A-Sketch

Overview

Etch-A-Sketch is a browser-based sketchpad that allows users to create art by hovering their mouse over a grid of squares. The color of each square changes with each pass, creating a unique and colorful design. The app is built using HTML, CSS, and JavaScript, and demonstrates the developer's skills in DOM manipulation. The project includes a "New Grid" button that allows users to create a new grid with a customizable number of squares per side, with a maximum limit of 100 squares to prevent performance issues.

Live app

You can try the live app here.

How to use

To use the Etch-A-Sketch, simply hover your mouse over the squares to draw. The color of each square changes with each pass. After 10 passes, the color will turn to black.

To create a new grid, click the "New Grid" button in the top bar and enter the desired number of squares per side. The maximum number of squares is 100.

Technologies used

  • HTML
  • CSS
  • JavaScript

Features

  • Draw and create art using the Etch-A-Sketch
  • Create a new grid with a customizable number of squares per side
  • Limit the maximum number of squares to prevent performance issues

Credits

This project was built as part of my web development course. The original idea came from The Odin Project's Etch-A-Sketch project.