Javascript for Web Development | Sara Al-Arab | Skillshare

Javascript for Web Development

Sara Al-Arab, Computer Engineer

Javascript for Web Development

Sara Al-Arab, Computer Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
29 Lessons (5h 44m)
    • 1. Introduction

      1:34
    • 2. Install

      0:48
    • 3. Why JavaScript?

      3:48
    • 4. Event Driven-Programming

      5:45
    • 5. Alert

      3:27
    • 6. Variables Part 1

      7:19
    • 7. Variables Part 2

      4:21
    • 8. DOM Query Selector

      10:41
    • 9. Template Literals

      6:30
    • 10. Event Listners

      16:04
    • 11. Script Source

      4:54
    • 12. Forms

      12:44
    • 13. Changing CSS properties

      21:42
    • 14. JavaScript Console & Arrow Notation

      3:38
    • 15. Select Dropdown

      7:08
    • 16. Events

      25:54
    • 17. Intervals

      4:42
    • 18. Local Storage

      10:12
    • 19. APIs, JSON, and AJAX Part 1

      24:43
    • 20. APIs, JSON, and AJAX Part 2

      14:45
    • 21. User Interface Part 1

      19:52
    • 22. User Interface Part 2

      10:44
    • 23. Javascript History

      6:44
    • 24. Window

      23:51
    • 25. Animation Part 1

      17:44
    • 26. Animation Part 2

      19:08
    • 27. Guessing Number Part 1

      22:25
    • 28. Guessing Number Part 2

      29:25
    • 29. Project

      3:01
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

39

Students

--

Projects

About This Class

Hello and welcome to JavaScript for Web Development. In this course you'll learn all what you need to know in the Javascript Programming Language to build an interactive webpage. Throughout the course, we'll learn what is Event Driven-Programming, how to deal with Events through Event Listeners, & how to make use of Local Storage to store temporary data on our webpage. Moreover, we'll introduce the idea of AJAX or Asynchronous Javascript, the window, and some small shortcuts to use while programming. At the end of the course, we'll look at how to use animations with Javascript and we'll work on building our own application through writing JavaScript code. 

Meet Your Teacher

Teacher Profile Image

Sara Al-Arab

Computer Engineer

Teacher

Hello, I'm Sara. I'm a computer engineering student at LAU. I'm currently working on web develpment and programming and seek to share my information with as many students as possible!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello everyone. This is JavaScript for web development. My name is Sarah alarm, and to our scores will be learning all about JavaScript programming language. We learn what is event-driven programming and how to write functions throughout JavaScript programming language. We'll look into events and event listeners that will enable us to interact with the user. Moreover, we will go and see how we can manipulate elements of our page, of our HTML, elements of our CSS properties throughout JavaScript code. Moreover, We'll look into what is local storage and how we can store temporary files on our webpages through the JavaScript programming language. And moreover, we'll look, we'll have a good look about APIs and Jason, so we'll see where are those. We'll dive into also Asynchronous JavaScript, also known as hx. And most importantly, we'll see how we can use the user interface to interact with the user, also known as UI. And at the end of the course, we'll see animations and how to interact with the window of our page. And we'll finalize this course with a program that is going to interact with the user, which is a guessing game, which is built on your project. So I hope to see you in the next video. 2. Install: So really using Visual Studio Code throughout our course, motorized per Javascript codes. So if you don't have visuals, you code it just needed download it, gone to Google and type in download Visual Studio code. And then just click on the first link. So you download Visual Studio code according to which operating system you have. If you have Windows, just click on this. If you have just downloaded through this length. So this is Visual Studio Code that we'll be using it as I said, to write our JavaScript codes throughout the course. And in the next video, we will be seeing how to write those codes on Visual Studio Code. 3. Why JavaScript?: To get an understanding for it is that JavaScript is actually helpful. Let's go back and represent this diagram of what communication over the Internet will generally look like. Oftentimes will have a user, otherwise known as a client, using their computer on their web browser, whether that's Chrome or Safari, or some other web browser that sends an HTTP response, a web request to some sort of web server that's processes that request and then returns, returns some sort of response that comes back to the client. Thus, for all the code that we've written, the Python web application code running in a Django web application, for example, the one in my previous course has all been code that runs on some sort of server code that is listening for requests, doing some computation in order to process that request, and then generating some sort of response, usually in the form of an HTML template that we then sent back to the client. Well, JavaScript is going to enable us to do is to begin to write client-side code. Javascript is going to allow us to write code that actually runs inside of the user's web browser or the client. And this can be useful for a number of reasons. One, there's computation that we want to do, but we don't need to go out and reach out to a server in order to do so, we can do the competition potentially faster just by running the code exclusively on the fly. And in addition to that, we can begin to make our webpages a whole lot more interactive. Javascript is going to give us the ability to directly manipulate the DOM. We're again, the DOM is the Document Object Model. That tree-like hierarchy that represents the web page that the user happens to be looking at. So JavaScript will enable us to write tooth that directly manipulates the content on the webpage. And we'll see how that can be quite powerful very soon. So how do we use JavaScript inside of a web page in order to add some code at some programming logic to a webpage. Well, so far we've already seen HTML, then n, which we use to describe the structure of a webpage where an HTML page just describes the structure of our page in terms of nested tags. We had those hashtags at the top of the page that the biotechs that describe the structure of the page. And then we had additional tags that can be nested within those. And in order to add JavaScript to a webpage, it's simple to include some script tags that are often located in the HTML page itself. When you use these script tags, we're telling the browser that anything in between those script tags should be interpreted, in this case, as JavaScript code that the web browser is then going to execute. So our very first program, for example, might just look like a line of code inside of those script tags. You can see right here something like this, where alert, for example, is the name of a function, a function that's going to produce an alert. And then just as the function at Python, function in JavaScript, functions in JavaScript can take arguments. So between those parenthesis, we have an argument, something like a string Hello world, that tax that we would like to display to the user. And in the next video, we'll be seeing this script. Furthermore. 4. Event Driven-Programming: And so now we can begin to imagine that using this ability to programmatically splay others, well, we can add additional features to our applications as well. And one week area which JavaScript can be quite powerful is with event-driven programming. And what is event-driven programming is all about, is thinking about things that happened on the web in terms of events that happen. What are some examples of events? Events are things like the user clicks on a button or the user select something from a drop-down list, or the user scrolls through a list or submits a form. Anything the user does can generally be thought of as an event. And what we can do with JavaScript is add event listeners or event handlers, thinks that see what an event happens. Go ahead and run this particular block of code or this function for example. And using that, we can begin to allow our JavaScript code to respond to how the user is actually interacting with our webpage. To say, when the user clicks on a button, I would like to run this particular JavaScript function, for example. So let's go ahead and give that a try. I'll go ahead now. And instead of just saying alert, hello, let me put this alert inside of a function. And to create a function in JavaScript, you just use the keyword function followed by the name of the function. So let's go ahead and type in function. And let's call this function Hello. And followed by parenthesis. And then of course, this parenthesis accepts inputs that the function takes. However, this hello function is not going to take an input. So I'll just use an empty set of parentheses. And then inside of curly braces, I'll include any of the code that I want to run inside of this function. And so as I said, we want to include that alert function. So I'll include that alert inside of my function that I created. And so what I've done here is now create a function called hello. And inside of those curly braces, I've defined the body of the function. What code should run when I run the hello function? And what the hello function should do is it should display an alert that in this case says hello world. So now what I'd like to do is get this function to run when something happens on the page. For example, when a user clicks on a button. So to do that, the first thing I'll need to do is actually create about it. So let's say I create here a button that says, Click Me. Ok. Now, if I go to the peach and, and let's see, first of all, we have that click button right over here. And let's say you click it. You can see that nothing is happening. I am clicking on a click button, but nothing's changing because I haven't yet said what should happen when the user clicks on this button. And so one way to do that is by adding an attribute to our this HTML element, this button show element, which is called onclick. So we'll be adding an attribute which is called onclick. And what this is going to do, it's going to add an onclick handler to this button. It's going to say what should happen when the user clicks on this button. I'm going to set the onclick attribute equal to running the function hello. So here inside of my notations, edition marks the adding my function, which is right over here. And in order to run a function in JavaScript, just as you run a function with Python, you use the name of the function followed by a set of parenthesis to say go ahead and actually run this function using those parenthesis calls. Function. Another word for running the function. At the fact There's nothing in between those parenthesis means that we are not providing anything as input to the hello function. Though if the hello function that take inputs, we can certainly add that in between the parentheses. So now I've tied to pieces of this page together. I have a button that says click here. And I've added an onclick handler that says, when you click on the button, you should run the hello function. And then above, up above, I've defined that hello function. Say that. What should that function do? Well, when the function is called, we're going to display an alert and in that case says hello world. So now if we go ahead and save that, refresh our page. If we click on that, flip me whether we still see the same thing, at least initially, where it just says hello and about them that tells me to click on it. But now if I go ahead and click on the button, well, then I get an alert that says hello world. I can press OK. And this event handler is going to work. I click on the button again. And I'll get the other second time. Because every time I click on the button, it's going to call the hello function again. And when the hello function runs, it's going to display this particular element. 5. Alert: So let's go ahead and give this a try and see how we can actually use this code to write JavaScript that is going to run inside of the user's web browser. I'll go ahead and create a new file inside of Visual Studio Code. And let's call it hello.html. And let's go ahead and write the basics of my HTML5. And let's just go ahead and remove this for now. And let's go ahead and right inside of our body. But say an H heading one saying hello. Okay, so we've already seen that before where I have a head section that has a title and a body that maybe just says how as we see here. And so now what I'd like to do is add a little bit of JavaScript to this webpage. So in the head section of my web page, I'm going to go ahead and add a script tag. So below the title, I'm going to go ahead and add a script tag. And we're in between the script tags, I can write JavaScript code, code that's going to be written in JavaScript to run inside of a web browser when the user actually opens up this page. And for now, I'll just say alert, which is a function. And inside of alert, let's say hello world. Kay? That's sorry, column. So we have to add a semicolon whenever you write anything in JavaScript programming language similar to Java. And it turns out in JavaScript you can use either single quotation marks or double quotation marks in order to represent strings. We can generally use single quotation marks here just by convention. So here I'm running a function called alert that's going to display and other something like hello world to the user. And that's going to be inside of the script tags of this HTML page. So now if I want to go actually an open that page, I can open this page. So let's go ahead and run our peach. And now at the top of the page, what you'll notice is that I'll get a little bit of an alert, some interaction where it says, this page story says hello world gets me an option to like press on a button for example, like the OK button here. That will say alright, dismiss Tailored now. And this is our very first example of jazz JavaScript. We have a function called alert built into JavaScript for our web browser. And our web browser knows that when we call the alert function, the browser should display an alert message that looks a little something like that. And if I click on the OK button to dismiss the alert, then we go ahead and get back to the original page that I had from the beginning, which says hello. So this is our very first example, as I said, of how to write a script inside of an HTML page. 6. Variables Part 1: So far, through event-driven programming, we've seen several data types like things like strings. We've also seen other data types that we missing, sorry, other datatypes. Soon. We've seen functions, some functions that are built into JavaScript, like the alert function, and other functions that we can write for ourselves, like the hello function. But you also have the ability to include things like variables and said about programs. And before getting into variables, it's worth mentioning that there are other built-in functions in JavaScript. We have, sorry, not built-in functions events. So we have the onclick, we have on keydown, on keyup, et cetera. And we'll be seeing those later on. As I said. We also have variables inside of our program. So initially we have a JavaScript three variables. We have the var, which is used to divide a variable globally, for example, var, and we give it a name, let's say age equal to 20. We have let. And let is used to define a variable that is limited in scope to the current block, such as a function or a loop. And we'll see what we mean by that in a minute. So for example, that counter equal to one. And finally, we have the constant aggravated by C o NST. And it's used to define a value that will never change. So for example, constant pi is always 3.14. And so let's go ahead and see an example on this vitals. So we'll go ahead and create a new file. Let's call it counter dot HTML. Inside file. Let's just go ahead and copy that of hello.html. However, let's just clear the script section for now. And let's change the title here to counter. And let's go ahead and see that. And one last thing we'll do is really changing the name of the button from Click Me to count. So this is a button that's going to count. And I'd like to create a program that just counts for me from 0 to 1234 and so on and so forth. And now in order to do that, in order to have some way of counting repeatedly, 012345, I'm going to need to have some sort of variable inside of my program, something that's keeping track of data like the number that I currently have counted to. So in order to do that in JavaScript, I can say something like let tau equal to 0. This is the way in JavaScript that I define a new variable. I first say lots, and of course this is all inside of my script. So. Lots counter equals to 0, C, followed by a semicolon. Hi first. As I said, I first say that counter, meaning that lead will be, there will be a new variable called counter. And I'm going to initially set the value of the counter to 0. And now when I click on the button, instead of running the hello function, I'm going to go ahead and run the count function which we haven't created yet. And so what the count function is going to do is it's going to decrement, sorry, increment the value of counter. So let's go ahead and write this function. Let's call it counter. And all versus called counts. And now we open the parenthesis, sorry, the curly brackets. And as I said, We'd like to increment that value of the counter, which is initially 0. And other a number of ways that I can do that is by saying counter equals counter plus one semicolon. As to say go ahead and reset the value of the counter to whatever counter is plus one. And there are a couple of short-hand notations for this. Equivalently say, culture plus equals to one. As to say add one to the counter. Or in this case of adding one JavaScript, which is the counter plus plus. So, which just means take the value of counter and incremented at one to it. So I'll add one to the value of counter, and then I'll just display an alert that has wherever the current value of the counter happens to be. So here, the writing alert and inside it leads playing the counter value. And so if whatever I increment the value, It's displayed as an alert that shows me what's contained inside of the counter. And so let's go ahead and change hello to count in order to call that function whenever we click on that button, count, as he said, and save that. And how can our page. So here we can see that we have that button that says count. And if I click on that button, I can see that now I have an alert that says one. We increment the counter from 0 to one. The alert since now one and I can press OK. If I press on the account again, the account now says two. If I press OK and then Prescott again, i goes to three. And every time I click on Count is going to increment the value of the variable counter inside of my JavaScript webpage. And then it's going to display an alert that is going to contain the value of the variable. So using alerts, now, we've been able to manipulate inside of a function, manipulates the values of variables and then display alerts that show the contents of those variables. But ultimately, when users are interacting with the page, it's going to be fairly annoying if that only. The only way we have to interact with the user is via displaying these alerts. The equivalent of like printing something out, except instead of sorry, printing it to a terminal, we're printing it via and alert that appears on the screen. And so in the next video, we'll see another interesting and more powerful to, to use those for manipulate those web pages on the page itself and without going to others. 7. Variables Part 2: Now there are a couple of places where you might look at this. And notice that maybe this isn't as efficient as this code could potentially be. A recall that every time we run document dot query selector to say, go ahead and try to find a particular HTML element for me. It's going to look through the page trying to find the one element. And it turns out that right now we have three separate calls to querySelector, even though only two of them will ever run on any given instance of the function. But we call document dot query selector. Then recall it again inside of the if expression. We can probably improve the design of this page by factoring that out, but just looking for that reach one element once and then manipulating it and checking if. So, returning it using that element that we have found. And to do that, we can store an element inside of a variable. In the same way that a variable can store a number like counter or a string like hello world. It can also store other values like an HTML element that we get back from document dot query selector. So I could say something like heading equals to document, the choir selector H1 inside of parenthesis. So finding each one element, save it inside of a variable called heading. And now, rather than document.write electric H1 all the time, I can say if there is a heading whose inner HTML H1 is, hello, then go and set the headings inner HTML to and goodbye. So here, what we'll be doing is just replacing that with a P Sean and heavy, which is the name for this is that basics here. And let's go ahead and replace it here. And lastly, here. And so here, otherwise, set the headings inner HTML to hello. So I've improved the efficiency of the program, but also reduced the number of characters of code that I've had to write. My lines are now much shorter, a little bit easier to read. And this you could consider to be an improvement in design. It turns out that there's one other improvement we can make here too, that we can define a variable like let something equal to something else. But it turns out that JavaScript, as we said earlier, gives us a couple of ways to define a variable. And we've, we're going to be creating a variable whose value is never going to change. We've never going to reassign a variable named something else instead of lead, which is, sorry, here we forgot to write lead. So here let heading equals two. So instead of writing let heading, we can use something else which is called constant. And JavaScript will then enforce that this variable should not change. And if ever, I do try to change it, JavaScript will give me an error. The sense, sorry in this can't just be helpful to prevent against possible unintended behavior. That if you know, you know, you have a variable that is never going to change, it's often a good design to label it as a constant variable so that you and other people looking at your code know that this is never going to have a value that gets changed later on. So this then will behave the same way where it says Hello, but I can talk with it back and forth, changing it to Goodbye and then changing it back to Hello again. 8. DOM Query Selector: Now what would be more interesting and more powerful and much more useful in the context of a webpage is if we could programatically update the website, changed something about our page that the user is actually seeing, changing the contexts that happens to be on the page. And it turns out JavaScript is going to enable us to do that as well, sorry, because JavaScript as allows us to manipulate the DOM, the document object model that represents all the elements that happen to be on that page. So to do that, let's go ahead and return to hello.html. And so this, again was this webpage that just said hello and gave me a button where if I click on that button, which will display an alert that says hello world. Now what I'd like to do is instead of having the hello function display an alert, I'd like to have it manipulates something on the page. And what I might want to manipulate well, inside of the body of the page. I here have this heading. This that says hello. And for example, which is inside of a H one element. And what I might like to do is actually change that element. How can I do that? Well, it turns out that in JavaScript we have access to a function that's called document dot query selector. And what document dot choir selector is going to do is it's going to give us the ability to look through an HTML page and element using JavaScript code. And we can add to it the tag or an ID or a class. So if you go back to hello.html, What I want to do is to select an H1 element. And to do that, I say document dot query selector. And then as the argument, the input to document.write selector. I'll go ahead and see each one at one. So meaning, go through the page, find me an H1 element. And whenever I find this one element, I like to, let's say manipulated. So let's go ahead and just first of all, remove that alert and typing. So first of all, document dot query selector. And we want to select an H1 element. So each one. Of course, we'd like to manipulate the value of each one element. And in order to do that, we add an HTML. So whatever we write inside of that atrial element is inside of that inner HTML. So let's say we want to manipulate, as I said, the inner HTML of this one element. So do so. Whenever we click on that button. This Click me button. It's going to go to that hello function. And this hello function is going to search that document for an H1 element. And so let's say we have more multiple H1 elements. This document dot query selector is going to give us one each one element. So there are multiple each one elements. It's going to return the first Each one element at fines. But here we only have one H1 element. So it's okay. So as I said, I want to look through this document and try to find an H1 element. And one, I do, I'd like to manipulate it. And the way I'd like to manipulate it is, as I said, by saying dot inner HTML. So let's say I want to add a condition. So if this InnerHTML is equal to, let's say hello. So if that's the energy is equal to hello. What I'd like to do is change that inner HTML by saying document dot query selector, selecting that H1 element dot inner HTML. And I'd like to change it to be equal to good buoyancy. And let's go ahead and save that. And so as I said, if I were to change the HTML, I can do that by modifying the innerHTML property of the JavaScript column in order to update a property of anything in JavaScript, while generally, will generally use this dot notation, where dot accesses a property of some particular object. And so I have this element with each one. And saying dot. Inner HTML means that the element and sorry, means take the element and access its innerHTML property. So property of that object. And I would like to update its innerHTML to just in this case. And we the word goodbye followed by, let's say, an exclamation mark. And so you see that we've used and condition, you see to check that only if Shawn is hello will be changing it to advise you did was something else will not be changed. So now we go ahead and run our code. And you can see that we still see that button that says click me. But now I actually click on the button. You'll see that the hello changes to Goodbye. We've run JavaScript code that finds an H1 element on the page and checks if it's hello, and if it is, it's going to change it to something else other than it was originally. Now return, I click here. Click me, sorry, nothing changes because every time I click on this button is going to find same H1 element is going to check if it's equal to hello, which is not right now. So it's not going to change it anymore. It's not going to go to that if condition right here. So maybe what I'd like to really do is the ability to toggle back and forth, to toggle back and forth between hello and buy, rather than just change it from one thing to something else. Every time I click on the button, I'd like to alternate back and forth. And there are a number of ways you could imagine doing this. But one way is taking advantage of that if condition. So much in the same way that a language like Python has conditions, ifs and else, else, else-if, sorry, and also JavaScript has to. And so here the C, we've added an if condition. You can go ahead and add an else condition. That says if that choir selector, which is H one has an inner HTML which is not equal to hello, will be changing. That too. Be hello. So if it is Hello, Goodbye. Otherwise just change it to say hello. Let's change that, and let's just go and save that. And so as I said, what is this hello function's going to do? It's now a little bit more sophisticated. It now has a condition where if I say if the keyword followed by a parenthesis, the condition that I want to check for, the thing, I want to see if it's true or not. And if that condition, sorry, and what I'm checking to see if that query selector dot inner HTML is equal to hello. If it is do something and if it is not to something else. And this triple equal sign right here is JavaScript's way of checking for strict equality. Checking to make sure that the two values are equal and also that their types are the same thing. That if this is a string, this must also be a string. It turns out in JavaScript, there's also a weaker way to check for equality that just uses two equals signs. And that's going to check that values are the same, but it's going to allow for a bit of differences in time. Two things might have different types, but as long as they're basically the same value, that double equals sign might generally come to be true. Usually if you can, you'll want to use the triple equals sign the strict inequality, the strict equality to make sure that not only are the same, but the values are the C2 and the triple equals sign will check both of those things. So if I go ahead and find the H one element and its inner HTML is the word hello. Will then go ahead and find the H1 element and update its innerHTML, setting it equal to the by, for example. And let's go ahead and find the same, each one element, update its inner HTML, set it equal to hello. And again, just as in functions where we use the curly braces to enclose the body of the function, all the lines of the code that side of the function, JavaScript as the same thing to that inside of condition. When we want to express that this is inside of a body of a condition. I use curly braces to say this line of code and that line of code that's inside of the, of the if expression or that's inside of the else expression for example. So let's go ahead and try this now. So if I go ahead and run now and open my page, I see here the Click me. Let's go ahead and click it. And I can see that it's changed to Goodbye. And when I click me again, you can see that now the bar changes back to Hello. And every time I click on the button, it's going to alternate between hello and goodbye. Because we either get caught in the if expression or we get caught in the Else expression. 9. Template Literals: Moving on, we'll be seeing how we can write template, the tools in JavaScript. And you've seen a similar method in Python. And we'll see that through the previous example we've been talking about, which is regarding the counter. Right now. In the counter program, I count and and it displays an alert that says, let's say one. So here, if we click on Count, this page says one. They are counted and a displeased, another two again. So I can probably do a little bit better than that by instead of displaying an alert, I actually manipulate the DOM in some way that I would like to have this one element set to be 0 and which could be considered as an initial value. And now, when I increment the value of counter rather than display an alert that just tells me that the value of the counter is another. I'm going to instead say document.write query selector. So document dot query selector of this H one element. And of course between those dot inner HTML, set it to that value of counter that we've just incremented. So now if I go ahead and save it and refresh my page. So now the value of the counter is set to 0. If I take a count, we have one. If I click it again, 234, so on and so forth. Every time I clicked the button, it's going to increment the value of the Bible, as well as manipulate the DOM, actually making changes in order to produce the effect that I want to see on this actual page. And we can begin to add additional logic to this as well. Maybe I do occasionally want an alert, but I don't want an alert every single time. I could add a condition. I could say something like if I only want to display an alert every time account to a multiple of ten, like 1020304050, so on and so forth. I could add a condition that says if the counter is the counter, ten, so here, F three vertices, counter mode, which is music parenthesis, sorry, presented sign, count to ten. Then what are we doing here is, and here of course what ten has to be 0. So if the remainder is 0, which means that it's a multiple of ten, then. What I want to do is to display an alert that says, so here I want to display an alert that says something like the count is now. And then I'd use some template, that rule, which is the purpose of this video in order to type in the account that we have. Now, normally, if we're using Python, we just type in F, which stands for a formatted string, followed by the occupation marks. And then let's say the count is, sorry. The count is now, let's say is now. And then between the curly braces and through that variable which is counter, and then close the parenthesis. Now, that's if I'm using right. Now, it turns out JavaScript does the same thing just with slightly different syntax. It doesn't use the f. Instead of using the regular petition Marks or using the single or double quotation marks. Javascript uses these back ticks, which are usually located above the tab key on a standard USB keyboard. So it doesn't do enough. It uses these back to the set of strings. And one more thing in order to actually do the substitution for the counter. While Python uses double curly braces to say plug in the value of counter right here. Javascript does something similar. It also uses double curly braces, but the reads to be a dollar sign in front of it. The dollar sign and then a double curly braces, knees, go ahead and plug in the value of the variable here. So here the double, the dollar sign followed by the curly braces. So this then is a template literal where every time we get a multiple of ten, we're going to display an alert that says that the count is now, let's say 1020, whatever it is. And then this dollar sign curly braces means actually plug in whatever the value of the counter happens to be bacteria. So now if I go ahead and save that, and let's refresh our page. So it starting from 0. And now if I count 123456789, but one, I get ten. Then I get an alert that says that the count is now ten. And then I see the result update on pitch. And so that template literal can allow us to combine variables as strings in order to generate new strings that are able to present data inside of them as well. So now, what improvements can we begin to make Here? We see that in the next video. 10. Event Listners: Now really moving on to event listeners. So moving back to our cultural program. Here, we've had this page that has a counter's. Every time you clicked on the button count, it would count for us. And so what can, what changes can we make to this to improve upon the design of it while walking? Especially as our program gets a little bit more sophisticated, a little bit, a little bit more complicated, is that we often don't want to be intermingling our JavaScript code with the contents of our HTML. Down here we have this button on click count, this name of this function. And especially as our pitch starts to get more complicated, it's going to start to get a little bit more annoying if you're constantly having to routine a little bit of JavaScript code, like making a call to a function inside of our HTML. We'll see a little bit later, there are other paradigms that actually encourage this type of thing. But right now, it can start to get a little bit poorly designed. As we'd really like to separate all our JavaScript related code from all the HTML, that general structure of our page. And so there are ways we can begin to do that as well. I can add an event listener inside of JavaScript to that I can see something like R script, document dot where selector button. So query selector button. And that, I can say that onclick, onclick equals two. Now. So what I am now saying is documented quite selector button here. So it's fine for me, the button on the page. And it turns out there's only one button here. So it's fine though. If there were more, I might have to be a little bit more specific. But once I get that button, then I'm going to access it on click its onClick property and I'm going to set it equal to camp. And here we proceed by semicolon. And what is count? Count is the name of a function. Count is itself a function. And so what I'm saying here is I would like to set the value of the onClick property of the button equal to cap. That count is the function that should run when the button is clicked on. And notice that I'm not actually calling a function. It's not count them here on parenthesis, which would mean run the count function and then get its return value and use. As the value of onClick. No, I'm just setting onclick equal to literally the count function itself without calling the function. And what this is going to do is it's going to say when the button is clicked on, then and only then should you actually run this count function. And we're not going to run the count function onto the button actually gets clipped off, and so on. Javascript, functions can be treated as values of their own. Just as you can set a variable equal to a string. Just as you can set a variable equal to an integer, just as you can set a variable equal to lie, an HTML element like the result of document dot query selector. You can also set a variable equal to a function, something like camped at, pass it, pass that around as a value just as you would with any other value. And this is a paradigm we generally call functional programming, where we have functions as values of their own. Things that we can reassign, things that we can manipulate just as we could with any other value. So now I can try and run this program by saving you going and refreshing my page. So here I am. Refresh my page. And now if I press count, we can see that it's working. One more thing. We just let's remove that onclick here just to see if that is actually working. So instead of having two functions, you only need one. That's why we already wrote it in the first place. So now let's go ahead and save and refresh our page. And now let's retry and click on Count. And you can see that nothing seems to be happening. It's still 0. But I wanted to be counting and it doesn't seem to be working. So why not? Anytime you run into problems in JavaScript where you're not getting the behavior you want. Often it can be helpful to look at the JavaScript console, where the Java, JavaScript console is the equivalent of like the terminal window when you were running on, let's say a Django application in Python that will display an error message. The JavaScript console will display any of the JavaScript plugging information and error messages as well. In Chrome, I can get it. I can get to it if I first go ahead and go to Inspect and thus, and then just open up the console tab. Let's just remove that. And here is the console tab. Alright, we seem to have some sort of an error. It's an uncaught error. And we seem to have something that says that you cannot set property onclick of null encounter dot HTML, line 18, sorry, line 16. So that will generally tell you where the error is coming from. It's coming from counter that HTML online succeed. And the product seems to be that I'm trying to access the onClick property of null and null in JavaScript. And JavaScript, sorry, is JavaScript's way of expressing nothing, some object, object that doesn't exist. So somehow I'm trying to set the onClick property of No. Well, let's see what's going on in line 16. So here's 916 where I'm saying document.write selector button. I'll click equals to count. And now what seems to be the problem here? Well, the error message was that I was trying to modify the onClick property of naam. Well, here then is the ultimate properties. So why would this document course that quiet selector button turning on giving me an output of null. Well, it turns out that document dot query selector will return null if it's not able to find something. If I try to find a button and I'm not able to find that button. It's going to give me no. But it seems a bit strange because there's a button down here on line 21 that I'd like my JavaScript code to be able to find what it ruins querySelector and tries to find the button. As it turns out, this is a bit of a quirk of the way browsers going to work. But if the browser is running our code from top to bottom, just reading it from line one to line 23. Then it's going to go to line 16. And we're sorry to say yes to line 16 or I said document.write selector button, onclick equals count. It's going to try to find a button on line 16, but the button doesn't show up in my HTML page up till much further down the page. So at this point, when we get to this line of JavaScript, JavaScript is looking for the button, but the Tao, The body of the page, hasn't finished loading yet. The content of the dome has not yet loaded. As a result, we're not able to find this button. So how do we solve this problem? How do we get it to? So we actually were able to ask for the button and actually get the button. Well, it turns out there are a couple of strategies we could use. One would be take the script tag, which is right here. And instead of adding it up, we can just move it to the bottom section of the body. So that after we've already defined the button that says count, then we have a script tag and that says, All right, go ahead and now find the button and we'll be able to find it. It turns out there's another way and perhaps a more common way, which is instead at yet another event listener. So here is our first event listener. And we'll be adding another event listener to the button, but to the entire document. For document is a variable goes into this JavaScript that we have access to on the web page that just refers to the entire web document where I've documented. Choirs lecture already. To look through the whole web document, trying to find a button or try to find an each one tag, for example. But I can also add an event listener to the document itself. And in order to do that, we start by typing in document, then that add event listener. And when I call add event listener. And I can do this to any element, not that, not just a document. I could run this function on a button or energy as shown element or any other HTML element. Add event listener will generally take in two arguments, where the first is what event I'd like for this event I want to listen for. The event could be something like click. When I click on a document, it could do something or maybe something else like what I scroll trapeze for example. But with the event I'm going to listen for is a particularly special event. So it's not going to be flipped. It's going to be DOM content loaded. That dot, dot content loaded is an event that is going to be fired for triggered when the DOM, the document object model, the structure of the page is done loading where all the elements on the page are downloading, the dom content has been loaded. And then if I attach an event listener to it, I run whatever code I want to run that should only run after that Tom is fully loaded. After all of the content of the page has been loaded. And second argument to add event listener is what function should run once the event actually happens. When a don't count upload, it does happen. So I could pass in the name of a function that if I have a name of that function that I wanted to person. But alternately, alternatively, JavaScript allows me to just directly write a function here. And the argument two, addEventListener. So just type in function. And with parenthesis. To mean that the function doesn't take any input. So the parenthesis, the empty parentheses says, says that there's no input. And then in curly braces, I can include the body of the function right here as the second argument to add event listener. And this is a little bit tricky, tricky syntax to wrap your mind around. If you've never seen it before. But the big picture way to think of it is addEventListener takes two arguments. One is the event and the second is the function. So here, the first is the event dot content loaded. And the second argument is a function, and I will declare the function same as before, just using function. I haven't given the function name because strictly speaking, it doesn't need a name. I'm never going to refer to this function by name. So it's what we might call an anonymous function. A function that has no name, but I'm still passing it into the app event listener function as an argument because I want to run the code inside of the function was the DOM has been done already. And so inside of curly braces then is the content of that function and the content of what code should run when the dom is done loading. And then at the end, I again use just this end parenthesis right here. Where that n parentheses lined up with the, with these parenthesis right here. So this Sony parenthesis, parenthesis lines up with that. And Asana column two. Finish. So this is enclosing all of the arguments to add event listener. We're the first one is though DOM content loaded at the second one is the entire function that might span multiple lines. So you'd see syntax like this quite a bit in JavaScript. But now what I want to do is adding the events to the button. I can now go ahead and just replace and put it here. But now what I want to do is adding the event listener to the button. I can go ahead and just replace and put it here. And it turns out that if I wanted to, instead of saying that onclick equals count, you could have used the same syntax of add event listener. I could say add event listener, Click and then count to mean when I click on the click happened, happens. Go ahead and run the count function. But you can equivalently shorthand this and just say dot onclick in Boca. And that would work as well. So now what we're saying here is that we wait until the DOM has downloaded, wait until the content of the page is loaded, and then go ahead and run this function. And what the function is going to do is it's going to add the event handler to this button. And this will work because now we'd be able to find the pattern because now all the content of the dome has been loaded. So now if I go back and refresh cultural dot HTML, you'll notice that JavaScript error goes away. I don't seem to have that error anymore. Now, if I press on count, we're able to see that the count is incremented just as before as well. And so this is then an improvement upon what I had before, were now unable to separate out my JavaScript code from the rest of my code as well. 11. Script Source: As much in the case of CSS, where we were able to take CSS that was originally included in the head of our page and move it into a separate file. You can do the same thing with JavaScript to. And this can be helpful if you have multiple people working on different files and you want one person working on the HTML and someone else working on JavaScript. It can be helpful if you expect that one of these things is going to change more frequently than the others. So you might not need to load the other one as often. So there can be value in separating our HTML code from our JavaScript even more by moving our JavaScript into a separate file. Now when we work with CSS, we use to write this link right here with a relationship which is Stylesheet. And the reference is style is the name of that CSS file, which here is style.css. Now in the case of JavaScript, what we'll be doing in between script tags will be specifying the source as in JavaScript file that will be writing into. And that case is going to be controller.js. Now let's go ahead to our previous example and try to write what he wrote, that JavaScript code that you wrote into a separate file. So this is the counter dot HTML file that we've been working on, where we wrote some JavaScript code inside of script tags inside of our HTML page. Now what we want to do is to write that code in a separate JavaScript file. And so in order to do that, the first thing we need to do is to create a JavaScript file, and let's call it counter dot js. And now we go to counter the HTML and we take all the code that JavaScript code we wrote into between the script tags, and we go ahead and paste it in that count to the JS file. And so now we have that JavaScript file, sorry, called countered MGS, that just contains all of the JavaScript that I want to run on my counter dot HTML page. And now rather than include actual JavaScript in between those script tags, what I'll be doing is adding an attribute as source attribute to that script tag, specifying the name of the file that I'd like to relate to. And that case, it's that counter dot j as phi. So let's go ahead and save that. And let's run this code again and see if it actually works. So now if we try our program and click on count, you can see that are still able to count as high as I'd like. And I still get an alert every time the count, which is a multiple of ten. However, now my HTML as subtler. So we separated that JavaScript code and put it in a separate file. And you can see now that the HTML is just the body. It's just an each one and the button. And then all of the java script is located in a separate file that allows me to keep my HTML code and JavaScript code separate from each other. And that can be valuable for a couple of reasons. Among them, if I have common JavaScript code that's in use by multiple different HTML pages. Multiple HTML pages can include, can all include the same JavaScript source. Rather than needing to repeat myself. If you use the same JavaScript across multiple different pages, I can just use the same JavaScript across all of them. And that will be helpful to as you begin to take. And I look later at some JavaScript libraries, which are JavaScript written by other people. We can just improve other people's JavaScript on our webpages just by adding a script tag at the top of our page that specifies a particular source. You may already interacted with Bootstrap that has its own JavaScript tool. And you can include Bootstraps, JavaScript, just my script tag at the top of your HTML page in the head. In order to get, say, go ahead and include all of the JavaScript in our page as well. So that's it for this video. 12. Forms: So what else can we do now? Now that we have the ability to get elements of the DOM and actually manipulate the complex. Well, one thing we can do is begin to make our pages a little bit more interactive. Actually respond to what the users are doing on the page. Whether the user is typing something in or maybe filling out a form for example. So let's go ahead and try an example of that where the user might be filling out a form. And you would like for our pool to somehow respond. What is that? The type? I'll go ahead to, hello.html. And now inside of the body of the page, I've said here hello, at the top of the page using H1 tags. And now instead of a button, I'm going to have a phone. This HTML form will look like the HTML forms I've worked on before in my previous courses. So let's start first where the writing form tag. So let's just remove action for now. And then inside of that form, I'll first have an input field. So that's an input field which has a type of text. Let's give it another attribute which is going to be o to focus. Meaning that whenever the user enters that page, it's thought that page will automatically focus on that input field. So as maybe the user might need to start typing right away. So we put that attribute, I want to give it an input field of an idea. So let's give it an ID and an ID of name. And let's give it a placeholder and give it a name, but with capital N. So what have I done here? I've created an input field where the user can type in some texts, that placeholder, that thing that the user sees filled into the input field originally will just be capital N Name, telling them they should type in their name. Here. I've given this input field an idea, some unique identifier, such that I later on can reference and find this particular input field. And then I have input. Let's give an input of type submit to submit that form. So let's give it a type of submit. And and so now if I go and load the page, we have here at the top of the page, hello. And here, as you can see, I have a field where I can type in, let's say My name. A place holder, as you can see, which has the value that I wrote name with a capital N. And then there's a button for me to submit that form. And now what I'd like to do inside of my JavaScript is instead of, instead of this hello, that this hello function where I am going to do here, that's low function. So instead of that hello functional I going to do is I'm going to run some JavaScript when the dom is downloading. And so I'll use the same line from before. You're going to see it quite a bit, where we're going to say yes to ahead and remove that. So as we've seen in the previous video, we will start with document dot add EventListener. And that event listener is going to be DOM content loaded. So DOM content loaded. And as we've said before, this function means that go ahead and run this code whenever the DOM is loaded. And the code I'd like to run is to say, when I submit that form, I want something to happen. When I submit the form, maybe I want to display an alert that if I typed in, let's see, 0, it'll say hello Sarah. Or if I typed in tallow is going to say hello towel for example. So how might argue that? Well, how do I get the phone? That's the first question. Anytime you want to get an element, one particular element on an actual page, usually what's that? What we're going to do is first, of course, we need to add function that we'd like to do. So this is an anonymous function as we said before. And what I'd like to do is whenever I submit that form is I'd like to get that phone. And to do so, we type in document that as we've seen before, document.write, querySelector and element that it likes to select is that form. And there's only one form on the page, so I don't have to worry about ambiguity. Ambiguity. I'm just saying get me that form. So here I type in sorry, four. And then I can see that dot on submit. So when you submit that form, what code should you run? And if I had a name of a function, like let's say, let's say a function f. I could just say like run function f on the form is submitted. But alternatively, just as before, instead of providing a name of a function, I can also just provide the function itself. I can say something like function, which as you said, is an anonymous function. In between those curly braces, I can specify exactly what code should run when the form is submitted by providing this anonymous function, instead, using this anonymous function as the value of the onsubmit property of this form. And so now what I'd like to do, somehow get access to whatever the user typed into the input field, wherever the user's name happens to be. And so I could get the input field via document.write acquires selector inputs. So document. That wire is Lecture. And in between those parenthesis type and the name of that element, which is and that would work is time. But we want to start to be a little bit careful because on this page there are multiple different input elements. There's an input elements here for typing the name. And the second input element here for telling me you're giving me a button where I can submit this particular HTML4. And so what I probably want to do is to be a little bit more specific. And it turns out that inside of quires lecture, I can use all the standard ways in CSS that we could select a particular element. So in CSS, if you recall, we had the ability to run CSS and just say start all the swans. Or we can say start all the things with this particular ID or this particular class. And document.write selector works the same way that I can say document.write querySelector and pass an attack to say like get me an H1 element or get me the button or get me the phone. But if there were multiple H1 elements or multiple buttons or multiple forms, I can be more specific than that. For example, I element has an ID, in which case I can say document.write is lecture. And then in quotation marks, the hash mark, and then the name of the ID to say get me the element with a particular ID, again, using the exact same syntax that CSS uses, if I want to apply a particular set of styles to only one element that has only one ID. Likewise two, I can say document dot query selector, and then use dot followed by the name of a class. If there's a particular class of elements. And I want to just get one of those to say get me an element that has a particular class in order to manipulate it as well. So the same types of syntax that we could use in CSS for trying to reference and get a particular HTML element. We can do the same thing here with document.write lecture to go ahead and try and get a particular element based on its tagging, based on its ID, or based on its class. And so for that reason, inside of the HTML page for my input, which is right here, I gave my input an ID of name. I wanted some way to be able to uniquely references. And I can uniquely, uniquely reference it, not by input, by just by saying hash name. So this is the name of the ID of that. So just to reiterate, when I say hash sign name, I can say get me the element that has an ID of name, and that is the element that I would like to extract inside of my JavaScript code. Once I have that HTML element, what I want is like what the user actually typed into the input field. And it turns out that if you have an input field in HTML, and I can get access to what the user typed in by accessing its value. Property. Value is a property that refers to what is the user actually typing. So I can say here, dot value. So value. And I'll go ahead and just save it inside of a variable. So let's create a variable, let's call it name. And so in that way, I'm saving whatever the user typed in inside of that variable name. But if I'm not reassign name to something else inside of this function, I'm really going to get the name ones and I'm not going to change it inside of the function. So I can use a const, liable instead of lead. And that will be better. It would be a better designed, say I have a variable called name, which is equal to document dot coins, lecture, Get me the element whose ID is name and get access to its value. So here we'll just change it to constant. So now I can add an alert. So I can alert something like between backdrops, something like hello, followed by a dollar sign and curly braces and plug that variable. And let's say I add an exclamation mark and slows the Baptists. Now, if I go ahead and save and refresh my page. So if I type in, let's say Sarah and click on summer, we can see that the page is a another with hello Sarah. If I press on OK. And let's see change, namely to tunnel. So if I click on so you can see that again, I get an alert. Hello, calm. So here again, we can able to combine event listeners and functions and quarter's lectures to be able to both read information product page in order to say, get me this particular XML element, find me an HTML element and access what the user typed into it. The value, the property that gets me what the user typed into the input field. And we've been able to combine that with the event listeners and alerts are able to actually respond dynamically to when a user submits a form or when the entire content of the page is done, loading in order to produce some interesting effects as well. 13. Changing CSS properties: It turns out that we can do more than just changed like the HTML that's contained within an element. We can also change CSS as well, change this type properties of a particular element as well. So let's go ahead and see an example of that. So I'll go ahead and I'll Create File, New File. And I'll call it colors dot HTML. Inside of colors include the same standard HTML boilerplate code that we often start with a head section. Let's just remove this for now. We don't care about them. I'm a head section, as I said, let's give it a title, let's say colors and the body of our page. So I'm going to display a heading that just says hello. For example. Maybe I'll give it an attribute of ID. And lets say, call this idea hello to. So we'll go ahead and save that. And then I'll have, let's say three buttons. So let's go ahead and add these three buttons. So let's call the first red, second green, maybe through blue. And now if I go ahead and open this page, you can see that I have a big heading that says hello. And then I see three buttons, red, blue, and green. But of course right now these buttons don't do nothing. And thinks, sorry, how do I get the bones to do something? Well, that's where JavaScript is going to come in on this first go to the code, add in having a script tag in order to write the JavaScript code. And I only want to run this JavaScript when they adopt is downloading. So again, we'll use the same syntax as before. Document that and EventListener. And that event is going to be done. Content loaded. And come up as to say that only want to run this code, one is downloading. And then after we write this, we'll add a function that we run each time that page is done loading or that don't list on knowing. Of course it's between curly braces. And this. Here we write all the code that should run, wants the pages downloading. And what I'd really like to do is get at these three buttons and save when you click on each of them, knew something different, like change the color of a particular HTML element. And in order to do that, I need some way of uniquely are referencing these buttons. So to do that, I'm going to give them all IDs. This one will have, let's say, ID of bread. The second button will have an id of green, and the third button will obviously ID of blue. And so now just giving these buttons, you need names. I can reference them later in JavaScript. So what do I now include here inside of my JavaScript code? Well, let me see, inside of these curly braces, document dot. So we need to get an element. So document.write querySelector and which element do we want to get? So we want to get, let's see that red button. So let's go ahead. And of course, the tween conditions. Because this is an id name and followed by the name which is red. And when you clicked on so on, clip. Go ahead and run this function. So what should this function do? I want this function to take that element and change its color to red? I want to change the font color to red. And I'll leave a comment to myself. So let's go ahead and say change each one to read ten. So now what changed, as I said, the font color to red and I leave in JavaScript story, the way you can leave a comment is by writing these 22 slashes and the browser will ignore it, but it can be useful to you, the programmer, and someone who's reading your code to be able to see what is that you are describing here on the page. And now what I'd like to do is and document dot query selector. And I want to debt that each one element. I would like to modify it. So let's just call it by its ID, since he already even an ID. Let's go ahead and modify its style property. So inside of this style object, I can modify any of the CSS properties. One of them, for example, is something like color. So I can update the color of this property and set it to red. Sorry about that. So here dot color. And so I can update the color property of that each. Well, so here now I'm saying when you click on that red button, go ahead and run this function. What the function should do is find that hello element update its style. What part of the style update it's called? What should we update it to? We should update it to rent. And now I'm going to do the same thing for the other two burdens as well. And it's really similar code. So I'm just going to copy. And paste, sorry. Let's just add a comment here. Since the whole code of hear about is going to change each one to red. So now I'll be copying same code. But now in order to change it to, let's say green. And here to Lou. An order to do that will change the hash here to green, as in get the button with an ID of Brian. And here get the bottom of an id of blue. And here I want to change that color to green. And here I want to change that color of that insurance element to blue. Now, I'll be saving it. And let's go ahead and see our page. So let's go ahead and refresh. And now I click on red. And you can see that Hello changes to red. I click on green, and you can see that Hello teaches to green. And here it changes to blue. So depending on what, by the likelihood that triggers some event listener to then say, when the button is clicked, go ahead and run this function. What the function does is it grasses teach one element, the element whose ID is hello, modifies it style updated scholar property to be something like red or green or blue. And thus showing that we can modify style in addition to just modifying the content of the page itself. But it turns out that you could, as, as you look at me writing that code, something should obstruct you as probably not optimal design. That in general, anytime you find yourself writing Cinco de again and again and again, especially if you're copying and pasting. But that is generally a bad sign. Usually assign that there's something better. There's some better way to modify or try to implement the behavior that I'm trying to create. And it turns out that there is, and there are a number of fleas that you could do this. One way here is that I might like to constantly did these three events as merge into just one single function that's going to handle changing the color to whatever the button says, the color should be changed to. But one problem here is that if I attached the same event listener to all the three buttons, it's not going to be clear to me when I click on the woman. How does the body know what color should you change the texture? And so we can do some additional special attributes. You can add some additional special attributes to a particular HTML element that are called data attributes. Where a data attribute is my way of saying that I would like to associate some data with this particular HTML element. Where here I can say on instead of id, say data color is red and here the color is green, and here the data color is. Blue. Data attributes always start with data followed by a dash. And you can see, and then I can specify really any mean that I want for some information that I would like to store about the HTML element. And here, information I would like to store as I want to store the data about the color, you should change the text you when the button is clicked on. And so what we're doing, we're going to have, is the ability to do now is double. If it is seen that if I have access to this element list button, I can access its data color property to know whether we should change the color to red or blue or green by adding this data attributes is HTML elements. And so now what I want in some way of getting all these buttons, now, document.write Barcelona to Azure. Cool, just gets one element. It's just going to get for me as single element. And it's going to get the first one that it finds. If I want to get multiple elements, what I can now instead do is something like document dot query, selector, all quite select. All is going to return the same thing that choirs lecture does. But instead of just choirs lecture returning a single element that matches with what it looks for. Choirs lecture all. It's going to return to me an array of all the elements that matched my particular query. So if I wanted to select more than just phone, sorry, if I wanted to select not just the first person, I find. What all the balance that I find, I can see, say choirs lecture all four button. And so that will give me back a JavaScript array, the equivalent of a list that represent all these buttons. So Warren saying is, instead of writing course lecture, all and all for button. And we can actually test what this looks like by looking at things inside of JavaScript console. If I go ahead and click on, Inspect on, I go to the JavaScript console, which is right here. And we can say something like document dot, query, selector, parenthesis. Let's specify button. And click on that. And you can see that I have been returned with this button, this red button, and which is what I expected, choir selector just finds me one element and it's going to find me the very first element. And likewise, I can say, all right, instead of quires lecture, let's do queries lecture or so document. But why reads lecture or and in-between parentheses? Document, sorry, button. And close the parentheses. And you can see that we are returned with a node list. Which you can think of as kind of like an array or a list in Python. That's got three buttons and a button 012. And this, and just as with a list of Python, as you can index into things, arrays in JavaScript can be indexed as well. If I have something like constant names, sorry, cons names, and let's type in Hairy leaves. Sorry, sorry, forgot. So let's say I type in this array, which has Harry, Ron and Hermione inside of it. And let's go ahead and click that. Now, we can access these variables. Let's say I want to access the first. So I type in, I want to access the first element and I type, as you can see, that I will return with Harry, which is the first, let's say I want to find the length of this array. So just click on that link and I returned with three. So just some additional features that we have access to. If you happen to have an array of things, it turns out choirs lecture all returns to me a node list, which is kind of like an array. And that's going to be useful because when I say document dot corals lecture, all button, I'm saying get me all the buttons on the page. And now what I would like to do is effective, effectively loop over those buttons are right here. So I would like to loop over those burns inside of a list that comes back to me. I would like to add an event handler for each one for when sorry, the button is clicked on to say each of the burdens that come back, go ahead and see when you clicked on change the color of the H1 elements. And so there are a number of ways that you can do this. One way is to use a particular property called for each. So for each pair is a function that accepts as an argument, another function. And where the idea is going to be, I would like to run a function for each of the elements inside of an array or inside of a node list for example. So here I can see for each and the function is going to have a burden. So for each button, this function is now going to take something as input. It's going to take one of the elements in the list and an input, something like carbon. And now for each button, what I would like to do for that button. Well, when the button is clicked, so here, one that split. So putting dots on click, go ahead and run a function that's going to document dot query selectors. So here function, an anonymous function. So it's going to document. The query selector by element whose ID is going to be hello, which is the one. I'm going to change its style and specifically its color. So what do I want to change its color to? So I have access to this button right here. This argument to the function is whichever button I'm currently trying to add an event listener for. And in order to access its data properties, I can access a special property of axial element, which is called Dataset. So button dot data set. And then I can call something like Berlin dot data, data sensory dot color to get, to get the peer color attribute. So I write a lot of stuff going on here. Let's go ahead and try to read through this entire thing and just get a feel of what's happening. Because we have functions nested within other functions nested with other functions. Up at the very top, I've said add an event listener when the document is loaded, meaning all the content on the page is done loading, go ahead and run this function. This is the body of that function. So what do I want to do? What the page is done loading, I'm going to document dot query selector, all looking for all the buttons. And if I want to do, if there could be more models, I could have added a class to these parenths and just looked for this particular, sorry, looked for only this particular class. Course lecture all just returns all the elements that match of a particular inquiry. And then I'm saying for each of those buttons. So for each of those buttons, I'm going to run a function on each of those buttons. I'm basically saying if I have to rebalance that came back, let me run a function on the first one and then save function on the Second button, and then the same function on the third one. And what is that function? Well, it's this function right here that takes as an input the button. It's first going to pass in as an input the first button and then the second input. Sorry, and then the second, but then as a second input and so on. And what this function is going to do is that it adds an onclick handler to the bottom. It says, when the button is clicked, go ahead and run this other function. So this function now is the function that will run when the button is clicked on to say, when the button is clicked on, Get me the hello element. Change it's color to button that dataset, but color take, which is the one for the button obviously. And assess. So it's like taking them sort of this button and accessing its data properties. And specifically accuracy only the colored data property, which is in this case equal to red. And that is what we would like to set color equal to. So a little bit more complex than we've seen before, but now we've been able to reduce what was three different event handlers into just a single one. And now this is going to work the same way. Let's go ahead and check it. So if I click on rat, you can see that it's just red, green, and blue. So that's it for this view. 14. JavaScript Console & Arrow Notation: And so when in doubt about how things might be working inside of your HTML page. The JavaScript console can be a very powerful tool for that. So you can go into the JavaScript console as we've seen before, and actually manipulate things. You can run queries, you can run functions, and you can modify the values of variables. For instance, if you go back to, if we go back to counter dot HTML, where I had this counter that's counting 01234 and so on. I could say something. If we go to Inspect. I'd say something like here inside of my console, counter equal at c equals to 28. And now nothing appears to have changed on the page, but I didn't say update anything on a page. But now, next time I run count, it's going to start from 28 because I had updated the value inside of the JavaScript console, it's going to increment that value is splitted value inside of the each one element. So you can modify variables, you can run functions, you can run document dot choirs lecture to figure out what particular elements are going to come back all through the use of the JavaScript console, which can be a very, very powerful tool, especially as you begin working on trying to debug these programs and try to figure out what might be wrong with them. It turns out you, there are other changes that can make, that we can make in order to obtain optimum. So in order to optimize our function, our cosine a little bit more in order to make it a little bit more better. And one way is that in more recent versions of JavaScript, we've introduced a particular notation for functions called the arrow. The arrow notation for functions. And I'll just show it to you because it's come up. But oftentimes, instead of using the keyword function before introducing, you'll just have something like, for example here, instead of writing function, something like buttons. And then this arrow notation. And remove that. So, so here, after that rotation inside of these curly braces, we just tried in some code that just mean here is going to be a function that takes as an input a variable cold water, and then runs this particular block of code when the function is run. And likewise, if a function takes no input like dysfunction right here, the notation goes as follows. We can just remove, as I said, function will keep the parenthesis and this arrow notation. So everything inside of these curly braces is going to be the code that we run upon doing that function. And so this is often irritation that you'll see in JavaScript. So if you ever see it, know that this is really just a shorthand for creating a function. Wherever it is. To the left of the arrow, sign is the input of the function. And what is to the right of the function is what should actually run. When the function bar it gets executed. When the function is called upon. 15. Select Dropdown: In this part of the course, we'll be exploring select drop-downs and how we can use them inside of our JavaScript. So for example, if we look at products or HTML, which we've been working on, we look and see that we've got a heading which is right here, and those buttons to change the color from green to red to blue. We might instead, if you want the user to choose from one, from a number of options, decide upon the user interface choice of using a drop-down inside of a bunch of buttons, for example. And JavaScript supports that as well. And we'll use this as an opportunity to explore some of the other event handlers that exists within JavaScript. So for example, instead of having this all inside of buttons, I can make my life a little bit easier by making this a select drop-down where they'll select is going to have an option. So here, instead of having these burdens, have a select which has these several options. So these options, each one of them has a value, and that value is going to be the color. So let's say the first one is by default black. And then we have, let's just replicate that. Let's add sinkholes as above. So another option would have a value of wealth and other valuable, Green and other would have a value of two. And the value is what we will get in JavaScript. When we try to extract this value of a particular select drop-down, what's in-between the option tags themselves is what the user is going to see on page one when, sorry, they actually Bu. So we'll add here. And here will read as it holds the value right here, green, and lastly, blue. So now what the user sees is they see hello and a drop-down menu where they can choose from a list of colors rather than click volumes in order to do so. And let's go ahead and just see the so here is the page and you can see that we have a drop-down and here are the options that I have, black, red, green, and blue. So now of course, that dropdown won't do anything for a moment. But I can modify. I qualified to do so. So now, instead of selecting on from all the evidence that we have in California page will be just selecting that select that we have here. So let's just go ahead and remove all these. And here, instead of selecting all, will be just lifting one element, which is what? The select elements. Let's just go ahead and do that. So. Now, just as we've seen, like the onClick to say when you click on something, as we've seen in content uploaded as an event. There's another event called on onchange, which applies to things that select drop-downs. Where when something changes and deselect drop-down, when a user chooses something different, I can run some code, for example. So here on change, on me doing something so I can run a function that is, in this case, it's going to take, the document requires lecture prior to writing the function. So here we'll be taking document.write Why reflector? This element, this hello element. And we'll be changing its color. So first we access the styling and color. And I want to change it to this color, to something else. I want to change it to the value of this select dropping. But how do I get to access this particular select drop-down? Well, in JavaScript, we have access to a special value called this and this. So this, and this has a special meaning in JavaScript, meaning that varies based on context, but in the context of an event handler, a function that is called when a particular event happens. This is going to be a special keyword that always refers to the thing that received the event. So what received the event? It was the select problem. This is what received the event of being changed. And so this is going to be a special keyword that always refers to that. That always refers to the drop-down menu where I made a different selection, different selection, sorry. So if I wanted to get the value of that drop-down menu, what it is, what it is that the user actually selected. I can just say this dot value to mean get that drop-down menu and get that value, the thing that the user selected in that menu. So here this value. And now much more efficiently than before, I've been able to implement the same kind of idea. That says, let's just go ahead and run it. See. So here it is. And so by default, it's not now in black. But if I choose from the drop-down menu to change its color to something like a era. You can see that the color changes to red. If I instead chooses, say green, the color changes to green. Effort, let's see, go back to black and it goes back. I now have this ability to detect these other types of events and respond to them as well. And in the upcoming videos, we'll be discovering more and more events. 16. Events: There are many, many different events that exist in JavaScript. There's the onclick, which we've seen already. Onmouseover can detect like when you mouse over something, when you are hovering over a particular element. If you've ever seen websites that somehow respond when your mouse moves over something that can be how it's implemented. On keydown. On keyup can respond to keyboard events, something like when you press a key, keyboard, when you press down on the key, that's onkeydown. And when you lift your finger off the key, that's on keyup. And there are other events as well, many more events than are just listed here that you can listen for and respond to so that you can really interact with the user based on what it is that they're doing. So now, let's take a look at an example of how we can use some of these events to now begin to create a little bit of a more interesting application. We'll go ahead and build a to-do list application and using exclusively JavaScript. We've seen, if you've watched my course regarding HTML and CSS, I've done a similar application before, but this time, parser is the last time it involves communicating with the server. However, this time it's just going to use JavaScript. There will be no requests and response between the page and the server. So first thing, the first thing we need to do is we've created file, recall it on tasks dot HTML. And the first thing we need to do is create the head and the body. Let's give it a title of tasks. And inside of the body. And go ahead and have a each one heavy and type N side of it on tasks. And underneath it, I'll go ahead and have an unordered list of all my tasks. So this unordered list, and I'll give it an ID, let's say, of tasks may be in order to use it later on. And initially nothing is going to be in here. But what I have underneath the unordered list is a form, a form where I can submit a new task for example. So here we have a form. And inside of that form will have of course an inputs. So let's go ahead and type in that input. So that input would be of type, sorry, type text because I'm typing a new task. Let's give it a placeholder of, let's say, New Tasks. And. So that the user knows what he's talking insulin is to type in a new task. And I have an input field that soon now, sorry, I have an input field that the user can type in some new tax and we'll write some code in order to add it to our list of tasks. And now are also add an input field for with Measure whose type is of course, on submit an order to submit that form. So here, submit, so as I said, to submit that new tasks once they've query. So if I open my tasks to HTML, Here's what I'm seeing. A big hairy, let says desks. And there is technically an unordered list underneath it, but there is nothing in that unordered list yet, so it just shows up as empty. Then a text field where I can type in a task here. And then submit the submit button where I can submit my new task. So now I'd like some JavaScript such that when I submit this form, we actually do something. So I'll go ahead to my HTML page and I'll add a script inside of my head. Now, as usual, the first thing we need to do is go ahead and add an event listener. So which is DOM content loaded? So when the page is loaded, We'll go ahead and say do something. We can add that arrow notation we've talked about earlier to make things easier. And so now I want to write some code inside of here until that function that we've just created. So and I want to run that code one, the form is submitted so I could see something right, like sorry, document.write query selector that four. And once, once I have submitted so on. So so onsubmit be running a function and I could use again the sing keyword I've known Danny for to write a little bit faster to type. So just say, all right, here's a function I want to run when the form is submitted. What would I like to do? Well, I'd first like to figure out, Alright, what did the user actually typed in and what the user typed in? Well, that'll be document dot query selector. And then inside of that is going to be task. So that task, that ID, task value as the element is an element, sorry, with IV hashed hashtag. So it has that. That's the input field which has this. Sorry, we didn't add IDs that are added. So it is u. So I'm telling you to get that. Sorry, let's just add here. So I'm telling it to get me that element right here, which has the IEEE task, which happens to be the input field where the user actually typed in. And I can save that as like cons task. So sorry here, dot value. So we want the value of it as an what did the user actually typed in? And let's store it inside. Let's say a constant value called task you. And let's add some column. And so in that way I'm saving what the user actually typed in. If I'm curious as to what the user type, and I can actually print it out to the JavaScript console. And the way to do so is using a special function called console.log. So console dot log and task two. So that is equivalent to creating something out in Python. We're just shows up in pricing in the Python terminal. Here. This is going to show up in the JavaScript console. So another thing that is by default, forms, we'll try and submit when you press the Submit button. So whenever you press the Submit button, that formula, try to submit that form. Like take you to another page. We've seen. If you've watched my course jangle, you would have seen that before. But however, in that course I want to prevent that behavior to stop the form from submitting. So here, let's try the comment to start form from submitting. What we can do as actually return false. So that the end of my form, some sort of form submission. So as to say, don't actually submit that form. We're going to do everything on the client-side, everything just inside of the browser. So now if we go ahead and see this, just remove that because this is an ID. So just add the hash. So now if we go to the browser, so this one quite work yet, but it's still in progress. If I refresh the page and open up the JavaScript console. So I can see in order to see of course what's going on if I added say, a task off f2 and present submit, you can see that in the console that value is now logged in. It's the equivalent of a way of providing debugging information to myself to know, Alright, now I have access to this value foo. And it's also telling me what line of code locked pit. It was HTML tasks or e dot HTML line 11. As is, sorry, this is the line of code that locked f2. And so this can be useful when you're debugging a program. When you want to see what the variables are, you can just print them out using console.log to figure out what's going on in your program at any particular point in time. But I want, what I want to do is not console.log it. What I want you to really do is create a new element, that I want to create a new element. So I don't need that. And this new element is going to add it in my blood, in the body of that HTML. So how can I do that? Well, to create a new element for my document, I can run a function called document dot create element. So here, create element. And followed by what type of element do I want to create? Well, I have an unordered list, which is right here. And every item inside of an unordered list is a list item and alloy. So I'll go ahead and create an ele elements. Here. I'll be creating this type of element, Alice item, and I'll save it, let's say in a variable called hello two. So here, let's save it inside of that variable. So now I've created a new list item and this list items inner HTML, the external content inside of that list item. So here, collider innerHTML. Well, that's going to be the task that the user wrote. So this variable from up here is which, as I said, with whatever the user typed in is going to be the inner HTML of that list item. So I've now created a new list item and said what HTML should go inside of that list item? It should be wherever task the user typed in. And now I'm going to say document.write querySelector task. So here document.write, wiring selector tasks. So here hash tasks. So get me the element whose ID is tasks. And that's going to be the unordered list right here. And which, whose ID is tasks. And if I have an HTML element, I can add a new element inside of it. By c here dot a plant, which is the variable that we've created. And what that now is going to do is it's going to say, get me that unordered list whose ID is tasks. Get me the element whose ID is tasks via choirs lecture here and append, sorry. And once I have that element append to the end of what's inside of that element. This value. So, which happens to be, as I said, this newly created variable list. So I've been able to add a new HTML element. And this line of code is going to say added to the DOM, added to the unordered list that I'm here now constructing. So now I go ahead and save that and go ahead and run my program. So here I see tasks. Let's say I type in something like foo. I press a movement at, all, right? Food now shows up. I type in something like on. If I type in something like bar and I present submit. So now bar shows up. Now let's say I want to add buzz. I had to delete that and may type and pass. So you can see that now shows up. Now, one minor issue. The user interface is being annoying. N is that it seems that every time by submitting new task, this input field retains the value of what it used to be. And that's probably not what I want because I'd rather it just clear out I've already submitted that has no need for it to stay there, but that's easy to manipulate in JavaScript. If I want to clear this, this snippet filled out, the input field whose ID is task or I need to do is go ahead and type N, document that query selector. And then go ahead and grab that element. And then go ahead and change its value to be equal to empty. And so this is equal to nothing. Just to say, we route the value of what happens to be inside of the input field right now. And now, if I go ahead and refresh the page. So if I go ahead and refresh, and let's say Adam f2, we can see that now whenever I click on Submit, the input field clears out and now I can type in something else like bar. And as you can see, it's clear now each time I click on Submit. Now one thing that might be slightly annoying as if I'm not careful, if I press on submit, while it submits on, let's say an empty string. So I just get this anti bullet point that shows up here. A person submit and I just get all these empty points. It might be nice from the user, from a user experience perspective. If I were to not allow the user to do that, not allow them to submitted ask if they haven't actually typed something into the new task queue. And we can do that just by modifying properties of elements. It turns out that HTML elements have a property called disable that can be true or false, that allows us to disable something like a button. So if i want to disable the Submit button. One thing I might want to do first is give me submit button an IT. I'll give it an ID of submit. So here Friday, I'll give it an ID of summits. And so that in my JavaScript code icon reference this submit button. Okay? And now inside of the JavaScript code, when the dom content is loaded, by default, the submit button should be disabled. So here, by default, the Submit button must be disabled. Like when I first load the page, I don't want the Submit button to be enabled because I want the user to type in a task before I enable the submit button. So how do I do that? Well, I can go ahead and first document.write choirs lecture, and get me the element whose ID is summit. So here ID subnet. And we'll set its disabled property. So here, but disabled, we'll be setting it to true. I set the disabled value equal to true to this able to submit button. Now, if I go ahead to my page, I can type in a new task. But the submit button is disabled. It doesn't do anything. Obviously, I don't want to keep it that way. I'd like to I'd like it such that as I begin to type things and then they submit buttons, stops being disabled. Disabled gets set from true to false instead. And so what I really want to do is listen for me like pressing keys on the keyboard. And so the way I can do this is by adding yet another event listener. So here we'll add another event listener. And so the way to do that is by adding yet another event listener. So document dot query structure. So what do I want to add? So why do I want to add acquires lecture and what I want to add an event handler for. Well, I want to add an event handler for when I type something into this input field. And this input field has an ID of task, as you can see here. So it has an ID of task. So let me go ahead and get that input field, that element whose ID is task, and add an Aki up hamper. So funky up handler is the event when I lift my finger off of a key. So one Bess happens, go ahead and run this function. So let's go ahead and first call gets only that element, that task and tee up. I'm going to go ahead and let's say I have a function. So this event, listener dot donkey again is the event. When I lift my finger off of a key, go ahead and run this function. And what should that function to? Well, it's going to say document.write, choirs lecture. So document or Hawaii R3 lecture. Submit. So get me an ID and element of ID Summit. And what it's going to do is it's going to be disabling it. So here, dot disabled is going to be false. Then anytime I type a key and my finger comes off of the key, that means that on key up is the event that gets triggered, run this function. And what the function is going to do is the say, is that, sorry, stick that same Submit button and set it. It's disabled property equal to false. So now instead of being disabled, it will be in a, if I go back to the page and go here, right now by default the submit button is disabled, but, but as soon as I start typing, you can see that now the submit button is active and I can actually click on it. And alright, if I click, this isn't actually great because I clicked on it, but the summit bone is still enabled. So what I might like to do is after I've submitted the form, after I've added a new task, let's go back and disable a submit button. So after I've submitted a form through, we've added a new task to my list of tasks, which is right here. I'd like to sub, to disable that, sorry, to make that disabled property true. So go ahead and just copy it. And, and here. So the submit button goes back to being inactive as well. And so let's go ahead and see that. Let's refresh as soon as it's dry. And now you can see that it's this table. Again. However, it turns out that even now there's still a little bit of a bug. If I go back here and type in something where I could see boar, but backspace, I still can submit that form. The submit button is active. So I can still technically submitted task that has no content inside of it. And so I might like to have some way of preventing against that as well. And that's just from some additional logic. We now have access to JavaScript that has conditions, that has loops, that has functions. And so if I want to do something like conditionally check, I can say here if. And the condition is that if document dot query selector here, that query selector task. So wherever the user is typing and dot value, so the value that the user is writing is greater than 0, meaning that something is actually typed in that task field. Well then go ahead and satisfiable to false. So if this condition is true, then go ahead and, go ahead and make this property false. But otherwise, go ahead and set this equal to true. And let's just fixed. So it's not that value that's greater if it's gets length. And here as we serve, That's Ohms student. So I'll reset, we return it to become true. So now let's go ahead and refresh the page. Refresh. So now my default, it's the disabled property is true by typing something and now it's enabled. Delete lately it, and you can see that it goes back to being stable. So JavaScript has allowed us to really make our pages much more interactive and immediately interactive based on how the user is interacting with the page. As they begin to type things, as they begin to delete things. As the press bonds, we're able to have a page respond either by adding content to the DOM, by literally adding parts of the HTML page, changing the stars of things, changing particular properties of elements. And this is really where the power of JavaScript begins to come in. And sorry. So its becomes an allowing ourselves to do things like that. 17. Intervals: Now so far, we've only been able to have events happen when the user does something, when the user clicks on a button or when the user presses a key, for example. But turns out, JavaScript has other ways of aligning functions to run. In fact, on their own. We can set what are cooled intervals where a particular function runs every some number of milliseconds, for example. And so if we go back to the to this counterexample we've been working on. I have to be the one that presses the Account button that is going to increment the value of the counter every time. So if you go to the web browser, we can see that I have to click on it for a to increment each time. However, I could put that inside of an interval instead. So let me go back to counter the edge table and whose javascript is inside of counter dot js. And now what I'd like to say is I would like when the Dow is loaded. So here, when the DOM is loaded, let me set an interval. So here, set interval. And what would I, would I add to this sediment journal? So the first thing I need to do is specify for which variable I would like to set an interval. So I would like to sell it for this count function. So every time I wanted to go to that count function and free what interval? So let's say I wanted to go every 100 milliseconds. So what's going on here? Set interval is a function built into JavaScript. What I am seeing that I would like to create an interval where every so often go ahead and draw a particular function. And as I said, I would like to run the count function and we'll call that account. We're going to increment the value of count of counter. And I'll get rid of this alert nuggets for simplicity. So here, let's just get rid of this. All I want for a to-do is for the count function to update the H1 with a new value of the counter and go ahead and run that function every 100 milliseconds, also known as every 1 second. Go ahead and run that function. So now if I go ahead and save that and go to the browser. And just before we go here, since we are calling a function and a variable, we keep that function without the strings. So we got double quotations. So we call it as, it is, a function as it is. So now let's go ahead to the browser and refresh. And so you can see that now every 1 second, it's changing every second, updating one by one by one. I don't have to click on about him. Of course I could. An event handler would still work, but the interval is saying Now every 1 second, go ahead and run that can't function. That has this particular result. So if you ever seen a peach that space, the current time in seconds, it was like a countdown timer or it was displaying that current time seconds. It might be doing something like this, just having some sort of interval that every second it's going to count and increment in order to update the number to the one greater, one greater than one greater than that. Of course, if I close that page, let's say fresher and go back. And you can see that it returns back to 0 and the increments. And JavaScript in that way is not saving any state about my page. It's just every time we're running the page is going to go back to counter that JS, which is right here. And it's going and defining that variable counter, which you are setting to 0. So every time a load that page, it's going to set back to 0. And that might not be a great thing depending on the type of page you're trying to create. And so in the next video, we'll see how we could solve such problems. 18. Local Storage: In the previous video, we've seen that sometimes when we're running the page, that page might not see it. Let's say a variable that we're decrementing. So every time we refresh a page which starts from 0. And we said that this might not be great pending on a type of patriarch trying to create. So maybe we want the page that is somehow to be able to store information such that on subsequent visits, we were able to utilize the information that was already stored, some way of remembering information for later use. Little versions of JavaScript and more modern browsers now allow us to do something just like that called local storage. And what local storage is, it's a way for us to be able to store information inside of the user's web browser that a page can ask to store particular values inside the Web Store pathway, the web browser, and later on, on subsequent visits to that page, you can go back to say, let's extract those values that were previously stored inside of the local storage. Local storage is going to give us access to chew key functions that we're going to use and q, sorry to manipulate the slope is storage. The first one is that get item where we would like to get something out of local storage based on its key, some name that we have given to that value. And we can also have access to local storage, dot setItem, which goes ahead and adds a new value to local storage or replaces any existing value in local storage, setting this key equal to a particular value. So we can use local storage then to allow our webpages using JavaScript to be able to store information and retrieve information from the browser. And let's now try to use that in order to solve this problem of a counter that seems to always reset back to 0. So encountered or JS. Instead of setting counter equal to 0, which is the first thing we do. The first thing I want to know is, is there already a value for the counter in local storage? So I can ask this question like this. So if local storage dot, as we said, we have getItems and set items, so will you be using now get RNA? And this island happens to be a variable called counter. So we want to see if that counter Bible is in our local storage at anything. And this expression will happen if there is something inside of local storage for counter. But it turns out that if I want to do the inverse of that, say Not, I can just use the exclamation points, sorry, or mark here. Much like in C and JavaScript, exclamation point means just means not. So meaning if there's not something in local storage called Counter, well, then let's go ahead and just set the value in local storage. Local storage, so here. So go ahead and set, so set island here. And then I'll go ahead and just set the value in local storage. We create a variable called counter and we'll set it to 0. So that's the key and that it's faced its value. So we're setting it to 0. So what this is doing here, as I said, before, anything happens, shocking local storage to say that is there already a value for counter at if there is not already about four counter, we need to make sure there is something there inside of local storage for the county. So we are going to set the value of counter equal to 0. And so now what needs to change? I'll go ahead and get rid of that interval right here. But what should this count function right here actually do? Well, first let me get the value of the counter. Counter is going to be whatever local storage dot get item is. So here, culture is local storage dot get island. And that item has the name of cap. And then I'll be incrementing that new variable cultures to just say, let's count equal. And I'll be incrementing it. And then I'll go ahead and set that value companies each one element to that incremented value. And now what I'll be doing is the last step is also do local storage dot setItem of counter. Sorry, to what value, which is that? Circle that touches. So here what I'm saying is that when I click on the button, count function is going to run. We're first going to go in local storage, get the value of the key counter. Wherever the value of counter happens to be, save it inside of a variable called counter, that update or increment that variable. So it's equal to itself plus one. Update each one's inner HTML scene as before, just to update what we actually see on the page. But then go ahead and local storage dot set item and counter. The counter gets and set it to culture, which is that variable right here, which is incremented. So now let's go ahead and see what's going to happen. Let's go ahead and see that if I go ahead and open contrary HTML. So if I click on town, we're counting 12345, everything so far so good. Now, watch what happens if I refresh this page. I refresh the page. All right, that seems a little bit strange. It 0. Let me try counting and see what happens. Hyperscale. Alright, the count changes to seven. So it seems like it did remember that I count up to 60123456, but we refresh the page. It's still showed me 0. But then let me count up to, let's say 789101112. And let me go ahead and refresh. And it's back to 0, but I can't. Okay, I'm still at 13. So somehow I am so remembering, but the first time it's still giving me 0 every time. Why might that be? Well, if you look back at countered are external, you'll notice that reason is just inside the body of the page. The initial value of each one is is when the dom content is loaded, sorry, is 0. So what we would like to do is that when the dom content is loaded, go ahead and get that documented choir selector. So here, when the con DOM content loaded, go ahead and get document dot query selector, which is right here. And we'd like to get this one element. And then set its inner HTML equal to whatever local storage dot get item counter is. And that's, so every time I open a page, even before I click the button and even before the event listener is triggered, I'd like to see go ahead and replace this heady and update its inner HTML to the result of getting the counter out of the local storage, for example. So now if I refresh that page, you can see that it's still at 13. I can update and update. They click again on there fresh and it's still stay safe. And no matter what value I get to it, it's going to store that number inside of local storage such that refresh the page. That number is going to stay there. And we can actually see the value inside of local storage by, again, we will to Chrome's inspect. And I go to here to Application. And inside of application tab I owe to local storage. And you can see that I have a key and a value. So the key is counter and the value is 80. And you can go into local storage. You can manipulate this value. We can delete that if you want. But this just goes to show you that we have now stored this value inside of my browser, such that on subsequent visits, if this page gets loaded, again, we can access that value from inside of the application as well. And so now we've been able to see how our peaches are able to store data in order to just make the user experience a little bit better. If you want the user to be able to have information remembered from the last time they visited a particular page, which can sometimes actually be helpful. 19. APIs, JSON, and AJAX Part 1: Alright, so now we've seen a lot of features of JavaScript. We've seen a bunch of different ways of representing data. We store data in variables, and those variables have had types like me detours. Those variables have sometimes been streams, sometimes they've been HTML elements, sometimes they've been even areas or list of items, and sometimes they've been functions. We can set a variable equal to a function, for example. But perhaps one of the most useful data types inside of JavaScript is the JavaScript object. So I go into the JavaScript console just to demonstrate that. So here is the JavaScript console and what that JavaScript object, this is really just the equivalent of like a Python dictionary, some association of keys to values where you can look up something by a key or buy a property and see what its value happens to be. So for example, if I have a variable, let's say a person. And so I could set person equal to a JavaScript object whose, let's say his first name is Harry. And then we add a comma. And then again, using syntax very similar to that of what a dictionary syntax looks like inside of a Python as well. And now let's add the last name. So that's say lost is from styles. And then go ahead and close these curly braces. And now that I have this variable Person, which his person is first, Perry and last styles, I can access a particular property of that person in many ways. So here, let's say I want to access its firstname. I'll just go ahead and see person dot first. And I click on Enter. And you can see that personal first is Harry. I could equivalently use square bracket notation the way Python does. So. So I can do that. So here, person and then the brackets first. And if I click on Enter, you can see that it also gave me Harry. But this turns out to be quite powerful to be able to present data in this structure grey like this, where I have an association of keys or otherwise known as properties with particular values. And then I have the ability, given a JavaScript object to be able to access a particular value. And it turns out that one of the ways this is most useful is in the exchange of data, moving data from one service to another. And so here we are going to introduce what are known as APIs, otherwise known as application programming interfaces, which in the context of the web, you can think of as some well-designed structure, structured way for services on the internet to communicate with each other. If you want your application to be able to talk to some other servers, baby, you want your application to interact with Google Maps or to be able to interact with Amazon. Or some other weather service to get the nice weather. Then you might be able to access some API, some mechanism whereby you can communicate with another servers by say the request and receiving wag data in some sort of a very well structured format. And very often that well structured format happens to be a particular type of data known as JSON, which stands for JavaScript Object Notation, which is a way of transferring data in the form of JavaScript. Objects, is sort of objects that happen to have properties and values associated with them. And so what this JavaScript object mutation look like. Well, if we think back to the application that we've worked on in Django, these applications that are able to represent things like an airline and movement or planes between destinations. A JavaScript object representing a flight might look something like this. A JavaScript object that has properties for origin, something, destination something and duration, something. If you've watched my previous course regarding general, you might have seen this. But you might imagine that if we wanted our airline to be able to make its data available to other services so that other web applications or other programs programmatically access information about flights. We could have passed data in this format to those other applications so that they could then treat this as a JavaScript object and get access to that information about it. And the nice thing about this particular representation is that it's both human-readable and machine-readable. There are three as people can look at this end. And sorry, get an intuitive understanding for all of the Smiths. But also a computer known, I'm sorry, he knows how to access particular properties that appear before the column and get access to what those values are. So here, for example, we have a destination before the column and which is, let's say a key. And this is its value, which is after a column. So Java Script Object Notation, otherwise knowns, known as JSON, offers a very convenient representation. And this isn't exactly what JavaScript objects, indexes. And JavaScript objects. You don't strictly need the quotation marks around the keys. For example, in here, origins THE, You don't need these quotation marks. You could just say origin, color. And then, then in New York. And the same goes for this nation and duration. So JavaScript object notation uses slightly different syntax, but ultimately very reminiscent of what we've seen in JavaScript objects. And JavaScript knows how to take data in this form and turn it into something like a Java object. And it turns out that there are ways of doing this and parsing as well. Other programming languages had ability to interpret JSon data in order to use it in some meaningful way. And another advantage of JSON representation is. That is a very conductive tool to representing structures of things. So these values don't just need to be strings or numbers. They could be lists or arrays that happened to have a sequence of possible values. Or they could even be other JavaScript objects that if we wanted to represent not just the city name, but to resent the Sydney and the airport code, for example, as we saw that we wanted to do before in the previous course. So here's an example of that. So here for example, I could say instead of having origin equal to string-like New York, have origin B equal to yet another Java object that contains both the city and the code. So we're the city here, for example, is New York and the code is the name of the airport code. So here, city is the name of the airport. City, sorry, the city where the airport is. An important thing is as long as i and the person communicating and communicating will agree upon this representation every upon what the names of these keys are and what the structure of this JSON payload, this JSON object happens to be. Then the person on the receiving end can take this data and we're, and write a program that is able to interpret and use that data in some meaningful. And so we'll see an example of this now of using JavaScript to be able to communicate with yet another online service. In particular, for axes, by accessing information about currency exchange rates, currency exchange rates are always changing. We want access to the latest currency exchange rate data. And if there is an online service and EPI that provides access to that data in JSON form in a format like this is that that is a machine-readable. Then we can use that data to write a currency exchange application that uses real-time data in order to make those conversions. And what might that data look like? Well, the data could look something like this. That we make a request for accessing what are the exchange rates for converting from US dollars, otherwise known as USD. And we get back a JSON object that looks like this, that has a bass key of USD. And then it has arranged ski that has a whole bunch of rates within it. So conversion to Euros and Japan's yen, Great Britain pounds, as well as Australian Dollars. And all of these various different currency exchange rates for all of these different currencies, for example. So, and this doesn't have to be the way that this structured, but it happens to be a conveniently. And so as long as the person providing this data to me and I both know what the structure is. We can begin to write programs that are able to use that data. And so will now see our example of an API, which is so it's api dot exchange rates. And then api dot slash latest. And we'll give it a base of USD. So you want. The thing we want the days too small to convert to USD. So now if I click on Enter, we get this. Now it's a little bit messy looking, not nearly as clean as we saw before, but it's the same exact thing. Just without the white space, we have a Jocelyn JavaScript object that has a reach K. That tells me, all right, here is the exchange rate between US dollar and Canadian dollars, as well as the euro and the pound and other countries, sorry, currencies that exists as well. And down below, we have the base, which is USD, and which we are converting from. So all of this data can come back to me if I wanted to make an HTTP request. If I make a web request to this particular URL. So I can get access to all of this currency exchange rate information that I can then use inside of my application. So how can I do this? How can I begin to use this information inside of an application? Let's now go ahead and create a new page. So now I'll be creating that file. Let's call it currency dot HTML. And lets the title and the body. So let's give it a title of exchange. Our currency doesn't matter. Currency exchange. So Currency X change. And let's keep the body does not include anything in the body right now, what I really care about is the JavaScript. That's going to mean a web request in order to get access to additional information. So here let's just add a script to put some additional JavaScript code. And so, so far in JavaScript on our JavaScript code has excluded exclusively been running code that exists only on our computer that's running inside the web browser and all happening inside the web browser itself. We're not communicating with some external server. What we'll take a look at now is something known as ajax, which is about Asynchronous JavaScript. Where the idea is that even after the page has loaded, using JavaScript to make additional web requests, to ask for additional information from our web, our own web servers, or from third party web servers if you want additional information on our page. And what we want in this case is for our page to make an asynchronous request, a request for additional leader about the current currency exchange rates for example. So how am I going to do that? Well, I want to do this after the DOM content is loaded. So let's go ahead and add that to our door script. So document dot add event listener, which is DOM, content loaded. And one. Page is actually loaded. Then go ahead and do some function. And let's add a semicolon here. And so what we're going to do is take advantage of a function built into more recent versions of JavaScript and supported by most major browsers now. And it's a function called fetch. And what fetch is going to do is it's going to make a web request. It's going to query some website. It could be our own, it could be someone else's. It's going to get back some HTTP response from that page and going to fetch here. So we forgot to add that. We're going to fetch that URL that we wrote into our page. So here, that's the URL that we visited. And the reason I happen to know how this API works is because I've read that API documentation that describes how the URL parameters work and what the structure of the data that I get back is. And so now here I'm going to go, say go ahead and fetched from this URL, make an HTTP request, Sorry, asking for additional information from this URL and get back what the results are going to be. And what fetches gives us. It gives us back us to us. Something in JavaScript known as a promise. And a promise is going to be a way of representing the idea that something is going to come back, but it may not come back immediately. We're not going to go into the details of exactly how those promises were. But it turns out that there's a particular syntax for dealing with them. Which is that I can say after I fetch, I can add a line called. So after I fetch, I can add a line called. Then that says what should I do when the promise comes back? Once I get back something like a response. And so when I get back that response, what I want to do is convert that response that I got small. So I want to convert that response into JSON treated as adjacent data, had java script object as something that I can then manipulate. And so what I can do is just use this as a function to go ahead and return a JSON. Json, sorry. And so here we go ahead and say response.data Jason. And of course return. So here it's going to return for us response that Jason and show what this is saying is go ahead and get me the latest exchange rates. And then after that's done, this is an asynchronous process. It might take some time, but once I get back on those results than this function. Run this function, take the response and get that JSon version of that response. Convert that response to just the raw JSON data such that I can use that data to then access the currency exchange rates. And it turns out that when the arrow functions, if you ever have a very simple function that allows that all it do as take something and return something else. I can simply simplify, simply simplify this function even further. And I can omit the curly braces. So here I just can remove this and just these two and keep it as is. And this is just a shorthand way of seeing a function that takes as input the response and returns as output a response dot JSON. So here I'm saying go ahead and fetch me the latest exchange rates from this particular API, then convert the response to JSON data. And then once you have the data, here's what I want to do. So here dot then when you have the data. For now let's say I want to just go ahead and console dot log. So let's go ahead and say that we want to console.log, sorry, console. Log that. And that is just to print out to the terminal. So we're not going to do anything else yet. All I'm doing is just saying, get me the exchange rates, convert the exchange rates data into JSON and then get them. Let's go ahead and print out that data. So let's just go ahead and fix that. So dot JSON. Lets see that and see our page. So we can see that the page is blank. But if we go ahead and look at the JavaScript Console and go to the console, we can see that now we have an object and clicked here on the triangle. We can see that, all right, inside of this object is all this data about exchange rates for a whole bunch of different exchange rates for converting from US dollars. So you can see here, sorry, the rates. So we have the US dollars, which is one because it is the basis USE. So if you convert from USC GSD, its remains one. And here are other rates as well. So now that I've got this data, let's actually try and use this inside of the program. Maybe let's say I want to convert between US dollar and the euro to figure out what the conversion rate is between dollar and Euro. A JavaScript object where we have a key called grids and inside of rates is the object. And inside of that object, I can access the Euro. For EUR property to get exchanged rate of one US dollar is equal to some number of euros, for example. So it's inside of the risky and then inside of the Europeans. And so that's how I know what to get access to inside of my data. So what I really want to do is access. Here. Instead of that, I really want to access data dot grids. That Euro that says get me all the data that came back. Access to rates key and then access the European. And we'll go ahead and save that. And let's say a constant called rate equal. And now I'm just document dot query. So here I'm just going to end document dot query selector, body dot inner HTML. And we'll just go ahead and make that equal to the rate. So I'll just take the grid and put it inside of the body. So now for you, go ahead and save that. And let's refresh our page. You can see now that I see that there's a value 0.8145, which means that right now, one US dollar happens to be equal to about €0.81, for instance. So that's useful. I can make this a little bit more human friendly by putting that inside of a template string. So I can say here, so one USD dollar b is equal to malice. Go ahead. Sorry. Closed-up back ticks is equal to about Belt much Euro. Okay? So let's just look at others when you st is equal to that value. And let's go ahead and save that and see what that looks like now. So you can see that now one USC is equal to that much Euro. And even this is a little bit annoying. I probably don't care about it to have this many decimals, which are after 0.81. So I can only, let's say care about three decimal places. For example, it turns out that JavaScript has functions I can use on numbers like here. When we do get three, let's just add a function from to. Take only three decimals. And that is to fixed and add 32 just as phi that you only need the first three decimals, which is the argument. Okay, so now if I go ahead and save that and refresh my page. So now if I go ahead and refresh, you can see that now it's 0.85. And the interesting thing about what's happening here is this. This is happening as a result of an asynchronous result. I am asking for the latest exchange rates. And when I get back the exchange rate rates and data, javascript is plugging that information into the body of the page. I'm now communicating with an API and getting back APIs data in JSON format and then using that data to update the contents of the HTML page. So of course, in practice, if I really want a currency exchange page, I probably just don't just want to display the exchange rate between US dollars and euros. I probably want to let the user pick what the currencies they, they would like to exchange between. And so we'll be doing that in the next video. 20. APIs, JSON, and AJAX Part 2: So in this port will let the user decide for himself which currency would you like to see its currency exchange for? So first thing we need to do, rather than having an antibody, we add form. And inside of that form, we'll just have an input which has, which is of type text of course, has the ID. Let's give it an ID of currency, a placeholder currency with capital C. Now let's go ahead and add another input, which is the Submit button. So here we'll add the submit button and let's give it a value of converge. So whenever I click on Convert, get particular currency that I want to convert to. And then I'm someplace to put my results, show a go ahead and additive and give it an ID of, let's see, results. So ID that's given. So now rather than such this URL right away, here's what I need to do. I need to do something only when the form is submitted. So I can get the form by saying, as we've seen before. So here, document dot query selector and the name of the name of the form. So element we have only one form. And then on submit. So on summit. What I'm going to do is go ahead and run the function equals two. This is an anonymous function. Now, what? Of course we need to return false statement because we don't want to submit that form to another page. So here are the explained that before. So I just want to run everything locally on the same page. But now inside the for once I've submitted that phone, I'm going to go and fetch new data. So I'm going to fetch data from the exchange rates are converted to JSON, same as before. Then go ahead and get access to that data right now. So first of all, need to do is just remove that and put it inside the onsubmit. So as I said, when I click on Submit, we'll be touching those steel. But now what I want to do is I want to figure out what's read, what the user actually typed into the input field. And that's going to be the currency that I care about getting access to. So I create a variable here. So one another. I reached the data part where I'm going to do is I'm going to say, I want to get. So this is the variable I've created. And now this variable is going to be equal to document dot y. Vector is going to get what the user typed in. So we gave that input a type of currency, sorry, an ID of currencies, so you call it by its ID. And now I want to get this value. Here. We got its value. So now this is the currency that the user wanted me to get access to. I can then say here, reads data dot, dot, sorry, Without dot, then currency. So if I use square brackets, arms allows me to use a variable, something like the currency variables, which are defined up here in line 18. So we don't add dot currency that would literally tried to access a property of reads tell Xcode karate. So I would like to access the particular courtesy inside of that treats. And so now I can ask a possible question. There are two possibilities here. Either the currency, the user typed in this palette, currency or is not. But it turns out that if you try a property of an object that doesn't exist, what you get back is a particular JavaScript variable called undefined, meaning that no value here. So for example, here, a flush, right? The variable person equals to, sorry. So that person equals to that. And click on enter. And let's see, we try to access Person.new first. So Christian dot first. You can see the cricket Harry, however, receiving access something that doesn't exist in C. Second. And click on that, you can see that we are returned with undefined, meaning that there is no value there. It's slightly different from NOW, which also has a similar meaning. They are used in slightly different contexts. So here what I can see, so I can say if after we get that rate, if that tree, so afraid, is not undefined, so it is. So if it is actually defined, then go ahead and get that currency. So go ahead and update on not that body. Well, we'll update the results. So we give that result that we created here in order to visualize the result. So just say r is equal to this rate, but not euro will add on the currency that user actually tighten. So much is that variable with creativity, currency flows. So just let the user know that the currency they tried to provide is here. And so else. If it is actually not defined, and then we will get, we will, sorry, at, inside of that result. And as such thing, invalid currency. So that only means that the user venture and invalid place. So now if we go ahead and open a channel, open. So here you can see the form where I can type in a currency. I can type in something like Euro. And then go ahead and press on convert. And you see that nothing changed. Let's go ahead and see. So here, that's the problem. So when we write on dot on submit, we don't add practices. So let's go ahead and now check and refresh our page. Now let's go ahead and click on Euro. And you can see that, alright, when you st is equal to €0.815, I type in something like, let's say pound. And you can see that this is an invalid currency. So it works. Let's say Japanese currency convert. Sorry, it's so now click on Convert and you can see that when you st is equal to 3.86 Japanese Yen. And all of this is happening. Every time I submit the form, it's making yet another request. So it exchange rates happened to change in between when I submit that form. The next time I submit that form, I will be getting the latest exchange rate according to that exchange rates API. And the results are going to come back here. And of course, if I type a currency that doesn't exist as your scene, it could give me an invalid currency. So it's going to report back to me that I wasn't even, let's say too far the currency. And so it tells me that I need to target something about and so I can type in solving valid. Maybe I just tried to us SDI itself, so you click on enter. And that is exactly what we expect. Now, there are a couple of the optimizations and improvement step we can make you. What is that? I can search for euros right now with aeronautic capitals. So small euro. And so that would give me an invalid parts. And the reason why is because if you look at the data that comes back from the API, you'll notice that all the currencies or in capital letters, they're all capital letters. Which means that when the key is that I'm allowed to access or in factors that have capital letters. And then because there are only, they are the only keys that this API makes available to me. So I want you to convert between USD and lowercase euros. Where I might want to do is first take left currency, which is right here. And then after that, I could just convert it to two uppercase C, but C. Now, if I go back here and refresh and type in small euro and convert, you can see that I'm still able to get the correct version. The other thing that we won't notice, notice the difference here is that right now, I'm assuming that all of this is going to go successful. You're going to successfully be able to make a web request with six-foot successfully, convert their response back to Jason. But you never know. And I could go down API could change something, go on perspective. And so anytime you're dealing with these types of promises, where you fetch something, it's a better idea of that. And you add one last piece, which is a cache. I catch keys. So here, after we fetch, we could just add a catch. So we touched the Earth. And if we do caches, so here we're going to go ahead and let's see. I want to just few that error. So I can see something like Console lo, log, sorry. And then error. And then maybe from the error that we got. And say that. That's really just saying that if anything goes wrong with the fetching and trying to process the response, that's going to catch the error. And then it will just like print out the console. That's something onto the console that something went wrong, some error message happen. And so that can be helpful and nice to just have to make sure that when things crash, the crash in a predictable way that you're able to see exactly what the error is just looking at the Java script console. And so now we have a fully working webpage that's able to communicate with an external API that is able to ask for information from another servers on the Internet, used those results and put them back. Peach really just going to show the power that we get bowtie advantage or JavaScript language. We have the ability now not only use JavaScript to be able to run code on the client where we weren't able to before. Where right before we only had perfect code that was running on our server. But using JavaScript, that really powerful thing is now the agouti to manipulate the DOM. So the LTTE JavaScript used page and change the contents of a page by attaining, updating things, by reading What happens to be on a page, whether it's inside of a particular element or what our users happy to type in. And using that in conjunction with event handlers way The thing that always that can listen for when the user clicks on something, or when the user strolls through something, or when the user types in a queue to be able to respond and therefore make specious board the more active. So that's it for that period. 21. User Interface Part 1: Javascript enabled us to display alerts, to be able to manipulate the DOM structure of the webpage in order to add content or see what content was already there. And it also let us respond to user events. When the user clicks on a budget. For submitted a form, type something into an input field. We could have JavaScript functions run that responded to those events in order to make our webpages more interact. Now, we're going to continue that conversation. In particular, take a look at user interface design. So they had some common paradigms in terms of user interfaces and how we can leverage JavaScript to be able to achieve those goals, to create an, to create interactive user interfaces that will be very valuable when users are interacting with our applications. So one of the more common paradigms, especially nowadays in Web Programming, is the idea of single page applications. Thus far, if we wanted to create a web application that has multiple different pitches, will generally done that BMI multiple different routes. And if you watched my Django course, we done that via different routes on Django web applications, for example, where you go to slash something to get one peak at slash something else to get, and in order to get another page. But commonly using JavaScript, we use the ability to create single-page applications where the entire webpage is really just a single, a single page. So we're using JavaScript to manipulate DOM to replace portions of the page with things we want to place. And this has a number of advantages. One of them being that we only need to make modifications to the part of the page that is actually changing. If for example, we have on different pages, but the general layout and structure of the page is pretty similar. When you switch between pages rather than load an entire new page, you can just load the page. So it's part of the page that is changing. And this is especially helpful for applications that are changing quite frequently. So let's take a look now at how we could implement, for example, a very single page application. So let's imagine, for example, that we want a single-page application that just displays three different pages, but all included in the same page. I'll go ahead and create a new file. And I'll call this new file single page HTML. And inside of which would include our usual HTML tags. So we have the head and the body is single, peach. And now what I'm going to include inside of the body of my page as three different sections of the page to represent three different pages that I might want to display to the user. So I'll have a div. Let's say whose ID is, let's give it an ID. Let's say page one. So ID equals to page one. I'll go ahead and. Copy that and just duplicated. So we'd have three pages, page one, page 23. And so now let's give each one of these, say heading. In each one heading saying this is, let's say page one. And here we'll be adding another visual heading. This is page two. And finally, and sorry, let's just keep them synchronized. Let's finish one heading to that. See this as page three. Let's go ahead and save that. And now, if I were to open up on this page, what we'd see is that we see all the three pages at same time. Now that's probably not what we want. What we really want is by default to hide these pages until we want to view the pages one at a time, for example. So one thing I could do is use CSS to be able to toggle whether or not something is visible, adding some style to tags. Style tag, sorry to my pitch to say that by default, I want It's for all my divs. So I want all my lips to have a property that display property set to none as they're not visible. So here, display and set it to none. There are displayed on the screen. Now, if I go ahead and refresh my page, let's go ahead and save that first. So here if I refresh, you can see that all the three headings that I had are now invisible. So we can't see them. But what I really like is for some buttons now to allow me to toggle between these three pages. So I'll give myself three buttons here. So these three buttons give, let's say the first button, page one, page one, and the second button, and give it a name of beach too. And the third button, give it a name of page three. And I need some mechanism for this valence to know when you click on this button, what page should be displayed. So I'll go ahead and use data, use data attributes which we, so last time when we were using JavaScript, where I'll give the first button data page value. So here, data page, give it a value, which is going to be page one. I'll give the second one and other data page value. And this time it's legal to pitch to. And finally, for the last button, give it a data. Page. Value equals to page three. Now, let's go ahead and write that JavaScript. What I want to be able to do is to be able to see, I would like to show page one and hard the other two or show pitch to unhide the other two pages or show page three for example. And so to do that, I'll first shore function that will help you do that. I'll go ahead and open a script tags. Inside of those script tags, I'll add a function. And let's give this function a name. So maybe show page. And this function is going to have an argument, let's say peach. And what this function is going to do. Well, what we're going to do is we're going to say something like document.write, inquiries, lecture. And all I want to get is that particular ID of whatever input happens to be. This page is going to represent the ID of the div that I want to show. So I say get me the thing that has this ID and then using a template that rule. So I'm going to first put the name of that. Sorry the idea that page. However, we do not put it in that way, since that is an ID, what we'll be doing is inside of this, Patrick's will first add the hashtag indicating that this is an ID. And then we add, we plug in actually that variable that we're adding in as an argument. And here we close those curly braces and close the bathrooms. So here I'm saying I want hashtag and name of the page which has either no PS1, PS2 or page three. And so now after I got this death, what I'd like you to do is to change it, to change its style. So I want to change the style of this div. And what particular style do I want to change? I want to change its display property. So here, dot display. And now instead of none, which was the default here. So here by default for the devs are known. Why I want to do is to show that the, another option to show a particular element is block. So here I'm saying that it's clay property is blocked, meaning it shows up just as a block that is on a page that is actually visible. And so now I have this show page function and I can test it in fact by go to my browser to save that first. So now I see that I have three buttons, but they don't do anything just yet. But what I can do is in the console, if I actually just try running the function that we wrote inside of our JavaScript console console. So the function we wrote is show page. And let's say I type in, let's say show page two, for example. And took on that. And you can see that this is page two appears in my browser. Now, if I, let's say type in again, show let's see peach, let's say page three for example. So here I'll type in page three and click on Enter. You can see that now this h3 is also visible. So we have two regions that are becoming visible. And that did have what I want to reach two is now visible, but so is the page Page three. So I probably wanted to such that if I ever show page I heard the other pages first, like hide all the pages and then show pitch to or hide all the pages and then show peach tree. So how could I go about doing that? Well, first, I might want to just one I show page first heart, all of the other pages hard to let's say we want to seep each one. We have high page two and page three. So to get to all the pages, I'll do inside of my JavaScript tag. So here, the first thing I need to do is document dot, query selector. All because we have more than one. So here all the divs. And now what I am doing is that I'm using to enclose the pages. And now for each one of those, again effectively create a loop. So dot for each one of these diffs, I'll go ahead and run. So for each div was go ahead and set div dot display. Then said this display property equals to nine. Let's just fix that. And so what this show page function is now doing is it's first acquiring for all the diffs. So sorry for that. This has to be inside of our function. So the first thing this function is doing is that it's querying for all of the divs which are simulating my pages inside of this single-page application. And for each one of these depths, we're going to pass it as input into this function, which is the argument to a for each function which is right here. And again, using that arrow notation, which is just a shorthand way of expressing a function. What I'm seeing here for each of these diffs, we go ahead and modify its style property. Setting display to none, meaning don't show any of the diffs and then show only the div that was requested, which is pitch. And if I go back now to this page and But before that, let's just go and fix that. So it style dot display. So first access the style and then appropriately of the star, which is Display Ribbon here. And now if I go to my page. And so in total console, let's go ahead and type in. Show here, show page, let's say show page long and click on Enter. We can see that. We can see each one. But if I run now, show that C p h two and click on Enter, you can see that our pH will disappears and reach two appears, but not both of them at the same time. So I can manipulate which pages visible all via the console. But now what I'd like to do is get these parents to actually work. So if I click on button one, pitch one appears. If I click on button to pitch to appears, and so on. So these volumes have an effect of actually display the requested page. So in order to do that, well, I want to attach some event listeners to these buttons, which means I need to wait until those burdens not loaded onto the page. So we'll use document that addEventListener. So document that event listener and that this DOM content loaded. And when that's done, let's go ahead and run this function. And then I'll say go ahead and go ahead and document.write querySelector. So for choirs lecture all, for all the buttons and were enriched for each of these models. Let's go ahead and attach when it occlusion. So let's go ahead and type in here. Button should for each button, we go ahead and add an event listener. And so what you're saying, for each of these points, I would like to do something with that button. So I'll go ahead and run and you function with that burden in each loop. And now what I'd like to say is that what this, when this button is clicked, so sorry, on click. So when this button is clicked, go ahead and run this function. Here. Function. And I'd like to show a page, and which page do I like to show? Well, I want to show whatever page is in the page part of debt burdens that ascent and to get it to get it the current burden, the burden that has been going on. Recall that we are inside of an event handler. We can take advantage of the JavaScript key, keyword this. So here inside of that domain, when we refer to this, we're actually referring to that button. So what I'm saying is that show page and I want to show the pH of a particular Let's see, prompter, which is going to be this brought up that we're going to access its data and then pH, so that when we're writing that you're actually accessing that value. So if you recall first, if you go to that function page is going to be either P1, P2, P3. And then when we go to that function, we go ahead and plug in page one here. And this becomes hashtag peach one. So this would go to an element who has an ID page one, which happens to be this step right over here. So actually these patents have these data page values in order to identify that which button is for which beads. And then this would be used to access. You get this value whenever a button is clicked, and then give it added as a parameter to that function, to that show peach function. So this button, which could be either that or that hotel, because we were in a loop, is going to see which one is clicked. And then if, because we have quite an onclick, and then that button, let's say it happens to second boiler. And we're going to go and access its data and then asks its data Peach, which is p2, we click on button to which actually has pitch to really zoom the user whenever he clicks on core, she clicks on that button. They actually want to pitch to appear. And so we go ahead and show that part of the page, which is page too. So let's go ahead and save that and show that page. But before that, let's just fix that. So this is dataset show accessing the dataset as I said before. And then through the dataset defined a data which has page, and we access that data page at reactions, it's loud. And let's just fix that too. So OnClick doesn't have the parenthesis. And now, if we go ahead to the page and click on page one, you can see that now peach one is misspoke. If we go ahead and compete to page shoes visible and click on page three, then page three is visible. So that's good for that video. 22. User Interface Part 2: Until now, I've had the ability to just in a single page, allow myself to simulate the idea of having multiple pages all enclosed in a single HTML, HTML file. But let me think to consistently meet additional requests to a server in order to get access to that information. Now sometimes though, it might be reasonable to want to reach out to a server when you need new formation for a page. For example, you might imagine that each of these peaches contains a lot of text. It's going to be inefficient if immediately we're loading all of the data into HTML and just showing and hiding them when we need to. Because maybe we're loading more information than they usually is ever going to actually care about if they are never going to look at page two, page three. So one thing we might imagine doing is loading this Nita dynamically. With last time we've, in the previous videos, we've talked about JavaScript. We saw how we could use fetch to say, go ahead and request some additional information from a web server. And we latest video, we've seen the currency exchange rates example, but then we use the data that came back in order to fill in something onto our page. And likewise, we could do a similar thing here that if we have the general structure of a single page and we want to load new content rather than load an entire new HTML content and you load the entire page, we can just ask our own observer for what part of the page needs to change and then just replaced that part of the page. And so that's what we'll take a look at now and combat combining one of the frameworks. I'll be using Django because I'd extend that in a previous course. So combining Django for our webserver and JavaScript for writing the client side code to be able to generate, generate a symbol application for this. Go ahead and, and so for this to work, we go ahead and go into an example that is Bolton and ferns and which is single pitch one. And so on side of it is a Django application. We'll be using the Django framework because I've already explained in a previous course. So if you want, you can go ahead and watch it, however, will not be specifically using it. I'm just going to show you this Jenga application in order to understand the concept that I've been explaining. So don't worry if you don't know Django. And so inside of this Django application have a single app called single page one. So sorry, single page. So and inside of it. Let's go ahead first to your as.character. Inside of it, we have to default routes. So we have the first URL, which is the default URL, which is right here. And we have another URL which as IRL for loading different sections of a page that I might want to dynamically load, for example. So I have sections slash some particular number. And if you go to use the R pi to see for what it is these URLs are actually doing. The index function just returns index.html. She's right here. And then what the section function goes, first, it makes sure that the number is between 13 and responds with one of these just strings of texts, for example. So here you can see it and they're separated by commas. So each string of text represents a number, so it's either one to p. So how does this actually work? If I go into single page one and run on the server, so I have to open the commander. So if I go ahead and first enter the project, and then go ahead and type in men by R1 sooner. And then click on Enter. And then go ahead and copy that link. Access to peach. And then we just enter try over here. So, so if you recall, we saw URLs apart that we have two paths. The second path is section slash a number, and this number actually represents the page. So let's go ahead and try to implement that. So here inside of our URL, let's go ahead and type in sections, slash one and enter. And so you can see that we are returned with the first text. Let's say I go ahead and type in two. We get a different texts. And so let's see three. You can see that we get the last block of text. So just different texts. And I'd like to incorporate that, sorry, this text into an existing HTML page for instance. So here I'll go into index.html. And so index.html in sort of shell HTML. What we'll see is I have a show section. It actually actually pretty similar to that of show pitch that we create moments ago. But instead, what shows section is going to do is it's going to fetch what texts I should display on the page from my own webserver. I'm fetching from sections slash fill in the number here and like, like one or two or three. And when I get the response in the past, we've seen how we can convert that responsive to JSON data if it's unstructured. And in the same way we can just convert that response into a plain text. Then I'll take the text console.log it just to see that we can see the output. But then go ahead and select for the content of the page, something that has an ID of content, update its inner HTML, and set it equal to that text. So this entire function is now doing, is it's going to reach out to my server, to your out what textContent belongs in the new section, and we'll end the part of my page according with the text that comes back from that HTTP request. Then down further below, inside of the page, we'll see that I have a hello and the three buttons toggle between different sections. Each of them has a data section attribute, this time for which section should be loaded and sort of page. And then a div initially planned just for the content of the page to be presented there. So putting this all together now, if I go to the default route, let's go. So here if I go and and so this is the default route, or by click on section one. And I am going to see that tax, tax. So what's going to happen is that JavaScript is going to query starch section one, slash or slash section slashes one. Ask for the task. Text, gets that text back and it's going to fill it into the page section one, section two, and section three. So very similar to before. So you can see your different sections. But unlike what we had before, where all of the texts was being loaded into the HTML page all at once. Now we're using asynchronous JavaScript two, only dynamically load information when we need it. When we click on a section that it's going to go, it's going to make a request for what content needs to be filled in. And it's going to fill it in. And everything else, these buttons, this heading. And you might imagine in a more complex website, you've got a lot more going on around the edges of these webpages. On all of that stays the same. We don't need to reload any of the information. We're only reloading the portion of the page that she actually changes as we toggle between these various different section headings. So just to recap, whenever a user enters that page, he or she is willing to pick either on section one or two or three. Let's say the user clicks on section one, then section one which has an attribute which is data section one. The function would go because as you see whenever the page is loaded, if that button was clicked, which is wasp looked session one was click. So this function will go with R1. So whenever we're clicking on section one, this is going to run that onclick is going to call that function. That function is going to call it Show section. So shut. So it shows action is going to go fetch that section right here, which is the parameter right here, which is that right here, which is the data set, which is that, which is one. So one propagates from here to here to here. And then that becomes sections and sludge and section slush one. What's that? That's a URL. You go to your L. So pi, we see that sections, such one that caused the section functions, then you will go to view. It, goes to that section function then is one. We will see check one is actually between 13. That's correct. And then it returns an HTTP response which is one minus 10, because indexes of array start from 0, it returns that text right here in an HTTP response. Now let's go back to that page. Then that response, we change it to a text. That text we can login to our page and then we can also add it to the Content section which is right here. So that's it for that part. 23. Javascript History: Following up from our previous example, maybe we can be more efficient about how we run our single-page applications. One thing we can receive actually to lose is the notion of maintaining state inside of the URL. That generally if you are all gives you an indication of what page you're on. You're on something like slush one. If you're on section one slash two, which we're on section two slash three on font section three. But of course we're staying on the same page in all of these examples. Whenever I, let's say click on button one or section one, section two or three. The URL is never changing. The URL stays the same. It turns out there's a way, so you can see it's not changing. So here, whatever I change, they are all C. So it turns out there's a way in JavaScript to maintain the URL to take advantage of what's known of JavaScript history API, where I can push something to the history, meaning update the URL and actually save that inside of a user's browser history. So later on, they could potentially go back to that. And to do that, I'll show you yet another example inside of another Django application, which is single peach to and to go to that single pitch up. It's quite similar to single-page form, however, and sort of index.html, I've added a couple of additional things. One is that when I click on the button, if I go to section one or two or three, I've added a line here. So history, what history dot push state is going to do is it's going to basically add a new element to my browser, history, browsing history, where I've first specify any data associated with the state. So in particular, I'm storing a JavaScript object representing what section number is being represented here. Next is a title parameter that most browsers actually ignore. So we don't care about it. It's generally going to be an empty string. But the third argument here is what should go into the URL? And what I want to go into the URL in this case is something like section followed by the section number. So I can go to section 144 slash section two or slash section three, for example. And those will appear in the URL bar when I click on and the front page. So here I've added, I've entered a parameter that I'll be using inside of that URL. She's called section. And here I've included it in that URL. So haven't haven't included the statement, I wouldn't have been able to write it right here to reference it right over here. Then what I want to be able to support is the ability to see when I go back through my history, if I click the back button in my browser, I would like to go back from section three, section two, if that was the previous speech I visited. And these turns out to be an event handler for that. And that is window. Not on pop state and which we used right here. Meaning when I pop something out of the history, like go back in my history, we have the ability to take some event as an argument. So here, if you look at Events section, which I've run that console.log on. So we will look at that in a moment. We'll see that. We'll see what state was stored associated with the part of the user's history. And now I can go ahead and show that section. So although when I run this, what application going into single page two this time, and let's run this river. So here, let's first go to that page and then manage dot py to run the server. So run server. And let's just click on that and go ahead and copy the link. So copy. And so here I see hello, three sections, four buttons. And when I click on one of these buttons, not only now do I have that tax over here, but I also see in the URL bar then now I'm on section one that has been pushed onto my history and I've updated the URL to reflect that to I click on Section two. Now I have Section two in my URL. And so if I open now on the JavaScript console, you can see, and let's say I can click on back. We can see here that I have, well, I print out what is the current section that's associated with this URL. It's saving that steed that I shouldn't be loading section number one in order to get back. And so what does load section 12? The beach. So there's certainly nothing wrong with original, original paradigm of just loading different pages dynamically using Django, like make a request and get a response. But oftentimes as you begin to imagine applications where a lot of things are changing on the same page simultaneously. You might've mentioned social networking websites where a lot of things stay the same, but new posts might be added and you might be looking at different parts of the same page, being able to dynamically load information, requests, additional information, and then displayed on the page can actually be quite powerful and a way to make your web pages a little bit more interactive. So that then, and it's how we might put the single page application taking advantage of JavaScript to Asoka honestly load new data and then taking advantage of this history API that lets us add things to the URL, add things to the user's browsing history such that we could go back to them later. And by just listening for that window dot on pops state that we used. So that's it for that video. 24. Window: And it turns out that we know object that we get access to in JavaScript is quiet, powerful. It presents the physical window on the computer screen that displays all of their web content. And there's certain properties of the window we can look at that allow us to enable some interesting features. So for example, your window is really described by what the user actually sees inside of their window in Chrome or Safari, or wherever what browser they happen to be using. And there are a couple of properties that might be of use. Something like windows, that inner width, which will represent how wide is the window, which might be useful to know, to know the size of the users screen, for example, to know how many pixels wide the window happens to be. And just as there is window dot inner width rehab also Window dot height, that represents the height of the window as well. Now window represents the physical part that they're actually seen. We also see another variable which is called the Document Object. So what is the difference between the window and document? Well, the document generally represents the entire webpage as you can see here. However, the window is just the physical, as I said, the physical scene part of what you actually see. And while the document generally sorry, the webpages are generally long, oftentimes a webpage doesn't fit entirely inside of the window that you generally have. Scroll through an entire webpage to get it. And the window is only showing you one portion of that page at any given time. So you can represent a document as this big vertical section that goes beyond the window. There might be part of a document that is above the window, part of the document that is below the window. So here we have that part that is above and here parties below. So we do not scroll y. So y is another variable. You have access to. The window. And window that's called y represents how many pixels far down have you screw. So if you're at the top of the page under the aswell, as you haven't scrolled at all. But as you begin to scroll, if you want to know how far the user has called on the page, you can look at its window dot scroll lie to figure out the number of pixels they user has crawled. And the y direction, the up and down direction. And the entire height of the page is represented in document dot body dot height. So here, sorry, offset height, which is right here, documented body dot offset height, which is that here, that variable right here, which represents how told the entire half of the document is. So that here all over that is the document type. And we talk about all of this in addition to things like when did not enter height and width. Because using all of these values together, you can begin to do some interesting calculations. So one thing you might want to detect, for example. Has the user scroll to the bottom of the page or not. That might be something you care about knowing. And it turns out there isn't any event listener that does this automatically. But we can clear it. Read cancer calculated in order to try to figure this out. If inner height is the height of the window and scroll why is half vertically? The user has cruel and document dot body that offset height is the entire heart called the document. You can imagine. You can ask yourself what needs to be true if the user has scroll to the bottom of Page. Well, if the user has brought to the bottom of the page, well then scroll y plus that inner height means that the amount they have scrolled plus the height of the window, that must be at least equal to document dot body dot set high, meaning the amount that the scroll plus the windows takes you down to the bottom of the page, to the end of the page, to whoever whoever told the document happens to be. And user, sorry, and using the mathematical comparison. So we can actually detect when the user has reached the bottom of the page. And we can actually try to put that into practice. So go ahead and open up an example called scroll dot HTML. This dot HTML has a body tag in which I have 100 paragraphs, this p tag, and inside of the speed that we have, 123 and so on until we reach a 100 pages. And that's what is inside of that body of the HTML page. And so now to go ahead and open that page in our browser. I see that I have these pages and I'm scrolling through them until I reach Paragraph 100. And what I might like to do is to detect whenever I've reached the bottom of the page and maybe do something. When I do so, something like change the color of the page, the background color, or the font size or anything in sort of a peach. And so how might I go and do that? While we've been using JavaScript, we'll be adding and so versus go ahead to our page, our national page. So I'll add an event listener to Window dot on scroll. So on scroll is an event that this is for one, I'm scrolling through that window and when I scroll through the window, will go ahead and create a function. And so whenever I scroll, I want this function to run. And what do we want this function to do? Well, what do I want to calculate? Well, I want to calculate if we knew dots. So I want to calculate the window dot. Hitler, height plus window dot scroll. Why? So you can see it right over here. Is greater or equal to or greater or equal to document. So I guess that's here. Okay. So I forgot. So equal to document dot body dot offset height. And so meaning that the amount that I've scrolled, which is y plus the inner height, is at least documented body dot offset type, which means I must have scroll to the bottom of the page or maybe even a little bit further if there's a little wiggle room to scroll past at the end of the page. So if this is true, and for that we need to add the if statement. So if that is true, we're going to do something. Well, we'll go ahead and document.write querySelector. And we'll choose the body of our page. And then let's say we want to change its background. So dot style, dot background color. And let's change our color, let's say to blue. Okay? So if we reached the end of the page, will change the background color to blue. Otherwise, if we haven't yet reached the end of the page, let's give it another background color. Let's give it a background color of, let's say red. So here we'll give it a background color of red. And let's go ahead and save that. So what we're now doing is here, we are taking advantage of properties. We know, OK, this window object saying when we scroll the window, let's check to see if we add this up and it at least the height of the entire document we've reached at the end of the page, go ahead and change the style of the background to the body accordingly. Otherwise change the background to red or yes, let's just keep it as red. So now let's go ahead and see that teach in our browser. So you can see that now all page has a background color of red. And as we scroll through the page, we'll see that the page changes to blue. It was read before I reached the bottom, but as soon as I get to the bottom of the page, it turns to blue. And the reason why is because the height of the window here, plus the window, plus how much I already screwed from the top of the page until now that together is equal to the entire height of the document, which means we are able to detect. The fact that I've reached the end of the page, and as a result, we can change the color of the background to blue. Now this in itself isn't particularly, particularly practical use of detecting when you scroll to the end of the something. We probably don't want to. We don't care about teaching the background color when we reach the end of a page. But there actually are real applications. And you might imagine this in the context of websites that allow for things like infinite scroll is that if you're on social networking site that has a whole of bunch of posts, you'd like to scroll through the bottom of the list of posts and then it generates a new set of posts as well. Or you're looking at a news article and you're scrolling through news articles. And once you reach the bottom, so it load a whole new set of news articles without you having to go to another page. So how is it doing that? Well, it's a combination of the same types of ideas that we've been walking about. Number one, the ability to detect when you've reached the end of the page using JavaScript to the temperature at the bottom of the page. And number two on the ability to assign curiously, using JavaScript, load additional content, fetch some additional page that has some national contents I mentioned on US Article seven, snow posts and whatnot. And then to take that information and manipulate the DOM to add information to the existing weapons. And that ultimately is what was going to give us the power to be able to support something like infinite scroll. So let's go ahead and try and see what it would look like to implement infinite scroll. We'll have this file right over here, which is Django application. So here is just ended. So and now we'll go ahead and look to, let's look through posts and see they URLs. So we have this posts, your L, which goes to use dot posts that go ahead and see what does that do. So here is that function posts. And so, so all it does is load this index.html page, this template. And if I make a request to posts, I need to provide two arguments. I need to provide a start for what? A post I want to start with. And end for a post I want to end with. And then just going to generate some sample post that just say like post number 1234 and so on. And practice, you could actually use social network posts in place of this. But for now, for this demonstration purposes, we'll be using that. So what is this going to do? If I go ahead and run the server? If I go, let's go ahead and took the directory of that project, that Django project, and click on Manage dot py run server, and then click on Enter. And then let's go ahead and copy that link and paste it right over here. So this is the page. Let's go ahead and go to posts verse. So slash posts. And the first thing you see, here, we have this post object and inside of that we have ten items. And so you can see that these posts 0 to nine, however, as we said, we can give this URL and argument. So we can give it first on the Start, which let's say we wanted to start from one. And we'll give it an end, which let's be ten. Now if I click on answer, you can see that the posts now start at one and then ten. But I could have specified other numbers as well. If I said something like start at, let's say 15 and see oh, 30, and then click on that. And so you can see that we start with 15 and, and at, sorry for that, and add that 30. And so we can specify the range of posts that we want. So this now is an API that I have implemented effectively that allow someone to get access to a variety of different posts by hitting this particular URL, this endpoint to speak, and passing in arguments, passing in what posts they want to start with, and what posts they want to end with. And then get that. And then they get all of this data back presented to them in JSON format that can be then used. And so just to recap already, what we did is that we are specifying here, we are getting that start with that recess fight in the URL and that end, we're saving them in variables. And then I'm, I'm creating a full loop. And inside of that for loop I'm, I'm sitting the range which is going to start inclusively from the start we've specified in our case. Let's say we start from 15. So the range will start from 15 and it's going to end since the end is not inclusive. So let's say I add 50, it's going to stop at four key. That's why we add one to make it inclusive. So say I want from one to ten, I'll get posts from one to ten not to lie. And so I'm just appending to that data, this empty list of data and appending each time this post supposed number 1. Number two, depends on i. So first time i is one, then two, and so on. So we're just appending and by appending, we are adding to that list. So we're not doing that much code. Ok? And here you can see that we are returning it in adjacent response. That's why we see it. We see it in that form. So we're just running a list and then we're using some function to turn it into a JSON object. And what's nice about this is that now when we are loading posts, rather than have to just guess how many posts we need to load and then require someone to go to another page. We can just add something like load first 20 posts. And what we'd like to do is if they reached the another page, go ahead and load the next 20 posts by hitting this API endpoint, getting the next 20 points, and then feeding that into the HTML page. So let's see now how that actually works in practice by looking, taking a look at a template index.html. And now if you go to index.html, and first of all, before we see some JavaScript, let's just skip that. If you go to the body, the pH, we have this div for all the posts that initially is going to be empty and it has an ID of posts. Now, here's what JavaScript is going to do and we'll walk through it. We start first by the first goal post, sorry. And so we have to set the counter to one so the country's going to keep track of what post we need to load next. By default, we're just going to start by loading host number one. We have a variable called quantity that's going to tell us how many posts are we going to load at a time. Let's just say we are going to do 20 posts anytime. So start with one, let's say to 20 and then 21 to 40, or when she reaches 4041 to 60 and so on, so forth. And when a DOM content is loaded, we are going to go ahead and just call that function, that's called load. And what that function load is going to do is it's going to figure out the start and the end. We should be. So start is the counter and start plus the quantity which is 20 minus one. Because as you said, it's, let's say starts from 20, let's say from 21 to 44, you want to 60, and so on. So here the counter is end plus one after that. But what we're going to do, it's just going to them for each, who's going to fetch sorry, these posts, new posts, and then for each of these new posts, so for each of these new data, we're going to call this Add Post function. And so what the outposts functions which do its query, it's going to create a new div. And that new div, it's going to populate the posts inside of it and adds it to the DOM. So here we're going to append that, that div into that the posts. So now that we have these parts, we have these parks abillity to load new posts as by fetching some from some URL. Although the polls that we care about. And then for each of these posts that come back at some new to the DOM. Something new to the DOM as by creating a new HTML element and inserting it into the HTML page, we have the ability to dynamically load all of these posts. So if I go ahead now to page and now will not be going to sludge posts, but we're going to go to default. And so you can see that we have these posts that show up, but just like 20 of them. Ok, because every time I call a load function, this is going to load the next, for example, what we see, but however here it's not loading. So let's say we open the console and let's say you click on that function. Let's see if it just, if it's working, if you cool, you can see that now we have loaded additional Fourier, sorry, 20 pages. And so what we need to do is principle is we have to just know when to call that function. And so you a few recall, we've used that window on scroll, so as warhead and that here. So we're going to add an event listener to Window dot on scroll. So equals two. So this onscreen, as I said, is an event that's going to loosen whenever we scroll through the page. And then I'm going to be calling a function. And that function from what might that function be? Well, first we'll check if we reached the bottom of the page. And how did we do that? Well, window dot inner height plus window dot scroll, Allison squirrel. Why? So here's the if that is greater or Serif abab, greater or equal to document dot, body dot offset height. So if that's true, then we've reached the end of the peach. And what we'll do if we reach the end of the page, well, we'll call the load function. So here is load function. So now if you go ahead and save that, and we rerun our server. So here, manage dot py, run server. So here. And then go ahead and refresh our page. Tsunami, refresh. I see post one all the way up to 20. And so now watch what happens when we go to 20. Now I got a bunch of new posts. So now aren't at 40. And then another posts appear. So every time you scroll been more posts are going to load after that allow me to effectively implement the idea of infinite scrolling by taking advantage of some JavaScript techniques where I can check for when I got to the end of the page and when dynamically, sorry, and then dynamically do something as a result of that, something like load some additional page on to that screen. And so here, a lot of power had been inside of JavaScript. Thank you for watching that video and we'll continue in the next. 25. Animation Part 1: A lot of the power of user interface comes from, is from how it is that user interface interacts with the user, thinking about what the risks coming to do and how pleased should interact. As a result, something like user scrolls down to the page and see some UP just showing up as well. And what technique we can use just for making the HTML elements are more responsive. A little bit more interesting is by adding some animation to them, as well as ability for things to move around and changed their properties in some way. And it turns out that CSS support for a mission. Tss has already given us support for things like style elements saying we want this element to be like this. Having discovered the size, for example, but also gives us the ability to meet those properties as well. To change the size of something or change the position of something over some amount of time. And so when we do have these animations, we'll be using JavaScript in order to, let's say, control these enemy shoots when should they appear? And so first, let's go ahead. So I'll go ahead and create a new external far, let's call it enemy dot HTML. And does just give it a head and a body. And let's give it a title of animation. Let's say. So Animation. And let's just add here a, each one. Hey, let's say hello, pay. And so now what I'd like to do is just add a little bit of animation using CSS into this particular image page. So I'm going to start with first, as I said, we're displaying here word saying hello. So adding some CSS to style. So first open this style tags. And then what we'd like to apply, we'd like to apply on this heading is a particular animation. And first we need to specify what the animations name is going to be. So first, let's say that we want for this H1 headings and animation, which has an animation, animation name. Let's give it a move. And then, and let's give it a duration. So animation to ration. And let's say you wanted to be for about two seconds. And then the animation fill mode. And let's give it shouldn't move forwards or backwards. So let's generally, we generally want our animation to go forward so we're making some sort of forward progress. And so here, let's go ahead and put forwards. So here I'm saying We're going to animate all of these all over each one headings with animation called move. And now we need to define what the animation actually does. Do that above and star are going to say about each one. You go to see something called key frames. So at keyframes is going to allow me to specify for this particular element, meaning, where should this elements start? This animation. So when at the store, what should happen and the middle, what should happen at the end which it happened. And so the identifier, let's say here is the name of the animation. So here we will be calling this emission move. And so, so here at the beginning it's going to be thrown. And then two. So here we're basically what I'm saying is from, I'm going to add some CSS properties. And then two, I'll be adding successive properties. So at the beginning of the animation, I'll be having some kind of property that add unload animation. In. After two seconds, I'll be having some new CSS properties. And so what might the CSS properties B. So let's say I want to change the font size. So at the beginning that say the four size was 20 pixels and at the anode animation, it, let's see, went to, let's say 100 pixels. So That's an example. So here one thing is I would like to apply animation called move to all my headings and emission should last two seconds and go forward. And what is the that animation going to do? Well, it's going to start by obeying, Of course, it's animation, right? Having a font size of 20 pixels, and at the end is going to have a font size of 100 pixels. And now I have identified what is that animation going to do? And we can manipulate just about any CSS properties that we want. We don't have to stick to that font size. So if I tell the heading that if you should have, let's say a relative position. So here, the position, and if you're having trouble with these keywords, okay? This is just an example for you to know how we can manipulate JavaScript using those equations. If you're having, if you want, if you're interested, you can go to my first course learning actual ancestors who fully you'd be more familiar with this. And so here, the position is relative, meaning that it should be relative to other elements or other things, and it's parent. And I can see that q here we don't have to pick from. And two, we can see like at the beginning, so at 0%, I wanted to be having that phone size. Maybe at 50%, I wanted to be having another font sizes sake, let's say here, let it grow to 60. And then at the end. So at a 100%, I wanted to go, let's see. Let's just keep it here a 100 and then just go to its initial font size, which is training. So at the end of the animation, okay, so we can, as I said, start from 0% being that font size and that 50%, and then a 100%. Now we can add another property or style, which is, let's keep it not just change the font size, but also its position. So at the beginning we wanted to be, to be at 0%, so at its initial position. And that at 50% of the animation, I wanted to be at 50% of its position. So it's moved 50%, left its initial position. And then what I'd like to do, adeno, the animation is for this element to get back to its position. And so to do that, we'll just return left to 0 per cent. So the middle of the animation, this object would have moved about 50% away from where it was. And then as it's a 100%, it just goes back. And so let's go ahead and try that and save and open. And just for the sake of being clear, let us put it four seconds since we're doing more than one thing and you want to observe the results so that just with animation duration, about four seconds and save. So here's our peach. And you can see that it's moving and it's growing at the same time. So let's just refresh it to see it again. As you can see, you can tell it, it's pretty fast. You can make it a little slower, but making the animation duration more than four seconds, maybe five. But I think that's good. So you can see how it's moving forward to the left. And it's growing and size from 20 pixels, 200 pixels. And then at this is 50%. So here It's coming to you is at 50% and then 200% as moving to its initial position. And at the same time, we're changing its size back to normal. And there are other properties we can use to manipulate these animations as well. I could set, let's say you're the animation. So here the animation, let's say iterations. So here, sorry for that. Iteration count. Meaning that how many times do I want to do that admission? So see I do it two times. And let's go ahead and refresh. So here's the first time and then hears the second time. So you can see that it's going to the right and then it goes to the left, but then it repeats the second time. And it turns out if you really want to, you can set this animation to infinite. So here we have an option to set it to infinite to perform non stopping. So it's going to go forever. Let's go and see it out. So now if I go ahead and refresh, and so it's growing ten, shrinking, then growing or shrinking. And it goes on and on and on. And so if you ever see things moving around on a page and you're active in some way. There are a number of ways to do it. You can animate things using JavaScript, for example. But there are many cases where CSS alone is pretty good at just creating these types of animations. And while this animation right now, it's just running forever. We could use JavaScript in order to control that and Mishnah as well. So let's see an example of what that would look like. Go back. And in the body of the page, I'll add a button here. And the value of my page, I have a button. And let's say, let's say freeze maybe is the name of that button. And save that. And now what we're doing is adding some JavaScript to that. So here I'll add my script tags. And as I said, I'm going to add some JavaScript to that button. So in order to control the enemy, to decide when the animation is going to start and when it's going to stop. And so what we'll do inside of this script is first say, normally document.ready event listener. And that event is going to be DOM content loaded. So if the content of the page is loaded, it will going to go ahead and run a function. What this function is going to do. Well, I'll go ahead and first of all, documents dot 2y R3, survey that query selector and what I'm be selecting algorithm, probably selecting that Bagram. So here and we'll refer that. Let's just first of all, go ahead and pause the animation. So at first, when you open the page, we want the animation to be not moving. Okay, so first of all, let's go ahead and click on that, each one that is moving. And just go ahead and click on style. So we'll actually be actually, sorry, accessing style because that admission is celebrate our CSS. And then what I'll be doing is going, I'm going to access something called animation. Animation. Please state so here, sorry for that. We should play state. She's right here and I'll be putting it equals to pause. Here. Pause is going to be the place it tell me shun places. So here, rather than just say, run this animation infinitely, I can say animation please state should start as posed by first getting the a short relevant. They're modifying the animation, placing property of that element to pause. But now what I'd like to happen is anytime someone clicks on that button, what to change that image and placed it. So I'm going to go ahead and say document dot querySelector button. And then dot onclick. So whenever I click on that button, what I like to do is go ahead and run some function. And first I'll check if that document the query selector of the H1. And then I'll check if that style dot animation please state is so and emission play. And I'll be checking if it is paused. So if this is true, so we'll just add a double equal plus we want a Boolean. So if this is true, we'll go ahead and change it, change that attribute from Paul's. So I'll go ahead and change that from paused to running. And otherwise else. So if it is actually running and I click on that button, what I'd like to do is just get it back to pause. So whenever I click on the button, I'll be either posing the emission or I'll be running it. So now if I go ahead and refresh the page, and we can see that right now, the pH as not. There's no animation. Everything looks normal. If I click on frees, you can see that now the animation starts playing. And you can see now if I go ahead and click frees, you can see that it freezes. Now one thing we can actually do before we end, as I don't want it to be called Fourier is whenever I am pausing it, so it doesn't make sense to have it called freeze. So what I can do is go ahead and if it is paused, so I don't want it to be called freeze. So I'll go ahead and go ahead and document that query selector, that button. And then I'll be sorry. And then the inner HTML. And I'll be putting its inner HTML to freeze. So if it's paused first, what's one? I click on that button. What's going to happen first? It's going to start running. And then the bottom is going to change to freeze because the next time, click on it, it's going to be freeze. So here, same thing in the else. What I'll be doing is actually running, pause it. And so it is going to be freeze. And let's say, go ahead and see play. I'm sorry, not play plays. Actually. Let's say an freeze. Okay. So let's go ahead and save that. And now, okay, so now if we click on that, so freeze, freeze, freeze on release. And so this can be helpful and nice when you want to create something a little bit more interactive, something enemies it on the page. But this is especially helpful when, because it means that you can gradually change CSS properties over time. Rather than just immediately change something, you have the ability to animate something to make it a little bit better. So now, in the next video, we'll be taking a look at the poster example we've seen earlier. And we'll see how we can actually do control some animation in that. 26. Animation Part 2: So now let's take a look at an example of how we might put daddy of animation to practice. Let's go back to our posts example where we had this infinite scrolling list of posts. But imagine now that we want the ability to hide posts when we're done with them. So let's take a look at a Django project, which is quite similar to that of the posts that we've seen earlier. However, if we go ahead and run the server, so first we go to the directory I mentioned per run server. So if we go ahead and visit that webpage. So that's the page. As you can see, we have an infinite scroll. However, I mentioned that now we have the ability to high posts when we're done with them. So here we have an extra button that says hide on every single day. Right now clicking on the button won't do anything. We go ahead and implement that in just a moment. But first to see how this works. If you go into index.html of this Chienco patient help. So the only change that's been made here is that whenever I add a post, recall again that this application does what this application does. It close posts, it loops over each of the individual posts, which is just a string of text. And it adds that string of text inside of an element onto the page via this post function. So this at UCSF function, what the outposts function's going to do here is first is going to create an element and that element. And then it's going to give it a class name of balls because that's how we're going to add immediate and then set its innerHTML equal to the contents of the post, something like post number one, number two, and so on. And a button that just says height, so which is right here. And then we're going to go ahead and add that to the DOM as well. So that's what at posts is now going to do. We're generating some HTML using Javascript code and then adding that HTML to the peach. And now what we're adding is a div, Not only that had the contents of the post-test texts, but it holds also, it's going to give us access to a button that ultimately we hope is going to lead us high that posts as well. So how do we actually get the hiring of the post tour? Well, we, what we want to do is somehow detect when the user clicks on one of those hide buttons. So there's a number of ways we could do this. But one way is just two. So one way is just shouldn't assume to one, someone clicks on a document as a whole and the types on clicks on the document, I might like to ask something like, what did they actually click on? And it turns on. Turns out, sorry, that the most event listeners, the function, the event listener takes n. So here, just to know what I'm talking about, document the event listener, which is going to be clip. So anyway we click on the document. And as I said, it turns out the tree could add as an argument the event itself here, comma event. And so this event continue Java, JavaScript object that contains information about the event that happened, like the click event or the scroll event or the key down event, or the keyup event for example. And one of those properties you get access is event dot target. So here, whenever we write that, we'll go ahead and enter that function. And event dot target is one of those properties that we can access, which is like what was the target of the event. In this case, what was the thing that was actually clicked on? And I'll go ahead and save that. So here, the saving that, let's say an element, element equals to event, the target will go to save that into 11 element. And what I want to know about this element, of course, obviously I want to know if that is abandoned and not any kind of button. I want to know if it is high, but I could also add a tab. Sorry, I could have also attached an event listener to each of the hydrogens. This is just an alternative way. However, here because we have a class_name, So I don't know. So here you can see that each one has a class called high. So instead of writing for each button on an event listener, what I can do is, so here, I'd like to ask first if this element has a class_name. So lastly, which is equal to height, which is the class name of those buttons. Then, well, what we'll be doing in that case, we'll go ahead and remove that button. So element dot remove. So here, go ahead and remove that. So now if I go ahead and save that and refresh our pH. So go ahead and managed run server. And you'll have and let's refresh our page. So now let's go ahead and try to click on that button. And you can see that that tour, it was close. It got rid of the hit button or hydrogen, but it didn't want to get rid of that. I don't want to get rid of the harbor and wants to get rid of that post, the whole post. So what's going on here is that it seems to be that the elements class_name is high, meaning I take on a high button. Element dot remove, just removes that element, moves that hide button, but it doesn't remove the posts that contains it. And if you think about this in terms of the DOM, the post is div, at its charge, is the button, this heart button. And so to remove that burden, we need to actually call its parent so that elements per and not the element itself, because that elements parents is that div, which is the whole posts by itself. And JavaScript, it turns out there is a way to do that. So rather than element that remove, I can say something like element dot parent. So here, parent, element dot remove. And so now what does that do? It removes, it gets the period and removes that. So now if I go ahead. So now if I go ahead and refresh my page and I click on height, you can see that now post one has been removed. So let's say I click on here, you can see that now three is no move, and so on. Now, this works, but it's not also not immediately, immediately obvious what's going on. Because all of these posts that are exactly the same height. When I GET PUT post 13 to say, it's not immediately obvious to the eye that they've gone away because two posts, they look exactly the same. You will have to be paying attention to know that the hiding work. And so this can be a time where innovation actually can be quite helpful. So what I can do is say something like, let's go ahead and give this post and emissions associated with every post. So here will be giving every posts. So here we have for every div, a classical post. So I'll be giving it an animation and an emission main first, let's give it a name, let's say height. And I want an animation duration of, let's say two seconds. And so that means that it will take us two seconds to hide. And let's say we have an animation fill mode. Let's say that it goes forwards. It initially. I'll give the post add animation. Please state of posts. So Animation. Sorry. Please state of coast. And what does that mean is that I don't want initially that ation to you running because I don't want to hurt all the posts immediately. Pulls this animation. Later, we'll go ahead and run animation in order to actually pose. Then I each define what does it actually mean to heart the post. So here, let's go ahead and define the keyframe. And its name is obviously hard, which is the name of the of the animation. And so we'll give it will start at 0%. So the beginning of the enemy should. And let's give it at the beginning and capacity of one, meaning that it's actually visible to the eye. And let's say at the end of the animation. So at a 100%, I want the opacity should be 0, meaning that it's going to be entirely transparent. That will not be able to be viewing this poses, but be invisible. And now what I need to do is actually trigger this to happen somehow. So this is probably going to happen inside of my event listener, where instead of removing the element right away. So here, instead of removing that element right away, what I'd like to first say is go ahead and change that element, parent element, that style that. And emission. Emission placed it and will be let this equal to d running. So that's the first thing we will do. Meaning when I click on the hybrid and go ahead and run the animation that will change the capacity from one to 0 over a course of a couple of seconds. And then if I really want to, I can add another event listener, just say take that parent element and add to it. And events. So addEventListener. And what event isn't listener, what might I add? Well, I can, there's an event actually that's called an emission ended. So Animation. And actually, which happens when the emission is over. And then I can see when we should use over. Well, we'll go ahead and run a function that's going to be removing that element, element, parent element that we move. And so all in all, rather than just immediately remove elements when I click on the button that says hard, but I'd like to do is see if you click on the button and the button is high, go ahead and get the current element, not the high burden, but the post itself set its animation placing two running, meaning that the heart inhibition, sorry, run the hard animation and then add an event listener to the parent to that post of the hole to say one, the emission is over and go ahead and remove entire post from the DOM altogether. So what is the effect of all this now of having a mission and running it? Well, let's go ahead and review that. So let's refresh our page. And let's try to move that button. And you can see, so you can see that the passage changes and then install it appears, and then only after its total, it's totally transparent, but post disappears entirely. So here for example, I can see pride post number two. And once totally disappeared, it jumps back to its position. Suppose three jumps back to the position of two. And I can do that for any of these posts triggering the animation when I click on the hyperlink. And so this is, this is part of the value of what she can do is to be able to make our user interface is a little bit more pleasant from the perspective of the user by not immediately getting rid of post, but by having a nice fade out, so it disappears nicely. Now even this is not perfect and emission wise, one thing you might notice is that it jumps as soon as the post is gone. If I hide post number three, let's see. You can see that this stone, it actually could be jumps, abruptly, jumps in order to fill its place. Where I might like to do is to be a little bit more clever to be somehow be able to shrink the size of a post after it's gone so that the post doesn't jump into its place. But it slides a little bit more national interests place. And so there's some additional things I can play with. Maybe I want to see this animation. We set over a multiple part animation. So here instead of having 0, let's say I want to have it from 0 to send 75 maybe. So here we'll put 7500. Again. Let's say that from 75-100, I want passively tB 0. So with the first 75% of the animation, we took care of reducing the capacity going down from one all the way to 0. But in the last one in 5% of the animation will still end with an opacity of 0 for anything that creates vertical space, I want to reduce that to 0. So the height should be, So here I want the height to be 0. I want the line height should be also 0 pixels. I want padding, any padding, I want it to be 0. I want the margin. Let's say bottom to be also 0 here. And it turns out that I've added. So here the margin I've added in the clothes and the post, I have a margin bottom of ten pixels. So whenever I heard completely, I want that margin-bottom to be, see you. And so I want to get all those to 0 from wherever their initial values happened, happened to be there. That initially, let's say the height here was a 100%. What else? Okay? And the line height also as a 100%. Let's keep those. The padding and margin bottom is same as they were initially. So my panic was 20 pixels and margin-bottom was ten pixels. I want that to still be true as we reach 75% of the animation. But it's only the last referred percent of animation that I want to set all of these vertical height properties down to 0. When I move all the heart of the line-height, remove all the pipe. And the effect of this will have an animation. Now we're all the first four or 5% of animation. The only thing that changes is the opacity that pasty goes from one to 0. So from on fully visible to 0, fully transparent. And then at the last 25% of the animation, the pose is already transparent. You can see it, but it's still taking up physical space on the page. But you're going to now reduce that height of the post so that now you won't be able to see that. Oh, so now let's go ahead and refresh our page. So here, let's go ahead and refresh that. And let's say I want to hide that post. You can see how it slides. Whenever I hide it, it fades out and then its height shrinks so that an ex post slides very nicely. I can do that again, that seafood that. And as it the same way, it just slides in. And this again is just an application of this idea of CSS animation, using properties of animation to make our interfaces a little bit nicer to use, a little bit clearer visually to the user, that one post has gone away and the rest of the posts have now scroll up in order to take their place. So now we've been able to use JavaScript to create a lot of nicer user interfaces. We've been able to create single-page adaptations, to create infinite scrolling, to able to create some animations as well as you saw through to be able to control them. And so for now that's it for that view. Thank you. 27. Guessing Number Part 1: Now we're going to build a guessing game using JavaScript and including some channel in order to organize our AMA pitch. So let's go ahead and start. So go ahead and create our first file. Let's call this file. Guess. And inside of that file, let's go ahead and first enter the index.html. And let's go ahead and type in script.js. Wearing will be writing our JavaScript code. Now. Inside of our HTML page, just go ahead and change the title to guess c. And then we need to include, of course, the script. So let's go ahead and put our script. So here the source will be scripts js. Now, since we'll be writing a lot of code into this project, we want each time. And to write the event listener DOM content loaded, which as you recall, waits until the page is loaded. So instead what we can do is just removes the script tag and just add it to the end of our body. And that way the script 1P won't run until the body is loaded. And that way we won't have to write that event listener, which is DOM content loaded. So that's the first thing we do. And now in order to guess again, first Australia heading. And let's read the title of our PC, So game or be so game desert. And then let's go ahead and insert a division. And let's give this division id. And so that's give it an ID of, let's say game. And we'll be adding IDs in order to fruit it them in that JavaScript. And so now instead of the ID, let's write pick a ordinates that say guess for getting me. So guess a number between o. And then let's just right in between spans. Let's say 0. And let's give that an ID of men number. So here many number. And between that number and here, and then another span in order, in order to be able to refer to these in our JavaScript file. And let's give it an ID of max number. And let's just give it for now a number of ten. That's, that will be our paragraph. Now will have to add two inputs. The first input will be. Type text. Here, we'll give it a placeholder of until your guess. So here will be entering our guess. And let's give it a name of yes. So that's the first output. Another next input will be the submit button. Okay? Let's give it a value of sub men. Finally, let's add a paragraph tag and give it an ID message. And that message is what we'll be returning from JavaScript according to what the user entered. So now we'll keep message this paragraph empty and we'll be adding to it when we write our script.js. So now if we go out and just visualize this page, you can see that this is the page that we have gained guesser, guess a number between 010 And here we enter our gas. You can see that the placeholder is enter your guess and the submit button. Now we can do something to make this page a little bit more. Visually nice. Having more HTML and CSS properties without having to write too much CSS code or HTML code, so c. So one way to do that is to use a framework which is Skeleton. So if we go ahead and visit that page. So you can see that the page, if you go to get skeleton.com, here is the main page where we can use that framework. And so happy to use that framework while we have to only copy a link to our HTML file. That link, go ahead and go to CNN.com slash libraries slash skeleton. And inside of that website, we'll have this link that will be copying to our pitch. So go ahead and add that link here. And you can see that this is a style sheet, so it gives us the CSS properties because it's not on a script, doesn't tell us any js, any JavaScript. So it only has these CSS properties that will be benefited from. And now in order to use them, we'll go ahead and type in through classes. So here for example, let's say. First, we'll go ahead and add this whole thing inside of a container. And container happens to be one of these properties that if you type that names out of a class. And because we have this link and this link will know that when we write container, we're actually referring to some CSS style. That is going to, it's going to go to that CSS style and apply it on that div. So now let's go ahead and add everything else. So they'll go ahead and give that on and put an ID of guess. And put and let's go ahead and give that an ID of guess button. Let's remove the names when we won't need them. Now since we have the IDs. And let's go ahead and save that and see our page. Let's just put that gasoline inside of the container shall not everything inside of the container. So as is added to the container, Let's just save. And so now you can see how our page a little bit much more better, better. Regarding these visualizations, the CSS properties that button, the input, and the font size, and so on. And now that you've finished the HTML, let's go ahead and start writing our JavaScript. So the first thing we need to do is get this, this input, this button, in order to know when are we clicking to get that input. And also we need to get that message in order to add to that paragraph the answer that we want to add. So let's go ahead and first type in this. So we have const the guess button, which is going to be document dot query selector. And it's going to be that guess button that we give it. As you can see. So here we have an ID of guests button. And now let's go ahead and give that input. So input, Let's give it the input, the better. So guess is going to be document.write, inquiry selector. And also hashtag processes is a an ID. And let's just checking that's how it's risen. So guess put. Yes. And we have the paragraph. So councillors same message is going to be document.write querySelector and also an ID of message. Now of course, we need to manipulate the maximum and the minimum and you've already give them an IE. So Maslow Han and also add deals. So here cons max. Let's give it a max equals to document that choirs lecture. And let's go ahead and give it a man called Mad Max num. Okay, so max now and do the same for our minimum. So here, copy it. These two set of marks, right, men, and here, minimum number. And lastly, let's go ahead and get that. And like that game element, which is the div containing all of these. And we'll see why we need that in a moment. So constituting document dot query selector and of course my d of D. So now the first thing we did is get those elements that we'll be working with inside of our JavaScript. So that should be your first intuition whenever you start writing JavaScript. And now, let's go ahead and assign the minimum and maximum. So we'll create two variables. Let max equals to, let's say ten. And you can add a comma men equals to C 0. And so we assign these to variables inside of our JavaScript. And now let's go ahead and give those values to those values inside of our document. And so the way to do that is by adding max and that textContent. It's going to be equal to that max. And similarly, min and textContent is going to be equal to that minimum that we are initializing tell about JavaScript. So that way, whenever we type in here, is going to be visualize or webpage. So if I go ahead and save that. So if we go ahead and open a page, you can see that it's between 010. And I will just go ahead and try and change the values is to see if it actually works. So it's intrinsic 2010. And save that. And as you can see, it is between 1020. So this actually works wherever we typing inside of our script.js. So here max 1020, we're assigning it to the text content of that max n. What is max n? That's the document that coils lecture of maximum. So we're actually typing in the text content of an element that has this ID. Okay? So now that we've initialized the minimum or the maximum, let's go ahead and start writing our functions. So we actually want to wait for. The user to click on that guess button to know, what did he actually guess? So for that, we have to add relief at, I guess, sorry, and an event listener to that guest button. So let's go ahead and type in gas burden that add event listener. What is this event is going to be the cliques. So whenever we click on that button, we'll be adding a function that will do certain task. And what would that task B? Well first we need to read wherever the input the right user wrote into our guess input. So let's go ahead and type in guess ie equals to wherever that value of our guess input was, so that value. And now, in order to know if the user one or not, one guessing that number, we need to have actually a winning number. So let's go ahead and initialize and winning number. So winning number equal at say they'll give it a number of, since it's between 1020 is given a number of 16, just to see if that works. And now what we need to do is to check if that input that the user entered is actually equal to that number. But first of all, we need to check for something else. And that something is to see if this number is actually between the minimum and the maximum. We can't add a number that is out of that range because it's out of that range and the user entered an invalid input. So our first condition is that the user has to add a valid input. Let's go ahead and type. And if, so, if that gets input that the user has entered is equal. Not equal is greater than the max and put maximum work. Or for that gets input is less than the minimum. So the admin, and then we'll go ahead and give that, give that message. So message dot inner HTML. Let's give it. You enter an invalid input. You entered invalid input. So that's our first condition. Now, false. If he actually guessed a number that is between within that range, we need to check if it is equal to that winning number. So if that guess and put was actually equal two, that really number. So winning number would go ahead and say message dot inner HTML equals two. You guessed the number. Ok, so that would be the message. Now, if it wasn't equal, so l, So this number was not equal to the meaning number. We go ahead and say that. You did not Yes, but numbers. So you let's say love, loss. The number was and we'll go ahead and say, what was that number? So winning number. Okay? And that has to be a value. So its value does not know about OK. So I'll just go ahead and see what we have. Until now. Event listener, which is whenever we click on that guest button, if we click on that decimal, we're going to get whatever the user entered into that gets input. And then we check if that input is between within the range of the maximum and the minimum. And it is, we'll say that you entered and if it's not, sorry, we'll say it's, you enter an invalid input. If it is actually between the range will continue to check the other conditions. And other conditions will be if the gas is equal to the winning number, and if it's not, if it is, we'll say that the number if not, we'll just say You lost number was that number over here? So let's go ahead and try that now. So let's see, I guess let's say 14. So we know that we have to have a message that says that the loss. So let's try and submit. And you can see that we're getting an answer of you entered an invalid input. So why would that be? Well, in JavaScript that whenever we get the value of an input that we typed in, it actually gets it as a string, not as a number. So here whenever we're comparing, we're actually comparing that gets input as not a variable number but a variable string. So we need to somehow parser to be an integer. And it happens to be that in JavaScript we have a function that's called cars pin. Here, we'll go ahead and type in that function, which is called part. Now one more thing. If that value that we entered was not a number, then it's either gonna be greater than Ymax and nor its going to be less than minimum. And it's going to be actually not be numbered. And so we also have to check for that condition. And to do that, we have something called num. And so that will check if our guess and put this not a number. So in that way we're actually, I'm checking for three valid conditions. It has to be within the range. It has to be actually numbered, not nanomolar. So now let's go ahead and save that and check our page. Let's go ahead and press that. So let's first add something that is not within range. So you can see now that you are facing another problem. And we can conclude our analyze that problem has to be has to have something between the range that we're adding. So there's something wrong with the condition that we're adding that says that it has to be between the maximum and the minimum. And so let's go back to our page and see what could that be? Well, here where we're comparing actually that input, which is an integer, that max and okay, so however that max and could be a string. You can see that this is a string. However, we wanted to be a number. So let's go ahead and try and assign values to those that have assigned here, which is a number. You can see that its properties are number. So let's try and see if that works now. So I refresh my page and let's add, let's see if it submit. So you can see that it actually works because now we're comparing a number to another number and that is true. So now we are saying that we've entered an invalid input. Let's go ahead and try entering about them, but however, not the correct one. So you can see that now we lost the number was 16. Let's say enter 16 and submit. We get that, you guess the number. Now, we want our game to be as user friendly as possible and as challenging as possible. So we don't want the user to just type in any number until he guesses the right number. That would be somehow challenging. So let's make our theme and go ahead and let the user play three. The user has to have only three trial. And so the, if he did not guess that number within these three trials, then he would have lost the game. So we'll go ahead and do that. And the next part of the video. 28. Guessing Number Part 2: So now in this video, we'll first be implementing the number of times the user can play the game. So we'll go ahead and initialize a variable is called chances, and let's give it a value of three. So the user has only three chances. Play either wins or loses within these three chances. And so what we want to do is that each time that user loses, we want to first decrement that value. So with say chances a minus one. And that is equivalent to chances equals two, chances minus one. That is equivalent to that. But that's a more simplified way of writing it. And now, after we decrement that value will check if that value is equal to 0. So if that value is equal to 0, then go ahead and say You lost. And a number, while the correct number was the correct number was done. However, if it's not, then we'll say something like wrong answer, please try again. Okay. So wrong or I guess actually surrounding us. Try again. So let's go ahead and try that. So here's our page. Let's type in, let's see 12. They can submit. So you can see that wrong gas. Try again. Let's try 13. Submit. Wrong guess. Try again. Let's say 19. Submit. You can see that now we lost the game and the correct number, number was 16. However, let's say I now type in 16 and click on submit. You guess the number. You can see that although we lost the game, we were able to re-enter another value. And the same thing whenever we guessed the wrong, the right answer. I mean now I guess the right answer and I can reenter another value, nine. But what we want to do is whenever the user wins the game or loses the game, we want the game to just stop it. Either win or lose. You can't re-entry another, another value. And we can maybe give the user a chance to restart the game and not resubmit. So let's go ahead and see how we can do that. So inside of our scripts, the first thing we need to notice is that we have something in common here between the user wins the game and the user totally loses the game. So here we can see something like this is gained over. Whenever user wins or loses totally, then it's over. You can't continue with the game. And so here we can write something in common so we don't have to keep repeating ourselves. So here we want, whenever we have guessed the wrong input, we want to disable entering another value. So we can do that by saying Guess and put, which is that right here, which is the input on our page. And we can set it to disable. So we can say this table and set it equal to true. So let's see, and let's just copy that and put it right here and see what happens. So I'll go and refresh my page. So let's say I am to 16, which is the correct answer. And submit. You can see that it gives me, you guess the number. Now, I cannot enter another value because the game has stopped. Want again. And whenever I click on Submit, nothing happens, and that's what we want to do. And similarly, let's say I enter three wrong values. So tall from 19. Also wrong. And maybe 17. You lost and I cannot untrammeled right? Now one thing you might see that's annoying that each time you enter a number, let's say 450 mini it, the value is on the screen. We want it to be empty whenever we want to re-enter a value. And so that happens if we did not and to the right answer or we did not exceed the three trials. So what I mean is that we want to always reinitialize that input that he hasn't put whenever we still have chances. So here, whenever I see wrong and put you ahead and say that the guess and put is going to be dot value equals to an empty string. And we wanted to be reinitialized. So now let's go ahead and see that. Let's refresh our page into 14 summit. You can see that now it's 3H lies, and that is much, much better. Now, one thing we also need to do is that let's say I want again, submit. I want to get something like would you like to restart again? And so let's see how we can do that. So what we'd like to do is that whenever we've lost again, then that submit button would be of no use. We don't want submit anything else. So we can make use of that. We can make use of that button to say now Reset instead of adding another button. Since now that is of no use. So we can do that by saying that guest button dot value is now equals to reset. So whenever I lose the game, and I'll go ahead and add that here too. Because as I said, whenever we win or lose the game, we want to have the same aspects. So let's go ahead and give that a value of Reset. And now let's give that, but in a class name, and we'll see why we would like to do that in a moment. So here, dot Classname, and let's give it a class name of, let's say research. And so now let's go ahead and copy this and put them also went on to win the game. So whenever learned again, we also want to resell it because there's no farther from any chances from distance. So now let's go ahead and see. So here's the page. Let's go ahead and type in, let's say 13. So wrong answer. Again, let's try adding the right answer, which is 16. And you can see that now that we won the game, I don't have here submit anymore. Had instead that burden has a text value that has been replaced by the word reset. But now we said does not do anything. So before we go ahead and fix that, let's just also tried to see whenever we enter meta-heuristics that is working. So teens 1711 submit and you can see that we lost, we can enter anything and we need to reset. Now you can see that. See that the reset is doing some strange things. So let's go ahead and fix that. So now what we need to do is we need to write a function that Hills for an event or click on the Reset button. However, that reset button doesn't appear until we've lost the game. So we need to add an event listener to something that is not that button because that button, that result, but then, as I said, doesn't appear until we've lost the totally four we want. So here comes the role of the gain constant, that regard, which is that the right you. So Let's just go and fix that. So small g. So here's what we're doing. We go ahead and say game dot, add event listener. And that listener, there's going to be Moussa. So whenever we click on the mouse, whenever we put down that, when this event will happen and we'll see how that goes in a second. So let's just first write that function. As we know, we can add as parameter here the event that is happening to know some of the properties of this event. Now of course, I don't want to hear and event whenever we click on mouse down on any part of that, a part of that dip. I want specifically to hear an event whenever I click on the submit part of the whole. And the way we can do that is by going ahead and accessing that element. And so the way to do that is we access that event, events properties. And one of the properties of an event is the target. So I want the target of the event. Be that reset button. Now how do we know that this button is the reset button or the submit button? While here comes the role of the class_name. So recall that we gave that gas volume a class name of game reset whenever we lost again or whenever we want the gate. So here we can utilize that inside of that function right here. So I'm gonna say if a target has a class name of the Reset button, so equals to gain reset, sorry. So again, reset. However, that's an condition so that your head at added. So, and here we'll be adding triple equals. And so if that is true, then I have, I have clicked on that reset button. Now, if I did that, what's going to happen? Well, then what I'd like to do is reset the game. Now, how could we reset the gain? It will go back to our page. And let's say, I want to reset the game. Normally, the physical thing that I would do manually is just click reload button and you can see that we have reset the game. So how can we tell JavaScript or our obligation to do that on its own? Well, actually in JavaScript there is a method that does that, that just clicks on that reload button on its own without us having to click on it. So whatever we win or lose the game and click on the resettlement. This page will reload on its own. And so that function happens to be a window dot location. Dot reload. Reload is the function. Now before checking that works, let's go ahead and just visualize what happens when that event happens. Sources command. And let's just add a console.log just to realize how a mouse down event happens. So here that say, okay, let's go ahead and go to our webpage. So that's our repeats. Right-click and inspect. So now you can see that I have not clicked yet and just hear whenever I click on the game. So gain is, what is that right here, which contains all these. So it's not only constrained to the bottom. So if I click anywhere on that, I should have it. Now, Let's go ahead and see where that is. So that you can see where whenever I click anywhere in that place, I should have a quickie. So let's go ahead and see if you can see that. Now. Whenever I click that, I have the OK. Now let's go ahead and uncomment this and take that console dot log in to the statement and see what happens. So now let's go ahead and get the right answer and click on submit. And so you can see that now I guess the number I want, and I haven't clicked the reset any anytime you. So now if I click on reset, you can see that the Patriot loaded and I can read play, however was that I had. And just to see why we can't use the clip, some of you might be wondering, why didn't we just add a click event, not the mouse down. So let's go ahead and try that click event and see what happens. So I refresh that. Let's go ahead and Let's say they can succeed. And I'll be clicking the submit button. So you can see that here. We haven't had the chance to choose Reset the moment I clicked on submit. I want and at the same time, it you loaded at the game. So why did this happen? Well, that's repeated. The moment I click on Submit. I'm actually having to first say that I want. And at the same time, I'm also saying that I want to reload. However, with the mouse down, what's happening is I don't, this event won't happen unless the mouse down his clicked. So unless the finger is not lifted off my finger. So and that way I actually creating two separate events and not to events happening at the same time. So that is why we use the mouse down. So you can see before if you don't 16 submit, it doesn't reset until I click it again because it waits for a mouse done quick and not a whole thick. So now that we've been able to reset this, just pry, I'm losing some some 19th summit. You can see that we also haven't reset. We can enter anything. Let's reset and it totally works. So now we've written on the bulk of the code, the most important part, and we just need to make it a little bit nicer. So visually nice to maybe change the color of the user wins. Maybe make it green if you went and read if he loses. Make the message also. And also at the same time we'd be optimizing our code. So you can see that we've been repeating ourselves. For example, here we run that code twice, once if the user one game, and once if the user lost again. So what you can do here is, let's say Write a function called him over. So got unquote evil. And that function is going to accept two parameters. The first parameter will indicate if he either won or lost, because we'll be using that function into places once if the usual one and once the user lost. So if the user on, let's say the first parameter is going to be true. And if the user lost parameter is going to be false, that's how we'll know the usual lost or won. The second parameter is going to be the message. So maybe if the user one will be saying the number and then add between those, the winning number, as you say, is correct. And then you one. Okay. And that would be the message that we'd like to change its color. Maybe. If the user lost, then we'll see something like you lost. The correct answer. Was that between those curly braces. And so we'll be using the same function in both. And we'll be distinguishing between a user one or the user didn't not when using the true or false. So now let's go ahead and write our function. We initialize function by writing function and then me over. And as we said, will be accepting two parameters. The one, the first one will indicate it user one or not. So let's give it a name of one. And the second is the message. So let's say message. Now. Let's go ahead and remove this along with the disabled because we notice that these three statements are actually repeating themselves on both. So we just go ahead and add them here. So in that way, using the same function with the same statements in books without repeating ourselves. And now, let's go ahead and try to change the color. So first we need to decide what the color should be. Should it be green or red? How would we know that? Well, first, let's go ahead and essentialize that variable color. And we'd like to color to be read as the user one. So if one is true and the color would be red if one is false. So we go ahead and say, what is it equal to true? So this is like a question. Is Y equal to true? If this, if one is true, then go ahead and assign to color the red. And otherwise, we'll go ahead and say, sorry, green. So if the user want, we want the color to be green. If not, so if one is false, so the user lost, we go ahead and assign rent to color. And maybe we'd like the border of our input to be, let's say also green or red. So let's go ahead and say guess and put dot style. So go ahead and. Enter the style and then that border color. So we want to access the border and we'll go ahead and assign the border color to be that color that we chose. And now we also want the color to be the same for the message. However, let's notice something here. The message more just appear whenever we are. We want a game or relax at Harvard, we also have a message when we have another trial. So maybe we can write a function that is just for messages. And so go ahead and see function. Maybe set message. And this segment should message will accept two parameters, the message and the color. And we'll go ahead and say message, dot style, dot color. I want that color to be equal to the color I have in the parameter. And the message that text content is going to be equal to that message. Now, let's just change his name just for you not to get confused. So this is the message. And so that message over here is not that. That message is actually the one that we're grabbing from our document. We're grabbing that message and giving it a color of that color that we're passing as a parameter right here. And giving, giving it message of that, that we also carried as parameter over here. So maybe here, what you can do is just go ahead and set message and say, I want the message to be the one that we pass already here. So let's go ahead and just see in order for you not to get confused message one here. So message1 and give it a color of color that we've initialized over here. Because as I said, we could have just written that over here. But because we might also use that in the message right here so that the lever in order to not repeat ourselves. So how could we actually use that function here? So maybe also when we have a second chance, I'd like also for the color to be red also. So we can see something like set message. And inside of it, I want the message to be that. And because whenever we have a second chance, who actually lost E, so we can always give a, give it a color of red over here. However, we want also the border to be read but from let's just remove that. But I don't want to disable the input. I don't want to have a reset button and all the things I want to own only that the guess, input, the start, the protocol should be equal to the color. So you can just copy that and add it over here. And the color would obviously new red. There's no other choice. So that way we are optimizing your code, not using several messages. So several message dot style, color. So we've just use it in one place. Okay? Okay, learners, I did something wrong. So everything that's collage mute should we finished three? Ok, so we've actually done the most important part of his style. We have only just one last thing. And that thing has to do the winning number. So maybe I don't want to know what is the winning number. I just wanted to be a random variable within the range. Because I know that 16, so that the game won't be that phone. And if I'm not playing it, I should control it each time or else it would be obvious what the main number is. So what you can do is generate a random number between the range of 1020. So we'll go and write a function. Let's call it generate when. And will give it as a parameter, the minimum and the maximum. And it's going to generate for us a random number within that range. And it's actually pretty simple. We'll just return. Hate math. Dot random. So not at random is going to give us a random number. However, between 01, we want it to be between the minimum and the maximum. So the way to do that is to multiply that by maximum minus minimum lus one. And Matt at random is actually a decimal number. So we wanted to be an integer. And the way you do that is by adding math dot floor. Okay? And then let's go ahead here. Here. Let's remove that for now. So Math.floor madam number, maximum, minimum plus1 and not just that plus MIMO. Why is that? Because man dm is going to give us a number between 01. We multiply it by that range. So let's say here, I want a number between 1020, okay? So I want that maximize minimum plus one is actually sing for us. Law had 20 minus ten plus one, which is actually what? 11. Okay? So I want a random number between 011 and another random 11 is not considered. So it's exclusive, not inclusive. So we're actually seeing 01111 slotting included, so it's actually from 0 to ten. However, we want our function to be from ten to 20, not from 0 to ten, so that indicates 0 to ten. Okay? However we wanted from tensile 20, so will the minimum, which is stem, and then that gives us ten to 20. So we've got a range in that way. So let's go ahead and save that. And we'll set the meeting number to be equal to generate Quinn between minimum and maximum min, max. Okay, let's go ahead and save that. And now let's go ahead and see our guessing game. So actually we stand against the winning number is not 16. So keep that in mind. Okay, so let's go ahead and type in any number, maybe 14, and see if that's the right answer and you can see that it's wrong. We have a red color. They are the borders at the message. Let's try and 19. It's also the wrong answer. Let's try. It will realize the game. The correct answer was actually 20. That's reset. Let's try again. 17, cement around. Answer. Hopefully we could win that theme. We only have one choice left, CBT and submit. The answer was also 20. Let's go ahead and try for the last time. Let's add an invalid actually, so wrong answer, invalid. Mainly 15 Summit, 20, shrunk. So this time it's not 2013. So 30 is the right answer we want. So actually got to win the game. So you can see that it's a little bit now challenging. So we've got to reset it in twice again. And so that is our application. Again, disrupting ocean where we build a page that gives us three chance chances to guess a number that is between 1020. Thank you for staying till this part and see you in the next. 29. Project: Now we reach the last part of the course, which is the most important part, and which is project. So through the project, you'll be creating a guessing game, which is very similar to the one that we've been working on lately in the past. We use. And so what I want you to do is to create that guessing game, which prompts the user to guess the correct answer. And he'll have four chances to guess that court answer. However, something that you might that might appear as new is that if the user did not get the correct answer and his four chances, you'll be given a last chance to guess that correct answer If he answered question that you'd ask him from correctly. So maybe ask him what color is this guy? And if he answered blue, then he'll be able to guess for the last time that the correct answer. And of course, your program has to have green and red colours for winning and losing so many. If he lost, you'd give just text, some red colour. You can play with those. And finally, give your page a nice interface using the things that we've learned throughout the course. So first of course, you need to have the index.html, which has the bulk of the necessities for the user to interact. And then of course, the most important part, which is the JavaScript code, which will enable us also to interact with the user and to do all the necessary things, the loops, the conditions in order to make that a functional guessing game. And if you get stuck on something, you can always go back to the past equivalent working on, as I said, they are actually very quite similar, but I encourage you to change with them. So maybe you think that there are things that might have been better. Change them, make them, update them, make them better. So that's for the JavaScript code. Now, as I said, you can also utilize what you've worked throughout the course. So maybe at a counter, for example, or maybe as we've seen through the currency example, we've taken an API and utilize the information we got from the API. So you can find an online API that has a bunch of questions with their corresponding answers. And if that answer is that the user entered is equal to that answer, read God from the API to that correspond the question, then the answers correct. So maybe you can use the API for that reason, for example, we can't be as creative as possible. Go through what we've work and see if you can implement some of the things that we've worked on in your project. And if you've got stuck on anything, just feel free to add that in a discussion and we could figure it out. Thank you so much. This one said a lot of