Ethch-a-Sketch

This project is a part of The Odin Project curriculum. In this project, a site was created where you can sketch in multi-color on a white sketch pad. The game include 3 buttons, a button to select a size, a button to start sketching and a button to clear the sketching area.

Key Concepts used to make the game

  1. CSS Grid
  2. DOM
  3. Event Listeners

Initially a div container was placed inside the html. Further the display of the container was set to grid. Further divs were added to the container using javascript and the setup was made to resemble a grid. The event listeners were added to each of the individual grid items to change their color while hovering. Further event listeners were added to the buttons to perform their respective operations. The default number of squares in the container was set to 16x16, which can be changed by the user.

Live Demo of the project