Lecture 4

Numbers, Math, and "change"

What we will cover today

the number type
basic arithmetic
browser element's "change" event
editing the DOM in more complex ways

Numbers

Integers and Floating Point numbers are treated the same

                    
    let age = 3; // = 3
    let heightInMeters = 1.5; // = 1.5

Review: console.log

function used by developers to print text to the console

                    
    let age = 3;
    console.log(age);
    console.log("age", age);

browser element's change event

happen when an input, select, or textarea's content changes
MDN Spec

                    
const nameInputEl = document.getElementById('nameInput');
const nameEl = document.getElementById('name');

nameInputEl.addEventListener('change', function(event) {
    nameEl.textContent = 'Name: ' + event.target.value;
});

Name:

basic arithmetic

                    
// Some basic arithmetic
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

// uneven division.
5 / 2; // = 2.5

// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8

Add calculator

                    
const inputOneEl = document.getElementById('addOneInput');
const inputTwoEl = document.getElementById('addTwoInput');
const answerEl = document.getElementById('addAnswer');

function handleInputChange() {
    const answer = inputOneEl.value + inputTwoEl.value;
    answerEl.textContent = answer;
}
inputOneEl.addEventListener('change', handleInputChange);
inputTwoEl.addEventListener('change', handleInputChange);

Oh no, it is adding strings together

Why?

This is because adding strings does concatanation
"a" + "b" = "ab";

so "1" + "1" = "11";

what we want is
1 + 1 = 2;

Add calculator v2

                    
const inputOneEl = document.getElementById('addOneInputv2');
const inputTwoEl = document.getElementById('addTwoInputv2');
const answerEl = document.getElementById('addAnswerv2');

function handleInputChange() {
    const answer = parseFloat(inputOneEl.value) + parseFloat(inputTwoEl.value);
    answerEl.textContent = answer;
}
inputOneEl.addEventListener('change', handleInputChange);
inputTwoEl.addEventListener('change', handleInputChange);

There we go, notice the parseFloat()

Global Scope vs Local Scope

Total:

                    
let sum = 0; // global scope

function handleInputChange(event) {
    const num = parseFloat(event.target.value); // local scope
    sum = sum + num;
}

inputOneEl.addEventListener('change', handleInputChange);

function updateAnswer() {
    answerEl.textContent = sum;
    console.log('sum:', sum);
    console.log('num:', num); // will error because there is no num in this scope
}

updateBtnEl.addEventListener('click', updateAnswer);

Animal List Example

Animal List Example Code

                    
const animalListEl = document.getElementById('animalList');
const animalInputEl = document.getElementById('animalInput');
const animalAddBtn = document.getElementById('addAnimal');

function addAnimal() {
    const animal = animalInputEl.value;
    const animalEl = document.createElement('li');
    animalEl.textContent = animal;
    animalListEl.appendChild(animalEl);
    animalInputEl.value = '';
}

animalAddBtn.addEventListener('click', addAnimal);

Creating elements with JS!

                    
// HTML: Travis
// same as

const nameEl = document.createElement('p');
nameEl.textContent = "Travis";

document.body.appendChild(nextEl);

document.createElement is a function that create DOM elements
el.appendChild is a function that adds elements to the DOM

Class work

Time to break into small groups and make a additional calculator:

Class work

Instructions here