Skip to content

Commit

Permalink
Merge pull request #1 from ZachBaird/chore/add-dom-and-event-resources
Browse files Browse the repository at this point in the history
Chore: Adds new resources & shifts content around.
  • Loading branch information
ZachBaird authored Sep 9, 2023
2 parents 3311178 + fa5c5ff commit 13f50b7
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions foundations/javascript_basics/DOM_manipulation_and_events.md
Original file line number Diff line number Diff line change
Expand Up @@ -399,8 +399,20 @@ You can find a more complete list with explanations of each event on [this page]

Manipulating web pages is the primary benefit of the JavaScript language! These techniques are things that you are likely to be messing with *every day* as a front-end developer, so let's practice!

1. [Code along with this video/written explanation on Medium.](https://medium.com/nerd-for-tech/manipulating-the-dom-with-html-javascript-and-css-part-1-25b34ae2f932) This may feel advanced or overwhelming at times. Don't worry! Try your best to keep up with the article and let your brain soak in the information.
1. [Tie it all together with this MDN article and test your skills!](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#active_learning_a_dynamic_shopping_list)

</div>

### Extra Credit

<div class="lesson-content__panel" markdown="1">

The below assignments are invaluable resources that reiterate much of what has been covered. If you still feel uncertain about manipulating web pages, or just want to practice even more, they will be very helpful!

1. Grab the first exercise in Wes Bos's JavaScript30 program by cloning the repo at [https://github.com/wesbos/JavaScript30](https://github.com/wesbos/JavaScript30). Code along with the [Video Tutorial](https://www.youtube.com/watch?v=VuN8qwZoego) to build the rest of the exercise. In the video you will notice that a deprecated [keycode](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) keyboard event is used, replace it with the recommended [code](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code) keyboard event and replace the `data-key` tags accordingly.
1. Watch the [Event Capture, Propagation and Bubbling video](https://www.youtube.com/watch?v=F1anRyL37lE) from Wes Bos's JavaScript30 program. If you want to code along with the video, you can use the contents of folder #25 from the repo you cloned above.
1. Work through the first 2 sections in this [JavaScript DOM Tutorial](https://www.javascripttutorial.net/javascript-dom/). Note that some of the methods like `getElementById` are older and see less use today. If you're feeling *particularly* ambitious and are curious about what else you can do with events, try taking a stab at section 7.

</div>

Expand Down

0 comments on commit 13f50b7

Please sign in to comment.