notes.txt

Learning JavaScript by Building a Basic Tetris Game
by Ania Kubow
https://www.youtube.com/watch?v=rAUn1Lom6dw

During the intro she was quick to offer help in YouTube comments or Twitter

Intro:
Setup IDE
   - she uses Atom and installs Shell Command
   - show invisibles, show indent guide, use soft tabs
   - she downloaded and installed a number of extensions around 5:00 mark
   - linter-js-standard


Initial Code:
app.js:

The DOMContentLoaded event fires when the initial html document has been completely loaded and parsed; this is without waiting for the css, images, etc.

Showed Google Sheet with mock-up of page.
- 20x10 grid
- need 200 divs
- could have used a for loop in js to build.


CSS Section:

by default divs stack up down the page
- to get them to fill our yellow outter div we need to use flex-bots (sp?)


Explaning variables:
variables have global or local scope

const and let
 
let vs var
let allows you to declare vars with a block scope

var - function + global scoped
let - block scoped
const - block scoped constant


Working with Arrays:
store lists of data
each element has an index
first index is 0; last is array.length-1


Arrow Functions and forEach:
- new in es6

old way:
hello = function () {
   return 'Hello World'
}

new way:
hello = () => 'Hello World'
hello = (val) => 'Hello World' + val
hello = val => 'Hello World' + val

itemArray.forEach( item => item + 2)

forEach Call Back:
.forEach( value, index, object )

Example:
let names = [ 'Erik', 'Ania', 'Dave' ]

names.forEach( name => {
   console.log(name + ' is the best')
})


Drawing Tetrominoes using classList.add():
Math.random()
.length // how long array is
Math.floor() // round down to nearest integer


Times and Intervals:
Covered the interval concept
if/else if/else

New one for me:
itemArray.some(false, true, false) // looking for a true element in array


Using Modules to define our place on the grid:
just wrote code


Keycodes and events:
Keycode.info // website with all keyboard event codes


Choosing Items from Arrays:
easy


Displaying the "next up" tetromino:



Adding a start and pause game function:
This lesson was where we added logic to the start button to run the game


Splice():
Used to remove, replace or add items to arrays
It mutates the array

itemArray.splice( startIndex, deleteCount )
itemArray.splice( startIndex, 0 ) // with a deleteCount of 0, nothing gets deleted

itemArray.splice( startIndex ) // removes everything after index

all calls to splice return what was spiced *and* modify the array


Splice(), concat(), and appendChild():
concat: merge 2 arrays togeter


Game over using some() and innerHTML:
write the gameOver()


Assigning colors to our Tetrominoes:


Contact Ania Kubow if need help or to show off project
@ania_kubow
Ania Kubow - YouTube