Build an Etch-A-Sketch Knock off With Plain JS, CSS, and HTML
A fun project to sharpen your DOM manipulation skills
I recently built an etch-a-sketch variant as an exercise for practicing basic JavaScript, CSS, and HTML. I wanted to document my experience in order to strengthen my understanding of what I built and to avoid the “I don’t know how it works, but it works!” perspective. I’d also love to hear any feedback!
HTML
I started with a basic HTML skeleton:
I then filled in this HTML skeleton with what I felt my project would need:
I wanted to have my “Etch-A-Sketch” grid take up the right half of my page with the title and interactive elements sitting on the left. To this end, I wrote a div with the class “right” to contain elements on the right half, which for my project is simply the “gridContainer” div.
I followed up with a div named “left” to contain the elements to be delegated to the left-hand side. Here I included my title as a header element, added an input for users to change the number of squares in the grid, and wrote in a reset button meant to clear the grid and make it revert to its default size.
I ended, of course, with a script tag for my JavaScript.
CSS
Next, I will break down my CSS file. Here’s the final product:
Again, pretty straight forward for the most part.
I centered the text on the page and chose Monaco as my font. Monaco is a fun, retro-esque font that gives off a digital vibe.
I gave the squares that would eventually make up my grid a white background and black border and wrote a separate class with a gray background to be triggered when users hover over the grid with their mouse. I initially had given my squares some padding but removed it after realizing that this would change the overall grid size.
The CSS for my ‘gridContainer’ took some playing around with because I am not yet skilled with CSS-grid. In retrospect, it looks very straightforward, but it was a bit of a struggle while building it.
All I needed to do was set my display to inline-grid, and then set a default number of rows and columns for my grid using ‘grid-template-columns’ and grid-template-rows’. I gave my Etch-A-Sketch grid a set height and width and gave it a default of 16 rows and 16 columns.
If you want to learn more about CSS grid layout, this is a great resource.
JavaScript
Of the three sections, this one is slightly more complex. Here’s the code:
First I created variables to grab the grid, user input, and reset button divs.
The first function I wrote is createGrid(), a function that as the name suggests, builds out my Etch-A-Sketch grid. This function consists of a for loop that runs 256 times, creating 256 ‘square’ divs that are appended to my grid. Because the CSS for my grid is set to a default of 16 rows and 16 columns, these 256 squares will perfectly fill it out.
The next function is updateGrid() and it enables users to dynamically change the number of rows and columns that make up the Etch-A-Sketch.
First off I clear out the innerHTML from the default grid build so that we don’t continuously stack new squares on top of old ones. Next, I wrote JavaScript to change the grid CSS columns and rows by dynamically plugging in the user input. Lastly, I wrote a for loop that implements user input to build and append as many squares as needed to fill in the new columns and rows.
After defining these functions, I grab the div ‘square’ elements in a variable called square. I then added an event listener to every square that will listen for ‘mouseover’, and when the user passes over a square with their mouse, that square will be assigned a new class, which will change its background color from white to gray.
I also added an event listener to the input field so that the updateGrid() function will trigger once a user has typed a new value for resizing the grid.
Finally, I added an event listener to my reset button. This JavaScript clears out all the existing grid HTML and resets the grid CSS to its default values. It then triggers createGrid() to rebuild the default.
And the final product looks like the gif above! Here it is again:
And it’s as simple as that! If you have any feedback on how I can improve my code, I’d love to hear it. Next, I’d like to add the ability for users to choose different colors to fill in the grid.
