Pixel Art

Example

Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: pixel-art Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/pixel-art.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Make a single variable for all of the squares, and add an event listener to each square.
Hint: Watch the getting elements video. The video shows an example. Do NOT copy it exactly.

Step 3: Toggle a square when it's clicked using the classList property.
Hint: If you're having trouble, look at your Picture Swapper project.

Step 4: Clear the grid when the button is clicked.
Hint: If you're having trouble, rewatch the loop video. The video shows an illustration. Figure out how it relates to your code.

Debugging help

Last topic Next topic