Build app using Javascript ES6 | Tech Vista | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build app using Javascript ES6

teacher avatar Tech Vista

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (2h 10m)
    • 1. Lecture 1 Introduction

      1:29
    • 2. Lecture 2 Tools Required

      0:56
    • 3. Lecture 3 - ES6 Overview

      0:40
    • 4. Lecture 4 - ES6 var vs let (Optional)

      9:06
    • 5. Lecture 5 - ES6 let vs const (Optional)

      5:08
    • 6. Lecture 6 - ES6 Arrow Function (Optional)

      5:34
    • 7. Lecture 7 - ES6 Template Strings (Optional)

      3:51
    • 8. Lecture 8 - Prototype Methods (Optional)

      4:50
    • 9. Lecture 9 - ES6 Classes (Optional)

      3:07
    • 10. Lecture 10 - Spread Operator (Optional)

      6:06
    • 11. Lecture 11 Initialze project

      3:25
    • 12. Lecture 12 setup folders and project scripts

      8:34
    • 13. Lecture 13 transpile our javascript with babel

      6:50
    • 14. Lecture 14 add form html and css

      4:34
    • 15. Lecture 15 addform class create handlekey method

      14:39
    • 16. Lecture 16 create handlesubmit method fetch data from api

      9:52
    • 17. Lecture 17 create appclass addcard method

      10:18
    • 18. Lecture 18 add cardlist function and render function

      7:38
    • 19. Lecture 19 add card function destructure parameters

      9:39
    • 20. Lecture 20 display error to user with formatError function

      4:50
    • 21. Lecture 21 remove all cards with clear cards method

      3:55
    • 22. Lecture 22 use local storage to persist our user data

      4:53
  • --
  • 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.

32

Students

--

Projects

About This Class

This course is for anyone looking to learn the modern approach to building apps in JavaScript.

The app we will build will be a Github user finder, and along the way we'll learn how to use essential development tools such as Webpack 4 and Babel, the most practical features of ES6, like classes, modules, promises, arrow functions, destructuring and the spread operator, as well as work extensively with DOM.

This course was designed to teach you the fundamental techniques and features of modern JavaScript to give you a direct path to start building apps with React

Meet Your Teacher

Teacher Profile Image

Tech Vista

Teacher

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.

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.

Transcripts

1. Lecture 1 Introduction: Hello friends, welcome to dispose of JavaScript ES6. Pose with Project. Ok. So are there any course requirement or play liquid site? To work on this project, you must have the following skillsets. We should have a basic knowledge of HTML and the basic knowledge of JavaScript. Foods objective participant will be able to implement JavaScript ES6 concepts in current and future projects. What you will learn in this course, we will create a GitHub user finder using the R script with ES6 features. So who other targeted student? Student with no ES6 experience, front-end developers and anyone who wants to learn JavaScript ES6. By the end of the course, you will have the falling skillsets and on regarding practical and real life scenario of waiting a bit up Finder using JavaScript. So let's get started. So what are we going to bill first? Let see. So we are going to create a GitHub Finder. If I type and if I hit submit, you will get the data of this user, okay? If I type facebook and if I hit submit, you will get the detail of this user. Okay? So this is, and if I hit on clear button, so the data will be cleared out. Though this is a project which we are going to create. The ones we've finished a project. You can create your own project and submit it in the project section. So this is it Father improve video and I'll see you in the next video. 2. Lecture 2 Tools Required: Hello friends, welcome back. So in this lecture we will see what are the tools required for this project. So we will be needing NodeJS, okay? So you need to go to nodejs dot ORG and you need to download this LTS virgin. Okay? So if you are a Windows user, you just need to click on other downloads. And from here you can download, okay, for Windows and for Mac, you need to click here and you can install it. So this is a tool which we required NodeJS and the other one is the folder into this Visual Studio code. So I'll be using withdrawals to be report. So you can just download from your and install it in your machine. And if you are a Windows user, you just need to click on this arrow, click on this icon, and you will be able to download this software and then you can install it. Okay? So there's other tools which we required. So this is it for this video and I'll see you in the next video. 3. Lecture 3 - ES6 Overview: Welcome to ES6 grad schools. And let's see what are we going to go in? This goes so far as we will see the difference between wired and lead radio button. And then we'll see the difference between legged and guns. And after finishing this, we will see the ES6 ADL function. And after that we will see ES6 template string. And then we'll see the prototype. And then ES6 classes. And last but not the least, realty does, but I don't break this. I'll see you in the next video. 4. Lecture 4 - ES6 var vs let (Optional): Hello everyone, welcome to the ES6 class goes for writing the code. We need to go to ESPN.com. And we need to uncheck HTML data and output data. And we need to check JavaScript them and control them. And before we start writing ES6 goal, we need to write one line of code that is a strict JSHint. E s Next, coolant through strip and a slash. What this line of code means. The ES next option tells JSHint that your board uses ES6 features specifics index. For that reason, we need to set this option so JSON doesn't raise any unnecessary warnings. I'll show you an example. Let's say I take leg name equals two. So for us my name. And if I don't write this line, so it will give me a warning. So to avoid this wanting, we need to write this line. So let us start our lecture. So before explaining you about let variable, let me explain you about Y variable. For that reason, we are going to declare a variable varname equals to set for us, which is my name. And we need to console this name. And why we are able to ID assigned to reassign this video, but we need to write name equals two. And we need to control it again. So let's run this code. And here you can see that it prints My name's And for us first, and then it prints the value of name has been, the value of this variable has been reassigned. Okay? So let me delete this, clear this, and let me delete this. So now let's talk about scope. For that. I'm going to declare a function, function print name with no arguments. And inside this function, inside this Gottlieb, this is we need to declare a variable, mean equals to set for us. And we need to control this name. And to execute this function, we need to write print name. And let's run this code and it will print mining. So what would happen if I try to print this variable outside its scope? So what do I mean by school? Well, this will be a variable is declared inside, inside this block and it is locking. We cannot access it anywhere else. Suppose I try to do so. Let me try logging this name. Let me try this. Try logging this name outside of scope. Like me got ten. Let me copy this here. And let's come into doubt this function by pressing control slash. And let's run this code. So you can see it is not venting my name, it is giving an error. So you cannot access a variable outside of school. It is only scoped to that function. If you've declared outside the functions, suppose if I declare it outside the function, let me copy this, let me paste it in. And let's clear this and let's run this. So it will print my name. In this case, you can access anywhere in the file. It is best to avoid global variables because as your code become little complex, it is, it becomes harder to figure out which functions are reading or writing to this variable. So try to keep variable inside a function. And if you need to access that variable value outside of its goal, simply give that function a return value and excess it accordingly. This is a basic concept of function scope. Let's delete all this. And let me clear this out. Let me declare a variable or y equals two. And let me write the if statement, if name equal to set for that. Sorry. If this statement is true, then I want to trigger this block of code such that I want to create a new variable, fullName. So for us and we need to console this. Let us run this code. And it print out my full name. As I said earlier, y variables are functions school. They are not limited to the closure of if statement. So they are not limited to the closure of this if statement. I can access this variable outside office if statement. Let's console dot log outside the school. Let me cut this and let me paste it outside this curly braces. Let's clear this and then this again. And you can see it is printing my name. As there is no function. This variable is accessible to the entire window. It is basically a global variable. What if I want to access only in the if statement? As we know that y variables are not block scope data function School. So ES6 came up with a let statement. Let us replace this Y with lead. And let me cut this. And let's, let's clear this and let's run the code and everything works fine. What does lead? Lead is a block scope. What is a blog? When you see two curly braces, one opening and closing, that is a blog. And you're the lead variable. Values are enclosed inside of the scope of this blog. They are only accessible inside of this two curly braces. So as you can see that it prints my name. Okay? And everything works fine. And lets, so let's run this code outside the school. Let me correct this, and let me paste it here. Let me clear this and let's run it again. And as you can see, it is giving me an edit. So we cannot use this variable outside of school. And this is the end, that is the end, that is the common defense between water and lead. So always tied to use leg Institute of let me delete all this. And let me clear this. Let's declare a variable varname equals to send for us. And again this type one name, VS in2, sum eat, and console dot log name. And let's run this code. So it will print. It should display an error. We should not be allowed to use the variable that can cause a lot of bugs and confusion in the application. So if I try to do this with lag variable, lead, Ripley's lot with lead. And let's clear this stuff and let's run. So it will give me an error. Sometimes it might happen that you give the same variable names, which can cause a bug. In this kind of situation, leg will be very helpful. So I hope you got the difference between the y variable, n late variable. So in the next video we will look at the difference between Latin const. So if you like this video, please like share and comment and please subscribe to my channel. I'll see you in the next video. Till then, take care and bye. 5. Lecture 5 - ES6 let vs const (Optional): Welcome back to another we do. In this video we're going to talk about let n const. As we discussed earlier, that let is a block scope. It means its value can be accessed inside of the block. And declaring a variable with one makes it function scope, such that it values is confined to that function that it was declaring. I've gone to test like lead is also block scope. For example, inside of the block. Instead of this blob, let's declare a constant which is equal to T1. I can only access this inside of this block. Since it is a block scope. If I try to access it outside its scope, let's console this. And let me copy this age and let me console dot log h. And if I run this, it will give me an error. So what is the difference between let and cons? The compiler allows you to update lag variable. However, with constant, once you assign a value it's over, you cannot update it. For example, if I tried to change this age from 21 to 41. And let me label this. Let's clear this and net. So it will not allow me to change the value. And here also you can see that attempting to override eight, which is a constant. So in constant. So in const, we cannot update the value. So when to choose LED and when to use const, venue or declaring a variable. And you feel it is not going to change, then always go with constant. Otherwise, if you are declaring a variable whose value is going to update it, then go with late. Let's see an example. Let's declare a medium. Let me clear this. Leg. Nuclear does as well. Let's declare a variable cost. According to an object such that the person has a name, which is according to John. And gender. And gender will be. So let us come to this. Let's run the code and it will print the object, gender, male, N, named John. So everything works fine. What if I want to update this Bunsen object equal to new object for that we need to ride. And gender, female. Let me clear this and liquid on this. So it will give me N edit. You can see they're attempting to over 8%, which is a constant. If I change this cons to lead. And let's run the code again. So it will change it to female and the name will be sad I picked is allowing it to update the values. So let's go back to Const. And instead of changing the entire value of a person, only changes property. For that, we need to write person dot name equal to sign and person dot gender, female. Let's clear this and lets run. So here you can see it is allowing to update the property. So with const V are never allowed to change the value of an object, but we can't change its property. And that is all for Latin cons. In the next video, we will discuss about arrow function. 6. Lecture 6 - ES6 Arrow Function (Optional): In this video, we will discuss about ES6 ADL function. Let us declared an edit const integers, which is equal to and at open ditches 123. Now I want to modify all its value such that every element is going to have a value that one plus higher than the current integer value. So instead of 123, make it 234. The way of doing it is through map functionality. It will go through each single element of this adding and updated accordingly to what we want our return value to be. So declared a new Const. Update integers, which is equal to n digits. Dot map, which takes in a function containing each number. In the added. Now we are going to modify this block of code. It is going to look to every single number in the Add a such that we can access it to this way, but which will return updated number with one added to it. For that we need to write. We've done number equal to one. So it takes this number correct value, add one edge 128, and this updated number will become our updated value of R. Adding this edge should now have the value of 234. As we loop through every element of this, add a N, incremented it by one, returning the updated value. Let's control this log of n digits. So then the pole, and we are getting 234. So now instead of this function, let's use ES6 ADL function. So copy this goal and pasted and let me comment that out by placing gonna go land slash. So you can have a reference of this Golden. To declare the arrow function. Just remove this function key and add an arrow, right? App.use argument. This arrow is also known as factor. Oh, let's run the code, let's clear this and then the board. And you can see that everything is working fine. We can make this into one line of code. So inside of your function and turn off your function, instead of this block, you are returning a value. So we don't actually need this scope, this two curly braces. You can return your updated value directly, directly through your fat arrow. So remove the return statement. Return, and remove this to belly braces as well. And make everything in one line. This is known as implicit return. An exclusive return is when you explicitly specify that you are returning something. And since we are having only one parameter that's been sparse, that, that has been passed into our map functionality. You can remove this Batten disease and everything will be fine. Let's clear this and let's run the code. And you can see the output is same. What if we want to change all of these elements to a random strings? So map will look through all of this element and for each element, update its value to John. In this case, we don't actually need this number parameter. So we are not really making use of it. So just remove this number and instead of this number per one, and instead of this number plus equals to one, we need to write a string of John. In arrow function. If you don't intend to specify any argument, you must have two parenthesis. So we need to do better entasis and that desk later this code and let's run the board. And you can see it is printing Joan, Joan and neon. So that TED about arrow function. 7. Lecture 7 - ES6 Template Strings (Optional): In this video we are talking about template string, template string replacement for years by a string concatenation. For that we need to declare up on ST name, which is equal to John, and bonds to it. And we need to declare one more variable gone sentence, which is a pointer to my name, is blank. And in that blank, we need to add this variable name. And I am blank years. So in this blank we need to add this video but h. So before he introduced templates chain in order to play string, we need to stop the string, add a plus sign and plays a variable called name. This radio, but we need to add here. And again at a plus sign, again start the string. And same goes for h. We need to stop the string, add a plus sign and add a variable name age. Again, we need to add up plus and we need to start a string. So let's run the board. Saudi. We need to console it over to console sentences, sentence that run the code. And you can see that it is printing. My name is John, and I am 30 years or so. So we concatenated some variable onto a string. This is a tedious process. So JavaScript and produce template string. So let me comment out this code by pressing control and slash. And we need to declare gone sentence, which is equal to four template string. We need to use back Dickey with is above the Tab key. So let's first back Dickey. And yeah, we need to write my name is and we need to put a dollar sign. Need to add two curly braces inside this curly brace is we need to write the name of the video, which is name. And I am and I am. Again, another sign with age. Joe's order will lead to undergo. And you can see that it is printing the same thing which was printing before. My name is John and I'm 30 years old. So in take the template string, you can actually modify the output of eight. For example, if I put d or age into two. Let's clear this and that and the code. You can see that my name is John and I'm 60 years old. So this is all about template string. And in the next video we will take a look on red operators. 8. Lecture 8 - Prototype Methods (Optional): Welcome to another video. In this video we are going to talk about prototypes. For that we need to make a variable const, person, which is equal to an object. And that object we are having properties of name. Joan and age 15. Let us control this. And let's run the code. So it will print out the object with the property of name John N, age 50. So now let's come into all this. And our goal is to create the same object using a function constructor. So to start with, we need to create a constructor function. Function with_name, person, with them a bit to argument's name. And inside this function, we are going to write this.name equals to name and this dot H equal to H. We are going to use this constructor function to create a new object of person. The new object that we are creating with this constructor is having a property name, which is equal to whatever name network just passed in. And the same thing goes with the age. So now how do we actually create this object with the constructor? So right, const John, equal to new person, which is having a name John and age 50. So we created a new object just like this one which has a name John NH 50. Whenever you are creating an object using a function constructed, you must declare the new operator. Now if I console log this new object, let me console this new object, John. And let's clear this and lets run this. So it is giving me the object with the property of name John and age 50. So we successfully created a new object using constructor. What if I want to have my objects and methods? What do I mean by this? Let's quickly see an example. I create an array, numbers equal to an array of numbers, 123. As soon as we declared this array, we get access to all sorts of methods like Vader, numbers, greater numbers, dot map. So this numbers variable was created from the global constructor adding, which contains all sort of prototype method like filter and map. All of these methods are now deceived by this ribbon numbers. We want to do the same with our Person constructor. We're going to give a prototype method as soon as we declared new object from this constructor, so it will receive those method. So right, person dot prototype, dot welcome, which is equal to a function with no arguments. And inside this we are going to control log or templates string. For that we need to write in bacteria. Hi, my name is and I did dollar sign and open the girly basis, this dot name. So you are welcome is the method. Now, right? Just remove this control of John. And right. John. Welcome. And let's clear this and lets run this code. So it printed out, Hi, my name is John, and this is all about prototypes. And in the next video we will talk about ES6 classes. 9. Lecture 9 - ES6 Classes (Optional): Two declared, it lasts right glass with_name person. And every class has a blog with Duplessis, two curly braces. It is the body of your class. And inside the body we have to declare our constructor. We have a constructor in the last we do to create object, we can declare it inside the body by writing constructor, which takes name and H. So how do we create an object from this constructor? It is the exact same code that we did in the function constructor, this.name and this dot h. Let me copy this and let me paste it. And let's remove this comment. This constructor function will use to create new object or person. But how do we actually declared an object from this constructed? It is the exact same thing as before. Which is equal to new person, which is having a name John. And age 50. And let's console log John. And let's run the code. Sorry, I forgot this. Let's clear this and let's run the code and everything works fine. So we just created an object John from ES6 class constructed earlier we gave off function constructor prototype method of welcome. And our n, our object was able to receive it. We are going to do the same thing with ES6 class. To give our class constructor a prototype of welcome. Simply the ICT. Welcome. Brackets with round brackets and two curly braces. So it is more easier than before. Instead autumn method just copy this line console log. So here I am able to write, Jon. Welcome. And let's remove this console.log and let's clear this and lets run this. So it is working fine. And so we are successfully able to create an object with ES6 class constructor. 10. Lecture 10 - Spread Operator (Optional): Welcome to another video. In this video we will talk about spread operators. We will look how we can expand AD is an object with this bread operators. For this, we need to declare arrays. So let's do it. Const names, which is equal to an array of names, which is which have John, Sam, and Bill. And we have one mole on more names to an adult names, Mike. And so how do we use bread operator on these two values? What does beta o beta will you do? It will take every single element from our Eddy and it expands and Eddie and do it element. This element will appear individually. Let's console.log name. So let's console it. And what it does, it will print out the normal eddies. So let's run the code and you can see it printed out the non malaria. What if I add spread operator before this? Let's clear this and run this. It printed out this elements individually. Records are gone and it has spread it. So how it is useful, what if I wanted to combine them and in between I need to write the name of Johnny. Let me show you what this copy this. And in between I need johnny. Let me copy this as well. So I want something like this. I want the result should be like this. And everything should be in a single edit. John Sam, bill, Johnny might run. Okay, so let me clear this. And how would we do it with ES five? So we will write name, all names, which is equal to a blank adding NMDA. Let's contact the editor by writing all names. Names, names, semicolon and John Salmon. In-between we named Johnnie, so I'll write all names. Dot push, Johnny. And now the result will be, and again, I have to write all names, which is all names, and more names. So finally we will get all the names. So finally we will get all the names. So let's consoled us. Log all names. And that's it and of code. And you can see it printed out all the names with John, Sam, bill, Johnny in between and my ball Rani. So this we have done with ES five and let's do it with ES6 plant operators to spread operator allows us to do all of this in a single line of code to let's delete this and commenters tremendous out with control and slash. And here we need to give gaunt all names and Adi, and inside that at a, we need to put this array of names. And before this we need to write, we need to give spread operator. And after the names, we need to write any two edge on. And then we need to write more names. And before more names we need to act as spread operator. And let's control this on names. Let's clear this and let this format to comment this out. And you will get the same result which will getting earlier. So housing bullet is with by using spit and operator, we can simply write all this in one line of code. So this is it all about spread operators. See you in the next video. 11. Lecture 11 Initialze project: Hello friends, welcome back. In this lecture, we will initialize our project. So let's create a folder on desktop and name it as GS hyphen app. And now we need to open this folder in Visual Studio code. Okay? So this is the folder which we need to open in our code editor open, so I'm using we chose to be aboard, so let us open it. And here we need to click on open folder. And the folder name is JS hyphen app. That's open this. And now we need to close this. And I need to open the terminal so I'll press Control and back to t. Okay, back to C0 is about the Tab key. Now yo we need to write npm init. And you're asking me the package name. So let's keep it as j is half an apt, press enter virgin. Let's keep as it is, press enter description will be a GitHub find finder application, okay. Enter entry point, enter test command entered Git repository and Turkey would enter, altered my name, license entered. And here also we need to press Enter. Ok. So now this package.json file has been created. So now we need to remove this entry point. Okay, we don't require this. Lets save this. And now I will install a few packages which are required. So let's install it. So npm install data's tests, save des dev, okay? So all this will be development dependencies, okay? The first one is web pack. And the agenda which I'm going to use is 4.14. Okay. And the next one is Web back. I fancy a lie. And the Virgin, which I'm going to use is 3.8. So last one is web pack. I fund dev, iPhone, etc. And the words enrich I want is 3.1.4. And then I'll press enter. Okay, so this will take some time. So now all these dependencies are been added yet, okay, WebEx, WebEx CLR and went back to upset. Okay, so in the next lecture, I will be creating some folders and files which are required for this project. So this is it for this lecture and I'll see you in the next video to lend, to get into. 12. Lecture 12 setup folders and project scripts: Hello friends, welcome back. In this video, we are going to create some folders and files for our project. So we will create one folder, okay, in the main folder, which is iPhone app, we will create a folder with the name SRC. This folder will create all the JavaScript files, okay, and now we need to create another folder. And this folder, we will name it as dist, okay? Now this folder will create a, it's, now this folder will be a kind of output folder which contains a finalized our script file and index.html file. Okay, so let's right-click create a new file and name it as index.html. Okay, for now inside this disk folder we have index.html. Now we will type exclamation and press step. Okay? So in Visual Studio code, it will allow us to create a very basic HTML document. Okay? So exclamation and tab help us to create a basic HTML document. Now let's replace this document to get up finder. Hey, let's save this. And now inside body, I will take our div with an ID ballroom. We put a step. So this is our div with an ID root. Let me save this file. And in SRC folder, we will create Bu files with the name index main.js. Ok. And the second one will be test dot js. So WebEx allow us to use ES6 models. So let me show you what that exactly means. Let's create a variable ponds and they may test text, which is going to be hello world. Okay? Now we are setting this variable to Hello World. Now, this variable, now we want to pass this variable to another file. So we need to pass this to index dot index.js. Okay, let me save this. To pass this variable to another file, we need to export this to export before. And the variable name. Okay, fixed. Let me save this. Now. We want to pass this to index.js. So we need to go to index.js and here we need to import it. So import text from dot slash as it is in the same folder. So dot-dot slash n Dunning author file, which is test. We don't need to write ab.js, okay? Now we want to output to that text to the div with the id of root, okay, that we have created. So to do that we need to say document dot querySelector. And inside this we will take the ID which is root. Okay, so how should we go? This is the ID, okay, we want to show that next year so as root. So this is how we select our due, okay, then we want to replace the text in that div or edit text. Okay, so to do that, we need to write dot in a text, okay? And we need to set the value. So we want to show this text, okay, hello world. So it is in this way where it takes, you only need to write text. Okay, let me save this file. Now we want to create, Now we will create a couple of clips. Okay, so let's go in package.json and let's remove this year we will create a couple of clips. So the first one is built. And that is going to be wet back. Hey, let me save this file. And now we need to run this loop. So npm run varied. Okay, we need to come to their terminal and write npm run, build, and press enter. Okay, so as you can see, we are getting this warning, so don't just ignore it. We will fix it in late. We'll fix it later. So we get a set, okay, then we got main.js file. So this main.js file is created in dist folder. If I open this main.js. So at the bottom, this is the code which we wrote document.ready selected in her text. Okay. And you're, as you can see, this is the minified JavaScript and this is the code which we wrote at the end. Now we will go to package.json and your I will write one more script. So this will be watch. And your. We need to write web space. And the flag name is hyphen, hyphen watch. Okay. So web back with the flag off watch. Now let's save this and now let's run this clip as well. So npm run watch, press enter. It will start same like our script, okay? And we will get the same output like S8, Okay? Main.js. But here as you can see, the size of main.js is 1010 bytes, okay? 110 bytes. And again, there's a warning. So let's ignore this right now. Now if we want to add some JavaScript in index.js, though, let me add some. Let me add HADOOP. So document.write querySelector and your eye will add div, okay? And if I save this file, you can, you will see that main.out in main.js, this will increase, the size will be increase. Okay, so let me save this file. And now if I go down, so yeah, as again see, this ice has been increased. Okay, so web BEC is watching our JavaScript file in the source folder for any change. So this will be useful for us. Okay, let me remove this. We don't require it. Me saved it again. And you will see that it is, it come back to when the dough. Okay? Now we need one more script. Okay, so let's go to package.json. And you are we need to write dev. And you're willing to write web pack. I've been dev paraffins server space that stash open and your NPM and watch it. Let me save this. And lets run this last trip or get to run this large script, we need to go to index.html. And we need to write script SRC, that is going to be main dot js. And let's close this, that save this file. And now we need to go to terminal, press control C. And you are, we need to write npm run dev, okay? Because we have mentioned Deb, Ok, so NPM then Deb, let's press Enter. So now this will open in the browser. Okay, I'm getting some issue. Let me save this. Let's try it again. Npm wooden dev. So I think something is running on localhost 800, 80. So I'll just restart the machine and I'll come back. Okay. So let me stop this video. Ok guys, so I've done a mistake here. We need a flag open and your We need to write an end of this. I forgot to type it. So sorry for that. Let's save this and now let's try it. So Control-C, npm run, okay, press enter. Now it does open a new window. So localhost 800, 80. And if I click on this, you can see hello world. So this, there was a mistake, so I just found the mistake. Okay, so this is a warning so we can ignore it for now and we need to add Android Booker. And this open with the quiet for now. In the next lecture, I will show you how to remove this open. And we can see this. We can see this hello world without this dist. Okay? So this is it for this video and I'll see you in next video. Event, take care and bye bye. 13. Lecture 13 transpile our javascript with babel: Hello friends, welcome back. In the last video, we have successfully set up web back, but we have to click its library, do localhost 8080. We have to click this, this folder to run this index.html file in the browser. So two changes behavior. Ok, what we want to do is like if we are on localhost 8080, we should see hello world. Okay, so to change this behavior, we need to go to retell Studio code and we need to create a config file in the root directory open. So now I am the root directory and here we need to click on new file and name it as web backed. Dart on fake. Rj is ok. And here we need to write module dot export. And that is going to be an object. And inside this we will take up property mode and it will be developmental thing. And the next property will be Dev server, which is going to be an object. And we need to write content base. So we need to define the path OP dot slash. And if I save this, and now if we then we need to come build terminal and stopped or terminal by pressing control c. And you are, we need to run the script. Okay, so npm, run dev, press Enter, OK. And one more thing. Before doing this. 1 second. Okay, it is working but yours, package.json, we need to remove this flag. This is not required now, okay? But now it is working. So we don't have to go and put this folder. Now as you can see, Hello World has been printed at this URL localhost 80. Okay, now we need to install a couple of packages. So that's going to our terminal and press control C. Control c again, I mean, we need to press it twice. Okay? So to stop just now we need to install npm. Install. Does that save that as the pixel? Again, this is development packages, okay? Development dependencies. So first one is Bible hyphen pool. And the origin which I'm going to use is 6.26.3. And the next one is the order at 37.1.4. And the third one is payable, hyphened preset offend ENV at the rate 1.7. Okay, and then we need to press Enter. So be Billy is a tool which is used in all modern JavaScript applications. It allows us to write most recent syntax and most recent virgin note out JavaScript buggy. It allows our strip to be loaded and work in all browsers. So what it does is it transpired News Hour slip into old JavaScript, OK. So now we need to create a new file in the root directory with the name dot babble, RC, you been press Enter. And inside this, we will take an object and we need a key resets that is going to be an eddy. And inside this we will take ENV. Let's save this and now we need to go to bed. Thank dot config ab.js. And we will add a new entry. Okay? So your w light module. And that is going to be an object. And the first property is rules that will be an added and insight at a, that would be object. And inside this object there'll be a couple of properties, okay? The first one is test, and we need to have some regular expressions, okay, so dot js, dollar, and backslash. So what this line does is this line we'll search for files which ends with, which ends with dot js file path, ok. And the second one is use. And this will be an added insight does add it, there'll be an object on the Earth. We need to write loader, which will be equal to B people. I've been loaded. Okay. And the third one will be excluded. As the name says. It will exclude all the node modules which are not required, okay, from the node module folder. So basically it will ignore all the packages that we have installed and look only at third JavaScript files that we have created in our application of okay, let me save this and lets run this npm run belt, OK. We're getting some errors. So this should be node underscore modulo P. Let me save this and let's run it again. So npm will unbuild. So now it is being successfully run, okay? Now if we go to main.js, okay, so let me go to main.js, which is in disk folder. So we see a lot of, we see a bunch of added JavaScript. And if you scroll down, again, let me scroll down so you can see. So there are a lot of minified JavaScript, which we will not be able to understand. But this is how it works. And here is the index.html. So here is the source slash index.js. Okay? So this is a minified version of JavaScript and now we need to write npm run depth, okay, if I press Enter. So now it is compiled successfully. And now if I go to the browser and if I press, so everything is working fine. So we have successfully installed the remaining packages. So this is it for this video and I'll see you in the next video to lend, take care and bye bye. 14. Lecture 14 add form html and css: Hello friends, welcome back. In this lecture we're going to add the UI and some basic styling for our application. Go to index.html. And up above the title tag, we will add a style that OK to die. And inside the style tag. Let's add some style to our project MOOC is still four body. We will add properties like text, align, its holder takes that should be selected, and then the font size. So on ST id as 1.5, id eight. Okay, now I'll take us and what you will write list style, the style that is going to be none. We'll get to this when type was alluding to double that points from the unordered list. And what LA tape background bullet would be that the hash stored CDCs and padding, which should be one th. And that is going to be what? The, hey, let's save this. And inside the body about the, about this div B will take upon tag. And inside the form tag, I'll take an H2 tag. Other title, which should be good to go. Okay. Let me minimize this goes, this nano after edge to be able to leave a all will be searched inside the legally tag type user name. Okay, after the labor deck, I will take input tag, which is going to have a type of text. Means that is waiting to be searched. And let's close this you put leg and are better. This is negative. And instead they're gave every table button. Like will be subject to loss. That is going to be button, parent body and excited. But take something. Let's save this file. And it said that terminal areas right in that, okay, let's enter in are just compiled successfully. So let's go to the browser and let me push. So now as you can see, we have our title, form and button. So it looks good. But now we need to add few more styles for that. We need to use CSS liability. So now we need to go to CD n, js.gov, and the CSS library that we have with due uses skeleton though. Let's search for skeletal tests. And this is the first one we need to use. So if I click on this, okay? So we need the CSS for this. So let's copy this URL. You need to click on this icon, okay? And then let's go back to between studio abroad and up above their title tag. Yeah, I take link Boolean CSS and insert this style.css. We will paste the link which we operate. Okay? So if I save this, and if I go to the browser, anybody cluster page. Now, you can see it looks much better than before. Okay? So this is it for this video, and I'll see you in the next video, Blendtec edit. 15. Lecture 15 addform class create handlekey method: Hello friends, welcome back. In the last lecture, we have created a basic UI and some base styling for our application. Now, we will add some functionality that the user can type in that GitHub username and hit submit, okay, and see some data you. Okay, so to start implementing that, let's go to our code. And first of all, we need to delete this code and index.js. Okay, this is not required. Let me save this file and we will delete this test.js because it was just for testing purpose. So i'll just delete it. And now we will create a new file in SRC folder. Name from Dart is with F S nepotism. And now we are going to use ES6 classes to encapsulate all the functionality for our app. So we need to write class form. And we didn't outperform gloves. We are able to get access to a constructor function, okay? As functions normally called when they're within classes. So by default, within classes, we get this constructor method in which we can create variables. So we need to put variables to this value. For example, if we want to create a variable name, so it's input, then we need to write this search input. And in this case we want to select the input, the only input that we have in our UA, apparently. So we need to write document dot querySelector and insight. We will take a string input, okay? And then we will add activites selector. So in square brackets we need to write name equals two. So now once we have the input stored in the variable search input, we'll add event lister. Okay, so let me save this and then we will add an event listener. So this Dart, so it's input equals to 30 dot add event listener. And the first argument will be, and we are going to listen for an event which is a key up event. Okay? So this is the first argument, and the second argument will be our callback function that we will run whenever we have this event take place. Ok, so this will be an arrow function and now we will add a function call and Bill p up and bulky up. Okay? And the way we reference that in our callback function isn't that end part of the function? We will say this dot and P up. End up identities. Don't forget to add up that entities. Okay, let me save this file and you're the spelling is handled P up. The LP will copy this and paste it here. Let's say this file. Now within the body handle key up, we can just console log something. In our case, I will log. So let's write console log. And in my case I will write qi. Okay, let's save this. So we will see a log every time that we typed in our input. So to look at the log, we can just go to the browser and yell, We need to refresh the page and okay, let me go back to the other. We need to write npm run. So it is npm but then depths. Okay? So npm run depth for this company successfully. Let's go to the browser, refresh the page. And Yeah, we need to right-click and inspect. And we need to go to console tab. And now we can type in our input. But we should be getting our log every time, every key that we type, but we are not getting it. So let's go to our pool. So we need to export this form phi lucas. So the Earth, we need to write export from export default form. Ok. So VI exporting this form class. And remember, this index.js is the base hours Pip file. So yeah, we need to import that form of visceral import from, from slash form. And now we will instantiate our class. To instantiate our class, we need to take a variable, so cons to form equals to new. And we can call it as a method. So form and Penn entities that can save this. So this is from F ROM, okay, with spending was incorrect. Let me save this file. So once we do that, now let's go to the browser and see if we can get the key place logs or not. Ok, so let me refresh this. And now if I type something, here we are getting the key pest log. So it works OK. So our first call back is working, but we can get more information from this add event listener, okay? So we can get all the information from this. So we can pass an event object to our callbacks. So let's pass an event object. And in order to see that in the log, we will pass it to the NLP up functions. So we need to pass such event and then we can pass it in the console log so we need to write even. So let's save this and let's go to the browser. And let me refresh this. And once we type, you're in the input, we can see a keyboard event associated with this event object. I've done enough information about the event that just took place. And for our purposes, the most useful property on the event object is this dark target, okay? Yeah, yeah. So this refers to the input that the event took place on. So event dot target. And if we go all the way down, we can see the value. Okay, so let me go a little more down. So we need to click on this triple dot and we need to go a little bit more down. And we can see the value, and here we can see the value property. And if we take a look at this value of the value property, it is the same thing as what we typed into the input. So this is going to be very useful for us. So we are going to make use of what we typed into the input in order to get information about a certain user. So the way that we are going to do that is we will create a variable outside of the class. So let's go to Visual Studio Code. And yet we will create a variable outside of the class. So const, and we will take n variable as a BI underscore URL. So all should be in depths. Okay? That is going to be the URL HTTPS colon slash slash api dot get up.com slash users. So this is the URL which we will be using in order to get information about a given user. So let's see if this, and within our constructor, we will create a variable with the same name. So this Dart API and data storage URL, and we'll set it to an empty string. Okay? And now we will create another variable with the name Does Dart, search, DOM. And again, we will set it to end and just think, okay, let's save this. Now. Let's remove this unfold log. And now we will take such dummy variables. So this starts, so it's dumb. So this is the start variable which we have created in the constructor, and we will set it to event dot target dark value. Let's save this file. So that's how we are going to get the value that is typed into the input via user cookie. Then we will take this Dart API undistorted URL, and we will take back the key, okay, which is about the Tab key. And then inside this we will take dollar sign and curly braces. This is string interpolation. So we retake the available API and thus vote URL. And then slash this Dart search Dom. Let's say this file. So this is how we are going to dynamically change the API URL. The URL that's going to give us information about a certain user. Okay, so we will console log API and display the URL. Let's save this. And now let's go to the browser. And if I displace this, and once we type in type the input, here, you can see that we are getting the API URL returned to us with the input value. Okay? Oh, we're not getting the input value. Oh, let's go back. Okay, the spelling is wrong. Sbar seats. So okay, let me copy it from your ILP instead. Let's save this. And now let's go to the browser and let's type the input. Still we are not getting. So we are doing something wrong. So here also we need a dollar sign. Okay, let's save this and now let's go to the browser. And if I type something. So as you can see that once we type this in the input, okay, the value, your, the value which we type in the input, we are getting in this URL at the very end, okay? And now when we hit the submit, ultimately that's what we are going to request. So you can see if we add some whitespace, OK, if I add some white space before and after this value, So it is adding the whitespace in the API URL. And we don't want that to happen because URLs never have whitespace included within it. So we can six dat. So let's go to Studio code. And after this event dot target dot value, we will write Dart prim. Okay, we need to write this method. And now let's save this. And now if I go to the browser, and now if I type, let's say Google, and if I add a whitespace before and after, it won't affect it, okay, we will get the value as Google appeal. So now we're getting older texts that we provided inside the input. So in our case it is Google. Okay, so let's go back to Visual Studio code. So now we will create one more variable within our constructor. So after search input variable, we will write this Dart Submit button and we will set it to document dot. Very selective. And inside we will take the select attribute, so that is going to be button. So we need to write button and selector type submit again. So in square bracket we need to write type equals to submit and close the square brackets. Lose the spring. Okay? This will be in double quotes. Okay? So let me save this file. And now what we want to do is whenever there is no value, initially in our form, we want to make sure that we disable the button and we can do that conditionally. So here we can say if this Dart surge dm equals to an empty string, then inside this we will take this submit button, dark disabled and set it to true. Okay? So this will disable the submit button. So there is a better way to write it. So let's remove this if condition. Let me remove this and instead of through, we will lead this re.search. Dumb. Okay? And before this, we will add an exclamation. So this will reverse the Boolean value. If it is true, it will make it false. And if it is false, it will make it two covariants. So let's save this. And now we also want this to be present in our and they'll key function. So let's copy this. And here instead of console within pasted. So whenever there is no such term typing, we are going to disable the button. And now let's save this file. And now let's go to the browser. And if I add some text, and if I click on submit, it will add the text at the end of the path, okay? And let's remove this. And if I refresh it again, if I don't write anything in the import, or maybe if I add some space and if I add submit, it won't reload the page. So we're not going to get a piece reload. Okay. So we are not going to get a form submit for it looks like everything is working well and we will continue to work on the functionality in the next video. 16. Lecture 16 create handlesubmit method fetch data from api: Hello friends, welcome back. In the last section we created the handle key up method. So now we are able to type into our input and change the API URL. And in this section, we are going to be able to hit Submit and connect with that URL in order to get data back about a given user. So the first thing we're going to do is we're going to create a new variable into constructed. So here I'll create a new variable, this form, which is going to be document dot querySelector. And your neater form. Ok. So where this comes from, it comes from here, ok, this is the form, form tag. Okay, so we need that. Let me save this. And now using this new variable, we are going to listen for an event. Okay? So this, this dark form dot event, add event listener. And we are going to listen to submit event okay, to submit. So whenever our form submits, whenever we hit the submit button, it's going to run the callback function that we passes in that second argument. Okay, so again, we will use an arrow function. And the name of the method that we want to execute will be this dart. And submit, let say this file. And now we need to create this method. Will submit. So after handle key up function beauty 3-8 and will submit function. Okay. And seemed like a handle key up. We can pass endl submit method event. Okay, So you are willing to past event and you're also we need to pass that event object okay? To get some more information about the event that took place. So now you are willing to console dot log event. Let's save this file and let's go to the browser. So whenever you type something, let me refresh. Let's remove this. So whenever you type something inside this input and hit submit, we get some information about the submit even. So let's type Google and hit Submit. So once you hit Submit, we get some information about the submit button. You can see we have type, submit and target as form and a bunch of other stuff. Now we will use a very specific method on the event object and whenever we submit our form, third default behavior is to refresh the page and we and we don't want that. Okay. We don't want that to happen. So let's go to reduce pseudocode. And here we will write event dot prevent default. Okay, and let's remove this console. Let's save this and let's go to the browser. Let me demo this. And now the page will not refer. So if I type Google and if I submit, the page won't professor, OK. Just because we have removed the console, you won't see any data, but the pages aren't getting refreshed. Okay, so the next thing we need to do is to reach out to the API URL. We are going to need to make a request to that URL that we created using what we'd type on the input flow. We will install a new package called Zeus. Your first, we'll stop the terminal and yet we need to write npm, install. It seals and hit enter. Flexures was very popular STDP Klein package, which allows us to very easily and conveniently connect syntax with the API, with the URL. And to make use of that, we need to import exothermic install. Now it didn't install and you're at the top. We need to import axial flow import excuse from Zeus. Okay. Let me say this and inside that handled submit, we will write x CEOs. Don't get. So this is the method used to request a given resource and we will pass this Dart API under Split View on it. So axial is.na will make a request to the URL and it will return to us a promise. A promise is a guarantee that the value will resolve at a certain point of time. Ok, so in the future we are going to get the data back about the user that we requested. And when that take place, we are going to execute DOD ten. Okay, so here we need to write dot then. And inside this we will take an arrow function with a parameter list. And here we need to console dot log lists. So writing dot, then we, we basically have a callback function. Ok? So this was the callback function. So we specify what we want to take place whenever we finally get data back. So we are going to have a function where we have less as a parameter, which stands for a response. And we're just going to, we're just going to console log this. So let's save this and let's go to the browser and let's refresh it. Okay, we need to write and being run. And let me refresh this. So now let's type Facebook and hit Submit. So after a certain period of time, we get back all the information from the URL that we requested, data, data property, request information, headers, header information. We only want the information from the data property, okay? And we want to get rid of all the other stuff that we are requesting. Okay, so let's go to Visual Studio Code. And so we can write something like this. Dot data. So this is the one way of getting older data property. But the more convenient way of doing that would be D structuring the panorama terrapins. So let's restructure the parameter. And here we need to write data. We can control data. Let's save this and now let's go to the browser. Let's remove this. And here again we write facebook. And if I enter submit. So now we will look at the data property, okay, from the whole response object. Ok, so we will use all this data in order to show the user information in the DOM. Okay, now let's go to the deal quote and now we will add dot catch. And again we will take an arrow function with a parameter edit. And Ben sold dot eta. And we need to pass the parameter. So here we need to remove the semicolon. So we took a callback function that will have a parameter eta, which will represent any editor that might take place in resolving this promise. And if that take place, we want to pass that adder. And so OK. And I'm going to be penta text promise rejected. Okay. So yeah, I will pretend it. Promise. Rejected. So this should be in a spring. Okay. Let me say this and they'll be a bomb on. Let's see if this fight. Now let's go to the browser and let's reload this. And if we type in user that does not exist. So let's type angular width does not exist. And if I submit a, let me type something. Okay? So now this user is, does not exist. So we can see a foe not fold, not found. And then we also see data with the text promise rejected. And if you click on this arrow, you will see some information. So it took place in the handle submit function. So console dot error. Ok. So this console dot allows us to get very specific information about any problems that might take place when the promise is rejected. And then we notice that the text till remain after we hit the submit. So this takes remains after we hit the submit. So we don't want that, we want to remove this. So let's go to Visual Studio Code. And here we can write this dot form dot v. Okay, we need to call this method. Let me save this, and now let's go to the browser and let me write Facebook, okay? And if I hit Submit, now we get the information and that takes is gone. Okay, so this is it for this video. I hope you liked this video and I'll see you in the next video till then take get and bovine. 17. Lecture 17 create appclass addcard method: Hello friends, welcome back. So now in our application, we can type a GitHub user. And we can hit submit. And we can see that the user's information logged to the console. Okay, so now in this section we will show the data. You're. So let's go to Visual Studio Code. And in index.js, we will create AP class with the name app. And inside we will have a constructor method which will run when our app glass is intense created. Now we will create a new method call at guard. Okay, so here we will create a new method called add card. And this is going to be the method that will bows down to handle submit. Okay, instead of calling console log, we will replace that with this dot add card, okay? But for now, we will have a data parameter inside this ad god. Okay, so here we will have beta parameter and within the body of this function, we will console log data. Okay, let's save this and now we will test down the AD card method. So we will instantiate our app by creating a variable volume AP, Okay, which will be equal to new app. And to pause down that method, we can within the identities of our instantiated form plus we can add a parameter of app dot add guard. Let me save this file. So this ad-hoc method is available on this app variable. Now the question is, where are we able to receive that method? And we are able to do that within the construct that ok, so we will provide another parameter in outer constructor of the Form class. We'll call this add part. And to create it on the phone. Plus, we will say, we will say this dot add card equals to add card. Then let's save this file. And now this method is available to our Form class as they start at plus. And to confirm that, we will just console logging. So console log this dot add. Let's save this and now let's go to the browser. So now as you can see, we are in our phone file, we have add class function. Okay, now let's go to Visual Studio Code and let's remove this console log. You don't require this. And inside handled submit, we will replace this console log with this dot, dot. Ok, let's save this file and let's go to the browser and let's dive. Let's clear this and let's type a user, maybe Facebook. And if I hit Submit, so we are getting the data as we console log data. So it's looking perfect. And now let's go to index.js. Ok? So in, inside index.js, we will create an array of losers. Ok, so within that constructor, we will create a variable, this dot cards, which is going to be an empty Edit. Ok. We're setting it to and team edit. And for each new user data that we get, we are going to want to add that to the edit. And to do that, we will see this dot cards and we wanted to push the new item onto the edit. So dot push. And that method will push the data into the edit. Okay, so we'll just untold log this dark, dark. Okay, let me save this. So once we add the user, we should be able to see that at a, with the user data within it. So let's test it out. Okay, so let's go to the browser and let me clear this and let's type John. And if I hit Submit, so I'm getting an error promised rejector cannot read property push off, undefined. So it looks like it, it is seeing this dot cards is undefined. And if we try again with some other user, may be feasible. And if I hit Submit, again, it is giving me an edit promise. Ejected cannot read property per shelf undefined. So it looks like our application isn't recognizing this dot guards variable. That's why we are getting the value of undefined. So to test it out, let's go to Visual Studio Code. We will console log data. Okay, so let's console. Okay, let's remove this and let's control data. And so log data, let's see this. So if you control logged data, we will see what value we get whenever we call addDoc function from within our fund Form class. Okay, so let's go to whittle studios, the browser, and let's type another user, maybe Google. Let me clear this. And if I had to submit, again here we are getting undefined. So let's go to port and good VD to remove this dot God, okay, let me save this and let's go to the browser. Let me write facebook. And if I hit Submit, so now we are getting our data, but with a log, we're getting returned the Form class, okay, as this value. So we have been so log this. So in this value we are getting the formed glass and we are getting all the specific data that's on the form class. But since we wanting to push our data onto this dot cards variable, we are going to want to access Atlas and sheared off from class. Okay? So whenever we pass our data at guard method down to the form we want to in this case, change the value of this from farm to app. So the question is, how do we do that? So we are going to write a new line. Okay, so let's go to Visual Studio Code. And inside the constructor, we will add a new line this or add dot equals to this dot, dot, dot. So bind is a special method and our strip that allows us to dynamically said the value of this. So we'll just pass the value of this, do it, okay? Which in this case means act. So this line essentially means that any time that we use the add function, we are always binding it to the class. So you can think of buying. This is been buying at a, so in this case we drive ending it again. Okay, so let's save this and let's try to run it again. And maybe I'll Google and if I hit Submit. So now we're getting the AP class because of using the bind method, we can now access the bad variable. Okay, so now we can exist guards variable. So this will be essential for whenever we pass down function method to under that class, we might often need to use this line within our constructor to bind or set the value of this. So within the ad guard, we will say this dark guards equals to an empty array. But instead of like last time using the push method, we are going to use our defense in texts. We are going to use an ES6 features all spread operator. So within the brackets, we will create a new array and we will say dot, dot, dot, dot, dots. And then add up AMA and bus in our data. Okay, so there'll be new to that data. So what this is basically doing, this ln, we are creating a new ad a and which we are copying all the previous value though via popping all the previous value of this dot bars. And then we are just adding that data as the last entry within the Edit. Ok, so let's done TO log this dark parts. Let's save this and we can log this Dark God opens so we'll be able to see what this will be doing for us. So let's go to the browser, clear this, and let's type a user, maybe Facebook. And if I hit Submit, so now you can see it returned in the console. We have an array within edit. There is one entry called Facebook, and that's another. Let's add another entry. Well, Rubin. And if I submit yet another, okay. Okay. We can see, you can see that there's another entity called Google, okay? So the best part of spread operator is that we can change the order of this. Okay? So first one is Facebook, the second entry is Google. So what we can do is we can change this order. Ok, so let's get this. And then we need to paste it here. Then spread operator, let's save and let's go to the browser cleared. And now if I type maybe Google, and if I hit Submit. So as you can see, we have loved Google and then Facebook. Okay? So if I hit submit and you will see that Facebook is on the top and then a Google OK. First it was and he was like it was Google then Facebook. Okay, so the last entry will come first. So spread operator is very convenient way to order entries within the eddy. So this is it for this video, and I'll see you in the next video till then, take that and mobile. 18. Lecture 18 add cardlist function and render function: Friends, welcome back. Now we are collecting all the user data that we're getting from GitHub in this dot dot edit. But now we need to find a way to output all the user data with our DAW. So instead of unsold logged this dot card in our ad god method, we will call a new function called God list. Let me say this phi. And we will create a file for that function in our source folder. So right click New File. And we will give the name of the file as god, guard list dot js. This will be an arrow function. So ponds guard list. And we have one parameter of Tart, which represents an array of users. And within the body of the function, we will create some HTML that we eventually output to the DOM. So we will create a variable that we'll call HTML. So let's say const HTML. And we will set it to, and it will set that equal to back tick key, which are about the Tab key. And this is also known as template literals. This is a new feature in ES6. And inside this we would like some markup. So we will take you and we will interpolate our guard value. So we need to write dollar, and since this is an ad a, we need to find a way to iterate over this cards, over this area element. The way to do it is with the edit method call map flatMap. And this map method takes a function, obtain. And within that function we can determine the output. So it will go over each of this element in our Ad Age and we can determine what it will output. So far, each of the element will give the name dark, okay? And within the written area of the function, we will once again call the template literals. And we will provide some more mockups like LI tag. And we will interpolate god name, okay, so dot, dot name. So remember inside our cards EDI, we have number of object, and within each of those objects we have a name property. So we can get the name of each of the GitHub user that we are storing. So let me save this file. So now we need to figure out a way to get all this mockup that we had rating into the DOM and in particular into the div with the id of loop. So we will create a new function and index.js. So const Grindr. And this will be an arrow function which will have two parameters. The first one is HTML and the second one is node. We are going to parse the HTML which uses certain north. And in this case, it will be there with the idea of rule. And to do that, we will return with the function c naught dot inner HTML and set it equal to GM and that we're passing in and do able, and to be able to write all this in one line. Let's let the return part. Of the function in Identities. Let's save this file. On the earth, it is T and men. Okay. Let me save this file. And now we need to go to godless ab.js and yellow, we need to ball the render function. And now we need to make this render function available to calculus. So to do that, we need to go to index.js and will export the function. You're okay with the export keyword, okay? And it went off this. Instead of using export default, let me save this and let's go to in God list, we need to import the function. So import. And we will use curly braces vendor from dot slash index. So now we have this function available here inside the bag list. And as the first argument, we need to pass an HTML that we have created. And then we need to specify the DOM node that need to be on, and the way to do it by selecting the date. But the idea of loop by saying document dot get element by ID and bussing the string of blue. So that will be selected and it will be able to inject the HTML that we have created. Ok, let's save this and last thing we need to export the function, so export default, barred list. Let's see this. And then we need to go to index.js and we need to import godless look is so important. God list from dot slash doc list. So now we are able to call guard list from within our ad guard function. So let's see this fine. And now let's go to the browser and let me close this page. And let's type a user, let's say Google. And if I sublet, let me go go with wheels to do board. And in God list, so it slips portal index.js. And let's cut this board and pasted a bit like we save this. And now let's go to the browser and says the base by the user. We should see the output in the US. But I think there is some issue open here. The spelling is incorrect. Cs would be capital. Let me save this file and let's go to the browser and now let's type Google and submit. So now as you can see that we got output, okay, the NDA you land. So here we got output in the LI. Okay, let's type another user. Let's say Microsoft undeclared submit. There'll began to Microsoft in another enlight. But here you can see we are getting the Palmer fama. So doing all that comma, let's go to reverse pretty broad and impact lift. So we need to use join all those strings together with the join method. So we need to write dot nine. And inside this little Palestine empty string, let's save this. And by doing this, we will, we have removed a comma. So let's type Bruegel submit and Mike goes off. So now we are not getting the comma inbetween the Allies. So this is it for this video. And in the next video, we'll then take that and bourbon. 19. Lecture 19 add card function destructure parameters: Hello friends, welcome back. In this lecture we will add some more information for the Github users. So first, let's see what all information do we have for that, okay, so let's go to index.js and he will come. So log this dot cards. Let's save this and let's go to the browser. And let me inspect. And let's go to until the tab. And yet let's insert name Microsoft. And if I hit submit, we can take a look at the entry in our edit so we can see all of the information. We get the user's email, okay? We get the followers, we get the ID location. Okay? So there are a lot of information which we get. Okay, so now let's go to Visual Studio Code. First. Let's remove the console log, let's say define. And now let's go to FAD, list starches. And instead of just outputting this LI for each of the user that we're mapping over beaches, going to select all that. Okay, So let's, but this airline, so let's cut this entire LA, this we will be using in a different place. And we will replace this with a function which we will call God. Okay, let's save this. And now we will create a new file for this function. So SRC folder. Here you create bar dot js. Once again, this will be an arrow function, so let say const. And this will have a pedometer. And within the body of the function, it will be done. The LA. Okay, so we need to paste it here. And since we are using template literals, weekend format this in multiple lines. So let's formatted because we want to add some more information. So the first thing that we want to add right about the name will be an image. Okay, so let's take an image tag, SRC, and that's willing to be part of that. And there's bowed URL. So this will be an image associated with the, each user that we're outputting. And this we will take an h3 tag, okay? This name, we can take it in its h3 tag. And then around the name, we will create a link. Okay, so for that we need to take a tag, a chatty if. And we are, we need to write guard dot ASTM and underscore to you either. So this will allow a user to click on GitHub user's name and then it will take them Boolean bit hub account, okay. So let's say this and, and then interlinked. Ok, so after the link, we have to take a p tag and we will say public repos. And that is going to be dollar. And inside we light card dot public, underscore free pose. Let's close this p tag and then we will take one mode b tag. This will provide the number of public repositories data given user has. Okay. Then in this p-type, this is an, another p tag where we will provide the user biofilms. So your eye like bio and dollar sign dot, dot file. Those, this p tag. And now last thing we need to do is we need to export this function. So export default, dark. Okay, let's save this and this guard, we are using a godless dot JS, So yeah, we need to import it, okay, so import from dot slash parts of it. And let's save this. And now let's go to the browser. Let me close this and let's type a username. And if I hit Submit, so as you can see, we have a bigger out dot, ok. So let's make it smaller. So in image tablets, mobile dot-dot-dot, and inside the image tag, I will add a skylight per group, which was just going to have a height of 70 pixels. So I 70 Excel. Let's save this and go back. Let's type in google submit. So now this outlier is having a height of 70 pixels. Now we need to remove this bullet point. For that, we need to go to index.html and we are in the LA Weekly. I'd style list-style. None. Okay. Let's say this. Finite fish. Thank Google and submit. So now the bullet point has gone. And if I type phase both hit Submit. So I get the details off Facebook open. Now this triple the number of repositories we need to make it bold. So let's go to the ab.js and this a will evaporate and strong active groups. So save this. Now this bold, okay, and it is looking good. So if I type Microsoft Bea's book. So as you can see, when I type WhatsApp, the bio is null. Ok, so sometime the user don't have any bio. So for that we need to conditionally render it. Okay, so I will add a condition by using ternary operator is Bardot bio is dead. Then we need to add a template string. And I'll add bio, fallen and no dollar sign dot bio. Otherwise, if there is no bio, then they'll been empty string. Ok, let's save this. And now if I go to the browser, and now if I type Google, I'll see a bio. But okay, so I'll demo this. If I type Google, I'd submit NCBI, have a bible, predict firelight, WhatsApp. And if I submit. So you know, by also Belbin empty string, okay? So this is how we can conditionally render the bio. Okay? Now, now we are repeating this guard, okay? So as we are repeating this fact parameter, everything is located on that dark object that we're passing in that file, that we are passing in the tag list function. And as you remember, if I go to found out is in our handled separate function, we have use, we were able to use this restructuring in order to get certain properties of an object full. We can do the same thing for our bad gorgeous. Okay? So your weekend, wrap it in of curly braces. Okay, we tend to have this garden curly braces. And then instead of writing dot, dot, dot, you can just copy this and paste it over here. As we can put this as a parameter in copy statement understood URL, Fama, and then paste it in and use this name. Is stirred. A big pause. They stirred bio page there, okay, and then we can remove this garden. So let's do this part. Let's say this. And now let's go to the browser and everything should work fine. So if I type Google, submit, we get the information. They spoke about the information. Ok. So what's okay. So we're getting all the information as we were getting before. That's been made board much cleaner. Okay. So this is it for this video and in the next video to then take ten and the like. 20. Lecture 20 display error to user with formatError function: Hello friends, welcome back. So in the last lecture, we got the information of the user. But what if the user does not exist? Okay, so if I type any user which does not exist, so we gotta error in the console. Okay, so this is wood for developers, but what if we wanted to show this message yodel based? So we want to display some kind of message that only user found on the screen. Okay, so for that we need to go to widgets for your food. And maybe we'll do form dot js. And we will create a new method called Pfam edit, sorry, format error. Okay? And your will pass EDL and inside the body will until log error. Okay? And we will replace this control error with this dot format, edit, the method which we created here. And now we need to provide some texts. So we need to give a variable, ok, we need to create a variable. So const, edit text, that is fooling booby document dot V8 element. And we cleared up p type, okay? And onto this p tag we will provide some tags. So we need to write the error text dot text. And we set it to no user found they had save this. And we'll put this element into the DOM API. So we need to put this p tag into the DOM. So for that year we need to write this dark form dot append GI. And here we need to pass to other texts. So we're going to add this edit texts as a child element. Bypassing in it to that method will save this file and now let's take it in the browser. So let me clear this. And if I type something which is not put in as a GitHub user, and if I click submit, so you add, as you can see, it is showing me low use at Pfam. Okay. Now let's see in some styling, okay, we'll give somebody Phillip. So for that, or maybe we can write L x dot style dot color, which is going to be bred. Let's save this and let's check the louder. So we are getting at it pellet. So now we are getting the p tag to the DOM, but we need to remove this our fifth certain amount of time. Okay, so let's go to Visual Studio Code and the other we need to write setTimeout. And you're inside this video give an arrow function. And after this there will be a callback function so that they start form dot remove. This will be opposite of adding a p-type. So if we move outside and inside wheat pasta, edit text. And we need to specify their timing. So 500 by 1000 milliseconds, which is five seconds. Okay, let's save this. And now let's check it in the browser. So if I type some user which does not exist, but after 5 second, this will be enabled. So it is been forbidden. Now we will add some more styling. So let's add some font size style, font size. And that we will set it to 1.5 PM. And let's make it bold. So text dot style, dot fonts, font style. And we'll set it football. Ok. Let's save this and now let's take it in the browser. The liquid dipole that which does not exist but made and you can see that there's no use cell phone, okay. And let me type of user which exist. So Google and then in February is that which does not exist. So it comes at the top of the users open uses list. After five seconds it goes away. So I hope you liked this lecture and this is it for this video, and I'll see you in the next video, will then take care and bye. 21. Lecture 21 remove all cards with clear cards method: Hello friends, welcome back. So our application has the ability to add the user will be, but we should also have the option to remove them. Okay, so let's do it in this lecture. So we will have a button next to submit button, which will allow us to deal users. So let's go to within Studio code. And in index.html, we will create a button after submit proteins. So I'll duplicate this and the other type will be, but then, because it will allow us to click a button without submitting the form in. And we don't require this class. And your eye right clear. Let's see this. Now we will create a new variable on Form class constructor. So let's go to form Node.js. And after submit button here, it will be available this dark field button. And that is going to be document dot ready. Elected type will be button and sort it in square brackets. We need to write type. That is going to be, but again, use the square brackets and save this file. And now we need to go to index.js and will create a third pill, bug. Little cards, okay? And inside this we need to access this Dark God forbid, will initially it will be this dot cards and it would be an empty edit. And do access this thought, God, we need to write guard list. And inside this we write this dark part, let's say despite. And now we need to pass it down to the form. So for that, we need to apply the same method as we did it for add dot. Ok, so we need to bind this dark patch equals to this. Guards start buying this thing. Let's take this and we need to pass the buildup form. Okay? So you are, we need to pass it to deform plus organ. So for that we need to write AP dark parts. Let's save this. And then we need to create a parameter within the form class than Scott heritable, so informed ArcJS, rather we need to create the parameter. We are darts. Ok, and manipulate this dark blue dots. We pulls to clear parts, okay? And then we can add event listener. So this dark clear button, dot add event listener and we will add a click event. So link. And the second parameter would be an arrow function. This dark parts to this. And now let's go to the browser and check whether we are able to get the users are not submit some issue. So let us take it in the Visual Studio pool. So you're the burden. Spelling overdone is indirect. Select me save this. Let me remove this. Let's add some users. Okay? And now in fact we can't build it should clear this out of bins. So opiates and our disk blocking. So we have successfully added WL button functionality. So I hope you liked this video. This is a Bodhisattva and, and, and, and see you in the next video, lente Karen bourbon. 22. Lecture 22 use local storage to persist our user data: Hello friends, welcome back. In this lecture we will add data to local storage because once we refresh the page, the users go over. So we need to user who stay on the page. So let's go to Visual Studio Code and in index.js insight at guard method, we need to write local storage dot set item. And inside this, we need to set a key, let's say users, okay? We can give any name you want, but I'll give users okay? And the second parameter will be decent dogs thing you fire because we need to convert the value into a string. So JSON dot stringify, this will turn JavaScript value into adjacent string, okay? And we need to pass this dot. Dogs. Do it. Let's save this. And now let's go to the browser and right-clicked inspect. And we need to go to Application tab. You're in local storage. Ok. Let me clear this thing. And now if I add a user, let's say Google. And if I submit, you will see the key as user and there's a value. Okay? So we get, we got this value and an object. So if I add another user, fees, books, submit. So there is a second object b of Facebook. So now we have an added with couple of items. And now if I reload the page, you can see the data is still under local storage and we need to take the data out of localStorage and put it in the US. So to do that, we need to go to study abroad and we need to change the value of our God. So instead of empty at a yard, we need to write this dot, get parts. We need to create a new function, okay? Certainly multifunction get guards and year after year cards, we will access this get guards method. And this function will get the value out of local storage. So we need to write a condition that is local storage dot get item as a e-value as users, or this is true. Then. So if there is an item with that key value of user, we will convert the JSON string back to an object. And the way to do that is by using JSON.parse or beam. So you are going to burn your done this and dark bars. And inside this we will write local storage dot, get item and the keys users and ends, meaning to write. And otherwise they're done in empty string. Empty object, or maybe an NP Edit. Ok, let's save this. And now we need to call the guard list. Okay, so we need to call up the tag list again and call this render function in order to actually output the UN. So an index.js, we need to call hard list to guard list. And we're going to get the cards from the app in dense created at class. So we will pass AB dark parts. Okay, let's save this. And now if I go to the browser and if I did finish, we again see we are getting the user's ritual in their local storage. Ok? So one last thing which we want to do is like if I hit the clear button, this local storage for bed empty. So for that, we need to go to study. We need to come to clear the parts, okay? Yes, we need to write local storage dot item, and we need to pass the key users. And the second parameter will be an empty string. Ok, let's save this. Now if I go to the browser and if I click on clear button. So this local storage is now NPV. Okay? So let's try it again. And now if I hit clear, this local storage will be empty. So this is it for this video and this is it for the cities. I hope you like the videos and I hope you like the cities of ES6 n. We have created our politic. So try it on your own and posted on the project section. So this is it for the entire project. And I hope to see you in some other videos and in several other cities. The land take care and bye bye.