BEST JavaScript Tutorial for Beginners for Getting a Job 2021 (High Quality, Project Based 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. 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 had to answer is what is programming? So programming is basically giving instructions to a computer. And the computer follows our instructions. Now I find 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 our 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 "hi" 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.body.innerHTML 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 orderPizza() 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 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 VSCode. Now you can use any text editor that you want, but right now VSCode is the most popular text editor for professional programmers. So that's what I'm going to teach you. So once you've installed VSCode 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 VSCode and we're just going to open the new folder that we created in VSCode. So now we're going to create our first file containing our code. So we're going to click this new file icon, and we're going to call this file todo.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 I have 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 todo one equals get groceries, let to do two equals wash car, and I'm going to create the third to-do list item. 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, todo1 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 todo1. So you can see that todo1, 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 todo1 but with quotes around it, and you'll notice that instead of logging the value, it just logs todo1 as a text. So why does this happen? todo1 is a variable, it's a container, so it will log the value inside the variable. But todo1 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 todo1 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 todo1 one notice that it doesn't say variable, type of 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. When 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. This guy's going to 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 they 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.innerText equals todo1, and what this does is it takes our div and it sets the text inside the div to be the value of todo1, 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? Well 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 innerText 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 appendChild 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 supersimple.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 todo2, 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 todo3, 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 addTodo and this is a syntax for writing a function: you have two round brackets and two squares brackets, and we're going to 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 addTodo 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 todo1 how do we adapt this function to also work with todo2 and todo3 or any todo 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 todoTitle 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 todo 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 todoTitle 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 todoTitle which is set over here as new todo. So let's set the value of todoTitle to be our first todo 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 todo2 and todo3 so we can get rid of all this code, and we just have to run the function with different values. I'm gonna copy this, I'm gonna paste this and 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 todo app they have to go in the code and modify themselves, so if they want to add a new todo they would have to go in and type out the todo 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 todos equals get groceries. 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 the command for modifying an array todos.push another todo, 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 todos 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. When 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 toUppercase 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 todo 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 forEach method, and we're going to call forEach 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 forEach means, so since these values are going into this param, let's rename it to something more understandable like todoTitle, and in order to render our todos 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 todo 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 todo 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 todo.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 way we do that is by using some html. We're going to use onclick equals todos.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 onclick 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 todos.push new todo, 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 todo, to our array but ideally we would want to type in a text box what we want our todo 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 checkbox, 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 todo, 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 in 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 todo 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 textbox to store our textbox so let textbox and we're going to set it to this value. We're going to run this code to grab our textbox 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 title equals textbox.value oops and now instead of pushing new todo to our array every time, we're going to push whatever's in our text box. 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 textbox. 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 todo 1 2 3 add todo, 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 web page 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 todo 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.innerHTML 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, well 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 id of todo-list and down here instead of adding elements to the body, we're going to add elements here, so remember we can grab our todo list by using document.getElementbyId. So now you want to get the id of this, and now instead of documenting our body we're going to do todoList.appendChild so we're going to start rendering inside here, instead of inside the body. So let's go back to our webpage, and refresh. Go to the elements tab to see our html structure, and you'll notice that we now have this div id equals todo-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.getElementbyId .innerHTML 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 todo, 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 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 add a 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 datePicker, 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 dueDate equals datePicker.value 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 is 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 gonna 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 todo we can do todo.title and just get the title. If we wanted the due date we can do todo.dueDate 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 todos 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 todos, 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 todo 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 todoTitle we're going to access the title inside the object, so we're going to use todo.title, and now let's go back and refresh our page. Just going to add another todo 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 todo 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 todo 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 todo 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.createElement, 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. And we're going to add this delete button to each of these elements so we're going to take element.appendChild 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 deleteButton.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 onclick property to a function. So let's create a function right now actually, let's create a function called deleteTodo and we're going to set the value of onclick 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 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 order to use this 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 deleteTodo 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 todos 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 todo so remove this one, and when we click this button we need a way to identify that this button belongs to the third todo 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 todo 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 todos, let's create an id so let's just add a dummy id, let's call this id1 and id2. 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 todo we also need to add an id, so let's create one here const id and a quick 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 todo 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 todo, remember that todo'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 todos, so just go into the todo list and you'll see that the button now has an id attached to it. So if I add another todo, and we look at the html, you'll notice that the button now has an id attribute and if you console.log the todo'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 onclick function and the onclick 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 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.target and remember that we set the id here so we're going to get the id. const idToDelete equals deleteButton.id and now we need some code to remove the todo 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 forEach 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 forEach 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 todo, 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 func 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 a 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 todo'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 todo 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 typeof 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 is 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 isItTrue equal one less than oops one less than five and console.log. isItTrue. 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 todo 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 todo matches idToDelete, then we're going to return false, because we want to remove this from our todos array. 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 num1 equals one and const num5 equals 5. So now we're going to write our if statement. We're going to go if and we're going to write else just like that. And inside these brackets we're going to have some code that returns true or false, so let's do num1 is less than num5. 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 gonna run some code here, and we're gonna 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 1 is not greater than 100, 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. 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 todo matches idToDelete, so we're going to type if the todo.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 idToDelete. So if the id of the todo 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 todo 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 todo'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 todo 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 here, so now you can see that when we click delete, we're removing the todo that is associated with that delete button. Now let me add another todo 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 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 todo that we create. But here when we're removing the todo 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 todo, 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 todos it doesn't remove it, but when you click the delete button for the old todos, 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 webpage and try it out. I'm just going to add another todo 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 todos 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 mvc stands for model view controller. 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 todos array. So it might not look like much, but an array actually helps us save our data, and it offers some methods like todos.push and to use .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 todo and the code that deletes a todo, 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 addTodo function and you'll notice our code for creating a todo is here, so let's create a function in our model section that just handles creating a todo. So let's call it createTodo 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 dueDate. 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 createTodo, we can set the value of these variables by using this 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 todo, 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 a todo. So that, oh by the way we can remove this function, so the code for deleting a todo is here. So let's create a new function called removeTodo and let's move this logic, or let's move this code inside here. So all the code that deals with managing the data in this todos array goes inside this model section. So one thing that we need is the value of idToDelete, so let's pass that in as a parameter, just like we did here. So in our deleteTodo function we're, going to call removeTodo, and we're going to pass in the idToDelete. 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 todo so we click delete, you'll notice that it's removing that todo if we click another delete button, it's removing that todo 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 addTodo 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 deletedTodo 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 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 createTodo function, we would have to write out a bunch of code that manually creates our todo like we had before, so this code might not seem complicated, we just have a todos 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 matches our array, or the current state of our array, and then we have to figure out where we want to insert our new todo. 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, nv* 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 mvc 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 saveTodos. So how and where are we going to save our todos? Well the browser actually provides us some code to help us save and retrieve data, and this code is called localStorage. So the way that localStorage works is that it provides a setItem 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 localStorage. So in our saveTodos function, what we want to do is call localStorage.setItem 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 localStorage 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 todos. So now that we have this saveTodos function, when do we run this function? Well we should run this function whenever our todos change. Which is here, and here. So notice that here, we're pushing a new item onto the todos array, so it's changing here. And here we're reassigning it to a filtered version of the todos array so it's also changing here. So after this code runs, we're just going to call saveTodos to save our updated todo list in localStorage. So that takes care of the saving part of this feature. Now how do we retrieve the data from localStorage 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 localStorage to see if it already has a todos 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 todos 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 todos 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 todos 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 localStorage has a todos array. So how do we do that? Well we can do it in two steps. First, we can retrieve whatever's in localStorage and then we can check if it's an array. So how do we retrieve something from localStorage? 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 todos? Well now we're going to give the same key to retrieve that data. So we're going to say todos and this is going to get whatever is in local storage under the key todos, and let's save this oops so let's save this data in a variable. So the way that localStorage 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.isArray(savedTodos) 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 todos, so we're going to assign it to this variable. So all we have to do is assign todos and give it the value of our saved todos now. Let's go back into our webp age 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 todo, 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 todo 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 typeof addTodo2, 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 todo 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 6. So if we go back here, notice how we have a return string here. Instead of writing this, we can now 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 addTodo2 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.

Channel: SuperSimpleDev

Views: 35,541

Keywords: javascript tutorial, javascript tutorial for beginners, javascript tutorial beginners, programming tutorial, javascript course, javascript tutorial 2021, learn to code

Id: DqaTKBU9TZk

Length: 105min 10sec (6310 seconds)

Published: Wed Apr 28 2021