Etch 'a' Sketch - The Odin Project

Live Demo 👉 Etch 'a' Sketch

PC View 👇

Overview

This assignment Project: Etch-A-Sketch was set as part of The Odin Project.

This is a browser version of something between sketchpad and Etch-A-Sketch using HTML, JavaScript & CSS. This assigment will allow me to demonstrate:

• DOM manipulation skills
• Use of eventListeners
• Use of Functions
• Use of Loops
• Styling Skills

Provided Assets

• none

Objectives

1. Create a webpage with a 16x16 grid of square divs.
2. Create the divs using JavaScript. Don’t try making them by hand with copy and pasting in your HTML file!
3. Put your grid squares inside another “container” div (which can go directly in your HTML).
4. There are several different ways to make the divs appear as a grid (versus just one on each line). Feel free to use any or play with each of them: float/clear inline-block flexbox CSS Grid
5. Set up a “hover” effect so that the grid divs change color when your mouse passes over them, leaving a (pixelated) trail through your grid like a pen would
6. Add a button to the top of the screen that will send the user a popup asking for the number of squares per side for the new grid. Set the limit for the user input to a maximum of 100.

Extra Credit Instead of just changing the color of a square from black to white (for example), have each pass through with the mouse change it to a completely random RGB value. Then try having each pass just add another 10% of black to it so that only after 10 passes is the square completely black.

Extra

• I used CSS grid on this
• The resize button was added at the bottom
• Extra credit taken!

Languages & Tools

Rozla-Dev 18-01-2023

Back to top 👆