No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


For this assignment you'll be creating a Javascript painting app. When you're done, it should display this functionality.

Use the starter code and commit each step of the exercise, or more.


  1. Fork and clone this repo. Make sure you do your work in your fork.

    The command git remote -v should show a link to your fork, NOT to the original.


    good link


    bad link

    If you cloned without forking, delete the clone now, and go back and fork it.

  2. Work in small steps and commit frequently. You must have at least the six commits below.

  3. You may use jQuery or Vanilla JavaScript for DOM manipulation, but DO NOT MIX THEM. Pick one.

  4. When you're finished, push your code (if you hadn't already) and make a pull request, as usual.

1. Get color setting working

  • When I click the "Set Color" button, it should change the color of the "brush" box to the color I specify in the input field.
  • You can use document.querySelector (or another document method) to select the element, then add an event listener.

Note: You will notice that the page refreshes whenever you click the button. You need to prevent this from happening using a method you have not used before. Google "javascript event prevent default".

🔴 Commit.

2. Enable enter key to change color

  • The same thing should happen when I press the enter key from inside the input field

🔴 Commit.

3. Make the squares

  • Create 20 divs of the "square" class and append them to the body
    • Hint: use .appendChild()

🔴 Commit.

4. Clicking a square should change its color to green

  • Add functionality so that when I click on each "square", it changes the color of that individual square to "green"
    • Hint: either add the event listener while creating the squares, or listen for events on the body element

🔴 Commit.

5. Clicking a square makes it be the selected color

  • Modify your code so that when I click on each "square", it changes to the color I set using my input instead of "green" every time.

🔴 Commit.

6. Scale it appropriately.

  • Modify the CSS so that the "square" class has a height and width of 10px and a margin of 0.
  • Modify your code so that you are creating 8000 divs instead of 20.
  • Change the event that changes your box colors from 'click' to 'mouseover'
  • Paint a picture!

🔴 Commit.

7. Enable lifting of "brush"/"pen".

Make it so that clicking the canvas "turns off" and "turns on" the paintbrush. Have there be an indicator that says "Paintbrush on" when it's on and "Paintbrush off" when it's off. Changing colors should not change whether the paintbrush is off or on.

🔴 Commit.

You've completed the assignment. Great job! If you have extra time and you wanna jazz it up more, keep reading!

Hungry for More

Color History

  • Add a color swatch/history. You should have at least 3 boxes (more are great) with the most recent 3 (or more) colors used. When you click on each of those boxes, it should set the current brush color back to that color.


  • Create a Square class, and use OOP principles to create a data structure to keep track of all the squares. Each instance should have an property to store the squares colors, in addition to whatever properties you want to use to identify that square('s position) on the board. "Drawing" should update that data structure.

    All your existing logic/variables/methods (except the listeners) should become properties and methods of a game or app object.

    The structure should be:

    square class
    game or app object

    Other than the listeners, there should be no code in the global scope. The Square class should not directly refer to the game object—it should function totally independently.

    Next time you build an app, try to start out with a similar code structure.

    This entire process could be several commits!

Let users save their drawings.

  • Read about Local Storage. You can store pretty much any "object" there. Make a "save" button that saves your drawing to Local Storage.

  • How many commits did you do for this one?

Let users load previously saved drawings.

  • Create a way to view a list of previous drawings from local storage, and load one up for further editing.

    You committed, right?

Deploy your app to github pages:

  • Step 0: Create a place for your app to live on (Currently it's just on github enterprise)

    • New Repository

    • Choose No (if you goof, delete it and re-create)

    • Use link provided on the next screen to add a second remote: git remote add github <provided link>

    • git remote -v should now list four things, a (fetch) and a (push) for each URL (one on, one on

    • push your code to github:

      $ git push github master
  • Step 1: Find this section in the settings for your repo, and select master branch, and hit Save. Github pages Deployment

  • Step 2: Wait a few minutes.

  • Step 3: Go to (substitute in your github username and repo name) and and behold your deployed app! See that it works!

  • Step 4: Impress your friends and family! Share the github pages link with them and let them play with it and be amazed! 🙂