Manipulating the DOM

Learning Competencies

By the end of these two challenges, you should be familiar with:

  • Using JavaScript to manipulate the DOM
  • Using JavaScript events

Summary

Now that you've played around with manipulating the DOM from the browser let's manipulate it from your code editor! Use the DOM primer to help refresh your memory when you get stuck.

Timebox

ChallengeTime
Coloured Dots in the DOM3 hours
Game Board in the DOM3 hours

Coloured Dots in the DOM

  1. Visit the DOM-applying-classes repository on GitHub. Click the Fork button in the top right to create your own copy of this repo.

  2. From your command line, clone your copy of the repo down to your computer. The terminal command will look something like this:

git clone git@github.com:dev-academy-foundations/DOM-applying-classes.git
  1. Open the cloned DOM-applying-classes folder in your code editor. The instructions for this exercise can be found in the README.md of this folder.

Don't forget to save your progress and frequently use git add -A and git commit -m "your message" (with a more meaningful message) throughout the exercise.

  1. Once you have finished working on this exercise, remember to add, commit, and push your work to GitHub.

Game Board in the DOM

  1. Visit the DOM-interactions repository on GitHub and click the Fork button to fork it to your account.

  2. In your command line, clone your copy of the repo. The terminal command will look something like this:

git clone git@github.com:dev-academy-foundations/DOM-interactions.git
  1. Open the cloned folder in your code editor and follow the instructions in the README.md of your DOM-interactions repo.

  2. Add, commit, and push!