Etch-a-Sketch Project


#1

Hi everyone,

Almost completed the Etch-a-sketch javascript project. It’s mostly working well, but I’m having issues with opacity

Basically, the mouseover effect changes when you click on either the black, random color or darken button in the navigation. When you change from darken to black, the black doesn’t override the darkened grids, however, when you switch from black to darken, the darken effect overrides the black grids.

I’ve tried to play around with opacity, but I just can’t seem to get it to work. Not sure if I explained this well, but the link provided below should clarify the problem. Appreciate any help. Links attached below.

Code: https://github.com/fffear/etch-a-sketch
View in browser: https://fffear.github.io/etch-a-sketch/


#2

Great job so far @fffear.

The issue is mainly due to the fact that those blocks still have opacity styling, so they will never be 100% black. Hope this helps.


#3

Thanks for that @lpsv.

I eventually got it to work.

I was referencing both grid and the grid container variables, and so my logic even though correct, didn’t work. Fixed bugs and all is working.

Code: https://github.com/fffear/etch-a-sketch
View in browser: https://fffear.github.io/etch-a-sketch/


#4

The darken option does not change the black squares - is this intended?


#5

Hi @BookDisorder,

Yes, this is intended. I thought that darken/grayscale was meant to add 10% black on each mousover, and if a grid is already completedly black with opacity = 1, then do nothing. That’s what I inferred from the project instructions, unless I’m misinterpreted the instructions.

Thanks.


#6

It looks really good, and definitely works well! I think everyone interpreted the project a little differently. I recently finished this project as well. I chose to reset the grid every time a new option was selected: My project


#7

Nicely done


#8

I don’t know if you will read this, but how did you figure out this opacity -= “-0.1” trick ?
It’s buggling my head, thanks !