View profile

Day #16: DOM Manipulation & the Snake Game

Puppy Nomadic
Puppy Nomadic
For the first two days of Week 2, we learned about DOM manipulation and pair programmed to create a Snake game using linked lists:

Traversing the DOM
Our awesome Teaching Fellow, Jared Lewis, says that “cool kids” traverse the DOM using: document.querySelector or document.querySelectorAll instead of document.getElementById or document.getElementsByTagName or document.getElementsByClassName. This is because when you use querySelector, it automatically determines for you whether your are selecting a CSS class/ID or HTML tag. This syntax was borrowed from jQuery and included in newer versions of Javascript.
Jared also said there’s “bonus points” in using the word TRAVERSE in a technical interview when talking about selecting elements from the DOM. Show up to a tech interview, and say “traverse” and BOOM, you’re the CEO – says Jared.
Adding and Removing Elements from the DOM
Here are methods to create HTML elements and add/remove them from the DOM, and change their content.
document.createElement(element)
element.appendChild(element)
element.removeChild(element)
element.replaceChild(element)
element.innerHTML = 'my new content'
element[attribute] = newValue
element.setAttribute(attribute, newValue)
element.style[property] = newValue
Our morning skill-builder involved created a calendar from a JSON object while only editing the Javascript file, not the HTML skeleton.
Events
You can use .onclick() and .addEventListener() to respond to page state changes and add user interactivity with event handler functions.
However, the difference between .onclick and .addEventListener is that .onclick immediately triggers the function, whereas addEventListener “listens” for the event (such as a click or hover), and then it can trigger an array of functions, which are not immediately invoked as soon as the event happens.
The benefits of the addEventListener are that it:
  • Does not overwrite other existing event handlers.
  • You can use it to add many event handlers to a single element.
  • You can use it to add many event listeners of the same type (i.e. two ‘click’ events).
  • You can use it to add any DOM object, including window, document, element, etc.
  • You can also remove it with the removeEventLister() method.
Snake Game
The highlight of these last two days in Week 2, before we have our Hackathon on Wednesday night, has been pair programming with my partner Louis to create this Snake Game.
Since we were faced with time pressure to present our game in front of all the junior and senior residents by 8pm, we focused on the functionality of the game, and did not add many additional bells and whistles.
With a little more time, there’s more refactoring I’d like to do on this code, as well as add a few more fun features!
Here’s a little code snippet of how we iterated through the doubly linked list to replace the position of one node with that of the previous node, to make the snake move:
let nodePtr = this.tail;
if (this.tail) {
do {
nodePtr.top = nodePtr.previous.top;
nodePtr.left = nodePtr.previous.left;
if (nextMove) {
nodePtr.move();
}
nextMove = true;
nodePtr = nodePtr.previous;
} while (nodePtr.previous);
}
Hackathon
Looking forward to our Hackathon tomorrow night!
Did you enjoy this issue? Yes No
Puppy Nomadic
Puppy Nomadic @puppynomadic

Let's pull each other up by our Bootstrap.js 🪴 👩🏻‍💻 🦮

=== Journey of software craftsmanship ===

{"Formerly": ["nonprofit community organizer", "teacher", "researcher", "government director"],
"Future": ["software engineer", "web3 dev", "developer advocate", "technical program manager"]
}

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.