day 81 — code 365

Big day today!!

1. Advanced CSS — Box-shadows, transitions, animations
2. DOM selection, manipulation, event listeners

What we did today:

1. Warm-up: Beer Song code (’99 bottles of beer on the wall…’)!
2. Demo our fancies
3. More CSS
4. JS review
5. The DOM; selection + manipulation
6. Events

Sample approach for 99 beers problem:

Write the function calls first.

This is test-driven development.

When the tests pass, we know it’s working.

This approach helps us to frame our code towards what we need as the solution.

Example:

1. Write empty beer object
2. Write function calls.
3. Write method.

Handling parameters for variadic functions.

Assigning values to variables (and checking if they are passed in).

Where stop is a parameter,

Method 1

if (!stop) {
	stop = 0;
}

Method 2 (better)

stop = stop || 0;

Broke down function into smaller functions. Separation of concerns. Reduce the amount of repeated code.

The DOM.

I found this to be the most useful description of the DOM: it is a model, of the document, made out of objects.

As such, because it is a collection of objects, the DOM is invisible.

But the browser uses the DOM to create a visual representation of those objects — what we see (rendered) on the screen!

We also looked at selecting elements in the DOM.

First, with the Inspector in Chrome DevTools.

Then, with JavaScript!

Then, we looked at manipulating those elements.

Again, with the Inspector, and then with JS.

Then, we looked at enabling the user to manipulate those elements through various events! This take on defining user interaction was a real eye-opener for me. By adding event listeners to various DOM objects, we allow users to manipulate the DOM! And, consequently, how that DOM is rendered — what appears on the screen!

Then, to solidify these new concepts, we practiced making strings from <input> elements.

And then we make a simple JS calculator with inputs and buttons.