The Odin Project – Etch A Sketch

This is the project I’ve most recently completed as part of the Odin Project’s full stack JavaScript path. It was actually fun, perhaps because it’s kind of like a game.

I’m definitely not qualified to write a JavaScript tutorial but I’ll give you an overview of how I completed this project. The requirements are listed here.

CSS Grid

I began by creating the grid itself. I used CSS Grid, though there are other ways it can be done according to the project page. Initially the grid was set to 16 x 16 squares. In my HTML file I made a div with the id ‘grid’. Then in my JavaScript file I put it into a variable like this:

const grid = document.querySelector("#grid");

I used CSS to set the display to ‘grid’ and set a width and height.

Then I created a function that set the gridTemplateRows and gridTemplateColumns to repeat 16 times and take up ‘1fr’ of space. ‘1fr’ here means 1 fraction of the available space. So – as far as I know – if all parts are equal to ‘1fr’ then they will always be equal no matter how many there are. I knew this would be important for later when variable rows and columns needed to be accounted for.

This function then runs a for loop for the area of the grid. This is what makes the actual grid items. Each time it runs through it creates a div, gives it the class ‘gridBox’ and adds it to the grid. The loop looks like this:

for (let i = 0; i < size * size; i++) {
    let div = document.createElement("div");
    div.classList.add("gridBox");
    grid.appendChild(div);

Adding An Event Listener

The class ‘gridBox’ is used to create an event listener for every grid square, so that whenever the mouse goes over a square, it changes the color. This is done by adding a class to the classList; this class simply sets the background color to a pretty purple/magenta gradient. Here’s my event listener code:

gridBoxes = document.querySelectorAll(".gridBox");
gridBoxes.forEach((gridBox) => {
    gridBox.addEventListener("mouseover", (e) => {
        gridBox.classList.add("active");
    });
});

I did try changing the classList.add to classList.toggle so that if you went over the same square again it would remove the color, but I decided I liked it better this way.

Finishing Touches

Once I had the 16 x 16 grid working, it was fairly simple to make the size a number chosen by the user. Upon loading the page the user is asked the number of columns/rows they would like and then this number is stored in a variable, which is used to generate the grid.

Initially I just had a reset button which asked the user how many boxes they wanted this time and cleared the grid. But then my husband was like, “why can’t you just have a reset button that clears the grid and lets you keep the same size and add another button for changing the size?” This was simple enough to do so I added the other button to appease him.

Final Project

You can view my Etch A Sketch on GitHub pages here and the code is here. It’s not fancy but it works! I should mention that I know the grid itself does not resize so if your screen is small then you may have to scroll. This was something I did play with but I was having trouble making the variable rows/columns work properly with a responsive box. It wasn’t in the project description as a requirement so I left it as it is.

I’d also advise you not to choose a crazy number for the size. I think I put in 400 once and my browser couldn’t handle it. 100 is a pretty safe upper limit.

Please don’t think this is an example of good code either; I don’t think it’s bad but it’s likely not optimal.

I’m currently still working through the freeCodeCamp JavaScript section. Soon I’ll be up to the projects and then I can post about it!