Web Development Full Course – 10 Hours | Learn Web Development from Scratch | Edureka

Web development broadly refers to the task related to your web applications or web pages it basically adds up life to your otherwise ordinary web page 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 But before we begin, let’s have a look at today’s agenda So first we will begin with the basic language that you need for web development That is HTML and then we will move on and learn how to add more styles to your web applications with the help of CSS Next up We will move on to the JavaScript programming language that will help You know, how you can add more motions to your web pages now once you’re well-versed with these programming languages for web development you To know about the jQuery library 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 Once we are done with the front end part, we will move on to the back end and have a look at node Js now Once we are done with all these Frameworks We will move onto applications such as the mean stack application and then the months that application now that you’re well versed with all of these programming languages and their Frameworks We will see how to become a full stack web developer But before this don’t forget to subscribe to Edureka’s YouTube channel and stay connected Hi folks, my name is Aryaa and I welcome you all to this HTML tutorial So 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 dozens or 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 Now, let me just give you a brief introduction to the structure of HTML Now this is also called an HTML boilerplate So firstly an HTML boilerplate 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 Now to create an HTML page There are a few steps the firstly you need to open any sort of text editor It could be notepad plus plus notepad Sublime Text or even Visual Studio code You have the freedom to use I would text editor you want next you have to write up some HTML code that you want to show on your webpage 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 still not understood that so let us create a folder first So let’s call this folder HTML demo And now we’re just going to use Sublime 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 boilerplate 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 H 1 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. / B and 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 is a 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 Dota 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 and let’s say Templar Assassin Let’s save that and let’s see So these are some of my favorite heroes in Dota 2 Now, if you see our H2 is kind of indented that is because we have put it inside our list now if you were to just cut it out and put it outside this region is my lines and let’s see So now it’s probably showing that these are some of my favorite heroes in Dota 2 You can also put in images in these list items So suppose we were to put in some images of Shadow fiend storm Spirit you would just put an image out here and you would put the source now, I don’t really have images but you can also put in the URL of images So let me just show you how 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 like a nice cartoonish figure so you open this image in the new tab and we copy down this link so you can see the source is this link? Let’s save it Let’s see if it shows up Yep And now this thing shows up just outside shadow fiend You can also put in some styling or some attributes like it’s a width is going to be a hundred pixels and height is going to be a hundred pixels So let’s save that now and now it’s much smaller image of Shadow fiend Now we have other types of tags also, so these are called div tags so div tag stands for division So to divide your page into separate parts, you could say this will contain the footer So footer tags are normally coming in the end

Now you can also have a div tag in the beginning and this could contain the header So these tags will contain the header This is so let me just put in some header so Is the head of and this is the footer So this is the header head is always come on top and this is the photo Now you can also create forms using HTML So let’s go ahead and create one So our farm is going to be called a registration form Okay So now let’s put our form and a div first of all, so let’s give our div an ID So IDs and classes are actually used to select stuff or an SDM a page when you’re styling So to understand more about ideas check out our CSS tutorial that if this ID form or registration form rather and let’s go into our div and create a form or form will always stay inside our form tags Now that we have done that that’s understands the elements of a form firstly we need an input So first input will be of type text Let’s say its name is going to be first name and will help placeholders I sound like this see REO and we will always be requiring So if you say required that means somebody will if he’s actually in putting stuff into the form This is a mandatory field Okay So let’s save that and see so now we have a registration form called Aria Okay So we also need labels So let’s go ahead and create one so label So for first name, and this is going to say first name That’s gonna have a: so now there’s a label called first name now we can do this for last name also So let’s control C control V So it’s going to be last it’s going to be lost and this is also going to be last and you want to put a placeholder for pause and this is also a required field So now we have a last name with this placeholder We can submit stuff into that Now form also takes into important attributes I forgot it mention So one is the action and the other is a method now action is something that will happen when you submit this form so you can run a script something like script dot PHP, but for now that’s for another session Okay Now there are other types of inputs So let’s see, let’s create another div now suppose you want to input the gender also, so, let’s see, let’s first create a label And that’s also created input type So in vertebra type of radio and it’s going to be called gender male and let’s also give us a value of Choice One save it now you want to label and you want to give it the attribute for and you want to give in the name of here So let’s put in that so gender male save that and let’s write meal out here So let’s see if that now and let’s see what it looks like Now We have the sink on meal we can check it and we can uncheck it now Let’s create for female also and others So, let’s see Let’s call this female I’m just going to be of type choice, too Now we have meal Yeah female if you see we can 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 submission going on so male or its female or saddle now, we can’t really select everything So how do we actually solve that so let’s give them all the same name So you can call it gender Choice save it Now you either go male ego female or you go other you can’t really select the same thing So that’s how you make that happen Okay Now let’s look into some other types of input types we can taken so let’s create another div suppose you want to take in the email address? Let’s go ahead and copy that spread out here Let’s say celeb will for let’s see First of all, we need to change this type to email and we will also give this a name of email Let’s burn a placeholder instead of a value and it’s going to be something like let’s put XYZ after eight email.com Now we have the sing going on So let’s change this label to email and let’s change the label to email too Now we have the sing going and we can type in our email

and we will also need to type in a password for registrations It’s called this password also make this password The type is going to be password And let’s remove a placeholder because passwords don’t really have placeholders Save that and now you see when you type in a password you can’t really see anything That’s how you make a foam that inputs a password Okay, so that was how you taken emails and passwords in a form now There are some other stuff that 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 tag to select tags are used for making selections So let me show you how that works Firstly Let’s give this a name and it’s called this birthday or let’s call this the month now we’ll also need a label for this screen label So a label is for month It’s called Birthday Now I select can have various options So you’re basically going to 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 are going to have values So our value will be something like fine So let’s say Chan Fab March April May June July August September October, November and December And you can see January 02 February Let me just create this quickly March Let’s save this now Let’s see what this looks like So we have this birthday thing and it has all the months in there Okay now out here if you see it already comes with a default value of January now, you can also mitigate that by putting in another option called default Let’s put another option or So now that we have an option, let’s give this a value 0 and say select it to save old I hit reload This does nothing but you got all these different values Now instead of just making it blank you could say that this could see month It’s another sales month and you could create something similar for this also So four days, you need to create 30 of these and I hope you get the logic of creating this thing now Now our form also needs a button to submit So let’s go and create that also Let me show you another type of input So let’s say input and the type will be check box and the name will be agree and let’s put a label for this a for agree and I agree to all the conditions of form No, we will have this thing going and we have a check box You can check it we could uncheck it something like that Then all we need is an input and on an input We don’t need a button is a button and you say submit and you also have to give this a type This is going to be of type submit So once that’s done, we see this button and we can submit it So if you go and submit you’ll see please fill out this field because it’s a required field and that’s all that is dead forms So that’s how you create a form in HTML You can also create tables in HTML So let me show you how to do that Let’s reload and make this blank save it Yeah, so a tables are created with table tags your table and tables have tabled at has okay, so we can also create tables in HTML for that We need table tank now table comes with the table header first of all, so this will contain all your table headers So suppose you are creating a table for dogs and the breeds the th dog and you can say the dog was has a name and breed So this has created a table header now, so let me just show you what that looks like So now we have the dog named and breed now we can just

simply go in and put in some table rows So fortunate row you say TR and in every row you will have to put in some table data So for that you use a table data tags, otd So let’s say our dog is called So let’s make this rather dog owner name, right? I had a dog and my dog’s name was Stoner Scott him Stoner and Stoner was a street dog So let’s just keep the breed a street Okay, so that was one table did a rule save it now, we’ll be needing multiple table rows So let’s just copy that paste it multiple times So let’s say my friend shabam He has a dog called Goldie and it’s a retrieval and then I also have this friend called ayushman Yeah the dog called Duke and it’s Husky and then there’s this guy called ishaan He has a dog called Monster but it’s a pug Yeah So now we have successfully created a table and you guys you guys can see dog owners are Aria shubham ayushman and ishaan their name of their respective dogs is total goalie Duke and monster and the breeds are Street retriever Husky and pug so that’s how You create a table now with CSS You can add a border to The Stables We just show you how that’s done with a little bit of CSS So it says style let’s say text / CSS now out here you could just this one little styling Let’s say let’s give our table a border of 1px solid black Now, I table will have border and we can also give TD’s a border and in they’re going to have 1 PX solid black to so now everything has a bottle and our table looks much neater Yep So that’s how you create a table in HTML OK guys So now it’s time I actually show you how HTML can be really polished sometimes So let’s go ahead and create a blog The first blog I’ve already created the CSS out here, so I’m not really going to be explaining the styling part, but we are going to be creating our blog So let’s go ahead and see how that 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 linking our style sheet out here So for licking a stylesheet all you have to say something like this and then we go ahead and copy my style sheets The desktop we’re doing a stuff in sgml demo Let’s copy this here right now Our blog dot CSS is going to be here Now Let’s go start creating our blog so firstly let’s put everything inside a div Now this is going to have a class called post because I’ve used the class to actually style some stuff now that’s done So let’s have another div So this is going to have a class called date and we’re going to be putting in the date So let’s say our date is going to be October 24th 2018 Now, let’s say we have a heading so let’s say a Vancouver my favorite City Then let’s put in some paragraphs because every article needs a paragraph for paragraphs You’re just going to be filling it with some lorem ipsum Now a paragraph will have a class called coat Okay Now let’s reload and see what’s being made Okay So if you guys can see a blog post is coming up now we can also add some images to our blog post So let’s say let’s add a link first So we link to https W dot Ed u– record dot go now We are going to use an image for actually making it clickable So we already have an image that’s called image 1 dot jpg So that’s there It’s also put an ALT tag out here just in case it doesn’t load up So alt and say Vancouver image now, let’s put in some another paragraphs So not a lot of Epsom and more paragraphs, I guess because this is a block so let’s make it look like a block Save that and let’s also give it a horizontal line to make it look neat Save this let’s load it Okay, so we have this nice looking article and it has this image If you click on this image will take us to Eddie wreck our site So we go to edit record if you click that image, let’s add another article into this just to make it a little longer

So let’s copy down the stiff So let’s change the date first because let’s say we posted on the next day as shins title So the my second blog post save it Let’s remove the image from this one to make a little different Yeah Now if you see ya this nice-looking blog post going on it has this horizontal line We have some code out here and that’s how you can do stuff with HTML Hi guys, my name is audio and I welcome you all to the CSS tutorial in this tutorial We’ll be covering from the basics of CSS to some Advanced CSS which includes animation Okay So before we actually start with coding our own bit of CSS, let’s go through some of the basics So what exactly is CSS? Well CSS stands for cascading style sheets and is generally used to control how HTML tags and elements are displayed on your screen So this means basic styling of your web page is controlled by CSS Now CSS was actually made to solve problems that were introduced in HTML 3.2 now HTML 3.2 gotten some new attributes, like font color background color, which generally was put into styling of element on a web page Now while this did add some very very needed functionality into HTML 3.2 it cluttered up your code as a developer and media life pretty miserable So to keep the structure of your web page, which is The sgml and to make the styling a different aspect CSS was made by w3c So w3c stands for the World Wide Web Consortium And CSS till date is still being maintained by the w3c developers Okay, so that was a general introduction to CSS Now, let’s move ahead So this is the basic syntax of CSS You basically have selectors which selects or targets the place that you want to attach your styling to then you have basic properties and value pairs Now, you can include your CSS into your HTML with a link tag while putting the href attribute as the file name or you can do some inline CSS, but that’s not actually recommended because that’s the problem that we are actually trying to mitigate by putting CSS as a different file Also, if you don’t want to create another CSS file, you can do some internal CSS by putting in some style tags in your head tag and just writing some normal CSS to it Okay So now let’s see the different type of CSS selectors So these are all the different type of CSS Electors and basically a selector is a way of targeting an element on a web page So the star selector selects all the elements and applies the CSS that you would apply to it And then if you would say div then it would apply your CSS to all the divs now div comma P will apply to all the dips and paragraphs div space p will put your styling to all the paragraphs inside those now going through all the CSS selectors is a pretty cumbersome job So I recommend that you go through this page on w3schools, which has all the different types of selectors and the different types of pseudo selectors all this shit out So this will very much help you when you’re doing your own CSS So always keep this page open now just for basic sake let me just tell you about pseudo selector So we also have pseudo selectors which is defined something like this So pseudo selectors include stuff like overactive visited and stuff like that now suppose you are hovering over an a tag so you can say there is supposed to 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 actually specify The Styling that you want Now you could also find all these types of pseudo selectors out here and it’s all listed out here So a visited like select all visited link something like that Now I also want to make you aware of the Box model that is very much used in CSS Now Box model has four things the content padding border and margin so content is a basic content of the web page that you want to show to you your general audience and the padding is space between your body and the content itself The border is a line that can be of any size color and width and then there’s a margin which is this distance from the edge of the screen to the bottom Okay, and now the Box model looks something like this So the content comes in between then comes the padding which is between the border and the content and then there’s the margin which is between the screen and the Border itself the screen Edge and the bottom, right? So that’s all the Box model works Now The last bit of Basics is CSS units, so there are four kinds of units firstly we have the pixel So pixel is represent any pixel on a device so you could say something like font size is equal to 25 pixels So it’ll make it actually 25 pixels Then there’s also points which is mostly used in print media and all you need to remember to use points correctly That’s 72 points equals 1 inch now the last two types of units are relative units now,

these are relative to your current font size So 1e M or hundred percent is actually equal to your current font size So if you want something to be double your font size, all you have to say is 2E M So these are how relative units work in CSS Okay So that was all the basics of CSS and how you select staff and all the units now, let’s get ahead and code some of our own CSS So far this time, I’ve actually created a bunch of HTML pages and we are going to style these SEO and Pages by adding some CSS into them and this will stand as good practice for CSS alone Okay So for the first page we have this page called page 1 dot HTML and it’s a pretty basic page Let me just open it up and show it to you guys So this is what it looks like without any sort of CSS being attached to it Now We are going to create some CSS and we’re going to try and practice first of all selecting stuff in different ways possible Okay, so firstly let’s do some very random CSS Okay, firstly let’s star get all the divs in this HTML So how would you actually do that? Well, you’d say div by going selectors and let’s actually save this as a CSS file first so that our syntax is colored properly Okay, so that’s a div So that’s how you select any element and CSS now suppose we were to say back Own color rather just background It will be posted and the text or the color of the text will be white So now everything inside a div will look like that So now let’s just save this speech one as you see if that’s page one dot CSS Let’s reload our page and everything that is inside The div now has a white text and it also has a purple background Okay Now, let’s see how we actually select IDs So we select IDs with the hash So we have an ID called coat out here if you go and see so, where is that thing gone? Okay So this paragraph out here that you see as the ID called coat So we’re going to select that and put in some of our own CSS So let’s see now that we’ve selected our ID We can say suppose we want to change the font family so we could say font family is where Donna and you could also put in alternate font families just in case where Donna doesn’t In your system, like kills hands fine So that’s how you set up your phone family Let’s also set the color to be black Let’s see what changes now So this is the code that I was talking about So that’s van should change now, let’s reload Oh, yes Now the font has become verdana and that’s what we exactly wanted And the text is also black knife Okay So how do we select classes now? So if you go here and see we should have a class called movies, right? So all these have a class called movie all these a tags So let’s select them First of all to select the class you say dot and then you say the class name now we could put in some random CSS into this again So let’s make the color Let’s keep it white and let’s make the background steel blue Let’s see So where are movies? Let’s see where the movies actually exist Oh, yeah DOTA Splinter Cell and God of War These are the movies So this should now change let’s save it and now they have a background color of Steel blue and they have a text color of fight and that’s exactly what we do find out here fine Now, let’s try out some other types of selectors So suppose in the span out here we have this idea called Auto so what if we only want to Target that what would we see so we could say expand and hashtag author now, you could put any type of CSS So let’s say text transform So this is how you transform any sort of text and you can see uppercase now the auto will be changed to uppercase out here and this is the auto the pope Alexander park now watch that now, it’s just uppercase and we have selected it with the selector called span and hashtag autumn We can also do some other kinds of selecting Let me just show it to you so we can select the allies of the unordered list or the ordered list So our skills is the ID is the ID of skills So let’s select that now so we have skills and we could go the ordered list and then the Li and what we want to say out here is color will be purple We can do the same thing for the unordered list to let me just copy that down put this here say unordered list and let’s say we change the text color to white save that let’s reload up H So we first of all let me uncommon this

Now let’s say that again reload our page and see the differences now since we had given it a purple color It’s now all purple and let me just put background or white So that you can see it Yeah Now these are purple and these background white we can do the same for the unordered list to let me just uncomment that let me also give it a background of purple or actually, let it be like that Let’s just make it blue Now SAS & Hamill have turned into blue as you see here This is the blue thing fine Now that was selectors Okay Now let’s go ahead and select some other stuff So what if we want to select all the paragraphs that are off to the H3 tags? So if you remember we can do that by saying it’s 3 plus b and let’s say we want a background of black and some text color That is white so color flight not being very creative with my CSS at this moment because this is just about selecting So, let’s see how that reloads Yep Now, we have a color of white and the background of black and that only selected the paragraph just after the S3, which is my favorite video games Okay, we can also select every paragraph that has a class by just saying something like B and class we don’t even need to specify the color or I mean the class name so you go background Let’s say we want to give a gray background Let’s see all the paragraphs of the class So this is the only Paragraph with the class Now, you can do the same thing for IDs just say idea out here and let’s see all the paragraphs It’s an ID So this is the only paragraph it’s an ID Okay So now that we’re done with selecting stuff Let’s go and actually see how text can be transformed with the use of CSS Fine First of all, I already have a page created for that So this is going to be our page that we are going to use to see how Texas transform if you see I have an ordered list with all the types of text Transformations or the text tilings that I want to show and we also have a paragraph out here which will show the basics box elements like the borders margins and padding So I’m going to demonstrate that through this PID out here, right? So let’s get started First of all, let’s create our CSS file and in the CSS file, we’re going to save it and we’ll call it page 2 dot CSS, right then Yeah, it’s connected as page two So let’s get started So first of all, let’s star get this ID with lorem So lorem ipsum is just some Latin paragraph that is normally used in web development to fill in spaces with text where you can always come back and delete that text and fill it with something more meaningful Now we are going to be using this lorem ipsum thing So it’s in a paragraph tag with an ID of lorem So let’s go ahead and select it So we are going to select it with the help of the ID call it Lauren Now First of all, let me just show you what the page looks like without any CSS attached to it So this is what the page looks like, right? So this is the part that we are going to Target right now First of all, let’s give it a background Of black let’s make the color of the text white lets me show you what that looks like Okay, right Now, let’s give some borders and pairing its first of all to give a porter we could say we use the Border act for property Then we give three parameters the type of the bottle the size of the body and then the column and you do it something like this 3px solid red now apart from solid There are a lot of types of borders and those include dashed dotted rigged and many more These are the ones that are just from the top of my head so you can try at them out and you can find other types of CSS body just by going to Google and saying CSS border types So these are all the types of bottles that you get and you can definitely check them out It’s impossible to show everything in one video like that So, let me just show you the solid tip So let’s save it and let’s see what kind of board we actually get Let’s go This town Yeah Now we have this neat little border of three pixels in size and resin column Now, let me just show you how taught it would look like So this is what brought it looks like and this is what – looks like fine And this is what – has Okay Now let’s also give this thing some padding now padding exists between the content and the bottle So I just explained the Box model when we were discussing the basics of CSS So I hope you remember that so for padding there are four parameters actually the right top left and bottom so you can Define your Paddock something like this You can go 13 pixels 13 pixels 13 pixels and 20 pixels Now, these are just very arbitrary numbers

But what I want to explain is that this first part will mean that the stirring pixels of padding from the top and then we move via in a clockwise fashion So this is on the right This is in the bottom So 13 pixels of padding on the bottom and 20 pixels of padding on the left now you could also This really easily if you want to give equal amount of padding suppose Now This means that there will be 13 pixels of padding on the top and bottom and this second part would mean that the stirring pixels of padding on the left and the right and if you just put one digit that means there’s 13 pixels of padding all around now, let’s go and put these different padding’s around lorem ipsum Now, it looks much neater We can also put a margin so let’s put a margin and the margin also works in the same way So suppose you would say five pixels That means it would give a five pixel margin all around your content If you were to put 10 pixels and 20 pixels This means that 10 pixels of margin on the top and bottom and 20 pixels a margin on the left and right and there’s also another key word that I want to make you aware of and that is auto So what Auto does is it gives equal amount of margin? However, you specify it so out here it will give 10 pixels of margin on the top and bottom and equal amounts margin on the left and So, let’s see how that works Yep So that’s how it changed it No, that was all about the Box modeling So let me just remove this part from the HTML and let’s remove this part from the CSS Now as you guys can see I have this ordered list out here First of all, let me reload the page Now I have this ordered list out here which shows us all the types of styles and weights and sizes that I’m going to be showing right now and this will include a lot of the units that we discussed like Em’s points pixels and percentages So let’s move ahead so to select these I’ll be using these IDs So let me just remember the first varieties It’s normal italic oblique and small Gap So let’s go ahead and create them firstly Let’s select our normal ID and say what are we going to try and show you is font style So all you have to say is font style is normal So normal basically means that the font style will be normal instead of something Lift then I think we had italic So you go font-style:italic then we also had oblique So we go font style oblique and 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 we trying to show in? Small-cap is the font variant? So font variant small caps Let me just reload and see how that change stuff Okay So font-style:normal just stays normal while italic and oblique are almost similar then informed variant small caps This is how it would look like at first letter has a bigger font size and the last have a smaller font size but everything is in capital and next is the font weight So, let’s see the IDS It’s normal bold Boulder So let’s go with that now so firstly we have normal So font size is the size or weight it sweet so font weight will be normal Next part is bold Boulder lighter Okay So we select Boulder like that we go font weight is bolder and we can say again Let’s Force after Boulder It’s bold Okay, we so w bold and you go font weight is bold Let’s see how that changes stuff So yeah bold is bold and font-weight:bold ER is slightly more Bolder while font-weight:normal is absolutely normal right time for some more So the next is the font size which goes from extra large large medium small extra extra small So let’s do that So first is extra extra large and this is the font size of you’re talking about so it’s extra extra large There’s also extra large So extra extra large look something like this while only extra-large look something like this fine Then we also have large so font size will be large That’s fun size large next We have medium small and extra extra small so medium small and extra extra small So this is going to be fun size medium It’s going to be font-size:small and this is going to be font size extra small So let’s see how that changes stuff So this is extract the small This is small and this is medium Now the next thing that we’re going to see is

how points work So our size is going to be 25 points So instead of just doing that Let me just change the extra extra small and let’s say it’s 25 points should remember that one point is around 2 inches So that’s how font size extracts are small would look like if it was 25 points, then we could also say the font size is 150 percent So that shows us how percentages books where hundred percent means the current font size look at it change and that’s how one fifty percent means the next thing that we want to show is line height So let’s say what is the ID Let me just check the ID So the line height IDs are line normal high 25 points So let’s just select one line normal and this is going to have a line height of normal specific: save it up and that’s how line-height:normal is That is the normal line height now you could say Line height is 25 points And that’s how it would change also You could say your line height is around 25 GM or just five Yen Let’s say that and that’s how it would change you with more with EDM with one year being the constant font size of you ‘re using or you could say line height is 200 percent that is basically twice of what our line height or font is so that’s how it would change right? So that was all about text styling Now, let’s move ahead and see how positioning and stuff takes place in CSS So for positioning I have again gone ahead and created this Space 3 dot HTML So in here we will be including a CSS page called page 3 dot CSS So let’s go ahead and create that first of all, we have to set this to CSS save it as page 3 and let’s get started First of all, we have three types of positioning in CSS absolute fixed and relative So first of all, I’m going to show up Salute positioning to you guys Now before I show up Salute positioning, let me just show you guys how texts and stuff can be centered first of all, so let’s start doing some random CSS So first of all, we are going to Target this ID called container So let’s go hashtag container and 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 the background we chose Let’s also give it some borders body will be 2 pixels solid and black we can also set up a border radius So border-radius gives you a coke bottle So you can say border radius is around 5 pixels Let’s see Now, let me just open up the HTML file that is concerned and this moment so this is base 3 Okay So this is what some CSS now, let me just uncomment that CSS first So this is what our page would look like without any sort of CSS Now This is what it looks like with the CSS that we just included now to make you aware of how box radius works Let me just uncomment that first Let’s comment it out The box really should not work and we should get ya a knife You see let’s zoom in out here see that this border is pointed suppose We don’t want that to happen Let’s remove that first and let’s uncomment this save it Let’s reload And now we have this slight little curved body which looks much neater Okay Now we can also Center stuff So neat way to do that is let me just show it to you Let’s take this part called centered Now the center it let me just give you the first background to make it look different So this background will be lets say 89 C FF 0 that’s our color Let’s see what a color looks like So that is the color that you’re gonna center Now Let’s say our wits is going to be we can set the width of elements like this So you save it is 50% and then you go margin is going to be Auto So what is auto do input equal margin on all sides Let’s reload our page Yep And now it’s Center we can also Center without actually centering the element we can just Center the text by just saying text line and Center fine Now that will remove the background and just keep the text out here So that’s why exactly what we wanted and that’s how you align your text Okay Now let’s move ahead with absolute positioning now absolute positioning means Being based on the document itself, which means this whole web browser So our sir is basically the document that you are actually manipulating So it’s called

document object manipulation if you’ve heard of that term, so let’s go ahead and let me just show you how absolute positioning works First of all, we have this element called top left and we’re going to try and put it on the top left So let’s select that first So you go top left and let’s give it a background Okay, that’ll be the background That’s also good Bordeaux So let’s pour the be one pixel solid and black Let’s say now this position something with absolute positioning All you have to say is position is absolute Now Let’s also keep the widths around 200 pixels and the height also around 200 pixels Let’s save it Let’s see how Stuff changes let me just zoom out Yeah, so that is our element So this is what top left and bottom right is going to look like now we are going to try and select this element and put it in the bottom right of this pattern So let me just show you how that is done So to select that I’ve already created an ID for it and it’s called bottom right? Let me give it a background of white And you say the position is absolute now We want to change the position to actually inside the element So we have to say is going to be 0 pixels from the bottom and also 0 pixels from the right So since it is had absolute positioning it’s going to position this inside of this So first of all, let’s go to background white and also make the color black All right, and now we have this right when we won’t now There’s also something called these that index So Z index is what comes first on your screen basically, so if you have multiple things that are stacked on top of each other with absolute positioning the one with the most said index will be the one that is shown on top so you can set as that index like this and say the set index is 5 training with the z-index of for will actually come underneath this thing, right? So that was all about absolute positioning Now, let’s go ahead and do some fixed positioning So for fixed positioning we have this ID called fixed which contains a paragraph saying I’m staying right here So let’s select that first Let me just remove all the stuff so that it’s not cluttered anymore Let me reload the page say that reload it and that’s also I’m staying here First of all, this is what is going to change fixed positioning Right? Is that for we call it fixed position? Okay Now first of all, all you have to say is position is going to be fixed Let’s make it more prominent by giving it a background of black and a text color of white So let’s see This has become black and position is fixed What do I do? If I’m scrolling? It just stays there It doesn’t really matter what I do to this thing Okay, so that was all about fixed positioning Now The next thing that we’re going to see is relative positioning for that I already have two elements created So let’s say these are the divs which says this is going to be relative So relative positioning as I was just saying is positioning based on the relative position of the element So, let me just show you so relative on now, let’s go to background first So let’s just select some color Let’s make the screen the screen out here Okay, that’s going to be a color Let’s go to Bordeaux from of one pixel solid block and let’s say the height is going to be r a hundred pixels Now, we’re going to select another element and position it relative to this element Okay So that is this element right out here is going to be relative to so to set something with the position of relative all we have to say that the position is relative and the – rest of the CSS is just arbitrary So let’s say left not padding left So you want to position it somewhere left of it And the positioning is going to be relative So 20 pixels from the original positions 20 pixels to the left from the original position I mean and you could say from the top it would be 30 pixels You could also say negative 30 pixels move it the other way around Let’s give it background I’m already given in the background Okay Let’s go to background off yellow So you see background equals yellow and you can also get border and say 1px solid blue That’s good blue background Okay So this relative layout is going to be positioned relative to this thing fine Let’s just reload and see Yep, and that’s how relative positioning works Now This might just not look neat at this moment, but I’m trying to drive a point home fine Okay

Now let me just see if I have dog dot jpg because as a PNG file called Edge Rekha, so let me just show you something First of all, let me just remove everything from here Okay So now that are things are less cluttered and lets me just rename this now to the image that is already there So Eddie record or PNG and Eddie record dot PNG fine Let’s save this Let’s see what our page looks like now So this is what it looks like Now, you can float stuff like images to the left and right So just select the image tag and suppose you say float them to the right These will float everything to the right now That’s how you position stuff or images with the float tag So I guess I was all about positioning of stuff now, let’s move ahead Okay So in this part we are going to be learning about overflows So for overflows what we can do let’s say let’s go back to page 2 dot HTML and we have this text out here or this unordered list and this list is pretty big right First of all, let’s open up a new page or rather Let’s open up Okay I’m just close these out So let’s save this as page 2 dot CSS rather Let’s just call it something you first of all, let’s set this to CSS right save it and let’s call it overflow Now what I want to show you guys something really cool So let’s select the ordered list So that’s where we’re going to select Let’s say it has width of round hundred pixels It has some padding on the top, right? So let’s get some padding of 10 pixels and 10 pixels all around Rado Let’s give it a margin of hundred pixels and auto so bring it right to the center Let’s see there was page to that were fiddling around with so this page 2 dot HTML now, let me just replace this with overflow dot CSS Let’s see now Yeah So this is what it looks like Now if you see the scroll through this list is quite cumbersome because you have to actually scroll like this get a background also background is going to be black as I just love black and the color of a font is going to be quite see how Change Yep So this is what it looks like Now What if you do and say Max height is equals to 500 rather only 200 pixels Yeah, so that doesn’t really tell much so if you say or flow is auto you got a scrolling bar Or you could say or flow is Kroll Let’s remove this Max height Now you see we have these little scroll bars out here and that’s what exactly overflow does is basically shows the items and you can scroll through them Yeah, basically like that So if you were to say that the width is only suppose 50 pixels Let’s say it’s even smaller Yeah, so that’s how I know you have this scroll bar and lets you scroll through stuff So that’s how overflow works Okay Now let’s look at some pseudo selectors or some pseudo classes that we can select and style So first of all that we open up the page that is going to be responsible for that So we have this page out here that I’ve created and it also has some new tags that you might be seeing These are some HTML5 tags So header tag now of tags and then the main tag, these are just some new tags that you see in HTML5 and you can also Target them to css3 So targeting them is pretty easy But what I want to show is something pretty cool Let’s save it first Let’s create a new page Let’s call it Right So let’s save this first as page five dot CSS Okay, so now it’s time to practice some more CSS and we’ll be doing it on this page that I have created So this page is kind of a big page to be honest It has quite a lot of photographs Carlo links a few images Also, I guess and they use a lot of the HTML5 tags that have been newly introduced like the header tag the nav ID or the nav tag, the main tag, we have section tags and a lot of other tags like these now these tags can also be selected with the help of let’s say css3 That’s what we are learning in our let me just remove this part because we won’t be needing that now, let’s go ahead and save our content and let me just show you what this actually looks like on the web page So let’s go ahead and open up page 5 and this is what it looks like on a web browser rather without any CSS attached to it So let’s transform this thing with the help of some CSS

So firstly we’ve created this page called page five dot CSS, and we’ve already attached it to this page out here with the link tag and the href attribute Let’s get started So first of all, let me just actually make use of some pseudo selectors So we have already discussed you the selectors while going over the basics Now, let me show you how they work So a hover is going to Target all the A Links while we are hovering over them Now when we are hovering over them We want the background to become black and text becomes light right So let’s save it Let’s reload Now if you hover over these the background becomes black in the text becomes white right now the same thing can be done with a lot of other selectors like this active So when you click on a link that means it’s going to turn like that So let’s save it Let’s see Let’s reload our page First of all now you see when we hover nothing happens, but once you click it, it becomes that black and white kind of thing, right we can also do this for visited and that will actually change the link when once it’s been visited So if we go and do this open link in new tab, well, it’s not working out here but if there Actually a database connected you would actually see the student now suppose we want to select our body Let’s go to background First of all get out the Color Picker Let’s give it an ice cream background Okay, and that’s going to be our background for the body Now We also have a div with the ID of rubble So let’s go ahead and select that first So we say rapo now, let’s give it some CSS so we can say margin is going to be 0 and auto now whenever you see a 0 you do not need to actually specify the units so we can just do that We will go to background color of white then we will give it a bit of round 800 pixels Give it a height of around 2,000 pixels Okay Now let’s save that and let’s see what it looks like know So this is what it has turned to know We can also do some more stuff So let’s select some HTML 5 elements like the header tag and let me just show you that CSS still works as we wanted to so let’s give it some simple padding:0 pixels on the tops your pixels on the right and we want to get some 10 pixels on the bottom and your pixels on the left tube see what changes now we got a little change we can also select stuff like with the 80s as I just showed you now, let’s select the navigation which 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’s also the display attribute this shows how elements will be displayed now, they can be blocked or inline block which means it will be converted into an inline element Now we could say display is All cooked and you could just give it some background just to make it more apparent So let’s go to background color block and make a color white Let’s see Yep That’s how it’s selected Now You can also give a pseudo tags like this one out here like visited to ID student So let’s say once we are hovering over the navbar We want this to happen So let’s save it Now if you only hover over it will change happen So that’s how that works Now let’s go over and see some word spacing now word spacing is used for mostly specifying the words So let me just remove some stuff from here First of all, let’s remove all this right Let’s remove the header tags and we just need the spot where we have all these paragraphs So I’ll be targeting the first paragraph to show you all the word spacing So it’s going to be this one out 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 and let’s just select parallel one I hope that’s what it was called out here So it is called Power one indeed now we can go word spacing and just say let’s say let’s go 10 pixels between the words Right So the spacing between these words in this paragraph should change now that we’ve saved it It’s go ahead and reload So yeah Now you can see that the word spacing for this this out here is much more different now, we can also do letter spacing the same way So let’s select paragraph to for that So for letter spacing all we have to say is letter spacing and then we can say something like 10 pixels Now, this was specified letters and how they’re spaced Now you can see it looks this horrible thing is having 10 pixels of their spacing also put some word spacing into this So, let’s see how that looks like spur word spacing of 20 pixels make this even more ugly

Yep So that’s where it would look like with word spacing and letter spacing So that was just for experimentation purposes and you can use that whenever you feel free to okay So another property that I want to make you all aware of that is in CSS is actually a property So the clear property makes sure that nothing actually appears before it So in this case the footer tag, which is right about here, which says only the copyright part now it is shown here This is a footer tag that we are talking about So you want to say something like let’s say so you can say clear and both so Tell you specify Cleo’s Okay So let’s go to background color of black That’s also say the color of the text should be white just to make it more prominent Yeah, so nothing actually appears to heard that so that’s how you use clear now So there’s also styled types also list style type So let me just see we have these lists out here First of all, which says random 123 random one, two, three Now, let’s say first of all, let’s convert this into an unordered list so find all that’s going to replace that with unordered list, right? I just want to show it with unordered list first So let’s say let’s select all the URLs and let’s say list style is going to be none Now if you see out here, we have these bullet points and now we don’t okay, so you can also do these with ordered lists So let’s go back and let’s do control and you LL find all that Select them Let’s make them all Wells ordered lists Let’s see now Oh, well doesn’t work with list type None If you just realized now we can do something like Alpha lower Alpha So let’s see that how that works Okay So for lower Alpha we are say list-style-type, please remember that That was my mistake right now Okay, if you have to select the oils again, Now you see that we have these lists types that is saying but small caps Now, there are other stuff like lower Latin lot slower Latin So let me just show you what that looks like save it Okay, that doesn’t really change because I don’t think I’m Latin installed, but we can also go Greek There’s a bunch of stuff that you can do It’s pretty fun So I have Greek install now it goes Alpha Beta gamma instead of ABC and that’s how you can change stuff You can also change the position of the list style So let’s start position You could say outside So let’s see what that means and don’t really change much out here But that’s one of the properties that I just want to show Okay Now you can also Place contents before an element So let me just show you how to do that Let’s clear all of these things now So let’s say we want to select power 1 and say so this is going to be a pseudo selector again So you say after you say content and your content is going to be lets say address a all these ad rates are going to be before this little thing out here So let me just show you the change Yep So since we said after it has all these attributes after but if you say before this how to change so now it’s all before them Right Okay Now let’s go ahead and see how we can use the end child elements So for that we’re going to select our UL again, actually Let me go ahead and delete everything first of all, okay So let me create another HTML boilerplate and this is going to be called list First of all, let’s say we have an unordered list with a bunch of list items So allies all around Let me just copy that down and paste it a few times right? So now we have all these list items here Let’s just fill them up with some random text Okay So let’s just say something random like cats So let’s save this Let’s go out here Now we have these things called cats Okay So what if we want them to have alternate paragraphs, I mean alternate background colors So first of all, let’s go ahead and select the allies and give them a background Let’s say this gray color That I have selected ff7 ff7 ff7 Now You see we have okay, this doesn’t seem to be working allies Looks like I’ve deleted my link tag That’s why the CSS was not working So let’s see now we have that Okay So first of all, let’s go back and change this to ff7 ff7 ff7 Right? This will give it this gray color that you see out here It’s also give the width Off around 360 pixels so that will bring it there Let’s also give it a margin of hundred pixels from the top and equal on the side spring to the center right now suppose you want to say hell I and child

and you could say something like do n so this will select all the even child’s and you can say they have a background color of white So, let’s see how that changes things for us Now, you see that all these things out here have alternating background color where it’s grape I grieve I’d rewrite and that’s how you select all the even chance Now, you can also select the first child by saying first child that we do not really need this to encounter And now only the first is black you could also say last child and not the last you’ll be white That’s How Stuff changes with CSS, okay Now you can also change first line So let’s go ahead and change our HTML up a bit So let’s create a paragraph and it’s going to have some lorem ipsum in it So, let me just show you something really cool Let’s lead all of this stuff Let’s select our paragraph and we’re going to say the cereal selector called first line and let’s say text transform uppercase So let’s reload that first of all, let me just comment this out just to show you what the page looks like without any CSS So this is our page without any CSS and let me uncomment this now save it and there you go The first line has been completely made uppercase now instead of first line you can also say last night Lash line and that will transform the last line to uppercase You could also say something like first letter and okay, so just to show you that it does indeed work Let me just reload this without any CSS first Okay Now you see that lorem ipsum begins with the lowercase L. Let me just uncom this out save it And now you see that the first thing is a capital you could also change it to say stuff like deck size or other font size and say a hundred pixels that the first letter will be hundred pixels big and that’s how you can do stuff like that Okay So another thing is you can also change the pointer or the cursor So let’s see when you’re hovering over a paragraph Let’s say we and hover first of all we want the background to become black We also want the color to 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 out it comes back normal So that’s how you can change the cursor also now, let me show you all something called box Shadow first of all, so let’s remove this cursor part So without the cursor looks something like this Let’s remove the whole were tagged So that’s always there, right? Okay Now let’s also change this to the gray color that I really like and that’s all the changes to Black So this is what it looks like now Let’s give it a bit of around 400 pixels So this is what it looks like Now, let’s also Center it so that I can show you some cool stuff So margin, let’s say zero and Otto So this is going to center it on the top of the screen now that it’s centered Okay So this is what our thing looks like now suppose you were to give it a board So water is a really neat So 2px solid black So this is where bar looks like but there are other stuff also like a box Shadow So this is our box Shadow books takes three parameters so ones that x and y axis and not really in that order is XY and Z axis and then it also takes a color So let me just show you how that happens So suppose we say zero X zero Y and let’s say 3 pixels on the Z axis rather 5 pixels to make it more prominent and then takes an rgba of 0 we want to make it really really invisible So 0.5 So that gives it a half a paucity Now you can see this is really neat little Shadow going all across our So that is what box Shadow does it’s a neat little trick for when you don’t want to use a border or something like that Now other than borders that also outline see an outline is black in color So outline completely negates our box Shadow and you could also say outline equals none So let’s remove that now because box shadow looks really neat Yep Okay So now let’s talk about text decorations So since we have some text already going up, let’s decorate it Now There are a few kinds of text decoration that I want to show So the text decoration let’s say so first say is line through put a line through all of the content So now it’s all strikethrough It also say something like over line or underlined So let’s see that underlined will underline your text

Yep, and over line as you might have guessed well over line our text now everything has a line on top of it fine Now we can also set the visibility of our text or any other tag to be honest Visibility so let’s check out all the other visibilities that are there So do that always go on Google and type visibility and CSS and let’s see the visibility property and how it goes So you must understand that knowing everything in CSS is kind of impossible So you should always have a go to or a backup So my backup is normally W3 school and they have everything regarding CSS and its properties These are all the properties that you want to go through and I’m mostly going through the most important ones in this tutorial that you may use in your day-to-day projection topics But sometimes you might need the rare ones like counter reset empty cells Flex Flex paces and all these stuff and you can always go back to w3schools and go through them Now you can say visibility is visible or something like that and should make it visible Yeah, right So that was all about the miscellaneous types of CSS that we were handling Now let’s go ahead and see some gradients and how we can create some beautiful gradients using CSS Okay Now before we move on to create Ian’s let me just show you some white spaces or some more text Transformations, right? So I already showed you all these texts transformation that’s capitalized as lowercase as over lines through uppercase in online now capitalized we’ll just capitalize it so I don’t think I’m going to show that to you guys Now, let’s close these 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 paid six dot CSS No, I’ll tear if you see you have a bunch of white spaces right now Let’s see how you can handle white spaces using CSS So there is a thing called the ID called White space pre I think that’s exactly what it’s called White space pre yep That’s select that and you could say white space is pre let’s see how that changes stuff So first of all, let me load up a six for you guys Right Let’s remove the CSS save it Let’s reload it again And what we are actually targeting is this spot by space will be preserved Right? So wide space will be preserved now go ahead and comment that save it and let’s reload now see the white spaces are in the HTML is preserved No, white spaces can also be handled in other ways So there are two things that I want to show So let’s select this thing called Never wrap never wrap Right and we say that the white space is going to be no rap So, let’s see how that looks So first of all, this is what we are actually targeting this lorem ipsum part out here and it’s somewhat like this and that see how it changes now and now you see that goes completely out of here So no wrap it doesn’t wrap it around So you also have pre-wrap So let me just show you how that works So I’m going to be targeting this part out here with these weird kind of fight spacing So, let’s see Preserve rap so with preserve wrap you go pre-wrap Okay, and that’s the property So let’s see Yep lorem ipsum run the rap has been preserved Okay Now you can also set up the direction So let me just show you how that’s done So we’re going to select these two things are left Right and right left So hash left right and also control C and let’s make this right left Fine, let’s remove all the stuff for now and let’s move everything before right left to have you removed that Let’s remove this Let’s save it see Okay So this is what it looks like right now and all you have to say is direction is L to R So that means left to right now here you see direction is RTL and see how that changes stuff So I prefer right left and I prefer left to right So that’s how it’s working fine So that was all about white spacing and directions Now, let’s move on to gradients and animations This is going to be the last part and the most interesting part in my opinion So gradients are those beautiful backgrounds you see on most websites and generate your gradient You can always use this thing called creatine generator So this gradient generator out here is a really nice created generator

You have to select the direction and you select any calls So I’ve already selected a gradient out here It’s going to create this gradient Now, let’s see repeat 7 right now Let’s select the body tag Let’s close this off Let’s close this off or save this and let’s create a new page First of all and this is going to be our CSS So we are save it and say page seven right now We select our body and just based on the let me just explain how this happens So there’s a linear gradient and there’s also another thing called radial gradient So I’ll just show you that now the stakes in a few parameters The first is to the right that’s Direction and this is how the colors will change So let’s just see how that works First of all, let me comment this Out I mean just open page seven for you If you see it’s going to be a blank page Okay, this is a gradient I’m sorry Let me save that Right? So this is what it looks without a gradient and you already saw her looks with a greeting but let me just shoot you again This is where it looks with the gradient Now, you can also set the background with other stuff like image for that you go URL and you can paste in the URL So let’s go and search for a beautiful image I really like Dragon Ball Z So Goku Super Saiyan 3, so that should be a good image to save as a background So let’s see this looks like a really nice image So you go here Let me just save this image as so this is going to be Goku and it’s going to be saved in desktop and CSS tutorial We Goku dot jpg, right so you can say Goku dot jpg or ight Now that saved let’s go back to our page and it should have a picture of Goku Okay, so And work I think I got something wrong Let’s go and analyze that so open up our CSS tutorial Okay, so it’s a JPG file and not jpeg So that was our mistake small mistake nonetheless And now we have this picture of Goku Now you can also set the background repeat Let’s close this off say background repeat and you could say no repeat and will not repeat the background anymore, or you can say background repeat’ is going to be let’s check out all the background repeats are actually available now background and Pete So if you’re going to background repeat’ and see the properties, you can just try yourself So you can repeat it according to the Y axis You can repeat it according to the x axis So, let’s see how that works So repeat X, so if we say that I think it should repeated on the x-axis like it was or you could repeat it on the y-axis and taking that will show about here, but let’s see Yep It’s not repeating on the y-axis So that’s how background repeat’ also works So we’ve covered that too Now We’ve also covered the gradients now it’s time We do some radial gradient now if you remember, let me just go back to the gradient part So if you have a radial gradient, all you have to say is that it’s a radial gradient out here And read gradient doesn’t really need direction because it’s going to be radial save it Paige Let’s reload it Okay Now we have agreed already Now, you see all these lines going in but if I just zoom out you can see that it starts from the center and spreads out where it’s white on the side and white on the sides So that’s our radial gradients work Okay So now that we’ve covered the gradients, let’s go into admission So I think animation is most 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 be Do pixel solid and black now? Let’s get a background begin with let’s say it’s going to be a Fred now This is how you do animations and CSS Okay, so before animations actually, let me show you how you can move this thing around Fine, so there are some stuff that I want to show you guys So let this be let me just show you what this looks like So let me give this a bit first It’s going to be 400 pixels or other 200 pixels and the height will also be 200 pixels Now, let’s see Okay, we have this div out here Let’s make a little bigger 500 and fire save it Yeah, it’s also make this much more prominent Let’s go to 10 pixel background I mean 10 pixel border and now you see we have a really prominent Square out there Now, let’s try some really interesting stuff So let’s say div and when we hover over the div you want to scale this so scale and let’s say

you want to scale Okay, so that’s not how you scale first You say transform and how do you want to transfer you 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 see it scaling twice now, we can also transform some other stuff like this so we can rotate so we can say Rotate 45 degrees Let’s see when I hover it rotating 45 degrees You can also skew it So skewing is how it works Let’s see you can ski at 20 degrees to the x-axis and 10 degrees to the y-axis save it and this is how it gets queued is the skewing works You can also translate stuff So just let me show you how translation work so translate and let’s say you want to translate it 20 pixels and 20 pixels So, let’s see hover over it and it translates a little it’s translated around 120 pixels just to make it more clear 120 and 120 Let’s save that Let’s reload this and you see that now it’s translating so much right? So that’s how translate works Okay Now that I’m sure you scale rotation skewing and translate Let’s see we can also set up the transitions So we’re transitions you can set up a lot of stuff So now that we’re done with transitions, let’s go ahead and see some animation So for animation, I’m going to be actually targeting this div out here So let’s actually style this div I’ve given it the width of a hundred pixels and a height of hundred pixels the background of red and a border of three pixels solid 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 actually set up some keyframes So we do that by saying keyframes Now, we named our key frames Let’s call it anime and we have to set up actually what it will look like at different points in time So we do that by saying 0% and it’ll have let’s say a background color or Fred and then it’ll move the soul of we want to move it in the Square So let’s say it’ll be not padding rather just be 0 pixels from the left and from the top It’s going to be 0 Let’s let’s save that copy that down Let’s base out a bunch of times Now we want to say is this is going to be 25 It’s going to be 50 It’s going to be 75 and this is going to be hundred Let’s save that Let’s change their colors So this is going to be yellow first then change to Green some pretty basic colors blue them and in the end, we’ll change it to Red So that brings us back to the original position That’s first also move it by 300 pixels then let’s move it 300 pixel both ways Now, it’s only going from 300 pixel this way and the end comes back to the original position now to use this key frames animation We have to give this animation name It’s going to be using that animation with the keyframe steam anime Now, we can say the animation delay is going to be two seconds You can also see how many times it’s going to be iterating so you can say that I hundred let’s save that Okay, so our animation is not working because we haven’t said the positioning So now let us just save this and let’s say our position is going to be relative Let’s save that Let’s uncomment our animation Now, you see that our animation will work as we intended to do So after 2 seconds our animation starts working and this will just keep going on and on if you want to actually repeat that animation There’s a way you can do that and that is with the animation iteration count Let’s see when I traded a hundred times Let’s reload Let’s wait for two seconds and voila our animation will keep going on and on and on so that’s how you animate stuff with CSS guys and that brings us to the end of this tutorial Hi everyone This is the lake are from madurai car in today’s session We are going to discuss about the most popular programming language, which is Javascript So without any further Ado, let’s get started Now Let me run you through today’s agenda We’re going to begin with what is Javascript what it can do various JavaScript Frameworks and how it’s used with HTML and CSS to build a creative website Next We look at the benefits of JavaScript and why you must learn it Finally we’re going to look at a few fundamental concepts like variables data types as arrays if-else statements and so on we’d also be running basic JavaScript code snippets on Visual Studio code, which is an editor used to run a JavaScript All right guys, let’s get started with our first topic

So what is Javascript now, the first thing that pops into your head is probably it is Java So guys, let me tell you that JavaScript has absolutely nothing to do with Java So, why was it name JavaScript? Well, it was sort of a marketing strategy when JavaScript was first released It was called mocha It was later renamed to live script and then to JavaScript when Netscape and son did a license Amen, now, let’s not get into the details of that Now What is Javascript in simple terms? JavaScript is a language of the web So basically every browser PC and mobile phone understands JavaScript It’s like a universal language So what is Javascript used for it is used to make web pages more interactive Let me tell you that majority of websites use JavaScript and all major web browsers have a JavaScript engine to execute it Another feature is that it’s an interpreted language, which means that it doesn’t have to be compiled like languages such as C and Java this makes it a lot easier for us because we can just run our code and we don’t have to run it through a compiler Now another important feature of JavaScript is that it is mainly a client-side scripting language Thanks to JavaScript Frameworks You can now run JavaScript even on the server side So let me tell you a few more things about JavaScript So where does JavaScript run JavaScript runs on a browser? So all you need To do is open up your Google Chrome or Internet Explorer and start running your JavaScript All right So how do these browsers run JavaScript? So these browsers have a JavaScript engine embedded into them Now this engine will just convert your JavaScript into machine language and then run the code All right moving on We all know that there are hundreds of programming languages a new languages are being created every single day and among these that are very few powerful programming languages that bring about big changes in the market and let me tell you that JavaScript is definitely one of them JavaScript has always been in the list of popular programming languages and developers are falling in love with this language They practically use it everywhere the use it on the web mobile servers applications And even in iot now, this is probably why it’s the most popular language in the world according to stack Overflow for the sixth year in a row JavaScript has remained the most popular and commonly used programs Ming language now, let’s look at a few common applications of java script So what can JavaScript do JavaScript is known mainly for creating beautiful web pages and web applications an example of this is Google Maps So if you want to explore a region or a specific area in Google maps, all you have to do is click and drag with the mouse and what sort of language could do that you guessed it It’s JavaScript Next JavaScript is also used in smart watches an example of this is the popular smart watch maker called Pebble Pebble has created Pebble dot J’s, which is a small JavaScript framework which allows a developer to create an application for the pebble line of watches in JavaScript So a lot of developers have actually built Smartwatch applications features and such things using the JavaScript up next we have websites Now, let me tell you that most of the popular websites like Google Facebook Netflix and Amazon make use of JavaScript That websites I think that’s enough proof for why you should be learning JavaScript Now among other things like mobile applications digital art web servers and server application JavaScript is also used to make games isn’t that amazing now? We are all aware that the browser has not been a traditional games platform But recently it has become a robust host four games A lot of developers are building small-scale games and applications using JavaScript and I’m sure all of you can do it too It’s quite simple Now, let’s talk about some popular JavaScript Frameworks, which are the most favored platforms for developers and business in two days time Angularjs is Google’s web development framework that has exploded with popularity in recent years angularjs provides a set of modern development and design features for Rapid application development Let me tell you that a lot of developers swear by this framework because it has a rapid development Pace another top Group framework is a react.js It stands behind the user interface of Facebook and Instagram showing off its efficiency in maintaining such high traffic applications despite The fact that react has a higher learning curve It makes application development straightforward and easy to understand it also performs very good in search engine optimization So guys by now, all of you are aware that JavaScript is used as a universal scripting language in browsers mainly on the client side using it on the back end to save time and build expertise is one of the major ideas behind the meteor

So finally front-end developers can also work on the backend comfortably with meteor without switching contacts between Java python PHP and whatnot So it basically gives the flexibility to use one language everywhere I’m sure you all have heard a jQuery before whenever someone wants to extend their website or the application and make it more attractive and The make use of jQuery now this Library transforms the whole web into an entertaining experience a fun fact about jQuery is that over 70% of the world’s leading websites have something to do with jQuery companies like WordPress Google and IBM rely on jQuery to provide a one-of-a-kind web browsing experience Now anybody who’s heard of JavaScript knows that it has something to do with HTML and CSS? So what is this relationship between these three now, let me put it down to you in simple words Now think of heads together Mel with stands for hypertext markup language as a skeleton of the web So basically had three ml is used for displaying the web Next CSS is like our clothes we put on fashionable clothes to look better Similarly The web is quite stylish It uses CSS which stands for cascading style sheets to look better or for styling purpose Then there is Javascript now JavaScript puts life into a I page just like how kids move around using the skateboard the web also motions with the help of JavaScript So JavaScript is basically for interacting with the web now before getting into the advantages of JavaScript Let’s look at a few common websites that a building the JavaScript and JavaScript Frameworks So we have Amazon which is an e-commerce website I’m sure or if you have shop from here, then there’s PayPal there is YouTube We all are addicted to YouTube There is eBay Netflix and Reddit So guys, this is enough proof that JavaScript is a very important language in such a beauty companies and Brands make use of JavaScript It means that it has something really nice about it or something Very Advantage is about it with this in mind Let’s look at a few benefits of JavaScript now, it’s quite easy to learn In fact, it’s one of the simplest programming languages It is not have a strict syntax and it’s totally readable You don’t have to be some hardcore programmer to learn JavaScript Let me tell you that it is a week type language unlike the strong type programming languages like Java and C++ which has strict rules for coding Now The next feature is PDF guys It’s all about being faster in today’s world And since JavaScript is mainly a client-side programming language It is very fast because any code functions can run immediately instead of having to contact the server send a request get an acknowledgement and then wait for an answer All right now JavaScript comes with a rich set of Frameworks, like node.js angularjs react and there are hundreds of such Frameworks earlier in the session I discussed about how efficiently these Frameworks are used to build web application server applications and perform different tasks JavaScript framework is one of the major reasons behind the popularity of JavaScript Now, the next Advantage is that it makes web pages more interactive So guys, we are all attracted to beautifully designed and interactive websites and JavaScript is the reason behind Such attractive website building such interactive websites not only makes the web prettier It also attracts leads and customers to e-commerce websites So like I mentioned earlier JavaScript is an interpreted language that does not require a compiler because the browser interprets the JavaScript So all you need is a browser to run JavaScript and you can do all sorts of stuff in your browser without the pain of setting up an environment score editors downloading compilers and then learning how to use them So instead of all of this you can just open up your browser and start running JavaScript So among many other advantages is the fact that JavaScript is platform independent JavaScript is supported by all browsers like Internet Explorer Mozilla Firefox Google Chrome Safari Etc So any JavaScript enabled browser can understand and interpret JavaScript code so you can run it on any platform All right So now that you have a good idea about what JavaScript is and how it works Let’s get on with the coding part I’m going to cover a few basic programming concepts of JavaScript and these concepts are quite similar to the C language So let’s get started So guys, let me tell you that every browser has a JavaScript engine and we can easily write JavaScript code over here without any editors or tools So this practice is not meant for real-world applications, but I’ll just quickly show it to you All right, open up your browser Internet Explorer or Google Chrome will also do and right click on the page click on inspect So this is open up the Chrome developer page All right now go to console

This is basically the JavaScript console Now, let’s see how to run JavaScript on the browser itself So let me just type a statement and then I’ll explain what it does Now basically, this is a statement in Java script So what I’m doing here is I’m going to log this message hello world onto the console All right, so I’m going to log hello world onto the console That’s what this function does Okay Now this hello world is enclosed within brackets and within quotation marks and in JavaScript, we always practice to terminate a statement with a semicolon Now, let’s press enter So here you can see that it’s displaying hello world All right So this means the JavaScript works on our console So this is how browsers are embedded with JavaScript engine so that they can run JavaScript code now to write JavaScript code you require a code editor, you can choose from a variety of options like Visual Studio code Sublime Text and so on but for today’s demo I’ll be using the visual studio code, but feel free to use whichever editor you want Visual Studio code is basically a simple light weighted editor And guys are leave a link in the description box If you want to download the visual studio code you can go ahead and check the description box Alright, so I’ve already downloaded the visual studio code now, let’s create a folder Okay, we’ll create a new folder to store the code that will be executing So create a new folder You can name it whatever you like now just drag this folder and drop it over here Alright, so you can see the folders created and we’ve got the folder open Let’s add a new file index dot HTML to this folder Now you don’t need to know HTML to follow this tutorial I’m just pasting a basic HTML code here You don’t have to care about this code It’s just for creating a simple webpage All right now over here I’m just using a header in order to display JavaScript tutorial and then within paragraph Tags, I’m just displaying with Ed Eureka All right, you don’t need to have knowledge about HTML for this tutorial Now, what we’re going to do is we’re going to use this HTML page as a host for our JavaScript code All right Now make sure to save the changes Now open up extensions tab over here This is the extensions tab Now search for live server So guys have already installed the live server, but make sure you go ahead and install this right away live server is basically a lightweight web server that we’re going to use to serve our web application All right, install this and restart your Visual Studio code Once you open Visual Studio code go to your index dot HTML file Okay, and right click on this and now you can see this option open with live server You’re going to get this 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 check the console from here This is the JavaScript console All right, so this will just open up your default browser and direct it to this address All right Now this address is where our application is served from Okay So here you can see the console as well Now, let’s write our first Java Script code So go back to visual studio Okay Now guys, let me tell you that there are two ways of adding your JavaScript code in the HTML file First of all, you need to know that your JavaScript code is always written in the HTML file or it is at least link to the HTML file Okay So like I said, there are two ways of adding a JavaScript code in the HTML file Now the first is to use script tags in the body section and type your JavaScript code within the script tag So let me show you how that’s done Now This is the body section the body section starts here and it ends here Okay So you have to make sure that your script tags are within the body section Now, let’s open script tags Now in the first method you’re going to type your entire Java Script over here So within the script tags, you’re going to type your entire JavaScript So let’s just type a simple line So we executed this earlier Let’s just do that Let’s log a message to our console All right, so let it be hello We’ll see if this works guys don’t Get to terminate a statement with a semicolon All right now save the file and open up your browser here You can see that it’s displayed Hello All right, this means it works Now Let’s go and try the second method now in real-world application The JavaScript code will have hundreds and thousands of lines and it is not a good practice to type your entire code over here All right So what we can do is we can open up a new file from the Explorer window All right, let’s go here 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’s paste it over here Now, you have to reference this Hello dot JS file in your hedge Tml file So how do you do that? Okay So let’s add an attribute over here This attribute is SRC All right, Sr C stands for Source now SRC equal to within the quotation marks We’re going to write down the name of the Javascript file So hello Dot JS is the name of my Javascript file Let’s close the Tans Okay with this is opened up again Okay, let’s close the tags And this is the second way So we’re basically referencing Hello dot Js from the HTML file Okay Now, let’s save the 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 ways of adding your JavaScript code to your HTML file The first way is to write the entire code within script tags And the second way is to reference a Javascript file in your HTML file So guys, I hope you have a brief idea about how JavaScript works and how you can use your browser to run JavaScript Okay So now let’s get on with our JavaScript fundamentals I’m going to discuss variables constants and a few other Concepts over here Okay So what are variables variable is a name given to a memory location which acts as a container for storing data Now, what does this mean? Let’s say that I want to Define a variable called name and I want to store a name in it That’s a the name is Ed Eureka Okay, so I’m going to declare a variable called name and I’m going to store at Eureka in that variable So name is the name of the variable And Erica is the value of this variable Okay So what’s happening here is a temporary memory location is assigned to the name variable and this name variable is going to contain a value which is Eddie Rekha Okay Now let’s perform this practically so that you understand it better which is constant So what are constants constants are fixed values that do not change during execution time Now, there are times when we don’t want the value of a variable to change because it might disrupt the whole workflow in such situations We make use of constants instead of variables Okay Now here you can see the syntax of constants now in order to declare a constant you use the keyword constant Alright, you use this key words now, let’s practically do this and see how it works Right? So I’m going to create a new file to do this I’ll name it constant Okay Now let’s declare a variable so for declaring a constant variable make sure that you use const keyword Okay, so I’m declaring a constant variable here Now Let’s say its pile Okay I’m going to assign a value to Pi 3.14159 appens If you try to change the value of 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 change the path in the HTML file So here it’s still linked to variable dot JS change it to constant GS if you’re creating a new file that is all right Now since the changes here is well now open up your browser here You can see type Arrow assignment to constant variable All right this errors because we try to change the value of the constant variable It is declared as constant using the value 3.14 and then we try to change it to 3.12 That’s why we have the arrow So guys you use constant variables only when you want to keep the value of a certain variable fixed All right, it cannot change so that’s when you use constants Okay I hope you all are clear Let’s get on with our next topic Okay, primitive data now guys, there are different types of values that you can assign to a variable All right now in JavaScript, we have two categories of data types one is primitive data type and the Do is reference data types Now primitive data types include numbers strings Boolean null and undefined reference data type on the other hand includes objects and arrays and functions All right So now let’s look at these primitive data types from Visual Studio code So I’m going to create a new file again Give it any name you like Alright So for this you’ll have to Define a variable how to define a variable you use the let keyword This is the name of my variable now in this I am going to store the value Harry Potter All right terminated with a semicolon So guys here it’s a string because we are using quotation marks when closing the value within quotation marks So the computer is going to consider this as a string So even if I had let’s see if I have something like this

What do you think? This is do you think this is a string or do you think it is or number? Okay, let’s check All right now let’s log this on our console and see that’s long age as well as let’s log name Save the changes make sure you change the reference over here Alright, so it’s constant Let’s change it to primitive See if the change is here as well open up your browser So it’s displaying the two values Okay Now let’s check the type of these variables type of age It’s a string even though it is one over here It’s still a string Why is that that is because we enclose this one with in quotations So whatever is enclosed within quotations is going to be considered as a string All right, so we discuss numbers and strings so far Let’s look at Boolean Let’s Define a variable called option Okay So basically guys are Boolean is used Whenever there is a logical situation or a logic code that needs to be executed So if a particular condition is met or if a particular condition is true, then the following code will be executed in such situations You make use of Boolean and Boolean can have only two values True or false? So this is a Boolean Now the next type of data type is undefined Now What is undefined? I’ll show you Let’s Define a variable height Now, let’s log both of these variables and we’ll see the type of these variables Okay So option then let’s also log height save your changes open up your browser Now, you can see through and you can see under fine instead of printing anything It says undefined Why do you think that is it’s because we’ve defined height without initializing it at all So we have not set it to any number or any value That’s why it’s undefined So this is an undefined data type So if you don’t initialize a 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 defining a variable called eye color and I’m setting it to null now We use null whenever we want to explicitly clear the value of a variable Okay, that’s when we use null So I hope you guys are clear with the primitive data types Now Let’s move on to our next topic arrays So what are our is add? These are basically used to store multiple values in a single variable So if you have a list of items, let’s see that you went shopping for some art supplies and you got a paint brush you got can miss you got some pallid you got pencils and you got spray paint Now you want to list these down in one variable now to understand this better Let’s go to visual studio code and let’s execute some code So add a new file called array I’m going to Define an array called shopping All right Now in order to Define a variable you will have to use the let keyword and you’ll have to use the square brackets over here This is how you define an array Okay now square brackets are because you have to store multiple values in an array So an array is basically used to store multiple values of a single variable Okay So shopping is a variable it has multiple values Now, let’s define the values in the shopping variable So the first value let’s say it’s paintbrush I’m going to add a comma and add another 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 this on the console Save your changes Make sure you change the path in the HTML file re all right, save it open up your browser now here you can see that it’s displaying the entire array now guys, let me tell you that arrays are numbered from 0 So 0 is the first element 1 is the second element 2 is a third element, even though there are three elements in the array The number of the last element is 2 that’s because you start numbering an array from zero Okay So guys now how do you access an array element? Let’s say you want to access color palette you want to display color palette How are you going to do that now in order to do that? You are going to write the name of the array and within square brackets, you’re going to put the number of the array element So if you want to display color palette, the number of color palette is one So you’re going to type one over here Okay, so the parentheses semicolon and don’t see it displays color palette So this is how you access array elements Okay So if you want to access only one element then just mention

the number of that element and that element will get displayed now Let’s just play a little bit with arrays Let’s define a few other arrays Let’s see what else at is can do So, let me show you another example No, I’m defining an array call numbers So guys this is how you declare an array use the let keyword name of the array equal to square brackets and you terminated with a semicolon? Okay Now let’s add array elements So I’m going to randomly add some numbers All right These are my array elements Now Let’s add two numbers and display them on the console Okay So how do you do that? So let’s add one Let’s add this element and this element All right So how do you access this element which is have to write the name of the array open square brackets And I the number of the array 0 Plus numbers at position 1 so you’re basically adding 1 and 3 All right save changes go to your browser here You can see the answers for all right Now, let’s try some other thing Let’s try to sort these elements for that you use a function called sort now sort is a predefined function So this sort function is going to sort this array All right, save your changes Let’s look at the log Yeah, so it’s sorting this array in order One, two, three, four five seven Now, we know that 6 is missing here So let’s add an element to the array So how do you add an element to the array? So first you type the name of the array dot push? All right, a bush is a function which pushes an element to the array All right Now which element you want to push is going to be written Within These parentheses So six let’s push Okay now let’s check the array Save the changes go to your browser Now, there are seven elements All right, see you can see six over here Now guys, let me show you another example now with a arrays in JavaScript you can have variables with different data types in one array itself So single array can have variables with different data back Let me explain this with an example So I’m declaring an array called mixed All right Now, let’s list out the elements of mix So first I’m going to list out a string Okay, then on number then again a string Okay Now let’s log this to our console and see what happens Okay So this is the mix a day So here you can see that it has elements Let’s check the type of the first element How do you do that? So you write the name of the array and you open up brackets and you write the number of the array which is 0 so, this is a string correct now similarly, let’s check the type of the second element This is a number So now we know that within an array we can have variables of different data types Okay All right guys with this we are done with arrays Now, let’s look at our next topic now our next topic is objects Now What is an object an object in JavaScript is a lot like an object in real life For example, let’s consider a girl Okay Now this girl has a name She has a huge she has eye color Let’s say her name is Emily or age is 15 years old and she has brown eyes So what did I just do I basically declared an object which was a girl And I list down her properties, which is her name her age and her eye color So girl is the object name age eye color on her property So this is how an object works Okay Now what are objects objects are variables to but they contain many values or many properties Okay, and each property will have some value now Let’s look at this with an example So guys, I’m going to create a new file called objects Now, how do you declare an object? So I’m going to declare an object called pain equal to you’re going to use curly brackets to Define an object Okay, as soon as you use these curly brackets, it means that you’re creating an object called pain Okay, and this object can store a lot of properties and each property will have some type It’s like key value pairs where key is a property value is the value of that property So now let’s say that this pain has the first property of the pain is a type Okay, so I’m going to write ballpoint Now you separate different properties with a comma Okay Now the second property is probably the color black

Alright now let’s define another property called cost now know that over here I have an enclosed 10 in quotation marks because this is a number it’s not a string Okay guys remember that so guys also terminate this with a semicolon Now, what did I do here? I created an object called pen This pen has three properties Okay, the three properties are type color and cost Now the property type has a value ballpoint Similarly The property color has the value black and the cost is 10 Okay So this is how you define an object So the object is a pen It has three properties and values What if I want to display the cost of this pain, I just want the cost of this pain Not the entire object Okay So, how do you access an object now? This is the syntax for accessing an object object name dot property name Okay Now there is another way of accessing this is known as The dot notation and the other way is like this object name you use square brackets within which you write the property name All right This is the other way now, I honestly prefer the dot notation because I feel it’s simpler Okay So now let’s try to display the cost of the pin Okay So, how do you do that? First you write the object name, which is Penn DOT the property name which is color Sorry, then the property name which is caused Okay now I want to display this So I’m going to put this in the console DOT log function I’m going to put this in the console DOT log statement All right now save the file make sure you change the reference in the index or HTML So change this to objects save this Open up your browser Here you can see it’s displaying 10 Okay, so that’s how you access object properties Okay Now let me show you another example of objects Okay So now let’s define an object called Emily Okay Now this object has a few properties so properties and the value of those properties because it’s a number I’m not putting it in quotation marks then let’s define cool, which is another property see if she goes to DPS Then there is class Let’s say 10th standard Alright now, the next property is subjects Now I have more than one subjects That means I have more than one value to this variable Now, how do I store more than one value in this variable? So guys, do you remember I spoke about arrays arrays are used to store multiple values of the same variable So let’s define this as a array So this is how we Define an array Add physics now add comma after every value so physics and chemistry Let’s add biology Let’s and months So don’t forget to terminate this over here Now I have typed out the wrong spelling for physics Okay, so guys, let’s say I want to display a chemistry How would I do that? So how would I do this? So like I said first you’re going to write the object name dot the name of the property name of the properties subjects Now, this is an array element So in subjects, we’re going to access the second element All right, the number of the second element would be one Okay Now in order to display this let’s put it in this statement Now save your file open up Chrome All right, there is an error What exactly is the arrow? Okay guys, so the error is over here I forgot to put a comma so after every property is supposed to put a comma so I forgot to put a comma here and that was the error now, let’s save the file and let’s open up our Chrome So here you can see that it’s displaying chemistry Okay So that’s how it works with this we’re done with objects Let’s move on to our next topic Now The next topic is functions functions are basic building blocks in JavaScript It is basically a set of statements that perform some task Now Let’s see this with a few examples Let’s go to our vision Studio code now Let’s add a new file I’m going to name it function dot Js So how do you define or declare a function? So in order to declare a function you have to use a keyboard function space the name of the function So let’s say hello All right Now after this you need to add parentheses, all right, and then curly braces and within the curly braces,

you’re going to define the body of the function Now, let’s just say that this is just logging some message on the console like hello All right Now I’ve created a function for this now Let’s call this function So how do you do that? You write the name of the function with the parent This is and then you end it with a semicolon Okay now save the changes make sure you add function over here in the HTML file Seems of changes here as well now here on the browser You can see that it’s printed Hello Okay Now what’s the point of this function? Let’s do something better Okay, let’s make a better function Let’s say we will create a function for multiplying two variables Okay So let’s say that we will create a function for finding the product of two numbers Okay So for that you use a keyword function, I’m going to name my function product now Within These parentheses, I’m going to declare two variables Okay Now these variables are called parameters So I’m going to pass two parameters to my function Now, let me get on with it You’ll understand it better Now what this function is 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 call a function name of the function and over here? You’re going to pass the value? You ought to these variables Now these variables have not been given any value here I just Define these variables and they are just known as parameters These variables are known as parameters Okay Now let’s pass some value to these variables Let’s past 2:00 and 6:00 Okay, and it with a semicolon Now these values are known as arguments Okay, so when you call a function you pass arguments to that function, but when you define a function you pass parameters to that function Okay, let’s see if this and let’s open our console Wait a second Yeah, I forgot to print it Now Let’s tour the product in some variable Let’s Define a variable Let’s say x Okay, so I’m storing my product in a variable called X. Now Let’s log this variable on my console save the changes go to your browser here You can see 12 All right, so this is how Your boss functions with different parameters, okay Next we have conditional statements now condition statements are used to perform different actions on different conditions So if is used to execute a block of code only if the condition is true, okay So basically if a condition is met then the statements within this block will get executed This is the syntax of the if statement So basically if is a keyword and within brackets are going to define the condition now if this condition is met then this statement is executed or a set of statement is executed Okay? So this is how it works in the program and you start the program and when the execution comes to a condition if the condition is true the code within the if block gets executed All right, and it ends there but if the condition is false you just exit from the if block All right, let’s look at this practically So let’s create a new file called if So first, what I’m going to do is I’m going to Define an array now Let’s add numbers into the array some randomly want to add some numbers Now, let’s add some condition over here Now if you’re I’m going to define the condition, which is number and 0 is equal to equal to Number at place to then just display some statement All right, let’s see, correct Okay So what is happening here now? I’m basically defining a condition within the if statement over here And this is a statement that’s going to get executed if this condition is met so the condition is that the number at location 0 which is this number if this number is equal to number at location 2, which is this number so these two numbers are equal then it’s going to print out correct All right Now these equal to equal to sign is used for comparison So it’s used to check the value of this variable and value of this variable if these two values are the same then the condition is met All right Now, let’s save the changes we made here Also, remember to go to your HTML file change the reference to if dot JS Okay, save the changes go to your browser here You can see that it’s displaying correctly Now this was the if conditional statement now, where do I use the else statement now else is used to execute a block of code if the same condition is false

Okay So this is the syntax of Ethel’s so if there’s some condition there if that condition is met then this statement is executed Now if this condition is not met then if you want to do something else you use the else statement So when this is false, this will happen Okay, so instead of exiting you’re going to perform another operation, let’s look at the flowchart when you’re executing the condition and if the condition is true, we’re going to execute the block of code within the if block Okay Now if the condition is false, you’re not going to exit instead you’re going to execute another block of code, which is in the else if block Okay Now let’s look at this practically now within the same file itself I’m going to show you how this is done Now Let’s define a condition if numbers This place is equal to equal to Then it’s going to print correct Otherwise now if this condition is false, then it’s going to print this console DOT log wrong Try again All right, that’s simple Let’s see if this works Okay Save your file open up your browser Okay There is some problem over here Let’s go back to the code Okay, my mistake Save the file open the browser now, it should work now just comment this out Otherwise, you’ll get confused I’ll just write here This is the if/else block if else example All right, let me save it open your browser See it says wrong try again So this is how the else statement works All right Now you can even play around with a few other examples Let me show you a few other examples Okay Now, let’s give two conditions within the if block Okay Now let this be the first condition So how do you add another condition you just use the and operator? Okay, and add another condition over here Okay, I’m making a mistake here The array name is numbers So added to conditions over here Now only if both of these conditions are met this statement is going to be executed Okay? as we are going to now, let’s see if this okay We’ll just comment this out so that you don’t get confused Alright, so see the changes open up your console Okay, that is some Arrow So it’s basically something I did while naming so this is an arrow because I forgot to add an S everywhere Okay Now I’m saving the changes this should work Okay, so it says wrong try again Now this is wrong because both of these conditions want met I’m using the and operator here So it’s compulsory that this condition is true and this condition is true Okay So if you use the or operator here instead, this is the or operator Okay, if you use the or operator here instead, this should work see it displays, correct? Okay, or means that one even if one of these statements or one of these conditions is true then this is correct Okay, so guys with that we are done with if-else Now let’s move on to Loops So what are loops loops are basically used when you want to run the same code over again each time with a different value So that’s when Loops are used Now Loops are of three kinds There is for Loop there is while loop and there is do-while Loop Okay Now, let’s look at each Loop one by one So first we have the while loop now what happens here is while basically Loops through a block of code, as long as the specified condition is true Okay So while this condition is true this Loop code is executed when you execute the condition and if the condition is true, the conditional code will get executed Otherwise if the condition is false, you’re just going to end or you’re going to exit from the loop Okay Now, let’s look at a practical example of this so create a new file called while dot JS So guys before moving on to an example Let’s discuss the do-while Loops Also a basically do while is just a Gradient of the while loop now this Loop will execute the code block once before checking if the condition is true, then it will repeat the loop As long as the condition is true Okay So we are you can see the syntax within the do Loop you have some code Now this code is executed once and only after that the condition is checked Now if the condition is true, then you’re going to execute it again What are the condition is false? You’re not going to execute it But this code is definitely executed at least once Okay, that’s the difference between do while and

while so the loop code is executed at least once in the do-while loop Okay Now let’s do this practically now, let’s Define a variable I and initialized it to zero Okay now within my while loop, I’m going to define a condition which is while I is less than 5 it has to do this now the statement here is It has to display this the number is and it has to display I okay So plus I and let’s increment the value of I okay Now Let’s see if this now let’s look at the while loop now within the while loop I’ve defined a condition which says while I is less than 5 it has to perform the following code first of set I to 0 so then I is less than 5 meaning zero is less than 5 now This is true So it’s going to execute these two statements So I just want to print the number is zero and then it’s going to increment the value of I so now I will become 1 over here Lll go back to this Loop and it will check if one is less than five which is true So it’ll execute these two commands similarly and keep going till I is equal to 4 is equal to 4 L execute this but when I becomes 5 5 is not less than 5 so this will not be executed Okay Now, let’s just save this and let’s change our path in Index dot HTML to while save this as well open up your browser See it print still number for 012340 K. It is not print number 5 because 5 is not less than 5 Okay Now let’s do the same thing using the do-while loop now for the do while loop first You’re going to define the do block now over here Let’s copy paste this code over here Okay Now after the do Loop you’re going to put the while condition Okay So let’s give the condition is I greater than 5 let’s see what happens Okay So what is going to happen here is first it’s going to execute these two statements Okay It’s going to print the number is zero We are because we have initialized I-20 over here Okay, then it’s going to increment I to 1 Okay, then it’s going to come out of the loop And then it’s going to check the condition is one greater than 5 now that is false So it’s going to end over here itself Okay Now let’s just comment this out That you don’t get confused Okay will comment this whole thing out now save the changes open up your browser See the number is 0 its printed only once okay now that’s the difference between while and do-while loop now Next we have for Loop Let’s look at for Loop So what is for Loop? So for look basically repeatedly executes the loop code while a given condition is true So test the condition before executing the loop body now here you can see the syntax of for Loop within the for Loop There is a condition which is begin separated with a semicolon Then there is condition semicolon and this step and then there is Loop code Okay Now this begin statement is executed one time before the execution of this code block Okay So before this Loop code is executed This condition will be executed one Okay Now, let’s look at the Syntax for the for Loop now this for Loop has Three statements within the parentheses Okay Now begin is executed one time before the execution of this code Okay Now this condition defines a condition for executing this Loop code The next is the step This is executed every time after the code block has been executed Okay So after this has been executed this is executed So guys, I know this is sort of confusing Let’s practically do this You’ll understand it better So now I’m going to create a new file called for Now let’s declare of for Loop So use the keyboard for and then you put the first statement or the first condition, which is I is equal to 0 Okay Now the next one is I is less than 5 next one is I plus plus make sure you separate these conditions or these statements with a semicolon Okay, you have to put a semicolon over here Now open up your Loop code now within the loop for just let’s perform the same thing that we did in the while loop All right, so the number is I’ll be back to be forgotten to declare I hear so let’s declare I first let I say I’ve declared I over here So guys you don’t have to declare it over here specifically you can do that of course, but you can just declare I over here It’s F let I is equal to 0 you’re initializing I and you’re declaring it

Okay So what happens here is first I is equal to 0 you’re defining a variable I and you’re initializing it 2-0 Once you initialize I to 0 it’s going to execute this statement once okay, so it’s going to execute this statement Once after that it will go to this condition is I less than 5 is 0 less than 5 which is true So it’s going to execute this statement Okay Now after this is executed it’s going to execute this third statement, which is I plus plus Okay So the value of I is going to become one and the same thing is going to happen again And again, let me explain this one more time So first you’re initializing I to You when you execute the first statement, this code block is executed once all right after this it wrecks this condition is I less than 5 if the condition and only if the condition is true, this statement will get executed Now after this statement is executed this third statement over here will get executed All right I hope that is clear Let’s save the changes and let’s also change the reference over here All right save the changes here as well Yeah here you can see that it’s displaying it five times Okay, so that is how for Loop works Okay Now you can do a lot of things with for Loop So let’s say that your teacher is punished you because you talk too much in class and she’s asked you to write I’m sorry 50 times So can you use for Loop to do that? Well, you can definitely use for lucre do that Let’s try and see how that works Okay Now we’re going to do the same thing set I-20 Then I is less than 50 nylon If your teachers kind enough, she’ll ask you to write a 50 times Otherwise hundred times is the minimum All right now within the code block Let’s log this message Okay, so first we’re going to I’m sorry, and let’s put a smiley as well Okay, so I made a mistake over here Okay So this is how it works Let’s save this code and you know, let’s comment this out Okay Now let’s check our browser so you can see that I’m sorry is displayed so many times So guys that’s a simple hack with this We complete our for Loop Now the last topic of discussion is switch cases So switch statements are used to perform different actions based on different conditions Okay Now how does switch statement work now here you can see that This is a syntax now after this which there is an expression and there are few cases case one case two case three and default and so on Okay, whenever case one is true the code block one will get executed similarly if taste to strew code block 3 will get executed Now, how does this work? Now? What happens is the expression within this switch statement is executed one Okay, after that the value of the expression is compared with the value of E Of these cases again So this is the value of the cases This expression is compared with the value of the cases So if there is a match this block will get executed So basically the value of the expression is compared with the value of the cases So if there is a match then the associated block will be executed So if the value of this expression and the value of this case is the same then this code block will be executed Okay, let’s try this with an example So let’s create a new file called switch Okay Let me type out the code and then you’ll understand what I’m saying? Okay Okay, so that’s a long code for this is very simple Now what I’ve done here is I’ve defined a variable called games and the value of that variable is football Okay Now I’m passing this variable into the switch statement So basically the value of games is football over here Now if the value of this expression matches with any case, then that block will get executed now here the value of games is football, correct So you’re going to look for football now the case over here is football So basically this is going to get executed Okay Now, let’s just save and let’s run the code You’ll understand what I’m talking about So guys, make sure to change the reference over here save it and let’s check the logs See it prints I love football So why did it do this exactly now it did this because the value of this expression matched with This case Okay, because it matched with this case the statement with in that case got executed

Okay Now if I change the value to foosball, okay, let’s see what happens when you save it It says I like other games now This was the default statement Now this is default statement is executed whenever this expression does not match with any case Okay, because I’m not Givin foosball anywhere over here It executes the default statement So this is how the switch statement Works Hi everyone This is the lake are from Ed Rekha in today’s session We are going to discuss about jQuery which is the most popular and the most use JavaScript library So without any further Ado, let’s get started So first of all, let me run you through today’s agenda now before we start off with what is jQuery, we’re going to discuss What is Javascript after that We will see why you should use And what is jQuery next we’ll see how to install jQuery which barely takes a minute after which we’ll discuss Dom which stands for document object model and jQuery selector, then we’ll discuss jQuery methods We look at methods like before after text HTML CSS attributes and many other commonly used methods All right, then we’ll move on to jQuery events now here we will see how to use the click event on event and the keypress event moving on to jQuery effects There are hundreds of jQuery effects and we’ll discuss the most commonly use effects like hide/show toggle Fade Out slide up slide down and so on finally we look at jQuery UI or user interface where we will discuss droppable draggable and the date picker UI All right So guys, I hope all of you are clear with the agenda now before I move on to our first topic I wanted to tell you that I’d be making use of Visual Studio code, which is basically a code Editor to run code Snippets that are be explaining in this session If you don’t have Visual Studio code you all can go ahead and download it or use any other editor of your choice I leave a link in the description so that you all can download visual studio code now guys before I start off with the session Let me show you how Visual Studio code looks so I’m just going to open up this editor now guys, this is a very simple editor and you know, I think it’s my most favorite editor you can use Sublime Text or any other editor that you are comfortable with All right So this is how it looks now What I’ve done is I’ve already copied a folder called jQuery All you have to do is create a folder on your desktop and then drag it and paste it over here Okay So Bob already created a folder because I think it’s a good practice to have a folder that contains all your code Snippets All right now guys, if you downloaded Visual Studio code you need to make sure that you have installed an extension called live server Alright, so I’ve already installed this live server Now this would basically host our webpage So whatever we type out or whatever code we have over here in get hosted using this lives So make sure you install the live server in order to host your web page or whatever you create Okay, so that’s about Visual Studio code now without any further Ado Let’s get started with our first topic So what is Javascript now in simple words JavaScript is a universal language of the web which every PC every mobile phone and browser understands now JavaScript is mainly used to make a web page or an application look more alive and interactive So every time you see a really cool web page with a lot of motions in graphics It’s because JavaScript was used to design it Now Another important feature of JavaScript is that it is an interpreted language unlike the high-level languages such as C C++ and Java now these high-level languages require a compiler now when it comes to JavaScript, you don’t need a compiler because JavaScript runs on the web and most of the web browsers like Google Chrome Safari Internet Explorer Mozilla Firefox already have Our script engine embedded into them apart from that JavaScript is mainly a client-side scripting language So guys, I hope with this your clear with what is Javascript I hope you have a brief idea about JavaScript Now if you want to learn more about JavaScript, I’m going to leave a link in the description You can check out our content on JavaScript so you can learn more about it All right So why use jQuery now, we all know that there are hundreds of JavaScript Frameworks and libraries out there But why must you use jQuery well for starters jQuery makes it extremely easy to manipulate the Dom now Dom basically stands for document object model guys Don’t get intimidated by the name I know it sounds like it’s a very complex concept but it’s very easy All right, I’ll be explaining the Dom in the further slides So stay tuned Now Dom is basically like a tree structure of the head 30ml elements Now in order to make a webpage interactive web developers manipulate the Dom and jQuery makes it extremely easy to do that now apart from that the If its contributors is more diverse and bigger than any other JavaScript library,

it has detailed and comprehensive documentation, which gets better every day Now another bonus point is that jQuery has thousands of plugins available for free and they can easily be added to our project So these plugins add value by enhancing user experience Now one such example is the age of technology which develops a responsive and feature Rich site Okay moving on jQuery also provides cross browser support So basically every time you write a code on your local machine and you want to run it on a browser like Google Chrome Safari and all of that you don’t have to worry about whether your code will run on different browsers because jQuery takes care of the dependency issues Now this is because it supports almost all the commonly used browsers All right now guys, I hope all of you are clear with why we should use jQuery Now, let’s look at what is requiring now jQuery is basically a fast concise JavaScript library With a nice Moto with says right less and do more now that is very apt because it’s entire functionality revolves around simplifying each and every line of code It simplifies the Dom manipulation event handling and basically every other thing now jQuery offers a very effective way to capture wide variety of events such as a user clicking on a link without the need to clutter the HTML code jQuery takes care of all the complex things in between Also an add-on is that jQuery is a lightweight library of about nineteen kilobytes in size after compression So this makes it faster to load the library and also takes up minimal resources Now jQuery also comes with hundreds of built-in animation effects, which you can use in your website to make it more interactive All right, so guys, I hope all of you are clear with water jQuery Now, let’s move on to installing jQuery now, there is no installation perceived This is just downloading jQuery and let me tell you that there are two ways of doing this The first is the local insolation wherein you copy the jQuery library on your local machine and you include it in your HTML code and the other one is linked to a CD and now Syrian stands for Content delivery Network So you can include jQuery Library into your HTML code directly from the Syrian So basically this is like a link to your jQuery Library Okay Now, let me show you how you can do this All right So this is how the official website of jQuery looks like now here you can go on download So over here, you can see download the compressed production jQuery three point three point one So this is probably the latest version of jQuery So what you can do is you can either click on this and you can copy this entire Library This is basically the jQuery Library You can copy this entire Library And you can paste it within a file over here Okay, so I’m going to paste it within this jQuery folder that I created Okay, you can paste it in a file Let’s name a jQuery So what you can do is you can copy that entire code and paste it in this file But this is not something that we’re going to do because I me tell you that if you copy this entire thing and you paste it in your folder, you can easily go and edit it by mistake Let’s say by accident you click on something and a small line gets deleted or a small element gets deleted So your entire core is going to get messed up because your jQuery library was tinkered with okay Alright, so we are now going to follow the first method instead We’re going to do the link to a CD and Method now, I’ve created an index dot HTML file within which I have the link copied over here Now, this is basically the jQuery Library you can see the version is three point three point one And also I have another link which is for the UI jQuery UI All right now guys, this integrity and cross origin is just so that Nobody man, you played the contents of these libraries All right, so I have copied this link from somewhere on the web I don’t remember but I’m just going to paste this link in my description box So y’all can go ahead and use this Otherwise, if you find a better link then y’all can use that as well Okay So this is basically my HTML file So guys, I’m now going to obviously discuss the basics of HTML and CSS because that’s not under the scope of this session So I hope all of you have a basic understanding if y’all don’t have a basic understanding of HTML CSS and JavaScript, like I said earlier, I’ll leave a link in the description box Y’all can go and check out that 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 basically downloading the jQuery Okay So now let’s look at the document object model Now the document object model is a tree structure of the various elements of HTML here You can see that it begins with document This is basically this this document is basically the ancestor of every other element in this File and this HTML again is the ancestor of all of these other elements Okay Now the head and the body elements are children of the HTML element So this is basically like a tree structure So basically title is a descendant of head

similarly H 1 and the P tags are children of body Okay, so they are just descendants now guys, this is a simple tree structure and this is what document object model is It’s not any complex concept It’s a very simple structure of your HTML file Now, let’s move on to jQuery selectors Now The first thing we’re going to learn in jQuery is the selectors now, why do we need selectors these selectors allow you to select and then manipulate the HTML elements or the Dom elements now all that the web developer has to do in order to make a webpage more interactive or just create a web page for that matter is to make sure that the Dom is easily manipulated only when you add effects into the Dom you can make any changes On your web So that’s why we use selector So basically selectors with select a particular HTML element and then you can use other functions on this HTML element and man, you played that element All right So what we’re going to do is we look at examples will type out codes and we look at examples, so don’t get too confused Okay, so I’m going to 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 basically say jQuery tutorial Okay, guys, the queue is always caps in jQuery So we’ll have a header which is jQuery tutorial and let’s have a simple paragraph by Ed Eureka All right, in order to make things a little more interesting I’m going to create an unordered list now within which I’m going to have a few elements in the list tag So let’s say I’m going to list my favorite dogs I know there are no favorites when it comes to dogs because all dogs are really cute But if I had to list down three favorites, I would definitely go with these three, okay golden retriever quite old-fashioned when it comes to dogs I really like golden retriever, even though there are new breed’s right now, but I think this one’s really cute and then Siberian Husky So guys you can make it interesting and put in a list of whatever you would like like you can put in list of your favorite fruits or your favorite colors anything like that? Okay, and that’s it boxer close the hatch tml tag So I’m just going to save this file And what I’m going to do is I’m going to reveal an Explorer So basically this is how our webpage looks now, like I mentioned earlier most of the browser’s like Google Chrome Safari Internet Explorer have a JavaScript engine embedded into them So this is the Google Chrome browser like y’all can see now what I’m going to do is I’m going to right click on anywhere on the page and I’m going to click on inspect over here Okay So this opens up my JavaScript engine now, this is basically the file All right one second Okay, there was a small error because I had opened up a CSS file which I’d link Okay guys just ignore that are off So now what I did here was I open up the JavaScript engine And we have a JavaScript console over here It says JavaScript contacts Now, what you can do is you can manipulate the Dom elements through this console So basically you can run different commands over here You can type something and you can run it now just like in the vanilla JavaScript We need to select things and manipulate them in jQuery We can select anything we want by using this dollar sign All right So this is the dollar sign or the dollar function that you can use to select anything now and regular JavaScript We have functions like document dot get element by ID query selector all then there is get element by class get Elements by tag and a hundreds of such functions, but when it comes to jQuery the dollar function basically replaces all of these other functions, okay Now, let’s look at an example So let’s say I want to select this header header 1 this is hedge one tag, right? So what I’m going to do is I’m going to type the dollar sign first We’ll open up brackets and within quotation marks, we’re going to type Whatever we want to select All right So what I’m doing over here is abused the selector function and within the quotation marks and mentioned heads one So what this does is it will 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 highlights my header one tag Okay It also shows me the dimensions of the tag and this is how to select a basically works Now Let’s try selecting the body Now that I’ve selected the body you can see that it highlights the entire body and it shows me the dimensions of the body as well Okay, so guys this is how the selector works now, let’s make things a little more interesting Okay Let’s just go back to our Visual Studio code Now What I’m going to do here is within my first list element I’m going to add an anchor tag Okay, let’s say we randomly add an anchor tag and we’re basically directing this to google.com and let’s call it Google

So guys I hope you all understand basic HTML because I’m now going to explain the HTML It’s going to be a very lengthy video if I sit and explain how HTML to y’all So for that I told you all that I’m going to leave a link in the description Y’all can refer that link and you all can understand HTML So I save the file now I’m just going to refresh Okay So here you can see the anchor tag, which is Google now Let’s see that I wanted to select this anchor tag Okay Now we previously saw how to select the H1 tag We saw how to select the body, okay What if I want to select this particular anchor tag? So what I can do is I’m first going to type out unordered list You have to type out the path to your anchor tag Now in order to specify the anchor tag What I’m going to do is I’m going to specify that the anchor tag is within a list and I and in turn this list is within an unordered list Okay, so it’s basically like specifying the path to this anchor tag now because there’s only one anchor tag in this entire list It’s going to select this anchor tag only Let’s see how that’s done So you simply type out UL l i and e so your this is your unordered list This is your list item and this is your anchor tag now, let’s click on enter So when I click on a you can see that it highlights my anchor tag, it also gives me the dimensions along with it So guys, this is how it works Now Let’s make it a little more interesting Now Let me just type out this code first and then I’ll explain what it’s doing So what I’m going to do first, Is I’m going to select the header Okay, H1 tag, and then I’m going to apply a method to this I’ll just type it out first and then you all can understand what I’m saying So what I’m doing here is I’m selecting the H1 tag using this dollar function after that to this H1 tag I’m going to apply this method dot CSS method now within this method I passed a parameter and a value to that parameter So the parameter is color or the property is color and the value of the property is red So what this line is going to 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 saw that this turn to Red So guys this is how you can play with the selector it basically manipulate the Dom Okay So this is what I meant when I say manipulating the Dom now, let’s make it a little more fun And let’s say we change the background color also Okay, we change the background color to Black So here you can see the result So guys basically the selector is just to select a Dom element and then manipulate it in whichever way you want Okay So this is the most basic concept of jQuery understanding the selector is very important because you’re going to use selector at every line of jQuery So with that we are done with our selectors Now, let’s look at our next topic now we’re going to discuss a few jQuery methods Now one of the methods that I already discussed is the CSS method I just showed you all how CSS is used to style a particular header Okay, but we’ll come back to this later on now similar to that We have other jQuery methods like the before method after matter Now, what is a before method do now this method inserts a specified content before the selected element Now, this is the selected element now before the selected element It’s going to add this content So whatever content you want to add Before the particular element you mentioned that content Within 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 do is I’m going to select my unordered list and before my unordered list I want to add something before my unordered list So how I can do that is I’m just going to mention whatever I want to do So within H2 tags, I want that same my favorite dogs And let’s close the hatch to tag So what I did here was I basically selected my unordered list first and on my unordered list I’m going to perform this function Now what this does is it adds whatever I type Within These quotation marks before my unordered list Okay, let’s just see how it works So here you can see that right before my unordered list I have my favorite dogs now similar to this is the after method Okay, let’s go back to the slides Now the jQuery after method inserts a specified content after the selected elements Okay So this is the selected elements and after the selected elements It’s going to enter this content Okay, let’s look at how this works will look at the same example So what I’m going to do is I’m going to change this to after okay and let’s say I type Are adorable and okay

So you saw that it says my favorite dogs blah blah blah are adorable Okay, so guys this is how before and after functions work So these are just simple examples of how before and after work So up Next we have text now a text function is used to set or return the text contents of the selected element So let’s say we have a selected element over here And if we pass this text method on that selected element it just going to return the text of this element You can also set or replace the text of a particular element by using the text function Okay, let’s not get too confused I’ll just open up my browser and 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 is I’m going to use a selector and I’m going to select the list of elements within the unordered list So I’ve selected a lie, and I’m going to use the text function over here Okay, let’s see what this returns Okay So over here you can see that it’s returned golden retriever Google Siberian Husky and boxer Okay, let’s do one thing first Let’s remove this anchor tag because it does not make sense Okay, so I’m just going to save my file and let’s open up the browser refresh and let’s run this command Okay So you saw that it returned golden retriever Siberian Husky and boxer Okay Similarly Let’s say I just want to return the first element of my list then I would do something like this So what I did here was I selected list and in that I mentioned first Okay, so I basically mentioned the first element of the list now this returned only the golden retriever to me, which is exactly the first element of my list You can see that golden retriever Now, let’s say that I want to replace some content Okay, let’s say I want to 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 off with the selector So I’m selecting my P which is my paragraph tag Now since I have only one paragraph within this entire HTML file, it knows that it’s this paragraph Okay So let’s say there was another paragraph over here Then what you would do is you would mention paragraph: first and you’d perform an action on it Okay So yeah, let’s coming back to this I’m going to say text welcome to this fun tutorial So what I’ve done here is I’ve selected the paragraph tag, and then I’ve applied the dot text function on this tag Now Let’s see what this does Okay, let’s click on enter What happened here was by Eddie Rekha was replaced by welcome to this fun jQuery tutorial So this is how you use the text function to either set or to return some Intent All right So guys, I hope all of 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 is very similar to the text It is used to set or return the Hedge tml content of the selected elements Now, let’s look at the difference between the two a first let’s look at an example of how HTML is used to return the content of a particular element So let’s say I lie last dot HTML So what I’ve done here is I’ve selected the list and from the list of selected the last element and I’m running has tml tag on it So this returns boxer y’all can see that it returns boxer Now Let’s see how you can set the content using HTML Now what we’re going to do is we’re going to change this last element over here with says boxer will change it to something else So guys bear with me when I type the code, so I’m going to replace boxer with German shepherd Now Let’s click enter here You saw that it got changed to German Shepherd Okay So this is how you set the content using HTML Now, what is the difference between HTML and text? Okay Let me show you what the difference is Let’s say I’m going to select the entire unordered list and I want to return the value using text when I return the value using text You see I get this but when I do the exact same thing using HTML, let’s see what happens So I’m selecting the unordered list and I’m running the HTML function on this now here you saw that it’s returning the HTML tags to me along with the text content over here reduce Returns the text content but over here, it will return the HTML content as well Okay, so you can see that Ally and an ally is not there over here That’s It Returns on either text content This will return the HTML content as well Okay, so guys, I hope all of you are clear with the difference between HTML and text moving on to our next function is the CSS function Now, I already showed you an example of this CSS function

But what exactly this function does is it Styles a particular element So whatever element you select is styled using CSS So if you see any color or any pop in your page or any sort of design medic ready design on a web page, it’s because CSS was used Okay Now what is jQuery CSS method does is it sets or returns one or more style properties for the selected elements now, let’s quickly look at an example So what I’m going to do is let’s clear this unordered list What I’m doing here is I’m creating a script tag Now guys script tag is always used in order to run some JavaScript or some jQuery script so over here, I’m going to create an object using the let keyword So I’m using the left keyboard to create an object and the name of the object is design and let’s define some properties of this object Let’s say that the color is blue and let’s define another property like background Let’s set background to Green Let’s Define another property which is border We will set this to let’s say 3 pixels solid black What I did here was I created an object I created an object called design and I’ve given this object three properties color background and Border Okay Now these three properties have particular values So colors value is blue Similarly background color is green And the border is so on now Let’s just save this file I know y’all are confused wondering why I’m doing this, but just give me a second So what I did was I save this file now, let’s open up our terminal and we will select let’s say we select the header one tag Sorry, I forgot to add the select a function So we’ve selected the header one bag And on this we’re going to apply a CSS function And what we’re going to do is we’re going to pass an argument to this CSS function Now, what we’re going to pass is we’re going to pass the object that we just defined So we created an object called design wherein we had three different set of properties which had different values So we’re just going to apply these values and properties to this H1 tag Let’s click on enter and see what happens So you saw that the background color the font color and a border was added to this now this happened because we had created an object with color background color and border So we just applied all of these properties to our hedge one Okay, it’s as simple as that So guys this is how the CSS function works It’s basically for styling your web page Okay So your webpage looks more prettier with the help of CSS Now, let’s look at our next topic which is attributes All right Now the attribute method is used to set or return attribute values of the selected element So let’s say you select a hedge tml element and that has Ram element may have hundreds of attributes So you’re going to select a particular attribute of that HTML element and you can return it using the attribute function You can also use this attribute function to set an attribute to the element that you selected So let’s not get too confused with definitions of here Let’s just execute this and see how it works All right Let’s go back to the visual studio code now in order to make it a little more interesting Let me just clear this entire thing So what I’m going to do is I’m going to display pictures of three puppies and we’re going to work on those three puppies Okay, we’re gonna work on the images We are going to try and add borders to those images Okay Alright So first thing what I’ve done is I’ve created a folder called Puppy where I have three cute pictures of a golden retriever a boxer and a husky Okay So what I’m going to do is I’m going to drag this folder and I’m going to paste it over here within the jQuery folder Alright, so here you can see that I’ve added the puppy folder which has three different images Now, what we’re going to do is we’re going to display these images now in order to do that I’m creating a div and I’m assigning a class to this Let’s name it up first So now I’m just going to add these three images So I’m going to use the IMG tag I’m going to set the source So the name of the folder is puppy / let’s say Goldie dot jpg It’s a JPG image So let me just copy paste this and similarly I’m going to add the other two images also so the other image is Husky And then there is a boxer as well Now Let’s go ahead and save this first and I’m getting so what I’ve done is I’ve moved this to the root folder So let’s just save this and let’s refresh All right, so guys, I was facing a problem It wasn’t loading for some reason So I just open my jQuery folder

on my computer and I just copied the puppy folder into that Okay So this is basically the index dot HTML file where I think and I’ve also copied the puppy folder within this which has three images Okay Now this should work So here you can see that within jQuery folder I have a puppy folder and 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 three cute puppies guys How adorable are they to make it look a little more presentable I’m just going to align these images horizontally Okay, so that it’s clearly visible So in order to align them to the left and also I’m going to set their with and their Dimension So what To do is an open another file So guys like I told you earlier that CSS is used for styling purpose So I’m going to open a CSS file over here Okay So this is the symbol this means that it’s a CSS file So what I’m going to do is I’m going to select the class puppers and within this class I’m going to say float:left So what I did was I selected the purple’s class which are defined within the HTML file So here you can see that the class of the divorce papers from just selecting this entire div, and I’m just floating it to the left meaning that I’m going to align it to the left And also let’s set the dimension of the images So I’m going to mention the image tag over here I’ll set the width Let’s set it to 300 pixels and also the height All right, let’s say 250 So let’s save this file and we need to link this CSS file in our HTML file So guys, don’t forget to do that A lot of people miss out on Step and then they wonder why the code is not working Okay, and then so I’m just going to add a link of my CSS over here So it is a style sheet So for those of you who don’t know CSS stands for cascading style sheet also going to write the type It’s a good practice to mention the type So it is text / CSS And also let’s mention the path So the name of my file is in next or css, correct? So that’s about it Now Let’s save this file and let’s open it up All right So guys now you can see that they’re beautifully aligned to the left and they all look so adorable So guys don’t get distracted Let’s focus on our task over here Now, what I’m going to do is I’m going to open up the console over here So let’s apply this attribute function to these images Now First of all, let’s select these images for that You’re going to use the select a function and within the quotations I’m going to write I am g dot attribute function So what I’ve done here is I’ve selected all of these images and I’m applying the attribute function with the following properties The attribute that I’m going to change is the border from adding a border and I am setting the border to this value So it’s a five pixels solid black border Okay So guys, this is how the attribute works now, let’s click on enter Let’s see what happens So yeah, you can clearly see that I have added a black border one second Let me make it more visible Yeah, see it looks much better So what I’ve done is I’ve added a border black border of five pixels and a solid border Okay So guys, this is how the attribute function box now, let’s go back to our next method Alright, so our next method is the Value method now, this is basically used to set or return the values of the selected elements Okay So here you’re just going to return the value You’re not going to return the attribute or you know, you just specifying the value of the attribute and you’re going to return this So we’re going to try something different over here So in order to run a code on this Value method, I’ll have to tell you what is a click function Okay So what is a click event? So let’s go to the clicks line Alright, so here is the jQuery events list And the first one is the click event Now this event is executed when the user clicks on the HTML element Okay, so you basically select element using the dollar function And then when you click on this element some function is performed some briefly telling you what this does because I’m going to be using the click function now, let’s open up a file So we’re going to type in something different over here Okay So what I’m going to do is I’m going to clear this entire thing Let’s clear the div element and I’m just going to add script over here now script tag is used to add your jQuery or your JavaScript code So just open up my script tag now over here I’m going to type a function All right So what I’m doing is I’m selecting the entire document dot ready and then there’s a function over here

All right, so guys before moving on let me tell you what this document not ready function does now it’s a very good practice to have this function in every file of yours, but I forgot to mention it earlier So it’s a very good practice now up You cannot be manipulated safely until the entire document is ready So basically what jQuery does is it protects the state of Readiness now, whatever code you include inside this document not ready function So whatever code I’m going to type over here basically in these lines it will run only once the page is ready Okay So basically the code that you include within this function So let’s say I type something over here Kim whatever code I’m typing over here All of this code will be executed on me after all of this is executed So only after loading all of these jQuery libraries and Frameworks only after that whatever is mentioned within this document or ready function will get executed because let’s say that I wanted to run a jQuery function over here Okay, some jQuery function and I just ignored this line and I didn’t have a document dot ready function Now what happened was let’s say that for some reason this Library took a lot of time to load And by the time it loaded this jQuery function was already executed now, obviously that’s going to return an error because it’s going to say that there is no jQuery library or something like that because this library was not entirely loaded Okay, so that’s why you need a document ready function Okay So as I hope you all are clear now, this is a good practice to include it’s not mandatory of course, but it’s always good to have document ready function at the beginning itself Okay So after your title after you load the libraries, you should always add in this document already function It’s a good practice All right So before we type out the code over here, I’m just going to create a button and an input type Okay now input type will basically create space for user input So my input type is going to be text So the people who are familiar with HTML CSS know what I’m doing exactly So I’m giving some ID to this input and also let’s give it some value Okay, it’s blank values of whatever you enter here is going to be saved Okay, so I created an input type over here now Also, I’m going to create a button Okay, so you use the simple keyboard button and you just type the name of the button that says submit now, let’s come back to this function Now what I want to type here is I’m going to start off with selecting the button Okay, so it’s selecting the button and now I’m adding The Click function over here So guys pay close attention to what I’m doing here Okay So basically I’m selecting the button using the dollar function What I’m saying is when you click this button a particular function will get executed Now, let’s type out the function that gets executed on the click of the button So click is basically an event So on executing this click function some event occurs and that event I’m going to type over here Okay So what it’s going to do on the click of a button is it’s going to give out an alert with the value Dot val so this is where I’m using the value function Alright now, let’s close All right So what I’m doing here is on the click of the button this event is going to occur Okay, so you’re going to get an alert saying value and we’re in the value is going to be this some text identifier So whatever value the user types in is going to get passed over here Okay, and then this dot value function is going to return that value to you now don’t get too confused Let’s save this and we’ll run this and you’ll understand exactly what I’m saying All right So what I’m going to do here is see, this is the input We’re in the user types input and this is the submit button that we created So let’s say hello now let’s click on submit Okay So when I clicked on submit, this is what happens using the click event So basically an alert is shown where in the value is returned So whatever input is given by 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 just returning the value that I’m typing in the input So guys, this is how the value function works All right, it’s very simple It just Returns the value similarly you can set the value as well So I want you all to try something with setting the value and please comment down whatever you’ve tried or any new program that you’ve run using the Val function or any other function will be very interested to know how you have used these functions to build your own program Now, the next function I’m going to talk about is

the add class method Now this basically adds one or more class to the selected elements So you’re going to select an element using the dollar function and whatever element you select you’re going to add a class to it by simply using the add class method now, let’s look at this through an example So first of all, let’s just clear this entire thing Okay So now similar to the previous example, we are going to load the images of all the puppies So it has a class called pup worse Okay, and we’re going to add all the images Okay, so puppy Goldie Okay Similarly I’m going to have the other two images over here Okay, and the last image which is a boxer I’m selecting the puppy folder and then the boxer image All right, so I created a div similar to what we did in the previous examples Now, I’m going to open a script tag before I type out the entire script I’m going to have a button that so let’s add a button over here Okay, let’s name it try add class Now that we have the script All right Now within the script what I’m going to do is I’m going to start off with the document ready function now all you’re already explained the use of this ready function So I’m that’s exactly what I’m doing here All right Now over here I’m going to first start off with selecting the button on the click of the button sum function is going to be performed And what is that function? So basically on the click of a button and event is going to occur and I’m going to type out that event over here Okay Now before I type out the event, let’s define a style class Okay Now the style tag is used if you want to specify some CSS code now, you can obviously open another file called CSS and enter the entire thing but it’s a small code So I’m just going to type it over here itself So I’m creating a class called style class All right, and what I’m going to do is I’m going to Define some property called border and I’m going to assign a value to this property Let’s say 5 PX solid green So this is what is that in the style tag? Okay now coming back to this function So on the click of this button and even has to occur and I’m going to type out that event over here So what I’m doing is I’m selecting all the images first and then I’m using the add class method and I’m passing this style class function that we just created Okay All right Now let’s close our parentheses over here So what I’m doing here is on the click of this button and on these images, you’re going to run the ad class method now to this method of passed a class called style class and within this style class I have created a border of 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 button all these The selected and a border was applied to all of these images Okay Now this border was specified within a class called style class which we had created over here Okay So guys, this is how the add class method works Now Let’s go back over here and let’s refresh first Okay Now along with ADD class, we have removed class and we have toggle clasp as well Now remove class will basically remove that class which you just added and toggle clasp will toggle between adding and removing the class Okay Let’s just look at how this works Okay the same example, let’s open up the console All right Now, what I’m going to do is I’m going to select all of these images Okay, and then I’m going to do remove class start class Now What I did here was I selected all of these images I’m running the remove class method on all of these images and I’m passing the style class as an argument to this method So first of all, let’s add it and then we’ll see how the removeclass works and you can see that every image has a green border now, let’s do remove class Okay So you saw that the Border was it a mode now, let’s do toggle clasp I’ll get so when I did toggle clasp it got added again Okay, if I do toggle again, it will remove the Border similarly again, it will add remove Okay, so guys this is how add class removeclass and toggle clasp works Now, let’s get back to our next topic which is jQuery events Okay Now I’ve already explained the click event to you,

but we still going to run a program and see how this works Now what the click method does is it’s basically an event when you apply the click event to a selector some function occurs or some event occurs Okay, and that event is specified within this function now, let’s look at an example So first of all, I’ll just remove the style which is not needed and then this button is also not needed So we do require these images Let’s just keep this as it is Now, what we’re going to do is we’re going to edit the script path So instead of having button over here, we’re going to select images So on the click of images some event is going to occur that event is specified within this function So let’s type out that event What I’m doing is I’m using a this keyword and I’m adding an effect called hide All right Now, let me tell you what this does So basically on the click of an image this event is going to occur Now this basically denotes whatever element you’re currently selecting and that element will be hidden using the hide effect now higher is basically a jQuery effect Now, this is used to hide a particular element So whichever element you’ve selected, Did over here is going to get hidden using this High defect now, I’ll be explaining how you’d show and all of these other effects in my father slides So for basic understanding just know that this High defect is just going to hide a particular element that you’ve selected Okay, so I’ve saved the file now Let’s just open it up So what I’m going to do is let’s Click on each of these images because we have added an event on each of these images, right? So let’s click on this image So you saw that it got hidden similarly the other two images also get heard in now this is happening because on the click of an image I’m going to hide that image Okay Now this is just used to record my current event So basically on the click of the images those images are going to get hidden Okay, that’s exactly what we did here Let me show it to you once again, so I’m clicking this image, it gets hidden similarly this and this so guys, I hope all of you are clear with a click event now similarly we have on okay now this I thought attached is one or more event handlers to the selected elements Now whenever you have on a lot of people get confused between click and the on event now on is used to specify other event handlers So you can use on along with click and along with key press now key Press is the next method that I’m going to discuss So I’m going to be running an example where I’ll show you how to use key press and how to use the on event as well Now keypress basically executes whenever character is entered So basically whenever you press a key on the keyboard some event is going to occur with the help of key, press ok So guys, it’s quite explainable If you just read the name of the event itself, you’ll understand what it says Okay Now key press is a combination of keydown and keyup Let’s not get into too much detail So I’m just going to create an example where I’ll be showing you how to use key press and how to use this on event Okay So let’s open up our Visual Studio code Okay So what I’m going to do is let’s clear this entire div You do not require this for this example Okay So what we’re going to do is we’re going to create a input we’re going to give it an ID Let’s say press All right, and also it will have a type Okay, and the type is text and we’ll also set some size to this Okay, and let’s see it then All right now here we have a script now within the script instead of selecting images We’re going to select the input First of all, let’s clear this entire block So we have the document dot ready function Now after this, let’s select the input So here we are selecting the input using the dollar function and I’m going to add the on event here So here I’m also going to add the keypress event and some function is going to be performed Okay, so guys, let me just type this out Don’t worry I’ll explain what I’m doing P dot height So what is happening here is on keypress So as soon as you start typing on this input some function is going to get performed this p is going to get hidden So let’s create a paragraph another paragraph Let’s call it Let’s enter this code here start typing Okay Now there are two paragraphs here So I want to edit this paragraph So I’m going to pass in a parameter called last Okay So this is basically going to select the last paragraph which is this one Okay now guys, I know this is sort of confusing

Okay There’s a small Arrow somewhere 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 you haven’t understood anything Okay now basically I Define an input there And what I’m going to do is when I start typing so when I start typing this 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 character the whole paragraph got hidden Now, how does that happen that happens? Because we use the key press function So on the Press of a particular character on your keyboard this last paragraph will get hidden So guys, this is how the on and the key press work now on is used to specify other events as well So on is an event and key press is also an event Okay So this is how on work and this is the difference between click and on so with this we’re done with events Now we have to discuss jQuery effects Alright guys, so now let’s discuss the hide effects Now There are a lot of effects over here We have hide We have show toggle Fade Out fade in fade toggle and similarly We have a few other effects now like the name says it’s sort of an effect So basically hide is like an effect so it and select a particular element and it will hide it Okay, you can have parameters for how long you want to hide an element or for how long you want to fade an element Now, we’ve already seen several examples of hide So let me just show you a basic example where in will discuss hide we will discuss show we will discuss toggle Okay now show we’ll just make that particular element visible and toggle will toggle between hide and show so don’t get too confused Let’s just open up our Visual Studio code So what I’m going to do is I’ll just clear this entire thing Okay, so we’ll remove any sort of confusion now within the body I’m going to have two buttons over here now each of these buttons will have a class Call button and I’m going to give an ID to each of these buttons So the first ID is hide and the name of this button is also hide Okay, and let’s just copy this entire thing and we’re going to create another button and we’re going to give it an ID called show and that’s name the button show Alright, so here I’ve just created two buttons and I’ve given a different ID to each of these buttons Now, what I’m going to do is let’s load a single image Okay, so let’s not waste time and load three images So we’re just going to load the same puppy images So the name of the class is puppers Alright, and let’s add an image I guess so happy and let’s select anyone That’s it Goldie Okay So yeah, let’s close this and this is our div section Okay So now let’s add a script tag Now over here we are going to begin with the document dot ready function Okay So let’s select the document I’ve already explained what this does now within this Let’s define some code Now first What I’m going to do is I’m going to select the ID hide So sorry, I forgot to put this in quotation marks So what I’m doing here is I’m selecting this hide identifier So basically this button hide Okay, so we have two buttons here That’s why I’ve given each of them an identifier so that you know, you can differentiate between these two buttons So basically this is selecting the hide button Okay, I’m selecting the hide button and on click of this hide button some event is going to occur that event I’m going to specify in this function So what is going to happen is I’m going to select the image over here first now select the image I’m just going to hide that image So on clicking the hide button the image gets hidden Now, let’s close this now similarly for sure We’re going to do the exact same thing Okay Let me just copy paste this it’s going to be easier So instead of selecting the hide button We’re going to select the show button and on click on the show button The image will get visible So we using the show function over here So guys, it’s as simple as that Alright, so I hope all of you understood what I’m doing here So let me just run you through what I did So first of all, I created two buttons I gave a different identifiers to each of these buttons hide and show okay, and then I’m displaying this image a single image So what’s happening over here is on clicking the hide button that image is going to get hidden Okay, and on clicking the show button the image is going to get visible All right, let’s save and let’s just run it and see

how this works So let’s click on hide it gets hidden Let’s click on show it’s visible Okay Now what we can do is 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 going to perform toggle on it So it gets hidden Now if I click on toggle its visible similarly, it gets hidden and visible So toggle toggles between hide and show Okay, so guys that was about hide/show and toggle so we covered all of these three in that example Now, let’s look at Fade Out fade in and fade toggle now just like the name says it basically Fades a particular element So either it will fade out that element or it’ll fade in or it’ll fade toggle Okay Now, let’s just execute an example and see how this works Alright, so first of all, let’s clear this entire script path including this entire thing and also we don’t need buttons So let’s clear these two lines as well Now, what I’m going to do is I’m going to add the other images over here as well Now for each of these images I’m going to give ID Okay So let’s define the idea of these images Okay, let’s say this image has an ID 1 and similarly I’m going to do it for the other two images as well So this image has an ID to and we’ll change this to a ski Okay, and The third image I’m going to give it an ID 3 and I’m going to change this to boxer All right So basically I have assigned an ID to all of these images now in a short while your understand why I’m doing that now, let’s create a script tag script and we’re going to have some code in this so we’re going to start off with the document dot ready function Okay, so document.ready some function on it So I forgot to create a button Let’s create a button So we are only Al create a button Let’s say the name of the button is by because if fading out, okay, so I’m going to create a button called by Okay And now what we’re going to do is on the click of the button So we’re selecting the button over here and on click of the button some event is going to occur which we’re going to mention in this function Okay, so, The event I’m basically going to select all of the images one by one So first I’m selecting this image All right So basically it’s the goldie image that I’m selecting and I’m going to fade it out I’m going to use the Fade Out effect over here so we can also pass parameters to these methods So if I say figured out slow, then it will slowly Fade Out Okay, then similarly I’m going to do it for my other two images, right? So here let’s select the second image and you know, let’s keep it fast over here Okay, it will be it out really quick and then I’ll select the 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 done with the code over here All right So what I’m doing here is I’m loading three images and I’m giving an identifier to each of these images Okay, then I’m selecting each 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 see that the first one and the last one fade out slowly So the first one to fade out with this image because we passed a fast parameter Okay for these two we mentioned slow Okay, let’s look at it again Yeah, so guys this is how fair out works Okay Now let’s look at an example for fade in Okay So what we’re going to do here is we’re going to clear this div So let’s not use puppy images anymore, even though that’s sad name But yeah, okay So what we’re going to do is we’re going to have a script function now within this we’re going to have three divs Okay So instead of keeping this as Fade Out let’s keep it fade in So we make it fade in over here similarly for this also will make it fade in and for this also fade in now What are we going to fade out and fade in? Let’s look at what we’re going to fade out Now First of all, let me create a button I’m gonna let say namaste Okay the typical Indians over here All right Now what I’m going to do is I’m going to create a div

and I’m going to create a class called Let’s see if fade Okay Now what I’m going to do is within this div Al have three different boxes or squares and will give ID to each of these terms So that is one now This is the ID that I’ve mentioned over here Okay, so i d 1 we’re going to style it and we’ll give it some sort of width Okay, let’s say width is so much and similarly will give it some height and let’s say 60 pixels Those will keep the display as none for now because initially nothing should be visible when you’re fading in it starts with nothing to everything gets visible Okay, so that’s why we’re keeping the display as none and also will set the background color Means that it too orange for this one Alright, so you can see that I’ve set the display To None because we’re fading in the image Okay, then the background color upset too Orange All right Now what we’re going to do is that’s the end of this div Just close the div over here And we’re going to add another division Now within the div I’m going to give a small break so you can use the BR to give a break now Let me just copy this entire thing We’re going to have three divisions like these so I’m just copying this whole thing now for the second div What we’re going to do is we only going to change the background color some sort of trying to display our flag the Indian flag I won’t be able to get the 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 created three dips over here And on these three divs We’re going to fade in Okay the slowly going to appear on the screen So for this also upset slow fast and all of that Let me just change this So the first one can appear by default Okay, when I want to pass any parameter the second one, we’ll put slow and the third one that’s actually give it some value Okay So this is basically time in terms of milliseconds So I’m going to give this value Let’s save the file and let’s see how this runs Okay at so I forgot to remove the buy button Let’s take that off Okay, we have the Namaste button Let’s see if the file and now let’s check Okay, let’s say namaste So I made a stupid mistake over here I forgot to change the ID So this is 2 and this is 3 Okay, so now it should definitely work Let’s save the changes and I’m just going to open up my browser Let’s refresh Okay, so here you can see the white one because it’s totally white It’s not visible But here you can see that there is this looks thought of looks like the Indian flag So obviously I couldn’t get the chakra where but yeah So this is how it works So guys that was about fade in and fade out So I hope all of you understood how a fade-in fade-out works Okay Now let’s move on to our next topic which is slide down slide up and similarly we’re going to do slide toggle as well Now just like the name says this effect is used to slide down a selected element and it’s similarly has a speed and of callback parameter similar to that is light up We’re in the selected element slides up and then we have slide toggle which toggles between slide up and slide down So let’s look at an example Okay So first of all, let me just clear this entire thing Okay I’m going to clear this whole thing And so I’m going to start off with having a button So let’s say the name of the button is we can name it slide All right, and then we can what we’re going to do is we’re going 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 have an ID over here is not necessary because there’s going to be only one div So we’re going to style it Let’s say we have the width will set the width to 90 pixels Okay Similarly, we will have height parameter and we’ll set that to 60 and will also give it a good background color will give it pink Okay, and okay, I’ve misspelled background So basically this is the div let’s close the dividends over here Alright, so we basically created a div over here It’s basically a small square or a rectangle Okay of color pink Now, let’s have a script tag

Now within the script tag What I’m going to do is I’m going to select the button over here and we’re also going to add on event over here and let’s also add click Ok, so on click and event is going to occur and that event is defined within this function Now, what we’re going to do is we’ll select the div Okay using the identifiers that we gave it div 1 Okay, and we are going to apply the slide up or the slide down function to this Okay, let’s apply slide up first and then we can also pass a parameter say slow Let’s close this up and this should work Okay, let’s save so what I did here was I created a small rectangle using this div and I styled it Okay, so I created a small rectangle over here and I have a button called slide and on click of that button This square is gonna slide 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 is how slide up works now for it to slide down What we’re going to do is if it has to slide down then initially the display has to be none So we’re going to set the display to none And we’re going to change this to slide down Okay, let’s save and let’s see if this works Okay, let’s click on slide See it sliding down slowly So guys this is how slide up and slide down works Okay, you can also toggle it in the same manner Okay So if you toggle this it’ll either slide up or slide down Okay, so guys with that we are done with jQuery effects Now, let’s finally move on to our last topic which is jQuery user interface Okay, this is just the UI now I’m just going to discuss three functions over here, which is draggable droppable and date pick up now like the name suggests You can drag any selected element using the draggable method and similarly the droppable method is used to drop the selected element at a specified Target This is how draggable and droppable work Now, let’s look at an example All right, so I’m going to begin with clearing everything over here Whereas I don’t know why I remove the first header Okay, let’s just keep it as jQuery tutorial Now what we’re going to do is first of all, we’re going to begin with the Earth style tag So basically we’re going to style an element that we’re going to drag around So this is just going to be a small square or something like that So I’m going to give this style of ID called drag all right Now within this we’re going to have a few properties like width Let’s have it 150 pixels Then we will have height similarly so which is going to design an element that we’re going to drag around over here Okay, 60 pixels and then we have will give it a background background color Let’s say blue Let’s click on Blue Violet All right So this is basically the style tag now basically we have a rectangle over here with the background color blue violet and we’ve given it an identifier called drag Okay, so guys one thing I forgot to mention was If you know CSS, then you know that when you use a hash it’s basically for an identifier, but whenever I mentioned dot with some name, it means that I’m selecting a class Okay, so just extra information So yeah now let’s just open up a script tag And so what I’m going to do here is I’m going to have a function over here All right now guys, you can use function as a shorthand for document dot ready function Okay So this is like a shorthand for function I forgot to mention this earlier, but you can use this now what you want to do here is I’m going to select the drag identifier and to that element whatever we designed over here Sorry, I forgot to put quotation marks Now this drag identify a basically selects this rectangle that we created So that rectangle is getting selected and we’re going to make it draggable Okay, we’re going to use the drag will function and yeah All right Okay, so this is the script now what I am doing here is I am creating A Dev of ID drag? Okay So basically this drag and I’m creating a div of ID drag so it’s basically the same division and I’m just going to have some text on it Let’s say drag me around Okay, so yes, let’s save this and this should definitely work All right So this is basically what we style we created a rectangle of violet blue color

And now you can just drag it around Okay, you can see that I can simply drag it around the entire HTML page over here Okay So guys this is how draggable works I know it looks really 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 clear this entire thing So what we’re going to do is we’re going to have an image of a puppy when we want to drop off at his house So basically we’re gonna have an image of a puppy and we’re going to drag it and drop it into his house So we’re gonna involve draggable and drop a bill over here That’s a cute concept So, whereas yeah, I’m first of all going to start with displaying the image So, okay I’m going to select Goldie and alright So now that I’ve selected the image now, let’s have a style function Okay Now we need a house for this puppy So we’re going to design the house Now I’m going to give an identifier to this Let’s call it drop Now within this I’m going to have a bit Okay, we’ll set it to 400 pixels similarly height 400 and we’ll make it float to the right because I’ll tell you why and so when I display this you’ll understand 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 we basically created a square of the color aquamarine Now, let’s add the script tag over here where all the work happens now over here I’m going to begin with function All right Now, I’m going to start off by selecting the image There’s only one image or you can either say image or you can give the identify of the image It’s the same thing and this image should be draggable Okay draggable Right Now I’m going to select this square that we created which has an identifier called bra So I’m going to select that square and I’m going to make it droppable All right, let’s just close the parentheses over here All right So this is it for script Now, let’s also add a small text of the here So victim creating a div with the ID drop okay within this div, let’s have a small paragraph which says my home All right Okay So what we did here was we started off by displaying this image and then we created a square with the following properties after that We’re going to assign the draggable method to the image and the droppable method to this square that we created over here Okay Now let’s just look at the output you will understand it much better Alright, so basically this guy wants to go home All right Give me a second Okay? So the reason it wasn’t getting dragged was because I did not mention our hash over here When you give an identifier You have to mention hashtag over here Okay So let’s save this and let’s open that up It should work refresh now see it’s draggable So this guy wants to go home and this is his house So drop a bill over here Okay, it is not move around and go back It’s droppable So his house is droppable So just we’re just taking him to his house I know this is silly but this was a good way of showing you how draggable and droppable works Alright, so I hope you all understood draggable droppable now lastly we’re going to look at date picker So guys, this is an inbuilt function is an inbuilt widget in jQuery wherein you can enter a date and then you can easily visualize the date We’re now going to go into detail with this I’m just going to show you a simple example of how the date picker works Okay, let me just start off by clearing this entire thing Okay, right up to here Okay Now what I’m going to do is I’m going to have an input where in the user will enter the date Let’s give it an ID Let’s say date is the ID and the type is text will also assign it some sighs Okay, right then All right Now what we’re going to 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 do is I’m going to select the input some typing the input ID over here And on that going to call the date picker widget Okay, so let’s save this so guys, this is all Alright, so I’m just creating an input And as soon as you type the input you’re going to get a date picker Okay So this is an inbuilt widget is not much to code over here Alright, so as soon as I clicked on it

the date picker got visible So let’s say I give some date you can give some data randomly or if you select on some particular date that data is visible over here Okay, so it’s just works normally like this All right So guys, I hope all of you are clear with the date picker Hi guys My name is Arya and yet again, I welcome you all to a video that we at the editor icon Do you and today we are going to be taking a deeper look into angular So most of you out there probably know what angular is you’ve heard about anger at some point of time in your life when you are especially discussing web development with your friends So this is the angular tutorial that we are presenting from Eddie Rackham We are going to be taking a deeper look into angular how it is written how we can write angular apps And in this tutorial we will be covering the very ground hot basics of actually creating any apps of them Most of the YouTube videos out there that teach you angular kind of assume what you already know and they kind of start up with an app and you kind of learn on the way of creating that up But this video is going to be very different We are going to be taking a very classroom like approach to learning angular through this video So this is the first video that is going to be out there in a list of videos that we have planned out for tea You guys angular and we are aiming the latest versions of angular and we will be always updating these videos in any case when angular has changed So this is going to be targeted to angular 8 So as I just said we are going to be taking a very classroom like approach now, what do I mean when I say we are going to be taking classroom like approach? Well, it’s just that like in a classroom after you’ve launched a chunk of what you are meant to learn you are given an assignment which tests your ability is to apply those fundamentals in a very practical fashion So we are going to be having to practice assignments in this thing Actually We are going to be having probably three assignments We will decide that on the way if I deem necessary that you go through an assignment, you will get 1 so these are the topics that we are going to be covering throughout this angular tutorial So first of all, we are going to be targeting what is angular where I will give you guys a very brief introduction to what angular is what it does we are To be going to look into what’s new and angular 8 So this is angular 8 and some of you guys might be thinking that I’ve missed out on a lot of things How am I gonna catch up? Don’t worry I’ll get to that just in the second after we have gone through a little bit of a theory of what is angular And what’s new in angular 8 We are going to jump right into the Practical parts and the Practical part start up with you setting up your local angular project So we will go through the project setup We will also be writing our first very basic and simple application We are not going to be incorporating a lot of complicated modules into this This is going to be a very very simple application just so that you know how everything works how angular as a big jigsaw puzzle fits all the pieces together after we have written a little of our first application you will soon realize that angular uses a superset of JavaScript called typescript So we will be taking a very brief look into typescript I will not get into much about teaching you guys typescript you can basically look up another That this is meant for angular and that is exactly what we will be doing after I have given you guys a very brief introduction to typescript We will be also looking at how you can integrate external CSS into your angular application So we will mostly be using bootstrap 3 and we will be learning how to actually integrate that into your angular applications After that We will be looking at a very basic fundamental and that is how an angular app gets loaded most of the people who learn angular today and they’re very beginner Like they will go ahead and write an application but most of them will not even know how the application is getting loaded and how it is brought to your screen and what are the file systems that are actually being invoked So we will be actually addressing this very important topic as to how an angular app gets loaded after that We will also jump right into the building blocks of angular and that is a component we will be looking at how you can create a component from a CLI We will also be looking at how you can create your custom components manually Above that we will be targeting data binding so data binding will include two-way data binding string interpolation and property binding after that We will also do event binding we will be looking at directives what they are how they do it, but we will be not looking into how you can write your own custom directives So if you’re here on this video expecting to learn about custom directives and how you can write them Well, this is not the video meant for you We will be releasing a video

on how you can build your custom directives In fact, we will be releasing a video on all these topics separately that is components where we take a much much deeper look into what a component is how it is made every piece of code that goes into a confident We will be doing the same with data mining event binding and directives last but not least about this particular video We will be learning some inbuilt directors that ship with angular mostly ng-if ng4 and stuff like that So those are pretty useful stuff and we will be creating some really simple So as I said, I will be giving you guys some small small assignments as we go along the way so let’s plan the sinus out So after I’ve taught you guys how a component is made I’m going to go ahead and get you guys to make your own components and you can go ahead and then check your Solutions with mine We will also be having assignment on data binding and event finding and we will also be having an assignment for inbuilt directives and how you can use them in your application So that’s about it So to make the most of this video I will suggest that when I give you these assignments and after you have properly understood the concept only then you should attempt the assignment So when you are attempting the assignment, please do not go too long with me mostly use the code long part of the assignment just to check if you have done the solution properly not only will this give you a better omph at learning angular It will also shown your brains get them to think in a very angular sort of way now that I have put down everything that I need to tell you guys before we start with the And this angle of tutorial let’s get started Basically just another small thing I want to get out of the way If you don’t know angular 7 anger five or anything like that that goes up too late Don’t worry You can still follow along with this course because you will understand just in a while why? So the first topic that we are going to cover today is a very theoretical topic So that is what is angular So it only makes sense to start with what exactly is Anglo So for viewers who are watching any angular video for the first time you deserve an introduction to what you are learning Now, most of you I assume actually already have done your research before coming onto YouTube and typing out angular tutorial So it’s only mandatory that I give you this introduction The first of all angular is a front-end development framework Now, that’s out of the way Let’s get into what front-end development framework means So when if you have any web developer friends, you will constantly hear two words back-end and front-end back-end and front-end So what do these two words mean? Well the roles of a web developer Poked in the two very distinct branches in this industry The first is that of a back-end developer and the second is that of a front-end developer now a back-end developer is responsible for mostly everything that happens on the back end So basically stuff like routing well routing is also done by front-end developers, but that’s another thing but routing is basically the job of a back-end developer fetching things from a server writing the JavaScript for all that things That is a complete back-end developer sing setting up the server for in fact setting up the database schema That’s everything a back-end developer does what the front end developer does mostly entails what you see on your screen right now So the way you see Facebook the way it’s designed how everything how the news feed is actually placed like that that is a job front end developer You make sure that everything on the website looks tipped up and smack perfect and he does this with a lot of optimization So mostly back in the day front-end more Used to be done by HTML and CSS and CSS used to get very complicated in this fashion It still is a little complicated If you want to present a very polished website, but creating the HTML and making it much more reactive is what the framework does for you So most online sites will say that front end development framework is also referred to as the CSS framework Well while this is very true, it’s not so perfect of a thing to say that is a CSS framework It is more of a reactive HTML framework and I will explain just now how so the second thing that you should know about angular is that it is maintained and developed by Google So angularjs is a JavaScript based open source, front-end framework mainly maintained by Google and by a community of individuals and corporations to dress many of the challenges encountered in developing single page applications We also get to what single page applications mean in a moment it aims to simplify both development and the testing of such applications by providing a framework for client-side model view controller that The MVC architecture on the model view viewmodel controller on the mvvm architectures as you might know it so basically it’s maintained and developed by Google Now, if you don’t Google, you know, things are give you as a product is amazing things like flutter really took off Android You know, what it is today and angular G has has been out there since a long time It’s got an amazing Community If you have any sort of doubt, you can go ahead and push it out on stack Overflow under the angular Tab

and you will probably get an answer almost immediately Other than that your problems might already be there post by somebody else who is developing and face the same problem So basically you have a great Community great support from Google and it’s a breeze to work with angular today The third thing that you need to know about angular is that it is a JavaScript based framework Now if that was not already obvious from angular 1, which is named angular GS Well, I’m just putting it out there It is javascript-based So why is it a good thing that Javascript-based Well JavaScript is commonly known as the language of the web So if you are interacting with any part of the web, you’re probably going to use JavaScript or the JavaScript engine, you might be doing unknowingly, but you are definitely doing it For example, you’re watching this video on YouTube right? Now You are using a 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 trying to learn angular, you don’t really have to learn a new language For example, when you’re learning flutter, you have to learn about Dart so Dart is a new language that is developed by Google and is used in flutter that is their mobile application development framework If you want to go learn flutter, you can check out my flutter tutorial on Eddie Rekha, but for now you need to know that angular is based on JavaScript Well, not exactly JavaScript It is based on typescript typescript is the main language that is used in angular scripts and typescript is basically a superset of JavaScript We will get into what I stripped is later on So basically the fact that it is made up of it is based on JavaScript makes it much more common and easy to reach out for developers like us after that We just discussed that angular is main first single page applications So we are not trying to create multi page applications with angular angular is made for making single page applications So what exactly is a single page application? Well, it does not read require a page reloading So for example Gmail is a wonderful single page application So let me just go ahead and show it to you So if you go ahead and open up your Gmail account and let’s say you are straight-up going to open on the inbox page Now if you were to go into drafts, let the site stop loading Okay So if you were to go into draft, you see that there is basically no load out here your screen isn’t going into that whole whoopty whoop of loading But if you are not on a single page application, for example, go to webinar, which is a Guarding service so out here we are in the my webinars tab And if I were to go to my recording out here, you see that this goes into a loading fashion This is loading up a new page So this means that gotowebinar is not a single page application while Google is a single page application and you just saw how much faster Google can be my God This is still loading and Google was done with it already So yeah, single page applications certainly have the performance and speed that you required today to all your things very seamlessly So it’s great to have a framework that lets you create single page applications with so much ease Okay, so that was all about angular and what you need to know about it to actually go ahead and start developing apps using angular Now Another elephant in the room is angular 8, most people I actually teach angular are very flustered with the fact that angular is on version eat at this moment They are mostly flustered because they think they have to go through everything from version to version 7 and then learn it Well that is The case first of all angular was released as angularjs and angularjs was the very first released and everything changed with angular 2 itself The whole engine changed how angular written is change So basically the major overhaul was done in angular 2 and since angular 2 after every six months Google actually releases and update to angular and since then it’s been like angular 2 3 4 5 6 7 and now we’re eight So those funny half years that have gone So it’s basically being four years I guess if my math is correct So now we’re at angular 8 and every update that they make out there is basically backwards compatible So think you’ve learn angular 5 Well, you can still work with angular 8 because most of the stuff that’s been changed are backwards compatible So now that being out of the way, let’s go ahead and see what is new in angular 8 now, if you’re a beginner to angular most of this will not exactly make sense to you So I recommend you skip it, please use the time stamps that then the description to skip The next topic and that is Project setup and I’ll be way more interesting for you But if you’re a guy who is tech savvy and like to know what he’s working with what’s new in that version? Well this part for you so angular, it came with a few changes and one breaking change Most of angular updates have a few breaking changes So the changes that are very relevant in angular 8 firstly is the IV engine So angular uses a visual rendering engine and that is going to be replaced with V it is still in its testing phases to be honest

It’s a Beta release and angular 8 It will become very much prominent in angular 9, I guess so IV is the most hype thing out there because you are visual rendering API remains unchanged So basically you’re cute You don’t need to change a code, but the way it gets rendered is completely different It’s faster much more optimized and it’s basically a breeze to work with the next thing that’s new in angular is the basil engine So vassal is your way 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 replacing webpack webpack is the god of their part it is going to make webpack job a lot more easier It’s going to orchestrate and really serialize out what dependency you need to actually really a projects So the coolest feature of Basil is that it has a very smart algorithm for determining the bill dependencies and injecting them into your project Another thing That is cool about angular 8 is Loading so this is just to make sure that there is a different type of loading for legacy browsers and the modern browsers out there So basically the modern browsers use more in JavaScript and Legacy ones use Legacy JavaScript So basically there is a load time difference and when you are using Legacy JavaScript, it tends to be a little slower while modern ones are way faster They’re much more quick to even write as a developer’s perspective So differential loading the basil engine and Ivy so these are the three changes that are there in angular 8, there is also a very breaking change in angular 8 I have not listed that out out here Well that has to do with the HTTP Library So to invoke the HTTP Library you would mostly have to import angular slash HTTP, but that has been changed and that is the most breaking change and that to now use the HTTP libraries You have to import at the rate angular / comment / HTTP and if you’ve used SE debe before, you know what I’m talking about so with that out of the way This is all the theory pot Let’s go ahead and start up with our own angular project So the first thing that you need to do is to start off with angular is go ahead do your browser open up a new tab and search for no GPS No, I am assuming that you don’t have no GS installed on your computer So click on the first link and go ahead and download the one that is recommended for most users after you downloaded You will get a setup file Go ahead click the setup file and just follow the instruction It’s a pretty easy install and I don’t think there should be much problems with it But just in case our the you got a problem with it some configuration problem goes wrong, please go ahead and check out another video that actually explains how to install node.js on your computer because this video is meant for angular I have a lot to do and I can’t waste time where stuff like how to install node There are a lot of videos out there including Eddie records itself, and you can go ahead and check them out And once you have installed note on your computer, you can go ahead and check if note is installed by just typing No, Don York On prompt and this should open up a JavaScript console You can say stuff like print or let’s say VAR x equals 5 and if you just call X it will say five out there I know my text isn’t very clear because I have this weird blue background in my command prompt But yeah, if you can open up JavaScript console with just typing node, you have installed node in proper fashion now to exit from this console, you can just type dot X it and I will exit you from that console So let’s go ahead and clear up our Command Prompt and the next thing that we are going to do is install 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 sort is the angular documentation So go ahead and search for the angular Doc’s so this will open up the angular Doc’s it’s at angular dot IO / docks go ahead and check the set apart So I’ll show you see that you need nodejs now that you have done it you can go ahead And install angular 2 an npm command So npm is a node package manager and all you have to say to npm is that you need to install so install or you can just simply say I and then – gee which basically means that it is going to be a global install and not pertaining to any particular folder or any project setup So we are going to be installing this globally so that you can access the angular CLI from almost anywhere 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 always keep the documentation open and you should go ahead and press enter after that So this command will go ahead and install angular on your local machine So let’s just wait for this to finish Okay So as you guys know I already had angular installed on my computer So nothing new has actually been changed It just says it updated one package So that doesn’t really matter So this means

that angular has been installed on our computer and you can go ahead and check that with just creating an angular project Now I’m in my default user directory So let me just go ahead and change it to the desktop directory and out in the desktop directory I want to make folder called angular tutorial so angular underscore tutorial So this is where I’m going to be saving all the projects and all the setups that we will be needing for the various assignments and simple applications that we will be looking at and the concepts so this is going to be the folder for the day So let’s go ahead and quickly change into that folder and so angular tutorial and we are in our angular tutorial folder so out here what you can do to start up a new angular project is as you guys can see I’ll tell it is it says to create a workspace and initial application you can use the engine new command So NG new basically tells angular CLI that you want to start a new project and then you basically give your project a name Okay So Angie knew and what do we name our project? Well, let’s think of some appropriate name Let’s go back and see what are we actually going to do next So we are going to be writing our first app So it’s very simple that we are going to be calling this our first app So engine you will go ahead and create folder which has everything that you need to create your first app so you can opt out for routing for now because we will not be going for routing in this tutorial and we will also be using CSS for our file So just press enter twice and I’ll be using the default settings for setting up your angular project and there it goes so that completes our project setup and for this project setup We are also missing on one thing so Firstly we are missing our code editor So I’m going to be using visual studio code but you can use other paid applications like web storm out there webstorm 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 going to be sticking to my cheap ways and just use Visual Studio code now just because Visual Studio code is free doesn’t mean it takes away from any other functionalities that come from the paid apps It has all the functionalities like syntax highlighting for creating and generating components It’s really good You even get a built-in terminal to actually run your angular CLI commands Okay So let’s just wait for this project to get set up It kind of takes a couple of minutes from some time So let’s just give it some time Okay So now that our angular app is set up and up and running All we need to do now is go ahead and just download visual studio code So to download visual studio code go ahead and type in Visual Studio code on your browser Go to the first link and also the second link out here the download visual studio code that should give you a set of file and you should just go ahead and set it up that’s very easy to do So, let’s not waste more time and get started with writing our first app Okay, so out here if you were to go to your desktop and if you made a folder like me like angular tutorial, you will see that there’s a folder that says first app now if you were to open the folder you see a lot of things you probably don’t understand out here So there is a TS lint which is a Json source file There’s also the package file There’s a package lock There’s also this implies very important angulardart Json file, which basically includes all your dependencies Now this e 2 e file is not really going to be useful for us in this Earlier tutorial it we basically means end to end and this is made for end-to-end testing of angular apps What we are going to be interested in is mostly the node modules and the SRC so Archer and SRC you see that there is this index page there is an index page which is our HTML file There’s also the style sheet, which is your basic styling of the web app that comes built in when you basically make any angular app So first of all, let’s go back and let’s open this folder particularly with Visual Studio code So as you guys can see I have opened up our first app and we can go into our SRC and we can see that there’s an app folder and we get a lot of files out here So we have an app component CSS file We have an app component dot HTML file We have an app component dot spec dot DS file So all of these dots pecked RTS files are basically used for Testing purposes and I’m going to be concentrating on testing but rather more on developing an app So this is none of our concern for now You can feel free to actually go ahead and delete it If you go ahead and open up app dot component of TS you can go ahead and see that there is a bit of code written out here So there is an import line from the first thing we can see

that it’s importing something called components from a library called angular / core There is also this decorator out here that tells angular that this is a component it has a selector and has a template URLs It has tiles URLs in in the class You can see that there is a variable that says title and it says first app now this really doesn’t make sense to a beginner, but just wait on when we will know what all of these things mean from components to a class and everything else So first of all, let’s go ahead and see what this app that angular ships with looks like so to do that Go ahead and open up your terminal You can simply do that by dragging it up and down and out here What do you want to see is NG – – open which basically makes your default browser open up and all you want to say is serve So this command basically serves the app that is in development mode right now and it will serve it on a local host at Port number four thousand two hundred So it’s compiling at the moment So let’s go ahead and see what it actually looks like Let’s give it some time to compile and should open up the app for us automatically Close off this one Let’s keep the documentation open Let’s close off The node.js is closed off my mail Okay So this is the first app Okay So as you guys can see we are greeted with the welcome screen as you guys can also see it’s on a local server This is not hosted at a global scale This is just for your testing purposes as a developer so you can see that it says welcome to the first app Now if you go ahead and see out here it says title equals first app Now if you go ahead and the HTML part you can also see that there is this little place where title is referenced back again So as a developer, I think you can make some sense that these three files app component DS the app component of HTML and the app component dot CSS is kind of interconnected with each other So yeah, this is basically what an angular app looks like Okay So this is basically the application that angler ships with it’s a very welcoming application It says welcome to First up It has some useful links such as the tour of Heroes link It has a link to the command line interface documentation and a few of the angular blogs Now This is of really no use to us if you want to learn so let’s go ahead and actually fiddle around with this file that comes along with angular when you create your app So if you go ahead and look at the app component HTML page, it looks deceivingly similar to what we see on our screen out here when with this app that angular ships with so as you guys can see it has an edge one that says welcome to and title and out here You can see welcome to First up So basically we can say that the title out here which we saw in the typescript file, which is said title equals to First app and that gets converted out here above that We also have a few links and basically it’s an unordered list and also if Necessary there is some styling that goes along too But at this moment there is no styling that is available So let’s go ahead and Tinker around with this application just to give you an idea of how angular actually works So angular is basically divided into components and angular app so out here what you see is the app component So every component has three files It’s basically it’s a template so it has its own styling So that is app dot component dot CSS It also has its template So The Styling is CSS The template is up dot component of HTML and the logic the business logic that goes inside this thing is in the app dot company dot DS file now, there is also this app dot module dot EPS file and I’ll get to that just in a moment But for now, what you want to do is go ahead and just delete all these stuff that is there and app.com pin it on HTML file now, don’t forget to keep your terminal running which is serving this application So Time you go ahead and save it basically saves it and you can go ahead and see that it has reloaded it and we have nothing out here to be honest So let’s make the speech a little more interesting So firstly let’s give this just an input Let’s say so we want a div and in this div, we are going to have an input of type text now every input should also go with the label and this label is for name so we can give this type name equals name out here, right? So let’s make this a little less confusing for you guys Let’s call this first name right and out here You see if you go ahead 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 also have a paragraph out here which an output out our name for us

Please don’t pay much attention to the Syntax for now just try and understand what is happening in the background because we will get to the syntax just in a few moments So we want to display the name out here So to display the name we need to create a variable called name So go ahead and go to your app dot competent RTS file and change this name the title to 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 save our HTML file and as you guys can see RL is coming out here But if we still type something in the input nothing actually happens Now, what I want to do is what if I type in the input should automatically be reflected in this paragraph below it so we can do that very simply with so-called tools and angular ships it now these tools are called directives and we will get into directives just in this tutorial I’ll be teaching you how to make use of inbuilt directives like the one I’m going to be using right now So let’s go ahead and use this directive now pay no attention to the way I am writing this because syntax is something that can be dealt with later So for now what we want to do is start up square bracket and then an open parenthesis bracket, that is the normal bracket And all I want to say is NG model is equals to name So name should be in your double quotes Now This will tell angular that whatever is being typed out here is going to be stored in a property called name and we are also going to be displaying the same name down here in this paragraph So let’s go ahead and save this and let’s go ahead and reload our file and you surprisingly see that the input quad that we had has suddenly disappeared Now what we want to do to realize our mistake is go ahead and say inspect if you go into the console, it says uncaught error template parse error, so it can’t bind to ng-model since it isn’t known property of input Okay So basically angular can’t figure out what NG model is now this is because we have not Imported the functionalities of ng-model now I said that this is an input model and it comes shipped with angular But the way typescript works is that you have to go and tell typescript everything you are importing that you will be needing for your app to be running now all your Imports to this is actually done in the module file So things that need to be imported when you are running this is done in the modules file So as you guys can see we are importing a few stuff already that is by default So we are importing the NG model from angular / core and we are also importing the browser module from angular / platform browser now to actually make the magic of ng-model happen We need to import something and this is at the rate angular / forms So everything entered the semicolon so basically in typescript, you need to tell typescript where everything is particularly so angular / forms and what we need to import is forms module Now this was telling typescript that we are going to be using this but you also need to tell angular that your forms module needs to be imported So you can do that by just copying this name and putting it in the Imports array out here So put a comma or press enter and type in forms module go ahead and save your HTML page also just in case and now what we see out here is we do not get any error First of all and we have this nice little input box So let’s close this We also have this nice little input box It says Aria in the paragraph It also says Aria in input box now if I were to delete that everything in the paragraph also automatically gets deleted So if this was not a single page application for example, reflecting the changes A to the input would probably take you to reload the page that that is not with angular You can go ahead and simply type your name and everything will happen like it’s magic and it will appear down in the paragraph below So that was all about installing angler setting up your project and we set up a project we saw how the shipping app actually looks like and then we kind of fiddle with it And this is how an angular app basically works you have components and then you also have modules so modules are like sub-packages like any app would be divided into sub packages and angular app is divided into modules now molecules contain components and this is the component out here that we worked with just now it is called the app component Also another thing that I want to bring to your notice is if we go ahead and open up the source code what you see out here is it’s basically an HTML page but there’s this weird app Root element out here

It’s almost seems like we I’ve built our own custom element below that what you see is a bunch of script Imports that angular does for you so that angle works properly but the main interesting part is this app Root element now, if you remember we had seen this app Root element in our app dot component RTS file and we see that we have a selector called uproot Now the page that gets loaded into the browser is actually this index dot HTML page now, I’ll tell you see that we have created this app Root thing So basically uproot out he’ll is like a selector So basically this will help you understand how an angular app gets loaded when we get to that so index dot HTML is basically the file or the source code that you see out here It also happens to have this app route custom element now, we built this custom element using our components and we told our confident that the selector for this custom element We uproot and the template of that component is stored in app component that HTML which is basically this file and also the component has some styling which it at the moment doesn’t have any if we would have any styling it would be in this app dot competent dot CSS file and basically that’s it And we have our app dot component TS file which makes sure of the logic that is working properly So basically this is how angular works it’s a bunch of components Now, let’s go ahead and this was our first app that we created now, let’s go ahead with our next topic and that is what is typescript Now, you really saw that we are using something a little different from JavaScript It’s basically not JavaScript It’s typescript So what exactly is typescript well typescript is just a superset of JavaScript It is a strongly typed object oriented compiled language It was designed by Microsoft and it is basically A superset of JavaScript So anything that is included in JavaScript is definitely included in typescript, but the reverse can be actually said so everything in JavaScript is there in typescript because it is a superset but everything in typescript is not there in JavaScript So typescript is basically used when you want to create a JavaScript based application that can actually scale at an industrial level because when we’re talking about typescript it basically compiles down to JavaScript and this compilation is done by the angular CLI So if you want to go ahead and learn the nitty-gritties of typescript, you can go ahead and check out typescript tutorial out there on the web There are plenty of them typescript is really easy to learn and even if you don’t want to learn typescript, I think it’s easy enough if you know JavaScript, you can catch it up along the way it’s basically like JavaScript but having classes interfaces and stuff like that So with that out of the way, we can move ahead to our next topic and that is integrating external CSS into Will angular application Okay So for the purpose of integrating and external CSS, we’re going to be working with bootstrap 3 so bootstrap, if you don’t know is a CSS framework So let’s go and see what bootstrap does So this is bootstrap We are on bootstrap version for right now, but I will be using version 3 for this purpose of this demo So you can go ahead and see what bootstrap does out here on bootstraps official site I also have a bootstrap tutorial you can go ahead and check that out too I’ll leave a link to that in the description below It’s basically will show you how to use bootstrap and its various forms and formats Okay So now we are only going to integrate bootstrap into our project So to do that All you have to do is go out here and open up another Powershell the mound out here What do you want to do is type in the commands npm install and – does save and you want to say bootstrap 383 what this will do is download all the files of bootstrap 3 and store it in this node modules folder So node modules folder is anything that you use from the know? Package manager if you download some external package, it will be saved in your node modules after that after its downloaded I will show you how you can integrate it into your project that you are working on Let’s give it some time to actually download the node modules or what we have here That is bootstrap 3 Okay, so we have actually downloaded bootstrap 3 now, you can check that by actually opening the node modules folder and going down to be oo So ABCD be should be somewhere here Okay, it seems I cannot find it there

Let’s go ahead and check it out on our desktop So we have angular tutorial first up no modules, and there should be a bootstrap out here Yep below bonjour, so it should be below bonjour So let’s go ahead and find bonjour out here So this is our bootstrap folder that we had just downloaded now out here we have a few folders So under this bootstrap folder going to the dist folder that stands with distribution go to CSS And all you have to do is copy this right click on it and copy the relative path Now, all you have to do is go into let’s let’s minimize this a little so that it becomes easier to work with Now all you have to do is go out here going to Styles This is the angular the Json file on almost line number 27, you’ll see that there is a Styles array so out here All you do is put a comma s press enter and put in the address of the bootstrap CSS file now be aware that when you copy the relative path you have to actually go ahead and change this all to a backslash So this change all of these two backslashes and you should be ready to go So, let me just show you guys this is without actually having bootstrap installed So this is the app that we have created now, if you were to just go ahead and inspect we can go ahead and see that in the Head bar There is only one Styles at the size deck / CSS This other styles is just a way of telling angular that there’s a source mapping of All the CSS Styles at this moment You can see that this is the global styles to this file now once we actually go ahead and save our angular dot Json file and then we have to do is actually go ahead and node where we were actually serving hit control C And then what you want to do again is serve it again to basically save your angular geojson file stop serving your application onto the server and then save all your files and then start up a new Fresh So process again, so to start a new Fresh serving process All you have to do is go ahead and tie Angie knew or you can just say n Oh wait, we’re not creating a new component or we want to do is say n g – o and serve so remember this has only one style at this moment So now let’s see how we can actually integrate bootstrap if We actually could integrate bootstrap into our project Okay, so our application has actually compiled and let’s go ahead and see let’s go ahead and inspect our page and if you go into your head part, you will see that there is a new style that has been added So this says that bootstrap version three point four point one has been added and now you can use all the styling that comes along with bootstrap For example, if I were to put this division inside a can clasp called Jumbotron this would give it a specific type of styling a Jumbotron is not exactly meant to be used like that So let’s go ahead and change it to a container Now if you want to know about all these bootstrap glasses that I’m using you can very well go ahead and check out my bootstrap tutorial that I have up on a direct course site Okay So let’s remove this We are not doing the styling properly at this moment Let’s get back to this Okay Looks like we have actually broken something But what I wanted to show you is that we actually have bootstrap going on and I bootstrap is completely working This is bootstrap version three point four point one for us So that is guys how you would add an external CSS file to your project Okay So our next topic for today is how angular actually loads so if we go back to our code at The Germ and we analyzed all the files that we’ve seen So first of all, you have three component files that is the component styling file click on print template file and the component type script file now, if you were to go back to your page where your application is loaded you would inspect it or to be honest if we go and see the source, so in the source, you see that there is this app Root element Now, how does the up root element know that it has to end? Third an input box and a paragraph or two Well, let me just explain that first because this is a very important concept This will help you how in learning angular because you’re getting to the root and fundamentals

of how angular is working So firstly the page that is getting served by the NG serve process Is this index dot HTML file now in this index dot HTML file We have somewhat of a custom element with the selector of a brute now, if you would realize we have died in this app route selector out here in this app dot component dot t– s file in this app dot competent RTS file We have a decorator method We have a decorator class I’m sorry and in this decorator class we have said that the selector is going to be uproot Basically, it saves a string as a selector and it gives it a value that if this is going to be used for recognizing an element or an HTML page we have then also said that the element will have its Temple thing in app dot comprehend dot HTML file Very basically when a nap root component is present on your HTML file angular knows that it has to serve this three files out here these three files out here the app component files it knows because it’s tied in with the selector Now if you go ahead and see it out here there is a module file also now before we get to the module file, I’d like to tell you that the first piece of code that is actually run is always the main file so out here the main file is the main dot DS file and out here You see this line out here so out here in this file Basically, there are few Imports The one is to enable production mode for development purposes But the most important line out here is platform browser Dynamic and it’s a bootstrap module So in this bootstrap module, we are passing in the app module as an argument So since the app module is being passed as an argument The app module part is actually invoked out here and out here You see it has another bootstrap Re so this boot shop doesn’t actually refer to our bootstrap CSS framework We just included bootstrap means what should be done first when you are actually running an application so out here we are saying that we want to run the app component and the app component here happens to have this HTML file the CSS file and this types file, which are also tied into the index dot HTML, which is a fruit selector So whenever this approach selector is found on this HTML page it is going to actually serve these three files and that is exactly how an angular app is loaded onto your screen So this workflow is very important for you to understand such that you know, where you are going wrong just in case in future debugging processes We will be having a very detailed lecture on debugging in the future So please hang on for that So this part that I just explained well acts as a precursor of knowledge for the future videos, which will need you to understand An angular application is actually being presented to you on your screen Now moving ahead We are going to go ahead to our next topic and that is confidence And what we have here under this app folder is a component now components are the building blocks of angular everything that you see on your screen using angular is basically a component So imagine there Is this website that you see on your mobile phone and it is a website built by angular now everything on angular will be starting with the root component and they will obviously contain subcomponents and even more subcomponents after that So basically it is a tree of components now if you would remember my flutter tutorial if you haven’t watched that, please go ahead and check that out flutter is amazing and you should be learning it today Well in flutter I had said that application built using flutter is a tree of widgets Now the same analogy can be put to web page that is built using As a tree of components it’s basically a unit or a building block and each framework gives it gives its building blocks a different name So for flutter, it’s a widget and for angular It’s a root component or just components in himself So what we did out here is that we had a component now, let’s say that we want to create another component How do we do that? Well, all you have to do is go ahead and right-click on your applications folder And what you want to say is you want to put in a new folder Now, let’s call this folder Let’s say we want to have a component called servers So let’s call the servers and out here What we want to do is we want to create the server files so out here we are going to create a new file So we are going to create a new file and this file is going to be called the server dot component dot HTML So why did we Choose this naming process Well, when you are building an industry level applications you tend to forget what is what so naming something appropriately so out here, you know that this is the server dot component HTML file

This gives us very good information For example, it is a server it is a component and this is the template HTML file now in this template HTML file, we could be putting anything for example at just been H3 and we could say that this is the server component that you are viewing So if this is coming on our screen, we will know that their this is a server component now we can we also need to add a new file out here So just save this file We need a type script file first of all, so what we need to do is create a new file and this will be the server dot component TS file So TS stands for Stipe script now if you were to go ahead and check Out the app component that ES file out here you see that there is an import and then there’s a class So first of all, we are going to try and replicate this because that is also a component and we are making a competent manually so we will know what 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 fashion of what how it is used So it says app component So to make it more clear that this is a component we could just use something of a naming structure like server component is our brackets Now, we said export because we want to be using this glass everywhere else So this was your way of telling angular that this is a component but this is not where it actually ends You also need to tell angular by actually putting a decorator So as rate component will tell angular that this is indeed a decorator so out here if you would go ahead And again look into your components file out here You see that we have to open the confidence bar and type in the selectors now Basically we want to put in in this component is want to say how I want to select this So we’re going to say selector and I selector will be 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 things are becoming much more easier because of this IDE things are getting imported into our file system Now I want to say out here is our selector will be we have to pass a string so it is going to be server No, we can actually call this a server but that is not the proper naming fashion So just to make sure your selector doesn’t actually go ahead and clash with any inbuilt selector or some selector that might probably ship with angular or you want to do is call this app server So you just put a hyphen in between and you call this app So now another thing that we need to do is parse the HTML file so you can say template URL So let’s see how we can actually use the template URL pain So you see that it is a template URL and we have to pass in the components that HTML so out here, let’s go back and let’s say template URL and all we have to do is pass server dot component Dot HTML now, let’s see if we are missing out on anything You can always go back and check their so we have to do put the dot and the / just tell it that it is in the same Parent Directory so dot slash server dot component of HTML and for now we can skip on The Styling because there is no styling involved So we did not put a semicolon here because this is basically like an array So let’s go ahead and save that so that saved successfully and now what we can do is go back into our app component file and HTML file Let’s go ahead and delete all this now what we can see is let’s put an H1 just know that we are in the app component file So this is app component that we are looking at now If you guys remember we have used to select the out here that are selected for this will be app server So whenever we put an app server type of selector then H3 should be rendered with says this is a server And then that you are viewing so let’s go ahead and do that So let’s go back to our app component and let’s say server So since we have put our apps over here, but we should be able to do is so since we have put it up server there and S3 should be actually rendered there Now Let’s go ahead and check if that actually happens Let’s save all our files save that let’s see if this And what do you see out here is nothing is actually getting loaded There is no h 1 and there is no S3 either now This is because we have forgotten to actually put it in our modules

So if we see that nothing has actually getting loaded there is no h 1 there is no x 3 so let’s go ahead and inspect and let’s go into the console And if you go ahead there, you’ll see that app server is not a known element and the Beautiful part of angular is that it also gives you a solution most of the time So if app server is an angular component, then verify that it is a part of this module So this gives us an idea that there is something missing in the app module spot out here to know that what this actually does So if we were to look at our app modules type script file, we would see that there it kind of looks like a normal type script file There are bunch of imports in the beginning then there is a decorator which is the engi module decorator and it has a bunch of Is now in these are days we have understood what the boot strap ba Does it basically tells which component should be loaded or with service should be loaded when our app is noting for the first time now, we also need to tell angular that there is another component that you should be aware of This is not done automatically If you are creating your servers and components manually So what we need to do is go ahead and tell angular that there is a server component So if we put a server component, we also see that there is another import line that has been added so out here This is typescript This is the way you tell typescript that there is a server component and this is the way you tell angular that there’s a server component now if you were to go ahead and save that we can now see that there is two parts loaded one says that up component and the other said this is the server component that you are viewing if you want to go ahead and inspect you would see that This is a head then this is a body and inside the a fruit We will have the app server component that is running inside the app So we see that there is an H3, which is basically this part So this is how you can create your components manually and then add them to your project and add them successfully do so that angular and typescript both understand how your compliments are being made Now You can also add a styling to your component by just adding a styling folder I mean styling file so you will be calling this the server dot component dot CSS So this is going to be a CSS file and out here we can just say since 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 go into the typescript file and we also need to give the Styles URL and this is going to be so let’s go ahead and see how the styles are actually put this is put in an area So that’s exactly what we’re going to do or to so we want to say is this is copy this hour because it’s going to be the CSS file in the similar fashion go ahead and paste that in and just jeans is just CSS Let’s go ahead and save that And now if we go ahead and load it, we will see that our styling I has also been applied to our components So this is a server component This is the app component which makes it very clear Now, if you are actually a guy who likes things to be much more automatic and seamless like me worry not because angular gives you the power to create components and not worry about if they’re included in your Everything just through the CLI So if we were to go to our partial bar and we were to actually run a command that says NG generate component and we could say let’s say so we have a server so we need somebody to let’s say sub server So stop Now what the CLI will do is it will go ahead and create everything that you need for your component So we see we have a sub server folder out here The sub server has a sub server that CSS file and this also has a sub server that component file only we can go and put the sews it has a component file has a paragraph that sets up server works is also the testing file which we didn’t create this also the components file out here I mean the typescript file and as you guys can see it says apps Observer So that is a selector that you use it with So let’s go ahead and use this so we go ahead and put this into our servers HTML file and we can just say app some server Let’s go ahead and save that Now what you should see is

that there is a sub server works out here So basically what you did was you created a component through the Ally and you basically just used it this is how you are going to be using most of your components creating most of it complements and that is through the CLI, I just wanted to show you how you can do it manually to just so that you know, how a server is written I mean how a confidence is written and what each line of code means when a component is also written now if you were to go ahead and compare this there is a Constructor function and there is this NG on in it We will get to these parts later in our playlist because for now if I were to go into the nuances of engine in it and a Constructor, it would only create chaos and confusion in your mind So that was about components for now So it’s time for our first assignment OK guys So that is how you use and create components using the angular CLI now coming back to the server component that we created I would like to bring to your notice a few different things that you can do So Of all let’s go ahead and analyze the selected part So if you have any experience with web development, you will know that a selector is basically a way of selecting stuff or elements on your HTML page Now when we say app server like this out here this could be anything This could be a property This could be a class or this could be an HTML element to for now This is an HTML element, but let me just show you this can also be used as a class So let’s see we say it’s dot app server and let’s go ahead and save that So this is going to be dot app server Now Let’s go ahead and find very actually used our server So we have used Observer like this Now if you would comment this out and let’s say we put in a div that Hal class and it said app server Now you see this is a silver confident that you are viewing and the sub server works So let’s go ahead and inspect that Let’s go into the body That’s the a fruit and then there’s a div which has a class app server instead of an app server competent So what we did was that we created an App server and we meet the class a selector So the select is basically a class numb then the class can also have its own styling and that is basically how you do it Now instead of actually writing your temple to URLs like this You could also its command this out You could also say something like a template see a template could be just a template and you are going to put your template in these goats Now this could be something like sub server Okay, so this will basically put the apps observer in this template So instead of a template URL you could be using a template to and instead of hairstyles URL Basically, you can do some inline styling Now before we go ahead with our next topic What I would like you all to do is solve an assignment for me So this assignment will test how good you are at creating your components So let’s go back and just change everything back to the way it was So let’s save it Save this save this save everything So out here we can just say app server again, and now that creates an observer for us Okay So this is save and now I want you guys to do a basic assignment actually, so let me just write down the instructions for the assignment Okay So your for your first assignment, this is exactly what you are going to do So as you guys can see on the screen, I have put down three instructions So first of all, what you have to do is create three components called red green and yellow now, we have to use them in the app component part and then we have to give them some appropriate styling and probably an appropriate message So you guys can pause the video out here and go ahead and try and create these three components and then come back if you actually are successful or not also and check out the solution that I will provide you guys OK guys, so that was the first assignment I just gave you so I hope you guys had balls to screen when I told you that I’m giving you guys an assignment and I hope you guys actually try to solve it because in this part we are going to try and solve the assignment I just gave you so this part you can use to see how correct you will well it was a pretty easy assignment So I hope most of you guys got it because that means I could successfully teach you how to actually use components So for the solution we have created out here angular folder that says assignment 1 and it has nothing in it So, let me just go ahead and open it

with Visual Studio code Out here if I would go ahead and go to my source folder into the app folder and just go ahead into the spec dot DS into the typescript file rather and we would go ahead out here and I would serve this you would see that there is nothing Okay, so if we were to just serve this file out here you would see that it is the normal application that ships with angular So let’s just NG open and serve Okay, so as you guys can see it says welcome to assignment 1 and this is the basic application that angler ships with now what we’re going to do is we’re going to delete everything and we are going to start from scratch Now Let’s go back and see what we actually wanted to do So what we have to do is create three components called red green and yellow So let’s go ahead and do that first So to do create these elements First of all, let’s go ahead and delete all this garbage that we do not need save it again and let’s just keep the title So to keep the title just pay attention to what I’m doing keep the title This is very you don’t need to do this to get the assignment correct All you need to do is make the components So this is just me being Fancy with you guys So this or we could say welcome to assignment one make this an H1 so that it looks better Yeah, so welcome to assignment 1 So that’s it Now, what we have to do is create three components So to create three components what we want to do is create a new terminal in Visual Studio code so that we can create the confidence really easily and out here We want to type NG generate component red and we’re going to do this for three different times So we’re going to have the red component We are also going to have the blue component And we are also going to have the yellow confident Now since we’re doing this for the CLI are AB dot module automatically gets updated with red blue and yellow now All we need to do out here is use them because that is a second part We have to use them in app component So our app component is out here This is our app component So what we can do is say app read this will produce the red part This will produce the app and blue port And this will produce the app yellow Let’s go ahead and save it Obviously is read books blue Works yellow looks so we have successfully created three components and we have put them in our app confident But now what we need to do is give them their styling So let’s go ahead and go and do the separate components Let’s open up their styling files We want to say because we already know that it’s a paragraph that works there So paragraph will have border or of since this is the blue component will give it a blue border So we 1px solid and blue and maybe we can also turn the color to Sky Blue I’m using very basic colors out here That’s also copy this because we’re going to be using a very similar type of styling for red and yellow So let’s go into red and let’s face that we want this to be red and this to be crimson and let’s go into yellow and let’s say the same thing This is going to be yellow We could use heal and you could also use another color Maybe much more pale yellow Let’s keep it dark because fonts need to be dark actually So let’s see if these let’s save this file Let’s save this file and let’s see if this file now Let’s go back and see how it actually is working So blue Works yellow box We need to go and put up some more styling for the yellow part because that seems to be kind of going haywire So let’s go to Yellow dot CSS, lets go here So we have actually done this in the app component Let’s save this go back to Yellow go back a yellow dot CSS faces out here and let’s save it So now our yellow is yellow or blue is blue and I read I read you can also add some new styling to them by adding a background color So this is also going to be a yellow Or we can rather or choose some different yellow Maybe it’s making much pelo on the yellow side Let’s copy this line then red component that CSS Okay So for red we can choose something of Peel red sorts

that makes it like that and in blue we can choose something of a blue sot So the blue we can go for a paler blue and that should be much more pillow Let’s save all of this now Let’s see So yeah, we have a blue background a yellow background Why isn’t a red background working? We haven’t saved it it seems and I read background is working to so we have successfully completed our assignment 1 So I hope you guys are satisfied with the solution I hope you guys could do it on your own do it because that’s exactly what matters Okay So now that we have learned about how confident are the building blocks we even made our own custom components and we even did an assignment on one So it’s time we move on to the next topic and that is data binding So data binding is like communication Well, what are we communicating its communication between your type script file? And your template so basically your business logic and your and what basically the user sees so suppose you click a button on the screen and you want to take some action according to that or you are retrieving some information from a calculation or from a server and you want to put that on the screen Well, you do that with the help of data binding now, there are two types of data binding The first one is string interpolation and second one is property binding So this is the way of you out putting something on to the screen So string interpolation and property binding So let’s go ahead and see how we can do them So let’s go back to our assignment that we had just done So first of all, what we want to do out here is go to the modules and we actually want to remove all these components Let’s go ahead and just remove these components Let’s go ahead and remove these Imports and 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 back to our app component and we have removed these So app module we have to actually save the stew Now that we have saved it we go ahead and see that it’s just that it says welcome to assignment 1 now I’ll tell you see that we are using this double curly braces and this is string interpolation So what the string interpolation mean? Well, it converts anything any variable any string like this into an interpolated format and it shows it to you on the screen So let me just give you a rather better example of a usage of string interpolation So let’s go back to our app component that HTML and out here you want to say there is a paragraph and in this paragraph We are outputting some server status So let’s say server is a server with be ID is offline So we want to actually put out something like this So at this moment it will just simply say server with PID is offline, right? But what if a server had Certain name so server name let’s see – – – with be IDE – – is at the status of – laughs – lets see now What we need to do is go ahead and go into our app component DS file So that is our dark script file And now if you’re going to do is create a few of what of these variables that we need So first of all is server name and let’s say the server name is Apollo Okay, and we also need a server PID So server PID is going to be let’s say 11, and we also need a server status And then we can set the server status to offline So this will be a string So that’s why we just surround them with our single quotes So now we can say something like this on our components dot HTML page So if you remember we were getting the title of our General application that ships in with angular when you make a new angular project, you see that it says welcome to so-and-so application So that was done with string of depilation If you remember it was a curly braces that held something like title in there, right so out here what we can do is put some variable or even a function that will return a string or anything Basically that can be converted into a string and that will be displayed out here between these curly braces

So what we can do is we can reference the server name So server name is basically Captain like this and then with pi D so we can put the PID out here So this is a number so the number can Also be converted into a string So therefore string interpolation will work in this process and we can also put in the server status, of course, so we put in the server status by referencing the variable that holds the server status Okay So now we have done the string interpolation So let’s go ahead and see what our output looks like So server named Apollo with PID 11 that is process ID 11 is offline Now I had also said that we could put in a function out here So let’s go ahead and create a function So in this function, we will basically toggle the server ID so we can say toggle So in this function, we will basically be toggling the server status So we will say something like toggles server status and this will return this dot server status equals to not okay So what we do out here is for talking this we will say equals to false So if it’s false, let’s just understand that it is going to be offline We could put in some logic to say that falls will print out offline, but let’s not get into that for now so we can say something like or rather Let’s not deal with this Let’s do it the way Should be done not be lazy people Now we can say there is a status flag and it is set to true or false in this case because it is offline Now this dot service status flag will be made throughout here So status equals to true So we’re going to make it true or rather we could make it not of this dot server status status flag And Status flag now that will work properly because this will basically convert it and there should be no spaces out there and we can say if this start server status flag equals to true so we can say if this does that is flag equals true We have to open more braces and we’ll say server status this dot server status will be set to online Okay, and there we go And after this has been done we can just return this dot server status Right So basically what is happening out here is we have set a flag Okay missing white space Quick Fix so we can put in a triple equals just to make sure it’s exactly true and not only check the equivalence that is and also check the value so out here what we are doing is we are setting up status flag to false and according to that state is flag We are changing the server status to online or offline Okay So now that we have put in this function we can use that function by calling it in our string interpolation method So just instead of putting our variable we can put in the function and this will change the server status to online now Basically what we are doing here is really simple is it’s returning a string and it’s being converted into a string Okay So now that we have toggled the server status to online and we did that through passing a function in the string interpolation So now let’s understand how we can do property binding so every HTML element has some property or the other these Lists can be easily found on MD n that is the Mozilla developer Network So let me just give you an example of a property So let’s say we had a button to toggle the server status further from offline to online again, and again instead of just being toggled from offline to online hard-coded into the code So let’s say we had a button and let’s say this said toggle server status, right? So if we had something like a button like toggle server status, so we have a button like this out here, but it really doesn’t do much at this moment But let’s say just for the sake of showing property binding let’s say the button was disabled and you wanted this button to be actually enabled after 2 seconds that your website has loaded up just so that there are no discrepancies in the button, press Ok, so we can achieve that by writing a Constructor function in our class component so out here you can make a Constructor so we can say set timeout So we have to first give the time after which it will be enabled So let’s say two and a half seconds So it’s two and a half seconds And now we have to put in of logic of actually turning this button to be enabled So let’s say we have a variable called button state so button State at this moment should be true

because our button is disabled first It’s just a the Sable and then it should get enabled so we have to say this dot button State equals to false Right? So now that we have done that all we have to do is go ahead and bind this property So we do property binding by putting the property in between the square bracket and then binding it to the outcome of a variable or a function so out here we can say we are going to bind the two button State Okay We need double quotes for this I’m sorry not single quotes So button State now Is happening out here after the Constructor is going to get executed I bought in state is going to become false So disabled will become false And first of all, it will be true because a but instead being true for the first two and a half seconds And actually let’s see this in action So our page is loading and after two and a half seconds are button becomes active So let me just show that to you again It’s inactive for two and a half seconds and then it suddenly becomes active So this is how you perform property binding So what we just saw here is we saw string interpolation in action We passed a string interpolation arguments with variable names and he even did a function then following that we did property binding so for property binding we first created a button so that we can toggle the server status, but we haven’t really added that functionality yet yet to do that But what we did was we binded the disabled property of the button to a certain variable now, this could have also been a Ocean and it will be the same way You just fasten the function with the brackets and the work And now what we will see is something that is our next topic and that is event binding So event binding is basically binding Dom events to certain logic that will reside in your typescript So we want to bind our toggle service status that we had created out here because we are basically toggling the server status and then returning the server status so we can basically do that by passing an event So every button has an event called click and to click we will pass the event toggle server status with the brackets now this will become active after 2.5 seconds And basically it’s not working as we wanted it to so let’s go ahead and inspect it Okay, so it’s not working because we are talking the server status out here And what we want to do is return the server status, so it should actually work to be honest So this top server status? So if we were to just output the server status out here Okay, so we do not have a logic out here So to make it back to go offline So else we can just add something like else this start server status equals offline So now that we have set up our function to even display offline and because we will first changing it back to online and there was no real logic to change it back to offline again So let’s do that and now we can have a talking happening out here so we can change it to online teaching it offline So now we have a button that can actually toggle our service status from online to offline and so forth and so on so that was event binding and property binding and we also saw string interpolation So with the help of event binding and property binding now, we have a button that can actually make it offline and online but there’s another way that we can do this and that is two way binding So for two-way binding what we’re going to see is basically we are going to combine property binding and event binding So let’s try and do that So for event binding let’s go back to our code editor and out here Let’s go to our HTML page and what we want to say Till okay So let’s remove all this so we can make this server information So first of all, we can have a form So basically we can have an input of type text and this will take in let’s say let’s put a place holder and let’s put in server name Let’s also put a button below this and this will be a submit button or rather instead of a button what we can do to show Two Way binding is put in a paragraph and we are going to type out our server name out here and we are going to put in the server name here So server name is going to be here So this is basically string interpolation And what I am interpolating is the server name that we had created

Okay So this has a capital S So let’s not forget that so our capital S should be out here and what we are going to do is basically use NG model So to use NG model what you need to do Is go into your app module out here So in your app module what you need to import is basically the forms module So to import the forms module you have to say import forms module from other eight angular / forms So that’s it And we have to put this in single quotes and out here What we need to do is let’s go ahead and see what is saying disabled rule import spacing So we basically important the forms module and this forms module will have a functionality called ngmodel So anti model will let us bind Whatever is being typed to be actually bind to a certain variable so we can put that ng-model property to our input So this NG model will be binded as an event and also as a property so we need to pass in the server name So, let’s see We have a server name called Ebola out here So it’s already prefilled with Apollo and let’s say we want to name our server something else So let’s call it the Gixxer So Jackson could be their name of a server And as you guys can see it is being automatically updated out here So that is two way binding So just to give you guys the difference between two way binding and one way binding if we can do out here is say put a placeholder So this is the same part we will have server name So what we can do is make another input and this time around we are going to put ngmodel as just the property So edgy model with camel casing and we are going to say it will be binder to server name So let’s bind it to server name and let’s see what happens So now we have two inputs and everything is filled with Apollo Now if you see out here if I go ahead and change a poll out here It is not automatically changing in the Have to because it is only one way binded while out here If we were to give the name Paul to our server it would automatically updated everywhere But if you were to go ahead and delete little bit it’s not really updating at the out here because it’s not two-way binding You need a event to actually go ahead and submit this so that your event and your property gets binded together And basically you have two way binding them Okay, so that does it and just to make this a little more interesting Let’s make this something like 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 name and the server ID will be the PID basically so we have an input server name part and then we can display so information out here so display This place so information what we can do is let’s just copy this out So server PID the surf PID I constantly forget it server PID So that’s why so be ID will be presented and server status So now we basically have a small little son of a bitch going on and we have a button that can toggle the server status We have a place where we can input the server name So what we just saw out here is basically we saw string interpolation So all this output is being shown to you through string interpolation We are buying a property do this button and with the help of that we are talking it for the first two point five seconds This is disabled now and this will become enabled then we saw a event binding where we actually toggle the server status with the help of a button and then we also sought to way prevent binding where we put in an input method or an input element and we are constantly displaying what is there in the input with the help of two way binding So this brings us to our second assignment for today And in this video, I would like to say that again, please try and solve this and mint on your own and these are the instructions for your second assignment So for assignment What you have to do is create a page that can take the input of a first name using two-way data binding and you have to Output the name using string interpolation So again for using two-way data-binding remember you have to use NG model and use NG model You have to go and import the forms module and to your app into your apps dot module the TS file and in that app start module dot ES file, you will also have to declare it out there So don’t forget to do all that and in the output

you have to actually use string interpolation Then we have to add a button to reset the name to a blank string So this should be something like property binding I guess I won’t know until I solve it myself And again this button should be disabled if the name field is currently empty So I would suggest that you pause the video right here and you go ahead and solve this and if you can’t solve it you can always follow along with me because I will be going to the solution of this assignment right now So let’s go back to our code editor and what we want to do now is It’s try and solve assignment number two So I’m going to keep on editing the assignment project that we had made I’m not going to make new assignment project So what we’re going to do is basically remove everything from here Let’s remove everything We will also be needing some New Logic So this is not going to work for us So let’s go ahead and remove that We also don’t need a Constructor function We don’t need anything We just need the class to be there That’s all at this moment I will also let entry module be there in our app start module because we will be needing it So I’m not going to edit this out So let me just say that I have saved everything and now all we have is a blank canvas that we can start developing on So our first instruction says that we have to create a page that can take the input of the first name using two-way data binding So let’s see you want the user to know that he is in putting his first name so label and this will be 4 so going to be for first name so we can say F name something like this and then we can say First name and out here What we can do is put an input that has type text and it also has a name of fname So the label is now bind it to our input This is how you should probably always code We also should put in a placeholder even though we have a label because that is just good practice So we are going to say first name in the placeholder and now we have a place that we can put in our first name in so we can also put in a space out here First name is going to be here Right? And we also need to input our first name in a paragraph according to the second instruction so we can put it out in a paragraph and we can use string interpolation for this and we can just use variable called name because we are only dealing with one name There’s no last name so we can just create a variable called name now we go back to our typescript and we create a variable called name and let’s keep it blank for now Okay, we are not going to use double quotes We are going to use single quotes and let’s keep it blank for now So now we can say our name which should be displayed out here So basically what we need to do is do a binding So that is pretty simple We learned that really easily that we can do this to the NG model and we can bind it to the property of name or rather the variable name that we just created so out here we will have a name and we can just go ahead and start typing now and our name gets typed out here Now The other thing that we need to do is we need to add a button to reset the name to a blank string So first let’s go ahead and create that button for ourselves So we need a button and this button should said reset name and basically it should have a function or an event whenever it’s clicked So whenever this click it should have a function that basically goes ahead and turns the name blank again so we can have a function called reset name So reset name is going to be our function So let’s go ahead and create that function now So reset name is going to be our function And what we want to do is set this dot name equals to blank again We can actually do this without the event I guess we can fix the missing white space Let’s see if we are actually if you do reset name, it goes ahead and recites the name to blank so we have minded it to an event and that is the click event, and we need reset name out here We are not passing anything because it is directly being by the to the property or rather the event out here So now we need to bind it to a property So the property that we are going to bind the two is disabled So the disabled property is going to now check a function basically to see if the name has any value or not So this can be really easily done by actually saying something like named length 0, but we are not going to try and add cold out here So let’s just stick to the functions Actually We could actually have done a tertiary operation and basically down it in one line, but why do that? So, let’s see check name Check name is either going to return true or false So now we have check name and what we can say is

if this dot name equals to equals 2 and we can also set state So state is true wheeler need the state variable to actually handle the disabled functionality So if this dot name is equals to equals to equals to blank or want to say is the start state will remain true or what we can do is if it is unequal to this what we can do is say this dot State equals 2 So let’s go over our logic again So if our state is true and if it is not an empty string rather we are going to turn our disabled to false So if it is false out there what we need to do out here is a check name Okay, so we made a mistake We can’t do that Let’s see inspect console and template can’t bind the disabled since it isn’t a known property of button Okay So disabled is not the known property because it’s disabled So that was the silly error that 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 ahead and use check name We actually forgotten to save this out here go ahead and put the white space there So now we have a button that can actually set the string to a blank string again But according to our assignment it says that this button should be disabled if the name is empty So this way we can actually practice our property binding So basically we have to bind the property disabled to a function that will basically return the state So let’s say it is a function that is called check Name and now let’s go ahead and create this function So check name is going to be our function and put that in double quotes Now, let’s go back to our app module out here So let’s create a state first down The state is going to be false First of all, and let’s say we are going to have another function called check name and in check name, what we want to do is check whether so we can do the checking part with an if statement So this dot name we are checking for the name if it is empty string and if it is an empty string what we want to do is make our button disabled and that can be done by just returning true in our state variable So we’re going to set it to true and we are going to return it So return this talk state So if you return the start State out here we are going to have a button now that is basically the Sable dough Okay First of all, we need to go ahead and check what we have done wrong So we need to go ahead and save this so check name is actually being passed Now Let’s go ahead and load that so now we see that we have a button that is disabled But as soon as we start typing the button gets enabled and we can click it to basically put it back into disabled State and also making the first name String into a blank string So this is the solution to assignment number two I hope you guys had followed along with me And if you had any doubts when solving it on your own the doubts have been cleared now now let’s move ahead and let’s look at the last topic for our angular Basics today and that is directives So what exactly are directives well, let’s head over to angular’s site and let’s see what they are saying about directors Well, it says that there are two types of directives out here So one is attribute directive and one is a structural directive So an attribute directive changes the appearance or behavior of a Dom element So in short a directive is basically an instruction The Dome now this instruction may be to change the Dom due to some attribute or it could structurally change the Dome tube So that is a structural director So structural directives are basically used in places where you want to input a certain Let’s say a Division I got here division is being used with the directive ng-if and we are outputting hero dot name out here So what this is is basically there is an if statement and we will get to what ng-if means just in a moment, but this is a directive and this has instructions written in a module which we will also get into future lectures about directives where we take a much much deeper look into what directives are and how custom directives can be built by you but for now we are just going to understand what a directive does So in short a directive is a structure and this structure gives instructions to the Dom So let’s look what a directive looks like and how directives can be made by just reading the documentation

so To build a directive what we have to say is let’s say we give a directive as app highlight So we have created directives Ang generate directive So this is a CLI command out here so we can generate directives like that But for now, what we are going to do is we are going to use some built-in directives to understand how attribute directors and how structural directives are actually working So the directives that we are going to be using our ng-if NG else So basically if and else and ng4, so these are the three directives that we are going to be using today And after I show you how to use these directives I will also be giving you an assignment and that will be your last assignment for this angular tutorial and we will wrap it up after that in the future We will be actually discussing every single bit that we have learnt about the day that is components data binding two-way data-binding directives Everything will be done in much more detail And when we are doing this in detail, we will have an In project, so we will be building a project through the course of this playlist and by the end you will feel pretty confident that you can go out there and pretty much crack angular interview job out there because we will be teaching you how to build an app and in the end we will also train you for angular interview questions Okay, but for now let’s just focus on how to use the built-in directives that ship with angular So do you use the built-in directives? Let’s see what we can do So the first directive that we want to use is basically an NG if directive so, let’s see what we can do to show ngf So ngf is basically to show something structurally Let’s put up an edge one that says this is an example of ng-if now we want to show something if a variable is true and we want to show something else if it is false, right so we can do that by simply saying B, so we will Paragraph and let’s say ng-if so we are going to tie it up to an expression and we’re going to call this expression of flag and we are going to say flag is true and we are going to say flag is false Otherwise so out here to show flag is false Otherwise, we are going to use something called a local reference So a local reference is used within the NG template So for the NG template, we have to give a local reference name So let’s call it the else block And in the else block we want to put out a paragraph that says flag is false Now We need some way to actually toggle this flag So let’s create a button So we are going to say something like toggle flag and I’ll cheer for toggling flag We are going to put an event and we are going to bind this event to a function that toggles our flag So we are going to call this function toggle flag Okay, so we have our template created now All we need to do is add the business Logic for this So for all the logic that we need to do is create a variable called flag First of all, so let’s go ahead and delete all this that we don’t need so we are going to have a variable called flag and flag will be first of all set to true now There is also going to be a function called toga flag and in this function what we are Do is we are just going to toggle it now to toggle this All we can do is this dot flag equals 2 not off this dot flag So this is a really easy way to toggle a variable and just now we can just return this dot flag So since we’re doing that so now what we can do is save this and let’s see how that actually works So says flag is true and flag is false So flag is false is actually not being displayed because we have not referenced this local reference that we have created So we have a local reference and we need to create it and we do that by saying else we create the else block Now, let’s go ahead and save that Let’s see flag is true And now flag is false flag is true flag is false So to make sure that we are actually putting up two different paragraphs So let’s go ahead and inspect this Let’s go into our body Let’s go in to uproot Let’s see this button So this has a paragraph created out here So let’s toggle this and a new paragraph gets created which says flag is false Now flag is true flag is false flag is true flag is false So this is a brilliant way to actually show something very conditionally Now I can show you this is a other block that we are actually showing instead of one block being constantly just modified It is a separate Block in itself

So that is a very important thing to know So let’s go ahead and do that again So let’s save it And now let’s go ahead and see what we can get So in our head or rather in the body, we have the uproot and now we have paragraph that says flag is true And now there is another paragraph at the I d– flash which is a very wrong way to spell false but it proves the point that this is a new Block in itself So this is how you can use ng-if now, let’s look at another interesting inbuilt directive that ships with angular and that is edgy style So with any style what you can do is you can give Dynamic styling depending on a certain condition Now if you analyze what we have out here, we do have a certain condition which is where the flag is true or flag is false Now, what we want to do is we want to color this This is an example of ngif into red or green if flag is true or false respectively so we can do that very easily with the help of something called NG style So with any style oppa do is we A property now this property may not be in single quotation marks So you can say color and what you can do is you can put an expression Now you can say something like a function that is get color And you could execute that Now what we need to do is we need to go ahead and create this function called get color So we are going to get the color and we are going to return a color that is probably a string according to the flag So if so, what we want to say is if this dot flag is equal to equal to true we want to return You want to turn green and if it is false we wanted to turn red So let’s go ahead and see so as you guys can see this is green right now and this turns red and then turns green and red again So what we did basically we passed an expression and in this expression, we are putting in a color and the get color method is returning a string which either says red or green So this is how you can dynamically add styles to your elements on your HTML page Now another way to do Dynamic styling is with the help of NG class So what we can do out here is we can add a class to an element dynamically So let’s say we have another H2 and let’s say this is just an example of NG class Now, what I want to do is we want to turn this So the clasp you want to add is basically let’s call it white and we want to add this when get color returns true Let’s say so we just want to go ahead and paste that logic out there And now what we have to do is go into the app component CSS file and create a class called White and this class will basically put a black border border:1px solid black It will rather let’s make it a red and then we want a background color of let’s say black and we want the font color to go white So this is a bunch of styling that we are adding which is basically the real reason you use classes in CSS so that you can use a bunch of styling together now that we have created the class Let’s go ahead and save all our files Let’s go ahead and see what it looks like So this is what it looks like This is just an example of ing class Now when this is set to false so class is removed Let me just show that to you So if we go ahead in the body part and go in to uproot and just look at this class that will be added So we add a class called White and then we remove a class called White class called White and this is how Angie class can be used to put in all sorts of dynamic styling into your HTML elements with the help of NG glass Okay So the next directive that we are going to have a look at is called ng4 So let me just give you guys a quick example of how to use NG for before I dive into the last assignment of this tutorial So Angie for is used when you actually want to iterate through an array So let me just show you what I mean So let’s say you had a bunch of names or let’s make something very viable So first of all, let’s call this something like the student roster So H1 So this is called the student roster now suppose you had a method so input and what we are going to say is placeholder is name and out here We also want to display the name So all the name of the students we want to display so student roster and there will be a button to say submit

So this is a sub MIT student name and this will have a function So whenever we click it, we want to add the name that we just entered into Let’s say another so we can say that is the name of the function Now if we want to do is go ahead and first of all create a student roster so student roster is equal to let’s say let’s add some pre-built students So Aria and let’s say Rohit and let’s say oh Pasadena Now, what we want to do is let me just fix these white spaces up Now, what we want to do is we want to display the student roster And then we also want to add to the student roster every time the button is clicked So we have a function for that and it’s called ad and basically what we want to do is we want to push an element so that could be a current name so current name could be Blank for now And let’s leave it like that And what we want to say is this dot student roster dot push want to push in this start current name So what this will do is this will push in the current name Let’s go ahead and make a place so that we can display it Now The whole point is that we want to display it in one single item We do not want to create let’s say a paragraph for every time this list has to be populated So what we can do is we can simply create a list item and out here we can just say Ang for let’s say names in the student roster So student roster, so is that how we had named it student roster and that’s exactly how we are named it and what we want to display out is names So what we have done right now is we are pushing in something but what exactly are we pushing in? Well, we need to add that to our input So what you need to do is say NG model and we are going to ng-model this into the current name So now that we have done that now if we want to do is we just want to interpolate the name out here So this will just display the names So this is going to be names Let’s go ahead and save that Let’s see that if it’s dips faces names So we have names are arrowheads and a pasta So let’s say someone like Rahul also joins the class and we can see some ID student and Rahul is now added to the student roster Okay So this is how you can basically use NG for we have one list item And basically it is going around And circulating through everything that is there in this array just out here So now that we have seen the usage of NG f and g if else and ng4, let’s go ahead and do our last assignment Let’s not forget We also saw how we can use Dynamic styling So we are also going to incorporate that into our assignment So let me just go ahead and type out the instructions for your assignment Okay guys, so this is your last assignment I will again remind you that for assignments You have to pause the screen and try and do the assignment on your own and then you can compare Your solution with the code along part that comes after the assignment So for assignment number three, we have create a button to toggle a paragraph display The paragraph could be saying anything So after that we have to lock the number of times the button was clicked Ok, so it says barn out here but it’s button was clicked and after the fifth click we have to give some specific style to the log Okay So this seems like a pretty easy Thing to do What we have to do out here is basically get rid of everything that is here And let’s first create a button that says toggle display and then we can add a paragraph that says lorem ipsum So lorem ipsum is just a random paragraph So let’s go ahead and see this So this is toggle display but toggle display at this moment does nothing so we have to put a functionality into the click the click will basically return true or false so we can bind us to a function that lets say toggle display So this will return true or false So we have to go ahead and create the toggle display method first So toggle display And what we want to say, is this start State, let’s see So let’s create a state variable first So state is going to be true and toggling is basically what we had learned that we have to turn it into something that it is not so this state equals to not of this state and that should do it for us So this will toggle the display So now that we have toggle the display now,

all we have to do is bind this logic so we say ng -if and we only want to show this if state is equal to equal to true So if that is what we have done correctly, we are talking the display and this is true Now what we need to do Another thing is according to the instructions of the assignment is that if the log the number of times the button was clicked So what we need is basically a counter to count the number of times we have click the button now every time the button is clicked we want to actually increase the counter and we can simply do that with an incremental statement So this dot counter now what we want to do is we want to say out here We want to create a paragraph and this will have n G4 and so click of Click so rather counter So for n G4 this needs to be pushed into an array, so we are going to say button click Ok So there’s another way to do this We don’t really need a counter or rather we can make counter into an array itself and when this is clicked, all we need to do is say this dot counter dot push counter dot length plus 1 So we’re going to say this dot countered at length plus 1 so the length initially is 0 so this should just go ahead and add it to this counter Now, what we want to do is we also want to cycle through this array of counters So Clicks in counters And what we want to do is we want to print out the click information So let’s see So now that we have actually put the logic to push the length of a counter into our array we need to do and cycle this array So to cycle the array we are going to create a paragraph and we’re going to say ng4 And we’re going to say clicks of counter and what we are going to try and interpolate out here is the counter or rather the clicks and let’s see if that works So out here we have a display are going to click it once click it twice and we can see it goes on and on and on and we have kind of created a counter and this is kind of logging into all down now that we have set up our counter for our toggling All we need to do is follow the last instruction and that is after the fifth click We have to give some specific style to the log Okay, so we can do this with the help of NG Styles So NG Styles Let’s see We want to make the color of our font blue only when get length is more than 5 so get length is a function So this will return some value or the other So let’s go ahead and create that too So get length is going to react and create if it’s see this dot counter dot length is greater than 4 Then we want to return the string blue else We want to return string black So now we have function that returns something and we have binded that function with the color Style with use of NG style director So let’s go ahead and see if this works for us So let’s toggle the display 1 2 3 4 5 and that has turned our list into a blue list just after 5:00 So this is how you would approach the solution to assignment 3 and this brings us to the end of this angular tutorial We learnt a lot today We saw what is angular We saw the differences that angular 8 has brought about in the industry after that We also started with our installation of angular Then we went ahead and set up our project We learned how to create our own custom confidence manually and through the CLI, then we came to know how to use these components We did data binding did property binding and then we did event binding which of course includes two way binding then of course, we saw the inbuilt directives and what exactly did Tips are and this brings us to the end of the basics that you need to actually make an application through angular Welcome everyone This is Swati from Eureka in today’s session will go through react Yes tutorial So if you guys are familiar with the term react chairs, then you might know that it’s a front-end Library developed by Facebook So today we’ll learn in and out of reactors But before we start let Explorer youngjae’s application I’m sure all of us spend a lot of time on Facebook

If not a lot at least some so all of you can easily relate that this application looks exactly like Facebook comment section in this complication We can add a new comment delete an existing comment or even can reply to some other common Let me show you how here I’m adding a comment I can delete my comment I can even delete some others comment if I have the authority and then I can reply to others comment like this perhaps you would have noticed whether I’m adding or deleting comments only that section is getting updated instead of the entire page So what I’m trying to say is that we do not have to reload Refresh the entire application to see the updates So how exactly is this happening? Well, this is the magic of react.js and that is what we are going to learn today But here some of you might ask that why the anxious when there are so many other Frameworks available out there to understand this Let’s take up Facebook as example So let’s go back to the year of 2009 2010 when Facebook used to look somewhat like this If you guys remember during this time, you have to repeatedly reload the page for new updates at the back end the Facebook was using the operational data flow as you can see from this diagram the data came from various sources, like the initial leader the real-time data or the user input data Now this data was passed to the dispatcher then to the store and then ultimately came to the view now, we will the part where the user is actually interacting with the application and being a user whatever you see on the browser as a web page is the view itself So if there is a change in data from any These sources from the back end in order to reflect those changes on The View you have to refresh the entire page and then it seemed by the user This surely was not user-friendly and moreover this traditional data blue had some drawbacks like it use the Dom now What is a dom dom stands for document object model It is an object that is created by the browser Each time a web page has loaded what does don’t it was it can dynamically add or remove elements from a webpage at the bakit? But each time it did that the browser had to create a new Dom object for the same webpage this led to more memory consumption which ultimately made our application slow Let’s take another example to understand this suppose This is an application in which we have four blocks 1234 Suppose There is a change in Block one from the back end, but in order to see those changes, we had to reload the entire page and then only we can see the changes Now as you can see after reloading the one became one over so guys this is where the reality is comes into the picture with react Our entire application is divided into various components Now each time data is added it will automatically update the specific component whose state has actually changed So if we have changed in Block one, it will automatically change the block one only without reloading the entire page this reduced our page reloading Dusk and because of this the you I became more user-friendly moreover the react uses a virtual Dom instead of the real Dom which makes our applications lighter and faster Now, what is virtual Dom will understand it later in this tutorial for now Let’s see how we act change Facebook’s UI So Facebook started implementing react.js in its Newsfeed section since 2011 after this, it’s you I became more user-friendly now whenever new updates gathered a new stories button popped up at the top of the page now clicking on this button will automatically reload only the newsfeed section without even touching the rest of the page this drastically improve the applications performance So what changed at the back end at the back and it still use the traditional leader flow, but now instead of loading the entire page again, what reacted was it blue of the previous View when did the components for the update and then place the new view in place of the whole one This was possible because unlike other Frameworks react don’t have any explicit data binding in react The only thing we have is a render function, which gets called once for each component in this render function We tell how our component will look like at any point of time Then this render function returns a An overview since the component can compose a real component The render function gets called recursively resulting in building up the whole view So now that you have understood that why we use real chairs, let’s now proceed with our tutorial before we start off Let’s take a quick look on today’s agenda today will first understand what exactly is reactive and then we’ll find out some of its major advantages then I’ll show you how to install reactors on your systems Once we are done with the installation will start coding with reactors by taking up a simple program of hello world, then we’ll jump onto the various fundamental concepts

which all night behind react cheers So without any delay, let’s take up our very first topic that is what is react to use as I have already told you that react.js is an open-source JavaScript front-end library that is used to develop interactive you is the Facebook was using it since 2011, but it was introduced to the rest of the word on me 2030 and later on March 2015 It was open sourced Moreover the reality is is concerned with the component that utilizes the expressiveness of JavaScript along with the HTML a template syntax That is it combines the features of JavaScript and the HTML and then provides us a dynamic language It is basically the view in MVC is the model view controller It is not concerned with anything except for the view That is it handles a representation of our web page at any point of time But what aspects make it handle a dynamic view so effectively, let’s proceed further and find out will react has three main aspects first It uses the virtual Dom second It has one-way data binding and third it provides a server-side rendering Let’s now discuss them in details The first is the virtual Dom So as I have told that it uses the virtual dog Now many of you might be wondering that What is a virtual Dom and how it is different from the actual dog Well, like an actual down the virtual Dom is also no tree that lists the element and attribute and contents as object and the properties reactor in your function creates a notary out of the react component and then updates the street in response to the mutations in the data model which are caused by various actions done Maybe by the user or by the system Now this virtual Dom Works in three simple steps first will be whenever any underlying data changes The entire UI is rear-ended in the virtual Dom representation after this the difference between the previous round representation And the new one is calculated Once the calculations are done Only after that the real Don will be updated with the only the things that have actually Teach you can think it as a patch as the patches are applied only to the affected area Similarly the virtual dog acts as a patch and is applied to the elements which have actually updated or changed in the real dumb This makes our application faster and more over there is no memory wastage unlike other Frameworks react follows, the unidirectional data flow Let’s now move on to a next aspect that is one-way data binding unlike other Frameworks react follows, unidirectional DW or one-way data binding as you can see from this diagram in whole of the process The data is flowing in the same direction The major advantage of one we did a binding is that throughout the application the data flows in a single Direction which gives you a better control over it and because of this the application state is contained in specific stores And as a result of this the rest of the components remains Loosely coupled so our third and last aspect is the server side rendering server-side rendering Allows you to present the initial state of your react component and the server side only because of this the page loads faster with the server side rendering the server’s response to the browser is the HTML of the page that is ready to be rendered Thus the browser can now start rendering without even having to wait for all the JavaScript to be loaded and executed all of these features together makes react to use a powerful and robust language which provides us with some major advantages like because of the use of virtual Dom the applications performance increases moreover It can be used on client as well as server-side the reacts j6 file increases the readability of the code, so it becomes easy to debug and maintain and lastly the reality is can be easily integrated with Frameworks like meteor or angularjs So now that we have already understood that what is react cheese and whatever it advantages Let’s now proceed to its installation Well installing react.js is very easy You just need to add the react.js dependencies to your code And then you are good to go You can add these dependencies even directly from online repositories or you can also download them and then add them to your project folder as you can see from this code I have added the dependencies here from the online repositories Now, let me show you how to add the dependencies after downloading them for that You need to go back to your project folder So now this is my project folder inside this I will be pasting all my dependencies for that I’ll go to my downloads here I have already downloaded the dependencies I just have to copy this And then I’ll go back to my project folder and paste them here like this So inside this I have

all my dependencies which all I need So now to start coding with react you can use any text editor or any ID you want so here I am using the web some ID here inside my project folder You can see that I have already all my dependencies So now what I will do I will create one HTML file here Let me name it as index Now in this HTML file, we have to provide it with some title Like I’ve given it demo Okay So now inside the head of this file now we have to tell that we have the dependencies So using the script tag, we will add the dependencies one by one So, let me see the source and my dependency sources the build folder in this first dependency, which I need to add is the reactor Minn dot J’s Now, this is the main react dependency that you will need Like this I have to add the rest of the dependencies Okay So now I am done with adding my dependencies So next thing what I have to do is I have to create one Division I have to create one division so that I can display my react code over here So I will give this division when ideas will okay So here I have given the ID as content So for now we are done with this HTML file Now we have to create one react jsx file So for that we will create one file Let me name it as script dot JS X So this j6 file is the file in which we will add our all the react code Now Jesus is a type of sentence that you can just type and it’s very easy to understand and react as you know that everything is a component and each component needs a class to survive So first we have to create a component and then provide a class for it So, let me just create one component Okay, so as you can see I’ve created when component name my component and then I have created one class So now I have created when comparing with the name my component and then I have provided one class for it to survive Now inside this class I will be adding all the functions as attributes that my class is going to do So now each component has one render function which returns an HTML representation So here we’ll add the render function which will contain what we want to display So since we are going to return the hello world just so here first Let me just create the render function So render this is a function Okay, since this will be returning an HTML representation So inside the written after right we are returning only the hello world So I will write hello world Okay, so just save it So now we are done with creating a component Now you have to tell react that you want this component to be displayed over here So for that Okay So here we are calling the render function of react Dom now inside this function I will tell that I want my component to be displayed on the HTML P So for that I will fetch it by its ID So I’ll call document dot get element by ID since we have given the ID and it’s ID is content Okay So now here we are done with our j65 just save it go back to the HTML way So now you can think this j6 file as external CSS or JavaScript as we refer this file in our HTML file Similarly We have to tell her HTML file that we have are reactive code in some other files So for that I’ll say script and it’s sources scripted Chase X. Ok So one thing we need to add here is its type So it’s type is text Babel Okay Now we are done with both of the Now what I need to do is just run this file So now you can see that hello world It’s showing that means we have successfully compiler program And this is how the reactor uses working So here you will see that I’ve written the same program here Okay, and this is the my HTML file and then this is what we saw in the up since we are done with our first program Let’s now find out the biggest fundamental concepts working behind it here first will understand What is a j65 and how it is used then we’ll learn about the component and its different forms after this we’ll find out what our props followed by the states then we’ll have a quick look on different phases of components life cycle next We’ll learn about the react events and how they are triggered after this We’ll see what are the references and keys

and understand the importance in react finally will understand what is react router and then we’ll proceed to add So without wasting any more time, let’s take up our very first topic that is the chase X So J 6 times for the JavaScript example It’s an XML HTML like syntax that is used by react this index exchange the ecmascript so that the examination table like ticks can coexist with JavaScript react code This syntax is used by the preprocessors to transform the HTML like syntax that is found in JavaScript files into standard JavaScript objects with this fine instead of just embedding the JavaScript into HTML We can embed the HTML into the JavaScript as well This makes the HTML code easy and also boosts of the JavaScript performance moreover It makes our application robust Let’s now see how this j6 can be used Well, the first is the regular use of j6, which we already saw in our hello world program Next is the j6 nested elements Now as you know, in react the render function can render only one issue Element at a time So in case you want to render multiple HTML elements, then you need to put them inside the one in closing tag Let’s see it how Okay So let’s try and add one more HTML element inside this render function So here let me say I have a ch3 you can see as soon as I add this H3 tag It’s showing that here something is expected That means it can’t compile Well error symbol is coming So that’s why we need to include this inside one in closing tag So I will be using div here So let me say div Okay, so I’ll just cut it from here and paste it now inside this that I can add as many lemons as I want So let me just use H 1 you can use any tag you want So just okay So now inside this I will say And Eureka, I’ll just save it go to my browser Here you can see Eddie Rekha and hello world So this is how we can use multiple HTML element inside Rj6 code So the next is the specifying attributes You can always make your code Beautiful by adding the attributes to it Let’s see it how so inside this what you need to do You have to create one variable with the csis element So here I’ll say that I have a variable Let me name it Styles and I will just say that in this the color will be okay Let me say the color is red Okay So here I will add this Styles as a style to my HTML element So like this style he’ll say it will follow the Styles So now the entire division will be in Red So just save it go to the browser and reload it Now, you can see everything is in red You can specify side for a single element as well So you just It’s just see that we have a states to and here let me say the color is yellow Okay, and I’ll see my H1 tag will come in yellow color So I will say that it will follow the side to just save it go back to the browser and reload You can see the editor a guy isn’t yellow color? Okay So this is how our row attributes work So next is embedding JavaScript into j6 as in normal HTML We embed the JavaScript expression similarly here Also, we can add the JavaScript Expressions directly into the code Let me show you okay I’ll go to the ID and I will just say I’ll take one H3 tag and inside I will say just some is something I’ll throw in some random numbers over here So let me just say save it go back and here it will give me the sum So the sum is 30 So like this we can use j6 in different forms Okay So here we are done with all the users of j6 Let’s now move to our next topic That is the component since the beginning I’m saying that in react everything is a component So now let’s find out what actually this component is to understand this Let’s again go back to Facebook as you can see This is a Facebook page Now This page is divided into various components Like this is a component This is also a component And again, this is also a component like this There are many more components over here since then react everything is a component and each component returns a Dom object It results in speeding up the entire UI into various independent and reusable pieces to understand this better Imagine the entire UI as a tree here the starting compound

becomes the root and each of the independent pieces becomes the branches and which are further divided into sub branches Now this pattern keeps our UI organized and moreover it allows the details Changes to logically flow from the root to the branches and then to the sub branches moreover the compound can always refer to other components Let’s see how this is happening Okay So here I have one component named my component So let me just create few more complaints over here for this again I’ll use the variable and let me name it as header So here I’ll call the reactor not create create class So inside this again, I will create one render function Now what I wanted this render function should return me just well HTML representation to show that this is my separate component So therefore I will just simply write return and I’ll put 1 h2 tag over here and I will say that this is hidden component Okay like this so I’ll create one more component like this So for that I’ll just copy this and I’ll paste it up here and I’ll change its name to put okay and here it will say This is foogtor competent So now how I can refer these components from my component for that I just need to go inside the enclosing Tab and here I’ll just say header and moreover again I’ll can just say footer like this save it go back to your browser and reload So this is how our components work We can call one comment from other component as we have seen Okay I hope this thing is clear to you Now Let’s go further in our Peabody Okay So here a valid react component can always accepted single object argument and then produce a reactive element Now, these are called the functional elements as they are literally the JavaScript functions as you can see So here we are calling one handle click function Now whenever this function is called it will always return a 1 inch team representation So that’s why these are called the functional elements On addition to this we can simply Define a competent through JavaScript as you can see here We are creating one function which is named prob demo It is accepting one props and then it is returning one HTML representation So this is how the components work moving further in this the component in reactions can be in two forms the stateful and stateless components the stateful components are those components which remembers everything it does whereas the stateliest components are those components which doesn’t remember anything it does So let’s not discuss these components in detail So first we have the state full component These are the core components with store information about this component state in the memory Now, these components can change the states as well They contain the knowledge of the past current and future possible changes in state of the component in case there is a change in state they will always receive the information from the Stitches components These components are called the smart or active confidence Next we have the stateless components These are the state list component which always calculate the internal state of a complaint They can never change the state moreover They do not contain any knowledge of the past current as well as possible future changes of the state of a component these details components provide the referential transparency that is for same set of inputs It will always generate same output The these combinations are called the dumb components now, I hope you have the fear understanding about the component So now let’s move on to our next topic that is props The simplest way of describing process would be to say that the function similar to HTML attributes These are the read-only components which provide configurational values thus by using the props We can always pass data from Pain component to a child component whenever the component is declared as a function or a class It must never change its props all the Components are therefore called the pure functions If you see this function as I have seen in this demo, we have the function called thumb which is accepting argument X and Y So it’s prop is to always return the sum So whenever this function is called it will never change it from in react the Only Rule we have and that we must follow is all react components must act like pure functions with respect to their props So let’s find out how it’s happening with the help of practical demo Okay So now here what I’ll do I’ll use the header

and here I’ll provide the prop But before that inside this header since we have to provide information from the parent to the child, let me say that my component is the parent component and header is the child completely So from here, I will say that header has a name Let me say name is let me see Alex Okay now What I’ll do, I’ll just copy and provide one more hedral prop So I will just change its name to else a Max Okay So now how we can provide this information to child component for that What we need to do here is I’ll just use one H3 tag and inside this I’ll refer my component So here I’ll say this dot props dot since I’ve given the name so I’ll say name here Okay, here are we have to create one division as well? Okay So what I’m doing here is that I’m passing the name from my component from here from my company to the header component, which is just printing out the representation So this is how the props for whatever you give as input It will always display the same So let’s just save this go back to the browser and reload So here you can see Alex and Max its print So each time The header component is referred It will print this element I hope you are clear with the props Let’s now move to our next topic that is States So what is the state and how they can be a sign here in react the states are the heart or we can see the core of react components though Most of the component simply taken props and render them, but they can also provide States These states are used to store information Nation or data about the component which can change over time because of user or system evens You can say that the determine the components rendering and behavior and therefore the state must be kept as simple as possible using the state It leads to a dynamic and interactive components which adjust themselves according to the changes So let’s now see how the States can be assigned with the help of the demo Okay So since we have already used the props, I’ll use this putter to show the state now to access the state first We need to assign One initial state to the component because by default it state will be set to null so for that I’ll call one function called get initial state Auntie inside this class I have two functions, so I need to separate them So I’ll put one calm over here inside putter I’ll say I have user and let me set its initial state to and say it Eureka So it’s the user initial state is at Eureka So now whenever we call this user it will always display the at Eureka now, how can we refer to this for this? What we need to do is okay now, I’ll add one div We were here you just cut this from here and paste it and now here I’ll say I have one H1 tag and here I’ll refer to the state So to refer to the current state what you need to call is this dot State and our element name is user So here you’ll see use them like this save it go back to the browser and reload it see so our user is either a car to make it more clear Let’s go back to the and here I’ll say user is Eddie Reka morvay, you can put any number of elements you want Let me just say I have an idea Also whose default state is 101 I’ll save it and inside the cell say, okay here are we use one brick and then I will say ID is And again, I’ll refer this thing with the this dot state DOT ID So now again go back to the browser and reload it So here you can see user is in Eureka and ID’s 101 So this is how we set the initial state but as I have told you that we can change the state as well So let me just say that after some time these two elements change their state So in order to do that,

what we have to do is we need to call one other function, which will automatically change its state after let’s say after 2 seconds, it will change the state So I’ll call the settimeout function and it will automatically after two seconds Let me see the two seconds it will change the state So I’ll write tooth seconds and after 2 seconds it will call one function So let me write that function as well Okay So now inside this function, I’ll call this Dot It State inside, huh set state So inside this state function what I will say that my username should change from Eureka to let me say Swati and my ID should change from 1012 Let me say 303 Okay So let’s now just save it go back to the browser and reload this So now you can see the user is and Eureka and ID swathi Okay, let me just go back and I will increase it’s time to let me change it after 5 seconds So here Okay So let’s now write C So here the user is in Eureka and ID swathi, but after five seconds, it will automatically update to Swati and 303 So this is how to react works It will automatically update the Dom manipulations for us and because of this the applications become extremely fast So this stage is mainly used if the component has some internal value and moreover which doesn’t affect any other component then only we can use the states So I hope you guys are clear with the state Okay So let’s move to our next topic that is life cycle of the components So react provides various methods which notifies Venice 33 of life cycle of a component occurs, and these methods are called the life cycle methods Now these methods are not very complicated You can think these methods as the specialized even handlers which are called at various points during components life You can add your own code to these methods to perform various tasks when we are talking about the life cycle The life cycle is divided into four phases They are the initial phase the updating face the props change phase and the last is the unmounting face now each of these ways contain some life cycle methods which are specific only to them So let’s find out what happens during each of these phases The first phase in the components life cycle is the initial phase or the initial rendering phase This is the phase when the component is about to start its life and make its way towards the door So in order to do so all these methods are invoked in order So first order method we have is the get default props This method allows you to specify the default value of this dot props It gets called before your competition When does even created or any props from the parent our past the next we have the get initial State now this method allows you to specify the default value of this dot State before you’re confident is created just like the previous method it took with called before the component is created So next method we have is the component will Mount method now This is the last method that gets called before your component gets rendered to the dog There is an important thing to note here If you were to call set treat method inside this one your component won’t re-render Then we have our render method Now This is a method you should be familiar with every comment must have this method defined and this method is responsible for returning a single root HTML note though This single route may have many child note inside it So if you don’t wish to render anything simply written null or false then we have our final method in this phase That is the component did But that this method will get called immediately after the components renders and gets placed on the dorm at this point You can safely perform ain’t on quitting operations without worrying about whether your component has made it or not Now one thing you need to remember here is that except for this render method all of these life cycle methods can fire only one So this concludes our initial phase then we can move on to our next phase That is the updating face So after the components get added to the Dome they can potentially update and re-render only when a prop or a state change occurs during this time a different collection of life cycle methods gets called Let’s see what happens when a state changes whenever a state change occurs The component will call its render method again Now any component that is relying on the output of this component will also called a render function again Well, this is done to ensure that our compound is always displaying the latest version of itself

So when a state change occurs, all of these methods gets involved in order So here our first method is should comprehend update method Sometimes you don’t want your company to update when a state change occurs Now this method will allow you to control this updating Behavior If you use this method and return a true the component will update else it will skip the updating part Next we have the component will update method this method gets called just before your component is about to update one thing you should note here is that you can’t change your state by 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 should comment update method the code inside the render method will get called again to ensure that your component displease itself properly Again, the last method we have is the component did update method Now this method gets called after your component update and the render method has been called If you need to execute any code after the update takes place You can put it inside this method So now let’s move on to our next phase That is the props change phase after a component has been rendered into the tongue The only other time the component will update is when a prop changes its value now, this is when all these methods will be called the only method that is new here is the component will receive props If you want to compare we can go back to the previous slide and you can see we have the should component update method component will update method render method and component did update method and in next phase We have should complete update complaint will update render and component did update So here only this method is new now this method returns one argument and this argument continues the new prop That is about to be assigned to it The rest of the life cycle methods behave identical to the methods which we saw in the previous phase So this is how the props change phase is completed now move on to our last piece That is the unmounting phase Now This is the phase when the component is destroyed and removed from the dog There is only one life cycle method over here That is the component will unlock method You can perform any cleanup related tasks here such as removing the even listener stopping the timers Etc after this method gets called your component is completely removed from the door So here we are done with all the phases of the components life cycle along with their methods So now let’s move on to our next topic That is the evens Well, if you guys are familiar with HTML and JavaScript, then you might know that what are evils in reactor also even saw the triggered reactions to specific actions like Mouse hover Mouse clay keypress Etc Hi, I’m leaving these even czar’s very similar to handling the theevans and dog but here are some syntactical differences in react the events are named using the camel Keys instead of using the lowercase moreover In fact, the even surpassed as functions rather than the strings here the even document contains a set of properties which are specific to an event What I’m trying to say is that each even type contains its own properties and behavior, which can be exist only via its event handler moreover In other you eyes Well even Handler is assigned for each event, which leads to more memory consumption and also makes our work tedious But in react the event handler is not attached to the Dom elements directly rather It only uses the route even Handler which is responsible for listening to all the events and then calls the appropriate event handler as per need Let’s now see how the event is created and triggered Really? So to make you understand I’ll be using one demo code here Let me show you how it should be looking So I’ll show you how the events work by the help of this example here I have one Bull and one button with me So clicking on this button will turn on the bulb and again when we click it will turn off So, let’s see how this is happening for this Let’s go back to our code Okay So now what I’ll do, I’ll leave this file like this and I will create one more j6 file So here I’ll see even script dot j 6 okay So now inside this file what I’ll do, I’ll create one variable and let me just say its name as well Okay So again, we’ll call free app dot create class and inside this will first we have to mention our render function Okay Now inside this render function, I will say that I have one image and just close it and I’ll say

that it’s coming from some source and name that Source later then we have one button over here Okay, so I forgot to put it inside the division so here too Just got to it and piece to it Okay, so it’s final and now I’ll admin button over here Okay here I’ll say that this button on clicking this 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 have one button clicking on which it will do something and here is one image which will be shown Okay So here we are done with the render function since we want on our HTML page We want one button plus one bulb So we here we have described both of the things now, we have to set up an initial state for our bulb status So let me say get initial state And this is a function and since inside this bulbs class We have two functions We have to again separate these and inside this we will say that okay, let’s return the status Let me set the status first So I will say the bulb status is by default its false So now inside this I have to add two images as well because on the page, we are displaying the images for that I’ll go to my downloads Okay here I have already downloaded two images I’ll copy them come back to my project and here I’ll say that I need one directory and I’ll let me name it as image Now inside this I’ll just paste them now here you can see I have both one and two in each So this is the initial state, but now we want that on clicking this thing this button something should happen So let us create one function to tell what exactly will happen on clicking the button So for that I’ll say that we have one function name switch So this is a function looking super ated So now this function will change the status from false to true and true to false because we want on each click the status should change So here what I will see is this dot set State Okay inside this I’ll say that my status should change So for that I’ll say status status should always change from whatever the current state is So for that this dot state DOT status, And we want each time the state to change So for that I will say not so whatever the current status is, it will always change it to the opposite one So if it is true, it will change it to false And if it’s false it will change it to true Now We have to provide the source for this What I need to do is inside this render function Okay So here we have to put this code inside the return which I forgot Okay, return since returned It will return as the HTML representation You must remember this thing Okay So now inside this one what I’ll do I’ll see I have one variable and I’ll say disp bulb means display bulb So which bulb will it display? So here I will put the sources along with a conditional operator whatever the condition is according to that It will display the bulb So I’ll say this dot state DOT stay If the students are false, it will show the image one And if it’s true, it will return the image to so for that I’ll give the path of the image that is image to dot PNG So this is the folder where am I images? And this is the name of my File versus when my condition is false It will show image / first image that is image / paint Okay, just save it Okay So like this this is we are changing the image over here So here I’ll say that image source is dispersal So depending on the condition it will automatically retrieve the image Okay, here we are done So here what is happening depending on the condition the image will change but now we have to tell it also

that on clicking the button you have to do this thing So for that here, I’ll say that this dot switch that whenever I click on my button then switch function should be called so for that I have written this dots which here we’ll call the react Dome dot render Okay, and inside this else say that grab this bulk component and display it over the HTML page whose ID is content So here we are done So see if this go back to the HTML file and tell it that rd6 file is now even script 36 So just save this now and run it now you can see we have a bulb along with a button now clicking on this will turn this on and again if we click it will again turn off So this is how the events are created and react so now I hope that you can create your own evens So let’s take up our next of it that is riffs riff stand for the references now in react a parent compound can interact with its style component only through props So if you want to modify the child, you need to re-render it with the new props This is the typical data flow So in case you want to modify the child without following the typical flow, what you need to do is make the child and instance of the react component or the Dom element in such cases only you can use a reference Now this the Riff attribute makes it possible to store a reference to a particular react element or component written by its components render function Now this can be valuable When you need to reference it from within another component render function as you can see here One of my render function is written in one reference, which is then used by another components render function So let’s now see how this works practically So here I’ll go back to my code here What I’ll do, I’ll create one more script file because I don’t want to confuse you guys with all these stuff So here I’ll create one more file and I’ll just name it as a ref script Dot j So what I’ll do here, I’ll create one variable Let me name it as a ref component And again, I have to create one class for this I’ll call react dot create class Okay So inside this I’ll be putting my functions So here first of all, I have to create one render function So this render function will always return me something Okay, so here let me create one division first So what here I’ll do I’ll create one input text box along with a button So inside this text box You have to type your name, which I’ll take and display it back to the webpage So how we can do it with help of reference will see so first let me say that I will use when h2 tag here and I’ll see the name So here inside this Al create 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 we click this button, something will happen That is it should retrieve the name from this input box and then displayed for that I’ll say that on click it will do something So for now we are done with this So how the references are created now so here whatever we get as input I want this to refer by this method so for that I need to create one ref here So here I’ll say that we have a riff and in this we have to take the input So from here, we’ll grab the input whatever the value with the user is passing It will take that input and it will be then referred by the function which will be called on on click So here I’ll just name this reference as let me name it as input demo So let’s say this Dot Input them Okay, and it will be referred by the input like this Okay So now let me say that Okay, let me put one brake function over here so that this input text box and the button should appear in different lines Okay So here we are done with the render function Now, what we want to do is we will call one function over here

that whenever with this is click It should retrieve the value from this thing So for that I will create one function Let me say display function So what this function will do whatever the user gives that input It will take the name and it will display to what the HTML page so for that I need to create one more Let me say I have H1 tag over here and I’ll say hi to whatever the name is So here I want to display my username So for that I will create one span over here and I will provide one ID to this So I’ll just say this name Okay So now what my display function will do it will take this input value and it will display it on this area So for that let me create one variable and set name So here are any here now this function can refer to my reference So to refer this will see this dot whatever our reference name And as input demo, I’ll just copy this and paste it here and then I’ll say that receive its value So here we are done So one thing here which we need to do is we have to display this name whatever The value is in name We have to display it over here So for that what we need to do is as you know to display it on the web page we have to use the inner HTML and for that we have to get the span by its ID So get element by ID and the ID name is display name this pool name and then we’ll say dot inner HTML and here we want to display the name Okay So this thing is done here Now again, since we need to tell react that you have to render this drift component over the content area So here call the react Dom dot render inside this you have to call ref component and again get the dividend by its ID so document Dot get element by ID where the ID is content? Okay So here we are done Just save this file Okay No here We are still left with this thing We have to tell that on clicking You have to call the display function on each button click This display function should be called so now we are done So we’ll I’ll just save this and I’ll go back to the HTML and a little that rj6 file has again changed and now it’s like rough script So save this and run this so here you can see that I have named and I have one button and then it says hi So as soon as I put my name over here and just click it it will say hi spot So this is how the references are used But one thing you should remember is references should be used in the Darr need only so references can be Used when you are trying to manage the focus or text selection or media playback, then it can be used while triggering the imperative animations and moreover when we are integrating with a third-party Dome libraries then also we can use the ribs So I hope now the refs concept is clear to you So let’s take up our next topic that is keys will keys are the elements which helps react to identify different components uniquely They are especially helpful when we are working with dynamically created components assigning the key value will help you identify the components Unity even after they have changed As you can see from this diagram here We have two components with different key values one with key 101 and one with key one or two Now these are in it for the first time So the reactor will render them without any problem But next time when we try to render them hear the complaint once key value is same whereas comparing to ski value has changed So now the reactor will render only the second component not the first one as the first components Chi is sick So here the react will think that as the key haven’t changed So the element is same so no need to render this one and it will go ahead and render the second component So this is how the key works in react now finally we come to our last topic that is router in react router is a powerful routing library that is built on the top of react framework using the router We can quickly add new screens and flows to the application

It keeps the entire URL in sync with the data Being displayed in the web page moreover It provides us some of the major advantages like it can easily understand different views of the application It can restore any state and view of the application just by using a simple URL along with this it can efficiently handle the nested views and resolution with reactor outer the state of the components can be easily restored by the user himself just by navigating backward or forward moreover by the router We can maintain a standardized structure and behavior of the application Also, it can do implicit CSS transitions while navigating only so here we are done with our router Also I hope now you understand about react.js thoroughly what it is how it is implemented and what all things we can do with it You know now so I think you guys are ready to create one application with reactors thus without any more delay Let’s now find out Code behind our Facebook comment application which I used in the beginning So if you guys remember I showed the demo of this application So now we will see what are the codes which are working behind this application Okay guys, so here we are with our code So to save time I have already created HTML the PHP and the CSS files which all I am going to use in my application and moreover I have already downloaded the pictures also so that I can display the profile pictures if you remember from that application Okay So this is our HTML file I have included the dependencies here and I have told that I have one scripted J6 since I’ll be naming my 3658 a script only and here I have added the CSS style sheet as well So now next step what we have to do is create a j6 file So without any delay, let’s get started So inside this as we were doing earlier where create one noscript GSX Okay So now inside this file I’ll be creating some components along with their functions And these all components will be doing some or the other work So here first, we’ll start off by creating the base means first really create one wall in which all our comments will be posted for that I will create one component named Wall form And then inside this I will be putting some functions like get initial State means to set different states I’ll be setting different states inside this and then finally I’ll use one render function which will be displaying one text area So without any delay, let’s quickly start Okay So here we are done with our first component now, let’s move on and create one another component and let me just name it as where comment form So now what this comment is doing that it will accept all the new comments and it will at the back end process them and integrate them with this wall So for that again will set the initial State and then tell that how many cases it will go through and then we’ll put it to the render function So let’s quickly do that Okay, so we are done with our second component as well

Now Let’s move on to our third component That is where let me see How meant grid Okay So now this component will be taking the comments and then it will link them to a particular user as specified for users in my PHP files Now, whichever the user will add the comment it will take the comment and it will just integrate with it at the back end So for that what we have to do is again create the class and put some initial State and then give a render function to 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 function will provide one division in which we will place our comments along with its related profile pic So this is how we are integrating the comments along with the pick So now we’ll create another component and now let me name this as comment block So now this comment will be displaying the comments along with its user in the in order They are inserted like in this what we are doing we are presenting one representation This component will be taking in the comment and integrating it with its related profile pic And then this block what we’ll do it will displayed back on the HTML page So for that, let’s see So now we have done with our comment block So since this component is done after this will create one more component and what this component will be doing is it will be responsible for updating our comment wall like whenever a comment is deleted or any comment is added at that time This component will get activated since we are updating the ball on this So let me just name it as wall update Okay, so I hope you can understand what’s going on So let’s just quickly create this component and see inside this complaint We will have some functions and along with that We will have the render function which will keep on updating the HTML representations Like whenever the comments are updated on that is above added or deleted at that time It will assign the particular profile pic and we’ll link it with the computer and then displayed So, let’s see how it’s doing Okay So here we are done with our update Paul updates and then ok So here we will create one more component that is wall feet And now this component will be responsible for maintaining all the comments on the wall So whether we are adding the comment or we are deleting it from there this component will Rend it accordingly So let’s just get on it Okay, so finally I will create one final component So this will be the component which will be triggering the render function from this component dressed All the components will be triggered So basically this is the component which will be responsible for our view So let’s get started with this one So this is our final and mean component

So here will tell react at first you have to render this wall container Then this wall container will call the wall feed Okay? So this is our wall feet component Now this Wall Street will in return then it will call the wall form and wall updates like this internally one component will call another component and this will build up our whole view So let’s just quickly render this wall Contino So for this we have to call the react Dom dot render and now inside this will tell that you need to render the wall container and you have to put it in the place of container So here we’ll see document dot get element by ID and let me just cross take the ID So IDs continue just copy this one And go back and pissed finally we 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 I will just say Local Host Okay Look I will host its cheesy 081 and my application is react Yes So, okay, so you can see that my application is up and running So let’s just test it out whether it’s working or not So I’ll say hi Yeah, it’s accepting the comments I can delete my comment and let me try replying so we’ll say hello So as you can see our application is perfectly working So I hope I was able to make it clear how it’s working how the codes are working So now I will conclude this tutorial here Hello everyone and welcome to the node.js tutorial from at Eureka I’m Ravi Juelia, and I’m your trainer for today Let’s check out the agenda for today So if we see the agenda we would see that what node js is you’ll see the node js architecture We would see what node.js package manager that is npm is node.js modules What is a package.json file then we’d go more into node.js Basics, which is any language Basics that is there We will also move into the file systems There is an f s module in node.js that would enable us to read file and write files on our server and then there is an events module in node.js there is also something called HTTP module and there is also something called Express that we would be going for which is a node.js framework So at the end we would be going through the entire code and we’d be going through a small demo as well which would be something of a mix of all the Yes Concepts that we go forward So let’s go ahead and see what node js is actually so if we speak about node.js it’s a powerful JavaScript framework or I might say it’s a runtime where you can run JavaScript on the console It is developed on Chrome’s V8 engine So if anyone doesn’t know what a V8 engine is, let me just tell you what it is So if I check out the V8 Dev the official website of chromes V8 engine you would see that it is an open source high-performance JavaScript in webassembly engine written in C++ and you know more or less this is the engine that runs on the Chrome browser So you would see that whatever your Chrome browser understands It would be the same thing that node.js also understands So the creator of node.js thought that okay This is an open-source JavaScript engine Why not Implement that in a platform which enables you to run JavaScript on the server So this is the reason why node.js understands So that is one thing that we would like to also keep in mind So it’s something that runs on Chrome’s V8 engine and it compiles JavaScript natively into the machine code that is all because of chromes V8 compiler that we have and it is basically used for creating server-side web applications and also Network applications actually so mainly node.js is used for and basically if it is a data intensive application node.js is something that is specifically made for that Let’s see how that happens Basically if you talk about the features of node.js it is open source, it is simple and fast it is asynchronous highly scalable You would face no problems in scaling your node.js application It basically works on something called a micro service architecture as well And it facilitates that micro service architecture really

Well, it is a single-threaded model which means it is not resource intensive and yet it is fast, you know yet it allows things to be done in parallel We’ll see How that is done and then there is no buffering Basically, there is no waiting as far as node.js is concerned and that is because of a concept in JavaScript, which is called event Loop We’ll see more about that as well and it works on so many platforms So that is some brief of the feature Let’s see node.js architecture and before going into the architecture of node.js we would also like to see the traditional architecture So traditional architecture if we speak about traditional server architecture is basically where every client request is managed by separate threads So there is a multi-threaded model going on in normal server architectures like Java, for example, it’s a multi-threaded application or a multi-threaded set up altogether So where your web application runs on multiple threads and various client requests are processed parallely now, there is nothing to take away from this model because it is really good and it has been working throughout years when Java is at this point of time Java is actually one of the best language Is and secure language has to be programmed in However, this is resource intensive because you can see that there are so many threads going on in parallel which means your server or your machine as should be something which is capable of running these many threads However, if you talk about node.js it only runs on single thread and still it processes requests in parallel So one thing that I would also like to clarify here is in the background or maybe under the hood if you may say no just doesn’t process any requests in parallel, but it goes through an event Loop where once the request comes it goes into the process and node.js doesn’t wait for the output of the request to come in while it takes in the next request So as and when the first request for example gets the output it would just respond for the output or with the output to the respective client basically, so, you know in the background or under the hood it is basically running only one thread, which is not resource intensive and At the same time processing requests from so many clients and it provides a virtual feel that everything is running in parallel, but everything is not so that is all because of event Loop that is going on So that is basically the architecture and then we talk about something very important as far as node.js is concerned which is called node package manager now, it is called npm in short and it was primarily known as node package manager, but nowadays it is not known as node package manager because it is doing so many things then package management is doing so many other things as well We’ll see what it is So if we talk about the official definition, it’s a package manager for node.js packages or modules, which has been added as a default installation from node.js version 6 or 0.6 onwards and then it’s stuck It is already there in any installation that you do in node.js if you are a Java programmer, you can relate this with Maven and if you are a PHP programmer, you can relate it with composure So it is the same Mechanism where npm has a repository of so many libraries and then the repository serves whatever the package you need for your project And if we talk about the features it provides and hosts online repositories for node.js which can easily be downloaded in our project using a command line So it provides a command line utility as well And it also allows you to manage the repositories or the versions of libraries that your project may use So we’ll see what are the versions and what are the libraries that we are talking about So the library is that I’m talking about when I say libraries it is just node.js modules so node.js modules or if we talk about the module system There are core modules There are local modules and then there are third-party modules So code modules are the ones that are actually available in the default installation of no chairs You don’t have to program anything You don’t have to install anything else Node.js to get the core modules working few of them are listed in here like HTTP URL query string will be using them and there are some others as well, which we’ll be using today and then local modules It is something that a programmer builds It could be a function It could be an object P anything the programmer builds and the programmer exports so that other team members are other programmers can import that module and use them So it’s something that a programmer would build like a custom module and then third party module This would be installed through the npm repository So if we speak about npm in this particular case, let me just also open up the npm website So it is basically n PM J s.com And you can see that it has so many repositories

There are so many companies that it is serving and all there are so many repositories available as well Let’s just search a few repositories in this particular case I’ll search one of them If we talk about react you might have heard of react react is one of the repositories it is available in npm You might have heard of Angela That’s also one of the libraries that is available in the npm repository You might have heard of jQuery You might have heard of bootstrap These are like naming just a few of them There are so many so many repositories that are available even express that we are going to use is one of the libraries that is available in this particular proposed ettore of nbm So you can see here that Express is one of the libraries that is to be used So we’ll be installing expression C. By the way This is the way you install any third party library from the npm repository Alright, so that is the 3rd party modules and you would be using npm install or in PMI to be in short to install this particular poetry Now, let us see the package.json file package for Json file in node.js is the heart of the entire application is basically the Manifest file that contains the metadata of the project now at this point of time Let me just create a node.js Project and see what this package dot Json file looks like and then we’ll analyze what this file actually is So let me just create a 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 call it nodejs demo, or maybe I’ll call it task manager even better We’ll try to create some of the task manager functionalities in here and it will be an API that will be creating or a web service that will be created will see what it is So in this task manager, I am going to initialize a node.js project And in order to initialize a node.js project you need to have node js installed in your computer, which means you have to go to node.js dot org website and you can download this LTS version This is a currently release which is basically experimental It’ll have all the latest features but it is prone to be erroneous at some time So, you know generally for You don’t use this one but you use this one but say if you want to check out the new features, you can also install the current release but will always go with the LDS and I already have this installed now clicking on this will allow you to download the MSI file that is the setup file and then you can just double-click on that set up in just install it on Windows and in Mac as well The setup is really simple and in Linux as well probably will give you a tip file For example, if you’re going for a boon to so the setup of node.js would be really straightforward But after the setup is done, what you have to do is you have to just check whether node.js is installed in your computer or not And you’d be checking it this way node – we will give you the version of node.js and you can see that I already have it installed and I have the version 10.15 point three that is the LDS and then I’d also check npm If you recall we saw that npm is something that comes in inherently with 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 or initializing a no chase project It is something like this and p.m In it dot which means current directory So if we just hit enter I think dot is something that is not to be done Right? So this would ask you certain questions Like what is the package name? Let’s say I want the same package name as task manager I want the version 2 B1 Okay, the description let’s say this is a task manager project Right entry point would not be significant at this point of time So we’ll just keep it as it is No test command as of now no git repositories I’m not going to even commit that to a git repository and no keywords as well author I can say at Eureka and license no meaning as of now for a license because we are not going to make it public or anything So it tells us that is it? Okay and also tells you that it’s about Right to this particular file package of Chase on inside our task manager folder So which means after I say, yes, there is a possibility of this being written into a file called package.json inside my project So let’s go for hitting enter Let’s say yes, and if I now check out my folder you see that the package.json file is in let’s just open this up in our editor You see that here is the package dot Json available with every information that we provided Now This is a very basic package dot Json There’ll be so many things inside a package.json file and a normal or a real world Baxter Json might look something like this where there are so many things like the name of the project is there then there is something called version as well description of the project

What is the starting point of the project which is Humane script to run first There are certain scripts We saw that we didn’t provide any test command and then there are certain engines What all tools do you use to run this project? Who is the author? What is the license? There are certain third-party modules that we would like to have you can see in this particular example that there is Express that is there as a third-party modules which will be using and then there is Dev dependencies Like when you go into a development environment, like for example our computer, they’ll be certain dependencies that will be there and that will be tested inside the dependency Then there is repository related information Shouldn’t which we didn’t provide actually if you want to see what are the bugs and all there has to be a separate URL and the homepage So that is your package.json file which got created By the way, when we initialize the node.js project and you can also manually created but it’s better that we go for npm in it as a process So now let’s go for node.js Basics So if we talk about Basics, it’s like any language Basics and the main thing that we need to check out as a basic is the data types So there are certain primitive data types There are certain abstract data types, like non primitive data type So primitive data types as string number Boolean null and undefined abstract data types are object array and date to name a few by the way There are so many others but these are to name a few so say for example, if I create an application, let’s just create a string as a variable and let’s see how that works So, let me just create an app dot JS file and in this I’ll create a variable and I’ll be very specific I’ll say first name and I’ll say first To be and Rica This is a variable that we declared and if I want to show this variable in my console, I’ll just do console DOT log first name So when I do this the main perception is basically if I want to run this app to JS I might have to create an HTML file where I might have to include this app as a script file and then I might have to execute the HTML file and open the console to see this particular output But if you have installed node.js on your computer, which we have you would actually be able to run this particular app dot JS really easily Let’s run this one for that I would have to go into my project Let me just clear the screen and run this one and really simple to run a node.js application It’s simply node And the file name that is app dot JS and you can see that it displays the first name in my console So whatever I do as console DOT log gets displayed in my terminal that is something that I would like to keep in mind And remember this is a string that we have created but there is no concept of a strict data type So basically the first name can also be something like this The first name can be reassigned to let’s say a number and that will not be a problem for JavaScript That is the core nature of JavaScript is not strictly typed So that is something that I would also like you to keep in mind So there are so many data types that are available which we have created a string and then there are so many others This is how you create a variable that we already saw and then there are operators Now as I say like there is something that is already similar to all the other programming languages variables are one of them operators as well However, there is one operator that is pretty unique and that is the triple equal to sign So say for example, if I go for something like this bar, let’s say h 1 is equal to 30 and for H2 is equal to 30 and then let’s say VAR result is equal to H1 Double equal to h 2 I’m using this double equal to similar to any other binary operator like I might go for plus and similarly I’m going for double equal to now this is because it is a comparison operator This would return either true or false and this will get stored inside the result variable So this time I know that you might have guessed it it would be returning as true And if I do the result if I go for console log of result and if I execute this after chase, you see that it returns as true now if I go for a string, all right, and when I declared a variable in the previous example, we saw that there is no strict data type So this would not actually check for the data type This will just check the value and though it may seem that it should give us false This would give us true and the fact is like JavaScript doesn’t care about data types So if say for example you want to also compare the data types along with the value instead of double equal to use triple equal to And that way this would give us false There is so much going on inside or in this particular two examples that we have but for now, you can remember that double equal to doesn’t compare the data types while triple equal to also checks the data types, but then again there is so much going on under the hood, which it’s not in the scope of this particular session, but just keep this in mind as a unique operator

that is available for JavaScript specifically and then there are certain other languages that might have these operator But JavaScript is the one that came up with this All right So this is one thing and by this time you might have got an idea on how we run an application or how we run a file in node.js So this is one other thing that I would also like to mention where functions are created say, for example, if I have a function to create let’s say function say hello and I pass in name inside it and I return let’s say hello plus name a plus here is a concatenation operator and that would return Name our Hello message with the name whatever we have lasting so I can do this like console DOT log say hello and let’s say hello to Ravi All right So if I run this particular file, it will give me whatever output we expect which is fine Now one thing I would also like to tell you is in JavaScript There is a provision where you can create a function without a name an anonymous function, which is also something that JavaScript came up with a function with no name And if this is the case then how would you call the function so for that you can do something like this VAR say hello is equal to a function something like this And then there is something Remains the Same function gets called as as normal What we have done is we have created a variable and inside this variable We have assigned a function rather than a value So and then we are calling the variable as a function So again, if I run this particular code the output would be the same just keep in mind that function here can be an This in JavaScript All right, and then objects now object There are two ways you can create objects one is through object literals Like were let’s say a student is equal to a constant object which has let’s say name Ravi and email robbery at gmail.com For example, right and then we can do a something like this console DOT log student dot name, right and then student email and so on and that would display whatever the name is basically so an object dot property can be done and then there is a Constructor pattern as well available, but it’s okay if we don’t go for that but then there is another pattern which uses object Constructor to create an object now going into node js core modules One of the modules is file system That is the fs module FS module if you want to include or any module if you want to include you go for this syntax a variable is equal to require And the module name and this would be something like this for example par FS is equal to require FS Now for this FS module you don’t have to install anything else but node.js has to be there and which is there and if is module would be available It’s a core module in node.js so let’s say for example if I have a file called hello Dot txt, and it has some data All right, and if I want to read this file, I’d be able to do this like FS dot read file and it asks me the path of the particular file So let’s just give the path Basically I can try with the relative path first so it will be basically Hello dot txt Let’s see what it gets and the second argument that we need to pass is the Callback function so node.js or any JavaScript platform would work more on the basis of callback function That’s how it creates the virtualization of so many things working at the same time All right, so, I would go for a callback function and this function Anonymous function would go for two arguments one is error and one is data Let’s see if there is no error then we’d go for logging the data inside the console Let’s see What data we get All right So if I run this file now, hopefully I should get the contents of Hello dot txt file Let’s see Here, I don’t get the content but I get something called a buffer that buffer is basically some container that contains raw data out of this buffer I can get the string basically So let’s say if we go for buffer dot tostring which is a function which would convert the data to a string So now it will give me whatever the content hello world has and similarly if I for example have to write something inside a file Let’s say if I want to write something inside a file and then once the file is written I would like to read out the file we do something like this FS dot right file and write file would again go for the path And I would be going for the data as well And the data is something like something like this and

once I go for the data data could be any data type by the way could be Boolean could be object could be any data type and then I go for a callback function The Callback function would have something only one argument here, which is error if there is no error like if no error then I would like to read the file right so then I can go for f s dot read files I can just take this whole thing and I can put it in here So what I have done is I have written something into the file and if there is no error after writing whatever I have written, I would be trying to read that file and in here if there is no error I would like to display the content the hopefully this should give me how are you or maybe let’s see whether it overrides whether it appends Let’s see what happens If I check out this you can see it gives me how are you and if I go into Hello dot txt, you can see that it has overwritten the particular content that was there before So this is an f s module demo This is how you would be reading and writing files I might like to also try and read and write Json in some Json file that might actually give me a feel of an API that is being created Let’s see how that goes Then there is something called events, but before going for events, I would like to create a server first So let’s just create a server and you know, the events are basically something that we would be working with where we would be emitting certain events And then we’ll be listening to those events Let’s see how that whole mechanism works and how the event handlers would work and all but before events I would like to go into creating the server through the HTTP module because server is also a network application, which is something that node js would enable us to create so Create a server through the hdp modules and then I’ll come back to the events Let’s see how that goes All right, so let’s just get rid of this FS related code and I will again go for the fs code in sometime I’d also get rid of the Hello dot exe I don’t need this Right And then what I’ll do is I’ll create a server in here before the server I’ll go for VAR H DP is equal to require HTTP and then there is something which is really simple to create a server in node.js as opposed to all the other languages So is something that a programmer would create so say for example, if you compare no TS with JSP or Java, there is Tomcat Apache web server that is already available If you compare notes as with.net there is is server that is already available If we talk about PHP there is Apache server that is already there compiled and available in node.js there is no server So the concept of node.js being a server It’s something that is not true in node.js it is just a runtime which enables us to run JavaScript on your machine so that you can create a server if you want to and creating a server It’s not a big deal in node.js this is how you create a server HTTP dot create server That’s it And I’d save it A variable called server and my server would listen to the port number 3000 the server Dot listen 3000 Alright, so this is what your server would listen to and if you want you can also provide the hostname here which is by default localhost / if you want explicitly can provide Local Host as the host name So your server would be listening to Local Host and 3000 and after it, you know starts listening I’d also like to provide a message and again the Callback function or an anonymous function would come into the picture so function So log will go for our server started on Port 3000, right? Okay So what have we done? We have simply created the server by HTTP create server and we’re listening on port number 3000 So that is what it is And then at the end we are displaying some message on the console So let’s see one thing that you’d notice is in the other programs The application actually ended like once you are done with the whole program You see that you get the command prompt back But in this case when we are listening the server is constantly listening to the port number 3000 So the application would not end in this particular case you may have to end the application forcefully by hitting Ctrl C So, let’s see now if I run it you see that server started on port number 3000 and the application is not ending All right So if I go for say localhost port number 3000 Something that might happen you see here that the request is sent to the server the server is not responding because we have not programmed our server to respond with something So here the server is not responding while the server is running All right, so if I stop my server you would see it would tell you that the site can’t be reached So basically what that meant was previously the server was running

So if I for example run the server this would again let me just open up localhost 3000 this would again start to load but the messages the side country reached won’t come because the server is still there The site is Rich with the server is not responding to us So let’s program our server so that it responds to us in which you go for a callback function inside your create server method and this callback function has two things request and response to arguments And if I want to send a response in this particular case you go for response dot end All right, and I let’s say server works That’s the message that I want to send All right So what this would do is it would send a message to your browser saying server works So let’s just take that message So for that because I have changed something in my app doj’s I might have to stop this and I might have to restart my server So server listening on Port 3000 and if I now refresh you see that it gives me the message server works So this is pretty cool We have created a server in like almost three statements, right? So that is something on how you create a server But generally what people do is people use this functionality of creating a server long with Express and then create a server through Express the framework that we are talking about So we will see how to create a server through Express But before that let’s move back to the events and let’s see how events would work in this particular case Now when you talk about events, there are two methods It’s that you would be generally going for one is called M it and one is called on so remember these two methods Emmet and on let’s see how we can make it work and what our events basically or how an event ID system would work So in that case we again use a core module which is called events So far events is equal to require events again, a node.js code module You don’t have to do anything to include this one and in this particular case, but also create an event emitter so far event emitter is equal to events dot event emitter And it should be a new event demented actually right now If we go for the presentation you would see that they have also emphasized on to things that is on and Emmet So we will see what these things are All right So now in this particular case, let’s go for something called event dot on even dot on or not even taught on actually even Demeter dot on this function It’s basically an event listener Now whenever an event occurs this function would listen to that particular event All right So this would listen to the event and event dot on we would have the name of the event and let’s see what we can do as a function There’s a callback function that is also something that is involved in here So we will see even diameter where it will go for event dot on and something inside as arguments But as of now, I’ll just keep it this way And I’ll simply go for something on the image side of things I would like to emit an event and let’s see how that goes All right So in this particular case, what I would do is whenever there is some requests on the server, I would like to emit an event and then I would like to listen to the event and log something on the console, right? So, let’s see in this particular case I’ll go for event emitter dot m it and I can name the event anything the event that I’m trying to You Know M It is basically someone has requested to the server So what I would say is on request maybe just someone I can name it anything That’s why I’m naming it a very bizarre names or someone requested It is an event name and if I want I can pass in some data as well But as of now I’ll just keep it this way I’ll just omit someone requested and when I would like to do something when someone requested so I would go for even diameter dot on someone requested and That is a callback function Let’s just go for console DOT log and I’ll just say a request has been done on the server Something like this on the console All right So this is an event emitter and basically on is an event listener Alright, so we are triggering an event or maybe I can call trick even trigger that will be a better name So this is an event trigger and this is an event listeners or even admitted it m it is an event trigger and even tomato dot on is an event listener So whenever this would be triggered this event will be executed and this function would be executed

So, let’s see So if I now read on my server because I have changed something in my node.js app I’d have to rerun this It says server started on Port 3000 I will just refresh and we’ll give me server works That is fine But if I check out on the console, you’ll see that a request has been done If I refresh again, you see that a request has been done and then there are two requests that is because one is checking whether the method get is available on the server or And thus the other request is basically executed with the method get’ actually so there are two requests but we don’t need to you know, go into detail in that particular case However, one thing is for sure that whenever the event emitter is triggered we can execute the on method and we can listen to 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 anonymous function as an argument and again just display that for example data that should display test to me So whatever you pass in could be a string could be a Boolean and object anything would be taken into the function as an argument can name it anything and you can display that particular argument as well inside the console Let’s rerun our program and let’s refresh the server is requested and you can see request has been done on the server and test this particular data is also been displayed So that is the event diameter you can emit events and you can listen to events whenever the event would be emitted the listening would happen All right So this way, you know, our node.js server becomes an invented server and this is really good If you want to create a chat application or any real-time application event handling would actually help us create a good real-time application So that is where this would basically come into the picture So, you know, you can check out socket IO there is a library called socket IO which helps you to create a chat server This would heavily use event amateur on and emit methods All right So this is the one now we have created the server using the HTTP module and if we talk about the server you can always see that the client would be either a web browser or mobile browser or an application that might request to your web server The web server would contain your server file That is the app dot JS that we created plus some application logic as well if you want and the Might be taking data from the data layer or any external system and it might be serving the request back to the client So basically this data would be taken into the business layer and to the web server and the web server respond, like response dot end sort of thing would happen in this particular case So this is how the request response cycle would go on and then we see here that it’s creating a web server using node.js you can pause this particular portion You can also try out this whole thing I think you would know how a server is created You already know that and then there are certain other things that are listed in here which you can try now we’d go for third-party module or a third party package You may say or even we can call it a library It is called Express JS next press JS It is an OG s framework which is basically facilitating the management of data flow and routing as well It is very lightweight and nowadays if you create a node application for an a By order of Observer expressjs is something that you definitely have so it’s like basically the part of the language itself right Now It facilitates faster application development It provides applications with template engines two of them are Jade which is nowadays known as pug and ejs to of the very popular ones, but then there are so many others it helps, you know, building single page applications building multi-page applications as well It helps you to connect with any database MySQL mongodb red is ETC The configuration is really simple will see how you create a server in express its really simple and it also helps you to handle errors or maybe it gives you a good facility to Define error handling processes so that your maintainability of the application is something that would work So let’s just create a demo in Express and let’s see how that goes And as I said and be using HTTP and express together Create a server That is an ideal way of doing it So let’s just get rid of everything and let’s just start with the express server for that and have to include express Our Express is equal to require Express Now when I do this and if I execute this, you might expect that this might work but remember Express is a third-party Library It’s a third-party module So in that case you would have to install that particular module on your system Obviously, if I run this,

let’s say if I try to run this this will give me an error cannot find the module Express So let’s install Express in here in order to install expression Remember the file structure that we have We have an app dot JS file 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 install the whole word or I as a short form It’s all fine I didn’t stall Express and this would actually download Express from the npm Repository And install it on your local machine and you’d be able to also see where that Express exactly gets installed So you can see that expresses installed 48 packages installed All right, and now you can see a change in the file structure there was already package dot Json an app dot JS in my file system while there is a folder called node modules created and package underscore Dr. Jason also created the node modules folder would actually have the library Express and then there are so many other libraries that Express depends on which are also imported and installed So now if I execute this this will not give me an error However, we have not created a server We have not listened to a port number So we’ll be doing that through Express Let’s do that What we would do is Express And brackets like be calling expressed as a function and we’d be saving it in silver a variable called server So this is how you create a server in Express pretty simple And what we would do is server Dot listen 3000 and then the same drill like 3,000 and not specify Local Host because I know that it is localhost and at the end a function that tells that the server is listening to 3000 so console.log, so listening to Port 3000 All right So the express is required like included a server is created and the server is listing now, let’s just rerun the application and because the server is listening the application would not stop it will keep on listening and let’s go into our browser and let’s refresh this time around when we refresh you Do not get that whole loading thing But instead you would get an error and it says that it cannot get / this is actually not an error on the server side the sir Is all okay The thing is that we have not programmed as server in a way that it would address the get request on the root path This is our root path There is no get request addressed on the route, but that’s what it says So what we’ll do is we’ll address the get request I will do something like this We’ll go for Server dot get well actually rub the naming it a server because I would like to use this server identifier somewhere else in some time I’ll go for app now go for app Dot listen this time around All right, so app and this also tells you that you don’t have to name it server can name it anything that you want So this is my Express app and app dot get / and a function request and response the same request response function that we had but it is now specifically for the root path and in here I can go for a response dot either I can go for end or I can go for send and response that send Let’s say X This works I can also let’s say have an H1 tag so that I had browser displays it as a heading that can be done And now let’s rerun the application and hopefully the root path get request is addressed So let’s go for it I’ll stop this we run the application By the way, there is a utility called Node 1 which would help you to run your application automatically once there are some changes but this time around we’ll just you know, read and the application manually So if I now refresh you see that it gives you an H1 which 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 like to do is I would like to go for something called tasks Okay, there is no route that is tasks that is defined yet not programmed our application so that it addresses the get request on the tasks in this get requests Let me just go for the get request first sap dot get slashed asks is what I want to have the server address and Request and response request and response So now I can go for response dot send I can go for another H 1 which says tasks work if I now restart my server and remember to stop myself I’m just pressing in control C And if you are a Mac User is command C that is stopping the server And now if I refresh to see that tasks work this works Now what we have done here is we have created two routes one is app dot get for the root and one is apt-get for the tasks It could be a blog post It could be about put up dot delete AB dot patch anyone who is familiar with the rest API would be familiar

with all these words your server can address any requests get put post delete patch any requests that you want to address here We are just going for get requests All right So now what I would like to do in here is I would like to return something from a file Like for example, I’d create something called DB dot Json Json file And in this Json file, I’d like to go for let’s say a key called tasks and tasks would be basically an array of tasks which would be learn node Js now in JavaScript You can create area with square brackets similarly in Jason’s in text that will will work Let’s say learn JavaScript learn Express So these are the three tasks that I have And what I would like to do is from this Json file, I would like to read these three tasks and I would like to return them as a response So, let’s see what we do in this particular case Let’s see how that works And that response has to be in this particular case right in this particular response dot send I’d like to read the file and then send the response so we know that what we use for reading the files, which is the fs module and also we know what we use to create a server as well Here we have Created a server by Express but generally people always use a mix of Express and HTTP to create a server Let’s see how that happens What I’ll do is our first I’ll go for H DP is equal to require HUD p and for this week, obviously, we don’t have to install anything It’s a core module and I’d go for VAR server is equal to HD P dot create server All right, and app is something that I’ll be passing in as an argument So my server is created which has all the goodness of Express So instead of app Dot Listen, I’ll go for Server Dot Listen All right Again, this is all stay the same will it will listen to the port 3000 and then go for a message It is server is listening to poetry thousand and so on and so forth So what we have done is we have included Express We have included HDPE you created an Express app We have created a server with the create server method We have passed on the express app as an argument, which means all these routes would be something that would be addressed And then at the end we are listening to poetry thousand Now, this is the common way that people would use to create a server and an Express app together Alright, so now let’s rerun our program Let’s see what happens It gives me an error and that is a typo So let me just resolved that Right, and now let me just rerun the program So again listening to Port 3000 this would not probably give me anything You can see that it is still loading because there’s no response that I have programmed in here which 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 actually to be using Express and node.js server together Alright, so now I’d like to read from the DB dot Json So obviously I would need VAR f s is equal to require fs And in here at go for f s dot read file and go for the path that is T V Dot Json the relative path and the Callback which has two things as far as read file is concerned one is error and one is data Let’s go for console DOT log or not even console DOT log, let’s just do a response dot send Once you have the data you go for data dot tostring would be something that we’d be going for Let’s see what we get in this particular case I would have to restart my server and this works and if I go for tasks this gives me an object that has an array of tasks So I don’t like to have the whole object but I just want the array of tasks to be there So one would think that okay I can do something like this Like let’s say War tasks is equal to Theta dot tostring dot tasks That is the object that we want to get but the thing is like this tostring would convert the whole data to a string which would not have that property called task So if I want to convert this string to a Json I’d like to do something like Json dot parse One of the codes have a script methods this would then have the property called tasks Json dot parse data or two string which we are passing As an argument and that will convert this string to a Json and then I’m going for tasks as a property at the end I can simply send in tasks So that will give me the plane are a that we require All right, and specifically if I want to send Json I’ll just do response dot Json rather than going for response to its end

So I am being specific in here So let’s just stop this and start the app again and refresh and now you see that you get the array now, you might not get the same output that I am getting as far as the color is concerned because I have a an extension which is running in my Chrome browser that is adjacent reader or something like that I had installed it years ago So that is the thing But the more important thing is you’re getting the plane are a from the file that we have So in this case we have used almost all the things that we have learned We went for Express We went for HTTP combined It was a server that was created and then the fs module to read something from the file this would probably be Something that we would like to go for from a database like we’d like to get a database connectivity done and get all the data in and then read data from this particular case But as of now read file would be enough and this might give you a good introduction to node js So this is what it is and further down You can try out more routing and more database connectivity in node.js see how that goes for you Hi everyone This is a she’s from Erica And today we are going to learn how to build a mean stack application from scratch So before moving ahead, let us discuss the agenda for today’s session So we start with what is a Min application then we’ll talk about mongodb Express anger to a node.js basically mean is an acronym for Mongo DB Express angular 2 and no dot j So we were talking about all these four Technologies They will talk about credit operation And at last we’ll start building our application which is contact list mean app So let us start with very first topic of today’s session which is what is the main application means that refers to a collection of JavaScript based Technologies used to develop web application So from client to server to database everything will be based on JavaScript If you see the diagram which shows a simple client server architecture that will be following in our main application If you see there you will find angular 2 that we’ll be using for our client side development Then we will using Express which is based on no dot DS for server-side development and at last we’ll be using mongodb as our database So this is the architecture that will be following So let us talk about this for Technologies starting with mongodb So mongodb is an open source schema list nosql database system So if you are working on Mongo DB you will be working on Collections and documents a collection is a group of documents Whereas document is a set of key value pairs You can refer to a collection as that of a table in our dbms system So basically all the data that will be working on inside mongodb will be in the form of chi and values mongodb saves data in binary Json format, which makes it easier to pass data between client and server So next on our list is Express So Express is a lightweight framework used to build web application based on node dot JS It provides your setup robust features, which you can use to build single page application as well as multi page application The idea of Express came from Sinatra, which is a very popular framework based on who be so basically Express provides you boilerplate by encapsulating the functionalities of node or chairs So that the whole app building process becomes easier and fast now, let us talk about angular 2 using angular 2 you can make application for your mobile as well as your desktop angular 2 is by far the most popular JavaScript framework available today And with the introduction of typescript angular 2 is bringing a true object-oriented web development into mainstream So we’ll be using our interface through which our client will be interacting using angular 2 So at last let us talk about no dot JS So no dot J’s is a server-side JavaScript execution environment built on Google Chrome’s V8 JavaScript engine It follows an event-driven architecture where there is a single thread mechanism to process your events and even can be a clicking a button or filling a form in our website So all these events are then sent back to your server for processing and then the server after the processing is done generate the response The processing of these events are done Asynchronously that is if we have multiple events in our event queue our node Server doesn’t wait for a particular event to complete so it can process or serve multiple requests at the same time So these very whole event-driven architecture makes our node.js server highly optimized and scalable So I hope guys you have a clear overview of All the technologies that will be using in our mean Stacker So now let us talk about credit operation prayer is an acronym that stands for create read update and delete So basically these four operations will be performed

on our database So we will be using post method for inserting new data into a database will be using get for retrieving data from a database will be using put for modifying or updating any data that is there in our database and at last we’ll be using delete method for deleting resources or deleting any data that is there in our database So we will be implementing all of these for functionalities or operations using restful apis that will be learning while building our whole application So guys let us start with building our application before that We need to install manga TV, and no dot JS locally into our system So let us go ahead and do that So for installing know dot JS you need to visit This website called node.js dot o– r– g– go to the download section then according to your operating system choose the correct installer and download it So I’m going to go ahead with Windows So basically installing no dot years or longer Even your system is pretty easy You just have to go through setup Click a bunch of next button and specify your location where you want to install it or go with the default and that’s it So my download is complete I’m installer I have already downloaded and install node or chairs in my system So I’m not gonna install it but I’m gonna show you the procedure or way to do it It’s pretty easy And then we’re gonna stall mongodb I think I have also installed a mongodb in my system, but I’ll tell you how to do that So specify your location here then click on next next and then finally install So once your installation is completed click the Finish button and open the node dot JS command prompt So basically we will be using this command prompt No dot S. Command prompt to build our entire project So let’s check out the node version Then you can go ahead and check out the npm version Npm stands for node package manager, which is there for managing your dependencies and their versions So whatever dependencies you need to run your application or for your project, even I use NTM to manage that now let us install mongodb into our system So you go to mongodb.com You click on download then again as per your operating system choose the correct installer I’m going to go ahead with this very version and I’m going to download the MSI It’s a big file 148 m b so I have already downloaded it So I’m not gonna go ahead with the download You have to run this setup Click on next I have Mama TV already installed in my system So I’m gonna remove it first then you can show you the installation I could have done that with no dot J’s as well But it’s pretty same like you just have to click bunch of next have to specify your path And that’s it installed it then go next agree next I want complete install You can go ahead with the custom options as well where you can specify the location and other configurations, but I’m going to go ahead with the default mode or the complete installation and the mongodb files will be installed in my program files if you’re using Windows and you can go ahead and check out that so I’m going to show you that once the installation has been completed Yeah, so click on finish Your father will be installed by default in your program files If you’re using Windows go to Mongo DB server 3.4 then so this is where you’re all the files reside in your system Now for running your mongodb service, for example, whenever you are creating a mean app, you need to run the mongodb service so that you can make a connection to it and performed it operations So for that what you can do is go to dogs in mongodb.com because you will get the whole procedure or step by step process to do that Welcome 1tb Soho installation manual Community Edition windows We have already computed this very step that is install mongodb Community Edition Now, we need to run this mongodb service So for that we need to create two directories called as data and one subdirectory steamy So let’s go ahead and do that will open command prompt Let me delete the data file because I had a mongodb already installed in my system

I’m gonna delete it So yeah, DB has been created now the next step is to tell mongodb that this is the part where my database data or data for the database will be deciding I’m going to copy this command and I’m gonna paste it here I’m going to change my path which is see / data, that’s it So my connection has been started My service has been started and sweating poor connections on port 27 0 17, which is the default port for mongodb to connect if in case like if you go ahead with this very step and it doesn’t work out and you have to execute the Mongo d dot exe, which is the third step you can do that as well So we have mongodb ID and no dot JS ready So now we need to create our project So I’m going to go ahead and start building my application for that I’m going to go to my project directory which is in 3 Drive Yeah, so I’m going to make a folder where I’ll be putting all my source code Server side as well as my client side So let’s name it as the name of our application which is contact list Now I’m going to use npm and it command to build my project as well as create package dot Json thyroid which will contain all my dependencies and their version So you’ll go ahead and rip and p.m And it will ask you your project name Version description of the project that you are building simple mean application entry point is the file from with where your server side exhibition will start So let’s name it as AB dot JS You can go ahead with index dot J’s as well I always use app dot j So it’s up to you to name Whatever you want to 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 already opened in my vs code So I’m gonna use vs code as an editor You can use any editor of your choice So this is your package.json file which contains all the information regarding projects We haven’t installed any dependencies yet That’s why you’re not seeing any dependencies or anything like that We’re going to go ahead and do that So for that I’m going to use the command + V app installed So for installing any dependency or module you use npm install command followed by the name of that particular module, which is Express Then you can use – that’s a flag in that way whatever dependencies or modules You’re installing It will be written to your packages on fire So I haven’t told my Express and you can see over here in the dependencies section We have Express of version 4.1 5.2 and oh, so this is how you do things So now if you want to share your project with your friend or colleague, so you don’t need to send the entire project along with the dependencies So you just need to send them the source code and this package for this one file so that they can download the dependencies or install dependencies and start working with your project You can also install multiple dependencies or modules or at the same time What I mean to say is using a single command install go ahead with Mongoose and then we need cars we need body parts So Mongoose is an object document mapper for using mongodb and body parts are used for forcing the incoming Json data and course is power because we will be having our server code running at Port 3000 Whereas our client side code run on 4,200 4,200 So that’s why we need

to enable course so that we don’t get any error, which is not allowed by default As I told earlier we have our entry point file called AB dot J’s from where our server side execution is start So you start server side code by 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 import the modules or dependencies that we need to 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 one of the code module So you don’t need to install it separately Now now for making a express application now using Express we need to use express method and assign it to some variable So we’ll assign it to app Okay Now we need to define a port number Now we need to bind our server with this port so These are callback you can go ahead and I’m using Arrow function You can use function as well the JavaScript function After a successful connection, we need we want to say that server started at home Concatenate the port number Now what we need to do is we need to add our out so that if we go to localhost 3000 then way to specify our server what it needs to render for that home page route Testing server because we’re gonna hit on create all our doubts in a separate file called route dot J’s or something like that so that all our hours are in particular file, and it’s not in our app dot J’s file For creating route you need to use get method For example, like this is how I am defining a route and the route is for my homepage That’s why I’m using / the next argument is request response Stockton now, let’s go ahead and run our server For that you need to execute note space your entry point filename So our server has been started go ahead and check that So we have a full bar So everything is running fine now So remember I told you that I want all my routes to be in a particular folder So I’m going to create a folder called route We can simply put it in a file because it’s a simple application So we do that or we can create a folder as well your outdoor chair Now we want to use this very particular folder So what I’m gonna do is I’m gonna

Define this particular file with 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 that for a particular file So for that, for example, I want it to be / API So all the routes with / API slash ABC let’s say will be directed to my route dot J’s file and where I have defined what to do with that particular route called For example, I’m having / API slash at contact for adding the contact So whenever a client needs to add contact it will make a power to this very API slash API slash add contact and I would be defining my Logic for adding contact to my database over there in my route dot J’s file beside that very particular route That is / API slash add contact So that’s how things work Right, so we need Find out so that we can make call to it and we can perform our data operation So for now this is the reason that we are making the roads So it’s done now we need to add our middleware so that we can parse our data and 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 parse the Json data? sad and we need to do one more thing We want all our static files to be in a particular folder So for that I’m going to create a folder called Public and inside that I’m gonna create my file index dot HTML, which will be rendered by our front-end application so static files join Basically, I’m defining the path here You can directly go and specify the path of this folder public folder or can use underscore underscore dir name which will point to your current directory and you want to join it with public So guys we are done here now Let’s create some route So we need to bring Express You can use cost or wear whatever you want But in general we use cost because the value of Express is not going to change I mean the value of variable Express is not going to change in our code Same with router we’re gonna use express routers I told you that we’ll be adding routes here So whatever call I’m making two / API, which is there Let me show you / API slash contact It will be directed to this very particular dot get method The quest is bouncing next Now this is my / contacts folder So And I’m gonna use this very route for retrieving the contact list Okay

So every time you make changes to your server side code you need to restart your server or what you can do You can go ahead and install node mode, which will continuously watch your source code files for any changes Whenever there is 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 creating route, you need to export your router as well So basically what it does it goes to your package dot Json file and where it finds the node one that our main entry point file is uploaded tears and finally start the server using this very particular file So if you see over here the same command that we use to execute for starting a server node app dot JS has been used by note mode Now if I go ahead with / API slash contacts See we can have the data So now what we’re gonna do you’re gonna connect to our database and then here we want to write our Logic for retrieving data from a database and that’s how we will send data to our client-side application, which will make a call to this very particular API and it ripped the list of contact We need few methods for example for reading data We need a method to add data at contact For that we’ll be using post method Then we need a method for deleting contact pretty similar the syntax or the signature of these method So how I’m going to delete a particular contact is by referring to that very particular contact using its ID So today know what we need We need to create schema for our contact that will be inserted into our database and we need to make connection to our database So we’re going to make a folder called models inside that we need a file contacts got tears So this very particular file will be having all our schema or contact schema So that is the reason I am making this file So we need to bring in Mongoose for since we are going to make schema for a mongodb So in to bring mom goes through which will be talking to mongodb or through that will be using our mongodb database contact schema Mongoose schema

So this is our function and I’m going to pass the schema that I’m going to use for my contact So I’m going to go ahead with first name and last name Drive strength but crew then 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 go ahead with true Last field will be for contact number or phone number So let’s keep it string only Now we need to export this very schema So it’s done Now what we need is we need to create connection or way to connect to our mango TV So we’re going to go ahead and do that So we have Mongoose already here So now for connection will be using Mongoose dot connect function So let’s go ahead and do that connect to Mongo DB Mongoose dot connect then we need to pass the URL along with port number through which we gonna connect to our mongodb So it is mongo DB Local Host two seven zero one seven, so we’re going to go ahead with our default port Now on successful connection we need to display a message that yeah, the connection has been established successfully on connection we need to say mongoose connection dot on connected then 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 error while doing the connection or while establishing the connection if you are we need to know that what is the error that 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 successful connection or not yet

So we have been connected to our database at Port to 7017 Now, what we need to do is create apis for retrieving contacts are adding contact or database or deleting contact from our database So you’re going to do that So first we need to bring the schema the contact schema that we have created in our contacts dot JS file Now for retrieving contact we’re going to use find method or function Then we’re going to pass a callback So this is one other way to define a callback or function the JavaScript way Yes torches on contact So after achieving the contact all the contact or the contact list will be saved in our contacts variable which we are sending or responding back to our client in Json format No, we need our post So first what we need, we need to create a new contact which will be adding to our database So I’m going to make an object in contact Let’s go to new contact It will be of type contact name I won my first name to be from 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 very new contact into our database So for that we’re going to use new contact dot safe and we need a call back Let’s go ahead with the arrow function if error Way to send all we want to send Let’s search fail to add contact else contact added successful That’s it guys Now for delete what I’m trying to show you is that if you are inserting any data into your database, what are mongodb does it creates an ID for each document or each contact? So using that for a particular ID, we gonna refer to that particular contract which we want to delete and will perform art-lete operation So that’s how we want to do things So from client side will be receiving that very particular request for deleting a particular contact then using that very ID, we’re gonna issue or 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 method has been added to our layout file successfully So we have 3 methods now later on we will also add our update method So it’s done We have no error or no issues now for checking our apis we gonna use Postman which is a Chrome extension, which you can add to your web browser Chrome browser and go ahead and check your apis You want to go with post nine crew? Here you will get an option for adding it to your browser or to your Chrome Now first of all, we need to insert some data so that we can fetch it So, you know what with our post method then we want our header as content type to be Json Then we need to send draw later So first name Bruce last name whale then phone number Okay, I’m gonna go ahead with string But yeah, let’s add some random number here Now We have to enter the URL or URL of the API that you want to make the call to so that it can be directed to that particular post method So we’re going to go ahead with Local Host 3000 / API slash contact so contact added successfully Let’s add some more contact Peter Now let us retrieve the contacts that we have already added into our database For that we’ll be using API slash contact So we have these two contact So that’s what I was talking about You can see over here We haven’t added any ID field while inserting our contact So this is automatically generated by mongodb And this is what we are referring to in our delete method So what we’re going to do is copy this very particular ID No, we’re gonna issue a delete command So now our method will fetch this very particular ID from our URL and it will refer to that very particular document for that very particular contact and deleted so the contact has been deleted Now let’s check that We are having issues here so we can see that our Peter Parker has been deleted So this is how you can check your apis Now what we’re going to do We’re going to make our client application and where we will be making call to our apis for performing various kind of data operations that we have to find in our server file or server side code So that’s it guys are server-side code is complete Now, we’re gonna go ahead with a client-side application using angular 2 and we’ll be creating view templates and all to show a contact list will add buttons for delete for adding contact and all that Let’s go ahead and do that So for that I will be using angular CLI or command line interface that will be using to build our entire client side project So go ahead and open a new instance of node Js e MD then go to the project directory So now we need to install angular CLI for

that you’ll be using again npm install add the rate angular / CLA So basically angular CLI will help you to provide all the boilerplate or all the files which is necessary to run your client side angular application It will also provide you the core node modules or core modules, which we are going to use in our angular app Yeah, so npm install has completed and our angular CLI has been stalled Now We’re gonna go ahead with creating a angular project So for that you will use NG new and the folder name where your angular app will be deciding so ingenue client I’m gonna name this kind because it’s a client-side application So as I said, it will provide your boiler plates or all the files So these are the files that will be created using your ingenue command So you’ll have a basic component called as AB dot component and you will have a basic model I’ve got module where you will be specifying all the modules which you’re going to use across the application as well as your components and services Then we’ll have index dot HTML which is the file that will be rendered in the first place to your web browser So which we have specified in our public folder then we have packages own There are other files as well If you see over here, we have protractor for testing and for linking we have t es Lindo Json and although configuration for our angular CLI is in angular – CLI dot Json so couple others are there so which is not required for now, like don’t need to know all of that So our project has been created successfully now, let’s go inside that very particular folder No what we need we need to create components Okay, let me just give you a quick walkthrough So inside our client folder, we have Source then app These are component our basic component called as AB dot component So if you look at index dot HTML file, which I told you it’s gonna render in the first place So here in body We have app – truth So this is a selector or tag which will load our app dot component for their so basically we will have AB dot component or app component class to be rendered in the first place So here you can see we have AB – route as selector So for building an angular 2 application we use typescript as language of which is based on object-oriented features So here you can see that it’s a typescript class called as app component Now, we have something called as decorator at the red component decorator which tells angular that this very class is Component and we have template URL over here which specify the template for our component which is over here And then we have CSS for styling So let’s run this very particular application So npm start is the command or you can go ahead with NG serve now you go ahead and What 200 you are having that for a particular thing as app works? So basically first our index dot HTML file is rendered which is calling are approved or app component So if you check out the app dot component template to in this template, we have what we call as interpolation or one-way data binding so we are winding this value as app works so left Let’s make it welcome to El Dorado It has been changed So like for in case of server-side applications while we were creating the express app, we had to run server every time whenever there is a change

and for that we use node more similarly in our angular side application There’s a difference is that we don’t need to restart our application or it continuously watches for any changes that we make in our source code and it re-enters or restart the whole application each time so you can go ahead and check that So if you see over here, then we had a change over here So it recompile it and start the whole application All these TS files are converted to JavaScript files or transferring to JavaScript file And then our render now we need a basic component called as a contact for listing our contact as well as there will be a form of over there which will have three for adding contact then we’ll have button for deleting contact So Let’s go ahead and 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 generating component or services Name of our component will be contact we need a service to so basically it’s considered to be a good practice to separate your business logic or your data retrieving or data operation logic in a separate file, which we call as a service Then what we do is we inject those Services into a component over where it is necessary So as to use those services No, you can see a warning here that service is generated but not provided So basically whenever you have to use or in whichever component, you have to use the service you have to provide it in your at the rate component accurate So there will be a field here called as providers and we will add the service that we will be dating now So we have contact or service dot DS or contact service class where we’ll be writing our business logic or our data retrieving or write operation logic Then we’ll have contacts component where we’ll be creating our template and all the logic behind up So we’ll start with creating our service so that we can retrieve the data first then we’ll start with creating these contacts dot compound No, one more thing we need is we need a schema for our contact So let us go ahead and make a file called as contact or chairs or Ts that will transfer into jai’s so you do that contact dot DS? now we’ll have a class called contact which will have four fields I-80 we have tried string Then we need first name print last name String and phone optional field now We need to import our HTTP model for all getting all HTTP methods for retrieving data or for sending data or in other words contacts so import http We need headers as well from angular http then we need our contact class to be imported here so that we can use the schema boat contact from Then we need reactive just operators basically will be using nap operator So it’s done now We need to use our HTTP module so for that Done Now, let’s create the methods for retrieving contacts Then we will add contacts and we will delete contacts so we will have grieving contact So which is get contacts

And I want to return All the contact call the contacts or cut the contact list, which I will be getting through while I’m calling to my API Then the API URL you can see over here This is the signature or syntax of your get method or signature You can call like we will have first argument as a URL string so we’ll have as HTTP / localhost / 3,000 total number then we’ll have a pi then we have contacts then you want to map it to? Json format So we have our get contact method radio here Now we need add contact method Add contact Which will be taking new contact as an argument We are now up and content type in our header, which is So now I want to return the response and I want to make a call to my add contact API, which is / API slash contact I’m going to copy this very same thing and then I’m going to pass the new contact Then the headers Will map it response as Json now either delete method Tim I told you that for deleting a contact will be using ID so as to our effort that’s very particular contact in our database, so we need ideas are parameter Then I’m going to append or concatenate the ID So we have our service ready now, we will be using all of this method or injecting these Services into our component and then we want to use all of his method to retrieve data and finally do something on it For example, if you want to show the contact list, so we’ll do that then for adding contact will use this add contact method So that’s how we’re doing things So let’s go ahead and create our component So we’ll go to our contacts dot component TS Private contact service

Yeah, but we need to import it first So we have contact service from dot slash contact Yeah, so now we need our contact class for schema That’s it Now We’re going to initialize our contact service or we want an instance of that for you contact service class so that we can use the method that we have defined there So for that what we will do will We’ll pass the argument as private contact service of type contact service class So this very process is called dependency injection or that’s how we inject our services into our compound and second thing is you need to provide your service So as to use it providers now let us go ahead and retrieve data So we’ll be quoting are retrieving data logic inside NG on init method which will be initiated Once your component is being loaded into your browser So every time you load your component, it will automatically call this very particular method to retrieve all the data So we’ll be having this dot contact service and we want to use get contact method so you can see over here that we have 3 methods add contact list contact and get contacts We’re going to use get contacts and since it will be turning an observable in to subscribe that we want our contacts to be saved as restore contact now it’s showing an error because I haven’t made any variable for contact So let’s go ahead and do that So it will be one tax type contact and it will be an error Yeah, so we have done that Let’s get some more variable that will be needing it wrong We need one then we need first name texting Then last name? then phone number that’s it guys Remember, I told you that the bootstrap component is AB got component So we need to specify in our app dot component that this particular component should be loaded So we’ll go to template and we’re going to use app – contacts Because if you go and look at the selector, it’s app – contact so contacts works So guys, we have retrieved the data here Now, let’s get our template so that we can display this very particular data So I’m going to go ahead with my contacts dot component dot HTML and so before doing this we need to refer to our bootstrap style sheet so that we can incorporate it into our template So we’ll go ahead with boots watch then these are the size that’s available which you can use So I’ll go ahead with something super hero So you can go ahead and click the download and copy this very thing and put it 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 need to write stylesheet And will you move this very particular field

and we’ll copy it here 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 want to iterate over our list So for that we will be using something called as n G4 which is a structural directive So the strick and G electric contact contacts so we’ll be iterating over contacts using contact variable So each contact in our contacts array will be retrieved in this very particular variable and that variable we will be displaying as a list so Let’s go ahead and do that So we need our class md3 again until closing div tag So now again, we will be using that very interpolation or one big data binding To display our contact DOT First name then we need similar columns for our last name and phone number So it’s done So let’s check out our yeah, so we can see over here that our list is being generated We’ll put some more style so that it will look good in the end So what we’ll do right now, it’s will add a delete button using that we can delete any contact So we’ll go ahead and do that So for that I’ll be copying this very thing again, and I need my foot type Be a button Even click which we’ll call a 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 very particular contact using ID as I told you earlier, so Eddie so the value should be the we’ll be using a class Call us button Danger So it’s done so we have this very particular thing over here Now, what we need is will add few breaks so that we are iterating over the list So yeah, we’ll do it later on this stylings So now we’ll add our delete method over here which will be using and we also need something called as adding contacts add method or contact method So let’s go ahead with our delete first We need delete contact Let’s assign ID as any type of type any now so basically we’ll be calling our service again So this dot yes contact service dot delete contact and then we’ll passing the ID and since it returns an observable We need to subscribe that very particular observable So we’ll go ahead and do that Now what we need to do is even if we have polluted the data or the contact from our back inside of my database I need to remove it from my contact at as well This very particular contact where all the contact has been safe So we’ll go ahead and do that if the delete operation was successful then straight over apps dot length then okay, so I’m having an error

because I haven’t defined the variable contact so contact skull to this dot contacts So it’s done Now we need to increment our iterator so if contact I dot underscore ID is equal to the idea that has been provided to my method Then I want to remove it splice iPhone so our delete contact is done No, we need to add our new method for adding contact So delete functionality is done So let’s add our add contact method so that we can add more contact and delete them and see if everything’s working fine or not So what that I’ll be using that contact and This will be creating new contact Here I need first name to beat the start First name then I need last name to bring this dot last name and I need phone to be this dot pool Now I need to provide this particular contact that I have created to my service or in other words I need to call the method that is defined in our service So for that will be going ahead with a contact service Doc add contact and will you pausing this particular variable? We’re going to subscribe it Just start contact dot push So we are pushing the new contact into our array We are having here, okay So it’s not able to find any not finding the contact and I don’t know why we are having this error Okay, let’s check it out So yeah So it’s done So this is our add contact method now We need to call it from our template So we’re going to modify our template so that we can add a form on top of our class and which will have three Fields 14 name one for last name and then 414 phone and then I submit mutton for adding the contact finally So far form we need to use form tag or submit event And then we’ll add add contact So this is the method that we’re going to call when the form has been submitted Close the tag form tag now We need three field guys So the first one will be of power first name So let’s go ahead and do that So for that will be using the class equal to the classical to form group now we need to close this particular tag, and I want my label as first name Yeah, now I need input type equal to text Then we gonna use something called as NG model for two-way data binding So whatever changes that we’re going to make there should be reflected in our list as well Where will be showing the contact list So we’re gonna use that and G model goes to name equals 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 name and then for our phone number, so we’ll treat it as last name and then we need to write it as last name here Finally we need for phone number So phone number so you want to put this value to our phone variable? Yeah, everything is done here Now we can add something goal is required So if you are not putting that very or feeling that very feel then it will pop up a message or they will be a message popped up stating that you need to fill that very particular form or particular field so we can use this require here now We need one button also for our submit button for submitting our form Now on top of that we need to add some heading stating that this is the section for our add contacts Oh It’s done Now We have everything here All we need is a horizontal line or too low Yeah, so basically these are at contact form using which we can add our contact and these are delete button everything is there let’s try my name you’re having a tear but yeah, it’s there and the second thing is that if you are seeing this that every time we are adding a data we need to reload it is happening because our this very method for retrieving the contacts So basically whenever you are retrieving the contact and displaying it at that particular time, like your browser never allows you to block your UI, so that is what is happening right now So what we can do to fix it is we can copy this very particular thing over here and we’re going to put it inside our a contact To be called just after we have pushed the contact So now if we go ahead and Do that then Yeah, you can see where okay, we should add some BR tag so that it looks good or present table over here So we’re going to do that here So this is so far now Let’s check the our delete button It’s working as well So our whole application is working Let me give you a quick walkthrough or a quick recap so that we can do fresh all the things that we did for creating this very particular mean application So what we did we start with our server side coding where we had our AB dot J’s or entry point file where we imported all the models that we required for application Then we use middleware for applying cores and body parser to parse the Json data and then we put all our routes in a separate file call as rho dot J’s, which is over here Now there we created routes for each grid operation and then we created schema for database for contact Like for example, first name will be like this last name will be this

and phone this No, we have our client side or client folder There we started with creating our component So these are component and then we had a service called as contact service where we have mentioned all the data operation logic and we have injected this way service in pure component that we need to buy use or we want to use so that’s it guys This was the whole angular application and express and Mongo DB So we have created our main app successfully I hope you find this whole session to be informative Hey everyone on behalf of Eddie Rica I’m going to be bringing you a full stack application tutorial now many of you may be familiar with What’s called the mean stack which is mongo DB angularjs Express and node.js we’re going to be doing a couple twists on this very popular stack and introducing graphql, which is a technology from A book that makes it easy to query fields and send data between the server and client and we’re also going to be replacing angular with react and this is called the mern stack So what exactly is the mern stack? Well, it’s the same thing as the mean stack but replacing angular with react So here is what it looks like we’re going to be using react js on the front end for the web application and the middle is going to sit our server which is going to take requests from their web app And this is going to be running node.js with Express And then we’re also going to communicate between the web app and the server using graphql and then in the very back is our database We’re going to store all the data and we’re going to be using mongodb for this you guys may be wondering why might you want to use react curious over something like angular or just JavaScript itself Well, this is a very popular framework right now It is currently what Facebook uses on their very own website and it’s very nice to build applications with it has somewhat of a steeper learning curve I would say in some of the other Frameworks, but once you learn it, you can be very productive and build very high quality production ready web applications, which is very cool and then graph ql is going to help us Optimized and sent really good queries That’s another thing that is used by Facebook as a Facebook technology and then mongodb is just really solid database for no sequel So that means it’s very easy to store different types of data And as our database changes in our application changes, it’s very easy to change our schema or what our data looks like in the database and then Express is very nice to make a server with very fast So that’s our choice here So there’s really four main operations when building an application like this and they’re known as crud So what crud stands for is create read update and delete so we’re going to be using mongodb and Mongoose Mongoose is a library to basically do operations on the mongodb database and node.js and to create we’re going to basically add something to our database We’re going to be using the save command then there’s reading which is viewing objects or viewing data from our database which is fine command and then update which is changing some values in the database using update again, and then finally delete removing data from our database in this is going to be remove so that application that we’re going to be building to try the stack out Ameren stack is a to-do list app So without further Ado, let’s go ahead and get started So there are a few pure prerequisites for this tutorial first off Make sure you have a editor of some sort I’m going to be using visual studio code where I can edit files and then you want to make sure you have a terminal I’m going to be using the terminal built into Visual Studio code and we’re just going to be doing some things with that So make sure you have both of those and then we’re going to be using mongodb So you’re going to want to install that and the recommended way to install mangu B I’m using a Mac, I would recommend something called Homebrew Homebrew is a package manager makes it really fast really nice to install dependencies If you just copy this URL right here you can paste that into terminal and run it Arie have it so I’m not gonna do that right now, but then you have Homebrew and then with Homebrew I can Brew install Mongo DB and that will just install Mongo DB on my computer

and then to verify that you have mongodb You can just type mongo and you can see here’s the version of my Mongo shell and then you can see whether you connect it to it So the other thing is make sure you do start your Mongo database So I already had mine started So I was able to connect to this these Brew can just do Brew services and then instead of restart We’re going to start to brew services start Mongo DB if you installed this with home brew, the other thing we’re going to need is node.js So again, once you have Homebrew you can do Brew install node, so you See, it’s really nice to just install things with home-brewed makes it super easy And if you type no – be in terminal you should see a value and here’s the version I’m currently on node 9.11 And then with that you should get em p.m Which is node package manager I’m using 5.8 So you just want to verify both of those guns stalled now, if you’re not running on a Mac, you can’t use Homebrew I just recommend going to the official websites for mongodb and node.js and downloading them that way All right So we’re ready to get started We’re going to be starting from a blank directory So I have just an empty folder right here called server I do an LS There’s nothing in there right now and I’m going to start off the project with npm in it, and I’m just going to do – why this accepts all the defaults and just creates a package.json file So we have one file now in our project and this is going to hold basically where our configuration stuff for the project So what dependencies we need mainly So we’re going to start off by adding a dependency called graphql yoga This is a really nice 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 say npm install graphql Yo and you want to make sure and run this command inside these server directory and it’s going to go ahead and install this for us now here is a little quick start that we’re going to use and we’re going to copy the quick start and paste it into a file I’m going to create a new file called index dot JS and paste it in here So let’s go through exactly What all this stuff is doing first line is importing the package we’re going to use the require syntax because we’re just going to use node So here we are importing graphql Yoga, which is that Library here is what’s known as the schema So we’re using graphql So with graphql you have to set up a schema and our schema right now has this thing called a query type Inside of query type we have hello and hello takes one argument the kind of looks like a function This argument is named name is the name of the argument and then string is the data type for it And then this is the return type which is a string as well the exclamation mark at the end means this is a string that is mandatory You have to pass it in and then here are what known as the resolvers for this So the resolvers you’ll notice the kind of the shape of it matches So query than hello query then hello and here there’s argument called name so you can see we’re D structuring this second parameter, which is called just the arguments and we’re going the name and here we’re returning a string and we’re using a string template here So we’re saying hello and if they give us a name we say hello that person’s name or we do just hello world If they didn’t give us a name right and then here we’re specifying the type deaths in the river solvers and we’re going to do server dot start to At the server now, we’re going to get more into what the type deaths in these resolvers are but 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 JS to start it up And now we have a graph ql server running on Locos 4000 and we’re not using expressed directly But under the hood graphql yoga uses Express So, all right, let’s go to localhost 4000 and see what’s going on there So we’ll get this thing that says loading graphql playground I’ve been here before so I have some junk just going to clear that off And so if I click on schema I can see on the right What thing is I can run or what things I can do here This is a graph ql playground and what this is is you can run your queries & queries are read So we talked about crud operations before queries are Or reading things or finding or viewing the data you have stored so last we want to query this hello thing So, how would we do that? Well, we would do curly braces like that And then we say hello and I can either pass an argument or I don’t have to pass an argument so we can prettify this So if I don’t pass an argument and I hit run I get data hello and then hello world

So by default the argument would be null or undefined king passed in and then we saw that that would go to world, but here I can specify an argument if I want to and I could say been so hello Ben Let me run that and we can see it changes So you can notice this argument we can change and we get different results out of it I can just do a random string if I want and I get that back So with graphql we can pass different things in and get different results that kind of like a function call and we’re just getting a string back And you’ll notice the shape is very similar to the shape over here, which is nice That’s how graphql works So we have this outer data and then after that matches so hello is the name of the query so that’s why those two match up and then here’s the string that that equals and we’re going to get more complicated as we add to dues and whatnot All right So this is the basics of how the graph ql is working There’s those other things which are called mutations So there’s two main things in graphql queries and mutations queries are for looking at the data, which I already said and that’s what we ran right here We could prefix this with the word query to be more explicit Those are doing the same things The other thing is called mutations These are when we add data we update data or we delete data we’re going to be running mutations and we’ll get into those very shortly When we add our Mongo DB connection So our service good we’re going to move on to connecting to mongodb and To do this we’re going to be using something called Mongoose So first off we need to install this So I’m going to come over here to terminal stop My server do npm install Mongoose So Mongoose is going to allow us to connect to our mongodb database and then run queries create data or whatnot and we’re just going to follow the getting started So here is how we make a connection So I’m just going to add this at the very top and it changes the cost So I am first grabbing this from the package or importing it So here I have the Mongoose object and I’m first connecting to the database So I’m at local host and I’m going to connect to the test and I’m just going to call this test 5 because I don’t know if I already have a test database or not I’d like to connect to a fresh database So this is the name of your database at the very end here and then after that we want to do is first connect to the database and then start the server so it doesn’t immediately connect when we run this It actually runs in the background and we can use a callback so DB dot once and wait for it to open or it get connected now, we don’t they to get this DB variable They did mongoose Connection and then inside of that they’re going to pass the server dot start So once we connect to the Mongo DB database we then start our graphql server Alright So next thing we want to do is create a schema, which is then going to be our basically our database model or what we’re going to store in the database So we’re going to grab this Mongoose model and we’re going to change it up a little bit So they are doing a kitten for us we are going to do a to do so the model is going to be to do and we’re going to have a few things So the first is text and here we passed we put on a pass the data type So the text is going to be a string so we say string and then we want to have a complete which is going to be not a string but a Boolean Okay, so we have two Fields text and complete on this to do object so we can save this in our database if we want to and we can pass to fields in the text And whether the to do is complete or not So I’m first going to add a type called mutation and I’m going to say create to do and I’m going to have two arguments I want to get passed in the text and that’s actually it by default I want to say complete is false because when you first created to do it is not complete So text here is going to be a string and I’m going to say you have to pass in a parameter and to force them to pass an argument You do the the bang sign there And then what we’re going to do is return a to do instead of just like a string or a Boolean we’re going to return a type called to do so, I can create this type to do and it’s going to have text which is a Which is required and complete which is a Boolean which are required So T required Fields text and complete and inner mutation We’re going to create a to-do and assuming you gave us a good text will pass you back a to do the other field This is going to have and this is a field

at Mongo ads by default which is an ID and there’s a special type for this and graphql called ID So that’s required as well So we don’t have to pass the ID here it’s going to be automatically generated for us So now we can try creating this to do so, I’m going to say mutation and create to do and we don’t care about the first argument to this graph ql function So these are called resolver functions right here the first thing layer Pastor the parent which you don’t have to worry about for this the second argument is the argument So for this we expect an argument called text, so I’m going to say 10 Steer and from this what we’re going to do and I’m going to make this an async function We’re going to first create a to do some this a const to do is equal to Nu to do and here I pass in the text and complete so pass in text and complete and by default I’m going to say complete is false that the to do is not complete and then we’re going to return the to do but before we return it, we have to save it to the database with DOT save and Dot save returns a promise So we want to wait that and we’ll wait this to do from being saved to the database So we’re creating an instance of it saving it to the database and then returning it so I can start my server and we can see if this code works and if it does what we should do is be able to create a to do in our database So we’re going to say node index such a s alright so it started up so it looks like it was able to connect to the Mongo DB instance Okay and bring the playground over Here and I’m going to say mutation So for queries, we could say the word query there or leave it off for mutations We have to say the word mutation here and then I’m going to say create and we can see it in our schema over here whether it’s there or not and it’s not that usually just means you have to refresh whenever we restart the server So now under mutations we can see the create to do and this is kind of like our own documentation that was automatically generated for us So that’s really cool and nice feature of graphql So create to do we now have text so create to do text and I’m going to say my first item now you can see it’s kind of mad at us But this is the exact same thing that we did with the hello Right? Well, it expects a little bit different return type to do which is an object So we have to actually specify 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 get all 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 get a different ID there Looks like the bees incrementing at the end and here you’ll see what the power of graphql is If I only want a single field back, so maybe I only care about the ID I only have to select the ID here and I’ll only get the ID back here So I only get one field back or maybe I only care about the name or not the name text so you don’t get extra Fields Back, which is really nice grab kill You just get exactly the data that you want But all right cool We just add a bunch of to do items to our database Let’s go ahead and fetch them or read them or query them So to do this, we’re going to add a query we first update the schema and then you add the implementation of how the data is getting fish So here I want to get all the to do so I’m going to call it to do And it just returns an array of to dues now to return an array you do brackets like that So to do so, this means we return an array of to do of the type to do so then in my query over here I’m going to say to deuce and I don’t really care about any arguments because I’m just returning all of them I’m just going to say to do dot find and this will find all the sidhu’s and 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 C restart the server and now we can head back over to our application and refresh we should now have a new query and we can see right here called to deuce and we should be able to see all the different to dues that we created earlier So miss a to dues and I don’t need to pass it any arguments, but I do need to select which attributes that I want to get back So ID text and then complete So if I run this I can see all the different items that we created earlier I give them all the same name know So that’s why it looks like this if we want to we could create a new one so mutation

Create to do and I could give it a different text like item to for example, and maybe I only want to see the ID back And now if I clearly that again, you can see at the very bottom are new item item to so perfect And again, we don’t have to query all the fields For example, I could just do ID and text and then complete would be removed from all these items just like that Alright, so that’s perfect We now have two of the crud operations done creating to-do items reading to-do items with this query right here The next thing we want to do is updating an item So the way we’re going to do that is we’re going to create a new mutation called update to do This will have two arguments the ID and this is what we’ll use to know what to do to update and then also complete and this is going to be a Boolean we could also specify the text but we don’t really need to update the text at least in this application Just whether this to do has been completed or not And then we’re going to return a Boolean and this is going to be true or false whether we were able to update the to do so now we’re going to add the implementation for this update to do and a sink and this is going to have those two arguments ID and complete and here we’re going to do to do dot find by ID and update and here we’re going to specify the ID of the first argument and the second we satisfy what changed So the thing that changed is complete and we’re going to pass that in and this is the new value for what complete In this returns back, I believe I guess a document query is looks like what it comes back I was thinking this might be a promise as well that we might have to await it will see if this works I think it should and then lastly if that works We just return true So if this doesn’t work, we’ll get an error or something and that will be thrown back and that’s fine So let’s go back over and see this in action and I make sure to restart the server So anytime throughout this if you don’t see something we’re looking right when you cut over here Just remember to refresh and also restart your server So we see in our mutations down update to do you can see the two arguments right here and we expect bullying back So why don’t we change this one right here? So I’m going to copy that ID I’m going to say mutation and I’m going to say update to Du by D is going to be that string that I copied and It’s going to be true and we can run that and we get true back meaning it worked and now I can query all the to dues so we can go back And I can grab it and we need to grab complete and this 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 thing we want to do is delete it So pretty much the same way we did update to do we’re going to do remove to do and here we don’t need to know whether it needs to be complete or not So we can just remove that part and have only one argument which ID that we need to remove and then a Boolean true or false whether the operation was successful so we can copy this I’m going to do remove to do we get rid of that argument and then here we’re going to say find by ID But now it’s going to be removed And now we don’t need this second argument We just need to pass in the ID So I’m going to restart the server and we’re going to try this one last time the last operation that we need and let’s say I want to delete this item right here That is so we see a remove to do they’re perfect And the other thing is you can create tabs So I’m going to go ahead and pop tab open here That way we can do this in a separate Tab and not have to redo this So remove to do ID pass that ID in we get true, which means it should be gone So now when I re run this query here, we should not see this first one right there and sure enough it is gone So delete also works So that’s perfect We have all our credit operations that we want to do and we’re done with our server now really what we want to do is create a client or a web app using react that allows us to do these so we can view our to Deuce we can click on it to cross it all out we can add to dues or we can just straight-up delete them if we’re no longer need So let’s get into doing that So I’m going to keep this server running and open up a new tab

And what I’m going to do is I’m going to go to a different folder and I want to create a folder for my react application Now we’re going to be using something called create react app So this is a CLI tool and you can download it using npm So mpm install – gee create react app If you go ahead and run that they’ll download it for you And then what you can do is do create react app and then the name that you want, so I’m going to call mine client now I’ve already run this and when you run this you’re going to get a folder and I can just do LS right here a folder called client or whatever You named it and it’s going to download this this operation also takes a little bit of time because it’s going to download all the dependencies and whatnot This is a boilerplate for creating a react applications that If you set up really nicely so I have it open right here and we can check out what’s going on here We can look at package.json We have dependencies react and we can see we have some couple scripts that we’re going to be using so just right off the bat if we wanted to I could CD into my folder and Run npm start and what that will do is it will run the scripts start command which runs this thing right here And what that does is it starts to my server and this is a different server So this is a development server and this is just going to be allow you to see your react application as you develop it So here’s the basically the hello world and we can go in and change it So if you go to Source should see app dot JS and you should see some stuff So instead of Welcome to react we could say welcome to graphql save this and what’s going to happen is it’s going to refresh and we see in our browser welcome to graphql So it’s kind of cool So as we do this it’s going to just Automatically refresh as we’re typing so already start adding some stuff to our application now, I guess I should go over the structure real quick So the important parts are the source This is where all our JavaScript code is going and we’re all the react there’s a folder called public which you can see has HTML in it And this HTML file is what our JavaScript or react application runs in or gets run plaid to if you will so here we can see this div root This is where our entire react application is going to be put so an index dot JS when I say react Dom render app, our application is being rendered in the element which is root 2 which we just saw and if we look at what act out Jas is we can see this is what’s getting rendered So when I changed welcome to graphql, that’s why we saw a change over there and you can see this is just kind of similar to HTML This is called jsx this allows He to mix pretty much JavaScript with HTML and we’ll see more of this when we actually do some more coding with this but we can go ahead and delete some of these extra files because we don’t need them first off app DOT test We don’t need we don’t need app dot CSS We don’t need index dot CSS and we don’t need logo to SVG So those are just some extra files We don’t need we can clear out all this code right here and simplify it a little bit we can just say div hello and get rid of these things at the top things at the top or just import statements using a fancier JavaScript syntax, and we just need to import react and index such as you can just remove the index that CSS So if we come back over here, which should now be blank just hello and we can start adding our code So what we want to do is to run the same queries and whatnot that we ran and graphql playground So for example, I would like to render these two dues and my react application And to do that I want to run this query and to run graphql queries from react into server We’re going to be using something called Apollo So Apollo graphql allows us to this It’s very easy to get started We’re going to be downloading a few things here to help us out So Apollo boost, which is the library They created react Apollo graphql tag and graphql Here’s some little descriptions about what each one does but basically graphql graphical tag or for parsing the query So basically what we write here parses this into an object that basically they can understand and then react Paulo is the bindings to react gives you some react components and we’ll see that and then Apollo boost is for actually just setting up and making the queries So we’re going to copy this in p.m Statement and I’m going to Ctrl C the server that started and add this in and the first thing that we need to do is create what’s called a Apollo client I’m going to copy this and we’re going to add that to our index actually getting at to our yeah index dot JS is fine

We could add it to either place But the reason why I want to do it here is because we also need to get a Palo Provider from react Apollo and pass in our client Sao Paulo provider, and this is just going to wrap our whole application And we need to pass in our client So our client is this thing right here that we create and basically the only thing we’re still spying here is the URL to our server So our server is not running at this location It’s running at issue P / Local Host 4000 So it knows where to make requests So it’s now going to send graphql request all to the server which is perfect That’s where server is running and we need to be able to access this client throughout our whole react application in the way we do that is by using react Apollo’s Apollo provider So this wraps our entire app and now we have access to this client and we can make requests throughout our app and we’ll see that so let’s make sure adding that didn’t break anything So I’m gonna do mpm start and we should still see just the word hello and nothing different because this doesn’t actually do anything yet We didn’t tell it what to query always said was this is where we You to make queries I had this client equal new Apollo client before these import statements, you know, make sure that comes afterwards So just like that and cool so refreshes and hello Is there nice now, we can start doing some stuff So an app JS Why don’t we run a query in the query that I want to run is that same one we have here in our playground So what I usually like to 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 is just a string of the query now We added a library to help us parse this called graphql tag So we’re going to import gql from graphql tag, and this is actually going to parse this query right here and the way we do that is gql right there Now, you may be thinking I might have missed type this I meant to do something like this in the past in the function and that is not the case You actually call it just like this we’re gql is right up against it This is a string template calling and it will pass to this function Okay, and it will parse this out Next thing is we need to basically bind it with our component in the way we do that is with higher order component So import graphql from react Apollo and this is coming from the react Paulo package So we say graphql we specify what query we want or what mutation we want in this case I want the to do is query and we wrap our app and now injected into the apps props are some stuff So now when I say this top crops, I have a few things I have data and loading so loading and why don’t we actually I’m just going to console DOT log this so we can take a look at what actually the values are and if we come over here if you just right-click and inspect you can see in the console what these are so Let’s do a before and after so this is export default app So before we actually call this higher or component graphql, you’ll notice your the props just an empty object But now when we add this thing back, we have some stuff in our props that are going to help us out So first you notice we have dot data and inside a data there is loading So loading is true and there’s basically nothing else There’s a bunch of functions we can call but those don’t look how full right on those are three other things which some more complex but once it’s done loading, it’ll say loading false and 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 data that we had over here Right? Well it’s exactly that So what we can do in our code now is we can say kant’s data and we can get loading and to Deuce So this is just D structuring it from the props I’m getting the loading that we saw in the two deuce and I’m saying if it’s loading just return null and if it’s not what I want to do is just to do this dot map and for each to do I want to just render it So I’m going to render a div and I’m just going to display the to do Dot txt and we can come back over here 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 have every single one be unique and this helps for loading purposes with react it’ll load faster and have less conflicts in your list So I’m going to say pass in the to dude ID to make this unique I’m going to say to do I

so this is a unique string that identifies each to do and then that are goes but we can see our items right here And now if I want to I can change one of these items So for example, I could remove a to do so, we have one to do down here called item to I could remove him And if we refresh it now fetches it it’s gone So pretty cool So those are connected to the same database same server all that stuff All right So this is a little teaser a little intro and to Apollo and how we’re going to do our queries But now what I want to do is add some material UI to make this look pretty and then we’re going to continue on with some more mutations and whatnot So we’re going to be adding this package This is material UI from Google and it just makes everything look really nice and it’s a nice utility So we’re going to install go through the installation So we need to install the core of it again Just going to control C and add that and then we need to add some things to our header some links So to Port the Roboto font And that’s when we just go to the public index dot HTML and we can put that right here And the reason this material UI needs this font So we’re just importing the font So it has access to it And then the other thing is we also want to add some SVG icons So I’m going to go ahead and install that package as well All right And the first thing I want to do is render some paper and the reason why I want to render some paper This is a component from Material UI is so I can put a list on that paper So we’re going to come back over here and the nice thing about materialize they have great demo so I can actually just take this and grab what I want from it So we’re going to import paper So to do that we have to import paper from aperture you like or paper and then we can actually render this So I’m going to have an outer div and I want to Center this guy and the way I’m going to Center this is by creating two divs And you can actually add styling to these using the style prop and this is kind of like CSS, but it’s all camel cased I’m going to say display flex and then the style here I’m going to say margin Auto I’m also going to give it a width of 400 So now I’ve created this basically inner div and I’m going to render my paper here and then I’m going to give it an elevation and let’s give an elevation of one So let’s see that paper and action that we just added and once we get this paper the way we like it we’re going to then turn the list that we have here and to it actual material UI list that looks like this and looks more like to do items or check items All right, so I reran the server and we can see it’s nicely centered and it’s on some paper Perfect Let’s go ahead and now add a list So this is the list that I want to add and we’re going to just copy this and I’m actually just going to copy this entire example here and we’re going to take the bits and pieces that I want from that So let’s grab that and we’re going to paste it in I’m just going to paste it in below First thing that I want to do is remove some of these things that I don’t care about So the first three Imports we don’t need but I do need list all this list associate things and I do want the icons So I want to copy those and just move them to the top where my other Imports are and then I basically just want to merge these two I don’t care about the style We’re going to add our own style So when we’re he was adding Styles here, I just want to move their outer div, and I’m going to replace it with my stuff So this is what we added and I want to just add the stuff in there I guess the best way is we’re going to copy these two and we’re just going to go through what this code does and just one second I first want to make sure it renders, okay So we’re going to add these two state is kind of interesting and this is just another function will talk about state in the second We don’t care about the props This is our list and we don’t care about these things either Okay, so we’re going to take our list and plop it down here And they’re going over their mapping

and they’re doing this thing, right? So that’s exact same thing we did here So we want to just replace that map with to deuce and instead of value This is going to be to do and here’s our key I’m just going to call it to to ID We could just pass ID, or we could do it like this since our applications Not too big I’m just going to pass in the ID Now anywhere we see a value we’re gonna have to change this stuff I’m not gonna worry about the class name stuff I’m going to remove that So handle toggle We’re going to pass in our to-do item and then here going to pass in to do I guess this is a separate thing checked I’m going to say to do doc complete So if the to do is complete, I would like to check box to be checked Value I want this to be Line item I think that’s what their rendering You can come back over here Yep line I don’t want this is a text that’s getting rendered The text that I would like to get rendered is to do Dot txt And get rid of that Alright, let’s go ahead and see if this actually shows up Okay, and then we’re going to walk through the code All right So this looks pretty good and I can see my items and nothing happens when I click but we’re going to go over how we can get stuff to happen Okay, so let’s go over the code So starting at the top we have this thing called state So this is where we store information about our application that could change So for example, they are keeping something called checked and this changes So depending on what is checked in the application They’re keeping track of here Now, we don’t really need state So I’m going to go ahead and get rid of it because we’re storing everything and the mongodb is our state if you will and we’re fetching everything with graphql this handle toggle thing This I believe is okay Yes So when we click on a list item for us, what we want to do is actually just mark it off right when Click on this it should be whoops We crash it because we were not supposed to click on things When I click on this we should complete it and we don’t need any more right? It should check off or whatnot So here I’m going to just add a to do basically we’re going to remove all the stuff here is going to be update to do and it’s just going to toggle whether it’s complete or not And this is going to be a to do okay So next bit We can just go down the code right here So we have a list item I don’t know why they have a role of undefined This stuff is probably a specific to material UI and how The Styling looks checkbox disable Ripple I guess that’s when you check to these are some CSS things that you can take on off depending on what you want to look checked This is a value of whether or not the check boxes are checked So for example, if I say true all the checkboxes are going to be checked here They were all false Because all of them to do doc complete are false, but if I were to say update one of them, so let’s say the first one and just remove this update to do ID complete is true All right, so it’s now been updated in the database if I refresh can now see the checkbox checks there So all we need to do is update our database and this stuff changes You can see our primary This text is just going to take whatever the text is for the to do and then this second part here is just this rough whole right side This is how we get this thing on the right now for us We don’t really like this comment icon Really what we want is instead of a comment like an X to delete it right and I’m just going to remove I guess I’m going to remove this aria-label We don’t need it So let’s go ahead and do that replace this icon with a new one So we did all of these and we want next is to pick out an icon So here it is the website for material I that you can actually search and find all the icons that are available in which one you want to pick This is the one I want to do this close right here, which is an X and it’s under navigation So to add this we’re going to scroll to the top and save a comment icon on this a close icon and I’m just going to replace comment with clothes and we’ll see if that works close icon refresh And sure enough icon shows up as an ex

Perfect So now I just want to hook this up So this icon button should have an on click and we’re just going to pass in And here what we’re going to 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 this in a slightly different way I’m just going to create the Lambda like this So it’s a little bit simpler Alright, so I’m going to call this function update To do and this is a function that is going to update the to do and I also want to do remove to do which takes it to do and we’re going to remove to do so, those are two things we need to do So here I made a little Lambda that’s going to call this dot remove to do passing in our to do so, it should remove it whenever that gets clicked and then we every click this we’re going to call this dot update to do and the reason why we want to do the functions like this you may have seen stuff like this And we want to access something called this and we can actually not access this and functions like that unless we do an extra thing called binding but this automatically binds so that’s the reason why I like using a function like this and general I would just recommend writing your functions like this if you add functions, all right, so let’s get into the logic of how update and remove work So I guess let’s do update first So to actually update we come to our playground we have the code right here So I’m going to copy this and I’m going to say update mutation So what I want to do is pass in a variable ID in a variable complete or not in the way you do this with graphql is I’m going to say dollar sign ID and dollar sign complete So these are variables and I have to specify my variables up here So I’m have an ID and specify the type ID is going to be an ID and complete This variable is going to be a Boolean Both of these are mandatory and you need to make sure the types here match the types in your schema So if we come here we expect an ID required in a Boolean required So I need to put those here as well So now I need to inject my app with this mutation Now I could do this in a very ugly Way by doing this and then I could wrap that entire application like so mutation oops, not mutation of it, but our update mutation, but you can see this will slowly grow and get super ugly There’s a function that react Paulo gives us called compose that’s going to help us out So I just leave the whole application accident There we go Welcome back So composed what we’re going to do is have graphql like that So now we pass graphql all our graphql us are all are higher order functions to the compose function which basically squishes them together and then we wrap our app This is just a little bit nicer way to write it They’re equivalent JavaScript though Alright, so now what we can do is we’ve added a new thing to our props and we can give it a name I’m going to call it update to do So now in my update to do function I can say this dot props that update to do in this function is available in my props because I specified it here in the name I specified matches All right So what I need to do to pass this 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 ID and complete so the ID I’m going to say to do dot ID and then complete I’m going to do the opposite so to do dot complete Some of the opposite of the current value of complete So if it is complete right now, I uncomplete it if it hasn’t been completed I now complete it So, yep my server started if I come over here and I click on this It’ll look like it’s not working Right I clicked on every single one of these nothing happened, right you may be oh an error occurred

or something, right? It actually worked if we refresh we’ll see all the items are there and if I click those to refresh I see those items changed So why didn’t update right away, right? Why did we have to refresh the page for this happen? Well Apollo caches all your stuff by default, which is really nice because it saves you request and basically optimizes things but it doesn’t re fetch the data whenever we update it So what we need to do is we need to tell Apollo to update so there is something called update that we can pass our mutation or our function that looks like this and this allows us to update the cache So let’s copy this in and how this works is the store is where the cash so you could think of this is the Apollo cash and right here This is us getting the data And then this is the name of our mutation So the name of this mutation is update to do and this name should match what we have right here, which it does So this data is what I get back from the to do update to do so, this should be true or false Boolean of whether or not it worked So we actually don’t even need this if we were don’t want to because we don’t need the response to update the cache we could just do that So first thing we do is read the data from the cache And the thing that we need to update is this to do is query So I’m going to say to Deuce query so we now have read this into a cache and if we look down here what we were doing we’re saying data to do So here I want to do data dot to deuce And what I want to do is update one of the items So I want to look through the two deuce and update the one that has an ID that matches and change whether it’s complete or not So to do this, what I’m going to do is I’m going to say data to do stop map and I’m going to search for the correct to do and I’m going to say if x that ID matches to dude ID then I want to create a new to do or update the completion value of to do Otherwise, I just want to turn X So basically what this mapping is doing is it’s looping all through all the to dues until it finds the one we needed to update And what we want to do is keep all the same values that to do as so this variable is coming from up here that to do has but change complete equal to to do dot complete So just updating the value of to do So we’re saying data got to do so, we’re updating what this value is looping through we’re changing this one So it now is equal to the opposite of complete and then we’re just writing it back to the store And then we just have to say our query here is to do is query and our data that we’re writing back is right here So now if we come back here when I click on this item it actually updates the cash which then propagates and renders So I now get real time updating of my items and these are actually persisting to write I refresh they’re still there So it actually is in fact updating the database to so nice So when do the same thing with deleting items, so we’re going to come back up here and do delete mutation And we have basically the code for that too So remove to do and we just pass it an ID so we can copy that const remove mutation Pass that in and here we want to pass in a variable called ID similar to what we did with update and it’s going to be an ID And we’re just going to call that and I want to basically pass the same do the same function So I’m going to copy it and paste it So there’s going to be a few differences The name of our function is going to be different So I’m going to scroll down here and I say graphql This is going to be removed mutation And the name I’m going to call it remove to do And come back up here I’m going to say remove to do And variables we want to pass in we only care about the ID and then the update the store instead of this mapping stuff We want to remove an item from the list

So to remove an item from the list we’re going to filter So we’re going to look for the ID that is not equal to Du Dy D So we’re going to filter through the items and only remove the item where these two match up So in other words if the IDS don’t match we want to keep that so we’re comparing it against the one we need to remove another important thing I did not mention about this update function is you want to make sure to when updating this not mutate and create a new instance of it So with Filter we create a new instance of that array So let’s see this and oh, will you just make this an async function? Just like we did update and let’s go ahead and delete this So when I delete it, we should see these two Reds match up and sure enough We do and Ali another one and our delete function looks like it’s working properly I refresh we should see those items gone and nice So there’s one last thing that I want to do and that is creating to deuce and so we want to create just like an input field at the top where I can type stuff and submit So I’m going to create a new file called form dot JS and this is going to store our form and keep track of the value as the person types it out So I’m going to import react from react whenever you create a component in react you always start off like this and we’re going to export default And we export this like that so you can import it in our app So I’m going to say form extends react component and we’re going to render and what we want to render is an input field in the input field that we want to render is the nice material UI one So this one looks really nice We’re just going to do the basic one We can just grab the import statement And we can grab this just this first one Okay, so we’re going to talk about on change in value in a second I’m going to remove those three fields in the ID the label I’m going to call this to do dot dot dot and I’m now just going to render and our app that form So first I guess we should import it So import form from dot slash form capitalization is important there and we’re going to render it and when I render it between the paper and the list So now we should see an input field and we do hey and I want to make this full width So it extends the whole thing And I don’t know Yep So there’s a property called Full width we can just pass on that And now it should extend this whole length Perfect So now we can even see this is where the helper text is I just call that to do, but you could call it whatever you want to type all that stuff in and then hit enter and then add or item right? So we need to add some more stuff to a form So we need to keep track of what the user is typing in to keep track of that We’re going to use state So I talked about earlier that we wanted to manage stuff in our state and data that changes So this is going to be text that changes at first It is just an empty string and I can get that text from this dot State and a pass that value in So the value of the text field is equal to this text All right whenever someone Types on changes called, so there’s an event called on change and when this is called and I’m going to call this handle on change or we could just call handle change And I’m passing this function Okay, so I want this function to be called whenever this one is it’s going to be passed an event and if we do New text is going to be e dot Target value So e dot Target that value is going to be have the new text that the user just typed in So this new text do you want to now store in the state? And the way you update this state is with this dot set State and then you pass in the new value So I’m going to say text is equal to new text So This Is Us updating the state with this new text value So whenever I’m typing on change will update the value in the state in the state will propagate in the state now is going to change the text field value So now as we’re typing this you can see the value and if I were to Console DOT log this new text

We can see the value each letter that we type you can see each letter that I type It kind of makes a little pyramid here and it adds on the new text value and then whenever the user hits enter what I’d like to do is submit this if you will or create a new item here now, I’m just going to defer to whatever app dot JS wants to do So I’m going to pass a prop I want to call it from App dot JS So to do that What I’m going to do is create a function called handle key down And here I’m going to say on key down handle key down So now every time I press a letter both key down inhale change you’re going to get called Now What I want to do is listen for when the person hits the enter key So whenever they hit the enter key we want to submit the form So to be able to know this we have access to what Q is pressed We get this by doing e dot key and we can check if it’s equal to enter and if it’s equal dinner, what we want to do is call this dot props dot submit and I want to pass in the current value of text So this is something I want to pass down from App dot JS So when I call this I want to say submit and give it a function called this dot create to do so up here I’m going to say create to do And we know it’s going to have one value in here called text So this is the function that we’re passing to submit and then our form we’re calling submit passing in a string which is text So here is we want to create to do and we want to come over here to our playground and do create to do and really there’s only one value for this which is the text and then what stuff you want to get backslid the text complete and we want to get it all back in this case and we’ll see why in a second I’m going to say const create to do mutation Pass it in and then we’re going to have one variable here I’m going to call it dollar sign text And by the way, you do not have to call it the same name as what you have here just a good convention that I like to follow so text string and that’s going to be mandatory Come down here and actually all the way down because we want to add another one So this is going to be create to do mutation and I would say create So in here now, I’m going to say and we can I guess copy this because we’re going to be doing similar things I need to make this asynchronous I’m going to say create to do the variables that I’m going to pass in is just the text and now I want to update the store after we create the to do because I want to update the to do query and add my new to do but here I care about the second thing because the second thing here data and then create to do this is going to have three values It’s going to have the ID the text and complete which is what we need So I’m just going to push it on so plush and we’re going to add this create So we read what to do is we have cashed we add the new item that we added and then we write it back to the query So usually what I like to do is just add a console log statement to see if this is not getting called or what could possibly be going wrong e dot key This might be an uppercase enter not a lowercase Yep, and that was the case So watch out for that and you’ll notice this did not clear So two things I notice first off This is not clear at the top we want to do that and secondly it added at the very bottom I want to add it at the top so we know this was getting called and after we submit we’re just going to say this dots that state and set it to an empty string and that will clear it and then our app dot JS were pushing to the end There’s a function called and shift this adds it to the beginning So if I say first we now have an item at the beginning and now I can just rapid-fire create items if I want to can check them off and delete them if I want and we have a whole to-do list create it so that is it for this tutorial We did all the operations creating reading updating and deleting to-do items I hope that was helpful and you got a good grasp of how to do this Will taste of how graphql and react works Hi guys, this is Alia call from Eddie Rekha

Today We’re going to learn how to become a superhero just kidding now becoming a full stack web developer is no less than becoming a superhero It was continuous dedicated practice and a strong will to learn with this in mind in today’s session We are going to discuss how to become a full stack web developer So let me run you through today’s agenda We’re going to begin with what is full stack web development Next we will discuss the different layers of full stack web development After that We look at the different types of web developers over here We’ll discuss front-end back-end and full stack web developers next We’ll discuss a few reasons as to why you should practice full stack development Once we’re done with that We’ll see how to become a full stack web developer over here We’ll see what exactly a full stack web developer does will discuss how the front-end back-end and the database management works All right now moving on we’ll finally discuss some important web development tools and Allergies that you must know in order to become a successful web developer So guys, I hope all of you are clear with the agenda without wasting any further time Let’s get started So what is full stack web development? I’m sure you all must have heard a front and in back in web development, but what is full stack web development now full stack web development basically involves front-end and back-end web development It requires in-depth knowledge of the different scripting languages like HTML JavaScript CSS, which make the web look more interactive and Alive It also requires high-level programming languages such as Java Python and so on to code the server side apart from this you also require experience in working with JavaScript Frameworks, like node.js and libraries such as jQuery and so on now in the further slides, I’ll be covering the different aspects of becoming a full stack web developer in depth So stay tuned So before we move onto Water full stack developer does and how a front-end and back-end developer Works Let’s look at the Ben layers of full-stack first we have the presentation layer or the front end of the web this layer helps you interact with the web watch videos perform actions like register to when online shopping site, so guys, whenever you serve a website the different fonts images and the content of the website forms a presentation or the front end of that website So basically the design look and feel of the web is accomplished with the help of HTML CSS and JavaScript, then comes the logic layer or the back end layer Now this layer forms a dynamic connection between the front end and the database So every time you search the web it’s the logic layer that transmits your requirements to the database and Returns what you searched for all of this is powered by a web server Now in order to get this layer working It’s important to know at least one of the programming languages such as python Java or C, hash Okay Now lastly we have the database layer This layer is a massive Warehouse of information it Contains a database repository which captures and stores information from the front end through the back end Now a prerequisite over here is to have knowledge of how data is stored edited retrieved and so on languages such as MySQL Mongo DB are a must to know now, let’s look at the type of web developers So guys front-end developers are responsible for a websites look and feel these developers must be Masters at three main languages, which is HTML CSS and JavaScript They also need to be familiar with Frameworks like bootstrap angularjs and ember.js which make the website look more interactive and Alive libraries, like jQuery also help to package code into a lightweight and compatible form now moving on to the back end developers Now the back end of a website consists of three components the server the application and a database a back-end developer creates and maintains the web server application and the database which allows the front end of the website 20 Great to make the server application and a database to communicate with each other back end developers use server-side languages like PHP Ruby python Java and.net to build an application They also required to operate on tools like MySQL SQL Mongo DB in order to fetch tour or edit data and then serve it back to the user in the front end now guys, this is how back end developers work now moving on to full stack developers The term full stack developer was popularized in a meeting around eight years ago when Facebook announced that they are looking to hire only full stack web developers now basically a full stack developer should be knowledgeable enough to work on both the front and technology and the backend technology So he needs to have an understanding of how the web works at each and every level including setting up and configuring Linux or Windows servers coating server-side apis running the client side of the application by using JavaScript

Structuring and designing the web page with CSS and HTML a full stack developer is like the Jack of all trades one must have enough knowledge to run both the client and the scripting side Now, let’s discuss a few key points about why one must practice full stack web development One of the reasons is the first and developers can choose from a rich set of tools and Technologies for creating and designing unique code They are not restricted to a certain set of tools for development because there are n number of Frameworks and libraries that will assist a full stack developer and achieving an effective web application Now, the next reason is design and development Now one of the best things about working as a full stack developer is that you’re not restricted to only development as a full stack developer you can design and style your application And then if you’re bored of Designing, you can probably switch to your developer mode now develop skills come into handy when you want to create a functional and a bug free application a full stack developer is basically Create a person who can both develop and design an application So guys I’m now going to lie to you a full stack developer is like the Stephen Hawkings of web development after mastering very scripting and programming languages and working alongside several Frameworks and libraries a full stack developer is no less than a master Of course one requires to have work experience and a lot of knowledge but nothing is unachievable If you have the will to do it apart from that a full stack developer is highly valued in all parts of the world in the US the average salary of a full stack developer is over a hundred and ten thousand dollars not only in the US all around the world full-stack developers are in high demand Now that you have a basic understanding about what a full stack developer is let’s dive deep into how to become a full stack developer Let’s look at the responsibilities of a developer And what exactly does he do? All right, so guys to begin with you must have a decent understanding of how a website or a web Application is built and what tools and Technologies are used to do so, so let’s begin with a front-end web development to master front-end web development You need to know many Technologies, but the main Technologies are HTML CSS and JavaScript now HTML which stands for hypertext markup language is the skeleton of every web page It defines the structure of the web without it The web would be as shapeless as a lump of clay by using HTML you tell the browser how you want your content to be structured by defining the different parts of a web page For example, you define the content of your web page within HTML tags Now these facts tell the browser which part are headings body sidebars and Footers this not only helps to structure the web page It also lets you style each HTML element by selecting them and then adding different style parameters now CSS, which stands for cascading style sheets is like the clothes we wear to look stylish and attractive That’s DML elements We Define can now be styled using CSS For example, you can change the color of the header add in style various buttons You can also use CSS to adjust the width of the HTML elements You can style them by adding color and design you can also play around with buttons and make them look colorful and attractive So guys, you can style a web page in any way you want CSS has thousands of styling functions, which let you design and make a webpage look like a beautiful painting Next up is Javascript Now before I get on with half would suck developers use JavaScript It is important to understand how JavaScript Works JavaScript is basically a language of the web which every browser PC and mobile phone understands now JavaScript can natively run on the browser by natively I mean that most of the web browsers like Google Chrome Safari and Internet Explorer have a JavaScript engine embedded into that browsers Okay Now this JavaScript engine interprets the But script code so that it can run on the browser So guys, this is exactly how JavaScript runs on the web browser Now where is Javascript used now? Let’s look at an example So guys when you’re browsing on a webpage you come across many buttons on clicking these buttons some event occurs Now JavaScript has event listeners with perform specific actions on the click of a button like for example on the click of a button another page might open up or a personal detail form can pop up All of this is Possible only to JavaScript It is basically used man you play the HTML elements add motions and Graphics to them So any sort of motion that you see on your web page is all JavaScript now that you have a good idea of how 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 link or submit some form or let’s say he enters our URL where does this data gets stored and

how does the browser return in? Mission to the user So basically the browser connects to a web server now a web server is just a computer running an application or a software that delivers resources to the web pages So guys when a web server receives a request for a resource, it has to respond with that resource So how does it do that now basically back end developers program the web servers to respond with the right resources So the main aim of the web server here is to respond with the correct resources But where do they get these resources the web server is connected to a database which is continues the cold on receiving some requests So the role of a full stack developer here would be to create an application that fills a web page with the required resources, but pulling data from the database Now this application is programmed using server-side languages like Java python PHP node.js and the database is also programmed using languages such as MySQL Mongo DB and SQL So guys, basically The back end of a web page is used to serve the required resources to a user So here we just discussed how the front-end development is used to design The user facing part of a web page that lets us interact with the web page We also discuss how the back end is used to deliver a web page to the browser along with the requested resources, which are retrieved from a database So guys, this is what a full stack developer does He has to create both the front end and the back end of a web page All right Now, let’s look at some of the important Technologies and tools that a full stack developer must know first of all a full stack developer must choose a code editor that is best suitable for him There are hundreds of code editors out there personally, I switch between Visual Studio code and Sublime Text They’re the most user-friendly code editors, but you guys can go ahead and choose whichever code editor you like now The second tool is a Version Control System a Version Control System basically is used to keep a track of all the changes that you make to your code files Any sort of documents now like the name suggests it creates versions of your code or your file every time you change something So let’s say that you created a web application and added an additional feature to it But for some reason this feature slow down your website and you want to go back to the old version of your website So usually it is very hard to revert back to an older version but a version control system takes care of this because it has a track of all the code changes that you’ve made and it can easily revert back to any code change some of the popular Version Control Systems include get and subversion now guys that are thousands of JavaScript Frameworks and libraries which will come handy during web development Frameworks, like node.js can have with back and development of a webpage and JavaScript libraries such as jQuery can help at the front end to design a web page Then there is angular react backbone meteor, which are all very useful to 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 front end 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 watching this video Have a great day I hope you have enjoyed listening to this video Please be kind enough to like it and you can comment any of your doubts and queries

and we will reply them At the earliest do look out for more videos in our playlist And subscribe to Edureka channel to learn more Happy learning