• Theory
  • Theory

Test: Pixel art

Cats also have an appreciation for the beautiful. For example, Muffin has a real flair for painting. And he would be particularly grateful if his favorite developer (that’s you!) programmed a small graphics editor for him.

This is how it should work. The canvas where you paint consists of “pixels”, which are actually just empty monospaced div elements. When the user clicks on a “pixel”, it should be filled with a particular color. The color can be selected from the dropdown list next to the canvas. There is also an eraser tool. If the user selects this tool, then the “pixel” that is clicked is filled with white.

  1. All of the “pixels” have the pixel class.
  2. The dropdown list with the colors has the chosen-color class.
  3. The eraser has a checkbox with the eraser class.
  4. When you click on a “pixel”, its background color should be changed.
  5. If the eraser is turned off when the mouse is clicked, the background of the clicked “pixel” should become the color that has been selected from the list.
  6. If the erased is turned on when the mouse is clicked, then then the background of the clicked “pixel” should change to 'white'.

To find all the “pixels”, use the querySelectorAllmethod. Use the for ofloop to add the click handler to them. We have already worked with collections and loops in the “Element Collections and Properties” chapter.

  • index.html
HTML
HTML

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Granny Muffin

Easy there, pal!

To access the Dynamic element styles challenges in the JavaScript basics, you need to sign up and subscribe first.