Original subtitles

so what we just built here is called mvc

and i'm telling you if you master this

coding pattern you will never have

trouble getting a job as a web developer

what's up guys welcome to my javascript

tutorial for absolute beginners now this

tutorial is specifically designed for

new programmers to help you get a job in

software engineering

and unlike other tutorials where your

code looks like this after an hour we're

going to be building a fully functional

app and we're going to go through not

only the fundamentals of javascript but

also the advanced concepts like closures

the document object model and most

importantly the mvc architecture and

this is something that people rarely

teach but it's essential if you want to

succeed as a software engineer now this

tutorial is packed with information so

you'll want to go through it section by

section and pause whenever you need to

review or catch up

in the description you'll find the

different sections of this tutorial and

you can also see it in the progress bar

below the video here

and throughout the tutorial i put

together a series of exercises to help

you practice the concepts that we learn

and the answers for these exercises as

well as the code in progress can also be

found in the description

and with that let's get started with the

tutorial

since this is a tutorial for absolute

beginners i'm going to start from the

ground up and i'm going to explain every

step that i do

now the first question we have to answer

is what is programming so programming is

basically giving instructions to a

computer and the computer follows our

instructions now i found the best way to

demonstrate this is to try it ourselves

and to give the computer some

instructions to follow

so the first step that we have to do is

to download the google chrome web

browser now if you already have chrome

installed you can skip to this time in

the video but if you don't you can

download chrome by just searching for

google chrome

clicking that download link

and installing the browser so i'm using

mac here but it doesn't matter if you're

on mac or windows all the steps in this

course are the same for both

now i recommend chrome because most

professional web development is done

using chrome so if you want to get a job

it's beneficial to learn how to develop

in chrome

okay so once you've installed chrome

we're going to open google chrome

and we're going to open a new tab

and now we're going to right click in

one of this white area here

and we're going to click inspect

so when the inspect window opens we're

going to click the console tab

and here's where we can give

instructions for the computer to follow

so the first instruction that we're

going to learn

is

alert

hello

now you have to write the instruction

out exactly as i have it here because in

programming if you don't write it out

exactly the computer will give you an

error so once we have our instruction

we're going to tell the computer to

follow an instruction otherwise known as

running our code by pressing

enter

so you can see that the computer

followed our instructions it created a

pop-up with a text hello inside

now we're going to learn our second

instruction which is

console.log

hi and what this does is it displays the

message inside the quotes which is high

inside the console and when we press

enter we'll see that the computer did

exactly what we told it to do

now the third instruction i want to

introduce right now

is

it's a little bit complicated so you

have to write it out exactly

document dot body dot inner

html

equals hello

and you have to be careful of the case

sensitivity here so the lowercase and

uppercase has to match exactly

now what this instruction does is it

tells the computer to overwrite this

entire page and just replace it with

whatever's in this quote which is hello

now when we run this instruction we're

gonna see the computer did exactly what

we told it to do

all right so we just learned three

different instructions that we can give

to the computer and the computer does

whatever we tell it to do and that's

what programming is that's what

programmers like me do at work every day

in this tutorial we're going to be using

around 30 maybe 40 different

instructions in javascript and don't

worry about memorizing all of these

because i prepared a cheat sheet that

explains all the code that we use and

you can find this cheat sheet in the

link in the description here so the code

that we wrote here is from a programming

language called javascript and

javascript offers many different

instructions that we can give to the

computer and as programmers we take

these instructions and then we combine

them to create even more complex

instructions so eventually we can create

something like order pizza

which will order pay and get someone to

deliver pizza to where you live right

now we haven't created this instruction

so the computer is going to give us an

error

so now that we've learned a little bit

of javascript code and we ran that code

we're going to learn more about the

javascript programming language so

what's the difference between javascript

and other programming languages well one

thing is that javascript is the only

language that can run in a browser so

that's why we're learning it right now

and one big difference between different

programming languages is something

called syntax and syntax is like grammar

in english or french etc it's the rules

for how each language is written for

example in english sentences begin with

a capital and end with a period

but unlike in english you can misspell

things and people will still understand

what you mean

in programming however you have to

follow the rules of syntax exactly

otherwise you're just going to get

errors

to demonstrate this i'm going to write

the alert code that we had earlier

but this time i'm going to delete the

second quote and when i press enter to

run it you're going to see that we have

a syntax error so that's really

important in programming you have to

follow the syntax rules exactly

one thing you'll notice is that our

instructions end with a semicolon

in javascript a semicolon marks the end

of an instruction it's sort of like a

period in english where a period marks

the end of a sentence

now according to the syntax rules of

javascript a semicolon is actually

optional it's only if you have two

different instructions on one line then

you need to separate them with a

semicolon so that the computer

recognizes that there are two

instructions in this line

throughout this tutorial i'm going to

use semicolons in my code because i

noticed that a lot of companies still

prefer to use semicolons even though

they're optional

so for now i'm going to give you some

exercises that you can try so pause the

video the answers are in the link in the

description and see if you can use what

we just learned to solve these exercises

so now we're going to work on our first

project project based learning is one of

the best ways to learn programming

so the project we're going to do is

we're going to create our own version of

the google tasks application so google

task is basically a to-do list and one

of the things we need to do is to

display a list so how do we display

things on a web page we're going to

learn that code right now

normally when we're programming we don't

just write all the code in the console

here we write our code in files so the

first thing we're going to do is we're

going to download a text editor to help

us write our code

the text editor we're going to download

is called

vs code

now you can use any text editor that you

want but right now vs code is the most

popular text editor for professional

programmers so that's what i'm going to

teach you

so once you've installed vs code

we're going to want to create a new

folder

you can put it anywhere but i'm going to

put it on my desktop and i'm going to

call the folder code so this folder is

where we're going to store all the code

for our project

and now we're going to open vs code

and we're just going to open the new

folder that we created in vs code

so now we're going to create our first

file containing our code so we're going

to create this new file icon

and we're going to call this file to

do.html

so it's important that you end the file

name with dot html because that's going

to tell the computer that this file

contains a web page rather than just

text

so what does html mean

html stands for hypertext markup

language it's another language that we

can use to give the computer

instructions just like javascript so

we're going to learn our first

instructions in html

so the first instruction we're going to

learn is called

button

so this is an instruction that tells a

computer to create a button with the

text press me inside the button

now you can run these instructions by

opening the folder that contains your

code

and you want to open your code with

google chrome

and as you can see it creates a web page

and it creates a button based on our

instructions

html is used to create visual elements

on a web page whether that's a button a

text or an image and we call this

process rendering so html is used to

render visuals while javascript is used

to manage information they both work

together

now we're going to teach the syntax of

html right now these things are called

tags they describe what kind of visual

element this is

so in this example we are creating a

button and this tag represents the start

of a button and we have a slash here it

means it's the end of the button and

whatever is in between is the contents

of the button otherwise the label that's

in the button which you can see here

and similar to javascript the syntax of

html has to be just right otherwise it

won't work

now we're going to learn our second

instruction in html

and this is the script tag

so what this code does is it tells the

browser to load the javascript that's

contained in the script

so we're going to write the javascript

that we had earlier

and we can reload the file by just

refreshing the page

and you can see that the browser

followed our instructions and it ran

this code

and it created a pop-up with the text

hello inside of it now the thing to note

here is that we can't load javascript

directly in a web page javascript has to

be loaded within html

so we learned our first two instructions

in html and we'll be switching back and

forth between these two languages

because they work together to create web

pages

now some more exercises for you to try

to help you understand what we just

learned

let's start building out our to-do list

so what do we need to create a to-do

list well we need to save a list of

items that we have to do

so this list can be get groceries wash

the car and make dinner

so we're going to learn a feature in

javascript called variables and this

feature is going to help us save our

list

so we're going to create a variable by

using this code

let to do

one equals get groceries

let to do two

equals

wash car

and i'm going to create the third to-do

list

i

and we're going to delete this alert

code

so variables are like containers you can

save a value inside a variable

this is a syntax for a variable

let means to create a variable to do one

is the name of the variable or the name

of the container

and this part means to save the value

get groceries inside this variable this

is also called assigning a value to a

variable so when we're creating

variables we generally don't want to use

names like a or b because we want to

make our variable names easy for someone

reading the code to understand

now we're going to run this code by

going into the browser we're just going

to refresh the page and we're going to

right click

inspect

and open the console

and now we can

console.log

to do one

so you can see that to do one the

variable was defined and when we console

log the variable it actually logs the

value inside the variable

now i want you to try console.log to do

one

but with quotes around it

and you'll notice that instead of

logging the value it just logs to do one

as a text

so why does this happen to do one is a

variable it's a container so it will log

the value inside the variable

but to do one with quotes around it it's

not a variable anymore it's an actual

value so it would just log this value

now this type of value with quotes

around it is called a string which in

programming is just another name for a

piece of text now you can verify that

this is a string by giving this code

type of

to do one

and the computer will tell you that this

is a string

another type of value in javascript is a

number so if you do type of 99 it will

tell you that this is a number but right

now we're just working with strings

one thing i want to show you is if you

type type of to-do one notice that it

doesn't say variable typo actually gives

you the type of the value that's stored

inside the variable which is in our case

this string get groceries

another thing that you can do with

strings is you can combine them together

using the plus sign so i can say

console.log

hello

and plus my name simon

and i will log the combined string

so before we continue i'm going to teach

you some html standards so when we write

html there's usually a very specific

structure that our page has to follow

and the structure looks like this

we're going to create an html tag

and inside the html tag i want to create

a body tag

we have tags inside another tag this is

called nesting

so inside the body tag we're actually

going to put all of our code

and we're going to indent this code to

make it look nicer so if you want to

indent multiple lines you select the

lines and you press tab

so what does this mean so the html tag

says this document contains the html

code here's the start of the html

document and here's the end the body tag

says here is everything that's visual

that you can see on the web page here's

the start of the body here's the end of

the body and all of the visual elements

that are shown in the web page are

inside the body so there's one other

section that appears in every html page

and that's called the head section

and this section has information about

the page but doesn't necessarily have

things that show up on the page

so for example one thing we can put in

the head element is the title

and we're going to call this my to-do

app

now we're going to run this html

and you'll notice that the title shows

up in the tabs but it doesn't

necessarily show up inside the web page

as a visual element

so this is just a standard that we use

for html and we're going to follow it

because this is what professional

programmers use

let's learn our next bit of html code so

we're going to go under this button and

we're going to create what's called a

div element and inside this div we're

going to type out our to-do's so get

groceries

and we're just going to

create a div for each of our to-do list

items

so this guy's gonna be wash car

and make dinner

so what does a div do well we already

know that a button renders a button a

div on the other hand it renders an

invisible box around whatever's inside

that div so here it's going to render

this text and it's going to create a box

around that text and to see that we're

going to go back into chrome and we're

going to refresh the page to run our

code

so now you can see that we're rendering

the three items in our to-do list now

the divs are actually invisible but what

you can do is you can click this mouse

box icon

and just hover hover over this div and

it will highlight the div even though

it's invisible so you can see that we

created a div here

and here and here so three divs for

three to do list items if you click into

it you can see that in our page we've

created three divs here

so when we're creating our app we don't

actually want to write everything in

html like this

because we want to have the

functionality to add and remove items

from our list and html can't do that so

we have to put everything in javascript

remember that javascript is the language

that you use to manage information while

html just displays visual elements so

next we're going to learn the javascript

code for adding these divs to the body

and we can do so in a few steps

so the first step that we have to do

is we're going to create a new html

element in javascript by using this code

document.createelement

and we're going to create the div

element just like we have here now you

have to make sure that you write this

out exactly and it's case sensitive

otherwise you'll get an error

so now that we have a div we want the

text inside the div to be this to do

item so to do that we're going to use

this code element dot inner

text

equals

to do one

and what this does is it takes our div

and it sets the

text inside the div to be the value of

to do one which is get groceries

and the last thing we're going to do is

we're going to add this div to our page

and we can do that by using this command

document.body.appendchild

element

so i'm going to pause here because i

realize i just introduced a lot of code

and i'm going to explain everything step

by step

so when we break it down you realize

that we actually have a lot of the

concepts that we need to understand this

code

first of all remember that javascript is

about giving instructions to a computer

so this part of the code says create an

html element and this is the type of

element that we want to create

so what's interesting here is that we

have an html element inside javascript

so one of these is inside here

and this is one of the special features

of javascript where we can blur the

lines between html and javascript

so we can create elements in javascript

and we can also save them in variables

remember earlier that we are saving

strings inside variables while an html

element is another type of value that we

can save inside a variable

so that's the first line of code here

now the second line is just another

instruction to change the text inside

the html element that we just created

it's the same thing as going up here and

changing the text here to be something

else so the way that the second line of

code works is that you take your html

element you add a dot inner text after

it and then you can set it to whatever

string that you want

now the third line here is just another

instruction that adds an element to the

end of the body

so document.body actually refers to the

body here

and you'll notice that there's a lot of

elements that are nested inside the body

typically we call these elements

children and the body the parent element

so that's where appended child comes

from

and what this does is that it adds

another child to the body so it's going

to put it after all of these other child

elements

inside these brackets is the element

that we want to add so we're going to

take the div that we created up here

so at the end of the day this is just

three more instructions that i'm

introducing to you in javascript

and you don't have to worry about

memorizing all of these instructions

because remember i added a link to a

cheat sheet that you can find in the

description so how do i know all of

these different types of instructions

and how are you supposed to discover

what types of instructions are available

in javascript

well i actually learned the same way

that you're learning right now i learned

each instruction one by one and i just

memorized them but the most important

thing here is to know what you want to

do for example if i know that i want to

create an html element but i forgot the

code for it then i can just go to google

and search how to create an html element

in javascript

and now we can run our code and see what

happens

so you see that because we have these

three divs here these three items are

still showing but you also notice that

our javascript added a new div to the

page and that's what we want we want our

javascript to manage our information and

determine what gets displayed

i'm just going to take a break here to

introduce myself

i'm simon from super simple.dev and my

mission is to make a tech career

possible for anyone if you're getting

value from this tutorial you can help me

out in my mission by clicking that like

button below so that this video will

reach more people

if you want to learn tech with me please

subscribe for the latest videos and

lessons thanks for watching so far let's

get back to the tutorial

now we're going to go back and we're

going to create divs and insert divs for

the other two items in our to-do list

so what we can do here is we're just

going to copy these lines

and paste them and one thing you can do

is

we can reuse this variable name so we

can reassign a variable to another value

and this time we're going to create a

new div and we're going to reassign it

to the element variable and we're going

to set the inner text of this new div to

to do two

and now we're gonna again we're gonna

add this div to the body

and when we run our code

we can see that we added our second to

do item and we're just gonna get rid of

these divs so that we don't get confused

here

now i'm just gonna do it for the third

one as well

to do three

and this is called reassigning the value

of a variable

now when we run this code we're going to

see that our javascript added the three

items to our web page

one thing that you'll notice is that

we've written a lot of code here so

let's clean this up by using another

feature of javascript called functions

so functions are basically reusable

pieces of code it helps us run this code

over and over again without having to

write the code over and over again

so we're going to write our first

function

called add to do and this is a syntax

for writing a function you have two

round brackets and two squares brackets

and we're going to paste copy paste this

code inside the function

i'm going to

format it a little bit to look nice

so what we can do with this function is

that we can run this function by using

this code

add to do bracket bracket

when the computer sees this line of code

it's going to run the function which

means it's going to run these lines of

code one by one so let's refresh a page

and see what happens

so you'll notice that there isn't much

difference because here we're basically

doing the same thing as before we are

running these lines one by one now the

cool thing about functions is that if

you

run the function again

it will run these three lines of code

again without you having to rewrite them

so if we go back to the web page and

refresh you can see that get groceries

has been added two times so you can see

that functions are really good for

reusing pieces of code

so one of the problems that we have here

is that this function only runs for

to-do one how do we adapt this function

to also work with to do two and to do

three or any to-do that we have in the

future

and the way we do that is we're gonna

introduce a new variable up here let's

call it to do

title

and we're going to use this variable

in here

so what we're doing here is we're

creating a variable just like we had

before but here we don't have to use let

we just have to give the name of the

variable and then we can use the

variable inside our function

now we have a variable here at the top

of a function this is called a parameter

so how do we set the value of this

variable or this parameter

so we can do it by setting the value

here let's set the value to

new to do and let's get rid of this line

so we don't get confused

now let's refresh our page and see what

happens

so what happens here is that to do title

gets the value of whatever is between

these brackets and that parameter can

then be used as just a regular variable

inside the function so we're going to

set the inner text to the value of to do

title which is set over here as near to

do

so let's set the value of to-do title to

be our to-do

and let's refresh the page and you can

see that we're back to rendering our

first to-do item

now let's use our function for 222 and

to do three so we can get rid of all

this code and we just have to run the

function

with different values i'm going to copy

this

i'm going to paste this

we're just going to

refresh the page and you can see that

it's doing the exact same thing as

before except now we are reusing the

code inside this function instead of

having to write it all over again

here's some terminology that's related

to functions that you need to know now

these are the proper terminologies that

most programmers use so it's important

to understand what they mean

so when we're creating a function this

is known as defining a function

and we've already had an example of

running a function this is also known as

calling the function

and sometimes we say this is executing a

function they all mean the same thing

when a function has a parameter like

this we say that the function takes a

parameter

so this function takes one parameter

that's a string

functions can also have multiple

parameters and you separate them by

commas so we would normally say that

this function takes two parameters a

string and a number

now when we're calling the function we

can set the parameter by putting a value

between the brackets

this is also known as passing in a value

to the function

so for this function we're passing in a

string and a number

and the value that we pass in can also

be called an argument

so these are the proper terminologies

that you'll come across as you learn

programming and i'll be using these

throughout the rest of the course to

give you more practice in recognizing

and understanding what they mean

before we continue here's some more

exercises to get you more familiar with

functions and function parameters

so now that we're using functions in our

code you can see that it's a lot cleaner

but there's another problem here if

someone wants to use our to-do app they

have to go in the code and modify

themselves so if they want to add a new

to-do they would have to go in

and type out the to-do in the code and

also run this function and that's not

possible when you're using an

application

so how do we solve this problem

we're going to use another feature of

javascript called an array

so we learned about strings already

which is this thing inside quotes now

we're going to learn about another type

of value in javascript called the array

type and this is what an array looks

like

let to do's equals get groceries

[Applause]

so this is an array and you can tell

that it's an array by the square

brackets around this and this tells the

computer that hey we're creating an

array here

and you'll notice that inside this array

we can store multiple values so right

now we're storing three string values

and these values are separated by commas

that's how the computer knows that this

is a separate value from this

so just like how a string represents a

piece of text an array represents a list

of values

and the nice thing about an array is if

we want to add to this list our code can

add the values without having to modify

the code ourselves

and here's a command for modifying an

array

to do's dot push

another

to do

and we're going to go into our web page

here we can go into the console tab

and we're going to

console.log our to-do's array

and you'll notice that we have four

values in our array because we just

added it here

i'm going to do another syntax lesson

here so we just learned what a function

is and you'll notice that push is also a

function but it's a function that is

predefined by javascript

and when you see a dot here it means

that this function is attached to this

array

in javascript arrays have many functions

attached to them when arrays are created

for example another function that's

attached to array is called

pop

and what pop does is the opposite of

push it removes the last element of an

array so if we go back to our web page

and we refresh the page

and we console.

log

our list again

we'll notice that the fourth element has

now been taken away by this line of code

we have a function that's attached to an

array like this this is called a method

and you can access methods using this

dot notation so if you have an array you

can access all the methods here using a

dot and strings have methods as well for

example you can do hello

dot and access any of these methods so

we're gonna access to uppercase as an

example and we're going to run this

method or this function attached to the

string

so let's go back and refresh our page

and you'll see that it logs the

uppercase version of our string

so that's what methods are and we use

methods all the time on the job for now

we're just going to use the

array.push method for our project

now let's use our new array to render

our to-do list instead of using these

variables as we said before if someone's

using our app we can't really be

modifying our source code and adding new

variables for new to-do items so how do

we solve this problem well we're going

to use another feature in javascript

called loops

and the way the loops work is that you

start with an array and use the dot

notation to see what other methods are

on the array so

one method that we used already is push

this time we're going to use the for

each method and we're going to call for

each

so we're going to pass in a function

and what for each does

is that it goes through each value of

the array so it takes this value and it

puts this value inside a parameter in

the function and it's going to run this

function and then for the second value

it's going to put the second value in

the parameter it's going to run the

function again and for the third value

it's going to put this in the parameter

and run it again so it's going to loop

through each value in the array and it's

going to run this function that's what

for each means

so since these values are going into

this param let's rename it to something

more understandable like to do title

and in order to render our to-do's in

the web page let's just reuse this code

so we're just going to copy

and paste it here

and now we can get rid of these

variables because we're using the loop

to actually render our array

so if we go back to our web page

we can see that we're still rendering

our to-do list but now we're using a

loop

so the advantage of using an array to

render this list is that if we want to

add something to our to-do list we don't

need to go into our code and add new

variables we can actually hook up our

button so that when we click our button

it'll call some code like to do.push and

a button click will be adding stuff to

our to-do list

so let's set that up now

first let's get rid of this line because

we're going to use the button to add

stuff to the array so the re the way we

do that is by using some html we're

going to use on click equals

to dose dot push

new to do

so this bit of code here is part of html

and this is known as an attribute so in

html you can change the behavior or

appearance of elements by adding

attributes for example another attribute

that a button can have is the disabled

attribute

and when you set the value of this

attribute to true you'll notice that

this button becomes disabled and i can't

click it anymore

so the syntax of an attribute looks like

this the attribute name is on the left

and then the attribute's value is on the

right

and it's surrounded by double quotes and

there's no space between the equal sign

so it's a little different than

javascript

so let's go back to this on click

attribute and this basically says when i

click this button we're going to run the

code that's inside the value of this

attribute so in this case we're going to

run to do stop push new to do and that's

going to push

this

onto the end of the array so let's give

that a try

so when i click this button i can

console.log to do's

and you'll notice that the new to do

value has been added to the end of the

array so everything's working

so a best practice is not to write your

code in the html like this instead what

we want to do is create a function

and we're going to move this code inside

the function

and instead we're going to

just call the function

when we click the

button okay so you notice that we're

always adding the same value new to do

to our array but ideally we would want

to type in a text box what we want our

to do to be

and then use the value of the text box

so let's create that next so how do we

create a text box in html well the code

for that is

input

type equals text

and close

input so here you'll notice that we're

using attributes again this time we're

using the type attribute and we're

setting it to the value of text and what

this does is it creates a text box

in our web page so if we refresh our web

page we can see that we just created a

text box that we can now type into

now if we change the type attribute to

another value like check box you'll

notice that it changes the appearance

and the behavior of the input element so

now it becomes an actual checkbox that i

can check and uncheck

but let's go back and we'll change this

back to a text box because that's what

we want

so now a short syntax lesson here if

there's nothing between the opening and

closing tags you want to use the html

shorthand which is this and this

basically means the same thing

so now when we click our add button by

the way let's change this to say add

to do

so when we click this button

we want our code to grab the value

inside the text box and then push that

value onto our array so how do we do

that

i'm going to introduce yet another

attribute and you notice attributes are

really important html and this attribute

is one of the most important attributes

and it's called the id attribute so

we're going to put

id

equals to do dash title

and what id does is that it identifies

this element so that we can grab it with

our javascript so that we can find it

and grab it with our javascript so to

use our new id we can go in here and

we're going to type out this code

we're going to create a variable called

text box to store our text box so let

text box and we're going to set it to

this value we're going to run this code

to grab

our text box so document.getelementbyid

and you're going to give the id of the

input element of our text box

and to get whatever we typed in the text

box we're going to do let the title

equals text box dot value

oops

and now instead of pushing new to do to

our array every time we're going to push

whatever's in our text box so we're

going to do title

remember we're just giving instructions

to the computer

so this code tells the computer to get

an html element by its id

and using dot value we can get whatever

we typed out of the text box

and if you're ever unsure about what

code to use then you can always google

what you want to do

now let's refresh your page and see what

happens so let me type a new to-do

one two three

add to do

let me console.log here just to make

sure that it worked

so now you see that we're able to use

this text box to add items to our array

so you might be wondering how come our

new to do is not showing up in our

webpage yet

and the reason for that is we have this

code which goes through each to do and

renders it on the web page

but when we click the button this code

has already finished it's not going to

run anymore so what we actually want to

do is

we want to run this code

again

and this code is going to run on our

updated to-do list because we pushed a

new element to the end of the list

but remember that functions are reusable

pieces of code so instead of copying

this code over and over

let's create a new function and let's

call it render

and we're going to copy we're going to

cut and paste this code inside

and instead of

writing that code all over again we're

just going to call render in both of

these places

okay so what should happen is when we

start our web page it's going to call

render which is going to use this array

and render these three elements on the

web page and then when we click the

button it's going to add a to do to our

array and it's going to render it again

so let's see what happens

i'm going to add another to do

and you'll notice that instead of adding

it to the end of the list we're actually

copying this list again and then adding

it to the end so what went wrong here

well you'll notice that the render

method actually just keeps adding stuff

to the web page it doesn't actually

reset our list so what we want to do

is we want some code here that will

reset

our list to be empty and then we'll

re-render our list

by the way this piece of code is called

a comment and the syntax for comment is

you started with slash slash and

everything after this the computer would

just ignore so

if i put two slashes here it'll start

ignoring all this code

and there's two ways of writing comments

one is using double slash and the other

is one is using slash star in case you

want to write

multiple lines on your comments

and what comments are good for is that

it allows us to comment on our code so

that anyone who reads the code will be

able to understand it better

but it doesn't actually run the code so

we don't have to worry about any bugs or

behavior changes

now let's learn how to reset our list

before we re-render it so let's get rid

of these comments for now

and you'll remember at the beginning of

this course that we learned a piece of

code called

document.body.inner

html equals hello

so what this code does is that it wipes

out the entire body

and in this case body is the actual body

element so everything inside body gets

wiped out and is replaced with

this value

so this is sort of what we want we want

to wipe out our list but we don't really

want to wipe out the

button and the text box

so what do we do well let's go into our

code and we're actually going to put our

list inside

a div so remember when we put one

element inside another element this is

called nesting so what we're going to do

now is we're going to put our list our

to-do list inside this div we're going

to nest it inside this div so that we

can use that command to wipe out

everything in this div but still leave

everything else untouched

so how do we render our to-do list

inside this div

well you'll notice here in our render

function

that we're creating elements and we're

attaching them to the body

so instead of the body we want to attach

the elements to the div so how do we do

that so while we do it in the same way

that we access our text box by using the

id attribute again

you'll notice that id is really

important in web development

so let's give it an idea of to do dash

list

and down here instead of adding elements

to the body we're going to add elements

here so remember we can grab our to-do

list

by using the document.getelementbyid

so now you want to get the id of this

and now instead of documenting our body

we're going to do to do list

dot append child

so we're going to start rendering inside

here instead of inside the body so let's

go back to our web page and refresh

go to the elements tab to see our html

structure and you'll notice that we now

have this div id equals to-do list and

inside this div we've rendered our to-do

list

so now the next step is that before we

re-render the list we want to get rid of

it we're going to wipe this out so we

already know the command for that

so remember that document.body.interhtml

will reset the body

now let's go in

and reset our list so document dot get

element by id

dot inner html

and this is going to

wipe out a list and replace it with an

empty string

so now let's go back into our web page

refresh

i'm going to add another to do

and there you go we're not going to be

copying this list over we're just going

to be adding something to the end of it

so what's happening here is that when we

click this add to do button

it's going to run this function which

will add

whatever's in the text box to our array

and then we're going to call render

which will

reset our list

and then it will re-render the updated

list

so before we continue i'm going to give

another syntax lesson there's actually

three ways to create a variable in

javascript

let

const and var

so let creates a variable that can be

reassigned for example you can say let

num equals 5 and then you can reassign

the variable to another value so num

equals 6.

const on the other hand creates a

variable that can't be reassigned it

stands for constant so when you set the

value of the variable you can't change

it anymore

and var is an old way of defining a

variable from an older version of

javascript and we generally don't use it

anymore

so let's go back into our code and we

notice that for all of our variables

we're not really reassigning them

so let's follow our best practice and

change these let's to const

generally you always want to use const

except let's say if you want to assign

this element to something else

then you have no choice but to change

this to a let

let's learn more about javascript by

adding another feature we're going to

add a due date to our to-do list

so the first thing we'll need is a date

picker and the html code to create a

date picker is this

input

type equals date

so you notice that it's another input

element except the type attribute now is

set to date which would change the

behavior and appearance of this element

to be a date picker so let's go back

into our web page and refresh

and now you'll see that we have a date

picker that is provided by the browser

i actually want this text box to be in

front of the date picker so we're just

going to move this

behind the text box

so now when we added to do we want to

associate a due date with it

so the first thing we need to do is to

grab the date that we selected in the

date picker so how do we grab the date

that we selected from the date picker

well we did something similar when we

grabbed the value from the text box

and we're going to do the same thing

here we're going to add an id

to the date picker let's call it the

date picker

and we're going to grab this element in

javascript and we're going to get the

value of this element

so let's go back down here

and here we're going to

create a variable to store our date

picker let's call it a date picker

and we're going to

get

an element by id and the id we're going

to use is the date picker

id so now this code will grab the date

picker from html and store it in this

variable

so now let's get the date from the date

picker so we're going to do

due date equals date picker

so now we have the title

and the due date for the to do

but now the question is how do we

associate a due date with each to-do

and for that we'll need to learn about

the object type in javascript so we

learned about strings and array types in

this course we're going to learn about

the third type in javascript called

objects so what are objects objects

basically group different values that

are related together this was what an

object looks like so the syntax of an

object is that you start with a curly

brace and you end with a curly brace and

everything inside is part of the object

so we're going to group two related

values together and for each value we're

going to give it a label so for this

value we're going to call it the title

and for this value it's going to be

called the due date and this is the

syntax for these labels so these labels

are actually called property value pairs

and these pairs are separated by a comma

so that's the syntax of an object

so why do we have these properly valued

pairs it lets us access specific values

within the object so if we just wanted

the title of this to do we can do to do

dot title and just get the title if we

wanted the due date we can do to do dot

due date and that will give us the due

date

so let's go back in our code and get

some more practice with objects so we're

going to go here and convert our to-do's

from strings into objects and the way

that we do that remember the syntax is

that we're going to use these curly

braces to say this is an object

and we're going to put the value here

and we're going to set the property or

the label of this value to be the title

so this is the value that represents the

title

and now we're going to add a value for

the due date and this can be anything

you want so i'm just going to put some

random value

here

so that looks pretty good now let's

convert the rest of them

to objects so the title

and the due dates

so you have to make sure that these

properties are the same for each object

otherwise if you access the title and

this one's called title with two e's

then you're not going to get the same

results so we're just going to make sure

that title and due date are the same for

each object

so the next thing we want to do is that

when we create our to-do's we also want

to add an object to this array instead

of a string which we have here

so to do that we're going to

get rid of this and we're going to

create an object and we're also going to

have a title

property and the value is going to be

the title here

and the due date property and we're just

going to use this value here

so that's all we need so the last thing

that we need to do here is that in our

render function you'll notice that we're

still assuming each to do

is just a title but that's not true

anymore it's an object so we're going to

convert it into an object

and instead of using to do title we're

going to access the title inside the

object so we're going to use to do dot

title

and now let's go back and refresh our

page

just going to add another to do

pick a date

and you'll notice that we're adding to

the end of the list but we're not really

rendering the due date here because in

our code you'll notice that we don't

really do anything with the due date

we're just using the title so let's deal

with that next

and i'm just going to

add the to due date after the title just

to make it simple so we're going to add

a space in between them and we're going

to add the to do

due date

so with strings you can add them

together and it will combine the string

so let's refresh and we can see that our

due dates are appearing beside our to-do

list and don't worry we're going to make

this look better later

so now that we learned about objects we

can add the next functionality to our

to-do list which is the ability to

delete items from the list so the first

thing we need to do is to add a delete

button beside each of these and the way

to do that is we're going to go back

into our code

and

beside this we're going to add a new

button so let's

create a button

document dot create element

and we're going to create a button this

time

let's call it the delete button and

we're going to set the text inside the

button to be

delete so we know what it does what it

does

and we're going to add this delete

button to each of these elements so

we're going to take element dot append

child

delete button

so basically this element here

represents this div and we're just going

to add a button to the end of it that's

what that code does

let's

rerun the code and see that we have

these delete buttons here you'll notice

that the delete buttons are a little too

close to the date and we're going to fix

that next

and to do this i'm going to introduce

another very important attribute in html

called the style attribute and this time

instead of adding it to html here

because the list doesn't exist yet we're

going to just add it in javascript

and to do that we're going to do

delete button dot style

equals

and we want to add some spacing on the

left side so we're going to do margin

dash left

and we're going to set it to maybe 12

pixels

and let's go back and refresh the page

so you'll notice that we added 12 pixels

of margin

to our buttons so they're a little bit

more spaced apart now if we go into our

list and look at our buttons you'll see

that when we set this property in

javascript

the corresponding

attribute is set in html

so you'll notice that we're manipulating

html with javascript pretty often so

here we're setting the style of the html

element to this we can set the text of

the html element we can grab the value

inside the html element

and this feature is called the document

object model or the dom and this is one

of the most important features of

javascript basically you can grab stuff

from html

and that gets converted into a

javascript object so that you can use it

seamlessly in javascript

now another thing i want to note is that

the style attribute here

this value is another language called

css and the css syntax is sort of like

this you have a style name and then you

have the value of the style you can have

another style and another value for that

style and you can add different styles

like this together

so if you want to learn more about html

or css i can do separate videos on that

just let me know in the comments below

okay so now we have our delete button

how do we hook it up to a function so

that something happens when we click our

delete button

so remember our on click

attribute here we're going to do the

same thing except we're going to do it

here

in javascript

so we're going to use the document

object model or dom features again

and we're going to use this delete

button object and we're going to set the

on click

property to a function so let's create a

function right now actually let's create

a function called delete to do

and we're going to set the value of on

click to this function

so you'll notice it's a little different

from how we wrote it up here the value

of this attribute is actually some piece

of code that we want to run and here

we're giving it a

the name of the function rather than

running the actual function so that's

just a little difference between setting

attributes in html versus setting

attributes using the dom

so in our to do function let's

console.log a message

just so that we know

it's doing something

let's go back

and we're going to go into the console

tab to see our messages and just going

to click delete a few times

so now that we see that when we're

clicking this button

it's clearly running this function

which logs this message

so now let's write the actual code for

our delete to do function so let's get

rid of this first

and there's actually two things that we

need to do so when we click this delete

button we want to get rid of this line

from the web page

and we also want to go into this list

and remove the associated object

and it's actually a little easier than

you think because remember that our

render function will take whatever's

inside this to do and render it on the

web page

so as long as we remove

the correct to do from this list and

call render then everything will be fine

and we don't need to worry about

removing things from the web page

so when we click this delete button we

need a way to identify that this button

belongs to this to do so remove this one

and we would click this button we need a

way to identify that this button belongs

to the third to do so how do we do that

well one way we can do it using

everything that we've learned so far

is we can create an id and we can attach

the id to the

to do object here

and we can attach it to the delete

button so that serves as a link between

the two

so when we create these to do so let's

create an id

so let's just add a dummy id let's call

this id 1

and id

2.

so just make sure that these ids are

unique otherwise you won't know which

one to select

and now when we're creating a to-do we

also need to add an id so let's create

one here

const id and

a cool way to create an id in javascript

is just to use

the date

so we're going to type new date dot

get time

so what this code does is it gets the

current time

in milliseconds

and so we can actually run it here

new date dot get time

so it returns a number and the next time

you run it the number is going to be

different so that's pretty good it's

good enough for our project right now to

serve as an id

so that's what we're going to do we're

going to set the id of this

new to do object to be this id that we

created

so now what we want to do is we're going

to go down to our button

and we're going to set the id on the

button so that

they're linked together so id equals

to do

remember that to-do's now have

an id attached to them so we can access

them through the dot notation so dot

id

and let's refresh the page

now let's go into elements and we're

going to go into one of these to do so

just go into the to-do list

and you'll see that the button now has

an id attached to it so if i add another

to-do

and we look at the

html

you'll notice that the button now has an

id attribute

and if you console.log

the to-do's

and you look at the last one you'll

notice that this id now matches this one

so let's go back into our code and use

the two together

so how do we get the id of the delete

button that was clicked

so when you click a button it runs this

on click function and the on click

function gets provided with a parameter

called event

and we're just going to log

the event to see what's inside so this

event is just an object like we've

learned

so let's go back to our web page refresh

and another

well you can just click this

look at the console so we can see that

we just logged a mouse event when we

clicked the delete button it provided an

event to our function and when we log

the event this is what we see

so the inside this event we can actually

get the button that was clicked

and the property for that is called the

target so if you hover over that you can

see that

this target refers to this button right

here

so let's go back into our code and use

that

so here we're going to create a variable

to get our button

so event dot target

and remember that we set the id here so

we're going to

get the id cons id

to delete

equals delete button dot id

and now we need some code to

remove the to do

in this list that has this particular id

so how do we find and remove values from

an array well one way to do this is to

use another array method so what we're

going to do is we're going to type out

our array and then we're going to use

the dot notation again to see what

methods are on the array so we've

already used the for each method this

time we're going to use the filter

method and we're going to call filter

so filter is very similar to the for

each method it's going to go through

this array and it's going to loop

through the array so what that means is

that it's going to run a function

so it's going to take this value

and put it in a parameter so let's name

that parameter to do and then it's going

to run this function

and then the second step is going to

take the second value

put it in this parameter and run the

function again and it's going to do this

for each value in the array so it's

going to loop through the array and run

this function

so before we learn how to use filter we

need to learn another concept called the

return value of a function

so if we go up to our previous code

you'll notice that this is a function

you can tell by the

round brackets this means that we are

calling this function

and this function actually gives us a

value so in this case we're getting an

html element when we run this code and

then we're going to save this html

element in this variable and then we

manipulate the variable

so the value that a function gives us is

called the return value

so this function in particular returns

an html element

on the other hand if we have this

function here gettime it returns

something different it returns a number

that represents the current time in

milliseconds

so what determines the return value of a

function

well a function returns whatever we tell

it to return and this is how it works so

let's just write an example function

and we'll just call it funk

and we're going to tell it to return a

hundred

so if we go back into our web page and

we refresh

and now we can run this function

so when we run this function you'll

notice that it returns a value of 100

since 100 is the return value of this

function we can actually save it in a

variable

so now if i console.log

the variable

you'll see that the variable has stored

the return value of the function

and if we go back to our code you'll

notice that we've been doing this all

the time we call a function

the function returns a value and then we

store it in a variable

so now if we change the return value to

100

the string

and we go back

and

we rerun our function

you'll notice that it now returns a

string so a function returns whatever we

tell it to return

so a couple other things that we need to

know about this return statement is that

any code that comes after the return

doesn't run anymore so

i'll just type some code here and if we

refresh the page

and run the function

you'll notice that we don't console log

anything so we don't run this code and

that's because when you return a value

the function finishes immediately we're

not going to run anything else after a

return

so now that we know what our return

value is let's go back to our filter

method

here

so the way the filter works is that it

will loop through this to-do's array so

it will take this value it will put it

inside this parameter and run the

function then it will take the second

value and run the function again and it

will take the third value and so on

and if this function returns true

then we will keep this to do inside the

array

if it returns false then we will take it

out of the array

so that's sort of what we want but first

what are these values of true and false

so we learned a few types of values in

javascript already like strings and

objects

this is another type of value in

javascript called a boolean value

so there are only two boolean values

true

or false

and we can verify this by going back

into our web page we're going to go into

the console and we're going to type

type of true

so what are boolean values and how are

they used

a boolean value basically represents

whether something is true or false

so for example

is one less than five

so we all know from common sense that

this is true and in javascript this will

result in the value of true

now if we write as one greater than five

we know that this is false so in

javascript this results in the boolean

value of false

now what you see here is called a

comparison operator you basically put it

between two values and it compares the

values and returns whether or not this

is true or false so here's a list of the

other comparison operators in javascript

so this one means is this value equal to

another value this one means is it not

equal to and this one means greater than

or equal to and you can pretty much

figure out what the others mean

so since these comparisons result in a

boolean value we can save it in a

variable just like any other value in

javascript so we can save it in const

is it true

equal one less than oops one less than

five

and console.log

hit true

so you'll notice that this results in

the boolean value of true and then we

saved it in this variable

now that we know what a boolean value is

let's go back to our filter method

so in filter if we return true then we

will keep this to do in the array if we

return false we'll remove this to do

from the array so remember we want to

remove the to do that has this id

that matches this id so let's write out

our logic in the comments first

so

if the id of this to do matches

id to delete

then we're going to return false because

we want to remove this from our to user

rate

for everything else

return true

so this is the logic that we want now

how do we convert this into code well

there's actually a javascript feature

that is perfect for this and that's

called the if statement so here's how

the if statement works we're going to

have the word if and between these

brackets is some code that evaluates to

true or false

now if it evaluates to true we're going

to run this code otherwise we're going

to run some other code

so let's go back into our function here

our example function and try out the if

statement

so first we're going to create some

variables to play around with so let num

one equals one and const num five equals

five

so now we're going to write our if

statement we're gonna go

if

and we're gonna write else

just like that

and inside these brackets we're gonna

have some code that returns true or

false

so let's do num

one is less than num five

and we're going to write some code

inside each of these

so each of these blocks so this one and

this one these are called branches

you can think of it as the code is

branching off so it can either go this

way or it can go the other way

so i'm going to run some code here

and we're going to run

some code here

so if we look inside these brackets

is one less than five well this is

definitely true one is less than five so

that means we're going to run this code

so now let's go back into our web page

we're going to refresh to reload that

function

and we're going to run this function

and you'll notice here

that we ran this line of code and that's

how if statements work if this is true

we're going to run this

otherwise we're going to run this

now if we flip this so is 1 greater than

5 we know this is false so it's going to

run the else statement so an if

statement can actually have several of

these tests like this and the way to add

more tests is just to add another if

statement

after the else statement

so here i move the else statement to the

bottom and i added another if statement

in between

so here we can have some other code that

returns true or false let's do something

like is num1 greater than 100

so we all know that one is not greater

than a hundred so this is going to

return false

and we're not going to run this code

now let's add another if statement test

and this one's going to be

is num1 greater than zero

so we all know

that

one is greater than zero

so we're going to run

this code

so let's go back into our web page and

we're going to refresh to load that

function again

and now if we run this function

you'll notice that

it is running this code

so the way that an if statement works is

that you can have multiple tests like

this it's going to go through this test

and then this test and then this test

so the first test that evaluates to true

we're going to run the code inside the

branch that is associated with the test

if all of these tests evaluate to false

then we're going to run the code

in the else branch

and that's how if statements work

so now that we learned if statements

let's go back to our filter method

and let's write out our logic here in

code

so let's take the first part of our

logic if the id of this to do matches

id to delete so we're going to type if

the to do dot id

and we're going to see if it matches

this id i'm going to say equals and this

is the

the comparison operator so it's going to

compare whether this value is equal to

this value which is id to delete

so if the id of the to do equals the id

we want to delete then we want to remove

it from the array so remember we're

going to return false

so we're going to return false

and for everything else so we're going

to just write else

we're going to return

true

so this is the logic for removing the to

do with this id from the array here

so one more thing about the filter

method is that it doesn't actually

modify our original array it actually

creates a copy of the array with this to

do removed

so in order to update our original array

we're going to have to overwrite the

arrays variable

so we're going to reassign the to-do's

variable with the result of the filter

so since we're reassigning this variable

we have to go up here

and change this from a const to a let

so now we have the resulting array with

the to do removed

and to update our web page we're going

to call as the last step the render

function

now let's go back to our web page and

test it out

just going to press the delete button

and here

so now you can see that when we click

delete we're removing the to do that is

associated with that delete button

now let me add another to do

and try to remove the new one

well you can see that it's not working

now why is this happening

well this is actually one of the most

common pitfalls in javascript that i

wanted to show you

so if we go back into our code

and it's a little hard to figure it out

so i just want to show you so that you

have strategies when you're debugging

your own code

this method here gettime returns a

number so this is going to be a number

and we're saving a number as the id of

any new to do that we create

but here when we're removing the to-do

we're getting the id out of the button

and we get an id out of an html element

because of how the dom works this id is

actually going to be a string version of

the id so here when we access the id

from the to do it's going to be a number

because here we set a number

but when we access the id out of the

button this is actually a string so

we're comparing a number to a string

and when you compare a number to a

string unexpected things are bound to

happen

basically here it says

since this is a number and this is a

string this is going to return false

every time

because the types don't match

since this returns false

the filter function is always going to

return true so we're going to keep

everything in the array and the array is

not going to change

and that's why when you go back to the

web page and you try to delete any new

to do's

it doesn't remove it but when you click

the delete button for the old to do's

you'll notice that it works because

the

ids are strings

and

we're comparing a string to a string so

everything works as expected

so this is called a type error when

you're working with some sort of value

and you expect it to be one type but it

turns out to be another type and it's

one of the most common sources of bugs

in javascript

and that's why a new language called

typescript is getting really popular

because it's basically just an expanded

version of javascript but it helps you

deal with type errors like this

so how do we fix this bug well what we

can do is instead of setting the id to a

number here let's set it to a string and

a trick for converting a number to a

string in javascript

is to just add

the empty string

so now this id is going to be a string

and here

when we access the id it's also going to

be a string and the comparison is going

to work properly so let's go back to our

web page and try it out

i'm just going to add another to do

and now when i click this delete button

you'll notice that we actually delete

the to do from our list

and the others still work because

the other to-do's already have strings

for their ids

so the next concept we're going to learn

is one of the most important concepts in

this course

so what we just built here is called mvc

and i'm telling you if you master this

coding pattern you will never have

trouble getting a job as a web developer

so mbc stands for model view controller

so the way the mvc works is that it's a

way to structure our code so we split up

our code into three sections the model

section the view section and the

controller section

the model section contains all the code

that saves and manages our data

the view section contains all the code

that manages our visuals and manages

rendering our visuals according to the

data that's stored in the model

the controller section connects the two

together it responds to events from the

view like click events and then tells

the model to change its data accordingly

so let's go back into our code and see

if we can identify the sections of mvc

so let's start with the model

in our code the model section is

actually really simple it's just this to

do's array

so it might not look like much but an

array actually helps us save our data

and it offers some methods like to

dos.push

and to use dot filter

to manage our data

so let's call this the

model section

with a comment

and the proper way to organize our code

is that we want everything that's

related to managing data in this section

so there's actually two sections of code

that we want to move in here

the code that creates a to-do and the

code that deletes a to-do

because these two things are all about

managing data and we want to put them in

the model section

i'm going to explain in a bit why it's

important to organize our code like this

but let's go down to our add to do

function

and you'll notice our code for creating

a to-do is here so let's create a

function in our model section

that just handles creating a to-do so

let's call it create to do

and we're going to move this here

so it's going to create a to do as an

object and it's going to push this

object onto this array so it's going to

manage all the data now you'll notice

that we don't have the title and due

date values anymore so we'll have to

pass them in as parameters

so let's create a parameter called title

and in order to add a second parameter

we just separate it with a comma so do

date

so these parameters like we learned

before are variables we have two

variables in this function that we can

use

and to set the value of these variables

we can do that when we're calling the

function so when we say create to do

we can set the value of these variables

by

using this

say title

and due date

so here we're taking the value of title

we're putting it here and it gets set

as the value of this parameter

then we're taking the value of due date

we're putting here which gets set as the

value of this parameter and then we can

run the code as usual

so now

if we go back to our web page

and refresh

and create another to do

you'll notice that everything still

works the same

and that's because all we did was we

just separated our

our code that manages data into this

model section

so now let's deal with the code that

manages deleting it to do

so that oh by the way we can remove this

function

so the code for deleting a to do is here

so let's create a new function

called uh remove

to do

and let's move this logic or let's move

this code inside here

so

so all the code that deals with managing

the data in this to-do's array goes

inside this model section

so one thing that we need is the value

of id to delete so let's pass that in as

a parameter just like we did here

so in our

delete to do function we're going to

call

remove to do

and we're going to pass in the id to

delete

so this value is going to go

into this parameter and that's going to

be used here

so let's go back into our web page and

just make sure everything still works

another to do

to do

so we click delete you'll notice that

it's removing that to do if we click

another delete button it's removing that

to do

so everything still works we've just

organized our code a little differently

so now the second part of mvc is the

view section so let's see what code

manages the view section

well this one is a little easy because

we have this render function which

basically takes the data that's in the

model

and renders the view

so this is all we have for the view

section

now the html at the top here that

renders the

the text box the date picker and the add

to do button these are all part of the

view

because they handle rendering the visual

elements but for simplicity here in our

code we're just going to say this is the

view section

and now for the controllers the

controllers are code that respond to

events in the view so we have two

functions that respond to click events

so if we go back to our web page we have

two buttons here the add to do button

and the delete to do button so someone

using our app can interact with our app

by clicking these buttons

and the controller code is the one

that's supposed to respond to these

clicks and do something

so in our code we know that up here

if we click on the add to do button it's

going to run the add to do function

which is right here

so this is a controller function because

it responds to interactions in the view

and then it tells the model to update

based on the interaction in the same way

the delete to do function is also a

controller function because we're

attaching it to this delete button so it

responds to events or clicks on the

delete button so this part of our code

is the controller section

[Applause]

just the controller section

so now you can see that we've split our

code up into the model

the view

and the controller so why is this so

important

well one big reason is that it makes

your code easy to understand because

each section can handle a very specific

task

so as an example let's say that we

forgot all about mvc

and we just wrote our application out

directly

so if we go back to our application

we can see that we really only need two

functions we need a function for

handling this button click and we need a

function for handling this button click

so in our code

those two functions refer to these

everything else is part of mvc and we

can get rid of it but if we were to just

write our code we would just have these

two functions

now let's say that we didn't have mvc

well instead of this create to do

function we would have to write out a

bunch of code

that

manually creates our to-do like we had

before

so this code might not seem complicated

we just have a toduz array and we're

pushing another value onto the array but

in the future we might have some

validation for these title and due date

fields we might be sending some

notifications we might be doing some

data collection or we might be saving to

a backend server

so you can see that this code that

manages the data can get really

complicated

the same thing goes for the render

function

so

instead of having just a render function

we would have to go into the html and

make sure that it matches our array or

the current state of our array and then

we have to

figure out where we want to insert our

new to do

so in that case this function becomes

extremely complicated there's three

things going on we're responding to the

click event here we are managing all the

data here and we're managing all the

visuals at the bottom

so what mbc allows us to do is that it

allows each section to only do one thing

and it allows us to write the minimum

amount of code for the other sections so

what do i mean by that

well this is the controller section so

the only code that should be here is

code that deals with the button click or

the interaction so this is that code

and for code that's not related to the

controller mvc allows us to write the

minimum amount of code that we need to

get things done so in that case all we

need to do is create a to do and we want

to give the new to do this title and

this due date

and this is the minimum amount of code

that we need to write to get this to do

to become created

now inside this function there can be a

whole bunch of details but we don't need

to worry about it here because that's

done in the model we're in the

controller section we shouldn't be

worrying about those details

and similarly for the view

instead of having all the html

validation and rendering code we can

just have a render function

so calling render is the minimum amount

of code that we need

to update the view

so you can see that because of mvc

our controller only needs to have

controller code and it can write the

minimum amount of code for the model and

the minimum amount of code for the view

and this makes our functions really

simple and specific and that is a best

practice in programming you want your

functions to be doing one thing and one

thing only ideally

so that's a short introduction to mvc

it's a really important concept in web

development and it's what a lot of web

technologies are built on

so how does mvc help you in finding a

job so when you're looking for your

first job you usually have to build a

bunch of projects and then share those

projects along with the code to the

company

when you use mvc you can build bigger

and more impressive projects because

your code is well organized and when the

company looks at your code it's a lot

better for you if you're using an

architecture that their engineers are

using every day the second big reason

for understanding mvc is that when

developers are creating web applications

they usually use a javascript framework

and most of these frameworks are built

on mvc

and this is how i explain what a

framework is right now i have a render

function that has two steps the first

step is to blow away our whole list and

the second step is to re-render the

whole list another developer might want

to do it differently they might want to

keep everything the same and then just

look at which element in the list

changed and then replace that element or

remove it or add it

so basically every developer can create

web applications in a different way and

what frameworks do is they say here's a

collection of

functions methods and objects and these

will handle all of the rendering for you

and if every developer starts using a

framework all of our code starts looking

the same so when we go to one project

the code looks the same as another

project that's using the same framework

so it's a way to make all of our code

more consistent and readable and

frameworks can also provide a lot of

functionality that i don't have to write

for example like i mentioned before if

the list changes then they can provide a

render function that figures out what

changed for me instead of me having to

write my own render function so it saves

me a lot of time effort and code

since the majority of frameworks are

built on mvc sometimes known as mvw or

nvstar it's all the same

it helps you transition from framework

to framework if you understand mvc and

you won't have trouble learning the

latest framework because they all follow

a very similar pattern

and when you have a good understanding

of these frameworks it helps you in your

chances of getting a job tremendously

because you're using the exact same

frameworks that professionals use on the

job

now that we know what nbc is let's take

a look at another example to help us

learn

so we're going to be creating one last

feature for our app called save and

retrieve

so what save and retrieve does is that

if we go back to our web page

right now if i refresh the page you'll

see that this list gets reset

what save and retrieve does is that when

we refresh the page or we when we close

the browser and reopen it our list will

also be saved so we'll come back to the

same list

so how would we implement this feature

so let's go back to our code

so we know that saving our data has to

do with data and anything that has to do

with data goes into the model section

see how it works

so now let's go into our model section

which is right here and we're going to

add a new function to the end of it so

let's create a function called save to

do's

so how and where are we going to save

our to-do's well the browser actually

provides us some code to help us save

and retrieve data and this code is

called local storage

so the way that local storage works is

that it provides a set item function

which allows us to save data

in order to use set item we're going to

pass in a key

and we're going to pass in our data and

later we can use this key to retrieve

our data

so let's go back to our code and take a

look at how we can use local storage so

in our save to do's function what we

want to do is call

localstorage.set item

and we're going to give it a key here

that we're going to use to retrieve our

data later but for now let's prepare our

data so local storage can only save

strings and right now our data is in an

array so what we need to do is convert

this array into a string

so the command in javascript for

converting an array into a string is

json.stringify so this is a function and

we're going to pass in

our array

so the result of this is going to be the

string version of this array

and now let's change the key to

something that makes more sense let's

call this

just to do's

so now that we have this save to do's

function when do we run this function

well we should run this function

whenever our to-do's change

which is

here

and here so notice that here

we're pushing a new item onto the

to-do's array so it's changing here and

here we're reassigning it to a filtered

version of the to-do's array so it's

also changing here so

after this code runs we're just going to

call save to do's to save our updated

to-do list in local storage

so that takes care of the saving part of

this feature now how do we retrieve the

data from local storage when we start

the app

so we're going to go up here and when

our code runs for the first time

instead of using this default array

we're going to check local storage to

see if it already has a to-do's array

saved and if it does we're going to use

that and if it doesn't then we're going

to use this default array

so how do we do that well this looks

like a good situation to use an if

statement

so let's write out the logic here if

local storage

has a to-do's array

then

use it

otherwise

use the default array

so that's the logic that we want to

create so let's implement it right now

the first thing we have to do is we have

to create this to do's variable so that

we have something to save it in but

since we don't know beforehand whether

we're going to get something from local

storage or use the default array we're

going to leave this as empty

so when you're creating a variable you

don't have to assign a value to the

variable right away unless it's a

constant

so that's what we're doing right now

we're only creating the variable but

we're not giving it a value

and to implement this logic we're going

to go

and start our if statement so if

and else

so we already know what happens

in the else branch we're going to set to

do's

to equal the default array which is this

and if you want to indent this you can

select all these lines and press tab

so let's get rid of these lines

okay so now we have the else branch what

do we do for the if branch

so for this if test we need to check if

local storage has a to do's array so how

do we do that

well we can do it in two steps first we

can retrieve whatever's in local storage

and then we can check if it's an array

so how do we retrieve something from

local storage

so the code for that is

localstorage.getitem

and we're going to pass it a key so

remember that when we saved this data we

gave it the key of to-do's well now

we're going to give the same key to

retrieve that data

so we're going to say to do's

and this is going to get whatever's in

local storage under the key to do's

and let's save this oops so let's save

this data in a variable

so the way that local storage works is

that if something exists for this key it

will return a string so remember that

when we saved the data we had to convert

it into a string

so now when we retrieve the data we have

to convert it back into an array

and javascript provides a function for

converting a string to an array or an

object

and that function is json.parse

so we're going to run that function on

the result of this so now the second

step is to check if this is an array

so javascript actually has some code for

that too and that is array

dot is array

saved

to do's

okay now the last step that we have to

do is

if local storage has a todos array which

is what we have here

then we're going to use it as our to

do's so we're going to assign it to this

variable so all we have to do is assign

to dues and give you the value of our

saved to do's

now let's go back into our web page

and let's refresh to load all our new

code and see what happens

so now when i delete

and i refresh the page you'll see that

we get the same list back it's not

resetting to the default list anymore

so now if i add another to-do

and then i close my browser

and let's say that i want to go back

and reopen it

so i double click it to reopen

you'll notice that we get the same list

back including the new to do that i

created so our save and retrieve feature

is working perfectly

now if we go back to the code i just

want to show you how this fits into mvc

so you notice that the save and retrieve

feature focuses on managing data so

that's why it goes into the model

section of our code

so for this we actually created a new

function

and whenever we modify our array we're

running this function

now the beauty of this is that when we

go into our controller code you can see

that the controller is not about

managing data so it still runs the

minimal code of we just want to create a

to-do we want to add the title and we

want to give it a due date but we don't

care what else whatever else happens we

just want to create a to-do and the

model section will take care of any

other details that we want to add but

the controller code is isolated from

that

it doesn't have to worry about any of

those details

so this makes our code really simple and

flexible we can keep adding more

features into this function such as data

validation or saving to a remote server

without having to complicate the rest of

our code

so that brings us to the end of our

tutorial and if you made it this far i

just want to say congratulations because

we learned a ton of features in

javascript and we built a fully

functional app

now before i close off i just want to

introduce some more aspects of the

language that'll help you when you go

out and learn on your own

so the first thing i want to introduce

is that we've been defining functions

like this

we have the function word and then we

have the function name

the parameters and the rest of the

function

well in javascript there's another way

of defining functions and it looks like

this

first we create a variable to store our

function

and the name of this variable is going

to be the function name

and then we're going to type out

function

parameters and the body of the function

so this is another way of defining a

function in javascript and this is the

same thing as doing this what you'll

notice here is that a function is just

another type of value in javascript just

like a string

so if we go back to our web page

and we refresh the page

and we type

type of

add to do

2

you'll notice that javascript tells us

this has the type of function

so a function is just another type of

value in javascript and because of that

everything that you can do with for

example a string you can also do it with

a function

so we can

save a function to a variable

we can we can pass a function

into another function like this

and the third thing we can do is we can

actually

return a function

from a function

now this might look a little strange to

you because we have a function inside

another function but remember that this

is just another type of value like a

string

and anything that you can do with a

string you can do with a function

so in a newer version of javascript a

new way of creating a function was

introduced and that is called the arrow

function

so instead of writing the word function

here we're going to use

an arrow

and for now this is the same thing as

defining a function like this

so there's a few differences between a

regular function and an arrow function

the first thing is that it's a little

easier to read so that's why people now

prefer to use arrow functions over

regular functions to demonstrate if we

go into google

and we search for array filter

javascript to learn how to use an array

filter

and

if we look at the examples you'll notice

that they're using an arrow function

instead of a regular function

now the way that an arrow function works

is that in here you still have your

parameters like to do

and title

etc but if you have just one parameter

these brackets are optional

so if we go back

we'll notice that

they have one parameter here and the

brackets are optional so they chose to

leave it

out and the other difference is that if

the function is on one line like this

where the code is right after the arrow

then there's actually a return

keyword before this code

but in an arrow function this return

keyword is hidden so this is the same

thing as saying return

if word.length is greater than six

so if we go back here notice how we have

a return string here instead of writing

this we cannot put it all on one line

so we can just say string

and this means the same thing as return

string because everything is on one line

so we don't need that return statement

if we go back into our app to test it

out

and we have to refresh to load that code

now if we run our

add to do 2 function

you'll notice that it returns

the string without us having to write a

return statement

so arrow functions are a little bit

easier to read and they offer some

shortcuts for us when writing our code

and that's why people prefer it

over the old way of defining a function

and if you're looking for documentation

online you're going to see arrow

functions everywhere the old way of

writing a function is used in very

specific situations and for now we're

not going to explore those because those

are out of the scope for this tutorial

that's the end of this video you did

awesome we learned a bunch of javascript

features today and we use them to build

a fully functional app another thing we

can do is to learn how to make our app

look a lot nicer and that's going to

require some more html and css code now

html and css are not in scope for this

javascript course but if you want to

learn more about those languages let me

know in the comments and subscribe for

the latest videos and lessons i'm simon

from supersimple.dev

thanks again for watching and i'll see

you in the next one