Web Development Full Course
What is web development ?
Ans : Web development broadly refers to the task related to your web applications or web pages it basically adds up life to your other wise ordinary web page.
What about this article?
Ans : Hi everyone. Welcome to this full course session on web development. This will give you a complete crash course and let you know everything that you need to know about web development.
what will you learn?
Before we begin, let's have a look at today's agenda.
Main: html , CSS , JavaScript
1: So first we will begin with the basic language that you need for web development. That is HTML
2: and then we will move on and learn how to add more styles to your web applications with the help of CSS.
3: Next up. We will move on to the language that will help You know, how you can add more motions to your web pages That is JavaScript
4: now once you're well-versed with these programming languages for web development you To know about the jQuery library
5: and then we will move on to the different front-end Frameworks to begin with we will learn about the angular 8 framework and then we will move on to react JS now.
6: Once we are done with the front end part, we will move on to the back end and have a look at node. JavaScript now.
7: Once we are done with all these Frameworks. We will move onto applications such as the mean stack application
8: and then the months mern stack application now that you're well versed with all of these programming languages and their Frameworks.
9: We will see how to become a full stack web developer.
what is html?
Ans : today we are going to learn all about HTML. So without wasting much time. Let's Dive Right In. So the idea behind HTML was a modest one when Tim berners-lee was putting together his first Elementary browsing and authoring system for the web. He created a quick little hypertext language that would serve his purposes. He imagined dozensor even hundreds of hyper text formats in the future and smart clients that could easily negotiate and translate documents from servers all across the internet now HTML stands for hypertext markup language and it is the standard markup language for creating web pages and web applications. It is used to describe the structure of the web pages using a process called markup now HTML mostly constitutes of elements and these elements are the building blocks of any HTML page and are represented by tags.
How are the html tags arranged?
ans : Now, let me just give you a brief introduction to the structure of HTML. Now this is also called an HTML boiler plate. So firstly an HTML boiler plate begins with the HTML tags, which tells the browser that this is an HTML page. And this is where it begins from. Next comes the head tag, which contains most of the meta information about the document the head tag normally also contains the link to the styling sheets The Fawns that you might be using on your webpage and even the JavaScript that you might be using. Now the head tag also has the title element which specifies a title for the document and can be seen as a text on the tab that you open on a browser. Now next comes the body tag, which mostly contends the content that is visible to the viewer of your page and these contains elements like H1 tags or paragraph tags, which are known by P tags and they make up the mass of your content
how to create your first html page?
ans : Now to create an HTML page. There are a few steps
1: the firstly you need to open any sort of text editor. It could be notepad++, notepad, Sublime Text or even Visual Studio code
{ recomended: atom text browser as a starter html } . You have the freedom to use the text editor you want
2: next you have to write up some HTML code that you want to show on your webpage.
3: And then you just save your file as a DOT HTML and to open the file. All you have to do is just view it on your browser.
Now Let me just give you a quick demonstration on how that is actually done if you have still not understood that,
1: so let us create a folder first. So let's call this folder HTML demo.
2: And now we're just going to use Atom Text because that's my favorite text editor out here. All you have to do is create a new file and I'm going to be saying that it's a HTML type. Then you just fit in your HTML boiler plate.
I'm going to tell my title is going to be my first web page and that is the title of our webpage. Now let's put in some content into this. So it's going to have an H1 which says this is just some text that save this this is going to be saved into our HTML demo. So let's open it. Let's save it as index dot HTML now, once you've saved it all you have to do to view it is going to your folder and just open it on your browser.
So as you guys can see the title is written out here on the tab. And this is our H1 that we just create. Okay, so that's how you basically create an HTML page. So let's move on now.
There are some elements that I want to tell you all about which is very important. So first is the doctype element. So the doctype Declaration represents that the file you're working is a document type and helps the browser to display web pages correctly and it only appears once at the top of the page before any HTML tag and the doctype Declaration is not case sensitive. Okay.
So this is what HTML actually looks like now before we move further with some HTML coding. I want to make you all aware that a webpage is fundamentally made up of three constituents. The first is HTML. The second is CSS or cascading style sheets and the third is Javascript. Now HTML will only give the structure of the web page. It has nothing to do with the styling while CSS is completely responsible for how beautiful your webpage looks what colors you're using as the background how your images are actually lined up and all those sorts of things to learn more about CSS. You can always refer to our CSS tutorial on the same page of Eddie record. And thirdly JavaScript is for making your page much more Dynamic if you're clicking on a button your posts are being actually submitted that's all being done by JavaScript. And if I want to learn about JavaScript, we also have tutorials for that and you can surely check them out. Okay. So now let's go ahead and create some elements and see how they look like on an HTML page. So let's go back to our HTML page. So this is what an H1 looks like. So let me just copy this down now and let me show you all the types of headings that HTML provides us is actually H1 through H6. So H2 H3 H4 H5 and H6 salsa jeans. I'm here at 6 H5 @ 4 3 2 now,let's save it. Let's go ahead and reload our page. So this is how the different types of headings look like. This is H1 being the biggest and at six being the smallest. Okay, so that was about headings. Now. We have some other tags also that I want to make aloe vera so there's a P tag first soapy normally stands for paragraph now paragraph is basically what it looks like and it normally contains random text or paragraphs of your web page. And this is what they look like. This is what a paragraph looks like. Okay. So that was all about adding a paragraph So how do you add images so you can simply add image with the image tag? And all you have to say is a source now, I already have a beautiful picture of a Pokemon that I really loved as a kid. So let me just copy that down into the folder. Okay. So now that we've copied down our image into our folder. All you have to do is give the source now this can be nine tails dot B and G. That's the name of our image. Let's go back to our page. Let's reload it. Okay. Now you can also put an attributes like height. And you could see the height is going to be 7 or 500 pixels and then you can also put an attribute called width and say that's also going to be 500 pixels. Yeah, so that changes the height and width of your image. You can also make it smaller by saying something like hundred pixels. So let me just show you that save it. Let's reload it and yet now we have a much smaller 90s of them now suppose. You don't have a picture. You can also put an ALT tag, so just to say there was supposed to be an image here. So let's save that now you will not be able to see the alt tag because our image is working. Let's suppose I misspelled the name of my image and now you'll see something like that out there. So there were supposed to be an image out here. So it's showing the alternate thing right we can also have line breaks in our HTML. So you do that simply by saying / BR and there will be a line break between this word Alam KO and laborious. So, let's save that. Let's cancel this out. Okay, so now lamb Co and laborious are on different lines. We can also make stuff bold. So suppose you want to make this first word bold so you can go B. / Band I'll make it bold Yep. Now alarm is bold. You can also for making things bold you can use the strong tag and now let's sit. This is also bold. And now this is also bold comes up right there. Then you can change the size of text. So let's just create some other text. So it not so that it done get cluttered up. So we have tax like big and we also have tags like small. Let me just show you the difference. This text is big. This is small student. This text is Big while this is small. So let me just put a line break here. save that That's also put a line break here. And now let's put back our image. Yeah, this text is Big while this is small now. You can also put in horizontal lines inside your HTML. I have to say as HR and that'll put in horizontal line out there right like that. You can also put the width and height out here so wits there's no reason to put a height because it's not there and width is going to be something like 70% you can say 70% and you have a line that goes 70 percent through the screen next we can also put in links into our HTML to suppose you want to go to a site. So let's say you want to go to Eddie Rekha. Now we can put some text like say this is a link to a website save that spurred Hill and now this will take us to a Tracker dot go. Yep. So that's how it works. You can also put links on images. So suppose we were to move this text out here copy this image from here and just put it out here. Now if we were to click on the image will take us to add your record on coke. Okay, you can also add lists into your HTML page. So there are two types of lists one is an ordered list. So ordered lists are numbered lists and you can put in list items like this. So let's put in a bunch of list items. Okay, so let's type in some text. So this is a random list. So list items are actually going to be the things that you're going to list out. So these could be anything that your listing our you could list all your favorite dogs. You can list out your favorite chocolates or anything like that. Let me just show you what that looks like. Let's go back to our page and this is what it looks like. So as you guys can see we have a list out here, which says this isa random list. This is a random list and just to make it a little more creative. Let's go and put in some stuff like that. So firstly let's put an edge to out here. These are some of my favorite dogs. Let's say I love some words. I also love corgis. I love huskies, and I also love golden retrievers. So now we will have an actually good list out here. So these are some of my favorite dogs now if I were to just make this an unordered list so we could also have unordered list. So this is how you create an unordered list. You just go ul and then you put in your list items. So I'm going to say so let's put an H2 again and these are some of my favorite heroes in Dot a 2. So list item this is going to be let's see. I really love playing Shadow fiend. Then let's put in some other Heroes like storm spirit in Boca andlet's say Templar Assassin. Let's save that and let's see. So these are someof my favorite heroes in Dota 2. Now, if you see our H2 iskind of indented that is because we have put itinside our list now if you were to justcut it out and put it outside this region ismy lines and let's see. So now it's probably showing that these are someof my favorite heroes in Dota 2. You can also put in imagesin these list items. So suppose we wereto put in some images of Shadow fiend storm Spirit youwould just put an image out here and you would putthe source now, I don't really have images but you can also putin the URL of images. So let me just show youhow to do that. So, let's see Shadow fiend. It's going to the images. Let's find something small. Like let's say it's 300 X 300. Okay. So this looks likea nice cartoonish figure so you open this imagein the new tab and we copy down this link so you can seethe source is this link? Let's save it. Let's see if it shows up. Yep. And now this thing shows upjust outside shadow fiend. You can also put in some stylingor some attributes like it's a width is goingto be a hundred pixels and height is goingto be a hundred pixels. So let's save that now and now it's muchsmaller image of Shadow fiend. Now we have other typesof tags also, so these are called div tags sodiv tag stands for division. So to divide your pageinto separate parts, you could say thiswill contain the footer. So footer tags are normallycoming in the end. Now you can also have a div tag in the beginning and thiscould contain the header. So these tags willcontain the header. This is so let me just putin some header so Is the head of and this is the footer. So this is the header headis always come on top and this is the photo. Now you can also createforms using HTML. So let's go aheadand create one. So our farm is going to becalled a registration form. Okay. So now let's put our formand a div first of all, so let's give our div an ID. So IDs and classes are actuallyused to select stuff or an SDM a pagewhen you're styling. So to understand more about ideas checkout our CSS tutorial that if this ID form or registration formrather and let's go into our div and create a form or form will always stayinside our form tags. Now that we have done that that's understandsthe elements of a form firstly we need an input. So first input will beof type text. Let's say its nameis going to be first name and will help placeholders. I sound like this see REOand we will always be requiring. So if you say requiredthat means somebody will if he's actually in puttingstuff into the form. This is a mandatory field. Okay. So let's save that and see so now we havea registration form called Aria. Okay. So we also need labels. So let's go aheadand create one so label. So for first name, and this is goingto say first name. That's gonna have a: so now there's a label calledfirst name now we can do this for last name also. So let's control C control V. So it's going to be lastit's going to be lost and this is alsogoing to be last and you want to puta placeholder for pause and this is alsoa required field. So now we have a last namewith this placeholder. We can submit stuff into that. Now form also takesinto important attributes. I forgot it mention. So one is the action and the other is a methodnow action is something that will happenwhen you submit this form so you can run a scriptsomething like script dot PHP, but for now that'sfor another session. Okay. Now there are othertypes of inputs. So let's see, let's create another div now suppose you wantto input the gender also, so, let's see,let's first create a label. And that's alsocreated input type. So in vertebra type of radio and it's going to be calledgender male and let's also give us a valueof Choice One save it now you want to label and you want to giveit the attribute for and you want to givein the name of here. So let's put in that sogender male save that and let's writemeal out here. So let's see if that now and let's seewhat it looks like. Now. We have the sinkon meal we can check it and we can uncheck it now. Let's create for femalealso and others. So, let's see. Let's call this female. I'm just going to beof type choice, too. Now we have meal. Yeah female if you see wecan actually select both of them or all of them. So that's not something we want. Right. So let's make this choice three. Let's make this other Okay. Now we have a gender submissiongoing on so male or its female or saddle now, we can't reallyselect everything. So how do we actually solve that so let's givethem all the same name. So you can call itgender Choice save it. Now you either gomale ego female or you go other you can't reallyselect the same thing. So that's how youmake that happen. Okay. Now let's lookinto some other types of input types wecan taken so let's create another div suppose you wantto take in the email address? Let's go ahead and copythat spread out here. Let's say celeb willfor let's see. First of all, we need to changethis type to email and we will also givethis a name of email. Let's burn a placeholder insteadof a value and it's going to be something like let's put XYZ after eight email.com Nowwe have the sing going on. So let's change this label to email and let's changethe label to email too. Now we have the sing goingand we can type in our email and we will also need to typein a password for registrations. It's called this password alsomake this password. The type is goingto be password. And let's remove a placeholder because passwords don'treally have placeholders. Save that and now you see when you type in a passwordyou can't really see anything. That's how you make a foamthat inputs a password. Okay, so that was how you taken emailsand passwords in a form now. There are some other stuffthat I want to show you. So let's Dive Right into that. So let's create another div. Okay. So first of all, we need a select tagto select tags are used for making selections. So let me show youhow that works. Firstly. Let's give this a nameand it's called this birthday or let's call this the monthnow we'll also need a label for this screen label. So a label is for month. It's called Birthday. Now I select canhave various options. So you're basically goingto put it in a bunch of options out here. That's the option now. We need 12 options actually. That's three. That's six. That's nine. That's 12 lead these out. Just redone my lines. Now our options aregoing to have values. So our value will besomething like fine. So let's say Chan Fab March April May June JulyAugust September October, November and December. And you can seeJanuary 02 February. Let me just createthis quickly March. Let's save this now. Let's see what this looks like. So we have this birthday thing and it has allthe months in there. Okay now out here if you see it already comeswith a default value of January now, you can also mitigate that by putting inanother option called default. Let's put another option or Sonow that we have an option, let's give this a value 0and say select it to save old. I hit reload. This does nothing but you gotall these different values. Now instead of just makingit blank you could say that this could see month. It's another sales month and you could create somethingsimilar for this also. So four days, you need to create 30 of theseand I hope you get the logic of creating this thing now. Now our form also needsa button to submit. So let's goand create that also. Let me show youanother type of input. So let's say inputand the type will be check box and the name will be agreeand let's put a label for this a for agree and I agree to allthe conditions of form. No, we will havethis thing going and we have a check box. You can check it we coulduncheck it something like that. Then all we need is an inputand on an input. We don't need a button isa button and you say submit and you also haveto give this a type. This is going to beof type submit. So once that's done, we see this buttonand we can submit it. So if you go and submit you'llsee please fill out this field because it's a required fieldand that's all that is dead forms. So that's how you createa form in HTML. You can also createtables in HTML. So let me show youhow to do that. Let's reload and makethis blank save it. Yeah, so a tables are createdwith table tags your table and tables have tabledat has okay, so we can also createtables in HTML for that. We need table tank now table comes withthe table header first of all, so this will containall your table headers. So suppose you are creatinga table for dogs and the breeds the th dog and you can say the dogwas has a name and breed. So this has createda table header now, so let me just show you whatthat looks like. So now we have the dog namedand breed now we can just simply go in and putin some table rows. So fortunate row you say TR and in every row you will haveto put in some table data. So for that you usea table data tags, otd. So let's say our dog is called. So let's make this ratherdog owner name, right? I had a dog and my dog's namewas Stoner Scott him Stoner and Stoner was a street dog. So let's just keepthe breed a street. Okay, so that was one tabledid a rule save it now, we'll be needingmultiple table rows. So let's just copythat paste it multiple times. So let's say my friend shabam. He has a dog called Goldieand it's a retrieval and then I also havethis friend called ayushman. Yeah the dog called Duke and it's Husky and thenthere's this guy called ishaan. He has a dog calledMonster but it's a pug. Yeah. So now we have successfullycreated a table and you guys you guys can see dog owners areAria shubham ayushman and ishaan their name of their respective dogsis total goalie Duke and monster and the breeds areStreet retriever Husky and pug so that's how You createa table now with CSS. You can add a borderto The Stables. We just show you how that's donewith a little bit of CSS. So it says style let's say text / CSS now out here you couldjust this one little styling. Let's say let's give our tablea border of 1px solid black. Now, I table will have border and we can alsogive TD's a border and in they're going to have 1 PX solid black to sonow everything has a bottle and our table looks much neater. Yep. So that's how you createa table in HTML. OK guys. So now it's time. I actually show you how HTML can bereally polished sometimes. So let's go aheadand create a blog. The first blog I've alreadycreated the CSS out here, so I'm not really going to beexplaining the styling part, but we are goingto be creating our blog. So let's go ahead and see howthat looks like. So first of all,let's delete everything. Let's create a page now. So let's call this blog. Now we'll be linkingour style sheet out here. So for licking a stylesheetall you have to say something like this and then we go aheadand copy my style sheets. The desktop we're doinga stuff in sgml demo. Let's copy this here right now. Our blog dot CSSis going to be here. Now. Let's go start creating our blog so firstly let's puteverything inside a div. Now this is going to havea class called post because I've used the class to actually stylesome stuff now that's done. So let's have another div. So this is going to havea class called date and we're going to beputting in the date. So let's say our date is goingto be October 24th 2018. Now, let's say we havea heading so let's say a Vancouver my favorite City Then let's putin some paragraphs because every article needsa paragraph for paragraphs. You're just going to be fillingit with some lorem ipsum. Now a paragraph will havea class called coat. Okay. Now let's reload and seewhat's being made. Okay. So if you guys can seea blog post is coming up now we can also add some imagesto our blog post. So let's say let'sadd a link first. So we link to https. W dot Ed u-- record dot go now. We are going to use an image foractually making it clickable. So we already have an imagethat's called image 1 dot jpg. So that's there. It's also put an ALT tagout here just in case it doesn't load up. So alt and sayVancouver image now, let's put insome another paragraphs. So not a lot of Epsomand more paragraphs, I guess because this is a block so let's makeit look like a block. Save that and let's also give it a horizontal lineto make it look neat. Save this let's load it. Okay, so we havethis nice looking article and it has this image. If you click on this image willtake us to Eddie wreck our site. So we go to edit recordif you click that image, let's add another article into this just to makeit a little longer. So let's copy down the stiff. So let's change the date first because let's saywe posted on the next day as shins title. So the my secondblog post save it. Let's remove the image from this one to makea little different. Yeah. Now if you see ya thisnice-looking blog post going on it has this horizontal line. We have some codeout here and that's how you can do stuff with HTML. Hi guys, my name is audio and I welcome you all to the CSStutorial in this tutorial. We'll be coveringfrom the basics of CSS to some Advanced CSSwhich includes animation. Okay. So before we actually startwith coding our own bit of CSS, let's go through someof the basics. So what exactly is CSS? Well CSS standsfor cascading style sheets and is generally used to control how HTML tags and elementsare displayed on your screen. So this means basic styling of your web pageis controlled by CSS. Now CSS was actuallymade to solve problems that were introducedin HTML 3.2 now HTML 3.2 gotten some new attributes, like font colorbackground color, which generally was putinto styling of element on a web page. Now while this did add some veryvery needed functionality into HTML 3.2 it clutteredup your code as a developer and media life pretty miserable. So to keep the structureof your web page, which is The sgml and to make the styling a differentaspect CSS was made by w3c. So w3c stands for the WorldWide Web Consortium. And CSS till date is still being maintained bythe w3c developers. Okay, so that wasa general introduction to CSS. Now, let's move ahead. So this is the basicsyntax of CSS. You basically haveselectors which selects or targets the place that you want to attachyour styling to then you have basic propertiesand value pairs. Now, you can include your CSSinto your HTML with a link tag while putting the hrefattribute as the file name or you can do some inline CSS, but that's notactually recommended because that's the problem that we are actuallytrying to mitigate by putting CSS asa different file. Also, if you don't wantto create another CSS file, you can do some internal CSSby putting in some style tags in your head tag and justwriting some normal CSS to it. Okay. So now let's seethe different type of CSS selectors. So these are allthe different type of CSS. Electors and basicallya selector is a way of targeting an elementon a web page. So the star selectorselects all the elements and applies the CSSthat you would apply to it. And then if you would say divthen it would apply your CSS to all the divs now div comma P will applyto all the dips and paragraphs div space p will put your stylingto all the paragraphs inside those now going through all the CSS selectorsis a pretty cumbersome job. So I recommend that you go throughthis page on w3schools, which has all the differenttypes of selectors and the different types of pseudo selectorsall this shit out. So this will very much help youwhen you're doing your own CSS. So always keepthis page open now just for basic sake let me just tellyou about pseudo selector. So we also have pseudo selectors which is definedsomething like this. So pseudo selectors includestuff like overactive visited and stuff like that now supposeyou are hovering over an a tag so you can say there is supposedto be some specific styling when you're hovering over it. So how would you do that? You would just say a colon hover and then you would actuallyspecify The Styling that you want. Now you could alsofind all these types of pseudo selectors out hereand it's all listed out here. So a visited like select all visited linksomething like that. Now I also want to makeyou aware of the Box model that is very much used in CSS. Now Box model has four thingsthe content padding border and margin so content isa basic content of the web page that you want to show toyou your general audience and the padding is spacebetween your body and the content itself. The border is a linethat can be of any size color and width and thenthere's a margin which is this distance from the edge of the screento the bottom. Okay, and now the Box modellooks something like this. So the content comes inbetween then comes the padding which is between the borderand the content and then there's the margin which is between the screen and the Borderitself the screen Edge and the bottom, right? So that's allthe Box model works. Now. The last bitof Basics is CSS units, so there are four kinds of unitsfirstly we have the pixel. So pixel is representany pixel on a device so you could say something likefont size is equal to 25 pixels. So it'll make itactually 25 pixels. Then there's also points which is mostly usedin print media and all you need to rememberto use points correctly. That's 72 points equals1 inch now the last two types of units are relative units now, these are relativeto your current font size. So 1e M or hundred percent is actually equalto your current font size. So if you want somethingto be double your font size, all you have to say is 2E M. So these arehow relative units work in CSS. Okay. So that was all the basicsof CSS and how you select staff and all the units now, let's get ahead and codesome of our own CSS. So far this time, I've actually createda bunch of HTML pages and we are goingto style these SEO and Pages by addingsome CSS into them and this will stand asgood practice for CSS alone. Okay. So for the first page we havethis page called page 1 dot HTML and it's a pretty basic page. Let me just open it upand show it to you guys. So this is what it lookslike without any sort of CSS being attached to it. Now. We are going to create some CSS and we're going to tryand practice first of all selecting stuffin different ways possible. Okay, so firstly let's dosome very random CSS. Okay, firstly let's star getall the divs in this HTML. So how would youactually do that? Well, you'd say div by going selectors and let's actuallysave this as a CSS file first so that our syntaxis colored properly. Okay, so that's a div. So that's how you selectany element and CSS now suppose we were to say back. Own color ratherjust background. It will be posted and the text or the colorof the text will be white. So now everything inside a divwill look like that. So now let's just savethis speech one as you see if that's page one dot CSS. Let's reload our pageand everything that is inside. The div now has a white text and it also hasa purple background. Okay. Now, let's see how weactually select IDs. So we select IDs with the hash. So we have an ID called coat out hereif you go and see so, where is that thing gone? Okay. So this paragraphout here that you see as the ID called coat. So we're going to select that and put in someof our own CSS. So let's see nowthat we've selected our ID. We can say suppose we wantto change the font family so we could say font family iswhere Donna and you could also put in alternatefont families just in case where Donna doesn'tIn your system, like kills hands fine. So that's how you setup your phone family. Let's also setthe color to be black. Let's see what changes now. So this is the code thatI was talking about. So that's van should changenow, let's reload. Oh, yes. Now the font has becomeverdana and that's what we exactly wanted. And the text isalso black knife. Okay. So how do we select classes now? So if you go here and see we should have a classcalled movies, right? So all these have a classcalled movie all these a tags. So let's select them. First of all to selectthe class you say dot and then you say the class namenow we could put in some random CSS into this again. So let's make the color. Let's keep it white and let'smake the background steel blue. Let's see. So where are movies? Let's see where themovies actually exist. Oh, yeah DOTA SplinterCell and God of War. These are the movies. So this should nowchange let's save it and now they havea background color of Steel blue and they have a text colorof fight and that's exactly what we do find out here fine. Now, let's try outsome other types of selectors. So suppose in the span out here we have this ideacalled Auto so what if we only want to Target that what would we see so we could say expandand hashtag author now, you could put any type of CSS. So let's say text transform. So this is how you transformany sort of text and you can see uppercase now the auto will be changedto uppercase out here and this is the autothe pope Alexander park now watch that now, it's just uppercase and we have selected itwith the selector called span and hashtag autumn. We can also do some otherkinds of selecting. Let me just show it to youso we can select the allies of the unordered listor the ordered list. So our skills is the ID isthe ID of skills. So let's select that now so we have skillsand we could go the ordered list and then the Li and what we want to say outhere is color will be purple. We can do the same thing for the unordered listto let me just copy that down put this here sayunordered list and let's say we change the text colorto white save that let's reload up H. So we first of alllet me uncommon this. Now let's say that again reload our pageand see the differences now since we had givenit a purple color. It's now all purple and let mejust put background or white. So that you can see it. Yeah. Now these are purple and these backgroundwhite we can do the same for the unordered listto let me just uncomment that let me also giveit a background of purple or actually, let it be like that. Let's just make it blue. Now SAS & Hamillhave turned into blue as you see here. This is the blue thing fine. Now that was selectors. Okay. Now let's go aheadand select some other stuff. So what if we wantto select all the paragraphs that are off to the H3 tags? So if you remember we can dothat by saying it's 3 plus b and let's saywe want a background of black and some text color. That is white so color flightnot being very creative with my CSS at this moment because this isjust about selecting. So, let's see how that reloads. Yep. Now, we have a color of whiteand the background of black and that only selectedthe paragraph just after the S3, which is myfavorite video games. Okay, we can alsoselect every paragraph that has a class by justsaying something like B and class we don't evenneed to specify the color or I mean the class name so you go background. Let's say we want to givea gray background. Let's see all the paragraphsof the class. So this is the only Paragraphwith the class. Now, you can do the same thingfor IDs just say idea out here and let's seeall the paragraphs. It's an ID. So this is the onlyparagraph it's an ID. Okay. So now that we're donewith selecting stuff. Let's go and actually see how text can be transformedwith the use of CSS. Fine. First of all, I already have a pagecreated for that. So this is going to be our pagethat we are going to use to see how Texas transform if you see I have an orderedlist with all the types of text Transformationsor the text tilings that I want to show and wealso have a paragraph out here which will show the basics box elements likethe borders margins and padding. So I'm going to demonstrate that through this PIDout here, right? So let's get started. First of all, let's create our CSS fileand in the CSS file, we're going to save it and we'll call it page2 dot CSS, right then. Yeah, it's connectedas page two. So let's get started. So first of all, let's star getthis ID with lorem. So lorem ipsum is justsome Latin paragraph that is normally usedin web development to fill in spaces with text where you can always come back and delete that text and fill itwith something more meaningful. Now we are going to be usingthis lorem ipsum thing. So it's in a paragraph tagwith an ID of lorem. So let's go ahead and select it. So we are going to select it with the helpof the ID call it Lauren. Now. First of all, let me just show youwhat the page looks like without any CSSattached to it. So this is whatthe page looks like, right? So this is the part that we are goingto Target right now. First of all,let's give it a background. Of black let's make the color of the text white letsme show you what that looks like. Okay, right. Now, let's give some borders and pairing its firstof all to give a porter we could say we usethe Border act for property. Then we give three parameters the type of the bottlethe size of the body and then the columnand you do it something like this 3px solid rednow apart from solid. There are a lotof types of borders and those include dasheddotted rigged and many more. These are the ones that are justfrom the top of my head so you can try at them outand you can find other types of CSS body justby going to Google and saying CSS border types. So these are allthe types of bottles that you get and youcan definitely check them out. It's impossible to show everything in onevideo like that. So, let me just showyou the solid tip. So let's save it andlet's see what kind of board we actually get. Let's go This town. Yeah. Now we have this neat littleborder of three pixels in size and resin column. Now, let me just show youhow taught it would look like. So this is what brought it lookslike and this is what - looks like fine. And this is what - has. Okay. Now let's also give this thingsome padding now padding exists between the contentand the bottle. So I just explainedthe Box model when we were discussingthe basics of CSS. So I hope you remember that so for padding there arefour parameters actually the right top left and bottom so you can Define your Paddocksomething like this. You can go 13 pixels 13 pixels13 pixels and 20 pixels. Now, these are justvery arbitrary numbers. But what I want to explain isthat this first part will mean that the stirring pixelsof padding from the top and then we movevia in a clockwise fashion. So this is on the right. This is in the bottom. So 13 pixels of paddingon the bottom and 20 pixels of padding on the left now youcould also This really easily if you want to give equal amountof padding suppose. Now. This means that therewill be 13 pixels of padding on the top and bottomand this second part would mean that the stirring pixelsof padding on the left and the right andif you just put one digit that means there's 13 pixelsof padding all around now, let's go and putthese different padding's around lorem ipsum. Now, it looks much neater. We can also put a marginso let's put a margin and the margin alsoworks in the same way. So suppose youwould say five pixels. That means it would givea five pixel margin all around your content. If you were to put10 pixels and 20 pixels. This means that 10 pixelsof margin on the top and bottom and 20 pixels a marginon the left and right and there's alsoanother key word that I want to make you awareof and that is auto. So what Auto does is it givesequal amount of margin? However, you specify it so out here it will give10 pixels of margin on the top and bottom and equal amounts marginon the left and So, let's see how that works. Yep. So that's how it changed it. No, that was allabout the Box modeling. So let me just remove this part from the HTML and let's removethis part from the CSS. Now as you guys can see I havethis ordered list out here. First of all,let me reload the page. Now. I have this ordered listout here which shows us all the types of stylesand weights and sizes that I'm going to be showingright now and this will include a lot of the units that we discussed like Em'spoints pixels and percentages. So let's move ahead so to select theseI'll be using these IDs. So let me just rememberthe first varieties. It's normal italic obliqueand small Gap. So let's go aheadand create them firstly. Let's select our normal ID andsay what are we going to try and show you is font style. So all you have to sayis font style is normal. So normal basically means that the font style will benormal instead of something. Lift then I think we had italic. So you go font-style:italicthen we also had oblique. So we go font style obliqueand we also had small caps. So let me just see that again. Yep, it's small cap. So you go small cap. And what are wetrying to show in? Small-cap is the font variant? So font variant small caps. Let me just reload and seehow that change stuff. Okay. So font-style:normaljust stays normal while italic and obliqueare almost similar then informed variant small caps. This is how it would looklike at first letter has a bigger font size and the last havea smaller font size but everything is in capitaland next is the font weight. So, let's see the IDS. It's normal bold Boulder. So let's go with that nowso firstly we have normal. So font size is the size or weight it sweet sofont weight will be normal. Next part isbold Boulder lighter. Okay. So we select Boulder likethat we go font weight is bolder and we can say again. Let's Force after Boulder. It's bold. Okay, we so w boldand you go font weight is bold. Let's see howthat changes stuff. So yeah bold is boldand font-weight:bold. ER is slightly more Bolder while font-weight:normal isabsolutely normal right time for some more. So the next is the font size which goes from extralarge large medium small extra extra small. So let's do that. So first is extra extra large and this is the font sizeof you're talking about so it's extra extra large. There's also extra large. So extra extra large looksomething like this while only extra-large looksomething like this fine. Then we also have large sofont size will be large. That's fun size large next. We have medium small and extra extra small so mediumsmall and extra extra small. So this is goingto be fun size medium. It's going to be font-size:small and this is going to befont size extra small. So let's see howthat changes stuff. So this is extract the small. This is smalland this is medium. Now the next thingthat we're going to see is how points work. So our size is goingto be 25 points. So instead of just doing that. Let me just change the extraextra small and let's say it's 25 points should remember that one point isaround 2 inches. So that's how font size extractsare small would look like if it was 25 points, then we could also saythe font size is 150 percent. So that shows us how percentages bookswhere hundred percent means the current font size lookat it change and that's how one fifty percentmeans the next thing that we want toshow is line height. So let's say what is the ID. Let me just check the ID. So the line height IDs areline normal high 25 points. So let's just select one linenormal and this is going to have a line heightof normal specific: save it up and that'show line-height:normal is. That is the normal line height now you could sayLine height is 25 points. And that's how itwould change also. You could say your lineheight is around 25 GM or just five Yen. Let's say that and that's how it would change youwith more with EDM with one year beingthe constant font size of you 're using or you could sayline height is 200 percent that is basically twice of whatour line height or font is so that's how itwould change right? So that was allabout text styling. Now, let's move ahead and see how positioning andstuff takes place in CSS. So for positioning I have again gone ahead and createdthis Space 3 dot HTML. So in here we will beincluding a CSS page called page 3 dot CSS. So let's go aheadand create that. first of all, we have to set thisto CSS save it as page 3 and let's get started. First of all, we have three typesof positioning in CSS absolute fixed and relative. So first of all, I'm going to show upSalute positioning to you guys. Now before I showup Salute positioning, let me just show you guys how texts and stuffcan be centered first of all, so let's start doingsome random CSS. So first of all, we are going to Targetthis ID called container. So let's go hashtag containerand let's go to background some random color. So for Color Picker,we just go Color Picker. Let's go see this background go. Okay, that's thebackground we chose. Let's also give itsome borders body will be 2 pixels solid and black we can also setup a border radius. So border-radius givesyou a coke bottle. So you can say border radius isaround 5 pixels. Let's see. Now, let me just openup the HTML file that is concerned and this moment sothis is base 3. Okay. So this is what some CSS now, let me just uncommentthat CSS first. So this is whatour page would look like without any sort of CSS. Now. This is what it lookslike with the CSS that we just includednow to make you aware of how box radius works. Let me justuncomment that first. Let's comment it out. The box really should not workand we should get ya a knife. You see let's zoomin out here see that this borderis pointed suppose. We don't want that to happen. Let's remove that first andlet's uncomment this save it. Let's reload. And now we have this slightlittle curved body which looks much neater. Okay. Now we can also Center stuff. So neat way to do that is let mejust show it to you. Let's take thispart called centered. Now the center itlet me just give you the first backgroundto make it look different. So this backgroundwill be lets say 89 C FF 0 that's our color. Let's see whata color looks like. So that is the colorthat you're gonna center. Now. Let's say our wits is going to be we can set the widthof elements like this. So you save it is 50%and then you go margin is going to be Auto. So what is auto do inputequal margin on all sides. Let's reload our page. Yep. And now it's Centerwe can also Center without actually centeringthe element we can just Center the textby just saying text line and Center fine. Now that will removethe background and just keep the text out here. So that's why exactly what we wanted and that'show you align your text. Okay. Now let's move aheadwith absolute positioning now absolute positioning means Beingbased on the document itself, which means thiswhole web browser. So our sir is basically the document that youare actually manipulating. So it's called document object manipulationif you've heard of that term, so let's go ahead and letme just show you how absolute positioning works. First of all, we have this elementcalled top left and we're going to try and putit on the top left. So let's select that first. So you go top left andlet's give it a background. Okay, that'll be the background. That's also good Bordeaux. So let's pour the beone pixel solid and black. Let's say now this position somethingwith absolute positioning. All you have to say isposition is absolute. Now. Let's also keep the widthsaround 200 pixels and the height alsoaround 200 pixels. Let's save it. Let's see how Stuff changes letme just zoom out. Yeah, so that is our element. So this is what top left andbottom right is going to look like now we are going to try and select this element and putit in the bottom right of this pattern. So let me just show youhow that is done. So to select that I've already created an IDfor it and it's called bottom right? Let me give ita background of white. And you say the positionis absolute now. We want to change the positionto actually inside the element. So we have to say is goingto be 0 pixels from the bottom and also 0 pixelsfrom the right. So since it is had absolutepositioning it's going to position this inside of this. So first of all, let's go to background whiteand also make the color black. All right, and now we have this rightwhen we won't now. There's also somethingcalled these that index. So Z index is what comes firston your screen basically, so if you have multiple things that are stackedon top of each other with absolute positioning the one with the mostsaid index will be the one that is shown on top so you can set as that index like this and saythe set index is 5 training with the z-index of for will actually comeunderneath this thing, right? So that was allabout absolute positioning. Now, let's go aheadand do some fixed positioning. So for fixed positioning wehave this ID called fixed which contains a paragraphsaying I'm staying right here. So let's select that first. Let me just remove all the stuff so that it'snot cluttered anymore. Let me reload the page say that reload it andthat's also I'm staying here. First of all, this is what is goingto change fixed positioning. Right? Is that for we callit fixed position? Okay. Now first of all, all you have to say isposition is going to be fixed. Let's make it more prominent bygiving it a background of black and a text color of white. So let's see. This has become blackand position is fixed. What do I do? If I'm scrolling? It just stays there. It doesn't really matterwhat I do to this thing. Okay, so that was allabout fixed positioning. Now. The next thing that we're going to see isrelative positioning for that. I already havetwo elements created. So let's say these are the divs which says thisis going to be relative. So relative positioning as I was just sayingis positioning based on the relative positionof the element. So, let me just showyou so relative on now, let's go to background first. So let's just select some color. Let's make the screenthe screen out here. Okay, that's goingto be a color. Let's go to Bordeauxfrom of one pixel solid block and let's saythe height is going to be r a hundred pixels. Now, we're goingto select another element and position it relativeto this element. Okay. So that is this element rightout here is going to be relative to so to set somethingwith the position of relative all we have to say that the positionis relative and the - rest of the CSSis just arbitrary. So let's say leftnot padding left. So you want to positionit somewhere left of it. And the positioningis going to be relative. So 20 pixels from the originalpositions 20 pixels to the left from the original position. I mean and you could say from the top itwould be 30 pixels. You could also saynegative 30 pixels move it the other way around. Let's give it background. I'm already givenin the background. Okay. Let's go tobackground off yellow. So you see background equalsyellow and you can also get border and say 1px solid blue. That's good blue background. Okay. So this relative layout is goingto be positioned relative to this thing fine. Let's just reload and see. Yep, and that'show relative positioning works. Now. This might just not look neatat this moment, but I'm trying to drivea point home fine. Okay. Now let me just see if I have dog dot jpg becauseas a PNG file called Edge Rekha, so let me justshow you something. First of all, let me just removeeverything from here. Okay. So now that arethings are less cluttered and lets me just renamethis now to the image that is already there. So Eddie record or PNGand Eddie record dot PNG fine. Let's save this. Let's see whatour page looks like now. So this is what it looks like. Now, you can float stuff likeimages to the left and right. So just select the image tag and suppose you say floatthem to the right. These will float everythingto the right now. That's how you position stuffor images with the float tag. So I guess I was allabout positioning of stuff now, let's move ahead. Okay. So in this part we are goingto be learning about overflows. So for overflows what we can do let's say let'sgo back to page 2 dot HTML and we have this text out hereor this unordered list and this list ispretty big right. First of all, let's open upa new page or rather. Let's open up. Okay. I'm just close these out. So let's save thisas page 2 dot CSS rather. Let's just call itsomething you first of all, let's set this to CSS right saveit and let's call it overflow. Now what I want to show youguys something really cool. So let's selectthe ordered list. So that's wherewe're going to select. Let's say it has widthof round hundred pixels. It has some paddingon the top, right? So let's get some paddingof 10 pixels and 10 pixels all around Rado. Let's give it a marginof hundred pixels and auto so bring it right to the center. Let's see there was pageto that were fiddling around with so this page2 dot HTML now, let me just replace thiswith overflow dot CSS. Let's see now. Yeah. So this is what it looks like. Now if you see the scroll through this listis quite cumbersome because you haveto actually scroll like this get a background alsobackground is going to be black as I just love black and the color of a font is goingto be quite see how Change. Yep. So this is what it looks like. Now. What if you do and sayMax height is equals to 500 rather only 200 pixels. Yeah, so that doesn'treally tell much so if you say or flow is autoyou got a scrolling bar. Or you could sayor flow is Kroll. Let's remove this Max height. Now you see we have these littlescroll bars out here and that's what exactly overflow does is basicallyshows the items and you can scroll through them. Yeah, basically like that. So if you were to say that the width isonly suppose 50 pixels. Let's say it's even smaller. Yeah, so that's how I know you havethis scroll bar and lets you scroll through stuff. So that's how overflow works. Okay. Now let's look at some pseudo selectorsor some pseudo classes that we can select and style. So first of allthat we open up the page that is going to beresponsible for that. So we have this page out herethat I've created and it also has some new tagsthat you might be seeing. These are some HTML5 tags. So header tag now of tagsand then the main tag, these are just some new tags that you see in HTML5 and youcan also Target them to css3. So targeting themis pretty easy. But what I want to showis something pretty cool. Let's save it first. Let's create a new page. Let's call it. Right. So let's save this firstas page five dot CSS. Okay, so now it's timeto practice some more CSS and we'll be doingit on this page that I have created. So this page is kind ofa big page to be honest. It has quite a lot of photographs Carlolinks a few images. Also, I guess and they usea lot of the HTML5 tags that have been newly introduced like the header tagthe nav ID or the nav tag, the main tag, we have section tagsand a lot of other tags like these now these tagscan also be selected with the help of let's say css3. That's what we are learning inour let me just remove this part because we won't beneeding that now, let's go ahead and saveour content and let me just show you what this actually lookslike on the web page. So let's go ahead and open uppage 5 and this is what it looks like on a web browser ratherwithout any CSS attached to it. So let's transform this thingwith the help of some CSS. So firstly we've created thispage called page five dot CSS, and we've already attached itto this page out here with the link tagand the href attribute. Let's get started. So first of all, let me just actually make useof some pseudo selectors. So we have alreadydiscussed you the selectors while going over the basics. Now, let me show youhow they work. So a hover is goingto Target all the A Links while we are hovering over them. Now when we arehovering over them. We want the backgroundto become black and text becomes light right. So let's save it. Let's reload. Now if you hover over thesethe background becomes black in the text becomes white rightnow the same thing can be done with a lot of other selectorslike this active. So when you click on a link that means it's goingto turn like that. So let's save it. Let's see. Let's reload our page. First of all now you seewhen we hover nothing happens, but once you click it, it becomes that blackand white kind of thing, right we can alsodo this for visited and that will actuallychange the link when once it's been visited. So if we go and dothis open link in new tab, well, it's not working out here but if there Actually a databaseconnected you would actually see the student now supposewe want to select our body. Let's go to background. First of all get outthe Color Picker. Let's give itan ice cream background. Okay, and that's going to beour background for the body. Now. We also have a divwith the ID of rubble. So let's go aheadand select that first. So we say rapo now,let's give it some CSS so we can say marginis going to be 0 and auto now whenever you see a 0 you do not needto actually specify the units so we can just do that. We will go to background color of white then we will giveit a bit of round 800 pixels. Give it a heightof around 2,000 pixels. Okay. Now let's save that and let's see whatit looks like know. So this is what ithas turned to know. We can also do some more stuff. So let's select some HTML 5 elements like the header tagand let me just show you that CSS still works as we wanted to so let's giveit some simple padding:0 pixels on the tops your pixelson the right and we want to getsome 10 pixels on the bottom and your pixels on the left tube see what changes nowwe got a little change we can also select stufflike with the 80s as I just showed you now, let's select the navigationwhich has the ID of horse nav. Let me just check if I'm right. Yep. It's called horse. Now if it's n being Capital now, we can say stuff like so there'salso the display attribute this shows how elementswill be displayed now, they can be blockedor inline block which means it will be convertedinto an inline element. Now we could say displayis All cooked and you could just give it some background justto make it more apparent. So let's go tobackground color block and make a color white. Let's see. Yep. That's how it's selected. Now. You can also give a pseudo tagslike this one out here like visited to ID student. So let's say once we are hoveringover the navbar. We want this to happen. So let's save it. Now if you only hoverover it will change happen. So that's how that works. Now let's go over and seesome word spacing now word spacing is usedfor mostly specifying the words. So let me just removesome stuff from here. First of all,let's remove all this right. Let's remove the header tagsand we just need the spot where we have allthese paragraphs. So I'll be targeting the first paragraph to showyou all the word spacing. So it's going to be this oneout here right here fine. Let's save it. Go ahead. Yo reload the page. This is what it looks like. Let's remove everything that we have already created andlet's just select parallel one. I hope that's what itwas called out here. So it is called Power one indeednow we can go word spacing and just say let's say let's go 10 pixelsbetween the words. Right. So the spacingbetween these words in this paragraphshould change now that we've saved it. It's go ahead and reload. So yeah. Now you can see that the word spacingfor this this out here is much more different now, we can also do letterspacing the same way. So let's selectparagraph to for that. So for letter spacing all wehave to say is letter spacing and then we can saysomething like 10 pixels. Now, this was specified lettersand how they're spaced. Now you can see it looks this horrible thingis having 10 pixels of their spacing also putsome word spacing into this. So, let's see how that lookslike spur word spacing of 20 pixels makethis even more ugly. Yep. So that's where it would looklike with word spacing and letter spacing. So that was justfor experimentation purposes and you can use that wheneveryou feel free to okay. So another property that I want to make youall aware of that is in CSS is actually a property. So the clear property makes sure that nothing actuallyappears before it. So in this casethe footer tag, which is right about here, which says only the copyrightpart now it is shown here. This is a footer tag thatwe are talking about. So you want to saysomething like let's say so you can say clear and both so Tellyou specify Cleo's. Okay. So let's go to backgroundcolor of black. That's also say the color of the text should be whitejust to make it more prominent. Yeah, so nothing actuallyappears to heard that so that's how you use clear now. So there's also styled typesalso list style type. So let me just see we havethese lists out here. First of all, which says random123 random one, two, three. Now, let's say first of all, let's convert this intoan unordered list so find all that's going to replacethat with unordered list, right? I just want to show itwith unordered list first. So let's say let's selectall the URLs and let's say list style is going to be none. Now if you see out here, we have these bullet pointsand now we don't okay, so you can also do thesewith ordered lists. So let's go backand let's do control and you LL find all that. Select them. Let's make themall Wells ordered lists. Let's see now. Oh, well doesn't workwith list type. None. If you just realized nowwe can do something like Alpha lower Alpha. So let's seethat how that works. Okay. So for lower Alpha weare say list-style-type, please remember that. That was my mistake right now. Okay, if you haveto select the oils again, Now you see that we have these lists typesthat is saying but small caps. Now, there are other stuff likelower Latin lot slower Latin. So let me just show you whatthat looks like save it. Okay, that doesn't really change because I don't thinkI'm Latin installed, but we can also go Greek. There's a bunch of stuffthat you can do. It's pretty fun. So I have Greek installnow it goes Alpha Beta gamma instead of ABC and that's how youcan change stuff. You can also change the positionof the list style. So let's start position. You could say outside. So let's see what that means and don't reallychange much out here. But that's one of the propertiesthat I just want to show. Okay. Now you can also Place contentsbefore an element. So let me just show youhow to do that. Let's clear allof these things now. So let's say we wantto select power 1 and say so this is going to bea pseudo selector again. So you say after you say content and your content is going to be lets say address a allthese ad rates are going to be before this littlething out here. So let me just showyou the change. Yep. So since we said after it hasall these attributes after but if you say before this how to change so nowit's all before them. Right. Okay. Now let's go ahead and see how we can usethe end child elements. So for that we're going toselect our UL again, actually. Let me go ahead and deleteeverything first of all, okay. So let me createanother HTML boilerplate and this is goingto be called list. First of all, let's say we have an unorderedlist with a bunch of list items. So allies all around. Let me just copy that downand paste it a few times right? So now we have allthese list items here. Let's just fill them upwith some random text. Okay. So let's just saysomething random like cats. So let's save this. Let's go out here. Now we have thesethings called cats. Okay. So what if we want themto have alternate paragraphs, I mean alternatebackground colors. So first of all, let's go aheadand select the allies and give them a background. Let's say this gray color. That I have selectedff7 ff7 ff7. Now. You see we have okay, this doesn't seemto be working allies. Looks like I'vedeleted my link tag. That's why the CSSwas not working. So let's see now we have that. Okay. So first of all, let's go back and changethis to ff7 ff7 ff7. Right? This will give itthis gray color that you see out here. It's also give the width. Off around 360 pixelsso that will bring it there. Let's also give it a marginof hundred pixels from the top and equal on the side spring to the center right now supposeyou want to say hell I and child and you could saysomething like do n so this will selectall the even child's and you can say they havea background color of white. So, let's see howthat changes things for us. Now, you see that all these things out here havealternating background color where it's grape. I grieve I'd rewrite and that's how you select allthe even chance. Now, you can alsoselect the first child by saying first child that we do not really needthis to encounter. And now only the first is blackyou could also say last child and not the last you'll be white That's How Stuff changeswith CSS, okay. Now you can alsochange first line. So let's go aheadand change our HTML up a bit. So let's create a paragraph and it's going to havesome lorem ipsum in it. So, let me just show yousomething really cool. Let's lead all of this stuff. Let's select our paragraph and we're going to saythe cereal selector called first line and let's saytext transform uppercase. So let's reloadthat first of all, let me just comment this out just to show you what the pagelooks like without any CSS. So this is our pagewithout any CSS and let me uncomment this now save itand there you go. The first line has beencompletely made uppercase now instead of first lineyou can also say last night. Lash line and that will transformthe last line to uppercase. You could also say somethinglike first letter and okay, so just to show youthat it does indeed work. Let me just reload thiswithout any CSS first. Okay. Now you seethat lorem ipsum begins with the lowercase L. Let mejust uncom this out save it. And now you see that the first thing is a capital you could also changeit to say stuff like deck size or other font size and saya hundred pixels that the first letter will behundred pixels big and that's how you can do stuff like that. Okay. So another thing is youcan also change the pointer or the cursor. So let's see when you're hoveringover a paragraph. Let's say we and hover first of all we wantthe background to become black. We also want the colorto become white and we want the cursor becomes pointer. So, let's see. So you're hovering over it. It becomes his hand like thing and when you go outit comes back normal. So that's how you can changethe cursor also now, let me show you all somethingcalled box Shadow first of all, so let's removethis cursor part. So without the cursorlooks something like this. Let's remove thewhole were tagged. So that's always there, right? Okay. Now let's also changethis to the gray color that I really like andthat's all the changes to Black. So this is whatit looks like now. Let's give it a bitof around 400 pixels. So this is what it looks like. Now, let's also Center it so that I can showyou some cool stuff. So margin, let's sayzero and Otto. So this is going to center iton the top of the screen now that it's centered. Okay. So this is what our thing looks like now suppose you wereto give it a board. So water is a really neat. So 2px solid black. So this is where bar looks likebut there are other stuff also like a box Shadow. So this is our boxShadow books takes three parameters so ones that x and y axis and not reallyin that order is XY and Z axis and thenit also takes a color. So let me just show youhow that happens. So suppose we say zero Xzero Y and let's say 3 pixels on the Z axis rather 5 pixelsto make it more prominent and then takes an rgba of 0 we want to make itreally really invisible. So 0.5. So that gives ita half a paucity. Now you can see this isreally neat little Shadow going all across our So that is what box Shadow doesit's a neat little trick for when you don't want to usea border or something like that. Now other than borders that also outline seean outline is black in color. So outline completely negates our box Shadow and you couldalso say outline equals none. So let's remove that now because box shadowlooks really neat. Yep. Okay. So now let's talkabout text decorations. So since we have some textalready going up, let's decorate it. Now. There are a few kindsof text decoration that I want to show. So the text decorationlet's say so first say is line through put a linethrough all of the content. So now it's all strikethrough. It also say somethinglike over line or underlined. So let's see that underlinedwill underline your text. Yep, and over line as you might have guessed wellover line our text now everything has a lineon top of it fine. Now we can also setthe visibility of our text or any other tag to be honest. Visibility so let's check outall the other visibilities that are there. So do that always goon Google and type visibility and CSS and let's seethe visibility property and how it goes. So you must understand that knowing everythingin CSS is kind of impossible. So you should alwayshave a go to or a backup. So my backup is normallyW3 school and they have everything regarding CSSand its properties. These are all the propertiesthat you want to go through and I'm mostly goingthrough the most important ones in this tutorial that you may use in yourday-to-day projection topics. But sometimes youmight need the rare ones like counter reset emptycells Flex Flex paces and all these stuff and youcan always go back to w3schools and go through them. Now you can sayvisibility is visible or something like thatand should make it visible. Yeah, right. So that was all aboutthe miscellaneous types of CSS that we were handling. Now let's go ahead and seesome gradients and how we can create some beautifulgradients using CSS. Okay. Now before we move on to createIan's let me just show you some white spaces or some moretext Transformations, right? So I already showed you allthese texts transformation that's capitalized as lowercaseas over lines through uppercase in online now capitalized we'll just capitalize it so I don't think I'm goingto show that to you guys. Now, let's closethese two pages out here. Let's create a new CSS file. And first of all,let's set this to CSS. Let's do it and let's say it's going to be paidsix dot CSS No, I'll tear if you see you have a bunchof white spaces right now. Let's see how you can handlewhite spaces using CSS. So there is a thing calledthe ID called White space pre I think that's exactlywhat it's called White space pre yep. That's select thatand you could say white space is pre let's seehow that changes stuff. So first of all, let me load up a sixfor you guys. Right. Let's remove the CSS save it. Let's reload it again. And what we are actuallytargeting is this spot by space will be preserved. Right? So wide space will be preservednow go ahead and comment that save it and let's reloadnow see the white spaces are in the HTML is preserved. No, white spaces can alsobe handled in other ways. So there are two thingsthat I want to show. So let's select this thingcalled Never wrap never wrap. Right and we say that the white spaceis going to be no rap. So, let's see how that looks. So first of all, this is what we are actuallytargeting this lorem ipsum part out here and it'ssomewhat like this and that see how it changes now and now you see that goescompletely out of here. So no wrap itdoesn't wrap it around. So you also have pre-wrap. So let me just show youhow that works. So I'm going to be targetingthis part out here with these weird kindof fight spacing. So, let's see. Preserve rap so withpreserve wrap you go pre-wrap. Okay, and that's the property. So let's see. Yep lorem ipsum runthe rap has been preserved. Okay. Now you can also setup the direction. So let me just show youhow that's done. So we're going to selectthese two things are left. Right and right left. So hash left right and also control C andlet's make this right left. Fine, let's remove all the stuff for now andlet's move everything before right leftto have you removed that. Let's remove this. Let's save it see. Okay. So this is what it lookslike right now and all you have to say isdirection is L to R. So that means left to right now here you seedirection is RTL and see how that changes stuff. So I prefer right leftand I prefer left to right. So that's how it's working fine. So that was all about whitespacing and directions. Now, let's move onto gradients and animations. This is going to bethe last part and the most interesting part in my opinion. So gradients are those beautiful backgroundsyou see on most websites and generate your gradient. You can always use this thingcalled creatine generator. So this gradient generator out here is a reallynice created generator. You have to select the directionand you select any calls. So I've already selecteda gradient out here. It's going tocreate this gradient. Now, let's see repeat7 right now. Let's select the body tag. Let's close this off. Let's close this off or save this and let'screate a new page. First of all and thisis going to be our CSS. So we are save it and saypage seven right now. We select our body and just based on the let mejust explain how this happens. So there's a linear gradient and there's also another thingcalled radial gradient. So I'll just show youthat now the stakes in a few parameters. The first is to the rightthat's Direction and this is how the colors will change. So let's just seehow that works. First of all, let me comment this Out I meanjust open page seven for you. If you see it's goingto be a blank page. Okay, this is a gradient. I'm sorry. Let me save that. Right? So this is what it lookswithout a gradient and you already saw her looks with a greeting but letme just shoot you again. This is where it lookswith the gradient. Now, you can also setthe background with other stuff like image for that you go URLand you can paste in the URL. So let's go and searchfor a beautiful image. I really like Dragon Ball Z. So Goku Super Saiyan 3, so that should be a good imageto save as a background. So let's see this lookslike a really nice image. So you go here. Let me just save this imageas so this is going to be Goku and it's going to be savedin desktop and CSS tutorial. We Goku dot jpg, right so you can sayGoku dot jpg or ight. Now that saved let's goback to our page and it should havea picture of Goku Okay, so And work I thinkI got something wrong. Let's go and analyze that so open upour CSS tutorial. Okay, so it's a JPG fileand not jpeg. So that was our mistakesmall mistake nonetheless. And now we havethis picture of Goku. Now you can also setthe background repeat. Let's close this offsay background repeat and you could say no repeat and will not repeatthe background anymore, or you can saybackground repeat' is going to be let's check outall the background repeats are actually available nowbackground and Pete. So if you're going to backgroundrepeat' and see the properties, you can just try yourself. So you can repeat itaccording to the Y axis. You can repeat itaccording to the x axis. So, let's see how that works. So repeat X, so if we say that I think itshould repeated on the x-axis like it was or you could repeat it on the y-axis and takingthat will show about here, but let's see. Yep. It's not repeatingon the y-axis. So that's how backgroundrepeat' also works. So we've covered that too. Now. We've also coveredthe gradients now it's time. We do some radial gradient nowif you remember, let me just go backto the gradient part. So if you havea radial gradient, all you have to say is that it's a radialgradient out here. And read gradientdoesn't really need direction because it's goingto be radial save it Paige. Let's reload it. Okay. Now we have agreed already. Now, you see allthese lines going in but if I just zoom out you can see that it starts from the centerand spreads out where it's white on the sideand white on the sides. So that's ourradial gradients work. Okay. So now that we'vecovered the gradients, let's go into admission. So I think animation ismost interesting thing that you can do with CSS. So we have selected the div. So first of all,let's give div a border. Hmm. So this border is going to beDo pixel solid and black now? Let's get a background begin with let's say it's goingto be a Fred now. This is how you doanimations and CSS. Okay, so beforeanimations actually, let me show you how you can movethis thing around. Fine, so there are some stuffthat I want to show you guys. So let this be let me just showyou what this looks like. So let me give this a bit first. It's going to be 400 pixelsor other 200 pixels and the height willalso be 200 pixels. Now, let's see. Okay, we have this div out here. Let's make a little bigger 500and fire save it. Yeah, it's also makethis much more prominent. Let's go to 10 pixel background. I mean 10 pixel border and now you see we have a reallyprominent Square out there. Now, let's try some reallyinteresting stuff. So let's say divand when we hover over the div you want to scalethis so scale and let's say you want to scale. Okay, so that's nothow you scale first. You say transform and how do you want to transferyou want to scale it and you want to scale it twice? So when we hover over it,it should scale twice. Let's reload. And as you seeit scaling twice now, we can also transformsome other stuff like this so we can rotate so we can say Rotate 45 degrees. Let's see when I hoverit rotating 45 degrees. You can also skew it. So skewing is how it works. Let's see you can skiat 20 degrees to the x-axis and 10 degrees to the y-axissave it and this is how it gets queuedis the skewing works. You can also translate stuff. So just let me show you how translation workso translate and let's say you want to translate it20 pixels and 20 pixels. So, let's see hover over it and it translatesa little it's translated around 120 pixels just to makeit more clear 120 and 120. Let's save that. Let's reload this and you see that nowit's translating so much right? So that's how translate works. Okay. Now that I'm sure you scalerotation skewing and translate. Let's see we can also setup the transitions. So we're transitions youcan set up a lot of stuff. So now that we're donewith transitions, let's go ahead andsee some animation. So for animation, I'm going to be actuallytargeting this div out here. So let's actuallystyle this div. I've given it the widthof a hundred pixels and a height of hundred pixelsthe background of red and a border of three pixelssolid and black let's say right. Let's see what that looks like. That's what it looks like fine. Let's zoom in a bit now. All we need to do is actuallyset up some keyframes. So we do thatby saying keyframes. Now, we named our key frames. Let's call it animeand we have to set up actually what it will look likeat different points in time. So we do that by saying 0% and it'll have let's saya background color or Fred and then it'll move the soul of wewant to move it in the Square. So let's say it'll benot padding rather just be 0 pixels from the leftand from the top. It's going to be 0Let's let's save that copy that down. Let's base out a bunch of times. Now we want to say isthis is going to be 25. It's going to be 50. It's going to be 75and this is going to be hundred. Let's save that. Let's change their colors. So this is going to be yellowfirst then change to Green some pretty basic colorsblue them and in the end, we'll change it to Red. So that brings us backto the original position. That's first also move it by 300 pixels then let's moveit 300 pixel both ways. Now, it's only goingfrom 300 pixel this way and the end comes back to the original position now touse this key frames animation. We have to givethis animation name. It's going to beusing that animation with the keyframe steam anime. Now, we can saythe animation delay is going to be two seconds. You can also see how many timesit's going to be iterating so you can say that I hundred let's save that. Okay, so our animationis not working because we haven'tsaid the positioning. So now let us just save this and let's say our positionis going to be relative. Let's save that. Let's uncomment our animation. Now, you see that our animation will workas we intended to do. So after 2 secondsour animation starts working and this will justkeep going on and on if you want to actuallyrepeat that animation. There's a way you can do that and that is withthe animation iteration count. Let's see when Itraded a hundred times. Let's reload. Let's wait for two seconds and voila our animationwill keep going on and on and on so that's how you animatestuff with CSS guys and that brings usto the end of this tutorial. Hi everyone. This is the lake are frommadurai car in today's session. We are going to discuss about the mostpopular programming language, which is Javascript. So without any further Ado,let's get started. Now. Let me run youthrough today's agenda. We're going to beginwith what is Javascript what it can do variousJavaScript Frameworks and how it's used with HTML and CSSto build a creative website. Next. We look at the benefits of JavaScript and whyyou must learn it. Finally we're going to lookat a few fundamental concepts like variables data types asarrays if-else statements and so on we'd also be runningbasic JavaScript code snippets on Visual Studio code, which is an editor usedto run a JavaScript. All right guys, let's get startedwith our first topic. So what is Javascript now, the first thingthat pops into your head is probably it is Java. So guys, let me tell you that JavaScript has absolutelynothing to do with Java. So, why was it name JavaScript? Well, it was sort of a marketing strategy whenJavaScript was first released. It was called mocha. It was later renamed to livescript and then to JavaScript when Netscape and sondid a license. Amen, now, let's not getinto the details of that. Now. What is Javascriptin simple terms? JavaScript is a languageof the web. So basically every browser PC and mobile phoneunderstands JavaScript. It's like a universal language. So what is Javascript used for it is used to makeweb pages more interactive. Let me tell you that majorityof websites use JavaScript and all major web browsers have a JavaScript engineto execute it. Another feature is that it'san interpreted language, which means that itdoesn't have to be compiled like languages such as C and Java this makesit a lot easier for us because we can just run our codeand we don't have to run it through a compiler. Now another important featureof JavaScript is that it is mainly aclient-side scripting language. Thanks to JavaScript Frameworks. You can now run JavaScript evenon the server side. So let me tell you a few morethings about JavaScript. So where does JavaScript runJavaScript runs on a browser? So all you need To dois open up your Google Chrome or Internet Explorer and startrunning your JavaScript. All right. So how do thesebrowsers run JavaScript? So these browsers havea JavaScript engine embedded into them. Now this engine will justconvert your JavaScript into machine languageand then run the code. All right moving on. We all know that there are hundredsof programming languages a new languages are being createdevery single day and among these that are very fewpowerful programming languages that bring about big changes inthe market and let me tell you that JavaScript is definitelyone of them JavaScript has always been in the listof popular programming languages and developers are fallingin love with this language. They practically use iteverywhere the use it on the web mobile servers applications. And even in iot now, this is probably why it'sthe most popular language in the world accordingto stack Overflow for the sixth yearin a row JavaScript has remained the most popularand commonly used programs. Ming language now, let's look at a few commonapplications of java script. So what can JavaScript doJavaScript is known mainly for creating beautiful web pages and web applications an exampleof this is Google Maps. So if you want to explorea region or a specific area in Google maps, all you have to do is clickand drag with the mouse and what sortof language could do that you guessed it. It's JavaScript. Next JavaScript is also used in smart watchesan example of this is the popular smart watch maker called Pebble Pebblehas created Pebble dot J's, which is a smallJavaScript framework which allows a developerto create an application for the pebble lineof watches in JavaScript. So a lot of developershave actually built Smartwatch applications features and such things usingthe JavaScript up next we have websites. Now, let me tell you that mostof the popular websites like Google Facebook Netflix and Amazon makeuse of JavaScript. That websites. I think that's enough proof for why you shouldbe learning JavaScript. Now among other things like mobile applicationsdigital art web servers and server application. JavaScript is also used to makegames isn't that amazing now? We are all aware that the browser has not beena traditional games platform. But recently it has becomea robust host four games. A lot of developersare building small-scale games and applications using JavaScript and I'm sure allof you can do it too. It's quite simple. Now, let's talk about somepopular JavaScript Frameworks, which are the mostfavored platforms for developers and business in two days time. Angularjs is Google'sweb development framework that has exploded with popularity in recent yearsangularjs provides a set of modern development and design features forRapid application development. Let me tell youthat a lot of developers swear by this framework because it has a rapiddevelopment Pace another top. Group framework is a react.js. It stands behind the userinterface of Facebook and Instagram showingoff its efficiency in maintaining such hightraffic applications despite. The fact that react hasa higher learning curve. It makes applicationdevelopment straightforward and easy to understand italso performs very good in search engine optimization. So guys by now, all of you are aware that JavaScript is used asa universal scripting language in browsers mainly on the client side using iton the back end to save time and build expertise is one of the major ideasbehind the meteor. So finally front-enddevelopers can also work on the backend comfortably with meteor without switching contacts between Javapython PHP and whatnot. So it basically givesthe flexibility to use one language everywhere. I'm sure you all have hearda jQuery before whenever someone wants to extend their website or the applicationand make it more attractive and The make use of jQuery now this Librarytransforms the whole web into an entertaining experiencea fun fact about jQuery is that over 70% of the world'sleading websites have something to do with jQuery companies like WordPress Googleand IBM rely on jQuery to provide a one-of-a-kindweb browsing experience. Now anybody who's heardof JavaScript knows that it has something to dowith HTML and CSS? So what is this relationshipbetween these three now, let me put it downto you in simple words. Now think of headstogether Mel with stands for hypertext markup languageas a skeleton of the web. So basically had three mlis used for displaying the web. Next CSS is like our clotheswe put on fashionable clothes to look better. Similarly. The web is quite stylish. It uses CSS which stands for cascadingstyle sheets to look better or for styling purpose. Then there is Javascriptnow JavaScript puts life into a I page justlike how kids move around using the skateboardthe web also motions with the help of JavaScript. So JavaScript is basicallyfor interacting with the web now before getting intothe advantages of JavaScript. Let's look at a fewcommon websites that a building the JavaScriptand JavaScript Frameworks. So we have Amazonwhich is an e-commerce website. I'm sure or if youhave shop from here, then there's PayPalthere is YouTube. We all are addicted to YouTube. There is eBayNetflix and Reddit. So guys, this is enough proof that JavaScript isa very important language in such a beauty companies and Brands makeuse of JavaScript. It means that it has something really niceabout it or something. Very Advantage isabout it with this in mind. Let's look at a few benefitsof JavaScript now, it's quite easy to learn. In fact, it's one of thesimplest programming languages. It is not have a strict syntaxand it's totally readable. You don't have to besome hardcore programmer to learn JavaScript. Let me tell you that it is a week type language unlike the strongtype programming languages like Java and C++ which has strictrules for coding. Now. The next feature is PDF guys. It's all about beingfaster in today's world. And since JavaScript is mainly a client-sideprogramming language. It is very fast because any code functionscan run immediately instead of having to contact the server send a requestget an acknowledgement and then wait for an answer. All right now JavaScript comeswith a rich set of Frameworks, like node.js angularjs reactand there are hundreds of such Frameworks earlierin the session I discussed about how efficiently these Frameworks are used to build webapplication server applications and perform different tasks. JavaScript framework is one of the major reasons behindthe popularity of JavaScript. Now, the next Advantage is that it makes web pagesmore interactive. So guys, we are all attractedto beautifully designed and interactive websites and JavaScript is the reasonbehind Such attractive website building such interactivewebsites not only makes the web prettier. It also attracts leads and customers toe-commerce websites. So like I mentioned earlier JavaScript isan interpreted language that does not require a compiler because the browserinterprets the JavaScript. So all you need isa browser to run JavaScript and you can do all sortsof stuff in your browser without the pain of setting upan environment score editors downloading compilersand then learning how to use them. So instead of all of this youcan just open up your browser and start running JavaScript. So among many otheradvantages is the fact that JavaScript is platform independent JavaScriptis supported by all browsers like Internet ExplorerMozilla Firefox Google Chrome Safari Etc. So any JavaScript enabledbrowser can understand and interpret JavaScript code so you can run iton any platform. All right. So now that you have a good idea about what JavaScript isand how it works. Let's get onwith the coding part. I'm going to covera few basic programming concepts of JavaScript and these conceptsare quite similar to the C language. So let's get started. So guys, let me tell you that every browser hasa JavaScript engine and we can easily writeJavaScript code over here without any editors or tools. So this practice is not meantfor real-world applications, but I'll just quicklyshow it to you. All right, open up your browser Internet Exploreror Google Chrome will also do and right click on the pageclick on inspect. So this is open upthe Chrome developer page. All right now go to console. This is basicallythe JavaScript console. Now, let's seehow to run JavaScript on the browser itself. So let me just type a statementand then I'll explain what it does. Now basically, this isa statement in Java script. So what I'm doing hereis I'm going to log this message hello worldonto the console. All right, so I'm going to loghello world onto the console. That's what this function does. Okay. Now this hello worldis enclosed within brackets and within quotation marksand in JavaScript, we always practice to terminatea statement with a semicolon. Now, let's press enter. So here you can see thatit's displaying hello world. All right. So this means the JavaScriptworks on our console. So this is how browsers are embeddedwith JavaScript engine so that they can runJavaScript code now to write JavaScript codeyou require a code editor, you can choose froma variety of options like Visual Studio codeSublime Text and so on but for today's demo I'll beusing the visual studio code, but feel free to usewhichever editor you want Visual Studio code is basicallya simple light weighted editor. And guys are leave a linkin the description box. If you want to downloadthe visual studio code you can go aheadand check the description box. Alright, so I've already downloaded the visualstudio code now, let's create a folder. Okay, we'll createa new folder to store the code that will be executing. So create a new folder. You can name it whatever youlike now just drag this folder and drop it over here. Alright, so you can seethe folders created and we've got the folder open. Let's add a new file indexdot HTML to this folder. Now you don't need to knowHTML to follow this tutorial. I'm just pastinga basic HTML code here. You don't have to careabout this code. It's just for creatinga simple webpage. All right now over here. I'm just using a header in orderto display JavaScript tutorial and then within paragraph Tags, I'm just displayingwith Ed Eureka. All right, you don't needto have knowledge about HTML for this tutorial. Now, what we're goingto do is we're going to use this HTML page as a hostfor our JavaScript code. All right. Now make sure to savethe changes Now open up extensions tab over here. This is the extensions tabNow search for live server. So guys have alreadyinstalled the live server, but make sure you go aheadand install this right away live server is basicallya lightweight web server that we're going to useto serve our web application. All right, install this andrestart your Visual Studio code. Once you open Visual Studio codego to your index dot HTML file. Okay, and right click on this and now you can seethis option open with live server. You're going to getthis option only after you install live servers. So make sure you do that first. So open with live server. Yeah, you can see this page. The HTML page is over here. Now. You can even checkthe console from here. This is the JavaScript console. All right, so this will justopen up your default browser and direct it to this address. All right. Now this address is where our applicationis served from. Okay. So here you can seethe console as well. Now, let's writeour first Java Script code. So go back to visual studio. Okay. Now guys, let me tell you that there are two waysof adding your JavaScript code in the HTML file. First of all, you need to know that your JavaScript code isalways written in the HTML file or it is at least linkto the HTML file. Okay. So like I said, there are two waysof adding a JavaScript code in the HTML file. Now the first is to usescript tags in the body section and type your JavaScript codewithin the script tag. So let me show youhow that's done. Now. This is the body sectionthe body section starts here and it ends here. Okay. So you have to make sure that your script tags arewithin the body section. Now, let's open script tags. Now in the first method you're going to type your entireJava Script over here. So within the script tags, you're going to typeyour entire JavaScript. So let's just typea simple line. So we executed this earlier. Let's just do that. Let's log a messageto our console. All right, so let it be hello. We'll see if this works guys don't Get to terminatea statement with a semicolon. All right now save the fileand open up your browser here. You can see that it's displayed. Hello. All right, this means it works. Now. Let's go and trythe second method now in real-world application. The JavaScript codewill have hundreds and thousands of lines and it is not a good practice totype your entire code over here. All right. So what we can do is wecan open up a new file from the Explorer window. All right, let's gohere open up a new file. Let's name it Hello dot JS. All right. It's a Javascript file. Now. What we'll do is we'll copy this code and let'spaste it over here. Now, you have to reference thisHello dot JS file in your hedge. Tml file. So how do you do that? Okay. So let's addan attribute over here. This attribute is SRC. All right, Sr. C stands for Sourcenow SRC equal to within the quotation marks. We're going to write downthe name of the Javascript file. So hello Dot JS is the nameof my Javascript file. Let's close the Tans. Okay with thisis opened up again. Okay, let's close the tags. And this is the second way. So we're basically referencingHello dot Js from the HTML file. Okay. Now, let's savethe changes here and now let's check our browser. Yeah, you can see that. It's printing hello. So both the methods work. So I hope you understood that there are two waysof adding your JavaScript code to your HTML file. The first way isto write the entire code within script tags. And the second way isto reference a Javascript file in your HTML file. So guys, I hope you havea brief idea about how JavaScript works and how you can useyour browser to run JavaScript. Okay. So now let's get on withour JavaScript fundamentals. I'm going to discussvariables constants and a few otherConcepts over here. Okay. So what are variables variable is a name given toa memory location which acts as a containerfor storing data. Now, what does this mean? Let's say that I want to Definea variable called name and I want to storea name in it. That's a the name is Ed Eureka. Okay, so I'm going to declarea variable called name and I'm going to storeat Eureka in that variable. So name is the nameof the variable. And Erica is the valueof this variable. Okay. So what's happening here isa temporary memory location is assigned to the name variable and this name variableis going to contain a value which is Eddie Rekha. Okay. Now let's performthis practically so that you understand it betterwhich is constant. So what are constants constantsare fixed values that do not changeduring execution time. Now, there are times when we don't want the valueof a variable to change because it might disruptthe whole workflow in such situations. We make use of constantsinstead of variables. Okay. Now here you can seethe syntax of constants now in order to declare a constantyou use the keyword constant. Alright, you usethis key words now, let's practically dothis and see how it works. Right? So I'm going to createa new file to do this. I'll name it constant. Okay. Now let's declare a variable so for declaringa constant variable make sure that you use const keyword. Okay, so I'm declaringa constant variable here. Now. Let's say its pile. Okay. I'm going to assign a valueto Pi 3.14159 appens. If you try to change the valueof a constant variable. Let's try to do that. Okay, we change the value now. Let's okay. Let's log this to the console. Save the changes and make sure you changethe path in the HTML file. So here it's still linkedto variable dot JS change it to constant GS if you're creating a new filethat is all right. Now since the changeshere is well now open up your browser here. You can see type Arrowassignment to constant variable. All right this errors because we try to change thevalue of the constant variable. It is declared asconstant using the value 3.14 and then we tryto change it to 3.12. That's why we have the arrow. So guys you useconstant variables only when you want to keep the valueof a certain variable fixed. All right, it cannot change sothat's when you use constants. Okay. I hope you all are clear. Let's get onwith our next topic. Okay, primitive data now guys, there are different typesof values that you can assign to a variable. All right now in JavaScript, we have two categoriesof data types one is primitive data type and the Dois reference data types. Now primitive data typesinclude numbers strings Boolean null and undefinedreference data type on the otherhand includes objects and arrays and functions. All right. So now let's lookat these primitive data types from Visual Studio code. So I'm going to createa new file again. Give it any name you like. Alright. So for this you'll haveto Define a variable how to define a variableyou use the let keyword. This is the nameof my variable now in this I am going to storethe value Harry Potter. All right terminatedwith a semicolon. So guys here it's a string because we areusing quotation marks when closing the valuewithin quotation marks. So the computer is goingto consider this as a string. So even if I had let's seeif I have something like this. What do you think? This is do you thinkthis is a string or do you think it is or number? Okay, let's check. All right now let's log thison our console and see. that's long age aswell as let's log name. Save the changes make sure youchange the reference over here. Alright, so it's constant. Let's change it to primitive. See if the change is here aswell open up your browser. So it's displayingthe two values. Okay. Now let's check the typeof these variables type of age. It's a string eventhough it is one over here. It's still a string. Why is that that is because we enclose this onewith in quotations. So whatever is enclosed within quotations is goingto be considered as a string. All right, so we discuss numbersand strings so far. Let's look at Boolean. Let's Define avariable called option. Okay. So basically guys are Booleanis used Whenever there is a logical situationor a logic code that needs to be executed. So if a particularcondition is met or if a particularcondition is true, then the following code willbe executed in such situations. You make use of Boolean and Boolean can haveonly two values. True or false? So this is a Boolean. Now the next typeof data type is undefined. Now. What is undefined? I'll show you. Let's Define a variable height. Now, let's log bothof these variables and we'll see the typeof these variables. Okay. So option then let's also log height save your changesopen up your browser. Now, you can see through and you can see under fineinstead of printing anything. It says undefined. Why do you think that is it's because we've defined heightwithout initializing it at all. So we have not set itto any number or any value. That's why it's undefined. So this isan undefined data type. So if you don't initializea data type, it's called undefined. Okay. Now the last one is null now,let me show you an example. So here I am just defininga variable called eye color and I'm setting it to null now. We use null whenever wewant to explicitly clear the value of a variable. Okay, that's when we use null. So I hope you guys are clearwith the primitive data types. Now. Let's move onto our next topic arrays. So what are our is add? These are basically usedto store multiple values in a single variable. So if you have a list of items, let's see that you went shoppingfor some art supplies and you got a paint brush you got can miss you gotsome pallid you got pencils and you got spray paint. Now you want to list these down in one variable nowto understand this better. Let's go to visual studio codeand let's execute some code. So add a new file called array. I'm going to Definean array called shopping. All right. Now in order to Define a variable you will haveto use the let keyword and you'll have to usethe square brackets over here. This is how you define an array. Okay now square brackets are because you have to storemultiple values in an array. So an array is basicallyused to store multiple values of a single variable. Okay. So shopping is a variableit has multiple values. Now, let's define the valuesin the shopping variable. So the first valuelet's say it's paintbrush. I'm going to add a comma and addanother value a comma is needed to separate two values. Okay. Let's add color palette. and canvas Okay,so we have three items in our shopping list. Now. Let's just log thison the console. Save your changes. Make sure you change the pathin the HTML file re all right, save it open up your browsernow here you can see that it's displayingthe entire array now guys, let me tell youthat arrays are numbered from 0. So 0 is the first element 1 is the second element2 is a third element, even though there arethree elements in the array. The number of the lastelement is 2 that's because you start numberingan array from zero. Okay. So guys now how do youaccess an array element? Let's say you want to access color palette you wantto display color palette. How are you going to dothat now in order to do that? You are going to writethe name of the array and within square brackets, you're going to put the numberof the array element. So if you want todisplay color palette, the number of colorpalette is one. So you're goingto type one over here. Okay, so the parentheses semicolon and don't seeit displays color palette. So this is how youaccess array elements. Okay. So if you want to access onlyone element then just mention the number of that element and that elementwill get displayed now. Let's just playa little bit with arrays. Let's define a few other arrays. Let's see whatelse at is can do. So, let me showyou another example. No, I'm definingan array call numbers. So guys this is how you declare an array usethe let keyword name of the array equal to squarebrackets and you terminated with a semicolon? Okay. Now let's add array elements. So I'm going to randomlyadd some numbers. All right. These are my array elements. Now. Let's add two numbersand display them on the console. Okay. So how do you do that? So let's add one. Let's add this elementand this element. All right. So how do youaccess this element which is have to write the name of the arrayopen square brackets. And I the number of the array 0 Plus numbers at position 1 soyou're basically adding 1 and 3. All right save changes goto your browser here. You can see the answersfor all right. Now, let's try some other thing. Let's try to sort these elementsfor that you use a function called sort now sort isa predefined function. So this sort functionis going to sort this array. All right, save your changes. Let's look at the log. Yeah, so it's sortingthis array in order. One, two, three,four five seven. Now, we knowthat 6 is missing here. So let's add an elementto the array. So how do you addan element to the array? So first you type the nameof the array dot push? All right, a bush is a function which pushes an elementto the array. All right. Now which element you wantto push is going to be written Within These parentheses. So six let's push. Okay now let's check the array. Save the changes goto your browser. Now, there are seven elements. All right, see youcan see six over here. Now guys, let me showyou another example now with a arrays in JavaScript youcan have variables with different data typesin one array itself. So single array can have variableswith different data back. Let me explain thiswith an example. So I'm declaringan array called mixed. All right. Now, let's list outthe elements of mix. So first I'm goingto list out a string. Okay, then on numberthen again a string. Okay. Now let's log this to our console andsee what happens. Okay. So this is the mix a day. So here you can seethat it has elements. Let's check the typeof the first element. How do you do that? So you write the nameof the array and you open up brackets and you write the numberof the array which is 0 so, this is a stringcorrect now similarly, let's check the typeof the second element. This is a number. So now we know that within an arraywe can have variables of different data types. Okay. All right guys with thiswe are done with arrays. Now, let's lookat our next topic now our next topic is objects. Now. What is an object an object in JavaScript is a lotlike an object in real life. For example, let'sconsider a girl. Okay. Now this girl has a name. She has a hugeshe has eye color. Let's say her name is Emilyor age is 15 years old and she has brown eyes. So what did I just do Ibasically declared an object which was a girl. And I list down her properties, which is her nameher age and her eye color. So girl is the object nameage eye color on her property. So this is how an object works. Okay. Now what are objects objectsare variables to but they contain many valuesor many properties. Okay, and each propertywill have some value now. Let's look at thiswith an example. So guys, I'm going to createa new file called objects. Now, how do youdeclare an object? So I'm going to declarean object called pain equal to you're going to use curlybrackets to Define an object. Okay, as soon as you usethese curly brackets, it means that you're creatingan object called pain. Okay, and this objectcan store a lot of properties and each propertywill have some type. It's like key value pairs where key is a property valueis the value of that property. So now let's say that this pain hasthe first property of the pain is a type. Okay, so I'm goingto write ballpoint. Now you separate differentproperties with a comma. Okay. Now the second property isprobably the color black. Alright now let's defineanother property called cost now know that over here. I have an enclosed 10in quotation marks because this is a numberit's not a string. Okay guys remember that so guys also terminatethis with a semicolon. Now, what did I do here? I created an object called pen. This pen has three properties. Okay, the three propertiesare type color and cost. Now the property typehas a value ballpoint. Similarly. The property colorhas the value black and the cost is 10. Okay. So this is how youdefine an object. So the object is a pen. It has threeproperties and values. What if I want to displaythe cost of this pain, I just want the costof this pain. Not the entire object. Okay. So, how do youaccess an object now? This is the syntax for accessing an objectobject name dot property name. Okay. Now there is another wayof accessing this is known as The dot notation and the other way is like this object nameyou use square brackets within which you writethe property name. All right. This is the other way now, I honestly preferthe dot notation because I feel it's simpler. Okay. So now let's try to displaythe cost of the pin. Okay. So, how do you do that? First you write the object name, which is Penn DOT the propertyname which is color. Sorry, then the property namewhich is caused. Okay now I want to display this. So I'm going to put thisin the console DOT log function. I'm going to put this inthe console DOT log statement. All right now savethe file make sure you change the referencein the index or HTML. So change thisto objects save this. Open up your browser. Here you can seeit's displaying 10. Okay, so that's how youaccess object properties. Okay. Now let me show youanother example of objects. Okay. So now let's definean object called Emily. Okay. Now this object hasa few properties so properties and the valueof those properties because it's a numberI'm not putting it in quotation marksthen let's define cool, which is another property seeif she goes to DPS. Then there is class. Let's say 10th standard. Alright now, the nextproperty is subjects. Now. I have more than one subjects. That means I havemore than one value to this variable. Now, how do I store morethan one value in this variable? So guys, do you remember I spokeabout arrays arrays are used to store multiple valuesof the same variable. So let's define this as a array. So this ishow we Define an array. Add physics now add comma after every value sophysics and chemistry. Let's add biology. Let's and months. So don't forget toterminate this over here. Now. I have typed out the wrongspelling for physics. Okay, so guys, let's say I wantto display a chemistry. How would I do that? So how would I do this? So like I said first you're going to writethe object name dot the name of the property nameof the properties subjects. Now, this is an array element. So in subjects, we're going to accessthe second element. All right, the number ofthe second element would be one. Okay. Now in order to displaythis let's put it in this statement. Now save your fileopen up Chrome. All right, there is an error. What exactly is the arrow? Okay guys, sothe error is over here. I forgot to put a comma so after every propertyis supposed to put a comma so I forgot to put a comma here and that was the error now, let's save the file andlet's open up our Chrome. So here you can seethat it's displaying chemistry. Okay. So that's how it works with thiswe're done with objects. Let's move on to our next topic. Now. The next topic is functions functions are basicbuilding blocks in JavaScript. It is basicallya set of statements that perform some task. Now. Let's see thiswith a few examples. Let's go to our visionStudio code now. Let's add a new file. I'm going to nameit function dot Js. So how do you defineor declare a function? So in order to declarea function you have to use a keyboard function spacethe name of the function. So let's say hello. All right. Now after this you needto add parentheses, all right, and then curly bracesand within the curly braces, you're going to definethe body of the function. Now, let's just say that this is justlogging some message on the console like hello. All right. Now I've createda function for this now. Let's call this function. So how do you do that? You write the nameof the function with the parent. This is and then youend it with a semicolon. Okay now save the changesmake sure you add function over here in the HTML file. Seems of changes here aswell now here on the browser. You can see that it's printed. Hello Okay. Now what's the pointof this function? Let's do something better. Okay, let's makea better function. Let's say wewill create a function for multiplying two variables. Okay. So let's say that wewill create a function for finding the productof two numbers. Okay. So for that you usea keyword function, I'm going to namemy function product now Within These parentheses, I'm going todeclare two variables. Okay. Now these variablesare called parameters. So I'm going to passtwo parameters to my function. Now, let me get on with it. You'll understand it better. Now what this functionis going to return is the product of A and B. So a star B. Alright now,let's call this function. So how do you calla function name of the function and over here? You're going to pass the value? You ought to these variables. Now these variables havenot been given any value here. I just Define these variables and they are justknown as parameters. These variables areknown as parameters. Okay. Now let's pass some valueto these variables. Let's past 2:00 and 6:00. Okay, and it with a semicolon. Now these valuesare known as arguments. Okay, so when you calla function you pass arguments to that function, but when you definea function you pass parameters to that function. Okay, let's see if this and let'sopen our console. Wait a second. Yeah, I forgot to print it. Now. Let's tour the productin some variable. Let's Define a variable. Let's say x. Okay, so I'm storing my productin a variable called X. Now. Let's log this variable on my console save the changesgo to your browser here. You can see 12. All right, so this is how Your boss functionswith different parameters, okay. Next we haveconditional statements now condition statements are usedto perform different actions on different conditions. So if is used to executea block of code only if the condition is true, okay. So basically if a conditionis met then the statements within this blockwill get executed. This is the syntaxof the if statement. So basically if is a keyword and within brackets are goingto define the condition now if this condition is metthen this statement is executed or a setof statement is executed. Okay? So this is how it worksin the program and you start the program and when the executioncomes to a condition if the condition is truethe code within the if block gets executed. All right, and it ends there but if the condition is falseyou just exit from the if block. All right, let's lookat this practically. So let's create a new filecalled if So first, what I'm going to do is I'mgoing to Define an array now. Let's add numbers into the array some randomlywant to add some numbers. Now, let's addsome condition over here. Now if you're I'm goingto define the condition, which is number and 0is equal to equal to. Number at place to thenjust display some statement. All right, let's see, correct. Okay. So what is happening here now? I'm basically defininga condition within the if statement over here. And this is a statementthat's going to get executed if this condition is met so the condition is that the number at location0 which is this number if this number is equalto number at location 2, which is this number so these two numbersare equal then it's going to print out correct. All right. Now these equal to equalto sign is used for comparison. So it's used to checkthe value of this variable and value of this variable if these two values are the samethen the condition is met. All right. Now, let's savethe changes we made here. Also, remember to go to your HTML file changethe reference to if dot JS. Okay, save the changes goto your browser here. You can seethat it's displaying correctly. Now this was theif conditional statement now, where do I use the elsestatement now else is used to execute a block of codeif the same condition is false. Okay. So this is the syntaxof Ethel's so if there's some condition there if that condition is met thenthis statement is executed. Now if this conditionis not met then if you want to do somethingelse you use the else statement. So when this is false, this will happen Okay,so instead of exiting you're going to performanother operation, let's look at the flowchart when you're executingthe condition and if the condition is true, we're going to execute the blockof code within the if block. Okay. Now if the condition is false, you're not going to exit insteadyou're going to execute another block of code, which is in the else if block. Okay. Now let's lookat this practically now within the same file itself. I'm going to show youhow this is done. Now. Let's define a condition if numbers This placeis equal to equal to. Then it's goingto print correct. Otherwise now ifthis condition is false, then it's going to printthis console DOT log wrong. Try again. All right, that's simple. Let's see if this works. Okay. Save your file openup your browser. Okay. There is some problem over here. Let's go back to the code. Okay, my mistake. Save the file openthe browser now, it should work nowjust comment this out. Otherwise, you'll get confused. I'll just write here. This is the if/else blockif else example. All right, let me saveit open your browser. See it says wrong try again. So this ishow the else statement works. All right. Now you can even play aroundwith a few other examples. Let me show youa few other examples. Okay. Now, let's give two conditionswithin the if block. Okay. Now let this bethe first condition. So how do you addanother condition you just use the and operator? Okay, and add anothercondition over here. Okay, I'm making a mistake here. The array name is numbers. So added toconditions over here. Now only if bothof these conditions are met this statementis going to be executed. Okay? as we are going to now,let's see if this okay. We'll just comment this outso that you don't get confused. Alright, so see the changesopen up your console. Okay, that is some Arrow. So it's basicallysomething I did while naming so this is an arrow because I forgotto add an S everywhere. Okay. Now I'm saving the changesthis should work. Okay, so it sayswrong try again. Now this is wrong because bothof these conditions want met. I'm using the and operator here. So it's compulsory that this condition is trueand this condition is true. Okay. So if you use the oroperator here instead, this is the or operator. Okay, if you use the oroperator here instead, this should work seeit displays, correct? Okay, or means that one even if oneof these statements or one of these conditionsis true then this is correct. Okay, so guys with thatwe are done with if-else. Now let's move on to Loops. So what are loops loopsare basically used when you want to run the samecode over again each time with a different value. So that's when Loops are used. Now Loops are of three kinds. There is for Loopthere is while loop and there is do-while Loop. Okay. Now, let's lookat each Loop one by one. So first we havethe while loop now what happens here is while basically Loopsthrough a block of code, as long as the specifiedcondition is true. Okay. So while this condition is truethis Loop code is executed when you execute the conditionand if the condition is true, the conditional codewill get executed. Otherwise if thecondition is false, you're just going to endor you're going to exit from the loop. Okay. Now, let's lookat a practical example of this so createa new file called while dot JS. So guys before movingon to an example. Let's discuss the do-while. Loops. Also a basically do while is just a Gradientof the while loop now this Loop will execute the code blockonce before checking if the condition is true, then it will repeat the loop. As long as thecondition is true. Okay. So we are you can seethe syntax within the do Loop you have some code. Now this code is executed once and only after thatthe condition is checked. Now if the condition is true, then you're goingto execute it again. What are the condition is false? You're not going to execute it. But this code is definitelyexecuted at least once. Okay, that's the differencebetween do while and while so the loop codeis executed at least once in the do-while loop. Okay. Now let's dothis practically now, let's Define a variable Iand initialized it to zero. Okay now within my while loop, I'm going to definea condition which is while I is less than 5it has to do this now the statement here is It hasto display this the number is and it has to display I okay. So plus I and let's incrementthe value of I okay. Now. Let's see if this now let's look at the while loop nowwithin the while loop. I've defined acondition which says while I is less than 5it has to perform the following code first of set I to 0 so then I is less than 5 meaningzero is less than 5 now. This is true. So it's going to executethese two statements. So I just want to printthe number is zero and then it's goingto increment the value of I so now I will become1 over here. Lll go back to this Loopand it will check if one is less than fivewhich is true. So it'll executethese two commands similarly and keep going till I is equal to 4 is equalto 4 L execute this but when I becomes5 5 is not less than 5 so this will not be executed. Okay. Now, let's just save thisand let's change our path in. Index dot HTML to while save this as wellopen up your browser. See it print still number for 012340 K. It isnot print number 5 because 5 is not less than 5. Okay. Now let's do the same thingusing the do-while loop now for the dowhile loop first. You're going to definethe do block now over here. Let's copy pastethis code over here. Okay. Now after the do Loopyou're going to put the while condition. Okay. So let's give the condition is I greater than 5 let'ssee what happens. Okay. So what is going to happen hereis first it's going to execute these two statements. Okay. It's going to printthe number is zero. We are because wehave initialized I-20 over here. Okay, then it's goingto increment I to 1. Okay, then it's goingto come out of the loop. And then it's goingto check the condition is one greater than 5 nowthat is false. So it's going to endover here itself. Okay. Now let's just comment this out. That you don't get confused. Okay will commentthis whole thing out now save the changesopen up your browser. See the number is 0its printed only once okay now that's the difference between while anddo-while loop now. Next we have for Loop. Let's look at for Loop. So what is for Loop? So for look basically repeatedlyexecutes the loop code while a given condition is true. So test the condition before executing the loop bodynow here you can see the syntax of for Loop within the for Loop. There is a condition which is begin separatedwith a semicolon. Then there is conditionsemicolon and this step and then there is Loop code. Okay. Now this begin statementis executed one time before the executionof this code block. Okay. So before this Loopcode is executed. This condition willbe executed one. Okay. Now, let's look at the Syntaxfor the for Loop now this for Loop has Three statementswithin the parentheses. Okay. Now begin is executed one time before the executionof this code. Okay. Now this conditiondefines a condition for executing this Loop code. The next is the step. This is executed every time after the code blockhas been executed. Okay. So after this has been executedthis is executed. So guys, I know this issort of confusing. Let's practically do this. You'll understand it better. So now I'm going to createa new file called for Now let's declare of for Loop. So use the keyboardfor and then you put the first statementor the first condition, which is I is equal to 0. Okay. Now the next one is I isless than 5 next one is I plus plus make sureyou separate these conditions or these statementswith a semicolon. Okay, you have to puta semicolon over here. Now open up your Loop code now within the loop for justlet's perform the same thing that we did in the while loop. All right, so the number isI'll be back to be forgotten to declare I hearso let's declare I first let I sayI've declared I over here. So guys you don't haveto declare it over here specifically you can do that of course, but youcan just declare I over here. It's F let I is equalto 0 you're initializing I and you're declaring it. Okay. So what happens hereis first I is equal to 0 you're defining a variable I and you'reinitializing it 2-0. Once you initialize I to 0 it's going to executethis statement once okay, so it's goingto execute this statement. Once after that it will go to this condition is Iless than 5 is 0 less than 5 which is true. So it's going toexecute this statement. Okay. Now after this is executed it's going to executethis third statement, which is I plus plus. Okay. So the value of Iis going to become one and the same thingis going to happen again. And again, let me explainthis one more time. So first you'reinitializing I to You when you executethe first statement, this code blockis executed once all right after this it wrecksthis condition is I less than 5 if the condition and onlyif the condition is true, this statementwill get executed. Now after this statementis executed this third statement over here will get executed. All right. I hope that is clear. Let's save the changesand let's also change the reference over here. All right savethe changes here as well. Yeah here you can see that it's displayingit five times. Okay, so that ishow for Loop works. Okay. Now you can do a lotof things with for Loop. So let's say that your teacheris punished you because you talktoo much in class and she's asked you to write I'm sorry 50 times. So can you usefor Loop to do that? Well, you can definitely usefor lucre do that. Let's try and seehow that works. Okay. Now we're going to dothe same thing set I-20 Then I is less than 50 nylon. If your teachers kind enough, she'll ask youto write a 50 times. Otherwise hundred timesis the minimum. All right now withinthe code block. Let's log this message. Okay, so first we'regoing to I'm sorry, and let's put a smiley as well. Okay, so I madea mistake over here. Okay. So this is how it works. Let's save this codeand you know, let's comment this out. Okay. Now let's check our browser so you can see that I'm sorryis displayed so many times. So guys that'sa simple hack with this. We complete our for Loop. Now the last topicof discussion is switch cases. So switch statementsare used to perform different actions basedon different conditions. Okay. Now how does switch statementwork now here you can see that. This is a syntax now after thiswhich there is an expression and there are few cases case one case two case threeand default and so on. Okay, whenever case one is true the code blockone will get executed similarly if taste to strew code block3 will get executed. Now, how does this work? Now? What happens is the expression within this switch statementis executed one. Okay, after that the valueof the expression is compared with the value of E.Of these cases again. So this is the valueof the cases. This expression is comparedwith the value of the cases. So if there is a matchthis block will get executed. So basically the valueof the expression is compared with the value of the cases. So if there is a matchthen the associated block will be executed. So if the valueof this expression and the value of this case isthe same then this code block will be executed. Okay, let's try thiswith an example. So let's create a newfile called switch. Okay. Let me type out the code and then you'll understandwhat I'm saying? Okay. Okay, so that's a long codefor this is very simple. Now what I've donehere is I've defined a variable called games and the valueof that variable is football. Okay. Now I'm passing this variableinto the switch statement. So basically the valueof games is football over here. Now if the value of this expressionmatches with any case, then that block will getexecuted now here the value of games is football, correct. So you're going to lookfor football now the case over here is football. So basically thisis going to get executed. Okay. Now, let's just saveand let's run the code. You'll understand whatI'm talking about. So guys, make sure to changethe reference over here save it and let's check the logs. See it prints. I love football. So why did it do this exactlynow it did this because the value of this expressionmatched with This case Okay, because it matched with this case the statementwith in that case got executed. Okay. Now if I change the valueto foosball, okay, let's see what happenswhen you save it. It says I like other games now. This was the default statement. Now this is default statementis executed whenever this expression does not matchwith any case Okay, because I'm not Givin foosballanywhere over here. It executes thedefault statement. So this is how theswitch statement Works. Hi everyone. This is the lake are fromEd Rekha in today's session. We are going todiscuss about jQuery which is the most popular and the most useJavaScript library. So without any further Ado,let's get started. So first of all, let me run youthrough today's agenda now before we start offwith what is jQuery, we're going to discuss. What is Javascript after that. We will see why you should useAnd what is jQuery next we'll see how to install jQuery which barely takes a minuteafter which we'll discuss Dom which stands fordocument object model and jQuery selector, then we'll discussjQuery methods. We look at methods like beforeafter text HTML CSS attributes and many othercommonly used methods. All right, then we'll move on to jQuery events nowhere we will see how to use the click event on event and the keypress eventmoving on to jQuery effects. There are hundredsof jQuery effects and we'll discuss the mostcommonly use effects like hide/show toggle Fade Outslide up slide down and so on finally we look at jQuery UIor user interface where we will discussdroppable draggable and the date picker UI. All right. So guys, I hope all of you are clearwith the agenda now before I move on to our first topicI wanted to tell you that I'd be making useof Visual Studio code, which is basically a code Editorto run code Snippets that are be explainingin this session. If you don't have Visual Studiocode you all can go ahead and download it or useany other editor of your choice. I leave a linkin the description so that you all can download visualstudio code now guys before I start off with the session. Let me show youhow Visual Studio code looks so I'm just going to openup this editor now guys, this is a very simpleeditor and you know, I think it's my most favoriteeditor you can use Sublime Text or any other editor thatyou are comfortable with. All right. So this is how it looks now. What I've done is I've alreadycopied a folder called jQuery. All you have to do is createa folder on your desktop and then drag itand paste it over here. Okay. So Bob already created a folder because I think it'sa good practice to have a folder that contains allyour code Snippets. All right now guys, if you downloaded Visual Studiocode you need to make sure that you have installedan extension called live server. Alright, so I've alreadyinstalled this live server. Now this would basicallyhost our webpage. So whatever we type out or whatever codewe have over here in get hosted using this lives. So make sure you installthe live server in order to host your web pageor whatever you create. Okay, so that's about Visual Studio code nowwithout any further Ado. Let's get startedwith our first topic. So what is Javascript now in simple words JavaScript isa universal language of the web which every PC every mobilephone and browser understands now JavaScript is mainlyused to make a web page or an application lookmore alive and interactive. So every time you see a reallycool web page with a lot of motions in graphics. It's because JavaScriptwas used to design it. Now. Another important featureof JavaScript is that it isan interpreted language unlike the high-levellanguages such as C C++ and Java now these high-levellanguages require a compiler now when it comes to JavaScript, you don't need a compiler because JavaScriptruns on the web and most of the web browsers like Google Chrome SafariInternet Explorer Mozilla Firefox already haveOur script engine embedded into them apart from that JavaScript is mainly aclient-side scripting language. So guys, I hope with this your clearwith what is Javascript. I hope you have a briefidea about JavaScript. Now if you want to learnmore about JavaScript, I'm going to leave a linkin the description. You can check outour content on JavaScript so you can learn more about it. All right. So why use jQuery now, we all knowthat there are hundreds of JavaScript Frameworksand libraries out there. But why must you use jQuery well for starters jQuery makes itextremely easy to manipulate the Dom now Dom basically standsfor document object model guys. Don't get intimidatedby the name. I know it sounds like it's a very complex conceptbut it's very easy. All right, I'll be explainingthe Dom in the further slides. So stay tuned. Now Dom is basicallylike a tree structure of the head 30ml elements. Now in order to make a webpage interactive webdevelopers manipulate the Dom and jQuery makes itextremely easy to do that now apart from thatthe If its contributors is more diverse and bigger thanany other JavaScript library, it has detailedand comprehensive documentation, which gets better every day. Now another bonus point is that jQuery has thousandsof plugins available for free and they can easilybe added to our project. So these plugins add valueby enhancing user experience. Now one such example isthe age of technology which develops a responsiveand feature Rich site. Okay moving on jQuery alsoprovides cross browser support. So basically every timeyou write a code on your local machine and you want to runit on a browser like Google Chrome Safariand all of that you don't have to worry about whether your code will runon different browsers because jQuery takes careof the dependency issues. Now this is because it supports almostall the commonly used browsers. All right now guys, I hope all of you are clearwith why we should use jQuery. Now, let's look atwhat is requiring now jQuery is basically a fastconcise JavaScript library. With a nice Moto with saysright less and do more now that is very apt because it's entirefunctionality revolves around simplifying eachand every line of code. It simplifies the Dommanipulation event handling and basically every other thingnow jQuery offers a very effective wayto capture wide variety of events such as a userclicking on a link without the need to clutterthe HTML code jQuery takes care of all the complexthings in between. Also an add-on is that jQuery isa lightweight library of about nineteen kilobytesin size after compression. So this makes it fasterto load the library and also takesup minimal resources. Now jQuery alsocomes with hundreds of built-in animation effects, which you can use in your website to makeit more interactive. All right, so guys, I hope all of you are clearwith water jQuery. Now, let's move on to installing jQuery now, thereis no installation perceived. This is just downloadingjQuery and let me tell you that there are two waysof doing this. The first is the localinsolation wherein you copy the jQuery libraryon your local machine and you include itin your HTML code and the other one is linkedto a CD and now Syrian stands for Content delivery Network. So you can include jQueryLibrary into your HTML code directly from the Syrian. So basically this is like a linkto your jQuery Library. Okay. Now, let me show youhow you can do this All right. So this is how the officialwebsite of jQuery looks like now here you can goon download So over here, you can see download the compressed production jQuerythree point three point one. So this is probablythe latest version of jQuery. So what you can do is youcan either click on this and you can copythis entire Library. This is basicallythe jQuery Library. You can copythis entire Library. And you can paste itwithin a file over here. Okay, so I'm going to paste itwithin this jQuery folder that I created. Okay, you can pasteit in a file. Let's name a jQuery. So what you can do is youcan copy that entire code and paste it in this file. But this is not somethingthat we're going to do because I me tell you thatif you copy this entire thing and you paste it in your folder, you can easily goand edit it by mistake. Let's say by accidentyou click on something and a small line gets deletedor a small element gets deleted. So your entire coreis going to get messed up because your jQuery librarywas tinkered with okay. Alright, so we are now going tofollow the first method instead. We're going to do the linkto a CD and Method now, I've created an index dotHTML file within which I have the link copied over here. Now, this is basicallythe jQuery Library you can see the version isthree point three point one. And also I have another linkwhich is for the UI jQuery UI. All right now guys, this integrity and cross originis just so that Nobody man, you played the contentsof these libraries. All right, so Ihave copied this link from somewhere on the web. I don't remember but I'm just going to pastethis link in my description box. So y'all can goahead and use this. Otherwise, if you finda better link then y'all can use that as well. Okay. So this is basicallymy HTML file. So guys, I'm now goingto obviously discuss the basics of HTML and CSS because that's not underthe scope of this session. So I hope all of you havea basic understanding if y'all don't havea basic understanding of HTML CSS and JavaScript, like I said earlier, I'll leave a linkin the description box. Y'all can go and check outthat video and then come back to this video. All right, so guys,that's how you download jQuery. It's not like an installation. It's basicallydownloading the jQuery. Okay. So now let's lookat the document object model. Now the document object modelis a tree structure of the various elementsof HTML here. You can see that itbegins with document. This is basicallythis this document is basically the ancestor ofevery other element in this File and this HTML againis the ancestor of all of these other elements. Okay. Now the head and the body elements arechildren of the HTML element. So this is basicallylike a tree structure. So basically title isa descendant of head similarly H 1 and the P tagsare children of body. Okay, so they are justdescendants now guys, this is a simple tree structure and this is whatdocument object model is. It's not any complex concept. It's a very simple structureof your HTML file. Now, let's moveon to jQuery selectors. Now. The first thing we're goingto learn in jQuery is the selectors now, why do we need selectors theseselectors allow you to select and then manipulatethe HTML elements or the Dom elements now all that the web developer has to do in order to makea webpage more interactive or just create a web pagefor that matter is to make sure that the Dom iseasily manipulated only when you add effects into the Dom youcan make any changes. On your web. So that's why we use selector. So basically selectors with select a particularHTML element and then you can use other functionson this HTML element and man, you played that element. All right. So what we're going to dois we look at examples will type out codesand we look at examples, so don't get too confused. Okay, so I'm goingto open up my file. So let's open a body tag. Now within the body tag. I'll have a header. I'm gonna have a H1 tag, which will basicallysay jQuery tutorial. Okay, guys, the queueis always caps in jQuery. So we'll have a header which is jQuery tutorial and let's havea simple paragraph by Ed Eureka. All right, in order to make thingsa little more interesting. I'm going to createan unordered list now within which I'm going to havea few elements in the list tag. So let's say I'm goingto list my favorite dogs. I know there are no favoriteswhen it comes to dogs because all dogsare really cute. But if I had to listdown three favorites, I would definitely gowith these three, okay golden retrieverquite old-fashioned when it comes to dogs. I really like golden retriever, even though there arenew breed's right now, but I think this one's reallycute and then Siberian Husky So guys you can makeit interesting and put in a list of whatever you would like like you can put in listof your favorite fruits or your favorite colorsanything like that? Okay, and that's it boxerclose the hatch tml tag. So I'm just goingto save this file. And what I'm going to do isI'm going to reveal an Explorer. So basically this ishow our webpage looks now, like I mentioned earliermost of the browser's like Google Chrome SafariInternet Explorer have a JavaScript engineembedded into them. So this is theGoogle Chrome browser like y'all can see now what I'm going to dois I'm going to right click on anywhere on the page and I'm going to clickon inspect over here. Okay. So this opens upmy JavaScript engine now, this is basically the file. All right one second. Okay, there was a small error because I had opened upa CSS file which I'd link. Okay guys just ignorethat are off. So now what I did here wasI open up the JavaScript engine. And we have a JavaScriptconsole over here. It says JavaScript contacts. Now, what you can do is youcan manipulate the Dom elements through this console. So basically you can rundifferent commands over here. You can type somethingand you can run it now just like in the vanilla JavaScript. We need to select thingsand manipulate them in jQuery. We can select anything we wantby using this dollar sign. All right. So this is the dollar signor the dollar function that you can useto select anything now and regular JavaScript. We have functionslike document dot get element by ID query selector allthen there is get element by class get Elements by tag and a hundredsof such functions, but when it comes to jQuerythe dollar function basically replaces allof these other functions, okay. Now, let's look at an example. So let's say I wantto select this header header 1 this is hedge one tag, right? So what I'm going to dois I'm going to type the dollar sign first. We'll open up bracketsand within quotation marks, we're going to type Whateverwe want to select. All right. So what I'm doing over hereis abused the selector function and within the quotation marksand mentioned heads one. So what this does is itwill basically select the H1 tag for me. Okay. So let's click on enter. Now when I click on hedge one, you can see that it highlightsmy header one tag. Okay. It also shows me the dimensionsof the tag and this is how to select a basically works. Now. Let's try selecting the body. Now that I've selectedthe body you can see that it highlightsthe entire body and it shows me the dimensionsof the body as well. Okay, so guys this ishow the selector works now, let's make thingsa little more interesting. Okay. Let's just go backto our Visual Studio code. Now. What I'm going to do here iswithin my first list element. I'm going to add an anchor tag. Okay, let's say werandomly add an anchor tag and we're basically directing this to google.com andlet's call it Google. So guys. I hope youall understand basic HTML because I'm now goingto explain the HTML. It's going to bea very lengthy video if I sit and explainhow HTML to y'all. So for that I told you all that I'm going to leave a linkin the description. Y'all can refer that linkand you all can understand HTML. So I save the file now. I'm just going to refresh. Okay. So here you can seethe anchor tag, which is Google now. Let's see that I wantedto select this anchor tag. Okay. Now we previously sawhow to select the H1 tag. We saw how to selectthe body, okay. What if I want to selectthis particular anchor tag? So what I can do is I'm first going to typeout unordered list. You have to type out the pathto your anchor tag. Now in order to specifythe anchor tag. What I'm going to dois I'm going to specify that the anchor tag iswithin a list and I and in turn this list iswithin an unordered list. Okay, so it's basicallylike specifying the path to this anchor tag now because there's only oneanchor tag in this entire list. It's going to selectthis anchor tag only. Let's see how that's done. So you simply typeout UL l i and e so your this isyour unordered list. This is your list itemand this is your anchor tag now, let's click on enter. So when I click on a you can see that it highlightsmy anchor tag, it also gives methe dimensions along with it. So guys, this is how it works. Now. Let's make it a littlemore interesting. Now. Let me just typeout this code first and then I'll explainwhat it's doing. So what I'm going to do first, Is I'm going toselect the header. Okay, H1 tag, and then I'm goingto apply a method to this. I'll just type it out firstand then you all can understand what I'm saying. So what I'm doing here isI'm selecting the H1 tag using this dollar functionafter that to this H1 tag. I'm going to applythis method dot CSS method now within this methodI passed a parameter and a value to that parameter. So the parameter is coloror the property is color and the valueof the property is red. So what this line is goingto do is it's going to change the color of the H1 tag to read. Okay. Let's see if that works. All right, you sawthat this turn to Red. So guys this is how you can playwith the selector it basically manipulate the Dom. Okay. So this is what I meant when Isay manipulating the Dom now, let's make it a little more fun. And let's say we changethe background color also. Okay, we changethe background color to Black. So here you can see the result. So guys basically the selectoris just to select a Dom element and then manipulate itin whichever way you want. Okay. So this is the most basicconcept of jQuery understanding the selector is very important because you're goingto use selector at every line of jQuery. So with that we are donewith our selectors. Now, let's lookat our next topic now we're going to discussa few jQuery methods. Now one of the methods that I already discussedis the CSS method. I just showed you allhow CSS is used to style a particular header. Okay, but we'll come backto this later on now similar to that. We have other jQuery methods like the beforemethod after matter. Now, what is a before methoddo now this method inserts a specified contentbefore the selected element. Now, this isthe selected element now before the selected element. It's going to add this content. So whatever contentyou want to add. Before the particular element you mentioned that contentWithin These parentheses. Okay. Now let's look at it. Practically. I'm going to open up my browser. All right. So what I'm going to dois I'm going to select my unordered listand before my unordered list. I want to add somethingbefore my unordered list. So how I can do that is I'm just going tomention whatever I want to do. So within H2 tags, I want that samemy favorite dogs. And let's closethe hatch to tag. So what I did here wasI basically selected my unordered list firstand on my unordered list. I'm going toperform this function. Now what this does is itadds whatever I type Within These quotation marksbefore my unordered list. Okay, let's just seehow it works. So here you can see that rightbefore my unordered list. I have my favorite dogsnow similar to this is the after method. Okay, let's go backto the slides. Now the jQuery after method insertsa specified content after the selected elements. Okay. So this is the selectedelements and after the selected elements. It's going toenter this content. Okay, let's look athow this works will look at the same example. So what I'm going to do is I'm going to changethis to after okay and let's say I type Are adorable and okay. So you saw that it says my favorite dogsblah blah blah are adorable. Okay, so guys this ishow before and after functions work. So these are justsimple examples of how before and after work. So up. Next we have text nowa text function is used to set or return the text contentsof the selected element. So let's say we havea selected element over here. And if we pass this text method on that selected element itjust going to return the text of this element. You can also setor replace the text of a particular elementby using the text function. Okay, let's notget too confused. I'll just open up my browserand show you how this is done. Let me just refresh my page. Okay, let's look at an example. So what I'm going to do isI'm going to use a selector and I'm going to selectthe list of elements within the unordered list. So I've selected a lie, and I'm going to usethe text function over here. Okay, let's seewhat this returns. Okay. So over here you can seethat it's returned golden retriever GoogleSiberian Husky and boxer. Okay, let's do one thing first. Let's remove this anchor tagbecause it does not make sense. Okay, so I'm just going to savemy file and let's open up the browser refresh andlet's run this command. Okay. So you saw that it returned golden retriever SiberianHusky and boxer. Okay. Similarly. Let's say I just wantto return the first element of my list then I would dosomething like this. So what I did herewas I selected list and in that I mentioned first. Okay, so I basicallymentioned the first element of the list now this returnedonly the golden retriever to me, which is exactlythe first element of my list. You can seethat golden retriever. Now, let's say that I wantto replace some content. Okay, let's say I wantto replace this by adding. Erica with something else. Okay. Let me just refresh. All right. So how I'm going to do this is first always start offwith the selector. So I'm selecting my Pwhich is my paragraph tag. Now since I haveonly one paragraph within this entire HTML file, it knows that it'sthis paragraph Okay. So let's say there wasanother paragraph over here. Then what you would do isyou would mention paragraph: first and you'd performan action on it. Okay. So yeah, let's comingback to this. I'm going to say textwelcome to this fun tutorial. So what I've done here isI've selected the paragraph tag, and then I've applied the dottext function on this tag. Now. Let's see what this does. Okay, let's click on enter. What happened herewas by Eddie Rekha was replaced by welcometo this fun jQuery tutorial. So this is how you usethe text function to either set or to return some Intent. All right. So guys, I hope allof you are clear with this now. Let's look at our next function. Okay. The next one here is heads DML. Now the HTML method isvery similar to the text. It is used to set or return the Hedge tml contentof the selected elements. Now, let's look atthe difference between the two a first let's look at an example of how HTMLis used to return the content of a particular element. So let's say I lielast dot HTML. So what I've done hereis I've selected the list and from the listof selected the last element and I'm runninghas tml tag on it. So this returnsboxer y'all can see that it returns boxer. Now. Let's see how you can setthe content using HTML. Now what we're going to do is we're going to changethis last element over here with says boxer will change itto something else. So guys bear with mewhen I type the code, so I'm going to replace boxerwith German shepherd. Now. Let's click enter here. You saw that it got changedto German Shepherd. Okay. So this is how you setthe content using HTML. Now, what is the differencebetween HTML and text? Okay. Let me show you whatthe difference is. Let's say I'm going to selectthe entire unordered list and I want to returnthe value using text when I returnthe value using text. You see I get this but when I dothe exact same thing using HTML, let's see what happens. So I'm selectingthe unordered list and I'm running the HTMLfunction on this now here you saw that it's returningthe HTML tags to me along with the text content over here reduce Returnsthe text content but over here, it will returnthe HTML content as well. Okay, so you can see that Ally and an ally isnot there over here. That's It Returnson either text content. This will returnthe HTML content as well. Okay, so guys, I hope all of you are clearwith the difference between HTML and text moving on to our next function isthe CSS function. Now, I already showed youan example of this CSS function. But what exactly this function does is itStyles a particular element. So whatever element youselect is styled using CSS. So if you see any coloror any pop in your page or any sort of design medicready design on a web page, it's because CSS was used. Okay. Now what is jQuery CSS methoddoes is it sets or returns one or more style propertiesfor the selected elements now, let's quickly lookat an example. So what I'm going to do islet's clear this unordered list. What I'm doing here isI'm creating a script tag. Now guys script tagis always used in order to run some JavaScript or some jQuery scriptso over here, I'm going to create an objectusing the let keyword. So I'm using the left keyboardto create an object and the name of the objectis design and let's define some properties of this object. Let's say that the color is blue and let's define anotherproperty like background. Let's set background to GreenLet's Define another property which is border. We will set this to let's say3 pixels solid black. What I did here wasI created an object. I created an object calleddesign and I've given this object three propertiescolor background and Border. Okay. Now these three propertieshave particular values. So colors value is blue. Similarly backgroundcolor is green. And the border is so on now. Let's just save this file. I know y'all are confusedwondering why I'm doing this, but just give me a second. So what I did wasI save this file now, let's open up our terminal and we will select let's saywe select the header one tag. Sorry, I forgot to addthe select a function. So we've selectedthe header one bag. And on this we're goingto apply a CSS function. And what we're going to do iswe're going to pass an argument to this CSS function. Now, what we're going to pass iswe're going to pass the object that we just defined. So we created an objectcalled design wherein we had three differentset of properties which had different values. So we're just goingto apply these values and properties to this H1 tag. Let's click on enterand see what happens. So you saw that the background colorthe font color and a border was added to thisnow this happened because we had created an object with color backgroundcolor and border. So we just applied allof these properties to our hedge one. Okay, it's as simple as that. So guys this ishow the CSS function works. It's basically forstyling your web page. Okay. So your webpage looks moreprettier with the help of CSS. Now, let's lookat our next topic which is attributes. All right. Now the attributemethod is used to set or return attribute valuesof the selected element. So let's say you selecta hedge tml element and that has Ram elementmay have hundreds of attributes. So you're going to selecta particular attribute of that HTML element and you can return it usingthe attribute function. You can also use this attribute function to setan attribute to the element that you selected. So let's not get too confusedwith definitions of here. Let's just executethis and see how it works. All right. Let's go backto the visual studio code now in order to make ita little more interesting. Let me just clearthis entire thing. So what I'm going to do isI'm going to display pictures of three puppies and we're goingto work on those three puppies. Okay, we're gonna workon the images. We are going to try and addborders to those images. Okay. Alright. So first thing what I've done is I've createda folder called Puppy where I have three cute picturesof a golden retriever a boxer and a husky. Okay. So what I'm going to do isI'm going to drag this folder and I'm going to paste it overhere within the jQuery folder. Alright, so here you can seethat I've added the puppy folder which has threedifferent images. Now, what we're going to dois we're going to display these images nowin order to do that. I'm creating a div and I'm assigninga class to this. Let's name it up first. So now I'm just goingto add these three images. So I'm going to use the IMG tag. I'm going to set the source. So the nameof the folder is puppy. / let's say Goldie dot jpg. It's a JPG image. So let me just copy pastethis and similarly. I'm going to addthe other two images also so the other image is Husky. And then there isa boxer as well. Now. Let's go aheadand save this first and I'm getting sowhat I've done is I've moved thisto the root folder. So let's just savethis and let's refresh. All right, so guys,I was facing a problem. It wasn't loadingfor some reason. So I just open my jQuery folder on my computer and I just copiedthe puppy folder into that. Okay. So this is basicallythe index dot HTML file where I think and I've also copiedthe puppy folder within this which has three images. Okay. Now this should work. So here you can seethat within jQuery folder. I have a puppy folderand I have the HTML file. Okay, let's save this now. This should definitely run. Let's reveal an Explorer. So you now you see that we get threecute puppies guys. How adorable are they to make itlook a little more presentable. I'm just going to alignthese images horizontally. Okay, so thatit's clearly visible. So in order to alignthem to the left and also I'm going to set theirwith and their Dimension. So what To do isan open another file. So guys like I told you earlier that CSS is usedfor styling purpose. So I'm going to opena CSS file over here. Okay. So this is the symbol this meansthat it's a CSS file. So what I'm going to do isI'm going to select the class puppers and within this classI'm going to say float:left. So what I did was I selectedthe purple's class which are definedwithin the HTML file. So here you can see thatthe class of the divorce papers from just selectingthis entire div, and I'm just floating itto the left meaning that I'm going to alignit to the left. And also let's setthe dimension of the images. So I'm going to mentionthe image tag over here. I'll set the width. Let's set it to 300 pixelsand also the height. All right, let's say 250. So let's save this file and we need to linkthis CSS file in our HTML file. So guys, don't forgetto do that. A lot of people miss out on Step and then they wonder whythe code is not working. Okay, and then so I'm justgoing to add a link of my CSS over here. So it is a style sheet. So for those of youwho don't know CSS stands for cascading style sheet alsogoing to write the type. It's a good practiceto mention the type. So it is text / CSS. And also let's mention the path. So the name of my file isin next or css, correct? So that's about it. Now. Let's save this fileand let's open it up. All right. So guys now you can see that they're beautifullyaligned to the left and they all look so adorable. So guys don't get distracted. Let's focus onour task over here. Now, what I'm going to dois I'm going to open up the console over here. So let's apply this attributefunction to these images. Now. First of all, let's select theseimages for that. You're going to usethe select a function and within the quotations. I'm going to write I amg dot attribute function. So what I've done hereis I've selected all of these images and I'm applyingthe attribute function with the following properties. The attribute that I'm goingto change is the border from adding a border and I am settingthe border to this value. So it's a five pixelssolid black border. Okay. So guys, this ishow the attribute works now, let's click on enter. Let's see what happens. So yeah, you canclearly see that. I have added a blackborder one second. Let me make it more visible. Yeah, see it looks much better. So what I've done isI've added a border black border of five pixelsand a solid border. Okay. So guys, this is how the attributefunction box now, let's go backto our next method. Alright, so our next methodis the Value method now, this is basically used to set or return the valuesof the selected elements. Okay. So here you're just goingto return the value. You're not going to returnthe attribute or you know, you just specifying the value of the attributeand you're going to return this. So we're going to trysomething different over here. So in order to run a codeon this Value method, I'll have to tell youwhat is a click function. Okay. So what is a click event? So let's go to the clicks line. Alright, so here isthe jQuery events list. And the first oneis the click event. Now this event is executed when the user clickson the HTML element. Okay, so you basicallyselect element using the dollar function. And then when you clickon this element some function is performed somebriefly telling you what this does because I'm going to be usingthe click function now, let's open up a file. So we're going to type insomething different over here. Okay. So what I'm going to do is I'm going to clearthis entire thing. Let's clear the div element and I'm just going to add script over here now script tagis used to add your jQuery or your JavaScript code. So just open upmy script tag now over here. I'm going to type a function. All right. So what I'm doingis I'm selecting the entire document dot ready and then there'sa function over here. All right, so guysbefore moving on let me tell you what this documentnot ready function does now it's a very good practiceto have this function in every file of yours, but I forgot tomention it earlier. So it's a verygood practice now up. You cannot be manipulated safely until the entiredocument is ready. So basically what jQuerydoes is it protects the state of Readiness now, whatever code you include inside this documentnot ready function. So whatever code I'm goingto type over here basically in these lines it will run onlyonce the page is ready. Okay. So basically the code that you includewithin this function. So let's say I type something over here Kim whatever codeI'm typing over here. All of this codewill be executed on me after all of this is executed. So only after loading allof these jQuery libraries and Frameworks only after that whatever is mentionedwithin this document or ready functionwill get executed because let's say that I wanted to runa jQuery function over here. Okay, some jQuery functionand I just ignored this line and I didn't havea document dot ready function. Now what happened was let's say that for some reasonthis Library took a lot of time to load. And by the time it loadedthis jQuery function was already executed now, obviously that's goingto return an error because it's going to say that there is no jQuery libraryor something like that because this librarywas not entirely loaded. Okay, so that's why you needa document ready function. Okay. So as I hope youall are clear now, this is a good practiceto include it's not mandatory of course, but it's always goodto have document ready function at the beginning itself. Okay. So after your titleafter you load the libraries, you should always add inthis document already function. It's a good practice. All right. So before we type outthe code over here, I'm just going to createa button and an input type. Okay now input type will basically createspace for user input. So my input typeis going to be text. So the people who are familiarwith HTML CSS know what I'm doing exactly. So I'm giving some IDto this input and also let's give it some value. Okay, it's blank values of whatever you enterhere is going to be saved. Okay, so I createdan input type over here now. Also, I'm goingto create a button. Okay, so you usethe simple keyboard button and you just typethe name of the button that says submit now, let's come backto this function. Now what I want to type hereis I'm going to start off with selecting the button. Okay, so it's selecting the button and now I'm addingThe Click function over here. So guys pay close attentionto what I'm doing here. Okay. So basically I'm selecting the button usingthe dollar function. What I'm saying is when you click this buttona particular function will get executed. Now, let's type out the function that gets executedon the click of the button. So click is basically an event. So on executing this clickfunction some event occurs and that event. I'm going to type over here. Okay. So what it's going to doon the click of a button is it's going to give outan alert with the value. Dot val so this is where I'm usingthe value function. Alright now, let's close. All right. So what I'm doing here is on the click of the buttonthis event is going to occur. Okay, so you're goingto get an alert saying value and we're in the value is goingto be this some text identifier. So whatever value the user types in is goingto get passed over here. Okay, and then this dot value function is goingto return that value to you now don't get too confused. Let's save thisand we'll run this and you'll understand exactlywhat I'm saying. All right. So what I'm goingto do here is see, this is the input. We're in the user types inputand this is the submit button that we created. So let's say hellonow let's click on submit. Okay. So when I clicked on submit, this is what happensusing the click event. So basically an alert is shownwhere in the value is returned. So whatever input is givenby the user is return using the Val function. Over here. Okay. So you see it says hello. Let's see and Eureka. How are you doing? Okay, damn it. So this is justreturning the value that I'm typing in the input. So guys, this ishow the value function works. All right, it's very simple. It just Returns the valuesimilarly you can set the value as well. So I want you all to trysomething with setting the value and please comment downwhatever you've tried or any new program that you've run usingthe Val function or any other function will bevery interested to know how you have usedthese functions to build your own program. Now, the next functionI'm going to talk about is the add class method. Now this basicallyadds one or more class to the selected elements. So you're going to selectan element using the dollar function and whatever element you selectyou're going to add a class to it by simply usingthe add class method now, let's look at thisthrough an example. So first of all, let's just clearthis entire thing. Okay. So now similarto the previous example, we are going to load the imagesof all the puppies. So it has a classcalled pup worse. Okay, and we're goingto add all the images. Okay, so puppy Goldie. Okay. Similarly. I'm going to have the othertwo images over here. Okay, and the last imagewhich is a boxer. I'm selecting the puppy folderand then the boxer image. All right, so I createda div similar to what we did in the previous examples. Now, I'm goingto open a script tag before I type outthe entire script. I'm going to have a button that so let's adda button over here. Okay, let's nameit try add class. Now that we have the script. All right. Now within the script what I'm going to dois I'm going to start off with the document ready functionnow all you're already explained the useof this ready function. So I'm that's exactlywhat I'm doing here. All right. Now over here. I'm going to firststart off with selecting the button on the click of the button sum functionis going to be performed. And what is that function? So basically on the click of a button and eventis going to occur and I'm going to typeout that event over here. Okay. Now before I typeout the event, let's define a style class. Okay. Now the style tag is used if you want to specifysome CSS code now, you can obviously openanother file called CSS and enter the entire thingbut it's a small code. So I'm just going to typeit over here itself. So I'm creating a classcalled style class. All right, and what I'm going to do is I'm going to Definesome property called border and I'm going to assigna value to this property. Let's say 5 PX solid green. So this is what isthat in the style tag? Okay now coming backto this function. So on the click of this buttonand even has to occur and I'm going to typeout that event over here. So what I'm doing is I'mselecting all the images first and then I'm usingthe add class method and I'm passingthis style class function that we just created. Okay. All right. Now let's closeour parentheses over here. So what I'm doing here ison the click of this button and on these images, you're going to runthe ad class method now to this method of passeda class called style class and within this style class. I have created a borderof five pixel solid green. Okay, so don't get too confused. Let's save and open the file. Okay. So what happened was on the click of this buttonall these The selected and a border was appliedto all of these images. Okay. Now this border was specified within a classcalled style class which we had created over here. Okay. So guys, this ishow the add class method works. Now. Let's go back over hereand let's refresh first. Okay. Now along with ADD class, we have removed class and wehave toggle clasp as well. Now remove class will basicallyremove that class which you just added and toggle claspwill toggle between adding and removing the class. Okay. Let's just lookat how this works. Okay the same example,let's open up the console. All right. Now, what I'm going to dois I'm going to select all of these images. Okay, and then I'm goingto do remove class start class. Now. What I did here was Iselected all of these images. I'm running the remove classmethod on all of these images and I'm passing the style classas an argument to this method. So first of all, let's add it and then we'll seehow the removeclass works and you can see that every image hasa green border now, let's do remove class. Okay. So you saw that the Borderwas it a mode now, let's do toggle clasp. I'll get so when I did toggle claspit got added again. Okay, if I do toggle again, it will removethe Border similarly again, it will add remove. Okay, so guys this is how add class removeclassand toggle clasp works. Now, let's get backto our next topic which is jQuery events. Okay. Now I've already explainedthe click event to you, but we still goingto run a program and see how this works. Now what the click method doesis it's basically an event when you apply the click event to a selector some functionoccurs or some event occurs. Okay, and that event is specified withinthis function now, let's look at an example. So first of all, I'll just remove the stylewhich is not needed and then this buttonis also not needed. So we do require these images. Let's just keep this as it is. Now, what we're going to dois we're going to edit the script path. So instead of havingbutton over here, we're going to select images. So on the click of imagessome event is going to occur that event is specifiedwithin this function. So let's type out that event. What I'm doing isI'm using a this keyword and I'm addingan effect called hide. All right. Now, let me tell youwhat this does. So basically on the click of an image this eventis going to occur. Now this basically denotes whatever elementyou're currently selecting and that element will be hiddenusing the hide effect now higher is basically a jQuery effect. Now, this is used to hidea particular element. So whichever elementyou've selected, Did over here is going to get hiddenusing this High defect now, I'll be explaininghow you'd show and all of these other effectsin my father slides. So for basic understandingjust know that this High defect is just going to hidea particular element that you've selected. Okay, so I've savedthe file now. Let's just open it up. So what I'm goingto do is let's Click on each of these images because we have added an eventon each of these images, right? So let's click on this image. So you saw that it got hidden similarly theother two images also get heard in now this is happening becauseon the click of an image. I'm going to hide that image. Okay. Now this is just usedto record my current event. So basically on the click of the images those imagesare going to get hidden. Okay, that's exactlywhat we did here. Let me show it toyou once again, so I'm clicking this image, it gets hidden similarly thisand this so guys, I hope all of you are clearwith a click event now similarly we have on okay now this I thought attachedis one or more event handlers to the selected elements. Now whenever you have on a lot of peopleget confused between click and the on event now on is usedto specify other event handlers. So you can use on alongwith click and along with key press now key. Press is the next methodthat I'm going to discuss. So I'm going to be runningan example where I'll show you how to use key press andhow to use the on event as well. Now keypress basically executeswhenever character is entered. So basically whenever youpress a key on the keyboard some event is going to occurwith the help of key, press ok. So guys, it's quite explainable. If you just read the nameof the event itself, you'll understand what it says. Okay. Now key press is a combinationof keydown and keyup. Let's not getinto too much detail. So I'm just goingto create an example where I'll be showing youhow to use key press and how to use this on event. Okay. So let's open upour Visual Studio code. Okay. So what I'm going to do islet's clear this entire div. You do not require thisfor this example. Okay. So what we're going to do iswe're going to create a input we're going to give it an ID. Let's say press. All right, and alsoit will have a type. Okay, and the type is text and we'll also setsome size to this. Okay, and let's see it then. All right now herewe have a script now within the script insteadof selecting images. We're going to select the input. First of all,let's clear this entire block. So we have the documentdot ready function. Now after this,let's select the input. So here we are selecting theinput using the dollar function and I'm going to addthe on event here. So here I'm also goingto add the keypress event and some functionis going to be performed. Okay, so guys,let me just type this out. Don't worry. I'll explain whatI'm doing P dot height. So what is happeninghere is on keypress. So as soon as you start typingon this input some function is going to get performedthis p is going to get hidden. So let's createa paragraph another paragraph. Let's call it. Let's enter this codehere start typing. Okay. Now there aretwo paragraphs here. So I want toedit this paragraph. So I'm going to pass ina parameter called last. Okay. So this is basically goingto select the last paragraph which is this one. Okay now guys, I know this issort of confusing. Okay. There's a small Arrowsomewhere over here. Okay, so I haven't closed this. Now let us save the file. I'll show you what's happening. So don't worry if youhaven't understood anything. Okay now basically IDefine an input there. And what I'm going to do iswhen I start typing so when I start typingthis paragraph is going to get hidden. So let's see how that works. Let's see. Hello. Yeah. See you soon. As I press the first characterthe whole paragraph got hidden. Now, how does thathappen that happens? Because we usethe key press function. So on the Pressof a particular character on your keyboard this lastparagraph will get hidden. So guys, this is how the onand the key press work now on is used to specifyother events as well. So on is an eventand key press is also an event. Okay. So this is how on work and thisis the difference between click and on so with thiswe're done with events. Now we have todiscuss jQuery effects. Alright guys, so nowlet's discuss the hide effects. Now. There are a lotof effects over here. We have hide. We have showtoggle Fade Out fade in fade toggle and similarly. We have a few other effects now like the name saysit's sort of an effect. So basically hide islike an effect so it and select a particular elementand it will hide it. Okay, you can have parameters for how long you wantto hide an element or for how long you wantto fade an element. Now, we've already seenseveral examples of hide. So let me just showyou a basic example where in will discusshide we will discuss show we will discuss toggle. Okay now show we'll just makethat particular element visible and toggle will toggle between hide and show sodon't get too confused. Let's just open upour Visual Studio code. So what I'm going to do is I'lljust clear this entire thing. Okay, so we'll remove any sort of confusion nowwithin the body. I'm going to have two buttonsover here now each of these buttonswill have a class. Call button and I'm going to give an ID to eachof these buttons. So the first ID is hide and the name of thisbutton is also hide. Okay, and let's just copythis entire thing and we're goingto create another button and we're going to giveit an ID called show and that's name the button show. Alright, so here I've justcreated two buttons and I've given a different IDto each of these buttons. Now, what I'm going to do islet's load a single image. Okay, so let's not waste timeand load three images. So we're just going to loadthe same puppy images. So the nameof the class is puppers. Alright, and let's add an image. I guess so happy andlet's select anyone. That's it Goldie. Okay. So yeah, let's close thisand this is our div section. Okay. So now let's add a script tag. Now over here we are goingto begin with the document dot ready function. Okay. So let's select the document. I've already explainedwhat this does now within this. Let's define some code. Now first. What I'm going to do isI'm going to select the ID hide. So sorry, I forgot to put thisin quotation marks. So what I'm doinghere is I'm selecting this hide identifier. So basically this button hide. Okay, so we havetwo buttons here. That's why I've given each of them an identifierso that you know, you can differentiatebetween these two buttons. So basically thisis selecting the hide button. Okay, I'm selectingthe hide button and on click of this hide button some eventis going to occur that event. I'm going to specifyin this function. So what is going to happenis I'm going to select the image over here firstnow select the image. I'm just goingto hide that image. So on clicking the hide buttonthe image gets hidden. Now, let's close thisnow similarly for sure. We're going to dothe exact same thing. Okay. Let me just copy paste thisit's going to be easier. So instead of selectingthe hide button. We're going to selectthe show button and on click on the show button. The image will get visible. So we using the showfunction over here. So guys, it's as simple as that. Alright, so I hope allof you understood what I'm doing here. So let me just run youthrough what I did. So first of all,I created two buttons. I gave a different identifiersto each of these buttons hide and show okay, and then I'm displayingthis image a single image. So what's happeningover here is on clicking the hide button that imageis going to get hidden. Okay, and on clicking the show button the imageis going to get visible. All right, let's save and let'sjust run it and see how this works. So let's clickon hide it gets hidden. Let's click onshow it's visible. Okay. Now what we can dois we can also use the toggle function over here. So let's just select the images. Sorry, the only image that we have and I'm goingto perform toggle on it. So it gets hidden. Now if I click on toggleits visible similarly, it gets hidden and visible. So toggle togglesbetween hide and show. Okay, so guys that was about hide/showand toggle so we covered all of these three in that example. Now, let's look at Fade Out fadein and fade toggle now just like the name says it basicallyFades a particular element. So either it will fade outthat element or it'll fade in or it'll fade toggle. Okay. Now, let's just executean example and see how this works. Alright, so first of all, let's clear this entire scriptpath including this entire thing and also we don't need buttons. So let's clearthese two lines as well. Now, what I'm goingto do is I'm going to add the other imagesover here as well. Now for each of these images. I'm going to give ID. Okay. So let's define the ideaof these images. Okay, let's say this image hasan ID 1 and similarly I'm going to do it forthe other two images as well. So this image has an ID toand we'll change this to a ski. Okay, and The third image. I'm going to give itan ID 3 and I'm going to change this to boxer. All right. So basically I haveassigned an ID to all of these images now in a short while your understandwhy I'm doing that now, let's create a script tag script and we're going to havesome code in this so we're going to start off with the documentdot ready function. Okay, so document.readysome function on it. So I forgot to create a button. Let's create a button. So we are onlyAl create a button. Let's say the nameof the button is by because if fading out, okay, so I'm going to createa button called by. Okay. And now what we're going to dois on the click of the button. So we're selectingthe button over here and on click of the buttonsome event is going to occur which we're going to mentionin this function Okay, so, The event I'm basicallygoing to select all of the images one by one. So first I'mselecting this image. All right. So basically it'sthe goldie image that I'm selectingand I'm going to fade it out. I'm going to usethe Fade Out effect over here so we can also pass parametersto these methods. So if I say figured out slow,then it will slowly Fade Out. Okay, then similarly. I'm going to do itfor my other two images, right? So here let's selectthe second image and you know, let's keep it fast over here. Okay, it will beit out really quick and then I'll selectthe third image. And we'll say slow. Okay for this. Let's just keep it slow. Okay now just close the parentheses and we are donewith the code over here. All right. So what I'm doing here isI'm loading three images and I'm giving an identifierto each of these images. Okay, then I'm selectingeach of these images and I'm fading them out. Okay. Now, let's see how this works. So let's open it up. Alright now, let's say bye so here you can seethat the first one and the last onefade out slowly. So the first one to fadeout with this image because we passeda fast parameter. Okay for these twowe mentioned slow. Okay, let's look at it again. Yeah, so guys this ishow fair out works. Okay. Now let's lookat an example for fade in. Okay. So what we're goingto do here is we're going to clear this div. So let's not usepuppy images anymore, even though that's sad name. But yeah, okay. So what we're going to dois we're going to have a script function now within this we're goingto have three divs. Okay. So instead of keeping this as Fade Out let'skeep it fade in. So we make it fade in overhere similarly for this also will make it fade inand for this also fade in now. What are we goingto fade out and fade in? Let's look at whatwe're going to fade out. Now. First of all,let me create a button. I'm gonna let say namaste. Okay the typicalIndians over here. All right. Now what I'm going to do isI'm going to create a div and I'm going to createa class called. Let's see if fade. Okay. Now what I'm going to do iswithin this div Al have three different boxes or squares and will give IDto each of these terms. So that is one now. This is the IDthat I've mentioned over here. Okay, so i d 1 we're going to style it and we'll give itsome sort of width. Okay, let's say width is so much and similarly will give it someheight and let's say 60 pixels. Those will keepthe display as none for now because initially nothingshould be visible when you're fadingin it starts with nothing to everything gets visible. Okay, so that's why we'rekeeping the display as none and also will setthe background color. Means that it tooorange for this one. Alright, so you can see that I've setthe display To None because we're fadingin the image. Okay, then the backgroundcolor upset too. Orange. All right. Now what we're going to do isthat's the end of this div. Just close the div over here. And we're goingto add another division. Now within the div. I'm going to give a small break so you can use the BRto give a break now. Let me just copythis entire thing. We're going to havethree divisions like these so I'm just copying this wholething now for the second div. What we're going to dois we only going to change the background color some sort of trying to displayour flag the Indian flag. I won't be able to getthe chakra in between but apart from that. I think it should work. Okay, I'm this. I'm going to change it to Green. So we've createdthree dips over here. And on these three divs. We're going to fade in. Okay the slowly goingto appear on the screen. So for this also upsetslow fast and all of that. Let me just change this. So the first onecan appear by default. Okay, when I want to passany parameter the second one, we'll put slow and the third one that's actually giveit some value. Okay. So this is basically timein terms of milliseconds. So I'm going to give this value. Let's save the file andlet's see how this runs. Okay at so I forgotto remove the buy button. Let's take that off. Okay, we havethe Namaste button. Let's see if the fileand now let's check. Okay, let's say namaste. So I made a stupidmistake over here. I forgot to change the ID. So this is 2 and this is 3. Okay, so now itshould definitely work. Let's save the changes and I'm just goingto open up my browser. Let's refresh. Okay, so here youcan see the white one because it's totally white. It's not visible. But here you can see that there is this looks thoughtof looks like the Indian flag. So obviously I couldn't getthe chakra where but yeah. So this is how it works. So guys that wasabout fade in and fade out. So I hope all of you understoodhow a fade-in fade-out works. Okay. Now let's move onto our next topic which is slide down slide up and similarly we're goingto do slide toggle as well. Now just like the name saysthis effect is used to slide down a selected element and it's similarly has a speed and of callback parametersimilar to that is light up. We're in the selectedelement slides up and then we have slide togglewhich toggles between slide up and slide down. So let's look at an example. Okay. So first of all, let me just clearthis entire thing. Okay. I'm going to clearthis whole thing. And so I'm going to start offwith having a button. So let's say the name of the button is wecan name it slide. All right, and then we can what we're going to do is we'regoing to add a div over here. Okay or division. We're gonna have an ID for that. Let's call it div 1. Okay. This is not necessary. But it's a good practice to havean ID over here is not necessary because there's goingto be only one div. So we're going to style it. Let's say we have the widthwill set the width to 90 pixels. Okay. Similarly, we will haveheight parameter and we'll set that to 60 and will also giveit a good background color will give it pink. Okay, and okay,I've misspelled background. So basically this isthe div let's close the dividends over here. Alright, so we basicallycreated a div over here. It's basically a small squareor a rectangle. Okay of color pink. Now, let's have a script tag. Now within the script tag. What I'm going to dois I'm going to select the button over here and we're also going to add on event over here andlet's also add click. Ok, so on clickand event is going to occur and that event is definedwithin this function. Now, what we're going to dois we'll select the div. Okay using the identifiersthat we gave it div 1 Okay, and we are going to applythe slide up or the slide down function to this. Okay, let's apply slide up first and then we can alsopass a parameter say slow. Let's close this upand this should work. Okay, let's save so what I did here was I createda small rectangle using this div and I styled it. Okay, so I createda small rectangle over here and I have a button called slideand on click of that button. This square is gonnaslide up slowly. Okay. So, let's see how it works. Okay, let's see slide. So let's see it again. So it slowly sliding up. Okay. So guys, this ishow slide up works now for it to slide down. What we're going to do is if it has to slidedown then initially the display has to be none. So we're going to setthe display to none. And we're going to changethis to slide down. Okay, let's save and let's seeif this works. Okay, let's click on slide. See it sliding down slowly. So guys this is how slide upand slide down works. Okay, you can also toggle itin the same manner. Okay. So if you toggle thisit'll either slide up or slide down. Okay, so guys with that weare done with jQuery effects. Now, let's finally moveon to our last topic which is jQuery user interface. Okay, this is just the UI now. I'm just going to discussthree functions over here, which is draggable droppableand date pick up now like the name suggests. You can drag any selected elementusing the draggable method and similarly the droppablemethod is used to drop the selected elementat a specified Target. This is how draggableand droppable work. Now, let's look at an example. All right, so I'm goingto begin with clearing everything over here. Whereas I don't know whyI remove the first header. Okay, let's just keepit as jQuery tutorial. Now what we're goingto do is first of all, we're going to beginwith the Earth style tag. So basically we're goingto style an element that we're going to drag around. So this is just goingto be a small square or something like that. So I'm going to give this styleof ID called drag all right. Now within thiswe're going to have a few properties like width. Let's have it 150 pixels. Then we will have heightsimilarly so which is going to design an element that we're going to dragaround over here. Okay, 60 pixels and then we have will give ita background background color. Let's say blue. Let's click on Blue Violet. All right. So this is basically the style tag now basicallywe have a rectangle over here with the backgroundcolor blue violet and we've given itan identifier called drag. Okay, so guys one thing Iforgot to mention was If you know CSS, then you know that when youuse a hash it's basically for an identifier, but whenever I mentioned dotwith some name, it means that I'm selecting a class. Okay, so just extra information. So yeah now let'sjust open up a script tag. And so what I'm going to dohere is I'm going to have a function over here. All right now guys, you can use function asa shorthand for document dot ready function. Okay. So this is likea shorthand for function. I forgot tomention this earlier, but you can use this now what you want to do hereis I'm going to select the drag identifier and to that element whateverwe designed over here. Sorry, I forgotto put quotation marks. Now this drag identify abasically selects this rectangle that we created. So that rectangleis getting selected and we're goingto make it draggable. Okay, we're going to usethe drag will function and yeah. All right. Okay, so this is the script now what I am doing hereis I am creating. A Dev of ID drag? Okay. So basically this dragand I'm creating a div of ID drag so it'sbasically the same division and I'm just goingto have some text on it. Let's say drag me around. Okay, so yes, let's save this and thisshould definitely work. All right. So this is basically what we style wecreated a rectangle of violet blue color. And now you can justdrag it around. Okay, you can see that I can simply drag it aroundthe entire HTML page over here. Okay. So guys this ishow draggable works. I know it looksreally cold to drag it. It's like a small game. So this is how draggable works. Okay. Now let's look at droppable now. Let me just clearthis entire thing. So what we're going to do iswe're going to have an image of a puppy when we wantto drop off at his house. So basically we're gonna havean image of a puppy and we're going to drag itand drop it into his house. So we're gonna involve draggableand drop a bill over here. That's a cute concept. So, whereas yeah, I'm first of all going to startwith displaying the image. So, okay. I'm going to selectGoldie and alright. So now that I've selectedthe image now, let's have a style function. Okay. Now we need a housefor this puppy. So we're goingto design the house. Now. I'm going to givean identifier to this. Let's call it drop. Now within this I'mgoing to have a bit. Okay, we'll set itto 400 pixels similarly height 400 and we'll makeit float to the right because I'll tell you why and so when I display this you'llunderstand why I'm floating it to the right background color as let's give it a quick Murray. Okay. So this is the end of style. So what we did here is webasically created a square of the color aquamarine. Now, let's add the script tag over here where allthe work happens now over here. I'm going tobegin with function. All right. Now, I'm going to start offby selecting the image. There's only one imageor you can either say image or you can givethe identify of the image. It's the same thing and this imageshould be draggable. Okay draggable. Right. Now I'm going toselect this square that we created which hasan identifier called bra. So I'm going to selectthat square and I'm going to make it droppable. All right, let's just closethe parentheses over here. All right. So this is it for script. Now, let's also adda small text of the here. So victim creating a div with the ID drop okaywithin this div, let's have a small paragraphwhich says my home. All right. Okay. So what we did herewas we started off by displaying this image and then we created a square with the followingproperties after that. We're going to assignthe draggable method to the image and the droppablemethod to this square that we created over here. Okay. Now let's just lookat the output you will understand it much better. Alright, so basicallythis guy wants to go home. All right. Give me a second. Okay? So the reason itwasn't getting dragged was because I did not mentionour hash over here. When you give an identifier. You have to mentionhashtag over here. Okay. So let's save this andlet's open that up. It should work refreshnow see it's draggable. So this guy wants to go homeand this is his house. So drop a bill over here. Okay, it is not movearound and go back. It's droppable. So his house is droppable. So just we're justtaking him to his house. I know this is sillybut this was a good way of showing you how draggableand droppable works. Alright, so I hopeyou all understood draggable droppable nowlastly we're going to look at date picker. So guys, this isan inbuilt function is an inbuilt widget in jQuerywherein you can enter a date and then you can easilyvisualize the date. We're now going to gointo detail with this. I'm just going to showyou a simple example of how the date picker works. Okay, let me just start offby clearing this entire thing. Okay, right up to here. Okay. Now what I'm going to do isI'm going to have an input where in the userwill enter the date. Let's give it an ID. Let's say date is the ID and the type is textwill also assign it some sighs. Okay, right then. All right. Now what we're goingto do is we're going to open up a script tag. Now within the script tag,it's very simple guys. What I'm going to dois I'm going to select the input some typingthe input ID over here. And on that going to callthe date picker widget. Okay, so let's save thisso guys, this is all. Alright, so I'm justcreating an input. And as soon as you typethe input you're going to get a date picker. Okay. So this is an inbuilt widget isnot much to code over here. Alright, so as soonas I clicked on it the date picker got visible. So let's say I give some dateyou can give some data randomly or if you selecton some particular date that data is visible over here. Okay, so it's just worksnormally like this. All right. So guys, I hope all of you are clearwith the date picker. Hi guys. My name is Arya and yet again, I welcome you all to a videothat we at the editor icon. Do you and today weare going to be taking a deeper look into angular. So most of you outthere probably know what angular is you've heard about anger at some pointof time in your life when you are especiallydiscussing web development with your friends. So this is the angular tutorial that we are presentingfrom Eddie Rackham. We are going to be takinga deeper look into angular how it is writtenhow we can write angular apps. And in this tutorial wewill be covering the very ground hot basics of actuallycreating any apps of them. Most of the YouTube videosout there that teach you angular kind of assume what you already know and they kind ofstart up with an app and you kind of learnon the way of creating that up. But this video is goingto be very different. We are going to be takinga very classroom like approach to learning angularthrough this video. So this is the first videothat is going to be out there in a list of videos that wehave planned out for tea. You guys angular and we are aimingthe latest versions of angular and we will be always updatingthese videos in any case when angular has changed. So this is goingto be targeted to angular 8. So as I just said we are goingto be taking a very classroom like approach now, what do I mean when I say we are going to betaking classroom like approach? Well, it's just thatlike in a classroom after you've launched a chunk of what you are meant to learnyou are given an assignment which tests your ability isto apply those fundamentals in a very practical fashion. So we are going to be havingto practice assignments in this thing. Actually. We are going to be havingprobably three assignments. We will decidethat on the way if I deem necessary that you gothrough an assignment, you will get 1 so these arethe topics that we are going to be covering throughoutthis angular tutorial. So first of all, we are going to be targetingwhat is angular where I will give you guysa very brief introduction to what angular iswhat it does we are. To be going to look intowhat's new and angular 8. So this is angular 8 and someof you guys might be thinking that I've missed outon a lot of things. How am I gonna catch up? Don't worry. I'll get to thatjust in the second after we have gonethrough a little bit of a theory of what is angular. And what's new in angular 8. We are going to jump rightinto the Practical parts and the Practical part start up with you setting upyour local angular project. So we will go throughthe project setup. We will also be writing our first very basicand simple application. We are not going to be incorporating a lot ofcomplicated modules into this. This is going to be a veryvery simple application just so that you knowhow everything works how angular as a big jigsaw puzzle fitsall the pieces together after we have written a little of our first applicationyou will soon realize that angular uses a supersetof JavaScript called typescript. So we will be taking a verybrief look into typescript. I will not get into muchabout teaching you guys typescript youcan basically look up another That this is meant for angular and that is exactlywhat we will be doing after I have given you guys a very briefintroduction to typescript. We will be also looking at howyou can integrate external CSS into your angular application. So we will mostlybe using bootstrap 3 and we will be learning how to actually integrate thatinto your angular applications. After that. We will be looking at a verybasic fundamental and that is how an angular appgets loaded most of the people who learn angular todayand they're very beginner. Like they will go aheadand write an application but most of themwill not even know how the applicationis getting loaded and how it is brought to your screenand what are the file systems that are actually being invoked. So we will be actuallyaddressing this very important topic as to how an angular appgets loaded after that. We will also jump right intothe building blocks of angular and that is a componentwe will be looking at how you can createa component from a CLI. We will also be lookingat how you can create your custom components manually. Above that we will betargeting data binding so data binding will include two-way data bindingstring interpolation and property binding after that. We will also do eventbinding we will be looking at directives what they arehow they do it, but we will be not looking into how you can writeyour own custom directives. So if you're hereon this video expecting to learn about custom directivesand how you can write them. Well, this is not the videomeant for you. We will be releasing a video on how you can buildyour custom directives. In fact, we will bereleasing a video on all these topics separatelythat is components where we take a much much deeperlook into what a component is how it is madeevery piece of code that goes into a confident. We will be doing the samewith data mining event binding and directives last but not least aboutthis particular video. We will be learningsome inbuilt directors that ship with angular mostly ng-ifng4 and stuff like that. So those are pretty useful stuff and we will be creatingsome really simple. So as I said, I will be giving you guyssome small small assignments as we go along the way solet's plan the sinus out. So after I've taught you guyshow a component is made. I'm going to go ahead and getyou guys to make your own components and you can go ahead and thencheck your Solutions with mine. We will also be havingassignment on data binding and event finding and we will alsobe having an assignment for inbuilt directives and how you can use themin your application. So that's about it. So to make the mostof this video I will suggest that when I give youthese assignments and after you have properlyunderstood the concept only then you shouldattempt the assignment. So when you areattempting the assignment, please do not go toolong with me mostly use the code long partof the assignment just to check if you have done the solutionproperly not only will this give you a better omphat learning angular. It will also shownyour brains get them to think in a veryangular sort of way now that I have put down everythingthat I need to tell you guys before we start with the And this angleof tutorial let's get started. Basically justanother small thing. I want to get out of the way. If you don't know angular 7anger five or anything like that that goes up too late. Don't worry. You can still followalong with this course because you will understandjust in a while why? So the first topic that we are going to cover todayis a very theoretical topic. So that is what is angular. So it only makes sense to startwith what exactly is Anglo. So for viewers who are watching any angularvideo for the first time you deserve an introductionto what you are learning. Now, most of you Iassume actually already have done your researchbefore coming onto YouTube and typing out angular tutorial. So it's only mandatory that I give youthis introduction. The first of all angular is afront-end development framework. Now, that's out of the way. Let's get into what front-enddevelopment framework means. So when if you haveany web developer friends, you will constantly heartwo words back-end and front-end back-end and front-end. So what do these two words mean? Well the rolesof a web developer Poked in the two very distinctbranches in this industry. The first is that of a back-end developerand the second is that of a front-end developernow a back-end developer is responsible formostly everything that happens on the back end. So basically stuff like routing well routing is also doneby front-end developers, but that's another thing but routing is basically the job of a back-enddeveloper fetching things from a server writing theJavaScript for all that things. That is a complete back-enddeveloper sing setting up the server for in fact settingup the database schema. That's everythinga back-end developer does what the front end developerdoes mostly entails what you seeon your screen right now. So the way you seeFacebook the way it's designed how everything how the news feedis actually placed like that that isa job front end developer. You make sure that everythingon the website looks tipped up and smack perfect and he does thiswith a lot of optimization. So mostly back in the dayfront-end more Used to be done by HTML and CSS and CSSused to get very complicated in this fashion. It still isa little complicated. If you want to presenta very polished website, but creating the HTML and making it muchmore reactive is what the framework does for you. So most online sites will say that front end developmentframework is also referred to as the CSS framework. Well while this is very true, it's not so perfectof a thing to say that is a CSS framework. It is more ofa reactive HTML framework and I will explain just now how so the second thing that you should knowabout angular is that it is maintainedand developed by Google. So angularjs is a JavaScriptbased open source, front-end framework mainlymaintained by Google and by a community of individuals and corporations to dressmany of the challenges encountered in developingsingle page applications. We also get to what singlepage applications mean in a moment it aimsto simplify both development and the testing of suchapplications by providing a framework for client-sidemodel view controller that The MVC architecture on themodel view viewmodel controller on the mvvm architectures as you might know it so basically it's maintainedand developed by Google Now, if you don't Google, you know, things are give youas a product is amazing things like flutter reallytook off Android. You know, what it is today and angular G has has beenout there since a long time. It's got an amazing Community. If you have any sort of doubt, you can go ahead and pushit out on stack Overflow under the angular Tab and you will probably getan answer almost immediately. Other than that your problemsmight already be there post by somebody else who is developingand face the same problem. So basically you havea great Community great support from Google and it's a breezeto work with angular today. The third thingthat you need to know about angular is that it isa JavaScript based framework. Now if that was not alreadyobvious from angular 1, which is named angular GS. Well, I'm justputting it out there. It is javascript-based. So why is it a good thingthat Javascript-based. Well JavaScript is commonlyknown as the language of the web. So if you are interactingwith any part of the web, you're probably goingto use JavaScript or the JavaScript engine,you might be doing unknowingly, but you are definitely doing it. For example, you're watchingthis video on YouTube right? Now. You are usinga JavaScript engine that runs a video framework. So yeah, so if you know JavaScript,you basically know how to talk to the web. So when you're tryingto learn angular, you don't really haveto learn a new language. For example, whenyou're learning flutter, you have to learn about Dartso Dart is a new language that is developed by Googleand is used in flutter that is their mobile applicationdevelopment framework. If you want to go learn flutter, you can check out my fluttertutorial on Eddie Rekha, but for now you needto know that angular is based on JavaScript. Well, not exactly JavaScript. It is based on typescripttypescript is the main language that is used in angular scripts and typescript is basicallya superset of JavaScript. We will get into what Istripped is later on. So basically the fact that it is made upof it is based on JavaScript makesit much more common and easy to reach out fordevelopers like us after that. We just discussed that angular is main firstsingle page applications. So we are not trying to createmulti page applications with angular angular is made formaking single page applications. So what exactly isa single page application? Well, it does not readrequire a page reloading. So for example Gmail is a wonderfulsingle page application. So let me just go aheadand show it to you. So if you go ahead and open upyour Gmail account and let's say you are straight-up goingto open on the inbox page. Now if you wereto go into drafts, let the site stop loading. Okay. So if you were to go into draft, you see that there is basicallyno load out here your screen isn't going into that wholewhoopty whoop of loading. But if you are not ona single page application, for example, go to webinar, which is a Guarding service so out here we arein the my webinars tab. And if I were to goto my recording out here, you see that this goesinto a loading fashion. This is loading up a new page. So this means that gotowebinar isnot a single page application while Google isa single page application and you just saw how muchfaster Google can be my God. This is still loading and Googlewas done with it already. So yeah, single pageapplications certainly have the performance and speed that you required today to allyour things very seamlessly. So it's great to havea framework that lets you create single page applicationswith so much ease. Okay, so that wasall about angular and what you need to knowabout it to actually go ahead and start developingapps using angular. Now. Another elephant inthe room is angular 8, most people I actually teachangular are very flustered with the fact that angular is on versioneat at this moment. They are mostly flustered because they think they haveto go through everything from version to version 7and then learn it. Well that is The casefirst of all angular was released as angularjs and angularjs wasthe very first released and everything changedwith angular 2 itself. The whole engine changedhow angular written is change. So basically the major overhaulwas done in angular 2 and since angular 2 after every six monthsGoogle actually releases and update to angularand since then it's been like angular 2 3 4 5 6 7and now we're eight. So those funny half yearsthat have gone. So it's basicallybeing four years. I guess if my math is correct. So now we're at angular8 and every update that they make out there isbasically backwards compatible. So think you've learn angular 5. Well, you can still workwith angular 8 because most of the stuff that's been changedare backwards compatible. So now that beingout of the way, let's go ahead and seewhat is new in angular 8 now, if you're a beginnerto angular most of this will not exactlymake sense to you. So I recommend you skip it, please use the time stamps that then the descriptionto skip The next topic and that is Project setup and I'll be way moreinteresting for you. But if you're a guy who is tech savvyand like to know what he's working withwhat's new in that version? Well this partfor you so angular, it came with a few changesand one breaking change. Most of angular updateshave a few breaking changes. So the changes that are very relevantin angular 8 firstly is the IV engine. So angular usesa visual rendering engine and that is goingto be replaced with V it is still in its testingphases to be honest. It's a Beta releaseand angular 8. It will become verymuch prominent in angular 9, I guess so IV is the mosthype thing out there because you are visualrendering API remains unchanged. So basically you're cute. You don't need to change a code, but the way it gets renderedis completely different. It's faster much more optimized and it's basically a breezeto work with the next thing that's new in angularis the basil engine. So vassal is yourway of orchestrating how your dependencies are there. So basically it's like webpack,but don't get this confused. It's not going to be replacingwebpack webpack is the god of their part it is going to make webpack joba lot more easier. It's going to orchestrateand really serialize out what dependency you needto actually really a projects. So the coolest featureof Basil is that it has a verysmart algorithm for determining the bill dependencies and injecting theminto your project. Another thing. That is cool aboutangular 8 is Loading so this is just to make sure that there is a different typeof loading for legacy browsers and the modernbrowsers out there. So basically the modern browsersuse more in JavaScript and Legacy onesuse Legacy JavaScript. So basically there isa load time difference and when you are usingLegacy JavaScript, it tends to be a little slower while modern onesare way faster. They're much more quickto even write as a developer's perspective. So differential loading the basil engine and Ivy sothese are the three changes that are there in angular 8, there is also a verybreaking change in angular 8. I have not listedthat out out here. Well that has to dowith the HTTP Library. So to invoke the HTTP Libraryyou would mostly have to import angular slash HTTP, but that has been changed andthat is the most breaking change and that to now usethe HTTP libraries. You have to importat the rate angular / comment / HTTP andif you've used SE debe before, you know what I'm talkingabout so with that out of the way Thisis all the theory pot. Let's go ahead and start upwith our own angular project. So the first thing that you need to do isto start off with angular is go ahead do your browseropen up a new tab and search for no GPS. No, I am assuming that you don't have no GSinstalled on your computer. So click on the first link andgo ahead and download the one that is recommendedfor most users after you downloaded. You will get a setup file. Go ahead click the setup fileand just follow the instruction. It's a pretty easy install and I don't think thereshould be much problems with it. But just in case our theyou got a problem with it some configurationproblem goes wrong, please go aheadand check out another video that actually explains how to install node.json your computer because this videois meant for angular. I have a lot to doand I can't waste time where stuff likehow to install node. There are a lotof videos out there including Eddie records itself, and you can go aheadand check them out. And once you have installednote on your computer, you can go ahead and check if note is installedby just typing. No, Don York. On prompt and this should openup a JavaScript console. You can say stuff like printor let's say VAR x equals 5 and if you just call X itwill say five out there. I know my text isn't very clear because I have this weird bluebackground in my command prompt. But yeah, if you can open up JavaScriptconsole with just typing node, you have installed node in proper fashion now to exitfrom this console, you can just type dot X it and I will exit youfrom that console. So let's go ahead and clear up our Command Promptand the next thing that we are going to do isinstall angular on our computer. So to install angular. Let's see what we have to do. So the best place that you have for any doubts of this sortis the angular documentation. So go ahead and searchfor the angular Doc's so this will open upthe angular Doc's it's at angular dot IO / docks go aheadand check the set apart. So I'll show you seethat you need nodejs now that you have doneit you can go ahead. And install angular2 an npm command. So npm is a node package manager and all you haveto say to npm is that you need to installso install or you can just simply say I and then - gee which basically means that it is goingto be a global install and not pertainingto any particular folder or any project setup. So we are going to beinstalling this globally so that you can access the angular CLI from almostanywhere on your computer. So after that, all you have to say is angular /CLI from correct? Okay. It's at the rate Anglo. So for stuff like this alwayskeep the documentation open and you should go aheadand press enter after that. So this command will go ahead and install angularon your local machine. So let's just waitfor this to finish. Okay. So as you guys know Ialready had angular installed on my computer. So nothing new hasactually been changed. It just says itupdated one package. So that doesn't really matter. So this means that angular has been installed on our computer and youcan go ahead and check that with just creatingan angular project. Now. I'm in mydefault user directory. So let me just goahead and change it to the desktop directory and outin the desktop directory. I want to make foldercalled angular tutorial so angular underscore tutorial. So this is where I'm goingto be saving all the projects and all the setups that we will be needingfor the various assignments and simple applicationsthat we will be looking at and the concepts so this is going to bethe folder for the day. So let's go ahead and quicklychange into that folder and so angular tutorial and we are in our angulartutorial folder so out here what you can do to startup a new angular project is as you guys can see I'll tell itis it says to create a workspace and initial application youcan use the engine new command. So NG new basicallytells angular CLI that you want to start a newproject and then you basically give your project a name. Okay. So Angie knew andwhat do we name our project? Well, let's thinkof some appropriate name. Let's go back and see what arewe actually going to do next. So we are going to bewriting our first app. So it's very simple that we are going to be callingthis our first app. So engine you will go aheadand create folder which has everything that youneed to create your first app so you can opt outfor routing for now because we will not be goingfor routing in this tutorial and we will also be usingCSS for our file. So just press enter twice and I'll be usingthe default settings for setting up your angular projectand there it goes so that completes our project setup and forthis project setup. We are also missing on one thing so Firstly weare missing our code editor. So I'm going to be usingvisual studio code but you can useother paid applications like web storm out therewebstorm is amazing. If you can pay for it,please go for it. But for now for a very free way of making a tutorial I'm goingto be sticking to my cheap ways and just use VisualStudio code now just because Visual Studio code isfree doesn't mean it takes away from any other functionalitiesthat come from the paid apps. It has all the functionalitieslike syntax highlighting for creating andgenerating components. It's really good. You even get a built-interminal to actually run your angular CLI commands Okay. So let's just waitfor this project to get set up. It kind of takes a coupleof minutes from some time. So let's just give it some time. Okay. So now that our angular appis set up and up and running. All we need to donow is go ahead and just downloadvisual studio code. So to download visualstudio code go ahead and type in Visual Studio codeon your browser. Go to the first link and alsothe second link out here the download visual studio code that should give you a setof file and you should just go ahead and set it upthat's very easy to do. So, let's not waste more time and get startedwith writing our first app. Okay, so out here if you were to goto your desktop and if you made a folder like melike angular tutorial, you will seethat there's a folder that says first app now if you were to openthe folder you see a lot of things you probablydon't understand out here. So there is a TS lintwhich is a Json source file. There's also the package file. There's a package lock. There's also this implies veryimportant angulardart Json file, which basically includesall your dependencies. Now this e 2 e fileis not really going to be useful for us in this Earlier tutorialit we basically means end to end and this is made for end-to-endtesting of angular apps. What we are goingto be interested in is mostly the node modulesand the SRC so Archer and SRC you see that there is this indexpage there is an index page which is our HTML file. There's also the style sheet, which is your basicstyling of the web app that comes built in when youbasically make any angular app. So first of all, let's go back and let's openthis folder particularly with Visual Studio code. So as you guys can see Ihave opened up our first app and we can go into our SRCand we can see that there's an app folder and we get a lotof files out here. So we have an appcomponent CSS file. We have an appcomponent dot HTML file. We have an app componentdot spec dot DS file. So all of these dots peckedRTS files are basically used for Testing purposes and I'm going to beconcentrating on testing but rather moreon developing an app. So this is noneof our concern for now. You can feel free to actuallygo ahead and delete it. If you go ahead and open up app dot componentof TS you can go ahead and see that there is a bitof code written out here. So there is an import linefrom the first thing we can see that it's importing somethingcalled components from a library called angular / core. There is also this decoratorout here that tells angular that this is a componentit has a selector and has a template URLs. It has tiles URLsin in the class. You can see that there isa variable that says title and it says first app nowthis really doesn't make sense to a beginner, but just wait onwhen we will know what all of these things mean from components to a classand everything else. So first of all, let's go ahead and seewhat this app that angular ships with looks like so to do that. Go ahead and openup your terminal. You can simply dothat by dragging it up and down and out here. What do you want to see is NG - - open which basicallymakes your default browser open up and allyou want to say is serve. So this commandbasically serves the app that is in development moderight now and it will serve it on a local host at Port numberfour thousand two hundred. So it's compiling at the moment. So let's go ahead and seewhat it actually looks like. Let's give it some timeto compile and should open up the app for us automatically. Close off this one. Let's keep thedocumentation open. Let's close off. The node.js is closedoff my mail. Okay. So this is the first app. Okay. So as you guys can see we aregreeted with the welcome screen as you guys can also see it'son a local server. This is not hostedat a global scale. This is just for your testingpurposes as a developer so you can see that it says welcometo the first app. Now if you go ahead and see out here it saystitle equals first app. Now if you go ahead andthe HTML part you can also see that there is this little place where title isreferenced back again. So as a developer, I think you can make some sense that these three filesapp component DS the app component of HTML and the app component dot CSSis kind of interconnected with each other. So yeah, this is basically whatan angular app looks like Okay. So this isbasically the application that angler ships with it'sa very welcoming application. It says welcome to First up. It has some useful linkssuch as the tour of Heroes link. It has a link to the commandline interface documentation and a few of the angular blogs. Now. This is of really no use to us if you want to learnso let's go ahead and actually fiddlearound with this file that comes along with angularwhen you create your app. So if you go ahead and lookat the app component HTML page, it looks deceivingly similar to what we seeon our screen out here when with this app that angular ships with so as you guys can seeit has an edge one that says welcome toand title and out here. You can see welcome to First up. So basically we can saythat the title out here which we sawin the typescript file, which is said titleequals to First app and that gets convertedout here above that. We also have a few links and basically it'san unordered list and also if Necessary there is somestyling that goes along too. But at this momentthere is no styling that is available. So let's go aheadand Tinker around with this applicationjust to give you an idea of how angular actually works. So angular is basicallydivided into components and angular app so out here what you see isthe app component. So every componenthas three files. It's basically it's a templateso it has its own styling. So that is app dotcomponent dot CSS. It also has its template. So The Styling is CSS. The template is updot component of HTML and the logic the business logicthat goes inside this thing is in the app dot companydot DS file now, there is also this appdot module dot EPS file and I'll get to thatjust in a moment. But for now, what you want to do is go aheadand just delete all these stuff that is there and app.compin it on HTML file now, don't forget to keepyour terminal running which is servingthis application. So Time you go ahead and save it basically saves itand you can go ahead and see that it has reloaded it and we have nothingout here to be honest. So let's make the speecha little more interesting. So firstly let's givethis just an input. Let's say so we want a divand in this div, we are going to have an inputof type text now every input should also go with the labeland this label is for name so we can give this type nameequals name out here, right? So let's make this a littleless confusing for you guys. Let's call this first nameright and out here. You see if you goahead and save it. We should get an input out here. We can type stuff out here, but it really does nothing even if we press enter and stuff like that so we can alsohave a paragraph out here which an outputout our name for us. Please don't pay much attentionto the Syntax for now just try and understand what is happeningin the background because we will getto the syntax just in a few moments. So we want to displaythe name out here. So to display the name we need to createa variable called name. So go ahead and go toyour app dot competent RTS file and change this name the titleto name and out here. Let's change it to my name. So we're going to say Aria. So let's save that. Let's go back and saveour HTML file and as you guys can seeRL is coming out here. But if we still typesomething in the input nothing actually happens. Now, what I want to do is what if I type in the input shouldautomatically be reflected in this paragraph below it so we can do that very simply with so-called toolsand angular ships it now these toolsare called directives and we will get into directivesjust in this tutorial. I'll be teaching youhow to make use of inbuilt directives like the one I'm goingto be using right now. So let's go ahead and usethis directive now pay no attention to the wayI am writing this because syntax is somethingthat can be dealt with later. So for now what wewant to do is start up square bracket and thenan open parenthesis bracket, that is the normal bracket. And all I want to say isNG model is equals to name. So name should bein your double quotes. Now. This will tell angular that whatever is being typedout here is going to be stored in a property called name and we are also goingto be displaying the same name down here in this paragraphSo let's go ahead and save this and let's go aheadand reload our file and you surprisingly see that the input quad that wehad has suddenly disappeared. Now what we want to doto realize our mistake is go ahead and say inspectif you go into the console, it says uncaught errortemplate parse error, so it can't bind to ng-model since it isn't knownproperty of input. Okay. So basically angularcan't figure out what NG model is now this is because we have not Imported thefunctionalities of ng-model now I said that this is an input model and itcomes shipped with angular. But the way typescript works is that you have to goand tell typescript everything you are importing that you will be needing for your app to be runningnow all your Imports to this is actually donein the module file. So things that needto be imported when you are running thisis done in the modules file. So as you guys can see we are importinga few stuff already that is by default. So we are importing the NG modelfrom angular / core and we are also importingthe browser module from angular / platform browser nowto actually make the magic of ng-model happen. We need to import something and this is at the rateangular / forms. So everything entered the semicolon sobasically in typescript, you need to tell typescript where everything isparticularly so angular / forms and what we needto import is forms module. Now this was telling typescript that we are goingto be using this but you also needto tell angular that your forms moduleneeds to be imported. So you can do that by just copyingthis name and putting it in the Imports array out here. So put a comma or press enter and typein forms module go ahead and save your HTML pagealso just in case and now what we see out here iswe do not get any error. First of all and we havethis nice little input box. So let's close this. We also have this nicelittle input box. It says Aria in the paragraph Italso says Aria in input box now if I were to delete that everything inthe paragraph also automatically gets deleted. So if this was not a singlepage application for example, reflecting the changes A to the input would probablytake you to reload the page that that is not with angular. You can go aheadand simply type your name and everything will happen like it's magic and it will appear downin the paragraph below. So that was all about installingangler setting up your project and we set up a project we saw how the shipping app actually looks like and then wekind of fiddle with it. And this is how an angular app basicallyworks you have components and then you also have modules so modules are like sub-packages likeany app would be divided into sub packages and angular app is dividedinto modules now molecules contain components and thisis the component out here that we worked with just nowit is called the app component. Also another thing that I want to bringto your notice is if we go ahead and openup the source code what you see out here isit's basically an HTML page but there's this weirdapp Root element out here. It's almost seems like we I've builtour own custom element below that what you see is a bunch of script Importsthat angular does for you so that angle works properly but the main interesting partis this app Root element now, if you remember we had seenthis app Root element in our app dot componentRTS file and we see that we havea selector called uproot. Now the page that gets loaded into the browser is actuallythis index dot HTML page now, I'll tell you see that we have createdthis app Root thing. So basically uproot outhe'll is like a selector. So basically thiswill help you understand how an angular app gets loaded when we get to thatso index dot HTML is basically the fileor the source code that you see out here. It also happens to have this approute custom element now, we built this custom elementusing our components and we told our confident that the selectorfor this custom element. We uproot and the templateof that component is stored in app component that HTML which isbasically this file and also the component has some styling which itat the moment doesn't have any if we would have any styling it would be in this app dotcompetent dot CSS file and basically that's it. And we have our appdot component TS file which makes sure of the logicthat is working properly. So basically this is how angular works it'sa bunch of components. Now, let's go aheadand this was our first app that we created now, let's go aheadwith our next topic and that is what is typescript. Now, you really saw that we are usingsomething a little different from JavaScript. It's basically not JavaScript. It's typescript. So what exactly is typescript well typescript is justa superset of JavaScript. It is a strongly typed objectoriented compiled language. It was designed by Microsoft and it is basicallyA superset of JavaScript. So anything that is included in JavaScript is definitelyincluded in typescript, but the reversecan be actually said so everything in JavaScript isthere in typescript because it is a superset but everything in typescriptis not there in JavaScript. So typescript is basically used when you want to createa JavaScript based application that can actually scaleat an industrial level because when we're talkingabout typescript it basically compiles down to JavaScript and this compilationis done by the angular CLI. So if you want to go ahead and learn thenitty-gritties of typescript, you can go ahead and check out typescripttutorial out there on the web. There are plentyof them typescript is really easy to learn and even if you don't wantto learn typescript, I think it's easy enoughif you know JavaScript, you can catch it up along the way it'sbasically like JavaScript but having classes interfacesand stuff like that. So with that out of the way, we can move aheadto our next topic and that is integrating external CSSinto Will angular application. Okay. So for the purposeof integrating and external CSS, we're going to be workingwith bootstrap 3 so bootstrap, if you don't knowis a CSS framework. So let's go and seewhat bootstrap does. So this is bootstrap. We are on bootstrap versionfor right now, but I will be using version3 for this purpose of this demo. So you can go ahead and seewhat bootstrap does out here on bootstraps official site. I also have a bootstrap tutorialyou can go ahead and check that out too. I'll leave a link to thatin the description below. It's basically will show you how to use bootstrap andits various forms and formats. Okay. So now we are only goingto integrate bootstrap into our project. So to do that. All you have to dois go out here and open up another Powershellthe mound out here. What do you want to do is type in the commandsnpm install and - does save and you want to saybootstrap 383 what this will do is download all the files of bootstrap 3 and store itin this node modules folder. So node modulesfolder is anything that you use from the know? Package manager if youdownload some external package, it will be savedin your node modules after that after its downloaded. I will show youhow you can integrate it into your project thatyou are working on. Let's give it some timeto actually download the node modules orwhat we have here. That is bootstrap 3 Okay, so we have actuallydownloaded bootstrap 3 now, you can check that by actuallyopening the node modules folder and going down to be oo. So ABCD be shouldbe somewhere here. Okay, it seems Icannot find it there. Let's go ahead and checkit out on our desktop. So we have angular tutorialfirst up no modules, and there should bea bootstrap out here. Yep below bonjour,so it should be below bonjour. So let's go aheadand find bonjour out here. So this is our bootstrap folder that we had just downloaded nowout here we have a few folders. So under this bootstrap foldergoing to the dist folder that stands withdistribution go to CSS. And all you have to dois copy this right click on it and copy the relative path. Now, all you have to do is go into let's let'sminimize this a little so that it becomes easierto work with Now all you have to do is goout here going to Styles. This is the angular the Jsonfile on almost line number 27, you'll see that there isa Styles array so out here. All you do is put a comma spress enter and put in the address of the bootstrapCSS file now be aware that when you copythe relative path you have to actually go ahead and change thisall to a backslash. So this change allof these two backslashes and you should be ready to go. So, let me just show you guys this is without actuallyhaving bootstrap installed. So this is the appthat we have created now, if you were to just go ahead and inspect wecan go ahead and see that in the Head bar. There is only one Stylesat the size deck / CSS. This other styles is justa way of telling angular that there's a source mapping of All the CSS Stylesat this moment. You can see that this isthe global styles to this file now once we actually go ahead andsave our angular dot Json file and then we have to do is actually go ahead and node where we were actuallyserving hit control C. And then what you wantto do again is serve it again to basically save your angular geojson filestop serving your application onto the server and then save all your files and then start upa new Fresh So process again, so to start a newFresh serving process. All you have to do is goahead and tie Angie knew or you can just say n Oh wait, we're not creating a new componentor we want to do is say n g - o and serve so remember this has onlyone style at this moment. So now let's see how wecan actually integrate bootstrap if We actually could integratebootstrap into our project. Okay, so our application has actually compiled and let'sgo ahead and see let's go ahead and inspect our page andif you go into your head part, you will seethat there is a new style that has been added. So this says that bootstrap versionthree point four point one has been added and now youcan use all the styling that comes along with bootstrap. For example, if I were to put this divisioninside a can clasp called Jumbotron this would giveit a specific type of styling a Jumbotron is not exactly meantto be used like that. So let's go aheadand change it to a container. Now if you want to know aboutall these bootstrap glasses that I'm using you can verywell go ahead and check out my bootstrap tutorial that I have upon a direct course site. Okay. So let's remove this. We are not doing the stylingproperly at this moment. Let's get back to this. Okay. Looks like we haveactually broken something. But what I wanted to show you is that we actually havebootstrap going on and I bootstrapis completely working. This is bootstrap version threepoint four point one for us. So that is guys how you would addan external CSS file to your project. Okay. So our next topic for today ishow angular actually loads so if we go backto our code at The Germ and we analyzed all the filesthat we've seen. So first of all, you have three component files that is the componentstyling file click on print template file and the componenttype script file now, if you were to goback to your page where your applicationis loaded you would inspect it or to be honest if we go and see the source, so in the source, you see that there isthis app Root element. Now, how does the uproot element know that it has to end? Third an input boxand a paragraph or two. Well, let me justexplain that first because this isa very important concept. This will help youhow in learning angular because you're gettingto the root and fundamentals of how angular is working. So firstly the page that is getting servedby the NG serve process. Is this index dot HTML file nowin this index dot HTML file. We have somewhatof a custom element with the selectorof a brute now, if you would realize we havedied in this app route selector out here in this appdot component dot t-- s file in this app dotcompetent RTS file. We have a decorator method. We have a decorator class. I'm sorry and in this decoratorclass we have said that the selectoris going to be uproot. Basically, it savesa string as a selector and it gives it a value that if this is going to be usedfor recognizing an element or an HTML page wehave then also said that the element will have its Temple thing in app dotcomprehend dot HTML file. Very basically whena nap root component is present on your HTML file angular knows that it has to servethis three files out here these three files out herethe app component files it knows because it's tied inwith the selector. Now if you go ahead and see itout here there is a module file also now before we getto the module file, I'd like to tell you that the first piece of code that is actually run is alwaysthe main file so out here the main file is the maindot DS file and out here. You see this line out hereso out here in this file. Basically, thereare few Imports. The one is to enable productionmode for development purposes. But the most important line outhere is platform browser Dynamic and it's a bootstrap module. So in this bootstrap module, we are passing in the appmodule as an argument. So since the app moduleis being passed as an argument. The app module part is actuallyinvoked out here and out here. You see it hasanother bootstrap. Re so this boot shopdoesn't actually refer to our bootstrap CSS framework. We just included bootstrap meanswhat should be done first when you are actually running an application soout here we are saying that we want to runthe app component and the app componenthere happens to have this HTML file the CSS fileand this types file, which are also tiedinto the index dot HTML, which is a fruit selector. So whenever this approachselector is found on this HTML page it is going toactually serve these three files and that is exactly how an angular app is loadedonto your screen. So this workflowis very important for you to understand suchthat you know, where you are goingwrong just in case in future debugging processes. We will be havinga very detailed lecture on debugging in the future. So please hang on for that. So this part that I just explained well actsas a precursor of knowledge for the future videos, which will needyou to understand. An angular applicationis actually being presented to you on your screen. Now moving ahead. We are going to go aheadto our next topic and that is confidence. And what we have hereunder this app folder is a component now componentsare the building blocks of angular everything that you see on your screen using angular isbasically a component. So imagine there. Is this website that you seeon your mobile phone and it is a website builtby angular now everything on angular will be startingwith the root component and they will obviouslycontain subcomponents and even more subcomponents after that. So basically it is a treeof components now if you would remembermy flutter tutorial if you haven't watched that, please go ahead and check that out flutter is amazing andyou should be learning it today. Well in flutter I had said that application built usingflutter is a tree of widgets. Now the same analogycan be put to web page that is built using. As a tree of componentsit's basically a unit or a building block and each framework gives it gives its building blocksa different name. So for flutter,it's a widget and for angular. It's a root componentor just components in himself. So what we did out here isthat we had a component now, let's say that we wantto create another component. How do we do that? Well, all you have to dois go ahead and right-click on your applications folder. And what you want to say isyou want to put in a new folder. Now, let's call this folder. Let's say we want to havea component called servers. So let's call the serversand out here. What we want to do is we wantto create the server files so out here we are goingto create a new file. So we are going to createa new file and this file is going to be called the serverdot component dot HTML. So why did we Choosethis naming process. Well, when you are buildingan industry level applications you tend to forget what is what so naming somethingappropriately so out here, you know that this is the serverdot component HTML file. This gives us verygood information. For example, it is a serverit is a component and this is the template HTML file nowin this template HTML file, we could be putting anythingfor example at just been H3 and we could say that this isthe server component that you are viewing. So if this is comingon our screen, we will know that their this isa server component now we can we also need to adda new file out here. So just save this file. We need a type scriptfile first of all, so what we need to dois create a new file and this will be the serverdot component TS file. So TS standsfor Stipe script now if you were to go aheadand check Out the app component that ES file out here you see that there is an importand then there's a class. So first of all, we are going to tryand replicate this because that is also a component and weare making a competent manually so we will knowwhat we want to do. So first of all,we want to say export class. Let's say server out here. Let's see the naming fashionof what how it is used. So it says app component. So to make it more clear that this is a componentwe could just use something of a naming structurelike server component is our brackets. Now, we said export because we want to be usingthis glass everywhere else. So this was your wayof telling angular that this is a component but this is notwhere it actually ends. You also need to tell angularby actually putting a decorator. So as rate componentwill tell angular that this is indeeda decorator so out here if you would go ahead. And again look intoyour components file out here. You see that we haveto open the confidence bar and type in the selectors now. Basically we want to put inin this component is want to say how I want to select this. So we're going to say selector and I selector willbe lets say a server. I'm sorry. That's not how you do it. Let's just go back and as you guys can see our thingsare becoming much more easier because of this IDE thingsare getting imported into our file system. Now I want to say out here is our selector will bewe have to pass a string so it is going to be server. No, we can actually callthis a server but that is not the proper naming fashion. So just to make sure your selector doesn'tactually go ahead and clash with any inbuiltselector or some selector that might probably ship with angular or you wantto do is call this app server. So you just put a hyphen inbetween and you call this app. So now another thing that we need to do is parsethe HTML file so you can say template URL. So let's see how we can actually usethe template URL pain. So you see that it is a template URL and wehave to pass in the components that HTML so out here, let's go back andlet's say template URL and all we have to do ispass server dot component. Dot HTML now, let's see if we are missingout on anything. You can always go backand check their so we have to do put the dotand the / just tell it that it is in the sameParent Directory so dot slash server dot component of HTML and for now wecan skip on The Styling because there isno styling involved. So we did not puta semicolon here because this is basicallylike an array. So let's go ahead and save that so that savedsuccessfully and now what we can do is go backinto our app component file and HTML file. Let's go aheadand delete all this now what we can see is let's putan H1 just know that we are in the app component file. So this is app componentthat we are looking at now. If you guys remember wehave used to select the out here that are selectedfor this will be app server. So whenever we putan app server type of selector then H3 should be renderedwith says this is a server. And then that you are viewing solet's go ahead and do that. So let's go back to our appcomponent and let's say server. So since we have putour apps over here, but we should be able to dois so since we have put it up server there and S3 shouldbe actually rendered there. Now. Let's go ahead and checkif that actually happens. Let's save all our files savethat let's see if this And what do you seeout here is nothing is actually getting loaded. There is no h 1 and thereis no S3 either now. This is because we have forgotten to actuallyput it in our modules. So if we see that nothing has actuallygetting loaded there is no h 1 there is no x 3 so let's go ahead and inspect and let's gointo the console. And if you go ahead there, you'll see that app server isnot a known element and the Beautiful partof angular is that it also gives youa solution most of the time. So if app server isan angular component, then verify that it isa part of this module. So this gives us an idea that there is somethingmissing in the app module spot out here to knowthat what this actually does. So if we were to look at our appmodules type script file, we would see that there it kind of lookslike a normal type script file. There are bunch of imports in the beginning thenthere is a decorator which is the engi moduledecorator and it has a bunch of Is now in these aredays we have understood what the boot strap ba. Does it basically tells which component should be loadedor with service should be loaded when our app is notingfor the first time now, we also need to tell angular that there is another componentthat you should be aware of. This is not done automatically. If you are creating your serversand components manually. So what we need to do isgo ahead and tell angular that there isa server component. So if we put a server component, we also see that there isanother import line that has been added so out here. This is typescript. This is the wayyou tell typescript that there is a server component and this is the wayyou tell angular that there's a server componentnow if you were to go ahead and save that we can now see that there is twoparts loaded one says that up component and the other said this isthe server component that you are viewing if you want to go aheadand inspect you would see that This is a headthen this is a body and inside the a fruit. We will havethe app server component that is running inside the app. So we seethat there is an H3, which is basically this part. So this is how you can createyour components manually and then add them to your project and add themsuccessfully do so that angular and typescript both understand how your complimentsare being made. Now. You can also add a stylingto your component by just adding a styling folderI mean styling file so you will be calling this theserver dot component dot CSS. So this is goingto be a CSS file and out here we can just saysince we have an H3, you can say color will be lets say blue. Let's go ahead and save that. And now what we need to do is gointo the typescript file and we also needto give the Styles URL and this is going to beso let's go ahead and see how the styles are actuallyput this is put in an area. So that's exactly what we're going to do or toso we want to say is this is copy this hour because it's goingto be the CSS file in the similar fashiongo ahead and paste that in and justjeans is just CSS. Let's go ahead and save that. And now if we goahead and load it, we will see that our styling I has alsobeen applied to our components. So this is a server component. This is the app componentwhich makes it very clear. Now, if you are actually a guy who likes things to be muchmore automatic and seamless like me worry not because angular gives youthe power to create components and not worry aboutif they're included in your Everythingjust through the CLI. So if we were to goto our partial bar and we were to actually run a command that says NG generate componentand we could say let's say so we have a serverso we need somebody to let's say sub server. So stop. Now what the CLI will dois it will go ahead and create everything that you needfor your component. So we see we havea sub server folder out here. The sub server has a sub server that CSS file and this also has a sub serverthat component file only we can go and put the sews it hasa component file has a paragraph that sets up server works isalso the testing file which we didn't create this alsothe components file out here. I mean the typescript file and as you guys can seeit says apps Observer. So that is a selectorthat you use it with. So let's go ahead and use this so we go ahead and put thisinto our servers HTML file and we can just sayapp some server. Let's go ahead and save that. Now what you should see is that there is a sub serverworks out here. So basically what you didwas you created a component through the Ally and youbasically just used it this is how you are going to be usingmost of your components creating most of it complementsand that is through the CLI, I just wanted to show you how you can do itmanually to just so that you know, how a server is written. I mean how a confidenceis written and what each line of code means when a componentis also written now if you were to go ahead and compare this thereis a Constructor function and there is this NG on in it. We will get to these parts laterin our playlist because for now if I were to go into the nuances of engine in itand a Constructor, it would only create chaosand confusion in your mind. So that was aboutcomponents for now. So it's time for our firstassignment OK guys. So that is how you use and create components usingthe angular CLI now coming back to the server componentthat we created. I would like to bring to yournotice a few different things that you can do. So Of all let's go aheadand analyze the selected part. So if you have any experiencewith web development, you will knowthat a selector is basically a way of selecting stuffor elements on your HTML page. Now when we say app server like this out here thiscould be anything. This could be a property. This could be a class or this could bean HTML element to for now. This is an HTML element, but let me just show you thiscan also be used as a class. So let's see we say it's dot app server and let's goahead and save that. So this is goingto be dot app server. Now. Let's go ahead and find veryactually used our server. So we have usedObserver like this. Now if you would commentthis out and let's say we put in a div that Hal classand it said app server. Now you see this isa silver confident that you are viewingand the sub server works. So let's go aheadand inspect that. Let's go into the body. That's the a fruitand then there's a div which has a classapp server instead of an app server competent. So what we did was that we createdan App server and we meet the class a selector. So the select is basicallya class numb then the class can also have its own stylingand that is basically how you do it. Now instead of actually writingyour temple to URLs like this. You could alsoits command this out. You could also say somethinglike a template see a template could be just a template and you are going to putyour template in these goats. Now this could be somethinglike sub server. Okay, so this will basicallyput the apps observer in this template. So instead of a template URL you could be using a template toand instead of hairstyles URL. Basically, you can dosome inline styling. Now before we go aheadwith our next topic. What I would like you all to dois solve an assignment for me. So this assignment will test how good you areat creating your components. So let's go back and just change everythingback to the way it was. So let's save it. Save this savethis save everything. So out here we can justsay app server again, and now that createsan observer for us. Okay. So this is save and now I want you guys to doa basic assignment actually, so let me just writedown the instructions for the assignment. Okay. So your foryour first assignment, this is exactlywhat you are going to do. So as you guys can seeon the screen, I have put downthree instructions. So first of all, what you have to do iscreate three components called red green and yellow now, we have to use themin the app component part and then we have to give them some appropriate styling andprobably an appropriate message. So you guys can pausethe video out here and go ahead and try and createthese three components and then come back if you actually are successful or not also and checkout the solution that I will provide you guys. OK guys, so that was the firstassignment I just gave you so I hope you guys had ballsto screen when I told you that I'm giving youguys an assignment and I hope you guysactually try to solve it because in this partwe are going to try and solve the assignment. I just gave you so this partyou can use to see how correct you will wellit was a pretty easy assignment. So I hope mostof you guys got it because that means Icould successfully teach you how to actually use components. So for the solution we havecreated out here angular folder that says assignment1 and it has nothing in it. So, let me just goahead and open it with Visual Studio code. Out here if I would go ahead and go to my source folderinto the app folder and just go aheadinto the spec dot DS into the typescript file rather and we would go ahead out here and I would servethis you would see that there is nothing. Okay, so if we were to justserve this file out here you would see that it isthe normal application that ships with angular. So let's just NG open and serve. Okay, so as you guys can seeit says welcome to assignment 1 and this isthe basic application that angler ships with now what we're going to do iswe're going to delete everything and we are goingto start from scratch. Now. Let's go back and seewhat we actually wanted to do. So what we have to do iscreate three components called red green and yellow. So let's go aheadand do that first. So to do create these elements. First of all, let's go ahead and deleteall this garbage that we do not need save it againand let's just keep the title. So to keep the titlejust pay attention to what I'm doing keep the title. This is very you don't need to do this to getthe assignment correct. All you need to do ismake the components. So this is just me beingFancy with you guys. So this or we could say welcome to assignment onemake this an H1 so that it looks better. Yeah, so welcometo assignment 1. So that's it. Now, what we have to do iscreate three components. So to create three componentswhat we want to do is create a new terminalin Visual Studio code so that we can create the confidence reallyeasily and out here. We want to typeNG generate component red and we're going to do thisfor three different times. So we're going to havethe red component. We are also going to havethe blue component. And we are also goingto have the yellow confident. Now since we're doing thisfor the CLI are AB dot module automatically gets updatedwith red blue and yellow now. All we need to doout here is use them because that is a second part. We have to use themin app component. So our app componentis out here. This is our app component. So what we can dois say app read this will produce the red part. This will producethe app and blue port. And this will producethe app yellow. Let's go ahead and save it. Obviously is read booksblue Works yellow looks so we have successfullycreated three components and we have put themin our app confident. But now what we need to dois give them their styling. So let's go ahead and goand do the separate components. Let's open uptheir styling files. We want to say because we already knowthat it's a paragraph that works there. So paragraph willhave border or of since this is the blue componentwill give it a blue border. So we 1px solid and blue and maybe we can also turnthe color to Sky Blue. I'm using verybasic colors out here. That's also copy this because we're going to be usinga very similar type of styling for red and yellow. So let's go intored and let's face that we want this to be red and this to becrimson and let's go into yellow and let'ssay the same thing. This is going to be yellow. We could use heal and you could alsouse another color. Maybe much more pale yellow. Let's keep it dark because fonts needto be dark actually. So let's seeif these let's save this file. Let's save this fileand let's see if this file now. Let's go back and seehow it actually is working. So blue Works yellow box. We need to go and put up some more stylingfor the yellow part because that seems to bekind of going haywire. So let's go to Yellow dot CSS,lets go here. So we have actually done thisin the app component. Let's save this go backto Yellow go back a yellow dot CSS faces outhere and let's save it. So now our yellow is yellowor blue is blue and I read I read you can also addsome new styling to them by adding a background color. So this is alsogoing to be a yellow. Or we can rather or choosesome different yellow. Maybe it's making much peloon the yellow side. Let's copy this line thenred component that CSS. Okay. So for red we can choosesomething of Peel red sorts that makes it like that and in blue we can choosesomething of a blue sot. So the blue we can gofor a paler blue and that should bemuch more pillow. Let's save all of this now. Let's see. So yeah, we have a bluebackground a yellow background. Why isn't a redbackground working? We haven't saved it it seems and I read background is working to so we have successfullycompleted our assignment 1. So I hope you guys are satisfiedwith the solution. I hope you guys could do iton your own do it because that's exactly what matters. Okay. So now that we have learnedabout how confident are the building blocks we evenmade our own custom components and we even didan assignment on one. So it's time we move onto the next topic and that is data binding. So data binding islike communication. Well, what are we communicating its communicationbetween your type script file? And your template so basicallyyour business logic and your and what basically the user sees so suppose you clicka button on the screen and you want to take some action according to that or youare retrieving some information from a calculationor from a server and you want to putthat on the screen. Well, you do that with the helpof data binding now, there are two typesof data binding. The first one isstring interpolation and second oneis property binding. So this is the way of you out puttingsomething on to the screen. So string interpolationand property binding. So let's go ahead and seehow we can do them. So let's go backto our assignment that we had just done. So first of all, what we want to do outhere is go to the modules and we actually want to removeall these components. Let's go ahead and justremove these components. Let's go ahead and remove these Importsand then we can go ahead and just delete these files out. Let's leave that sleep this. Let's also delete this. Now, let's go backto our app component and we have removed these. So app module we haveto actually save the stew. Now that we have savedit we go ahead and see that it's just that it says welcometo assignment 1 now. I'll tell you see that we are using this doublecurly braces and this is string interpolation. So what the stringinterpolation mean? Well, it converts anything anyvariable any string like this into an interpolated format and it shows itto you on the screen. So let me just give you a ratherbetter example of a usage of string interpolation. So let's go backto our app component that HTML and out here you wantto say there is a paragraph and in this paragraph We areoutputting some server status. So let's say server isa server with be ID is offline. So we want to actually putout something like this. So at this moment itwill just simply say server with PID is offline, right? But what if a serverhad Certain name so server name let's see -- - with be IDE - - is at the status of - laughs - lets see now. What we need to dois go ahead and go into our app component DS file. So that is our dark script file. And now if you're goingto do is create a few of what of these variablesthat we need. So first of all is server name and let's saythe server name is Apollo. Okay, and we alsoneed a server PID. So server PID is goingto be let's say 11, and we also needa server status. And then we can setthe server status to offline. So this will be a string. So that's why we just surroundthem with our single quotes. So now we can saysomething like this on our components dot HTML page. So if you remember wewere getting the title of our General application that ships in with angular when you makea new angular project, you see that it says welcometo so-and-so application. So that was donewith string of depilation. If you rememberit was a curly braces that held somethinglike title in there, right so out here what we can do is putsome variable or even a function that will returna string or anything. Basically that can be convertedinto a string and that will be displayed out herebetween these curly braces. So what we can do is wecan reference the server name. So server name is basically Captain like thisand then with pi D so we can put the PID out here. So this is a number so the number can Alsobe converted into a string. So therefore stringinterpolation will work in this process and we can alsoput in the server status, of course, so we putin the server status by referencing the variablethat holds the server status. Okay. So now we have donethe string interpolation. So let's go ahead and seewhat our output looks like. So server named Apollowith PID 11 that is process ID 11 is offline. Now. I had also said that we could put ina function out here. So let's go aheadand create a function. So in this function, we will basicallytoggle the server ID so we can say toggle. So in this function, we will basically be togglingthe server status. So we will say somethinglike toggles server status and this will return this dot server statusequals to not okay. So what we do out here is for talking this wewill say equals to false. So if it's false, let's just understandthat it is going to be offline. We could put in some logic to say that fallswill print out offline, but let's not get into that for now so we can saysomething like or rather. Let's not deal with this. Let's do it the way. Should be donenot be lazy people. Now we can saythere is a status flag and it is set to trueor false in this case because it is offline. Now this dot service status flagwill be made throughout here. So status equals to true. So we're going to make it trueor rather we could make it not of this dot serverstatus status flag. And Status flag nowthat will work properly because this willbasically convert it and there should be no spacesout there and we can say if this start serverstatus flag equals to true so we can say if this doesthat is flag equals true. We have to open more bracesand we'll say server status this dot server statuswill be set to online. Okay, and there we go. And after this has been donewe can just return this dot server status. Right. So basically what is happeningout here is we have set a flag. Okay missing whitespace Quick Fix so we can put in a triple equalsjust to make sure it's exactly true and not onlycheck the equivalence that is and also checkthe value so out here what we are doing is weare setting up status flag to false and accordingto that state is flag. We are changingthe server status to online or offline. Okay. So now that we have putin this function we can use that function by calling it inour string interpolation method. So just instead of putting our variablewe can put in the function and this will changethe server status to online now. Basically what we are doinghere is really simple is it's returning a string and it'sbeing converted into a string. Okay. So now that we have toggled the server statusto online and we did that through passing a functionin the string interpolation. So now let's understandhow we can do property binding so every HTML elementhas some property or the other these Listscan be easily found on MD n that is the Mozilladeveloper Network. So let me just give youan example of a property. So let's say we hada button to toggle the server status furtherfrom offline to online again, and again insteadof just being toggled from offline to onlinehard-coded into the code. So let's say we had a button and let's say this saidtoggle server status, right? So if we had somethinglike a button like toggle server status, so we have a buttonlike this out here, but it really doesn't domuch at this moment. But let's say justfor the sake of showing property binding let's saythe button was disabled and you wanted this buttonto be actually enabled after 2 seconds that your websitehas loaded up just so that there are no discrepanciesin the button, press. Ok, so we can achieve that by writing a Constructorfunction in our class component so out here youcan make a Constructor so we can say set timeout Sowe have to first give the time after which it will be enabled. So let's say twoand a half seconds. So it's two and a half seconds. And now we have to put in of logic of actually turningthis button to be enabled. So let's say we havea variable called button state so button Stateat this moment should be true because our buttonis disabled first. It's just a the Sableand then it should get enabled so we have to say this dotbutton State equals to false. Right? So now that we have done that all we haveto do is go ahead and bind this property. So we do property bindingby putting the property in between the square bracket and then binding itto the outcome of a variable or a function so out here we can say we are going to bindthe two button State. Okay. We need double quotes for this. I'm sorry not single quotesSo button State now. Is happening out here after the Constructor is goingto get executed I bought in state is goingto become false. So disabled will become false. And first of all, it will be true because abut instead being true for the first twoand a half seconds. And actually let's seethis in action. So our page is loading and after two and a half secondsare button becomes active. So let me just showthat to you again. It's inactive for two and a halfseconds and then it suddenly becomes active. So this is how youperform property binding. So what we just saw here is we sawstring interpolation in action. We passed a string interpolationarguments with variable names and he even dida function then following that we did property binding so for property binding wefirst created a button so that we can togglethe server status, but we haven't reallyadded that functionality yet yet to do that. But what we did was we bindedthe disabled property of the buttonto a certain variable now, this could have alsobeen a Ocean and it will be the same way. You just fasten the functionwith the brackets and the work. And now what wewill see is something that is our next topicand that is event binding. So event binding is basicallybinding Dom events to certain logic that will residein your typescript. So we want to bindour toggle service status that we had created out here because we are basicallytoggling the server status and then returningthe server status so we can basically dothat by passing an event. So every button hasan event called click and to click we will passthe event toggle server status with the brackets nowthis will become active after 2.5 seconds. And basically it's not working as we wanted it to solet's go ahead and inspect it. Okay, so it's not working because we are talkingthe server status out here. And what we want to do isreturn the server status, so it should actuallywork to be honest. So this top server status? So if we were to just outputthe server status out here. Okay, so we do not havea logic out here. So to make it backto go offline. So else we can just add something like else this startserver status equals offline. So now that we have setup our function to even display offline and because we will firstchanging it back to online and there was no real logic tochange it back to offline again. So let's do that and now we can havea talking happening out here so we can change itto online teaching it offline. So now we have a button that can actually toggleour service status from online to offlineand so forth and so on so that was event bindingand property binding and we also sawstring interpolation. So with the helpof event binding and property binding now, we have a button that can actually makeit offline and online but there's another waythat we can do this and that is two way binding. So for two-way binding what we're going to seeis basically we are going to combine property bindingand event binding. So let's try and do that. So for event binding let's goback to our code editor and out here. Let's go to our HTML pageand what we want to say. Till okay. So let's remove all this so we can makethis server information. So first of all,we can have a form. So basically we can havean input of type text and this will take inlet's say let's put a place holder and let's putin server name. Let's also put a button below this and thiswill be a submit button or rather instead of a button what we can do to showTwo Way binding is put in a paragraph and we are going to typeout our server name out here and we are going to putin the server name here. So server nameis going to be here. So this is basicallystring interpolation. And what I am interpolatingis the server name that we had created. Okay. So this has a capital S. So let's not forget that so our capital Sshould be out here and what we are going to dois basically use NG model. So to use NG modelwhat you need to do. Is go into your appmodule out here. So in your app module what you need to import isbasically the forms module. So to import the forms moduleyou have to say import forms module fromother eight angular / forms. So that's it. And we have to put thisin single quotes and out here. What we need to do islet's go ahead and see what is saying disabledrule import spacing. So we basically importantthe forms module and this forms module will havea functionality called ngmodel. So anti model will let us bind. Whatever is being typed to be actually bindto a certain variable so we can put that ng-modelproperty to our input. So this NG modelwill be binded as an event and also as a property so weneed to pass in the server name. So, let's see. We have a server namecalled Ebola out here. So it's already prefilledwith Apollo and let's say we want to nameour server something else. So let's call it the Gixxer. So Jackson could betheir name of a server. And as you guys can see it is being automaticallyupdated out here. So that is two way binding. So just to give youguys the difference between two way bindingand one way binding if we can do out hereis say put a placeholder. So this is the same part wewill have server name. So what we can do ismake another input and this time around weare going to put ngmodel as just the property. So edgy model with camel casing and we are going to say itwill be binder to server name. So let's bind it to servername and let's see what happens. So now we have two inputs and everything isfilled with Apollo. Now if you see out here if I go ahead and changea poll out here. It is not automatically changing in the Have to because itis only one way binded while out here. If we were to givethe name Paul to our server it would automaticallyupdated everywhere. But if you were to go ahead and delete little bitit's not really updating at the out here because it'snot two-way binding. You need a event to actuallygo ahead and submit this so that your event and your propertygets binded together. And basically you havetwo way binding them. Okay, so that does it and just to make thisa little more interesting. Let's make this somethinglike H1 so we can put an x 2 and the say input server. Information. Okay. So once we have that ready so we can say server nameand the server ID will be the PID basically so we have an inputserver name part and then we can display so information outhere so display. This place so information what we can do is let'sjust copy this out. So server PID the surf PID Iconstantly forget it server PID. So that's why so beID will be presented and server status. So now we basically have a smalllittle son of a bitch going on and we have a button that can togglethe server status. We have a place where we can inputthe server name. So what we just sawout here is basically we saw string interpolation. So all this output is being shown to youthrough string interpolation. We are buying a property do this button and withthe help of that we are talking it for the firsttwo point five seconds. This is disabled now and this will become enabledthen we saw a event binding where we actually toggle the server statuswith the help of a button and then we also soughtto way prevent binding where we put in an input methodor an input element and we are constantly displaying what is there in the input withthe help of two way binding. So this brings us to our secondassignment for today. And in this video, I would liketo say that again, please try and solve thisand mint on your own and these are the instructionsfor your second assignment. So for assignment What youhave to do is create a page that can take the input of a first name usingtwo-way data binding and you have to Output the nameusing string interpolation. So again for usingtwo-way data-binding remember you have to useNG model and use NG model. You have to goand import the forms module and to your app intoyour apps dot module the TS file and in that app startmodule dot ES file, you will also haveto declare it out there. So don't forget to do allthat and in the output you have to actuallyuse string interpolation. Then we have to adda button to reset the name to a blank string. So this should be somethinglike property binding. I guess I won't knowuntil I solve it myself. And again this buttonshould be disabled if the name fieldis currently empty. So I would suggest that you pause the videoright here and you go ahead and solve this and if you can't solve it youcan always follow along with me because I will be goingto the solution of this assignment right now. So let's go backto our code editor and what we wantto do now is It's try and solve assignment number two. So I'm going to keep onediting the assignment project that we had made. I'm not going to makenew assignment project. So what we're goingto do is basically remove everything from here. Let's remove everything. We will also be needingsome New Logic. So this is not goingto work for us. So let's go aheadand remove that. We also don't needa Constructor function. We don't need anything. We just needthe class to be there. That's all at this moment. I will also let entry module bethere in our app start module because we will be needing it. So I'm not goingto edit this out. So let me just saythat I have saved everything and now all we haveis a blank canvas that we can start developing on. So our first instruction says that we have to create a pagethat can take the input of the first name usingtwo-way data binding. So let's see you wantthe user to know that he is in puttinghis first name so label and this will be 4 sogoing to be for first name so we can sayF name something like this and then we can sayFirst name and out here. What we can do is put an input that has type textand it also has a name of fname. So the label is nowbind it to our input. This is how you shouldprobably always code. We also should putin a placeholder even though we have a label because that isjust good practice. So we are going to sayfirst name in the placeholder and now we have a place that we can putin our first name in so we can also putin a space out here. First name is going to be here. Right? And we also needto input our first name in a paragraph accordingto the second instruction so we can put it out in a paragraph and we can usestring interpolation for this and we can just usevariable called name because we are onlydealing with one name. There's no last name so we can just createa variable called name now we go back to our typescriptand we create a variable called name and let's keepit blank for now. Okay, we are not goingto use double quotes. We are going to usesingle quotes and let's keep it blank for now. So now we can say our name which should bedisplayed out here. So basically what we needto do is do a binding. So that is pretty simple. We learned that really easily that we can do thisto the NG model and we can bind itto the property of name or rather the variable name that we just created so outhere we will have a name and we can just go ahead and start typing now andour name gets typed out here. Now. The other thingthat we need to do is we need to add a button to resetthe name to a blank string. So first let's goahead and create that button for ourselves. So we need a button and this buttonshould said reset name and basically it should have a function or an eventwhenever it's clicked. So whenever this clickit should have a function that basically goes aheadand turns the name blank again so we can have a functioncalled reset name. So reset name is goingto be our function. So let's go aheadand create that function now. So reset name is goingto be our function. And what we want to do isset this dot name equals to blank again. We can actually do thiswithout the event. I guess we can fixthe missing white space. Let's see if we are actuallyif you do reset name, it goes ahead and recitesthe name to blank so we have minded it to an eventand that is the click event, and we need reset name out here. We are not passing anything because it is directly beingby the to the property or rather the event out here. So now we need to bindit to a property. So the property that we are going to bindthe two is disabled. So the disabled propertyis going to now check a function basically to see if the name hasany value or not. So this can be really easily done by actually sayingsomething like named length 0, but we are not goingto try and add cold out here. So let's just stickto the functions. Actually. We could actually have donea tertiary operation and basically downit in one line, but why do that? So, let's see check name. Check name is either goingto return true or false. So now we have check nameand what we can say is if this dot nameequals to equals 2 and we can also set state. So state is true wheeler needthe state variable to actually handlethe disabled functionality. So if this dot name is equalsto equals to equals to blank or want to say isthe start state will remain true or what we can do is if it is unequal to this what we can do is saythis dot State equals 2. So let's go overour logic again. So if our state is true andif it is not an empty string rather we are going to turnour disabled to false. So if it is false out there what we need to do outhere is a check name. Okay, so we made a mistake. We can't do that. Let's see inspect console andtemplate can't bind the disabled since it isn't a knownproperty of button. Okay. So disabled isnot the known property because it's disabled. So that was the silly errorthat we had made now. Let's see. What's go ahead and load it. Okay. So check name is not a function. Okay. So let's go aheadand use check name. We actually forgotten to save this out here go ahead and putthe white space there. So now we have a button that can actually set the stringto a blank string again. But according toour assignment it says that this buttonshould be disabled if the name is empty. So this way we can actuallypractice our property binding. So basically we haveto bind the property disabled to a function that will basicallyreturn the state. So let's say it is a functionthat is called check. Name and now let's go aheadand create this function. So check name is goingto be our function and put that in double quotes. Now, let's go backto our app module out here. So let's createa state first down. The state is going to be false. First of all, and let's say we are goingto have another function called check nameand in check name, what we want to do is check whether so we can dothe checking part with an if statement. So this dot name weare checking for the name if it is empty string andif it is an empty string what we want to do ismake our button disabled and that can be doneby just returning true in our state variable. So we're going to set it to trueand we are going to return it. So return this talk state. So if you return the startState out here we are going to have a button now that is basicallythe Sable dough. Okay. First of all, we need to go ahead and checkwhat we have done wrong. So we need to go ahead and save this so check nameis actually being passed. Now. Let's go ahead and loadthat so now we see that we have a buttonthat is disabled. But as soon as we starttyping the button gets enabled and we can click it to basicallyput it back into disabled State and also makingthe first name String into a blank string. So this is the solutionto assignment number two. I hope you guyshad followed along with me. And if you had any doubts when solving it on your ownthe doubts have been cleared now now let's moveahead and let's look at the last topicfor our angular Basics today and that is directives. So what exactlyare directives well, let's head over to angular'ssite and let's see what they are saying about directors. Well, it says that there are two typesof directives out here. So one is attributedirective and one is a structural directive. So an attribute directivechanges the appearance or behavior of a Dom element. So in short a directive isbasically an instruction The Dome now this instructionmay be to change the Dom due to some attribute or it could structurallychange the Dome tube. So that isa structural director. So structural directivesare basically used in places where you wantto input a certain. Let's say a Division I gothere division is being used with the directive ng-if and we are outputtinghero dot name out here. So what this is is basicallythere is an if statement and we will get to what ng-ifmeans just in a moment, but this is a directive and this has instructionswritten in a module which we will also get intofuture lectures about directives where we take a muchmuch deeper look into what directives are and how custom directivescan be built by you but for now we are justgoing to understand what a directive does. So in short a directiveis a structure and this structure givesinstructions to the Dom. So let's look whata directive looks like and how directives can be made byjust reading the documentation so To build a directivewhat we have to say is let's say we givea directive as app highlight. So we have created directivesAng generate directive. So this is a CLIcommand out here so we can generatedirectives like that. But for now, what we are going to do is weare going to use some built-in directives to understand how attribute directors and how structural directivesare actually working. So the directives that we are going to be usingour ng-if NG else. So basically ifand else and ng4, so these are the three directives that weare going to be using today. And after I show you how to use these directivesI will also be giving you an assignment and that will beyour last assignment for this angular tutorial and we will wrap it upafter that in the future. We will be actuallydiscussing every single bit that we have learntabout the day that is components data bindingtwo-way data-binding directives. Everything will be donein much more detail. And when we are doingthis in detail, we will have an In project, so we will be building a project through the courseof this playlist and by the end youwill feel pretty confident that you can go out there and pretty much crack angularinterview job out there because we will be teaching youhow to build an app and in the end wewill also train you for angular interview questions. Okay, but for now let'sjust focus on how to use the built-in directivesthat ship with angular. So do you usethe built-in directives? Let's see what we can do. So the first directive that wewant to use is basically an NG if directive so, let's see what wecan do to show ngf. So ngf is basicallyto show something structurally. Let's put up an edge onethat says this is an example of ng-if now we wantto show something if a variable is true and wewant to show something else if it is false, right so we can dothat by simply saying B, so we will Paragraphand let's say ng-if so we are going to tieit up to an expression and we're going to callthis expression of flag and we are goingto say flag is true and we are goingto say flag is false. Otherwise so out hereto show flag is false. Otherwise, we are goingto use something called a local reference. So a local reference is usedwithin the NG template. So for the NG template, we have to givea local reference name. So let's call it the else block. And in the else block wewant to put out a paragraph that says flag is false. Now. We need some way to actuallytoggle this flag. So let's create a button. So we are going to say somethinglike toggle flag and I'll cheer for toggling flag. We are going to put an event and we are going to bindthis event to a function that toggles our flag. So we are going to callthis function toggle flag. Okay, so we haveour template created now. All we need to do is addthe business Logic for this. So for all the logic that we need to do is createa variable called flag. First of all, so let's go aheadand delete all this that we don't need so we are going to havea variable called flag and flag will be firstof all set to true now. There is also going to bea function called toga flag and in this functionwhat we are Do is we are just going to toggleit now to toggle this. All we can do is this dot flagequals 2 not off this dot flag. So this is a really easy wayto toggle a variable and just now we can justreturn this dot flag. So since we're doing that so now what we can dois save this and let's see how that actually works. So says flag is trueand flag is false. So flag is false is actuallynot being displayed because we have not referencedthis local reference that we have created. So we have a local referenceand we need to create it and we do that by saying elsewe create the else block. Now, let's go aheadand save that. Let's see flag is true. And now flag is false flag istrue flag is false. So to make sure that we are actually puttingup two different paragraphs. So let's go aheadand inspect this. Let's go into our body. Let's go in to uproot. Let's see this button. So this has a paragraphcreated out here. So let's toggle thisand a new paragraph gets created which says flag is false. Now flag is true flag is falseflag is true flag is false. So this is a brilliant way to actually showsomething very conditionally. Now I can show youthis is a other block that we are actually showing instead of one blockbeing constantly just modified. It is a separateBlock in itself. So that is a veryimportant thing to know. So let's go aheadand do that again. So let's save it. And now let's go ahead and seewhat we can get. So in our heador rather in the body, we have the uproot and now we have paragraphthat says flag is true. And now there isanother paragraph at the I d-- flash which is a verywrong way to spell false but it proves the point that this is a newBlock in itself. So this is how youcan use ng-if now, let's look at anotherinteresting inbuilt directive that ships with angularand that is edgy style. So with any style what you can do is you can giveDynamic styling depending on a certain condition. Now if you analyzewhat we have out here, we do have a certain condition which is where the flag is trueor flag is false. Now, what we want to dois we want to color this. This is an exampleof ngif into red or green if flag is trueor false respectively so we can do that very easily with the helpof something called NG style. So with any style oppado is we A property now this property may not bein single quotation marks. So you can say color and what you can do isyou can put an expression. Now you can say somethinglike a function that is get color. And you could execute that. Now what we need to dois we need to go ahead and create this functioncalled get color. So we are going to get the color and we are goingto return a color that is probably a stringaccording to the flag. So if so, what we want to say is if this dot flag is equalto equal to true we want to return You want to turn green and if it is false wewanted to turn red. So let's go ahead and see so as you guys can seethis is green right now and this turns red and thenturns green and red again. So what we did basicallywe passed an expression and in this expression, we are putting in a color and the get color methodis returning a string which either says red or green. So this is how youcan dynamically add styles to your elementson your HTML page. Now another way to doDynamic styling is with the help of NG class. So what we can do outhere is we can add a class to an element dynamically. So let's say we have another H2 and let's say this isjust an example of NG class. Now, what I want to dois we want to turn this. So the clasp you want to add isbasically let's call it white and we want to add thiswhen get color returns true. Let's say so wejust want to go ahead and paste that logic out there. And now what we have to do is gointo the app component CSS file and create a class called White and this class will basically put a black borderborder:1px solid black. It will rather let's makeit a red and then we want a background colorof let's say black and we want the fontcolor to go white. So this is a bunch of stylingthat we are adding which is basically the realreason you use classes in CSS so that you can use a bunchof styling together now that we have created the class. Let's go aheadand save all our files. Let's go ahead and seewhat it looks like. So this is what it looks like. This is just an exampleof ing class. Now when this is setto false so class is removed. Let me just show that to you. So if we go aheadin the body part and go in to uproot and just look at this classthat will be added. So we add a class called Whiteand then we remove a class called White classcalled White and this is how Angie class can be usedto put in all sorts of dynamic styling into your HTML elementswith the help of NG glass. Okay. So the next directive that we are going to havea look at is called ng4. So let me just give youguys a quick example of how to use NG for before I dive into the last assignmentof this tutorial. So Angie for is used when you actually wantto iterate through an array. So let me just showyou what I mean. So let's say you had a bunch of names or let's makesomething very viable. So first of all, let's call this somethinglike the student roster. So H1 So this is calledthe student roster now suppose you hada method so input and what we are goingto say is placeholder is name and out here. We also wantto display the name. So all the name of the students we wantto display so student roster and there will bea button to say submit. So this is a subMIT student name and this will have a function. So whenever we click it, we want to add the namethat we just entered into. Let's say another so we can say that isthe name of the function. Now if we want to do is go ahead and first of all create a student rosterso student roster is equal to let's say let's addsome pre-built students. So Aria and let's sayRohit and let's say oh Pasadena. Now, what we want to dois let me just fix these white spaces up. Now, what we want to dois we want to display the student roster. And then we also want to add to the student roster every timethe button is clicked. So we have a function for thatand it's called ad and basically what we want to dois we want to push an element so that could be a current name so current namecould be Blank for now. And let's leave it like that. And what we want to say is this dot student rosterdot push want to push in this start current name. So what this will do is thiswill push in the current name. Let's go ahead and make a placeso that we can display it. Now. The whole point is that we want to display itin one single item. We do not want to createlet's say a paragraph for every time this listhas to be populated. So what we can do is wecan simply create a list item and out here we can just say Ang for let's say namesin the student roster. So student roster, so is that how wehad named it student roster and that's exactly how we are named it and what wewant to display out is names. So what we have done right nowis we are pushing in something but what exactlyare we pushing in? Well, we need to addthat to our input. So what you need to do is sayNG model and we are going to ng-model thisinto the current name. So now that we have done that now if we want to do iswe just want to interpolate the name out here. So this will justdisplay the names. So this is going to be names. Let's go ahead and save that. Let's see that if it'sdips faces names. So we have names arearrowheads and a pasta. So let's say someonelike Rahul also joins the class and we can see some ID student and Rahul is now addedto the student roster. Okay. So this is how youcan basically use NG for we have one list item. And basically itis going around. And circulating througheverything that is there in this array just out here. So now that we have seenthe usage of NG f and g if else and ng4, let's go ahead and doour last assignment. Let's not forget. We also saw how wecan use Dynamic styling. So we are alsogoing to incorporate that into our assignment. So let me just go aheadand type out the instructions for your assignment. Okay guys, so this is your last assignment Iwill again remind you that for assignments. You have to pause the screen and try and dothe assignment on your own and then you cancompare Your solution with the code along part that comes after the assignment. So for assignment number three, we have create a buttonto toggle a paragraph display. The paragraph couldbe saying anything. So after that we haveto lock the number of times the button was clicked. Ok, so it says barn out herebut it's button was clicked and after the fifthclick we have to give some specific style to the log. Okay. So this seemslike a pretty easy. Thing to do. What we have to do outhere is basically get rid of everything that is here. And let's first create a button that says toggle displayand then we can add a paragraph that says lorem ipsum. So lorem ipsum is just a random paragraph Solet's go ahead and see this. So this is toggle display but toggle displayat this moment does nothing so we have to puta functionality into the click the click will basicallyreturn true or false so we can bind us to a functionthat lets say toggle display. So this will returntrue or false. So we have to go ahead and create the toggledisplay method first. So toggle display. And what we want to say,is this start State, let's see. So let's createa state variable first. So state is going to be true and toggling is basicallywhat we had learned that we have to turnit into something that it is not so this stateequals to not of this state and that should do it for us. So this will toggle the display. So now that we have togglethe display now, all we have to dois bind this logic so we say ng -ifand we only want to show this if state is equalto equal to true. So if that is what wehave done correctly, we are talking the displayand this is true. Now what we need to do. Another thing is according to the instructionsof the assignment is that if the log the numberof times the button was clicked. So what we need is basicallya counter to count the number of times we have clickthe button now every time the button is clicked we wantto actually increase the counter and we can simply do that with anincremental statement. So this dot counter now what we want to do iswe want to say out here. We want to create a paragraphand this will have n G4 and so click of Clickso rather counter. So for n G4 this needsto be pushed into an array, so we are goingto say button click. Ok. So there's another wayto do this. We don't really need a counter or rather we can make counterinto an array itself. and when this is clicked, all we need to do is saythis dot counter dot push counter dot length plus 1 So we're going to say this dotcountered at length plus 1 so the length initially is 0 so this should justgo ahead and add it to this counter. Now, what we want to dois we also want to cycle through this array of counters. So Clicks in counters. And what we want to dois we want to print out the click information. So let's see. So now that we have actuallyput the logic to push the length of a counterinto our array we need to do and cycle this array. So to cycle the array weare going to create a paragraph and we're going to say ng4. And we're going to say clicks of counter and what weare going to try and interpolate out hereis the counter or rather the clicks and let's see if that works. So out here we have a display are going to click itonce click it twice and we can see it goeson and on and on and we have kind ofcreated a counter and this is kind of logginginto all down now that we have set upour counter for our toggling. All we need to do is followthe last instruction and that is after the fifth click. We have to givesome specific style to the log. Okay, so we can do thiswith the help of NG Styles. So NG Styles Let's see. We want to make the colorof our font blue only when get length is more than 5so get length is a function. So this will returnsome value or the other. So let's go aheadand create that too. So get length is goingto react and create if it's see this dot counterdot length is greater than 4 Then we want to returnthe string blue else. We want to return string black. So now we have function that returns somethingand we have binded that function with the color Style with useof NG style director. So let's go ahead and seeif this works for us. So let's toggle the display 1 2 3 4 5 and that has turnedour list into a blue list just after 5:00. So this is how you would approachthe solution to assignment 3 and this brings us to the endof this angular tutorial. We learnt a lot today. We saw what is angular. We saw the differences that angular 8 has brought aboutin the industry after that. We also started withour installation of angular. Then we went ahead andset up our project. We learned how to create our owncustom confidence manually and through the CLI, then we came to knowhow to use these components. We did data bindingdid property binding and then we did event binding which of course includestwo way binding then of course, we saw the inbuilt directivesand what exactly did Tips are and this brings usto the end of the basics that you need to actually makean application through angular. Welcome everyone. This is Swati from Eureka in today's sessionwill go through react. Yes tutorial. So if you guys are familiarwith the term react chairs, then you might know that it's a front-end Librarydeveloped by Facebook. So today we'll learnin and out of reactors. But before we start letExplorer youngjae's application. I'm sure all of us spend a lotof time on Facebook. If not a lot at least some soall of you can easily relate that this application looks exactly like Facebook commentsection in this complication. We can add a new comment deletean existing comment or even can replyto some other common. Let me show youhow here I'm adding a comment. I can delete my comment. I can even deletesome others comment if I have the authority and then I can replyto others comment like this perhaps you would have noticed whether I'm addingor deleting comments only that section is getting updatedinstead of the entire page. So what I'm trying to say isthat we do not have to reload. Refresh the entire applicationto see the updates. So how exactlyis this happening? Well, this is the magicof react.js and that is what we are goingto learn today. But here some of you might askthat why the anxious when there are somany other Frameworks available out there to understand this. Let's take upFacebook as example. So let's go back to the year of 2009 2010 when Facebook usedto look somewhat like this. If you guys rememberduring this time, you have to repeatedly reloadthe page for new updates at the back end the Facebook wasusing the operational data flow as you can see fromthis diagram the data came from various sources, like the initial leader the real-time dataor the user input data. Now this data was passedto the dispatcher then to the store and thenultimately came to the view now, we will the part where the user is actuallyinteracting with the application and being a user whateveryou see on the browser as a web page isthe view itself. So if there is a changein data from any These sources from the back end in order to reflect those changes on The View youhave to refresh the entire page and then it seemed by the user. This surely wasnot user-friendly and moreover this traditionaldata blue had some drawbacks like it use the Dom now. What is a dom dom standsfor document object model. It is an objectthat is created by the browser. Each time a web page has loaded what does don't it wasit can dynamically add or remove elementsfrom a webpage at the bakit? But each time it did that the browser hadto create a new Dom object for the same webpage this ledto more memory consumption which ultimately madeour application slow. Let's take another exampleto understand this suppose. This is an applicationin which we have four blocks 1234 Suppose. There is a change in Blockone from the back end, but in order tosee those changes, we had to reload the entire page and then only wecan see the changes. Now as you can see after reloading the one becameone over so guys this is where the reality is comesinto the picture with react. Our entire application isdivided into various components. Now each time data is addedit will automatically update the specific component whosestate has actually changed. So if we have changedin Block one, it will automaticallychange the block one only without reloadingthe entire page this reduced our page reloading Dusk and because of thisthe you I became more user-friendly moreover the react uses a virtual Dominstead of the real Dom which makes our applicationslighter and faster. Now, what is virtual Domwill understand it later in this tutorial for now. Let's see how we actchange Facebook's UI. So Facebook startedimplementing react.js in its Newsfeed sectionsince 2011 after this, it's you I became more user-friendly nowwhenever new updates gathered a new stories buttonpopped up at the top of the page now clicking on this button willautomatically reload only the newsfeed sectionwithout even touching the rest of the page thisdrastically improve the applications performance. So what changed at the back end at the back and it still usethe traditional leader flow, but now instead of loadingthe entire page again, what reacted was it blueof the previous View when did the componentsfor the update and then place the new viewin place of the whole one. This was possible because unlike other Frameworksreact don't have any explicit data binding in react. The only thing we haveis a render function, which gets called once for each componentin this render function. We tell how our component willlook like at any point of time. Then this render functionreturns a An overview since the componentcan compose a real component. The render function getscalled recursively resulting in building up the whole view. So now that you have understoodthat why we use real chairs, let's now proceedwith our tutorial before we start off. Let's take a quick lookon today's agenda today will first understand what exactly is reactive and then we'll find out someof its major advantages then I'll show you how to install reactorson your systems. Once we are donewith the installation will start coding with reactorsby taking up a simple program of hello world, then we'll jump ontothe various fundamental concepts which all nightbehind react cheers. So without any delay, let's take up our veryfirst topic that is what is react to useas I have already told you that react.js is an open-sourceJavaScript front-end library that is used to developinteractive you is the Facebook was using it since 2011, but it was introducedto the rest of the word on me. 2030 and later on March 2015. It was open sourced. Moreover the reality isis concerned with the component that utilizes the expressiveness of JavaScript alongwith the HTML a template syntax. That is it combines the featuresof JavaScript and the HTML and then provides usa dynamic language. It is basically the view in MVCis the model view controller. It is not concerned withanything except for the view. That is it handlesa representation of our web page at any point of time. But what aspects make it handlea dynamic view so effectively, let's proceed further and find out will react hasthree main aspects first. It uses the virtual Dom second. It has one-way data binding and third it providesa server-side rendering. Let's now discussthem in details. The first is the virtual Dom. So as I have toldthat it uses the virtual dog. Now many of youmight be wondering that. What is a virtual Dom and how it is differentfrom the actual dog. Well, like an actual downthe virtual Dom is also no tree that lists the element and attribute andcontents as object and the properties reactor inyour function creates a notary out of the react component and then updates the streetin response to the mutations in the data model which are caused byvarious actions done. Maybe by the useror by the system. Now this virtual Dom Worksin three simple steps first will be wheneverany underlying data changes. The entire UI is rear-ended inthe virtual Dom representation after this the difference between the previousround representation. And the new one is calculated. Once the calculations are done. Only after that the realDon will be updated with the only the things that have actually Teach youcan think it as a patch as the patches are applied onlyto the affected area. Similarly the virtualdog acts as a patch and is applied to the elements which have actually updatedor changed in the real dumb. This makes our applicationfaster and more over there is no memory wastage unlike otherFrameworks react follows, the unidirectional data flow. Let's now move onto a next aspect that is one-way data binding unlikeother Frameworks react follows, unidirectional DWor one-way data binding as you can see from this diagramin whole of the process. The data is flowingin the same direction. The major advantageof one we did a binding is that throughout the applicationthe data flows in a single Direction which gives you a better controlover it and because of this the application stateis contained in specific stores. And as a result of this the rest of the componentsremains Loosely coupled so our third and last aspectis the server side rendering server-side rendering Allowsyou to present the initial state of your react component and the server sideonly because of this the page loads faster with the server side renderingthe server's response to the browser isthe HTML of the page that is ready to be rendered. Thus the browsercan now start rendering without even having to wait for all the JavaScriptto be loaded and executed allof these features together makes react to usea powerful and robust language which provides us with some major advantageslike because of the use of virtual Dom the applicationsperformance increases moreover. It can be used on clientas well as server-side the reacts j6 file increasesthe readability of the code, so it becomes easyto debug and maintain and lastly the realityis can be easily integrated with Frameworks like meteoror angularjs So now that we have already understood that what is react cheeseand whatever it advantages. Let's now proceedto its installation. Well installing react.jsis very easy. You just need to addthe react.js dependencies to your code. And then you are good to go. You can add thesedependencies even directly from online repositories or you can also download them and then add themto your project folder as you can see from this code. I have addedthe dependencies here from the online repositories. Now, let me show you how to add the dependenciesafter downloading them for that. You need to go backto your project folder. So now this is my project folder inside this I will be pastingall my dependencies for that. I'll go to my downloads here. I have already downloadedthe dependencies. I just have to copy this. And then I'll go backto my project folder and paste them here like this. So inside this I have all my dependencieswhich all I need. So now to start coding with react you can useany text editor or any ID you want so here Iam using the web some ID here inside my project folder. You can see that I havealready all my dependencies. So now what I will do Iwill create one HTML file here. Let me name it as index. Now in this HTML file, we have to provideit with some title. Like I've given it demo. Okay. So now inside the headof this file now we have to tell that we have the dependencies. So using the script tag, we will addthe dependencies one by one. So, let me see the source and my dependency sourcesthe build folder in this first dependency, which I need to add isthe reactor Minn dot J's. Now, this is the main reactdependency that you will need. Like this I have to add the restof the dependencies. Okay. So now I am donewith adding my dependencies. So next thing what I have to do is I haveto create one Division. I have to create one division so that I can displaymy react code over here. So I will give this divisionwhen ideas will okay. So here I have giventhe ID as content. So for now we are donewith this HTML file. Now we have to createone react jsx file. So for that wewill create one file. Let me name itas script dot JS X. So this j6 file is the file in which we will addour all the react code. Now Jesus is a type of sentencethat you can just type and it's very easyto understand and react as you know that everything is a componentand each component needs a class to survive. So first we haveto create a component and then provide a class for it. So, let me justcreate one component. Okay, so as youcan see I've created when component namemy component and then I have created one class. So now I have createdwhen comparing with the name my component and then Ihave provided one class for it to survive. Now inside this class. I will be adding allthe functions as attributes that my class is going to do. So now each componenthas one render function which returns anHTML representation. So here we'll addthe render function which will containwhat we want to display. So since we are goingto return the hello world just so here first. Let me just createthe render function. So render this is a function. Okay, since thiswill be returning an HTML representation. So inside the written after right we are returningonly the hello world. So I will write hello world. Okay, so just save it. So now we are donewith creating a component. Now you have to tell react that you want this componentto be displayed over here. So for that. Okay. So here we are callingthe render function of react Dom nowinside this function. I will tell that I wantmy component to be displayed on the HTML P. So for that I willfetch it by its ID. So I'll call documentdot get element by ID since we have giventhe ID and it's ID is content. Okay. So now here we are done with our j65 just saveit go back to the HTML way. So now you can thinkthis j6 file as external CSS or JavaScript as we refer this filein our HTML file. Similarly. We have to tell her HTML file that we have are reactive codein some other files. So for that I'll say script and it's sourcesscripted Chase X. Ok. So one thing we needto add here is its type. So it's type is text Babel. Okay. Now we are donewith both of the Now what I need to dois just run this file. So now you can seethat hello world. It's showing that means we havesuccessfully compiler program. And this ishow the reactor uses working. So here you will see that I've writtenthe same program here. Okay, and this is the my HTMLfile and then this is what we saw in the up since we are donewith our first program. Let's now find outthe biggest fundamental concepts working behind it herefirst will understand. What is a j65 and how itis used then we'll learn about the componentand its different forms after this we'll find out what our props followed bythe states then we'll have a quick look on different phasesof components life cycle next. We'll learn about the reactevents and how they are triggered after this. We'll see what arethe references and keys and understand the importancein react finally will understand what is react routerand then we'll proceed to add So without wastingany more time, let's take upour very first topic that is the chase X. So J 6 times forthe JavaScript example. It's an XML HTML like syntax that is used by react thisindex exchange the ecmascript so that the examination tablelike ticks can coexist with JavaScript react code. This syntax is used bythe preprocessors to transform the HTML like syntax that is foundin JavaScript files into standard JavaScript objects with this fine insteadof just embedding the JavaScript into HTML. We can embed the HTMLinto the JavaScript as well. This makes the HTML code easy and also boosts of theJavaScript performance moreover. It makes our application robust. Let's now seehow this j6 can be used. Well, the first isthe regular use of j6, which we already sawin our hello world program. Next is the j6 nested elements. Now as you know, in react the render functioncan render only one issue. Element at a time. So in case you want to rendermultiple HTML elements, then you need to put theminside the one in closing tag. Let's see it how Okay. So let's try and addone more HTML element inside this render function. So here let me say I havea ch3 you can see as soon as I add this H3 tag. It's showing that heresomething is expected. That means it can't compile. Well error symbol is coming. So that's why we need to includethis inside one in closing tag. So I will be using div here. So let me say div. Okay, so I'll justcut it from here and paste it now inside thisthat I can add as many lemons as I want. So let me just use H 1 youcan use any tag you want. So just okay. So now inside this Iwill say And Eureka, I'll just save it goto my browser. Here you can see Eddie Rekhaand hello world. So this is how we can usemultiple HTML element inside. Rj6 code. So the next isthe specifying attributes. You can always makeyour code Beautiful by adding the attributes to it. Let's see it how so inside thiswhat you need to do. You have to create one variablewith the csis element. So here I'll saythat I have a variable. Let me name it Stylesand I will just say that in this the colorwill be okay. Let me say the color is red. Okay. So here I will add this Stylesas a style to my HTML element. So like this style he'll sayit will follow the Styles. So now the entire divisionwill be in Red. So just save it goto the browser and reload it. Now, you can seeeverything is in red. You can specify sidefor a single element as well. So you just It's just see that we have a statesto and here let me say the color is yellow. Okay, and I'll see my H1 tagwill come in yellow color. So I will say that it will follow the sideto just save it go back to the browser and reload. You can see the editora guy isn't yellow color? Okay. So this ishow our row attributes work. So next is embedding JavaScriptinto j6 as in normal HTML. We embed the JavaScriptexpression similarly here. Also, we can add the JavaScript Expressionsdirectly into the code. Let me show you okay. I'll go to the ID and I will just sayI'll take one H3 tag and inside I will say just some is something I'll throw insome random numbers over here. So let me just say save it go back and here itwill give me the sum. So the sum is 30. So like this we can use j6in different forms. Okay. So here we are donewith all the users of j6. Let's now moveto our next topic. That is the componentsince the beginning I'm saying that in reacteverything is a component. So now let's find out what actually this component isto understand this. Let's again go back to Facebookas you can see. This is a Facebook page. Now. This page is dividedinto various components. Like this is a component. This is also a component. And again, this is alsoa component like this. There are many more componentsover here since then react everything is a component and each componentreturns a Dom object. It results in speedingup the entire UI into various independent and reusable piecesto understand this better. Imagine the entire UI as a treehere the starting compound becomes the root and each of the independentpieces becomes the branches and which are further dividedinto sub branches. Now this patternkeeps our UI organized and moreover itallows the details. Changes to logically flowfrom the root to the branches and then to the sub branchesmoreover the compound can always refer to other components. Let's see how this is happening. Okay. So here I have one componentnamed my component. So let me just createfew more complaints over here for this again. I'll use the variable and letme name it as header. So here I'll call the reactornot create create class. So inside this again, I will createone render function. Now what I wantedthis render function should return me just wellHTML representation to show that this ismy separate component. So therefore I will justsimply write return and I'll put 1 h2 tagover here and I will say that this is hidden component Okay like this so I'll createone more component like this. So for that I'll just copy thisand I'll paste it up here and I'll changeits name to put okay and here it will say. This is foogtor competent. So now how I canrefer these components from my component for that. I just need to goinside the enclosing Tab and here I'll just say headerand moreover again. I'll can just say footerlike this save it go back to your browser and reload. So this ishow our components work. We can call one commentfrom other component as we have seen. Okay. I hope this thingis clear to you. Now. Let's go further in our Peabody. Okay. So here a valid react component can always acceptedsingle object argument and then producea reactive element. Now, these are calledthe functional elements as they are literallythe JavaScript functions as you can see. So here we are callingone handle click function. Now whenever this functionis called it will always return a 1 inch team representation. So that's why these are calledthe functional elements. On addition to this we can simply Definea competent through JavaScript as you can see here. We are creating one functionwhich is named prob demo. It is accepting one props and then it is returningone HTML representation. So this is how the componentswork moving further in this the componentin reactions can be in two forms the statefuland stateless components the stateful componentsare those components which rememberseverything it does whereas the stateliestcomponents are those components which doesn't rememberanything it does. So let's not discussthese components in detail. So first we havethe state full component. These are the core componentswith store information about this component statein the memory. Now, these componentscan change the states as well. They contain the knowledgeof the past current and future possible changesin state of the component in case there is a changein state they will always receive the informationfrom the Stitches components. These components are calledthe smart or active confidence. Next we havethe stateless components. These are thestate list component which always calculatethe internal state of a complaint. They can never changethe state moreover. They do not containany knowledge of the past current as well aspossible future changes of the state of a component these details components providethe referential transparency that is for same set of inputs. It will alwaysgenerate same output. The these combinations arecalled the dumb components now, I hope you havethe fear understanding about the component. So now let's move onto our next topic that is props. The simplest way of describingprocess would be to say that the functionsimilar to HTML attributes. These are the read-onlycomponents which provide configurational values thusby using the props. We can always pass datafrom Pain component to a child component wheneverthe component is declared as a function or a class. It must never change its propsall the Components are therefore called the pure functions. If you see this functionas I have seen in this demo, we have the function calledthumb which is accepting argument X and Y. So it's prop isto always return the sum. So whenever this functionis called it will never change it from in reactthe Only Rule we have and that we must follow isall react components must act like pure functionswith respect to their props. So let's find out how it's happeningwith the help of practical demo. Okay. So now here what I'll doI'll use the header and here I'll provide the prop. But before thatinside this header since we have to provideinformation from the parent to the child, let me say that my component isthe parent component and header isthe child completely. So from here, I will saythat header has a name. Let me say name islet me see Alex. Okay now What I'll do, I'll just copy and provideone more hedral prop. So I will just changeits name to else a Max. Okay. So now how we canprovide this information to child component for that. What we need to do here isI'll just use one H3 tag and inside this I'llrefer my component. So here I'll saythis dot props dot since I've given the nameso I'll say name here. Okay, here are we haveto create one division as well? Okay. So what I'm doing here is that I'm passing the namefrom my component from here from my companyto the header component, which is just printingout the representation. So this is how the propsfor whatever you give as input. It will always display the same. So let's just save this go backto the browser and reload. So here you can seeAlex and Max its print. So each time. The header componentis referred. It will print this element. I hope you are clearwith the props. Let's now move to our next topicthat is States. So what is the stateand how they can be a sign here in reactthe states are the heart or we can see the coreof react components though. Most of the component simplytaken props and render them, but they canalso provide States. These states are usedto store information. Nation or dataabout the component which can change over timebecause of user or system evens. You can say that the determine the componentsrendering and behavior and therefore the statemust be kept as simple as possible using the state. It leads to a dynamicand interactive components which adjust themselvesaccording to the changes. So let's now see how the States can be assignedwith the help of the demo. Okay. So since we have alreadyused the props, I'll use this putterto show the state now to access the state first. We need to assign One initialstate to the component because by default it statewill be set to null so for that I'll call one functioncalled get initial state. Auntie inside this class. I have two functions,so I need to separate them. So I'll put one calmover here inside putter. I'll say I have user and letme set its initial state to and say it Eureka. So it's the userinitial state is at Eureka. So now whenever we callthis user it will always display the at Eureka now, how can we referto this for this? What we needto do is okay now, I'll add one div. We were here you just cut thisfrom here and paste it and now here I'll sayI have one H1 tag and here I'll referto the state. So to refer to the current state what you need to callis this dot State and our element name is user. So here you'll see use them like this save it go backto the browser and reload it see so our user is eithera car to make it more clear. Let's go back to the and here I'll say user isEddie Reka morvay, you can put any numberof elements you want. Let me just say I have an idea. Also whose default state is 101. I'll save it andinside the cell say, okay here are we use one brick and then I will sayID is And again, I'll refer this thingwith the this dot state DOT ID. So now again go backto the browser and reload it. So here you can see user isin Eureka and ID's 101. So this is how we setthe initial state but as I have told you that we can changethe state as well. So let me just say that after some time these twoelements change their state. So in order to do that, what we have to do is we needto call one other function, which will automaticallychange its state after let's sayafter 2 seconds, it will change the state. So I'll callthe settimeout function and it will automaticallyafter two seconds. Let me see the two secondsit will change the state. So I'll write tooth seconds and after 2 seconds itwill call one function. So let me writethat function as well. Okay. So now inside this function,I'll call this Dot. It State inside, huh set state. So inside this state functionwhat I will say that my username should changefrom Eureka to let me say Swati and my IDshould change from 1012. Let me say 303. Okay. So let's now just saveit go back to the browser and reload this. So now you can see the user isand Eureka and ID swathi. Okay, let me just go backand I will increase it's time to let me changeit after 5 seconds. So here. Okay. So let's now write C. So here the user isin Eureka and ID swathi, but after five seconds, it will automaticallyupdate to Swati and 303. So this is how to react works. It will automaticallyupdate the Dom manipulations for us and because ofthis the applications become extremely fast. So this stage is mainly used if the component hassome internal value and moreover which doesn't affect any other component thenonly we can use the states. So I hope you guys are clearwith the state. Okay. So let's move to our next topic that is life cycleof the components. So react providesvarious methods which notifies Venice 33 of life cycleof a component occurs, and these methods are calledthe life cycle methods. Now these methods arenot very complicated. You can think these methods asthe specialized even handlers which are calledat various points during components life. You can add your own code to these methodsto perform various tasks when we are talkingabout the life cycle. The life cycle is dividedinto four phases. They are the initial phase the updating facethe props change phase and the last isthe unmounting face now each of these ways containsome life cycle methods which are specific only to them. So let's find out what happens during eachof these phases. The first phase in the components life cycleis the initial phase or the initial rendering phase. This is the phase when the componentis about to start its life and make its waytowards the door. So in order to do so all these methodsare invoked in order. So first order method we haveis the get default props. This method allows youto specify the default value of this dot props. It gets calledbefore your competition. When does even created or any props from the parentour past the next we have the get initial State now this method allows youto specify the default value of this dot State before you're confidentis created just like the previous methodit took with called before the component is created. So next method we have is the componentwill Mount method now. This is the last methodthat gets called before your componentgets rendered to the dog. There is an importantthing to note here. If you were to call settreat method inside this one your component won't re-render. Then we have our render method. Now. This is a method youshould be familiar with every comment must havethis method defined and this method is responsible for returning a singleroot HTML note though. This single route may havemany child note inside it. So if you don't wish to renderanything simply written null or false then we haveour final method in this phase. That is the component did But that this methodwill get called immediately after the components renders and gets placedon the dorm at this point. You can safely perform ain't on quitting operationswithout worrying about whether your componenthas made it or not. Now one thing you needto remember here is that except for this render method all of these life cyclemethods can fire only one. So this concludes our initial phase then wecan move on to our next phase. That is the updating face. So after the componentsget added to the Dome they can potentially updateand re-render only when a prop or a state changeoccurs during this time a different collection oflife cycle methods gets called. Let's see what happens when a state changes whenevera state change occurs. The component will callits render method again. Now any component that is relying on the outputof this component will also called a render function again. Well, this is done to ensure that our compoundis always displaying the latest version of itself. So when a state change occurs, all of these methodsgets involved in order. So here our first method isshould comprehend update method. Sometimes you don't wantyour company to update when a state change occurs. Now this method will allow you to controlthis updating Behavior. If you use this method and return a true the componentwill update else it will skip the updating part. Next we have the componentwill update method this method gets called just before your component is about to update one thingyou should note here is that you can't change your stateby calling this dot set state from this method now again, we have the render method. So if you didn't overwrite the update by a shouldcomment update method the code inside the render methodwill get called again to ensure that your componentdisplease itself properly. Again, the last methodwe have is the component did update method. Now this method gets calledafter your component update and the render methodhas been called. If you need to execute any codeafter the update takes place. You can put itinside this method. So now let's move onto our next phase. That is the props change phase after a component has beenrendered into the tongue. The only other timethe component will update is when a prop changesits value now, this is when all these methodswill be called the only method that is new here is thecomponent will receive props. If you want to compare we can goback to the previous slide and you can see we have the should componentupdate method component will update method render methodand component did update method and in next phase. We have should complete updatecomplaint will update render and component did update. So here only this methodis new now this method returns one argument and this argumentcontinues the new prop. That is about tobe assigned to it. The rest of the life cyclemethods behave identical to the methods which we sawin the previous phase. So this is how the props changephase is completed now move on to our last piece. That is the unmounting phase. Now. This is the phase when the component is destroyedand removed from the dog. There is only one lifecycle method over here. That is the componentwill unlock method. You can perform any cleanuprelated tasks here such as removing the even listenerstopping the timers Etc after this method gets calledyour component is completely removed from the door. So here we are donewith all the phases of the components life cyclealong with their methods. So now let's move onto our next topic. That is the evens. Well, if you guys are familiarwith HTML and JavaScript, then you might know that what are evils in reactor also even sawthe triggered reactions to specific actions like Mousehover Mouse clay keypress Etc. Hi, I'm leaving these evenczar's very similar to handling the theevans and dog but here aresome syntactical differences in react the events are namedusing the camel Keys instead of using the lowercase moreover. In fact, the even surpassed as functions ratherthan the strings here the even document containsa set of properties which are specific to an event. What I'm trying to say is that each even type containsits own properties and behavior, which can be exist onlyvia its event handler moreover. In other you eyes. Well even Handleris assigned for each event, which leads to morememory consumption and also makes our work tedious. But in react the event handler is not attached to the Domelements directly rather. It only uses the route evenHandler which is responsible for listening to all the events and then calls the appropriateevent handler as per need. Let's now see how the eventis created and triggered. Really? So to make you understand I'llbe using one demo code here. Let me show youhow it should be looking. So I'll show you how the events work by the helpof this example here. I have one Bulland one button with me. So clicking on this buttonwill turn on the bulb and again when we click it will turn off. So, let's see how thisis happening for this. Let's go back to our code. Okay. So now what I'll do, I'll leave this filelike this and I will create one more j6 file. So here I'll see evenscript dot j 6 okay. So now inside this filewhat I'll do, I'll create one variable and letme just say its name as well. Okay. So again, we'll callfree app dot create class and inside this will first we have to mentionour render function. Okay. Now inside this render function, I will say that I have one imageand just close it and I'll say that it's comingfrom some source and name that Source later then wehave one button over here. Okay, so I forgot to put itinside the division so here too. Just got to it and piece to it. Okay, so it's final and now I'll adminbutton over here. Okay here I'll say that this button on clickingthis button something happens. So what will happen? I'll write it later for now. Let me just name it as quickly. Okay. So here we haveone button clicking on which it will do somethingand here is one image which will be shown. Okay. So here we are donewith the render function since we want on our HTML page. We want one buttonplus one bulb. So we here we have describedboth of the things now, we have to set upan initial state for our bulb status. So let me say get initial state. And this is a function and sinceinside this bulbs class. We have two functions. We have to again separate these and inside this wewill say that okay, let's return the status. Let me set the status first. So I will say the bulb status isby default its false. So now inside this I have to add two images aswell because on the page, we are displayingthe images for that. I'll go to my downloads. Okay here I have alreadydownloaded two images. I'll copy them come backto my project and here I'll say that I need one directory and I'll letme name it as image. Now inside this I'll just paste them now here you can seeI have both one and two in each. So this is the initial state, but now we wantthat on clicking this thing this buttonsomething should happen. So let us createone function to tell what exactly will happenon clicking the button. So for that I'll say that we have onefunction name switch. So this is a functionlooking super ated. So now this functionwill change the status from false to trueand true to false because we want on each clickthe status should change. So here what I will seeis this dot set State. Okay inside this I'll saythat my status should change. So for that I'll saystatus status should always change from whateverthe current state is. So for that this dotstate DOT status, And we want each timethe state to change. So for that I will say not sowhatever the current status is, it will always change itto the opposite one. So if it is true,it will change it to false. And if it's false itwill change it to true. Now. We have to providethe source for this. What I need to do isinside this render function. Okay. So here we have to putthis code inside the return which I forgot. Okay, return since returned. It will return asthe HTML representation. You must remember this thing. Okay. So now inside this one what I'll do I'll seeI have one variable and I'll say disp bulbmeans display bulb. So which bulb will it display? So here I will putthe sources along with a conditional operatorwhatever the condition is according to that. It will display the bulb. So I'll say this dotstate DOT stay. If the students are false,it will show the image one. And if it's true, it will return the imageto so for that I'll give the path of the imagethat is image to dot PNG. So this is the folderwhere am I images? And this is the nameof my File versus when my condition is false. It will show image / first imagethat is image / paint. Okay, just save it. Okay. So like this thisis we are changing the image over here. So here I'll saythat image source is dispersal. So depending on the condition it will automaticallyretrieve the image. Okay, here we are done. So here what is happening depending on the conditionthe image will change but now we have to tell it also that on clicking the buttonyou have to do this thing. So for that here, I'll say that this dot switch that whenever I clickon my button then switch function should be called so forthat I have written this dots which here we'll callthe react Dome dot render. Okay, and inside this else saythat grab this bulk component and display it over the HTML pagewhose ID is content. So here we are done. So see if this go backto the HTML file and tell it that rd6 file isnow even script 36. So just save this now and run itnow you can see we have a bulb along with a buttonnow clicking on this will turn this on and again if we click itwill again turn off. So this is how the events are createdand react so now I hope that you can createyour own evens. So let's take up our next of it that is riffs riff standfor the references now in react a parentcompound can interact with its style componentonly through props. So if you wantto modify the child, you need to re-renderit with the new props. This is the typical data flow. So in case you want to modifythe child without following the typical flow, what you need to do ismake the child and instance of the react component or the Dom element in such casesonly you can use a reference. Now this the Riff attributemakes it possible to store a referenceto a particular react element or component written byits components render function. Now this can be valuable. When you need to reference it from within anothercomponent render function as you can see here. One of my render functionis written in one reference, which is then used by anothercomponents render function. So let's now seehow this works practically. So here I'll go backto my code here. What I'll do, I'll create one more script filebecause I don't want to confuse you guyswith all these stuff. So here I'll createone more file and I'll just nameit as a ref script. Dot j. So what I'll do here,I'll create one variable. Let me name it asa ref component. And again, I have to createone class for this. I'll call reactdot create class. Okay. So inside this I'll beputting my functions. So here first of all, I have to createone render function. So this render functionwill always return me something. Okay, so here let me createone division first. So what here I'll do. I'll create one input text boxalong with a button. So inside this text box. You have to type your name, which I'll take and displayit back to the webpage. So how we can do it with help of reference will seeso first let me say that I will usewhen h2 tag here and I'll see the name. So here inside this Alcreate an input element. Okay, so it's type will be'text only and and next. I'll create one button for this. Let me see. Click that's it. And here whenever weclick this button, something will happen. That is it should retrievethe name from this input box and then displayed for that. I'll say that on clickit will do something. So for now weare done with this. So how the referencesare created now so here whatever we get as input. I want this to referby this method so for that I needto create one ref here. So here I'll say that we have a riff and in thiswe have to take the input. So from here, we'll grab the inputwhatever the value with the user is passing. It will take that input and it will be thenreferred by the function which will be calledon on click. So here I'll justname this reference as let me name it as input demo. So let's saythis Dot Input them. Okay, and it will be referredby the input like this. Okay. So now let me say that. Okay, let me putone brake function over here so that this input text boxand the button should appear in different lines. Okay. So here we are donewith the render function. Now, what we want to do is wewill call one function over here that whenever withthis is click. It should retrievethe value from this thing. So for that I willcreate one function. Let me say display function. So what this functionwill do whatever the user gives that input. It will take the name and it will displayto what the HTML page so for that I needto create one more. Let me say I have H1 tagover here and I'll say hi to whatever the name is. So here I want todisplay my username. So for that I will createone span over here and I will provideone ID to this. So I'll just say this name. Okay. So now what my display function will do it will takethis input value and it will displayit on this area. So for that let me createone variable and set name. So here are any here nowthis function can refer to my reference. So to refer this will see this dot whateverour reference name. And as input demo, I'll just copy thisand paste it here and then I'll saythat receive its value. So here we are done. So one thing here which we need to do is we haveto display this name whatever. The value is in name. We have to display it over here. So for thatwhat we need to do is as you know to display it on the web page we haveto use the inner HTML and for that we haveto get the span by its ID. So get element by ID and the ID name is displayname this pool name and then we'll say dotinner HTML and here we want to display the name. Okay. So this thing is done here. Now again, since we need to tell reactthat you have to render this drift componentover the content area. So here call the reactDom dot render inside this you have to call ref component and again get the dividendby its ID so document. Dot get element by IDwhere the ID is content? Okay. So here we are done. Just save this file. Okay. No here. We are still leftwith this thing. We have to tellthat on clicking. You have to callthe display function on each button click. This display function shouldbe called so now we are done. So we'll I'll just save thisand I'll go back to the HTML and a little that rj6 filehas again changed and now it's like rough script. So save this and run this so here you can seethat I have named and I have one button and then it says hi. So as soon as I putmy name over here and just click itit will say hi spot. So this ishow the references are used. But one thing youshould remember is references should be used in the Darr needonly so references can be Used when you are tryingto manage the focus or text selectionor media playback, then it can be used while triggering the imperativeanimations and moreover when we are integrating witha third-party Dome libraries then also we can use the ribs. So I hope now the refsconcept is clear to you. So let's take up our next topic that is keys willkeys are the elements which helps react to identifydifferent components uniquely. They are especially helpful when we are working withdynamically created components assigning the key valuewill help you identify the components Unity even after they have changed. As you can seefrom this diagram here. We have two componentswith different key values one with key 101 and onewith key one or two. Now these are in itfor the first time. So the reactor will render themwithout any problem. But next time when we try torender them hear the complaint once key value is same whereas comparing toski value has changed. So now the reactor will renderonly the second component not the first one as the firstcomponents Chi is sick. So here the react will thinkthat as the key haven't changed. So the element is same sono need to render this one and it will go aheadand render the second component. So this is how the key worksin react now finally we come to our last topic that is router in react routeris a powerful routing library that is built on the top of react frameworkusing the router. We can quickly add new screensand flows to the application. It keeps the entire URLin sync with the data. Being displayed inthe web page moreover. It provides us someof the major advantages like it can easilyunderstand different views of the application. It can restore any state and view of the application just by using a simple URLalong with this it can efficiently handlethe nested views and resolution withreactor outer the state of the componentscan be easily restored by the user himself justby navigating backward or forward moreoverby the router. We can maintaina standardized structure and behavior of the application. Also, it can doimplicit CSS transitions while navigating only so herewe are done with our router. Also. I hope now you understand aboutreact.js thoroughly what it is how it is implemented and what all thingswe can do with it. You know now so I think youguys are ready to create one application with reactorsthus without any more delay. Let's now find out Code behindour Facebook comment application which I used in the beginning. So if you guys remember I showedthe demo of this application. So now we will seewhat are the codes which are workingbehind this application. Okay guys, so herewe are with our code. So to save time I have already created HTMLthe PHP and the CSS files which all I am going to usein my application and moreover. I have already downloadedthe pictures also so that I can display the profile pictures if youremember from that application. Okay. So this is our HTML file. I have included the dependencieshere and I have told that I have one scripted. J6 since I'll be namingmy 3658 a script only and here I have addedthe CSS style sheet as well. So now next step what we have to dois create a j6 file. So without any delay,let's get started. So inside this as we were doing earlierwhere create one noscript GSX. Okay. So now inside this fileI'll be creating some components along with their functions. And these all componentswill be doing some or the other work. So here first, we'll start off by creating the base meansfirst really create one wall in which all our commentswill be posted for that. I will create one componentnamed Wall form. And then inside this Iwill be putting some functions like get initial State meansto set different states. I'll be setting different states inside this and then finallyI'll use one render function which will be displayingone text area. So without any delay,let's quickly start. Okay. So here we are donewith our first component now, let's move on and create one another component and letme just name it as where comment form. So now what thiscomment is doing that it will accept all the new comments and it will atthe back end process them and integrate themwith this wall. So for that again will setthe initial State and then tell that how many casesit will go through and then we'll put itto the render function. So let's quickly do that. Okay, so we are done withour second component as well. Now. Let's move on toour third component. That is where let me see. How meant grid. Okay. So now this componentwill be taking the comments and then it will link themto a particular user as specified for usersin my PHP files. Now, whichever the user will add the comment itwill take the comment and it will just integratewith it at the back end. So for that what wehave to do is again create the class and putsome initial State and then give a render functionto it and just add some methods in order to integrate them. So let's proceed. So here as you can see in this range of functionwill provide one division in which we will place our comments alongwith its related profile pic. So this is how weare integrating the comments along with the pick. So now we'll createanother component and now let me namethis as comment block. So now this commentwill be displaying the comments along with its userin the in order. They are inserted like in this what we are doing we arepresenting one representation. This component will be taking inthe comment and integrating it with its related profile pic. And then this block what we'll do it will displayedback on the HTML page. So for that, let's see. So now we have donewith our comment block. So since this component is done after this will createone more component and what this componentwill be doing is it will be responsible for updatingour comment wall like whenever a comment is deleted or any comment is addedat that time. This component willget activated since we are updating the ball on this. So let me just nameit as wall update. Okay, so I hopeyou can understand what's going on. So let's just quickly create this component and seeinside this complaint. We will have some functionsand along with that. We will have the render function which will keep on updatingthe HTML representations. Like whenever the comments areupdated on that is above added or deleted at that time. It will assign the particularprofile pic and we'll link it with the computerand then displayed. So, let's see how it's doing. Okay. So here we are done with our update Paulupdates and then ok. So here we will createone more component that is wall feet. And now this componentwill be responsible for maintaining allthe comments on the wall. So whether we areadding the comment or we are deleting it from there this componentwill Rend it accordingly. So let's just get on it. Okay, so finally I will createone final component. So this will be the component which will be triggeringthe render function from this component dressed. All the componentswill be triggered. So basically thisis the component which will be responsiblefor our view. So let's get startedwith this one. So this is our finaland mean component. So here will tell react at first you have to renderthis wall container. Then this wall containerwill call the wall feed. Okay? So this isour wall feet component. Now this Wall Street will in return then itwill call the wall form and wall updates likethis internally one component will call another component and this will buildup our whole view. So let's just quickly renderthis wall Contino. So for this we have to callthe react Dom dot render and now inside this will tell that you need to renderthe wall container and you have to put itin the place of container. So here we'll seedocument dot get element by ID and let mejust cross take the ID. So IDs continuejust copy this one. And go back and pissed finallywe are done with our whole of the reactive code. So there is nowhere no errors. Are there I hope yeah, okay. So here I'm on my browser. So what I will do Iwill just say Local Host. Okay. Look I will host its cheesy081 and my application is react. Yes. So, okay, so you can see that my application isup and running. So let's just test it outwhether it's working or not. So I'll say hi. Yeah, it's acceptingthe comments. I can delete my commentand let me try replying so we'll say hello. So as you can see our application isperfectly working. So I hope I was ableto make it clear how it's workinghow the codes are working. So now I will concludethis tutorial here. Hello everyone and welcometo the node.js tutorial from at Eureka. I'm Ravi. Juelia, and I'myour trainer for today. Let's check outthe agenda for today. So if we seethe agenda we would see that what node js is you'll seethe node js architecture. We would see whatnode.js package manager that is npm is node.js modules. What is a package.json filethen we'd go more into node.js Basics, which is any languageBasics that is there. We will also moveinto the file systems. There is an f smodule in node.js that would enableus to read file and write files on our server and then there isan events module in node.js there is alsosomething called HTTP module and there is alsosomething called Express that we would be going for whichis a node.js framework. So at the end we would be goingthrough the entire code and we'd be goingthrough a small demo as well which would be somethingof a mix of all the Yes Concepts that we go forward. So let's go ahead and seewhat node js is actually so if we speakabout node.js it's a powerful JavaScript frameworkor I might say it's a runtime where you can runJavaScript on the console. It is developedon Chrome's V8 engine. So if anyone doesn't knowwhat a V8 engine is, let me just tell you what it is. So if I check out the V8 Devthe official website of chromes V8 engine you would see that it is an open sourcehigh-performance JavaScript in webassembly enginewritten in C++ and you know moreor less this is the engine that runs on the Chrome browser. So you would see that whateveryour Chrome browser understands. It would be the same thingthat node.js also understands. So the creator of node.jsthought that okay. This is an open-sourceJavaScript engine. Why not Implementthat in a platform which enables you to runJavaScript on the server. So this is the reasonwhy node.js understands. So that is one thing that we would liketo also keep in mind. So it's somethingthat runs on Chrome's V8 engine and it compiles JavaScriptnatively into the machine code that is all because ofchromes V8 compiler that we have and it is basically used for creatingserver-side web applications and also Network applicationsactually so mainly node.js is used for and basically if it is a data intensiveapplication node.js is something that is specificallymade for that. Let's see how that happens. Basically if you talkabout the features of node.js it is open source, it is simple and fast itis asynchronous highly scalable. You would face no problems in scalingyour node.js application. It basically works on something called a microservice architecture as well. And it facilitates that microservice architecture really. Well, it isa single-threaded model which means it isnot resource intensive and yet it is fast, you know yet it allows thingsto be done in parallel. We'll see. How that is done and thenthere is no buffering. Basically, there is no waitingas far as node.js is concerned and that is because ofa concept in JavaScript, which is called event Loop. We'll see more about thatas well and it works on so many platforms. So that is some briefof the feature. Let's see node.js architecture and before goinginto the architecture of node.js we would also like to seethe traditional architecture. So traditional architecture if we speak about traditionalserver architecture is basically where every client requestis managed by separate threads. So there is a multi-threadedmodel going on in normal server architectures like Java, for example, it'sa multi-threaded application or a multi-threadedset up altogether. So where your web applicationruns on multiple threads and various client requestsare processed parallely now, there is nothing to takeaway from this model because it is really goodand it has been working throughout years when Java isat this point of time. Java is actually oneof the best language. Is and secure languagehas to be programmed in. However, this is resourceintensive because you can see that there are so many threadsgoing on in parallel which means your serveror your machine as should be something which is capable of runningthese many threads. However, if you talkabout node.js it only runs on single thread and still it processesrequests in parallel. So one thing that I would alsolike to clarify here is in the backgroundor maybe under the hood if you may say no just doesn't processany requests in parallel, but it goesthrough an event Loop where once the request comesit goes into the process and node.js doesn't wait for the outputof the request to come in while it takes inthe next request. So as and when the first requestfor example gets the output it would just respondfor the output or with the output tothe respective client basically, so, you know in the background or under the hood itis basically running only one thread, which is not resource intensive and At the same timeprocessing requests from so many clientsand it provides a virtual feel that everything isrunning in parallel, but everything is not so that is all because ofevent Loop that is going on. So that is basically thearchitecture and then we talk about something very importantas far as node.js is concerned which is callednode package manager now, it is called npm in short and it was primarily knownas node package manager, but nowadays it is not knownas node package manager because it is doingso many things then package management is doingso many other things as well. We'll see what it is. So if we talk aboutthe official definition, it's a package managerfor node.js packages or modules, which has been added asa default installation from node.js version6 or 0.6 onwards and then it's stuck. It is already there in any installationthat you do in node.js if you are a Java programmer, you can relate this with Mavenand if you are a PHP programmer, you can relateit with composure. So it is the same. Mechanism where npmhas a repository of so many libraries and then the repository serves whatever the packageyou need for your project. And if we talk aboutthe features it provides and hosts onlinerepositories for node.js which can easily be downloaded in our project usinga command line. So it provides a commandline utility as well. And it also allows youto manage the repositories or the versions of librariesthat your project may use. So we'll seewhat are the versions and what are the librariesthat we are talking about. So the library is that I'm talking about when Isay libraries it is just node.js modules so node.js modules or if we talk aboutthe module system. There are core modules. There are local modules and thenthere are third-party modules. So code modules are the ones that are actually availablein the default installation of no chairs. You don't haveto program anything. You don't have toinstall anything else. Node.js to get the core modules working fewof them are listed in here like HTTP URL query stringwill be using them and there aresome others as well, which we'll be using todayand then local modules. It is somethingthat a programmer builds. It could be a function. It could be an object Panything the programmer builds and the programmer exports so that other team members are other programmers can importthat module and use them. So it's something that a programmer would buildlike a custom module and then third party module. This would be installedthrough the npm repository. So if we speak about npmin this particular case, let me just also openup the npm website. So it is basically n PM J s.com. And you can see that it hasso many repositories. There are so many companiesthat it is serving and all there are so many repositoriesavailable as well. Let's just searcha few repositories in this particular case. I'll search one of them. If we talk about reactyou might have heard of react react is one of the repositories itis available in npm. You might have heard of Angela. That's also one of the libraries that is availablein the npm repository. You might have heard of jQuery. You might haveheard of bootstrap. These are like namingjust a few of them. There are so manyso many repositories that are available even express that we are going to use isone of the libraries that is available in this particularproposed ettore of nbm. So you can see here that Express is oneof the libraries that is to be used. So we'll be installingexpression C. By the way. This is the way you installany third party library from the npm repository. Alright, so that is the 3rd party modules and youwould be using npm install or in PMI to be in short toinstall this particular poetry. Now, let us see the package.jsonfile package for Json file in node.js is the heart of the entire application isbasically the Manifest file that contains the metadata of the project nowat this point of time. Let me just create a node.js. Project and seewhat this package dot. Json file looks like and then we'll analyzewhat this file actually is. So let me just createa folder here at Eureka and in this folder. I'm willing to you know,initialize a node.js project. So let's say I'll callit nodejs demo, or maybe I'll call ittask manager even better. We'll try to create some of the task managerfunctionalities in here and it will be an API that will be creatingor a web service that will be createdwill see what it is. So in this task manager, I am going to initializea node.js project. And in order to initializea node.js project you need to have node js installedin your computer, which means you have to goto node.js dot org website and you can downloadthis LTS version. This is a currently releasewhich is basically experimental. It'll have allthe latest features but it is prone to beerroneous at some time. So, you know generally for You don't use this onebut you use this one but say if you want to checkout the new features, you can also installthe current release but will always go with the LDS and I already have thisinstalled now clicking on this will allow youto download the MSI file that is the setup fileand then you can just double-click on that set upin just install it on Windows and in Mac as well. The setup is really simple and in Linux as well probablywill give you a tip file. For example, if you're goingfor a boon to so the setup of node.js would bereally straightforward. But after the setup is done, what you have to dois you have to just check whether node.js is installedin your computer or not. And you'd be checkingit this way node - we will give you the versionof node.js and you can see that I already have it installed and I have the version 10.15point three that is the LDS and then I'd also check npm. If you recall we sawthat npm is something that comes in inherentlywith node.js all together. So we'll be going for npm -be that will give you. Npm version so we're all set in we're all ready to go. So let's go for creating orinitializing a no chase project. It is somethinglike this and p.m. In it dot which meanscurrent directory. So if we just hit enterI think dot is something that is not to be done. Right? So this would askyou certain questions. Like what is the package name? Let's say I want the samepackage name as task manager. I want the version 2 B1. Okay, the description let's saythis is a task manager project. Right entry pointwould not be significant at this point of time. So we'll just keep it as it is. No test command asof now no git repositories. I'm not going to even commit that to a git repositoryand no keywords as well author. I can say at Eureka and license no meaning asof now for a license because we are not goingto make it public or anything. So it tells us that is it? Okay and also tells you that it's about Rightto this particular file package of Chase on insideour task manager folder. So which means after I say, yes, there is a possibilityof this being written into a file called package.jsoninside my project. So let's go for hitting enter. Let's say yes, and if I nowcheck out my folder you see that the package.json file is in let's just openthis up in our editor. You see that here is the package dot Jsonavailable with every information that we provided. Now. This is a very basicpackage dot Json. There'll be so many thingsinside a package.json file and a normalor a real world Baxter. Json might looksomething like this where there are somany things like the name of the project isthere then there is something called version aswell description of the project. What is the starting point of the project which isHumane script to run first. There are certain scripts. We saw that we didn't provideany test command and then there are certain engines. What all tools do youuse to run this project? Who is the author? What is the license? There are certainthird-party modules that we would liketo have you can see in this particular example that there is Express that is there asa third-party modules which will be using and thenthere is Dev dependencies. Like when you gointo a development environment, like for example our computer, they'll be certain dependenciesthat will be there and that will be testedinside the dependency. Then there is repositoryrelated information. Shouldn't which wedidn't provide actually if you want to see what are the bugs and allthere has to be a separate URL and the homepage. So that isyour package.json file which got created. By the way, when we initializethe node.js project and you can also manuallycreated but it's better that we go for npmin it as a process. So now let's gofor node.js Basics. So if we talk about Basics, it's like any languageBasics and the main thing that we need to check out asa basic is the data types. So there are certainprimitive data types. There are certainabstract data types, like non primitive data type. So primitive data types asstring number Boolean null and undefined abstractdata types are object array and date to namea few by the way. There are so many others but these are to namea few so say for example, if I create an application, let's just create a stringas a variable and let's see how that works. So, let me just createan app dot JS file and in this I'llcreate a variable and I'll be very specific. I'll say first name and I'll say firstTo be and Rica. This is a variable that wedeclared and if I want to show this variable in my console, I'll just do consoleDOT log first name. So when I do thisthe main perception is basically if I want to run this app to JS. I might have tocreate an HTML file where I might have to includethis app as a script file and then I might haveto execute the HTML file and open the console to seethis particular output. But if you have installednode.js on your computer, which we have youwould actually be able to run this particularapp dot JS really easily. Let's run this one for that. I would have to gointo my project. Let me just clearthe screen and run this one and really simple to runa node.js application. It's simply node. And the file name that is app dot JSand you can see that it displaysthe first name in my console. So whatever I do as console DOT loggets displayed in my terminal that is something that Iwould like to keep in mind. And remember this is a string that we have createdbut there is no concept of a strict data type. So basically the first namecan also be something like this. The first name can be reassignedto let's say a number and that will not bea problem for JavaScript. That is the core nature of JavaScript isnot strictly typed. So that is something that I would also likeyou to keep in mind. So there are so many data types that are available whichwe have created a string and then there areso many others. This is how you createa variable that we already saw and then there are operators. Now as I say likethere is something that is already similar to all the other programminglanguages variables are one of them operators as well. However, there is one operator that is pretty unique and thatis the triple equal to sign. So say for example, if I go for somethinglike this bar, let's say h 1 is equal to 30and for H2 is equal to 30 and then let's sayVAR result is equal to H1. Double equal to h 2 I'm using this double equal to similarto any other binary operator like I might gofor plus and similarly. I'm going for double equalto now this is because it isa comparison operator. This would returneither true or false and this will get storedinside the result variable. So this time I know that you might have guessed itit would be returning as true. And if I do the result if I go for console logof result and if I execute this after chase, you see that itreturns as true now if I go for a string, all right, and when I declared a variablein the previous example, we saw that there isno strict data type. So this would not actuallycheck for the data type. This will just check the valueand though it may seem that it should give us false. This would give us trueand the fact is like JavaScript doesn't careabout data types. So if say for example you wantto also compare the data types along with the value instead ofdouble equal to use triple equal to And that way thiswould give us false. There is so muchgoing on inside or in this particular two examplesthat we have but for now, you can remember that double equal todoesn't compare the data types while triple equal to alsochecks the data types, but then again there is somuch going on under the hood, which it's not in the scopeof this particular session, but just keep thisin mind as a unique operator that is available for JavaScript specifically and then thereare certain other languages that might have these operator. But JavaScript is the onethat came up with this. All right. So this is one thingand by this time you might have got an idea onhow we run an application or how we run a file in node.js. So this is one other thing that I would alsolike to mention where functions are createdsay, for example, if I have a function to createlet's say function say hello and I pass in name inside it and I return let's sayhello plus name a plus here isa concatenation operator and that would return Nameour Hello message with the name whatever we have lastingso I can do this like console DOT log say helloand let's say hello to Ravi. All right. So if I runthis particular file, it will give me whatever outputwe expect which is fine. Now one thing I would also liketo tell you is in JavaScript. There is a provision where you can createa function without a name an anonymous function, which is also somethingthat JavaScript came up with a function with no name. And if this is the case thenhow would you call the function so for that you can do somethinglike this VAR say hello is equal to a functionsomething like this. And then there is somethingRemains the Same function gets called as as normal. What we have done is wehave created a variable and inside this variable. We have assigned a functionrather than a value. So and then we are callingthe variable as a function. So again, if I run this particular codethe output would be the same just keep in mind that function herecan be an This in JavaScript. All right, and thenobjects now object. There are two ways youcan create objects one is through object literals. Like were let's saya student is equal to a constant object which has let's say name Raviand email robbery at gmail.com. For example, rightand then we can do a something like this console DOTlog student dot name, right and thenstudent email and so on and that would displaywhatever the name is basically so an objectdot property can be done and then there is a Constructorpattern as well available, but it's okay if we don't go for that but thenthere is another pattern which uses object Constructorto create an object now going into node js core modules. One of the modulesis file system. That is the fs module FS module if you want to includeor any module if you want to include you gofor this syntax a variable is equal to require. And the module nameand this would be something like this for example par FSis equal to require FS. Now for this FS module you don'thave to install anything else but node.js has to be there and which is there andif is module would be available. It's a core module in node.jsso let's say for example if I have a filecalled hello Dot txt, and it has some data. All right, and if Iwant to read this file, I'd be able to do thislike FS dot read file and it asks me the pathof the particular file. So let's just give the path. Basically I can trywith the relative path first so it will bebasically Hello dot txt. Let's see what it getsand the second argument that we need to pass isthe Callback function so node.js or any JavaScript platformwould work more on the basis of callback function. That's how it createsthe virtualization of so many things workingat the same time. All right, so, I would go for a callbackfunction and this function Anonymous function would gofor two arguments one is error and one is data. Let's see if there isno error then we'd go for logging the datainside the console. Let's see. What data we get. All right. So if I run this file now, hopefully I shouldget the contents of Hello dot txt file. Let's see. Here, I don't get the content but I get something calleda buffer that buffer is basically some container that contains raw dataout of this buffer. I can get the string basically. So let's say if we go for buffer dot tostringwhich is a function which would convertthe data to a string. So now it will give mewhatever the content hello world has and similarly if I for example have to writesomething inside a file. Let's say if I want to writesomething inside a file and then once the file is writtenI would like to read out the file we do somethinglike this FS dot right file and write file would againgo for the path. And I would be goingfor the data as well. And the data is somethinglike something like this and once I go for the data datacould be any data type by the way could be Booleancould be object could be any data type and then I gofor a callback function. The Callback functionwould have something only one argument here, which is errorif there is no error like if no error then Iwould like to read the file right so then I can gofor f s dot read files. I can just take this whole thingand I can put it in here. So what I have done is Ihave written something into the file and if there is no error afterwriting whatever I have written, I would be trying to readthat file and in here if there is no error Iwould like to display the content the hopefullythis should give me how are you or maybe let's see whether it overrideswhether it appends. Let's see what happens. If I check out this youcan see it gives me how are you and if I gointo Hello dot txt, you can seethat it has overwritten the particular contentthat was there before. So this is an f s module demo. This is how you would be readingand writing files. I might like to also try and read and write Jsonin some Json file that might actuallygive me a feel of an API that is being created. Let's see how that goes. Then there issomething called events, but before going for events, I would like to createa server first. So let's just createa server and you know, the events are basically something that wewould be working with where we would beemitting certain events. And then we'll be listeningto those events. Let's see howthat whole mechanism works and how the event handlerswould work and all but before events. I would like to go into creating the serverthrough the HTTP module because server is alsoa network application, which is something that node js would enable usto create so Create a server through the hdp modules and thenI'll come back to the events. Let's see how that goes. All right, so let's just get ridof this FS related code and I will again gofor the fs code in sometime. I'd also get ridof the Hello dot exe. I don't need this. Right. And then what I'll do isI'll create a server in here before the server. I'll go for VAR H DPis equal to require HTTP and then there is something which is really simpleto create a server in node.js as opposed to allthe other languages. So is something that a programmer would createso say for example, if you compare no TSwith JSP or Java, there is TomcatApache web server that is already available. If you compare notes aswith.net there is is server that is already available. If we talk about PHPthere is Apache server that is already there compiled and available in node.jsthere is no server. So the conceptof node.js being a server. It's something that is not truein node.js it is just a runtime which enables us to runJavaScript on your machine so that you can create a server if you want toand creating a server. It's not a big dealin node.js this is how you create a serverHTTP dot create server. That's it. And I'd save it. A variable called serverand my server would listen to the port number3000 the server Dot listen 3000. Alright, so this is whatyour server would listen to and if you want you can also providethe hostname here which is by default localhost. / if you want explicitly can provide Local Hostas the host name. So your server would be listening to Local Hostand 3000 and after it, you know starts listening. I'd also liketo provide a message and again the Callback function or an anonymousfunction would come into the picture so function. So log will go for our server startedon Port 3000, right? Okay. So what have we done? We have simply createdthe server by HTTP create server and we're listeningon port number 3000. So that is what it is. And then at the end weare displaying some message on the console. So let's see one thing that you'd notice isin the other programs. The application actually ended like once you are donewith the whole program. You see that you getthe command prompt back. But in this case when we are listening the serveris constantly listening to the port number 3000. So the application would not endin this particular case you may have to end the applicationforcefully by hitting Ctrl C. So, let's see now if I run it you seethat server started on port number 3000 andthe application is not ending. All right. So if I go for say localhostport number 3000 Something that might happen you see here that the request is sent to the server the serveris not responding because we have notprogrammed our server to respond with something. So here the serveris not responding while the server is running. All right, so if I stop my server youwould see it would tell you that the site can't be reached. So basically what that meant was previouslythe server was running. So if I for example runthe server this would again let me just open up localhost 3000this would again start to load but the messages the sidecountry reached won't come because the serveris still there. The site is Rich with the serveris not responding to us. So let's program our server so that it respondsto us in which you go for a callback functioninside your create server method and this callback functionhas two things request and response to arguments. And if I want to send a responsein this particular case you go for response dot end. All right, and Ilet's say server works. That's the messagethat I want to send. All right. So what this would dois it would send a message to your browsersaying server works. So let's just take that message. So for that because I have changedsomething in my app doj's I might have to stop this and Imight have to restart my server. So server listeningon Port 3000 and if I now refresh you see that it gives methe message server works. So this is pretty cool. We have created a server in likealmost three statements, right? So that is something onhow you create a server. But generally what people dois people use this functionality of creating a serverlong with Express and then create a server through Express the frameworkthat we are talking about. So we will see how to createa server through Express. But before that let's move backto the events and let's see how events would workin this particular case. Now when you talk about events,there are two methods. It's that you would be generallygoing for one is called M it and one is called on so remember these two methodsEmmet and on let's see how we can make it workand what our events basically or how an event IDsystem would work. So in that case weagain use a core module which is called events. So far events is equalto require events again, a node.js code module. You don't have to doanything to include this one and in this particular case, but also create an event emitterso far event emitter is equal to events dot event emitter. And it should be a new eventdemented actually right now. If we go for the presentationyou would see that they have alsoemphasized on to things that is on and Emmet. So we will see whatthese things are. All right. So now in this particular case, let's go for somethingcalled event dot on even dot on or not even taughton actually even Demeter dot on this function. It's basicallyan event listener. Now whenever an event occursthis function would listen to that particular event. All right. So this would listento the event and event dot on we would have the nameof the event and let's see what we can do as a function. There's a callback functionthat is also something that is involved in here. So we will see even diameterwhere it will go for event dot on and somethinginside as arguments. But as of now,I'll just keep it this way. And I'll simply go for somethingon the image side of things. I would like to emitan event and let's see how that goes. All right. So in this particular case, what I would do iswhenever there is some requests on the server,I would like to emit an event and then I would like to listento the event and log something on the console, right? So, let's see inthis particular case. I'll go for event emitter dot mit and I can name the event anything the eventthat I'm trying to You Know M. It is basically someonehas requested to the server. So what I would say is on request maybe justsomeone I can name it anything. That's why I'm namingit a very bizarre names or someone requested. It is an event name and if I want I can passin some data as well. But as of now I'll justkeep it this way. I'll just omit someone requested and when I would liketo do something when someone requested so I would go for even diameterdot on someone requested and That is a callback function. Let's just gofor console DOT log and I'll just say a requesthas been done on the server. Something like thison the console. All right. So this is an event emitter and basically on isan event listener. Alright, so we aretriggering an event or maybe I can calltrick even trigger that will be a better name. So this is an event triggerand this is an event listeners or even admitted it mit is an event trigger and even tomato dot onis an event listener. So whenever thiswould be triggered this event will be executed andthis function would be executed. So, let's see. So if I now read on my server because I have changedsomething in my node.js app. I'd have to rerun this. It says server startedon Port 3000. I will just refreshand we'll give me server works. That is fine. But if I check outon the console, you'll see that a request has been done. If I refresh again, you seethat a request has been done and then there aretwo requests that is because one is checking whether the method getis available on the server or And thus the other request is basically executedwith the method get' actually so thereare two requests but we don't need to you know, go into detailin that particular case. However, one thing isfor sure that whenever the event emitter is triggeredwe can execute the on method and we can listento that particular event. All right, and if say for example,I want to pass in some data, let's say test, right this data can be taken into the function the anonymousfunction as an argument and again just display that for example datathat should display test to me. So whatever you pass in could bea string could be a Boolean and object anythingwould be taken into the function as an argument can name itanything and you can display that particular argumentas well inside the console. Let's rerun our programand let's refresh the server is requested and you can see requesthas been done on the server and test this particular datais also been displayed. So that is the event diameteryou can emit events and you can listento events whenever the event would be emittedthe listening would happen. All right. So this way, you know, our node.js serverbecomes an invented server and this is really good. If you want to createa chat application or any real-timeapplication event handling would actually help us createa good real-time application. So that is where thiswould basically come into the picture. So, you know, you can check out socket IOthere is a library called socket IO which helps youto create a chat server. This would heavilyuse event amateur on and emit methods. All right. So this is the one now we have created the serverusing the HTTP module and if we talk about the serveryou can always see that the client would be eithera web browser or mobile browser or an application that might requestto your web server. The web server would containyour server file. That is the app dot JSthat we created plus some application logicas well if you want and the Might be taking datafrom the data layer or any external system and it might be servingthe request back to the client. So basically this data would betaken into the business layer and to the web serverand the web server respond, like response dot end sort of thing would happenin this particular case. So this is how the request response cyclewould go on and then we see here that it's creating a web serverusing node.js you can pause this particular portion. You can also try outthis whole thing. I think you would knowhow a server is created. You already know that and then there arecertain other things that are listed in here which you can try now we'd go for third-party moduleor a third party package. You may say or even wecan call it a library. It is called Express JSnext press JS. It is an OG s framework which is basically facilitatingthe management of data flow and routing as well. It is verylightweight and nowadays if you create a node application for an a By order ofObserver expressjs is something that you definitely have so it's like basically the partof the language itself right. Now. It facilitates fasterapplication development. It provides applications with template enginestwo of them are Jade which is nowadays known as pug and ejsto of the very popular ones, but then there are somany others it helps, you know, building single pageapplications building multi-page applications as well. It helps you to connect with any database MySQLmongodb red is ETC. The configuration isreally simple will see how you create a serverin express its really simple and it also helpsyou to handle errors or maybe it gives youa good facility to Define error handling processes so that your maintainabilityof the application is something that would work. So let's just create a demoin Express and let's see how that goes. And as I said and be using HTTP and express togetherCreate a server. That is an ideal wayof doing it. So let's just get rid ofeverything and let's just start with the express server for thatand have to include express. Our Express is equalto require Express. Now when I do this and if Iexecute this, you might expect that this might work but remember Express isa third-party Library. It's a third-party module. So in that case you would have to install that particularmodule on your system. Obviously, if I run this, let's say if I try to runthis this will give me an error cannot findthe module Express. So let's install Express in herein order to install expression. Remember the file structurethat we have. We have an app dot JSfile a package.json. There's nothing else in here. So let's just install Express. Let's say npm install Express. You can go for installthe whole word or I as a short form. It's all fine. I didn't stall Express and this would actually downloadExpress from the npm Repository. And install iton your local machine and you'd be able to also see where that Expressexactly gets installed. So you can see that expresses installed48 packages installed. All right, and now you can see a changein the file structure there was already package dot Jsonan app dot JS in my file system while there is a foldercalled node modules created and package underscore. Dr. Jason also createdthe node modules folder would actually havethe library Express and then there are somany other libraries that Express depends on whichare also imported and installed. So now if I execute this thiswill not give me an error. However, we havenot created a server. We have not listenedto a port number. So we'll be doingthat through Express. Let's do that. What we would do is Express. And brackets like be callingexpressed as a function and we'd be saving it in silvera variable called server. So this is how you create a serverin Express pretty simple. And what we would do isserver Dot listen 3000 and then the same drill like3,000 and not specify Local Host because I know that it is localhost and atthe end a function that tells that the server is listeningto 3000 so console.log, so listening to Port 3000. All right. So the express is required likeincluded a server is created and the server is listing now, let's just rerunthe application and because the serveris listening the application would not stop it will keepon listening and let's go into our browser and let'srefresh this time around when we refresh you. Do not get thatwhole loading thing. But instead you would getan error and it says that it cannot get / this is actually not an erroron the server side the sir. Is all okay. The thing is that we have not programmedas server in a way that it would address the getrequest on the root path. This is our root path. There is no get requestaddressed on the route, but that's what it says. So what we'll do iswe'll address the get request. I will do something like this. We'll go for Server dot get well actually rubthe naming it a server because I would like to usethis server identifier somewhere else in some time. I'll go for app now go for appDot listen this time around. All right, so appand this also tells you that you don't have to nameit server can name it anything that you want. So this is my Express appand app dot get / and a function request and response the samerequest response function that we had but it is nowspecifically for the root path and in here I can go for a response doteither I can go for end or I can go for sendand response that send. Let's say X This works I can also let'ssay have an H1 tag so that I had browserdisplays it as a heading that can be done. And now let'srerun the application and hopefully the root pathget request is addressed. So let's go for it. I'll stop this werun the application. By the way, there is a utility called Node1 which would help you to run your application automatically once there are some changes but this time aroundwe'll just you know, read and theapplication manually. So if I now refresh you see that it gives you an H1which says express works. So which means this is all done. Your root path is addressed. Your route get request is done. But what I would liketo do is I would like to go for something called tasks. Okay, there is no routethat is tasks that is defined yetnot programmed our application so that it addressesthe get request on the tasks in this get requests. Let me just go for the get request firstsap dot get slashed asks is what I want to havethe server address and Request and responserequest and response. So now I can gofor response dot send I can go for another H1 which says tasks work if I now restart my serverand remember to stop myself. I'm just pressing in control C. And if you area Mac User is command C that is stopping the server. And now if I refresh to seethat tasks work this works. Now what we have done here is wehave created two routes one is app dot get for the root and one is apt-getfor the tasks. It could be a blog post. It could be about put updot delete AB dot patch anyone who is familiar withthe rest API would be familiar with all these words your servercan address any requests get put post delete patch any requests that you want to address here. We are just goingfor get requests. All right. So now what I would liketo do in here is I would like to returnsomething from a file. Like for example, I'd create something calledDB dot Json Json file. And in this Json file, I'd like to go for let's saya key called tasks and tasks would bebasically an array of tasks which would be learn node. Js now in JavaScript. You can create areawith square brackets similarly in Jason's in textthat will will work. Let's say learnJavaScript learn Express. So these are the three tasksthat I have. And what I would like to do isfrom this Json file, I would like to readthese three tasks and I would like to returnthem as a response. So, let's see what we doin this particular case. Let's see how that works. And that response has to bein this particular case right in this particular response dotsend I'd like to read the file and then send the response so we know that what we usefor reading the files, which is the fs module and also we know what we useto create a server as well. Here we have Createda server by Express but generally peoplealways use a mix of Express and HTTP to create a server. Let's see how that happens. What I'll do is our firstI'll go for H DP is equal to require HUDp and for this week, obviously, we don't haveto install anything. It's a core module and I'd go for VAR server is equalto HD P dot create server. All right, and app is something that I'llbe passing in as an argument. So my server is created which has allthe goodness of Express. So instead of app Dot. Listen, I'll go for Server Dot. Listen. All right. Again, this is all staythe same will it will listen to the port 3000and then go for a message. It is server is listeningto poetry thousand and so on and so forth. So what we have done is wehave included Express. We have included HDPEyou created an Express app. We have created a serverwith the create server method. We have passed on the expressapp as an argument, which means all these routeswould be something that would be addressed. And then at the end we arelistening to poetry thousand. Now, this is the common way that people would useto create a server and an Express app together. Alright, so nowlet's rerun our program. Let's see what happens. It gives me an errorand that is a typo. So let me just resolved that. Right, and now let mejust rerun the program. So again listening to Port 3000 this wouldnot probably give me anything. You can see that itis still loading because there's no response that I have programmed in herewhich I would like to but say, for example, if I go to my root path,it gives me Express work. So that is all working fine, which is cool actuallyto be using Express and node.js server together. Alright, so now I'd like to readfrom the DB dot Json. So obviously I would needVAR f s is equal to require fs. And in here at gofor f s dot read file and go for the path that is T V Dot Json therelative path and the Callback which has two things as far as read fileis concerned one is error and one is data. Let's go for console DOT logor not even console DOT log, let's just doa response dot send. Once you have the data you gofor data dot tostring would be somethingthat we'd be going for. Let's see what we getin this particular case. I would have to restartmy server and this works and if I go for tasksthis gives me an object that has an array of tasks. So I don't like to havethe whole object but I just want the arrayof tasks to be there. So one would think that okay. I can do something like this. Like let's sayWar tasks is equal to Theta dot tostring dot tasks. That is the object that we want to getbut the thing is like this tostring would convertthe whole data to a string which would not havethat property called task. So if I want to convertthis string to a Json I'd like to do somethinglike Json dot parse. One of the codes havea script methods this would then have the property called tasks. Json dot parse data or twostring which we are passing. As an argument and that willconvert this string to a Json and then I'm going for tasksas a property at the end. I can simply send in tasks. So that will giveme the plane are a that we require. All right, and specifically if I want to send JsonI'll just do response dot Json rather than goingfor response to its end. So I am being specific in here. So let's just stop this and start the app againand refresh and now you see that you get the array now, you might not getthe same output that I am getting asfar as the color is concerned because I have a an extension which is runningin my Chrome browser that is adjacent readeror something like that. I had installed it years ago. So that is the thing. But the more important thing isyou're getting the plane are a from the file that we have. So in this case we have used almost all the thingsthat we have learned. We went for Express. We went for HTTP combined. It was a server that was createdand then the fs module to read something from the file thiswould probably be Something that we would like to gofor from a database like we'd like to get a databaseconnectivity done and get all the data in and then read datafrom this particular case. But as of now read filewould be enough and this might give youa good introduction to node js. So this is what it isand further down. You can try out more routingand more database connectivity in node.js see howthat goes for you. Hi everyone. This is a she's from Erica. And today we are going to learn how to build a mean stackapplication from scratch. So before moving ahead, let us discuss the agendafor today's session. So we start with what isa Min application then we'll talk about mongodbExpress anger to a node.js basically mean is an acronymfor Mongo DB Express angular 2 and no dot j. So we were talking about allthese four Technologies. They will talkabout credit operation. And at last we'll startbuilding our application which is contact list mean app. So let us start with veryfirst topic of today's session which is what isthe main application means that refers to a collectionof JavaScript based Technologies used to develop web application. So from client to serverto database everything will be based on JavaScript. If you see the diagram which shows a simpleclient server architecture that will be followingin our main application. If you see there you will findangular 2 that we'll be using for our client side development. Then we will using Express which is based on no dot DSfor server-side development and at last we'll be usingmongodb as our database. So this is the architecturethat will be following. So let us talk aboutthis for Technologies starting with mongodb. So mongodb is an opensource schema list nosql database system. So if you are workingon Mongo DB you will be working on Collectionsand documents a collection is a group of documents. Whereas document is a setof key value pairs. You can refer to a collectionas that of a table in our dbms system. So basically all the data that will be workingon inside mongodb will be in the form of chiand values mongodb saves data in binary Json format, which makes it easier to passdata between client and server. So next on our list is Express. So Express is a lightweightframework used to build web application basedon node dot JS. It provides yoursetup robust features, which you can use to buildsingle page application as well as multi page application. The idea of Expresscame from Sinatra, which is a verypopular framework based on who be so basically Expressprovides you boilerplate by encapsulatingthe functionalities of node or chairs. So that the whole app buildingprocess becomes easier and fast now, let us talk about angular2 using angular 2 you can make application for your mobile as well asyour desktop angular 2 is by far the most popular JavaScriptframework available today. And with the introduction oftypescript angular 2 is bringing a true object-orientedweb development into mainstream. So we'll be using our interface through which our client willbe interacting using angular 2. So at last let us talkabout no dot JS. So no dot J's is a server-sideJavaScript execution environment built on Google Chrome'sV8 JavaScript engine. It follows anevent-driven architecture where there is a single threadmechanism to process your events and even can bea clicking a button or filling a formin our website. So all these eventsare then sent back to your server for processingand then the server after the processing is donegenerate the response. The processing ofthese events are done. Asynchronously that is if we have multiple eventsin our event queue our node Server doesn't wait for a particularevent to complete so it can process or serve multiple requestsat the same time. So these very wholeevent-driven architecture makes our node.js serverhighly optimized and scalable. So I hope guys you have a clearoverview of All the technologies that will be usingin our mean Stacker. So now let us talk about creditoperation prayer is an acronym that stands for createread update and delete. So basically these fouroperations will be performed on our database. So we will be using post method for inserting new data intoa database will be using get for retrieving datafrom a database will be using put for modifyingor updating any data that is there in our database and at last we'll beusing delete method for deleting resourcesor deleting any data that is there in our database. So we will be implementing allof these for functionalities or operations using restful apisthat will be learning while building ourwhole application. So guys let us start with building ourapplication before that. We need to install manga TV, and no dot JS locallyinto our system. So let us go ahead and do that. So for installingknow dot JS you need to visit. This website callednode.js dot o-- r-- g-- go to the download section then according to youroperating system choose the correct installerand download it. So I'm going to goahead with Windows. So basically installingno dot years or longer. Even your system is pretty easy. You just haveto go through setup. Click a bunch of next buttonand specify your location where you want to installit or go with the default and that's it. So my download is complete. I'm installer. I have already downloaded and install nodeor chairs in my system. So I'm not gonna install it but I'm gonna showyou the procedure or way to do it. It's pretty easy. And then we'regonna stall mongodb. I think I have also installeda mongodb in my system, but I'll tell youhow to do that. So specify your location here then click on next nextand then finally install. So once your installationis completed click the Finish button and openthe node dot JS command prompt. So basically we will be usingthis command prompt. No dot S. Command promptto build our entire project. So let's check outthe node version. Then you can go aheadand check out the npm version. Npm stands fornode package manager, which is there formanaging your dependencies and their versions. So whatever dependencies youneed to run your application or for your project, even I use NTM to manage that now let us installmongodb into our system. So you go to mongodb.com. You click on download then again as per your operating systemchoose the correct installer. I'm going to go aheadwith this very version and I'm goingto download the MSI. It's a big file 148 m b so I have already downloaded it. So I'm not gonna go aheadwith the download. You have to run this setup. Click on next I have Mama TValready installed in my system. So I'm gonna remove it first then you can showyou the installation. I could have donethat with no dot J's as well. But it's pretty same like you just haveto click bunch of next have to specify your path. And that's it installed itthen go next agree next. I want complete install. You can go aheadwith the custom options as well where you canspecify the location and other configurations, but I'm going to go aheadwith the default mode or the complete installation and the mongodb fileswill be installed in my program files if you're using Windows and youcan go ahead and check out that so I'm going to show you that once the installationhas been completed. Yeah, so click on finish. Your father will be installed bydefault in your program files. If you're using Windows goto Mongo DB server 3.4 then so this is where you're all the filesreside in your system. Now for runningyour mongodb service, for example, whenever youare creating a mean app, you need to runthe mongodb service so that you can makea connection to it and performed it operations. So for that what you can do is goto dogs in mongodb.com because you will getthe whole procedure or step by step process to do that. Welcome 1tb. Soho installation manualCommunity Edition windows. We have alreadycomputed this very step that is installmongodb Community Edition. Now, we need to runthis mongodb service. So for that we need to createtwo directories called as data and one subdirectory steamy. So let's go ahead and dothat will open command prompt. Let me delete the data file because I had a mongodbalready installed in my system. I'm gonna delete it. So yeah, DB has been created now the next stepis to tell mongodb that this is the partwhere my database data or data for the databasewill be deciding. I'm going to copy this commandand I'm gonna paste it here. I'm going to change my pathwhich is see / data, that's it. So my connectionhas been started. My service has been startedand sweating poor connections on port 27 0 17, which is the default portfor mongodb to connect if in case like if you go aheadwith this very step and it doesn't work outand you have to execute the Mongo d dot exe, which is the third step youcan do that as well. So we have mongodb IDand no dot JS ready. So now we need tocreate our project. So I'm going to go ahead and start buildingmy application for that. I'm going to goto my project directory which is in 3 Drive. Yeah, so I'm goingto make a folder where I'll be puttingall my source code. Server side as wellas my client side. So let's name it as the nameof our application which is contact list. Now I'm going to use npm and it command to buildmy project as well as create package dot Json thyroid which will containall my dependencies and their version. So you'll go aheadand rip and p.m. And it will ask youyour project name. Version descriptionof the project that you are building. simple mean application entrypoint is the file from with where your server sideexhibition will start. So let's name it as AB dot JS. You can go aheadwith index dot J's as well. I always use app dot j. So it's up to you to name. Whatever you wantto name that file. You can do that. You can put your name as author. I'm going to put mine right now. Let's open this folder. So it project. Okay, I have alreadyopened in my vs code. So I'm gonna usevs code as an editor. You can use any editorof your choice. So this isyour package.json file which contains all theinformation regarding projects. We haven't installedany dependencies yet. That's why you'renot seeing any dependencies or anything like that. We're going to goahead and do that. So for that I'm going to usethe command + V app installed. So for installing any dependency or module you usenpm install command followed by the nameof that particular module, which is Express. Then you can use - that's a flagin that way whatever dependencies or modules. You're installing. It will be writtento your packages on fire. So I haven't told my Express and you can see over herein the dependencies section. We have Expressof version 4.1 5.2 and oh, so this is how you do things. So now if you wantto share your project with your friend or colleague, so you don't need to sendthe entire project along with the dependencies. So you just need to sendthem the source code and this packagefor this one file so that they candownload the dependencies or install dependencies and start workingwith your project. You can also installmultiple dependencies or modules or at the same time. What I mean to say is usinga single command install go ahead with Mongoose and then we need carswe need body parts. So Mongoose isan object document mapper for using mongodb and body parts are used forforcing the incoming Json data and course is power because we will be havingour server code running at Port 3000. Whereas our client side coderun on 4,200 4,200. So that's why we need to enable courseso that we don't get any error, which is not allowed by default. As I told earlier we have our entry point filecalled AB dot J's from where our server sideexecution is start. So you start server side codeby making that verify locating that verify the first place. So we'll go ahead and do that. app dot DL then what we will do we will importthe modules or dependencies that we needto build our project or our server side code. So importing modules. So first we need Express. We need mongoose. We need body parcel. We need cars. And we need part. We haven't installed part because it's oneof the code module. So you don't needto install it separately. Now now for makinga express application now using Express we needto use express method and assign it to some variable. So we'll assign it to app. Okay. Now we need to definea port number. Now we need to bind our serverwith this port so. These are callbackyou can go ahead and I'm using Arrow function. You can use function as wellthe JavaScript function. After a successful connection, we need we want to saythat server started at home. Concatenate the port number. Now what we need to do iswe need to add our out so that if we go to localhost 3000then way to specify our server what it needs to renderfor that home page route. Testing server because we'regonna hit on create all our doubts in a separate filecalled route dot J's or something like that so that all our hours arein particular file, and it's not inour app dot J's file. For creating route youneed to use get method. For example, like this ishow I am defining a route and the route isfor my homepage. That's why I'm using / the next argumentis request response. Stockton now, let's goahead and run our server. For that you needto execute note space your entry point filename. So our server has been startedgo ahead and check that. So we have a full bar. So everything isrunning fine now. So remember I told you that I want all my routes to bein a particular folder. So I'm going to createa folder called route. We can simply put it in a file because it'sa simple application. So we do that or wecan create a folder as well. your outdoor chairNow we want to use this very particular folder. So what I'm gonna dois I'm gonna Define this particular filewith a variable. So first I'm going to use Rao. four we need out slash. Now we need to use it. So. So I want all my heart which is proceeding with /contact or / API or / ABCD to be forwarded to thatfor a particular file. So for that, for example, I wantit to be / API. So all the routes with / API slash ABC let's saywill be directed to my route dot J's fileand where I have defined what to do with thatparticular route called. For example, I'm having / API slash at contactfor adding the contact. So whenever a clientneeds to add contact it will make a power to this veryAPI slash API slash add contact and I would be defining my Logic for adding contactto my database over there in my route dot J's file besidethat very particular route. That is / API slash add contact. So that's how things work. Right, so we need Find outso that we can make call to it and we can performour data operation. So for now this is the reasonthat we are making the roads. So it's done now we needto add our middleware so that we can parse our dataand we can use korres. So let's go ahead and do that. So we need cars. We need body powder as well. So you want to parsethe Json data? sad and we needto do one more thing. We want all our static filesto be in a particular folder. So for that I'm goingto create a folder called. Public and inside that I'm gonna createmy file index dot HTML, which will be rendered byour front-end application. so static files join Basically,I'm defining the path here. You can directly go and specify the pathof this folder public folder or can use underscoreunderscore dir name which will pointto your current directory and you want to joinit with public. So guys we are done here now. Let's create some route. So we need to bring Express. You can use costor wear whatever you want. But in general we use cost because the value of Expressis not going to change. I mean the value of variable Express is not goingto change in our code. Same with router we'regonna use express routers. I told you that we'llbe adding routes here. So whatever callI'm making two / API, which is there. Let me show you /API slash contact. It will be directed to this veryparticular dot get method. The quest is bouncing next. Now this ismy / contacts folder. So. And I'm gonna usethis very route for retrieving the contact list. Okay. So every time you make changes to your server side code youneed to restart your server or what you can do. You can go aheadand install node mode, which will continuouslywatch your source code files for any changes Whenever thereis a change it will restart your server on Stone. So we don't do that. Now you go ahead with node mon. Come on. Just start your server. So getting an error, so whenever you're creatingroute, you need to export your router as well. So basically what itdoes it goes to your package dot Json fileand where it finds the node one that our main entry point fileis uploaded tears and finally start the serverusing this very particular file. So if you see overhere the same command that we use toexecute for starting a server node app dot JShas been used by note mode. Now if I go ahead with / API slash contacts Seewe can have the data. So now what we're gonna doyou're gonna connect to our database and then here we wantto write our Logic for retrieving datafrom a database and that's how we will send data toour client-side application, which will make a callto this very particular API and it rippedthe list of contact. We need few methodsfor example for reading data. We need a methodto add data at contact. For that we'll beusing post method. Then we need a methodfor deleting contact. pretty similar the syntax or the signatureof these method So how I'm going to deletea particular contact is by referring to that veryparticular contact using its ID. So today know what we need. We need to createschema for our contact that will be inserted into our database and we need tomake connection to our database. So we're going to makea folder called models. inside that we needa file contacts got tears So this very particular filewill be having all our schema or contact schema. So that is the reasonI am making this file. So we need to bringin Mongoose for since we are going to makeschema for a mongodb. So in to bring mom goes throughwhich will be talking to mongodb or through that will be usingour mongodb database. contact schema Mongoose schema So this is our functionand I'm going to pass the schema that I'm going to usefor my contact. So I'm going to go aheadwith first name and last name. Drive strength but crewthen we need last name. Let's make it required also. You can make it false as well. But since it's a demo, so I'm going to goahead with true. Last field will befor contact number or phone number. So let's keep it string only. Now we need to exportthis very schema. So it's done. Now what we need is we needto create connection or way to connectto our mango TV. So we're going to goahead and do that. So we haveMongoose already here. So now for connection will be using Mongoosedot connect function. So let's go ahead and do that. connect to Mongo DB Mongoosedot connect then we need to pass the URL along with port number through whichwe gonna connect to our mongodb. So it is mongo DB. Local Host two sevenzero one seven, so we're going to go aheadwith our default port. Now on successful connection we need to displaya message that yeah, the connection hasbeen established successfully. on connection weneed to say mongoose. connection dot on connectedthen we want to say that. Connected to the database. Mongo DB at yeah, that's it now in case of error. Suppose we have an errorwhile doing the connection or while establishingthe connection. if you are we need to know that what is the errorthat we are having? Prints a message as well. is connection Yeah,we don't need. So it's done. I think now we can check out if we have made the successfulconnection or not yet. So we have been connectedto our database at Port to 7017. Now, what we needto do is create apis for retrieving contactsare adding contact or database or deletingcontact from our database. So you're going to do that. So first we need to bringthe schema the contact schema that we have createdin our contacts dot JS file. Now for retrieving contact we're going to usefind method or function. Then we're goingto pass a callback. So this is one other wayto define a callback or function the JavaScript way. Yes torches on contact. So after achievingthe contact all the contact or the contact list will besaved in our contacts variable which we are sending or responding backto our client in Json format. No, we need our post. So first what we need, we need to create a new contactwhich will be adding to our database. So I'm going to makean object in contact. Let's go to new contact. It will be of type contact. name I won my first name to befrom my request body. dog first name Then last name? So it will be lost. Then we need phone number. That's it guys. Now we want to insert this verynew contact into our database. So for that we're goingto use new contact dot safe and we need a call back. Let's go aheadwith the arrow function. if error Way to sendall we want to send. Let's search. fail to add contactelse contact added successful That's it guys. Now for delete what I'm tryingto show you is that if you are inserting any datainto your database, what are mongodb does itcreates an ID for each document or each contact? So using that fora particular ID, we gonna referto that particular contract which we want to delete andwill perform art-lete operation. So that's how wewant to do things. So from client sidewill be receiving that very particular request for deletinga particular contact then using that very ID, we're gonna issueor delete command so Contact dot the move. Now as I said,we need to retrieve the ID. This ID and then a call back. pepper hose That's it guys. So our delete methodhas been added to our layout file successfully. So we have 3 methods now later on we will alsoadd our update method. So it's done. We have no error or no issues now for checkingour apis we gonna use Postman which is a Chrome extension, which you can add to your web browserChrome browser and go ahead and check your apis. You want to gowith post nine crew? Here you will get an option for adding it to your browseror to your Chrome. Now first of all, we need to insert some dataso that we can fetch it. So, you know what with our post methodthen we want our header as content type to be Json Thenwe need to send draw later. So. first name Bruce last namewhale then phone number Okay, I'm gonna goahead with string. But yeah, let's addsome random number here. Now. We have to enter the URLor URL of the API that you want to make the call to so that it can be directedto that particular post method. So we're going to go aheadwith Local Host 3000 / API slash contactso contact added successfully. Let's add somemore contact Peter. Now let us retrieve the contacts that we have already addedinto our database. For that we'll be usingAPI slash contact. So we have these two contact. So that's what Iwas talking about. You can see over here. We haven't added any ID fieldwhile inserting our contact. So this is automaticallygenerated by mongodb. And this is whatwe are referring to in our delete method. So what we're going to do iscopy this very particular ID. No, we're gonna issuea delete command. So now our methodwill fetch this very particular ID from our URL and it will referto that very particular document for that very particularcontact and deleted so the contact has been deleted. Now let's check that. We are having issues hereso we can see that our Peter Parkerhas been deleted. So this is how youcan check your apis. Now what we're going to do. We're going to makeour client application and where we will be making call to our apis for performingvarious kind of data operations that we have to findin our server file or server side code. So that's it guys areserver-side code is complete. Now, we're gonna go aheadwith a client-side application using angular 2 andwe'll be creating view templates and all to showa contact list will add buttons for delete for adding contact and all that. Let's go ahead and do that. So for that I willbe using angular CLI or command line interface that will be using to buildour entire client side project. So go ahead and opena new instance of node. Js e MD then goto the project directory. So now we need to installangular CLI for that you'll be usingagain npm install add the rate angular. / CLA So basically angular CLIwill help you to provide all the boilerplateor all the files which is necessary to run yourclient side angular application. It will also provide youthe core node modules or core modules, which we are going to usein our angular app. Yeah, so npminstall has completed and our angular CLIhas been stalled. Now. We're gonna go aheadwith creating a angular project. So for that you will use NG newand the folder name where your angular app willbe deciding so ingenue client. I'm gonna name this kind becauseit's a client-side application. So as I said, it will provideyour boiler plates or all the files. So these are the files that will be created usingyour ingenue command. So you'll have a basic componentcalled as AB dot component and you will have a basic model. I've got module where you will be specifyingall the modules which you're going to useacross the application as well as your components and services. Then we'll have index dot HTML which is the filethat will be rendered in the first placeto your web browser. So which we have specified in our public folder thenwe have packages own. There are other files as well. If you see over here, we have protractor for testing and for linkingwe have t es Lindo Json and although configuration for our angular CLIis in angular - CLI dot Json socouple others are there so which is not required for now, like don't needto know all of that. So our project has beencreated successfully now, let's go inside that veryparticular folder. No what we need we needto create components. Okay, let me just giveyou a quick walkthrough. So inside our client folder,we have Source then app. These are componentour basic component called as AB dot component. So if you lookat index dot HTML file, which I told you it's gonnarender in the first place. So here in body. We have app - truth. So this is a selector or tag which will loadour app dot component for their so basically wewill have AB dot component or app component class to berendered in the first place. So here you can seewe have AB - route as selector. So for building an angular2 application we use typescript as language of which is basedon object-oriented features. So here you can see that it's a typescript classcalled as app component. Now, we have somethingcalled as decorator at the red component decoratorwhich tells angular that this very classis Component and we have template URL over here which specify the templatefor our component which is over here. And then we haveCSS for styling. So let's run this veryparticular application. So npm start is the commandor you can go ahead with NG serve. now you go aheadand What 200 you are having that for a particularthing as app works? So basically first our indexdot HTML file is rendered which is calling are approvedor app component. So if you check outthe app dot component template to in this template, we have what wecall as interpolation or one-way data binding so we are winding this valueas app works so left. Let's make it welcometo El Dorado. It has been changed. So like for in caseof server-side applications while we were creatingthe express app, we had to run server every timewhenever there is a change and for that we usenode more similarly in our angular side application. There's a difference is that we don't needto restart our application or it continuouslywatches for any changes that we make in our source code and it re-enters or restartthe whole application each time so you can go aheadand check that. So if you see over here,then we had a change over here. So it recompile itand start the whole application. All these TS files are converted to JavaScript files ortransferring to JavaScript file. And then our render nowwe need a basic component called as a contact for listing our contactas well as there will be a form of over there which will have three for addingcontact then we'll have button for deleting contact. So Let's go aheadand do all of these. So first of all,we need to create a component. So I'm going to stop it for now. We'll be using NG G or NG generate for generatingcomponent or services. Name of our component will becontact we need a service to so basically it's consideredto be a good practice to separate your business logic or your data retrieving or data operation logicin a separate file, which we call as a service. Then what we do iswe inject those Services into a component overwhere it is necessary. So as to use those services No, you can see a warning herethat service is generated but not provided. So basically wheneveryou have to use or in whichever component, you have to use the serviceyou have to provide it in your at the rate component accurate. So there will be a fieldhere called as providers and we will add the servicethat we will be dating now. So we have contactor service dot DS or contact service class where we'll be writingour business logic or our data retrievingor write operation logic. Then we'll havecontacts component where we'll be creating our template and allthe logic behind up. So we'll startwith creating our service so that we can retrievethe data first then we'll start with creatingthese contacts dot compound. No, one more thing weneed is we need a schema for our contact. So let us go ahead and makea file called as contact or chairs or Ts that will transfer into jai'sso you do that contact dot DS? now we'll have a class called. contact which willhave four fields. I-80 we have tried string. Then we need first name. print last name Stringand phone optional field now. We need to import our HTTP modelfor all getting all HTTP methods for retrieving data or for sending data or inother words contacts. so import http Weneed headers as well. from angular http then we need our contact classto be imported here so that we can usethe schema boat. contact from Thenwe need reactive just operators basicallywill be using nap operator. So it's done now. We need to use our HTTPmodule so for that. Done. Now, let's create the methodsfor retrieving contacts. Then we will add contactsand we will delete contacts so we will havegrieving contact. So which is get contacts. And I want to return. All the contactcall the contacts or cut the contact list, which I will be getting throughwhile I'm calling to my API. Then the API URL youcan see over here. This is the signature or syntaxof your get method or signature. You can call like we will have first argumentas a URL string so we'll have as HTTP / localhost. / 3,000 total numberthen we'll have a pi then we have contacts thenyou want to map it to? Json format So we have ourget contact method radio here. Now we need add contact method. Add contact. Which will be takingnew contact as an argument. We are now upand content type in our header, which is So nowI want to return. the response and I want to makea call to my add contact API, which is / API slash contact. I'm going to copythis very same thing. and then I'm goingto pass the new contact. Then the headers. Will map it response as Json. now either deletemethod Tim I told you that for deleting a contact willbe using ID so as to our effort that's very particular contactin our database, so we need ideas are parameter. Then I'm going to appendor concatenate the ID. So we haveour service ready now, we will be usingall of this method or injecting these Servicesinto our component and then we want to use allof his method to retrieve data and finally do something on it. For example, if you wantto show the contact list, so we'll do that then for adding contact will usethis add contact method. So that's howwe're doing things. So let's go aheadand create our component. So we'll go to our contactsdot component TS. Private contact service. Yeah, but we needto import it first. So we have contact service. from dot slash contact Yeah, so now we needour contact class for schema. That's it. Now. We're going to initializeour contact service or we want an instanceof that for you contact service class so that we can use the methodthat we have defined there. So for that what we will dowill We'll pass the argument as private contact serviceof type contact service class. So this very process is calleddependency injection or that's how we inject our servicesinto our compound and second thing is you needto provide your service. So as to use it. providers now let us go aheadand retrieve data. So we'll be quoting are retrieving data logicinside NG on init method which will be initiated. Once your component is beingloaded into your browser. So every time youload your component, it will automatically call this very particular methodto retrieve all the data. So we'll be havingthis dot contact service and we want to useget contact method so you can see over here that we have 3 methodsadd contact list contact and get contacts. We're going to use get contacts and since it will be turningan observable in to subscribe that we wantour contacts to be saved as restore contact nowit's showing an error because I haven't madeany variable for contact. So let's go ahead and do that. So it will beone tax type contact and it will be an error. Yeah, so we have done that. Let's get some more variablethat will be needing it wrong. We need one thenwe need first name. texting Then last name? then phone numberthat's it guys. Remember, I told you that the bootstrap component isAB got component. So we need to specifyin our app dot component that this particular componentshould be loaded. So we'll go to template and we're goingto use app - contacts. Because if you goand look at the selector, it's app - contactso contacts works. So guys, we have retrievedthe data here. Now, let's get our template so that we can displaythis very particular data. So I'm going to go aheadwith my contacts dot component dot HTML. and so before doingthis we need to refer to our bootstrap style sheet so that we can incorporate itinto our template. So we'll go aheadwith boots watch. then these are the size that's availablewhich you can use. So I'll go aheadwith something super hero. So you can go aheadand click the download and copy this very thing and putit into your HTML or index dot HTML file. So we'll go there. Will copy this very thing. And they sit here and then we needto write stylesheet. And will you movethis very particular field and we'll copy ithere in our HAF so that it can refer to it. So it's done. Now we can go to our component and here what we want is we wantto iterate over our list. So for that we will be usingsomething called as n G4 which is a structural directive. So the strick and G.electric contact contacts so we'll be iterating overcontacts using contact variable. So each contact in our contacts arraywill be retrieved in this very particular variable and that variable we will be displaying as a listso Let's go ahead and do that. So we need our class. md3 again until closing div tag. So now again, we will be usingthat very interpolation or one big data binding. To display our contact DOT. First name then we need similarcolumns for our last name and phone number So it's done. So let's check out our yeah, so we can see over herethat our list is being generated. We'll put some more style so that it will lookgood in the end. So what we'll do right now, it's will adda delete button using that we can delete any contact. So we'll go ahead and do that. So for that I'll be copyingthis very thing again, and I need my foot type. Be a button. Even click which we'll calla method call as deal contact. - we haven't created yet,but we'll do it soon. Now what we want is we will be referring to that veryparticular contact using ID as I told you earlier, so Eddie so the value should bethe we'll be using a class. Call us. button Danger So it's done so we have this veryparticular thing over here. Now, what we need iswill add few breaks so that we are iteratingover the list. So yeah, we'll do itlater on this stylings. So now we'll addour delete method over here which will be usingand we also need something called as addingcontacts add method or contact method. So let's go aheadwith our delete first. We need delete contact. Let's assign ID asany type of type any now so basically we'll becalling our service again. So this dot yes contact servicedot delete contact and then we'll passing the ID andsince it returns an observable. We need to subscribethat very particular observable. So we'll go ahead and do that. Now what we need to do is even if we have polluted the dataor the contact from our back inside of my database. I need to remove itfrom my contact at as well. This very particular contact where all the contacthas been safe. So we'll go ahead and do that. if the delete operationwas successful then straight over apps dot length then okay, so I'm having an error because I haven't definedthe variable contact so contact skull tothis dot contacts So it's done. Now we need toincrement our iterator. so if contact I dot underscoreID is equal to the idea that has been providedto my method. Then I want to remove it. splice iPhone soour delete contact is done. No, we need to add our newmethod for adding contact. So delete functionality is done. So let's add our add contactmethod so that we can add more contact and delete them and see if everything's workingfine or not. So what that I'll beusing that contact. and This will becreating new contact. Here I need first nameto beat the start. First name then I need last nameto bring this dot last name and I need phone to be. this dot pool Now I need toprovide this particular contact that I have createdto my service or in other words. I need to call the methodthat is defined in our service. So for that will be going aheadwith a contact service. Doc add contact and will you pausingthis particular variable? We're going to subscribe it. Just start contact dot push. So we are pushingthe new contact into our array. We are having here, okay. So it's not able to findany not finding the contact and I don't know why weare having this error. Okay, let's check it out. So yeah. So it's done. So this is our addcontact method now. We need to call itfrom our template. So we're going tomodify our template so that we can add a formon top of our class and which will have three Fields14 name one for last name and then 414 phone and then I submit muttonfor adding the contact finally. So far form we need to useform tag or submit event. And then we'll add add contact. So this is the methodthat we're going to call when the formhas been submitted. Close the tag form tag now. We need three field guys. So the first one will beof power first name. So let's go ahead and do that. So for that will be usingthe class equal to the classical to form group now we needto close this particular tag, and I want my labelas first name Yeah, now I need input typeequal to text. Then we gonna use somethingcalled as NG model for two-way data binding. So whatever changes that we're going to makethere should be reflected in our list as well. Where will be showingthe contact list. So we're gonna use that. and G model goes to nameequals 2 first name class equal to from So it's done we have our first three four. The first name similarly. We need it for our last nameand then for our phone number, so we'll treat it as last name and then we need to writeit as last name here. Finally we needfor phone number. So phone number so youwant to put this value to our phone variable? Yeah, everything is done here. Now we can addsomething goal is required. So if you are not puttingthat very or feeling that very feel then itwill pop up a message or they will be a messagepopped up stating that you need to fill that very particular formor particular field so we can usethis require here now. We need one button alsofor our submit button for submitting our form Now on top of that we needto add some heading stating that this is the sectionfor our add contacts. Oh It's done. Now. We have everything here. All we need is a horizontal lineor too low Yeah, so basically these areat contact form using which we can add our contactand these are delete button everything is there let's trymy name you're having a tear but yeah, it's thereand the second thing is that if you are seeing this that every time we are adding a data we needto reload it is happening because our this very methodfor retrieving the contacts. So basically whenever youare retrieving the contact and displaying itat that particular time, like your browser never allowsyou to block your UI, so that iswhat is happening right now. So what we can do to fix it is we can copy this veryparticular thing over here and we're going to put itinside our a contact. To be called just after wehave pushed the contact. So now if we go aheadand Do that then. Yeah, you can see where okay,we should add some BR tag so that it looks goodor present table over here. So we're going to do that here. So this is so far now. Let's check theour delete button. It's working as well. So our wholeapplication is working. Let me give youa quick walkthrough or a quick recap so that we can do freshall the things that we did for creating this veryparticular mean application. So what we did we startwith our server side coding where we had our AB dot J'sor entry point file where we imported allthe models that we required for application. Then we use middlewarefor applying cores and body parserto parse the Json data and then we put all our routes in a separate file callas rho dot J's, which is over here. Now there we created routesfor each grid operation and then we created schemafor database for contact. Like for example, first name will belike this last name will be this and phone this No, we have our client sideor client folder. There we startedwith creating our component. So these are component and then we had a servicecalled as contact service where we have mentioned allthe data operation logic and we have injected this wayservice in pure component that we need to buy useor we want to use so that's it guys. This was the wholeangular application and express and Mongo DB. So we have createdour main app successfully. I hope you find this wholesession to be informative. Hey everyone on behalfof Eddie Rica. I'm going to be bringing you afull stack application tutorial now many of you may be familiar with What's calledthe mean stack which is mongo DB angularjsExpress and node.js we're going to be doinga couple twists on this very popular stackand introducing graphql, which is a technologyfrom A book that makes it easyto query fields and send data between the server and client and we're also going to be replacingangular with react and this is calledthe mern stack. So what exactlyis the mern stack? Well, it's the same thing asthe mean stack but replacing angular with react. So here is what it looks like we're going to be usingreact js on the front end for the web application and the middle is goingto sit our server which is going to take requestsfrom their web app. And this is going to be runningnode.js with Express. And then we're alsogoing to communicate between the web app and the server using graphql and then in the veryback is our database. We're going to store allthe data and we're going to be using mongodb for this you guys may be wonderingwhy might you want to use react curiousover something like angular or just JavaScript itself. Well, this is a verypopular framework right now. It is currently what Facebook useson their very own website and it's very niceto build applications with it has somewhatof a steeper learning curve. I would say in someof the other Frameworks, but once you learn it, you can be very productiveand build very high quality productionready web applications, which is very cool and thengraph ql is going to help us. Optimized and sentreally good queries. That's another thing that is used by Facebookas a Facebook technology and then mongodb is just reallysolid database for no sequel. So that means it's very easy tostore different types of data. And as our database changesin our application changes, it's very easyto change our schema or what our data lookslike in the database and then Express is very niceto make a server with very fast. So that's our choice here. So there's reallyfour main operations when building anapplication like this and they're known as crud. So what crud standsfor is create read update and delete so we're goingto be using mongodb and Mongoose Mongoose is a libraryto basically do operations on the mongodb database and node.js and to create we're going to basically addsomething to our database. We're going to be using the savecommand then there's reading which is viewing objects or viewing datafrom our database which is fine commandand then update which is changing some values inthe database using update again, and then finally deleteremoving data from our database in this is going to be removeso that application that we're going to be buildingto try the stack out. Ameren stack isa to-do list app. So without further Ado, let's go aheadand get started. So there are a fewpure prerequisites for this tutorial first off. Make sure you havea editor of some sort. I'm going to be usingvisual studio code where I can edit files and then you want to make sureyou have a terminal I'm going to be using the terminal builtinto Visual Studio code and we're just going to be doingsome things with that. So make sure you have bothof those and then we're going to be using mongodb. So you're goingto want to install that and the recommended wayto install mangu. B I'm using a Mac, I would recommend something called Homebrew Homebrewis a package manager makes it really fast reallynice to install dependencies. If you just copy this URLright here you can paste that into terminal andrun it Arie have it so I'm not gonna dothat right now, but then you have Homebrew and then with Homebrew Ican Brew install Mongo DB and that will just installMongo DB on my computer and then to verify that you have mongodb. You can just type mongo and you can see here'sthe version of my Mongo shell and then you can seewhether you connect it to it. So the other thing is make sure you do startyour Mongo database. So I already had mine started. So I was able to connectto this these Brew can just do Brew servicesand then instead of restart. We're going to start to brewservices start Mongo DB if you installed thiswith home brew, the other thing we're goingto need is node.js. So again, once you have Homebrew youcan do Brew install node, so you See, it's really nice to just installthings with home-brewed makes it super easy. And if you type no - be in terminal youshould see a value and here's the version I'mcurrently on node 9.11. And then with thatyou should get em p.m. Which is node package manager. I'm using 5.8. So you just want to verify bothof those guns stalled now, if you're not running on a Mac,you can't use Homebrew. I just recommend goingto the official websites for mongodb and node.jsand downloading them that way. All right. So we're ready to get started. We're going to be startingfrom a blank directory. So I have just an empty folderright here called server. I do an LS. There's nothing inthere right now and I'm going to start offthe project with npm in it, and I'm just going to do - why this acceptsall the defaults and just createsa package.json file. So we have one file now in our project and thisis going to hold basically where our configuration stufffor the project. So what dependencies we needmainly So we're going to start off by adding a dependencycalled graphql yoga. This is a reallynice graphql server that makes it super easy. We're going to install it. So we're going to copy this. I'm just going to saynpm install graphql. Yo and you want to makesure and run this command inside these server directory and it's going to go aheadand install this for us now here is a little quick start that we're going to use and we're goingto copy the quick start and paste it into a file. I'm going to createa new file called index dot JS and paste it in here. So let's go through exactly. What all this stuff is doingfirst line is importing the package we're goingto use the require syntax because we're justgoing to use node. So here weare importing graphql. Yoga, which isthat Library here is what's known as the schema. So we're using graphql. So with graphql youhave to set up a schema and our schema right nowhas this thing called a query type Insideof query type we have hello and hello takes one argumentthe kind of looks like a function. This argument is named nameis the name of the argument and then string isthe data type for it. And then this is the return type which is a string aswell the exclamation mark at the end meansthis is a string that is mandatory. You have to pass it in and then here are what knownas the resolvers for this. So the resolvers you'll notice the kindof the shape of it matches. So query than helloquery then hello and here there'sargument called name so you can seewe're D structuring this second parameter, whichis called just the arguments and we're going the name and here we're returninga string and we're using a string template here. So we're saying hello and if they give us a name wesay hello that person's name or we do just hello world. If they didn't give usa name right and then here we're specifying the type deathsin the river solvers and we're going to doserver dot start to At the server now, we're going to get moreinto what the type deaths in these resolvers arebut want to go ahead and just run this so you can see what happens. So I'm going to say node and then index dot JSto start it up. And now we have a graphql server running on Locos 4000 and we'renot using expressed directly. But under the hoodgraphql yoga uses Express. So, all right, let's goto localhost 4000 and see what's going on there. So we'll get this thing that says loadinggraphql playground. I've been here before so Ihave some junk just going to clear that off. And so if I click on schemaI can see on the right. What thing is I can runor what things I can do here. This is a graph ql playground and what this is is youcan run your queries & queries are read. So we talkedabout crud operations before queries are Or reading things or findingor viewing the data you have stored so last we wantto query this hello thing. So, how would we do that? Well, we would docurly braces like that. And then we say hello and Ican either pass an argument or I don't haveto pass an argument so we can prettify this. So if I don't pass an argumentand I hit run I get data hello and then hello world. So by default the argument would be null or undefinedking passed in and then we saw that that would go to world, but here I canspecify an argument if I want to and Icould say been so hello Ben. Let me run that and wecan see it changes. So you can notice this argument we can change and we getdifferent results out of it. I can just do a random stringif I want and I get that back. So with graphql we can pass different thingsin and get different results that kind oflike a function call and we're justgetting a string back. And you'll notice the shape is very similarto the shape over here, which is nice. That's how graphql works. So we have this outer data and then after that matchesso hello is the name of the query so that's why those two match upand then here's the string that that equals and we're going toget more complicated as we add to dues and whatnot. All right. So this is the basics ofhow the graph ql is working. There's those other thingswhich are called mutations. So there's two main thingsin graphql queries and mutations queries arefor looking at the data, which I already said and that'swhat we ran right here. We could prefix this with the word queryto be more explicit. Those are doing the same things. The other thingis called mutations. These are when we adddata we update data or we delete data we're goingto be running mutations and we'll get intothose very shortly. When we addour Mongo DB connection. So our service good we're going to move onto connecting to mongodb and To do this we're going to be usingsomething called Mongoose. So first off we needto install this. So I'm going to come overhere to terminal stop. My server do npminstall Mongoose. So Mongoose is goingto allow us to connect to our mongodb database and then run queries create data or whatnot and we're just goingto follow the getting started. So here is how wemake a connection. So I'm just going to addthis at the very top and it changes the cost. So I am first grabbingthis from the package or importing it. So here I havethe Mongoose object and I'm first connectingto the database. So I'm at local host and I'm going toconnect to the test and I'm just goingto call this test 5 because I don't know if I already havea test database or not. I'd like to connectto a fresh database. So this is the nameof your database at the very end here and then after thatwe want to do is first connect to the databaseand then start the server so it doesn't immediatelyconnect when we run this. It actually runsin the background and we can use a callback so DB dot once and wait for itto open or it get connected now, we don't they to getthis DB variable. They did mongoose. Connection and then inside of that they're goingto pass the server dot start. So once we connect to the Mongo DB database wethen start our graphql server. Alright. So next thing we wantto do is create a schema, which is then going to beour basically our database model or what we're goingto store in the database. So we're going to grabthis Mongoose model and we're going to changeit up a little bit. So they are doing a kitten for us we are goingto do a to do so the model is going to be to do and we're goingto have a few things. So the first is text and here we passed we puton a pass the data type. So the text is going to bea string so we say string and then we wantto have a complete which is going to benot a string but a Boolean Okay, so we have two Fields text andcomplete on this to do object so we can save thisin our database if we want to and we can passto fields in the text. And whether the to dois complete or not. So I'm first going to adda type called mutation and I'm goingto say create to do and I'm going tohave two arguments. I want to get passed in the text and that'sactually it by default. I want to say complete is false because when you first createdto do it is not complete. So text here is going to bea string and I'm going to say you have to pass in a parameter and to force themto pass an argument. You do the the bang sign there. And then what we're goingto do is return a to do instead of just like a string or a Boolean we're going toreturn a type called to do so, I can create this type to doand it's going to have text which is a Whichis required and complete which is a Booleanwhich are required. So T required Fields textand complete and inner mutation. We're going to create a to-doand assuming you gave us a good text will pass youback a to do the other field. This is going to haveand this is a field at Mongo ads by default which is an ID and there'sa special type for this and graphql called ID. So that's required as well. So we don't have to passthe ID here it's going to be automaticallygenerated for us. So now we can trycreating this to do so, I'm going to say mutation and create to doand we don't care about the first argumentto this graph ql function. So these are called resolver functions right herethe first thing layer Pastor the parent which youdon't have to worry about for this the secondargument is the argument. So for this we expectan argument called text, so I'm going to say 10. Steer and from thiswhat we're going to do and I'm going to makethis an async function. We're going to first createa to do some this a const to do is equal to Nu to doand here I pass in the text and complete so pass in text and complete and by defaultI'm going to say complete is false that theto do is not complete and then we're goingto return the to do but before we return it, we have to save itto the database with DOT save and Dot save returns a promise. So we want to wait that and we'll wait thisto do from being saved to the database. So we're creating an instanceof it saving it to the database and then returning it so I can start my serverand we can see if this code worksand if it does what we should do is be able tocreate a to do in our database. So we're going to saynode index such a s alright so it started up so it looks like it was able to connectto the Mongo DB instance. Okay and bringthe playground over. Here and I'm goingto say mutation. So for queries, we could saythe word query there or leave it off for mutations. We have to saythe word mutation here and then I'm going to say create and we can see itin our schema over here whether it's there or notand it's not that usually just means you have to refreshwhenever we restart the server. So now under mutations wecan see the create to do and this is kind oflike our own documentation that was automaticallygenerated for us. So that's really cooland nice feature of graphql. So create to do we now havetext so create to do text and I'm goingto say my first item now you can see it'skind of mad at us. But this is the exact same thingthat we did with the hello. Right? Well, it expects a little bitdifferent return type to do which is an object. So we have to actuallyspecify which fields that we want back. So there's text there's ID and there's complete right? So if I specify all Here I'm going to getall three Fields back. So when I run this we can see. Hey look our item was created. We can see an ID and it's false. I can run this again. You'll notice we should geta different ID there. Looks like the beesincrementing at the end and here you'll see whatthe power of graphql is. If I only wanta single field back, so maybe I only careabout the ID I only have to select the ID here and I'll only getthe ID back here. So I only get one field back or maybe I only careabout the name or not the name text so you don't getextra Fields Back, which is really nice grab kill. You just get exactlythe data that you want. But all right cool. We just add a bunchof to do items to our database. Let's go ahead and fetch themor read them or query them. So to do this, we're going to add a querywe first update the schema and then you addthe implementation of how the data is getting fish. So here I want to get all the to do so I'm goingto call it to do. And it just returnsan array of to dues now to return an array youdo brackets like that. So to do so, this means we returnan array of to do of the type to do so thenin my query over here. I'm going to say to deuce and I don't really careabout any arguments because I'm justreturning all of them. I'm just going to sayto do dot find and this will find all the sidhu'sand it'll return them and then we can see them all. So that's all we needed to do. So, I'm going to Ctrl Crestart the server and now we can head back overto our application and refresh we shouldnow have a new query and we can see righthere called to deuce and we should be able to seeall the different to dues that we created earlier. So miss a to dues and I don'tneed to pass it any arguments, but I do need toselect which attributes that I want to get back. So ID text and then complete. So if I run this I can seeall the different items that we created earlier. I give them allthe same name know. So that's why it lookslike this if we want to we could createa new one so mutation. Create to do and I could giveit a different text like item to for example, and maybe I only wantto see the ID back. And now if I clearly that again, you can see at the very bottomare new item item to so perfect. And again, we don't haveto query all the fields. For example, I could just do ID and text and then completewould be removed from all these items just like that. Alright, so that's perfect. We now have two of the crud operations donecreating to-do items reading to-do itemswith this query right here. The next thing we wantto do is updating an item. So the way we're going to dothat is we're going to create a new mutationcalled update to do. This will have two argumentsthe ID and this is what we'll use to know what to do to updateand then also complete and this is goingto be a Boolean we could also specify the text but we don't really needto update the text at least in this application. Just whether this to dohas been completed or not. And then we're goingto return a Boolean and this is goingto be true or false whether we were able to updatethe to do so now we're going to add the implementationfor this update to do and a sink and this is going to havethose two arguments ID and complete and here we'regoing to do to do dot find by ID and update and herewe're going to specify the ID of the first argument and the second wesatisfy what changed. So the thingthat changed is complete and we're going to pass that in and this isthe new value for what complete. In this returns back, I believe I guessa document query is looks like what it comes back. I was thinking thismight be a promise as well that we might haveto await it will see if this works. I think it shouldand then lastly if that works. We just return true. So if this doesn't work, we'll get an error or somethingand that will be thrown back and that's fine. So let's go backover and see this in action and I make sureto restart the server. So anytime throughout this if you don't see somethingwe're looking right when you cut over here. Just remember to refreshand also restart your server. So we see in our mutationsdown update to do you can see the two arguments right hereand we expect bullying back. So why don't we changethis one right here? So I'm going to copy that ID. I'm going to say mutation and I'm going to sayupdate to Du by D is going to be that string that I copiedand It's going to be true and we can run that and we get trueback meaning it worked and now I can queryall the to dues so we can go back. And I can grab it and we need to grab complete andthis first value is now true. So perfect so update works. So now we can update any item. NR database based on the idea that we are given the last thingwe want to do is delete it. So pretty much the same way wedid update to do we're going to do remove to do and here we don't need to know whether it needsto be complete or not. So we can just remove that partand have only one argument which ID that we need to removeand then a Boolean true or false whether the operationwas successful so we can copy this I'm going to do remove to do we get ridof that argument and then here we're goingto say find by ID. But now it's goingto be removed. And now we don't needthis second argument. We just need to pass in the ID. So I'm going to restartthe server and we're going to try this one last timethe last operation that we need and let's sayI want to delete this item right here. That is so we see a removeto do they're perfect. And the other thing isyou can create tabs. So I'm going to go aheadand pop tab open here. That way we can do thisin a separate Tab and not have to redo this. So remove to do ID pass that IDin we get true, which means it should be gone. So now when I re runthis query here, we should not seethis first one right there and sure enough it is gone. So delete also works. So that's perfect. We have allour credit operations that we want to do and we're done withour server now really what we want to dois create a client or a web app using reactthat allows us to do these so we can view our to Deuce we can click on itto cross it all out we can add to dues or we can juststraight-up delete them if we're no longer need. So let's get into doing that. So I'm going to keepthis server running and open up a new tab. And what I'm goingto do is I'm going to go to a different folder and I want to create a folderfor my react application. Now we're going to beusing something called create react app. So this is a CLI tool and youcan download it using npm. So mpm install -gee create react app. If you go ahead and run thatthey'll download it for you. And then what you can do isdo create react app and then the name that you want, so I'm going to callmine client now. I've already run this and when you run thisyou're going to get a folder and I can just do LS right here a foldercalled client or whatever. You named it and it's goingto download this this operation also takes a little bit of time because it's goingto download all the dependencies and whatnot. This is a boilerplate forcreating a react applications that If you set up really nicelyso I have it open right here and we can check outwhat's going on here. We can look at package.json. We have dependencies react and we can see we havesome couple scripts that we're going to be using sojust right off the bat if we wanted to Icould CD into my folder and Run npm start and what that will do is it will runthe scripts start command which runs thisthing right here. And what that does isit starts to my server and this is a different server. So this is a development serverand this is just going to be allow you to seeyour react application as you develop it. So here's the basicallythe hello world and we can go in and change it. So if you go to Sourceshould see app dot JS and you should see some stuff. So instead of Welcome to react we could say welcometo graphql save this and what's going to happenis it's going to refresh and we see in our browserwelcome to graphql. So it's kind of cool. So as we do this it's goingto just Automatically refresh as we're typing so alreadystart adding some stuff to our application now, I guess I should goover the structure real quick. So the important partsare the source. This is where allour JavaScript code is going and we're all the reactthere's a folder called public which you can seehas HTML in it. And this HTML file is what our JavaScript or react application runsin or gets run plaid to if you will so here wecan see this div root. This is where our entirereact application is going to be put so an index dot JSwhen I say react Dom render app, our application is beingrendered in the element which is root 2 which we justsaw and if we look at what act out Jas is we can see this iswhat's getting rendered. So when I changedwelcome to graphql, that's why we sawa change over there and you can see this is justkind of similar to HTML. This is called jsx this allows. He to mix pretty muchJavaScript with HTML and we'll see more of this when we actually dosome more coding with this but we can go ahead and delete someof these extra files because we don't needthem first off app DOT test. We don't need wedon't need app dot CSS. We don't need index dot CSSand we don't need logo to SVG. So those are justsome extra files. We don't need we can clearout all this code right here and simplify it a little bitwe can just say div hello and get rid of these thingsat the top things at the top or just import statements usinga fancier JavaScript syntax, and we just need to importreact and index such as you can just removethe index that CSS. So if we come back over here, which should nowbe blank just hello and we can startadding our code. So what we want to do isto run the same queries and whatnot that we ranand graphql playground. So for example, I would like to renderthese two dues and my react application. And to do that I wantto run this query and to run graphql queriesfrom react into server. We're going to be usingsomething called Apollo. So Apollo graphqlallows us to this. It's very easy to get started. We're going to be downloading afew things here to help us out. So Apollo boost,which is the library. They created react Apollographql tag and graphql. Here's some little descriptionsabout what each one does but basically graphql graphicaltag or for parsing the query. So basically what we writehere parses this into an object that basicallythey can understand and then react Paulo is the bindings to react givesyou some react components and we'll see that and then Apollo boost isfor actually just setting up and making the queries. So we're goingto copy this in p.m. Statement and I'mgoing to Ctrl C the server that started and addthis in and the first thing that we need to do is createwhat's called a Apollo client. I'm going to copy thisand we're going to add that to our indexactually getting at to our yeah index dot JS is fine. We could add it to either place. But the reason why Iwant to do it here is because we also needto get a Palo Provider from react Apollo and pass inour client Sao Paulo provider, and this is just goingto wrap our whole application. And we need to passin our client. So our client isthis thing right here that we create and basically the only thingwe're still spying here is the URL to our server. So our server is not runningat this location. It's running at issue P /Local Host 4000. So it knowswhere to make requests. So it's now going to sendgraphql request all to the server which is perfect. That's where server is running and we need to be ableto access this client throughout our whole reactapplication in the way we do that is by using reactApollo's Apollo provider. So this wraps our entire app and now we have accessto this client and we can make requeststhroughout our app and we'll see that so let's make sure addingthat didn't break anything. So I'm gonna do mpm start and we should stillsee just the word hello and nothing different because this doesn't actuallydo anything yet. We didn't tell it what to queryalways said was this is where we You to make queries. I had this client equalnew Apollo client before these import statements, you know, make surethat comes afterwards. So just like thatand cool so refreshes and hello. Is there nice now, we can startdoing some stuff. So an app JS. Why don't we runa query in the query that I want to run isthat same one we have here in our playground. So what I usually liketo do is run it here and then just copy it so const and will say this to Deuce query and paste it at so this isjust a string of the query now. We added a library to help usparse this called graphql tag. So we're going to importgql from graphql tag, and this is actually goingto parse this query right here and the way we dothat is gql right there. Now, you may be thinking Imight have missed type this I meant to do something like thisin the past in the function and that is not the case. You actually call it justlike this we're gql is right up against it. This is a string template calling and it will passto this function. Okay, and itwill parse this out. Next thing is we needto basically bind it with our componentin the way we do that is with higher order component. So import graphqlfrom react Apollo and this is comingfrom the react Paulo package. So we say graphql we specifywhat query we want or what mutation we want in this case I wantthe to do is query and we wrap our app and now injected intothe apps props are some stuff. So now when I saythis top crops, I have a few things I have data and loading so loadingand why don't we actually I'm just goingto console DOT log this so we can take a look at whatactually the values are and if we come over here if you just right-click and inspect you can seein the console what these are so Let's doa before and after so this is export default app. So before we actually call this higheror component graphql, you'll notice your the propsjust an empty object. But now when we addthis thing back, we have some stuff in our propsthat are going to help us out. So first you noticewe have dot data and inside a datathere is loading. So loading is true and there'sbasically nothing else. There's a bunch of functions wecan call but those don't look how full right on thoseare three other things which some more complexbut once it's done loading, it'll say loading falseand it should get some to do so we can see this to do is here and we can actually see wow, look this looks like the datathat we had over here. Right? Well it's exactly that. So what we can do in our codenow is we can say kant's data and we can get loadingand to Deuce. So this is just D structuringit from the props. I'm getting the loadingthat we saw in the two deuce and I'm saying if it's loading just return null and if it's not what I wantto do is just to do this dot map and for each to do Iwant to just render it. So I'm going to render a div and I'm just goingto display the to do Dot txt and we can come back overhere going to load for a second and we got to see all our items. Now. We need to add a key. And the reason for this is we need to haveevery single one be unique and this helpsfor loading purposes with react it'll load faster and have less conflictsin your list. So I'm going to saypass in the to dude ID to make this uniqueI'm going to say to do I so this is a unique string that identifies each to doand then that are goes but we can seeour items right here. And now if I want to Ican change one of these items. So for example,I could remove a to do so, we have one to dodown here called item to I could remove him. And if we refresh it nowfetches it it's gone. So pretty cool. So those are connected to the same databasesame server all that stuff. All right. So this is a little teasera little intro and to Apollo and how we're goingto do our queries. But now what I want to do is add some material UIto make this look pretty and then we're goingto continue on with some more mutations and whatnot. So we're going to beadding this package. This is material UI from Google and it just makeseverything look really nice and it's a nice utility. So we're going to install gothrough the installation. So we need to installthe core of it again. Just going to control C and add that and then we needto add some things to our header some links. So to Port the Roboto font. And that's when we just goto the public index dot HTML and we can put that right here. And the reason this materialUI needs this font. So we're justimporting the font. So it has access to it. And then the other thing is wealso want to add some SVG icons. So I'm going to go ahead andinstall that package as well. All right. And the first thing I wantto do is render some paper and the reason why I wantto render some paper. This is a componentfrom Material UI is so I can put a liston that paper. So we're going to come backover here and the nice thing about materialize theyhave great demo so I can actually just take thisand grab what I want from it. So we're going to import paper. So to do that we have to importpaper from aperture you like or paper and then wecan actually render this. So I'm goingto have an outer div and I want to Center this guyand the way I'm going to Center this is by creating two divs. And you can actually add styling to these using the style propand this is kind of like CSS, but it's all camel cased. I'm going to say display flexand then the style here. I'm going to say margin Auto. I'm also going to giveit a width of 400. So now I've createdthis basically inner div and I'm going torender my paper here and then I'm going to give itan elevation and let's give an elevation of one. So let's seethat paper and action that we just added andonce we get this paper the way we like it we're goingto then turn the list that we have here and toit actual material UI list that looks like this and looks more like to doitems or check items. All right, so I reran the server and we can seeit's nicely centered and it's on some paper. Perfect. Let's go aheadand now add a list. So this is the list that I want to add and we're goingto just copy this and I'm actually just goingto copy this entire example here and we're going to takethe bits and pieces that I want from that. So let's grab thatand we're going to paste it in. I'm just goingto paste it in below. First thing that I wantto do is remove some of these things thatI don't care about. So the first three Imports wedon't need but I do need list all this list associate thingsand I do want the icons. So I want to copy thoseand just move them to the top where my other Imports are and then I basically just wantto merge these two I don't care about the style. We're going to addour own style. So when we're he was adding Styles here, I just wantto move their outer div, and I'm going to replaceit with my stuff. So this is what we added and I want to just addthe stuff in there. I guess the best way iswe're going to copy these two and we're just going to gothrough what this code does and just one second. I first want to make sureit renders, okay. So we're going to addthese two state is kind of interesting and this is justanother function will talk about state in the second. We don't care about the props. This is our list and we don't careabout these things either. Okay, so we're goingto take our list and plop it down here. And they're goingover their mapping and they're doingthis thing, right? So that's exact samething we did here. So we want to just replacethat map with to deuce and instead of value. This is going to be to doand here's our key. I'm just goingto call it to to ID. We could just pass ID, or we could do it like thissince our applications. Not too big. I'm just goingto pass in the ID. Now anywhere we see a value we're gonna haveto change this stuff. I'm not gonna worryabout the class name stuff. I'm going to remove that. So handle toggle. We're going to passin our to-do item and then here goingto pass in to do I guess this isa separate thing checked. I'm going to sayto do doc complete. So if the to do is complete, I would like to checkbox to be checked. Value I want this to be. Line item. I think that'swhat their rendering. You can come back over here. Yep line. I don't want this is a textthat's getting rendered. The text that I would like toget rendered is to do Dot txt. And get rid of that. Alright, let's go ahead and seeif this actually shows up. Okay, and then we're goingto walk through the code. All right. So this looks pretty goodand I can see my items and nothing happens when I click but we're going to go overhow we can get stuff to happen Okay, so let's go over the code. So starting at the top wehave this thing called state. So this is where we store informationabout our application that could change. So for example, they are keepingsomething called checked and this changes. So depending on what is checkedin the application. They're keeping track of here. Now, we don't really need state. So I'm going to go aheadand get rid of it because we're storing everythingand the mongodb is our state if you will and we're fetchingeverything with graphql this handle toggle thing. This I believe is okay. Yes. So when we clickon a list item for us, what we want to do is actuallyjust mark it off right when Click on thisit should be whoops. We crash it because we were not supposedto click on things. When I click on this we should complete it and wedon't need any more right? It should check off or whatnot. So here I'm going to just adda to do basically we're going to remove all the stuff hereis going to be update to do and it's just going to togglewhether it's complete or not. And this is goingto be a to do okay. So next bit. We can just go downthe code right here. So we have a list item. I don't know why they havea role of undefined. This stuff is probablya specific to material UI and how The Styling lookscheckbox disable Ripple. I guess that's when you checkto these are some CSS things that you can take on off depending on what youwant to look checked. This is a value of whether or not the checkboxes are checked. So for example, if I say true all the checkboxesare going to be checked here. They were all false. Because all of them to dodoc complete are false, but if I were to sayupdate one of them, so let's say the first one and just remove this updateto do ID complete is true. All right, so it's nowbeen updated in the database if I refresh can now seethe checkbox checks there. So all we need to dois update our database and this stuff changes. You can see our primary. This text is just goingto take whatever the text is for the to do and then this second part here is justthis rough whole right side. This is how we get this thingon the right now for us. We don't really likethis comment icon. Really what we want isinstead of a comment like an X to delete it rightand I'm just going to remove I guess I'm goingto remove this aria-label. We don't need it. So let's go ahead and dothat replace this icon with a new one. So we did all of these and we want next isto pick out an icon. So here it isthe website for material. I that you can actually searchand find all the icons that are availablein which one you want to pick. This is the one I wantto do this close right here, which is an X and it'sunder navigation. So to add this we're goingto scroll to the top and save a comment iconon this a close icon and I'm just going to replacecomment with clothes and we'll see if that worksclose icon refresh. And sure enough iconshows up as an ex. Perfect. So now I just wantto hook this up. So this icon buttonshould have an on click and we're just going to pass in. And here what we're goingto do is delete this to do right so we can create one. So this is called handle toggle. I'm going to call this. And I want to just do thisin a slightly different way. I'm just going to createthe Lambda like this. So it's a little bit simpler. Alright, so I'm goingto call this function update. To do and this is a function that is going to updatethe to do and I also want to do remove to do which takes it to do and we're goingto remove to do so, those are two thingswe need to do. So here I made a little Lambda that's going to callthis dot remove to do passing in our to do so, it should remove it wheneverthat gets clicked and then we every click this we're going to callthis dot update to do and the reason why wewant to do the functions like this you may have seenstuff like this. And we want to accesssomething called this and we can actually not accessthis and functions like that unless we do an extrathing called binding but this automatically binds so that's the reason whyI like using a function like this and general I would just recommend writingyour functions like this if you add functions, all right, so let's getinto the logic of how update and remove work. So I guess let'sdo update first. So to actually update we come to our playground wehave the code right here. So I'm going to copythis and I'm going to say update mutation. So what I want to do ispass in a variable ID in a variable complete or not in the way you do this with graphql is I'm goingto say dollar sign ID and dollar sign complete. So these are variables and I have to specifymy variables up here. So I'm have an ID and specify the type ID is goingto be an ID and complete. This variable is goingto be a Boolean. Both of these are mandatory and you need to make surethe types here match the types in your schema. So if we come here weexpect an ID required in a Boolean required. So I need to putthose here as well. So now I need to inject my appwith this mutation. Now I could do thisin a very ugly Way by doing this and then I could wrapthat entire application like so mutation oops, not mutation of it, but our update mutation, but you can see this willslowly grow and get super ugly. There's a function that react Paulo givesus called compose that's going to help us out. So I just leavethe whole application accident. There we go. Welcome back. So composed what we're goingto do is have graphql like that. So now we pass graphql allour graphql us are all are higher order functionsto the compose function which basically squishesthem together and then we wrap our app. This is just a little bitnicer way to write it. They're equivalentJavaScript though. Alright, so now what we can do is we've addeda new thing to our props and we can give it a name. I'm going to callit update to do. So now in my updateto do function I can say this dot props that update to do in this function isavailable in my props because I specifiedit here in the name. I specified matches. All right. So what I need to do to passthis is those variables and this is a asynchronous function. So I'm going to await it. And the variables that I need to pass in our an IDand complete so the ID I'm going to say to do dot ID and then complete I'm goingto do the opposite so to do dot complete. Some of the opposite ofthe current value of complete. So if it is complete right now, I uncomplete itif it hasn't been completed I now complete it. So, yep my server started if I come over hereand I click on this. It'll look likeit's not working. Right I clickedon every single one of these nothing happened, right you may be ohan error occurred or something, right? It actually worked if we refresh we'll seeall the items are there and if I click those to refreshI see those items changed. So why didn't updateright away, right? Why did we have to refreshthe page for this happen? Well Apollo caches allyour stuff by default, which is really nice because it saves you requestand basically optimizes things but it doesn't re fetchthe data whenever we update it. So what we need to do iswe need to tell Apollo to update so there issomething called update that we can pass our mutationor our function that looks like this and this allows usto update the cache. So let's copy this in andhow this works is the store is where the cash so you couldthink of this is the Apollo cash and right here. This is us getting the data. And then this is the nameof our mutation. So the name of this mutationis update to do and this name should matchwhat we have right here, which it does. So this data is what I get back from theto do update to do so, this should be trueor false Boolean of whether or not it worked. So we actuallydon't even need this if we were don't want to because we don't needthe response to update the cache we could just do that. So first thing we do is readthe data from the cache. And the thing that we need to updateis this to do is query. So I'm going to sayto Deuce query so we now have read this into a cacheand if we look down here what we were doingwe're saying data to do So here I want to dodata dot to deuce. And what I want to do isupdate one of the items. So I want to look throughthe two deuce and update the one that has an IDthat matches and change whether it's complete or not. So to do this, what I'm going to do is I'mgoing to say data to do stop map and I'm going to searchfor the correct to do and I'm going to say if x that ID matches to dudeID then I want to create a new to do or updatethe completion value of to do. Otherwise, I justwant to turn X. So basically what this mappingis doing is it's looping all through all the to dues until it finds the onewe needed to update. And what we want to do iskeep all the same values that to do as so this variableis coming from up here that to do has but change complete equalto to do dot complete. So just updatingthe value of to do. So we're sayingdata got to do so, we're updating whatthis value is looping through we're changing this one. So it now is equalto the opposite of complete and then we're just writingit back to the store. And then we just haveto say our query here is to do is query and our data that we're writingback is right here. So now if we come back here when I click on this itemit actually updates the cash which thenpropagates and renders. So I now get real timeupdating of my items and these are actuallypersisting to write I refresh they're still there. So it actually is in fact updatingthe database to so nice. So when do the same thingwith deleting items, so we're going to come back uphere and do delete mutation. And we have basicallythe code for that too. So remove to doand we just pass it an ID so we can copythat const remove mutation. Pass that in and herewe want to pass in a variable called ID similarto what we did with update and it's going to be an ID. And we're just going to callthat and I want to basically pass the same dothe same function. So I'm going to copyit and paste it. So there's going to bea few differences. The name of our functionis going to be different. So I'm going to scroll down hereand I say graphql. This is going tobe removed mutation. And the name. I'm going to callit remove to do. And come back up here. I'm going to say remove to do. And variables we want to passin we only care about the ID and then the update the storeinstead of this mapping stuff. We want to removean item from the list. So to remove an item fromthe list we're going to filter. So we're goingto look for the ID that is not equal to Du Dy D. So we're going to filterthrough the items and only remove the itemwhere these two match up. So in other words if the IDS don't matchwe want to keep that so we're comparing it against the one we need toremove another important thing. I did not mentionabout this update function is you want to make sure towhen updating this not mutate and create a new instance of it. So with Filter we createa new instance of that array. So let's see this and oh, will you just makethis an async function? Just like we did updateand let's go ahead and delete this. So when I delete it, we should see these two Redsmatch up and sure enough. We do and Ali another oneand our delete function looks like it's working properly. I refresh we should seethose items gone and nice. So there's one last thing that I want to do and that is creating to deuceand so we want to create just like an input field at the top where I can typestuff and submit. So I'm going to createa new file called form dot JS and this is goingto store our form and keep track of the value as the person types it out. So I'm going to import react from react wheneveryou create a component in react you alwaysstart off like this and we're goingto export default. And we export this like thatso you can import it in our app. So I'm going to sayform extends react component and we're going to render and what we want to render is aninput field in the input field that we want to render isthe nice material UI one. So this one looks really nice. We're just goingto do the basic one. We can just grabthe import statement. And we can grab thisjust this first one. Okay, so we're goingto talk about on change in value in a second. I'm going to removethose three fields in the ID the label I'm goingto call this to do dot dot dot and I'm now just going to renderand our app that form. So first I guess weshould import it. So import form fromdot slash form capitalization is important thereand we're going to render it and when I render itbetween the paper and the list. So now we should seean input field and we do hey and I want to makethis full width. So it extends the whole thing. And I don't know. Yep. So there's a propertycalled Full width we can just pass on that. And now it should extendthis whole length. Perfect. So now we can even see this iswhere the helper text is. I just call that to do, but you could callit whatever you want to type all that stuff inand then hit enter and then add or item right? So we need to addsome more stuff to a form. So we need to keep track of what the user is typingin to keep track of that. We're going to use state. So I talked about earlier that we wanted to managestuff in our state and data that changes. So this is going to be textthat changes at first. It is just an empty string and I can get that textfrom this dot State and a pass that value in. So the value of the text fieldis equal to this text. All right whenever someone Typeson changes called, so there's an eventcalled on change and when this is called and I'm going to callthis handle on change or we could justcall handle change. And I'm passing this function. Okay, so I want this functionto be called whenever this one is it's going to be passedan event and if we do. New text is going to bee dot Target value. So e dot Target that value is going to be have the new textthat the user just typed in. So this new text do you wantto now store in the state? And the way you updatethis state is with this dot set State and then youpass in the new value. So I'm going to saytext is equal to new text. So This Is Us updating the statewith this new text value. So whenever I'm typing on change will updatethe value in the state in the state will propagate in the state now is goingto change the text field value. So now as we're typing thisyou can see the value and if I were to Console DOTlog this new text. We can see the value each letter that we type you can seeeach letter that I type. It kind of makes a littlepyramid here and it adds on the new text value and then wheneverthe user hits enter what I'd like to dois submit this if you will or createa new item here now, I'm just going to defer towhatever app dot JS wants to do. So I'm going to pass a prop. I want to call itfrom App dot JS. So to do that. What I'm going to do iscreate a function called handle key down. And here I'm going to sayon key down handle key down. So now every timeI press a letter both key down inhale changeyou're going to get called. Now. What I want to do is listen for when the personhits the enter key. So whenever they hit the enterkey we want to submit the form. So to be able to knowthis we have access to what Q is pressed. We get this by doing e dot keyand we can check if it's equal to enterand if it's equal dinner, what we want to do is callthis dot props dot submit and I want to pass inthe current value of text. So this is something I wantto pass down from App dot JS. So when I call thisI want to say submit and give it a functioncalled this dot create to do so up here. I'm going to say create to do. And we know it's going to haveone value in here called text. So this is the functionthat we're passing to submit and then our form we're callingsubmit passing in a string which is text. So here is we wantto create to do and we want to come overhere to our playground and do create to do and really there'sonly one value for this which is the text and then what stuff you want toget backslid the text complete and we want to get itall back in this case and we'll see why in a second. I'm going to sayconst create to do mutation. Pass it in and then we're goingto have one variable here. I'm going to callit dollar sign text. And by the way, you do not have to callit the same name as what you have here justa good convention that I like to followso text string and that's going to be mandatory. Come down hereand actually all the way down because we wantto add another one. So this is goingto be create to do mutation and I would say create. So in here now, I'm going to say and wecan I guess copy this because we're goingto be doing similar things. I need to makethis asynchronous. I'm going to say createto do the variables that I'm going to pass in isjust the text and now I want to update the store after we create the to do because I want to update theto do query and add my new to do but here I careabout the second thing because the second thinghere data and then create to do this is goingto have three values. It's going to have the IDthe text and complete which is what we need. So I'm just going to push it on so plush and we're goingto add this create. So we read what to do is wehave cashed we add the new item that we added and then wewrite it back to the query. So usually what Ilike to do is just add a console log statement to see if this is not getting called or what could possiblybe going wrong e dot key. This might be an uppercaseenter not a lowercase. Yep, and that was the case. So watch out for that and you'll noticethis did not clear. So two things Inotice first off. This is not clearat the top we want to do that and secondly it addedat the very bottom. I want to add it at the top sowe know this was getting called and after we submit we're justgoing to say this dots that state and set itto an empty string and that will clear it and then our app dot JSwere pushing to the end. There's a function called and shift this adds itto the beginning. So if I say first we nowhave an item at the beginning and now I can justrapid-fire create items if I want to can checkthem off and delete them if I want and we havea whole to-do list create it so that is it for this tutorial. We did all the operationscreating reading updating and deleting to-do items. I hope that was helpful and you got a good graspof how to do this. Will taste of how graphqland react works. Hi guys, this is Alia callfrom Eddie Rekha. Today. We're going to learn how to become a superhero just kidding now becoming a fullstack web developer is no less than becoming a superhero. It was continuous dedicatedpractice and a strong will to learn with this in mindin today's session. We are going to discuss how to become a fullstack web developer. So let me run youthrough today's agenda. We're going to begin with whatis full stack web development. Next we will discussthe different layers of full stack web development. After that. We look at the different typesof web developers over here. We'll discuss front-end back-end and full stackweb developers next. We'll discuss a few reasons as to why you should practicefull stack development. Once we're done with that. We'll see how to become a fullstack web developer over here. We'll see what exactlya full stack web developer does will discuss how the front-end back-end andthe database management works. All right now moving onwe'll finally discuss some important webdevelopment tools and Allergies that you must knowin order to become a successful web developer. So guys, I hope allof you are clear with the agenda without wastingany further time. Let's get started. So what is fullstack web development? I'm sure you all musthave heard a front and in back in web development, but what is full stackweb development now full stack web developmentbasically involves front-end and back-end web development. It requires in-depth knowledge of the differentscripting languages like HTML JavaScript CSS, which make the web lookmore interactive and Alive. It also requires high-level programming languagessuch as Java Python and so on to codethe server side apart from this you also requireexperience in working with JavaScript Frameworks, like node.js and libraries such as jQuery and so on nowin the further slides, I'll be coveringthe different aspects of becoming a full stackweb developer in depth. So stay tuned. So before we move onto Waterfull stack developer does and how a front-endand back-end developer Works. Let's look at the Ben layers of full-stack first we havethe presentation layer or the front end of the webthis layer helps you interact with the web watch videosperform actions like register to when online shopping site, so guys, wheneveryou serve a website the different fonts images and the content of the websiteforms a presentation or the front endof that website. So basically the design lookand feel of the web is accomplished with the helpof HTML CSS and JavaScript, then comes the logic layeror the back end layer. Now this layer formsa dynamic connection between the front endand the database. So every time you searchthe web it's the logic layer that transmits your requirementsto the database and Returns what you searched for all of this is poweredby a web server. Now in order to getthis layer working. It's important to know at least one of the programming languagessuch as python Java or C, hash. Okay. Now lastly we havethe database layer. This layer isa massive Warehouse of information it Containsa database repository which captures and storesinformation from the front end through the back end. Now a prerequisiteover here is to have knowledge of how datais stored edited retrieved and so on languages such as MySQL Mongo DBare a must to know now, let's look at the typeof web developers. So guys front-end developers areresponsible for a websites look and feel these developersmust be Masters at three main languages, which is HTMLCSS and JavaScript. They also need to be familiar with Frameworks likebootstrap angularjs and ember.js which make the websitelook more interactive and Alive libraries, like jQuery also help to packagecode into a lightweight and compatible form now movingon to the back end developers. Now the back endof a website consists of three componentsthe server the application and a databasea back-end developer creates and maintains the web serverapplication and the database which allows the front end of the website 20 Greatto make the server application and a database to communicate with each otherback end developers use server-side languages like PHP Ruby python Javaand.net to build an application. They also required to operateon tools like MySQL SQL Mongo DB in order to fetch tour or edit data and thenserve it back to the user in the front end now guys, this is how back end developerswork now moving on to full stack developers. The term full stack developerwas popularized in a meeting around eight years agowhen Facebook announced that they are lookingto hire only full stack web developers now basically a full stack developershould be knowledgeable enough to work on both the front and technology andthe backend technology. So he needs to havean understanding of how the web works at each andevery level including setting up and configuring Linux or Windows servers coating server-side apisrunning the client side of the applicationby using JavaScript. Structuring and designingthe web page with CSS and HTML a full stack developeris like the Jack of all trades one must have enough knowledgeto run both the client and the scripting side. Now, let's discussa few key points about why one must practicefull stack web development. One of the reasons is the first and developers can choosefrom a rich set of tools and Technologies for creatingand designing unique code. They are not restrictedto a certain set of tools for development because there are n numberof Frameworks and libraries that will assist a fullstack developer and achieving an effective web application. Now, the next reason isdesign and development. Now one of the best things about working asa full stack developer is that you're not restricted to only development as a fullstack developer you can design and style your application. And then if you'rebored of Designing, you can probably switch to your developer mode nowdevelop skills come into handy when you want tocreate a functional and a bug free application a full stack developer isbasically Create a person who can both developand design an application. So guys I'm now going to lieto you a full stack developer is like the Stephen Hawkingsof web development after mastering very scripting and programming languages and working alongsideseveral Frameworks and libraries a fullstack developer is no less than a master. Of course one requiresto have work experience and a lot of knowledgebut nothing is unachievable. If you have the willto do it apart from that a full stack developeris highly valued in all parts of the world in the USthe average salary of a full stack developer isover a hundred and ten thousand dollars not only in the US all around the worldfull-stack developers are in high demand. Now that you havea basic understanding about what a full stack developeris let's dive deep into how to becomea full stack developer. Let's look at theresponsibilities of a developer. And what exactly does he do? All right, so guys to beginwith you must have a decent understanding ofhow a website or a web. Application is built and what tools and Technologiesare used to do so, so let's begin with a front-endweb development to master front-end web development. You need to knowmany Technologies, but the main Technologies areHTML CSS and JavaScript now HTML which stands for hypertextmarkup language is the skeleton of every web page. It defines the structureof the web without it. The web would be asshapeless as a lump of clay by using HTMLyou tell the browser how you want your contentto be structured by defining the different partsof a web page. For example, you definethe content of your web page within HTML tags. Now these facts tellthe browser which part are headings body sidebars and Footers this not only helpsto structure the web page. It also lets you styleeach HTML element by selecting them and then adding differentstyle parameters now CSS, which stands for cascadingstyle sheets is like the clothes we wearto look stylish and attractive. That's DML elements. We Define can nowbe styled using CSS. For example, you can changethe color of the header add in style various buttons. You can also use CSS to adjustthe width of the HTML elements. You can style them by adding color and designyou can also play around with buttons and make themlook colorful and attractive. So guys, you can stylea web page in any way you want CSS has thousandsof styling functions, which let you design and make a webpage looklike a beautiful painting. Next up is Javascript. Now before I get on with half would suckdevelopers use JavaScript. It is important to understand how JavaScript WorksJavaScript is basically a language of the web which every browser PC and mobile phone understands nowJavaScript can natively run on the browser by natively. I mean that most of the web browserslike Google Chrome Safari and Internet Explorer havea JavaScript engine embedded into that browsers. Okay. Now this JavaScript engineinterprets the But script code so that it can runon the browser. So guys, this is exactly how JavaScript runson the web browser. Now where isJavascript used now? Let's look at an example. So guys when you're browsingon a webpage you come across many buttons on clickingthese buttons some event occurs. Now JavaScript hasevent listeners with perform specific actions on the clickof a button like for example on the click of a buttonanother page might open up or a personal detailform can pop up. All of this is Possibleonly to JavaScript. It is basically used man you play the HTML elements addmotions and Graphics to them. So any sort of motion that you see on your web pageis all JavaScript now that you have a good idea ofhow food sack developers work on the front end. Let's look at the back end now when a user opens up a webpage and clicks on a linkor submit some form or let's say he enters our URL where does this datagets stored and how does the browser return in? Mission to the user. So basically the browserconnects to a web server now a web server is just a computerrunning an application or a software that delivers resourcesto the web pages. So guys when a web serverreceives a request for a resource, it has to respondwith that resource. So how does it do that now basically backend developers program the web servers to respondwith the right resources. So the main aim of the web serverhere is to respond with the correct resources. But where do they getthese resources the web server is connected to a database which is continues the coldon receiving some requests. So the role of a full stackdeveloper here would be to create an application that fills a web pagewith the required resources, but pulling datafrom the database. Now this application is programmed usingserver-side languages like Java python PHP node.jsand the database is also programmed using languagessuch as MySQL Mongo DB and SQL. So guys, basicallyThe back end of a web page is used to serve the requiredresources to a user. So here we just discussed how the front-end developmentis used to design. The user facingpart of a web page that lets us interactwith the web page. We also discuss how the back end is usedto deliver a web page to the browser alongwith the requested resources, which are retrievedfrom a database. So guys, this is whata full stack developer does. He has to createboth the front end and the back end of a web page. All right. Now, let's look at some of theimportant Technologies and tools that a full stack developermust know first of all a full stack developermust choose a code editor that is best suitable for him. There are hundreds of codeeditors out there personally, I switch betweenVisual Studio code and Sublime Text. They're the mostuser-friendly code editors, but you guys can go ahead and choose whichever codeeditor you like now. The second tool isa Version Control System a Version Control Systembasically is used to keep a track of all the changes that you maketo your code files. Any sort of documents nowlike the name suggests it creates versions of your code or your file every timeyou change something. So let's say that you createda web application and added an additional feature to it. But for some reason this featureslow down your website and you want to go backto the old version of your website. So usually it isvery hard to revert back to an older version but a version control systemtakes care of this because it has a trackof all the code changes that you've made and it can easily revert backto any code change some of the popular VersionControl Systems include get and subversion now guys that are thousands of JavaScriptFrameworks and libraries which will come handy duringweb development Frameworks, like node.js can have with backand development of a webpage and JavaScript librariessuch as jQuery can help at the front endto design a web page. Then there is angularreact backbone meteor, which are all very usefulto a full stack developer a full stack web developer is Reese familiar with a couple of JavaScript Frameworks and the best part of these Frameworks is that after learning JavaScript which you will definitely need while developing the front and they are very easy to understand next up. We have had 3 TP protocols. Now HTTP is basically a stateless application protocol on the internet which allows clients to communicate with a server. So basically it enables communication between the frontend of your webpage and the back end guys. Let me tell you that there are a lot of web developers out there who don't know much about HTTP, but it is quite essential to have an understanding about HTTP and how the internet works. It is also necessary to understand what is rest and why is it important in regards to the HTTP protocol in web applications apart from all of this a full stack developer obviously needs to have prior knowledge about running the application on operating systems such as Linux windows and so on because at the end of the day all of this is running on top of an operating system also a lot of fools Developers have brushed up on various project management tools like jira teamwork base camp to effectively carry out the web development process. So guys becoming a full stack web developer requires good amount of effort and dedication, but is it worth all the effort? I would say definitely it is it is the most value designation. And once you practice full stack web development, you'll become a master of the web and a Tedder a copy provide a full stack web development course that has all the required tools and technologies that you need to learn and we also make sure that you don't just learn it you master it.
So guys if you're interested in learning the full stack web development master course or any other training Technologies, let us know in the comment section and we'll get back to you at the earliest. So guys, thank you so much for Reading this Article. Have a great day. I hope you have enjoyed Reading. Please be kind enough to Share This Content and you can comment any of your doubts and queries and we will reply them. At the earliest do look out for more Articles in This Blog to learn more. Happy learning.
Web Development Full Course For - Tech >>>>> Download Now
ReplyDelete>>>>> Download Full
Web Development Full Course For - Tech >>>>> Download LINK
>>>>> Download Now
Web Development Full Course For - Tech >>>>> Download Full
>>>>> Download LINK ds