It should have an addTodo method

Practical JavaScript

Introduction

What is Practical JavaScript? (3:13)
The voice in your ear (4:41)
Is this course right for you? (1:13)
Everything is a todo list (3:53)
What you'll build (3:25)
The development process (3:35)

Support

Tools

Version 1 - Arrays

Requirements (1:46)
It should have a place to store todos (4:08)
It should have a way to display todos (3:20)
It should have a way to add new todos (2:17)
It should have a way to change a todo (4:03)
It should have a way to delete a todo (2:48)
Review (3:04)

Version 2 - Functions

Functions are just recipes (3:36)
Customizing functions (6:45)
More on customizing functions (2:15)
Requirements (2:12)
It should have a function to display todos (3:54)
It should have a function to add new todos (5:41)
It should have a function to change a todo (6:08)
It should have a function to delete a todo (3:01)
Review (4:15)

Interlude - Functions and variables

Version 3 - Objects

What is an object? (5:30)
Objects and functions (4:46)
Using Plunker (2:49)
Requirements (0:52)
It should store the todos array on an object (3:31)
It should have a displayTodos method (3:11)
It should have an addTodo method (3:13)
It should have a changeTodo method (3:10)
It should have a deleteTodo method (3:28)
Review (1:15)

Interlude - Success is the process

Version 4 - Booleans

Requirements (1:10)
todoList.addTodo should add objects (5:14)
todoList.changeTodo should change the todoText property (4:27)
todoList.toggleCompleted should flip the completed property (6:06)
Review (1:39)

Version 5 - Loops of Logic

The for loop (7:01)
Looping over arrays (4:26)
Requirements (0:40)
displayTodos should show .todoText (6:36)
displayTodos should tell you if .todos is empty (6:58)
displayTodos should show .completed (6:11)
Review (1:29)

Version 6 - Thinking in Code

Interlude - Data types and comparisons

Data types overview (3:36)
Comparisons with primitives (2:51)
Comparisons with objects (7:16)
Comparisons review (2:56)
How are primitives and objects stored inside of variables? (0:47)
Code example 1 (2:00)
Code example 2 (2:23)
Code example 3 (3:59)
Code example 4 (5:03)
Code example 5 (3:02)

Version 7 - HTML and the DOM

Requirements (1:28)
HTML essentials (8:21)
What's the DOM? (6:44)
There should be a “Display todos” button and a “Toggle all” button in the app (2:36)
Clicking “Display todos” should run todoList.displayTodos (9:48)
Clicking “Toggle all” should run todoList.toggleAll (3:34)
Review (2:25)

Interlude - Don't wonder about things the debugger can tell you

todoList.displayTodos (5:27)
todoList.addTodo (4:19)
todoList.changeTodo (2:09)
todoList.deleteTodo (2:04)
todoList.toggleCompleted (2:25)
todoList.toggleAll (4:37)
Use the debugger all the time (1:54)
Focus on understanding, not building from scratch (3:02)

Version 8 - Getting data from inputs

Our first refactoring (9:45)
More on refactoring (3:29)
Requirements (1:15)
There should be a button for adding todos (7:51)
There should be a button for changing todos (6:17)
There should be a button for deleting todos (3:47)
There should be a button for toggling a todo (4:04)
Review (2:20)

Version 9 - Escape from the console

Requirements (2:29)
Inserting li elements into the DOM (7:34)
There should be an li element for every todo (8:48)
Each li element should contain .todoText (2:49)
Each li element should show .completed (7:38)
Escaping the console (5:57)
Review (3:49)

Interlude - Functions inside of functions

runWithDebugger (6:04)
setTimeout (2:03)
forEach (7:10)
addEventListener (4:50)
Buzzwords: Higher order functions and callback functions (4:17)

Version 10 - Click to delete

Introducing Glitch (2:57)
The 'return' statement (3:10)
Requirements (1:48)
There should be a way to create delete buttons (3:56)
There should be a delete button for each todo (2:05)
Each li should have an id that has the todo position (2:58)
Delete buttons should have access to the todo id (6:14)
Clicking delete should update todoList.todos and the DOM (8:39)
Cleanup and Review (3:48)

Version 11 - Destroy all for loops

Interlude - Understanding *this*

The cheatsheet (2:09)
Case 1: In a regular function (2:11)
Case 2: When a function is called as a method (1:15)
Case 3: When a function is called as a constructor (5:11)
Case 4: When you explicitly set the value of `this` with bind, apply, or call (10:41)
Case 5: When you're in a callback function (10:32)

Next steps

Lecture contents locked

Enroll in Course to Unlock

If you're already enrolled, you'll need to login.