[Music] hello everyone welcome to this full stack web development course 2024 through this course we will teach you fundamentals of of web development such as HTML CSS and JavaScript later we will help you design the functionality part of a web application using nodejs this particular course has been designed and taught by our top industry experts working in companies like Google meta Microsoft now before we start with this free fullstack web development course let me tell you more about some of the most important Concepts that we have covered in this course first of all we have HTML CSS and JavaScript now these are the scripting langu languages that help in designing the look and feel of every website on the internet for designing a web page HTML helps with the structuring CSS helps with the styling and JavaScript builds the functionality you can visualize this as let's say you want to design a cloth so there'll be some sort of stitching structure like a pullover maybe then there'll be a print design and a good looking color over it for styling also there will be a hoodie to make you feel warm which is like a functionality so in a basic sense HTML will be like Stitch a website giving it a proper shape and Alignment then CSS will be used to give a proper appearance to web pages and finally JavaScript will bring the functionality part into the action for any website these components will always be in a play you can actually go over to any website and see its HTML structuring by right clicking on it and then entering into an inspect mode all these things that you see here are HTML structuring elements now let me help you guys understand what front end and backend are in the cont text of fullstack web development the front end is the part of the website that generally is accessible to all the users this is the part of the website that you could see on your systems and interact with whereas the back end is the part of the website which makes front end functionalities work it runs on the company server and contains a database system designed for applications and apis full stack development is the field that covers both front-end development and backend development by the end of this fullstack developer course you will have a understanding of both these important web development functionalities at the end you will go through the important fullstack developer interview questions ask in large mnc's or even startups but before we begin make sure you enable both the Subscribe button and the bell icon for the intellipath YouTube channel so let's understand who is a full stack web developer a full stack web developer is a person who Masters all the Technologies used in creating an endtoend web application including front-end and backend service Services let us first understand the front-end web development front-end development or client side consist of creating the GUI and visual components of the website such as web pages and user interfaces that people interact with through their web browsers the front end is developed using tools such as HTML CSS and JavaScript now let us check what actually is backend web development backend or server s side development is a process to add functionality to the components created in the front end of the web application it focuses primarily on databases backend logic apis and servers the following are examples of backend programming languages PHP Ruby python a full stack developer has the skill set of both front-end and back-end developers in addition to that skill set a full stack developer should also have a few other tools in his text stack below mentioned is a comprehensive list of all such tools and Tech Technologies first is HTML CSS and JavaScript then comes third party libraries like reactjs programming languages like Java and python database crude operations Version Control tools like git or GitHub computer science fundamentals like networking data structure and system design a full stack developer is one of the most in demand jobs and the salary trend is as follows a fullstack developers salary varies from INR 5 lakh perom to 14 lakh perom while in the United says the average income for a full stack developer is $74,900 and can go as high as $114,000 based on skills and experience so that's all about full stack development happy learning okay guys now let's just discuss the basic components of a web page so uh every time that you open a web page there are various different things going on on every different web pages that you see and for every different element there can be various different things which are responsible for that particular actions today we are going to be discussing about about three of the most basic ones and which are these components are basically considered as the front end or the client side part of the web applications and it majorly consists of three Technologies which are very basic uh of course we're going to be talking about HTML CSS and JavaScript so uh when you see a website these are the three most basic primary things which you'll see present across almost every website which is out there in the world so let's talk about what are these things real quickly let's begin with HTML so HTML stands for Hy text markup language so it is uh basically used to define a structure uh to a web page and give uh the structure to the elements inside of a web page so uh what does an HTML do to give you an uh outset of things just think about uh like this when you open a web page right sometimes uh there are some loading issues right when you see a complete page opens up in black and white that is what basically HTML can do for you HTML basically provides the structure to the page so let me give you an example to make things more clearer uh on the left hand side of the screen you you can see in the black we have a basic uh just a quick info guys intellipath offers a full St developer course which enable you to learn textech from both frontend and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course HTML code which is out there and this is the most basic uh HTML code which is out there so you can see it just consists of the part where there is a head to the page and and there is uh something in the body where you write different uh uh context related things so you have a title and then you have with respect to a title you put a Content inside of it that is inside of the body and you can put different elements of different sizes inside of this and it is majorly in black and white and this is how you basically structure a page so HTML is responsible for basic structure and giving the how your page will uh basically structure inside of this code is that is what HTML provides as you can see the the left hand side of the code results in what you are seeing on the right hand side barring the border so there won't be the black border generated by this we have just made that so that it stands out from the Black Background uh sorry white background so you can see uh this is heading uh is bold and it is written inside uh this is a paragraph so you can see the title version is much more bigger and Bolder and there similarly there are different elements to it when you're talking about uh an HTML code so HTML code basically does so what does CSS do so CSS is basically something which stands for uh cascading style sheets and this basically gives design color and makes your uh website look much more beautiful so HTML is responsible for structuring your page uh about how uh elements were the text will be there so it is basically responsible for a text CSS is responsible for styling of the entire page so the colors in the background the moving elements and different things that you see they are all coming from CSS and uh the these CSS files can be imported from the other websites so let me give you an example of that so on the left hand side you'll see the similar example that we saw for HTML right so this is a heading this is a paragraph the same thing is out there the only difference that we have introduced is we have introduced a new stylesheet uh which which basically gives us the uh this red background in the in there and this is basically a container which is defined uh by this stylesheet that we have imported so same code entirely the same code just the difference is that we have introduced a stylesheet in here and you can Define the stylesheet as mentioned in here and there's various different elements to it when we are talking about CSS itself uh which we'll be discussing sometime later on but having said that just uh think of it like this HTML basically gives you a black and white page and CS is responsible for giving it style giving it color giving it a uh different Aura so that it looks much more beautiful so when you're talking about what makes a static web page so if you just want to write text and make it look beautiful all you have to use is HTML and CSS so why does the third element kick in so third element is very important and this is called as JavaScript so JavaScript is responsible for bringing activity interactivity to your uh web page so it is uh not as much of a static element it basically helps you uh Define logic and Define different things a very good example of what JavaScript can do is uh for instance when you are using Chrome or any other or traveling through any website sometimes you see that popup coming right so do you want to stay on this page you want to leave this page and there's an option of yes yes and no that popup is basically generated by JavaScript that is one of the examples of what JavaScript can do other things that JavaScript can do for you is it can introduce logic it can take inputs from the user and uh it can basically uh make your web page look much uh much better what basically can do is let's say if while uh let's say when you are signing up for Facebook and you type something and that at theate gmail is not present that instantly the website tells you that this is not working that is form validation which is done by JavaScript then sometimes uh when you want to put up some alerts where it asks that uh the current website wants to send you notifications and different things like that that are all generated by JavaScript so when you want to give a more asynchronous communication to your web page then you have to use JavaScript and that is about the basic components of the web page okay guys now let's look into web hosting so first of all let's understand what is web hosting and once that is done we'll disc discuss the various types of web hosting which are available so first what is web hosting it's pretty simple web hosting is an online service that enables you to publish your website or application on the internet so uh when you create a website the if you're practicing you basically don't want to put it on the internet you just want to create website and design it so that you can view it locally and you can practice creating websites using HTML CSS and JavaScript but when you're building it for a company or when you're building it for let's say you're doing it as freelance you want to test your application running on a web server so for that you need web hosting so when you create an application a web application or website you want the website to be hosted on the internet so other users can visit your website and use it so that is the main use case of web hosting so it is a service which helps you publish your website online so a server is a physical computer that runs without any Interruption and the web host keeps the server up and running so we all know that to run any website or databases we need certain established servers for example if you're running a website you need a web server if you're running a database you need a database server so if you're running a web server the web hosts are the ones which are keeping the server up and running so that your websites are always available for customers to use for example if you have a website running the website should be available in the morning uh in the evening in the night so anytime I'm trying to open the website it should be available and that is because of the web hosting service which is making the website to be available all the time by keeping the server up and running and like basically removing all the malicious threats incoming all the vulnerabilities any other Interruption coming into the server so it is all stopped by the host so this is basically web hosting and how web hosting works so a simple set of how exactly it works right now I'll show you first of all you are the owner of your website so so you're uploading a website to a hosting server so once it is uploaded you are also buying a domain name and registering for your website for example we have intellipad do.com so we have registered intellipad domcom uh for this particular uh course page so for websites for our homepage we have put intellipad docomo site it is intellipad docomo so like that we have registered the domain name intellipad tocom and that domain name is associated with the hosting server uh so basically the server will have an IP address and associated with the domain name so whenever an end user is searching for the domain name in tat.com the domain name is associated with the server's IP address so this domain name Will redirect the user to the IP address of the hosting server so the website is displayed to the user but the user will only know that the person uh she has typed the website's name but it has taken to the server so the backend part will not be shown to the user the website which is uh in the hosting server will be displayed to the user because they know that by providing the domain name it gives you the website that's it it's pretty simple as that now coming to the types of web hosting Services we can say there are so many different types 6 7 8 9 10 but uh so let's say as a whole as like commonly used most popular there are around five so these are the most commonly used five top hosting Services first there is shared hosting then dedicated hosting then Cloud hosting then VPS hosting or virtual private server hosting and WordPress hosting so even in telat we use WordPress so WordPress is one hosting site so now coming to uh shared hosting dedicated hosting all this we'll look into each and everyone so first of all shared hosting shared hosting it's considered as a beginner level for example if you're practicing web hosting you can go with shared hosting because it's cheap but there is a drawback that is the shared hosting server is shared with other users who are are hosting their website so multiple websites can be hosted on a single server so this might slow your website down because let's say that server is sharing around five different websites so one of the websit is getting a lot of traffic means all the other websites in the same server will be affected because most of the resources will be used by one of these websites and the other websites will be having a like lesser resources and users will be struggling to access it it might crash because it's not having enough resources to accomodate these many users but the thing is it's very cheap it's very easy to start and it's very easy to host your application in shared hosting next dedicated hosting so the word dedicated itself shows that this particular server is dedicated for you what this server is just for you so dedicated hosting gives website owners the most control over the server that their website is stored on so let's say there is a server and you're hosting your website on it if it is a dedicated Hoster server then you have more control over that server that is you can uh basically log into the server delete whichever files you need or add more files so the complete control over that host is provided to you because you're paying for the exclusivity of the server so the server is exclusively rented by you and your website is only one stored on it so Shar hosting it is a server with multiple websites anybody can uh like host their website on it but nobody will have any control over the server they can just host their website on it but if it is dedicated hosting you have more control over the server because you exclusively paying for it so that you can just keep your website on it so there are no other websites the website uh so your website will not slow down because all the resources are just for your website so dedicated hosting can be an on promise setup also you can do it using Cloud so thus coming to Cloud hosting so Cloud hosting allows users to employ as many resources as they need without having to build and maintain their own Computing infrastructure it is cheap considering the payment model so let me explain it very simply so if it is an on promise setup so let's say you're using dedicated hosting by your own so you're buying some servers and setting up the servers configuring everything you're uploading the website setting up the softwares and your website is running fine but you have to pay Upfront for this because you're buying a server so to buy a server you have to pay money so for example you're buying a random laptop as your server so you're buying uh so you are buying it by giving money so once you get the laptop you are uh basically configuring it you installing softwares and hosting your application or website on it now coming to Cloud so in this case you can have any number of servers at any point in time it has autoscaling that basically means the number of servers will increase and decrease according to the traffic and that will basically affect in your uh cost it will help you save a lot of costs and also the payment model is pay as you go that basically means right now if you are running only two servers you only pay for the time you have used those two servers and suddenly your website uh websites traffic goes down and you're only using one server in that case the second server will be deleted and you will be only using one server and that one server is the only one you are paying uh for at that particular period of time so you can stop these resources whenever you want you can start them back again you're not you don't own it but you still have all the control over the servers on cloud because you're renting it uh okay now VPS hosting and WordPress hosting so VPS or virtual private server hosting is another form of shared hosting and you're still sharing a server with other users so it is the same as shared hosting but there is a catch so however a web host allocates an entirely separate partition for you you on that server this means you get a dedicated service spase and resources so let's say there is a server if it is shared hosting that basically means the resources are commonly used the resources are completely shared let's say if there is 4 GB of RAM uh one website could take up around 3 GB of it and other websites around other websites can be left with the remaining 1GB so basically the resources are not shared properly so if you come to VPS hosting it is still shared hosting but if the server has 4 GB of RAM and there are four websites running each uh website or each website running on that server will be equally partitioned into separate uh dedicated service spaces that is each website will be provided their own storage amount their own Ram so every resources will be segregated and provided so that even though one website's traffic is increasing that will not affect the other websites because every website have have their own dedicated service space and resources now coming to Wordpress hosting so WordPress is a company which does web hosting for you one of the most famous companies so uh WordPress hosting is a particular form of shared hosting created for WordPress site owners your server is configured specifically for WordPress that is WordPress is a website which provides you templates they provide you hosting Services they provide you uh for example blog Services they they provide so many different Services regarding websites and WordPress hosting is especially for WordPress site owners that is if you buy a website from WordPress then you can take WordPress host WordPress hosting and it makes it really easy for you so now your server is configured specifically for WordPress and your site comes with pre-installed plugins for crucial tasks such as caching and security so if you take up the WordPress hting you don't need to set up anything everything is already set up the caching part the security part and other plugins which are already available in the hosting site so WordPress provides you all that you just have to pay the money so this will make your task easier because because you're not going to install any more software because everything is available over there you're just going to buy it and use it so these are the types of web hosting Services guys so I think you understood the point of this and what exactly is web hosting the different types of networks which can be created when you're working U you know inside a network with which can be a combination of multiple systems so the first kind of network that you need to understand is land so what is a landan a landan is basically a local area network which basically is a connection of computers with respect to the area the area could be an office building it could be a residence building it could be a University campus or I mean it it is basically a confined area it has to be limited within a specific building you can say right so for example if you are in an office and uh if all the computers are connected to a specific router which which is the case in most of the companies because uh when you are connected through land there are a lot of things possible for example you can share the hard drive or you can do the software your administrator can perform software updates on all the machines from a central system so that's why lands are created when you are in an office system so that kind of a setup would be a local area network as the word suggests local it is confined to a very limited space the next kind of network that you have is basically van so van is basically wide area network so as the name suggests it's a bigger Network than local area network and Van is basically a combination of various local area networks right so for example if uh let's say you work for a company called Amazon right and they have headquarters in multiple countries or if they have headquarters in multiple states of a country so if all these offices are connected together using a network that would basically be wide area network right so if you look at the definition a wide area network is basically a network that extends over a large geographic area it could be across continents it could be across cities it could be across States so that was basically a wide area network so the basic thing that you need to understand over here is that uh Lan is the smallest unit which is there for a network right so any when when two or more computers are connected to each other that becomes a local area network right and when you connect different networks together could be LS right could be uh a different kind of network topologies in that case it becomes a wide Network when you're covering a larger uh Geographic space then it becomes a wi Network so internet is an example of van right it's it's it's an example of wi area network so with that guys this was about the different types of networks which are out there uh there's a lot of different things when you talk about a website that you can display upon um so there are things like images formulas and different web pages for that instance that you can add to your web page and embed them so there are different ways of embedding different things into your website let's discuss those one by one by one so the first one is that uh the fact that you can embed these things like same things using a lot of different methods so using embed and there is something called as an object you can embed images or videos or audios for that matter but uh it is recommended that for a particular thing like an image you should use the IMG tag and for embedding a frame you should a frame by frame we mean that you can import some documents or HTML websites or something like that you should use use if frame so if you want a website inside of your website use if frame and then there is uh if you want to have some videos in embedded the video tag should be used and if you want to embed some audio tag there audio should be used apart from these things you can uh embed a few more different things uh like there's an option for embedding canvas you can embed an entire canvas using the canvas uh thing tag and apart from this you have object you have math if you want to include let's say some formulas FX by 1X FX or something like that uh you have to use math for that embed math tag for it but majorly these are the things um being much more in use and it is recommended that you use IMG tag for images video tag for videos audio tag for audio and I frame for embedding images so let me show you that real quickly so the Syntax for these are like for embed you have to describe what kind of thing that you are embedding so like here it is the image/ jpg if there is a video then video/ the video format and then there is you have to mention the source that SRC is equal to in delad or jpg or any other the whatever the name of the image that you're using that and you can give height and width uh whatever that is according to your use similarly for image tag you can you have to give the image source and height and width you can Define when it comes to audio you have to give something like an audio controls and uh in that you have to give the source and the type of the audio that you are using uh that you have to mention there similarly for video you have to give you can give the video height and width as well so what is the screen size that you want your video to play in you have to mention that in there and and then there's you have to provide the source and the type same as before and this I frame that you are seeing here this is for embedding a website as you can see there is a source which we are taking intellipad and a title so let me to show you two examples to make things more clearer so we're going to be discussing images and if frame with a help of an example so let me show you the code first so for iframe we are using uh this you can see doc type HTML HTML then body then we have mentioned this is the iframe element and this is the iframe tag that we are using right here so this Source we have given the title we have given let's see how that looks so I have iframe working right here let me open that give it a couple of seconds to load as you can see this is the website that is imitating our website right here and you can see this is a element of our website the popular courses and everything you can see different things inside of it that our website and if you want to check out our website let me show you that really quickly so that you can get a zest of what it is doing you can see this is the thing that it is emitting right and uh that is about this uh embed part you can see embed now coming back uh let's talk about the image thing so uh for the image again you can use uh you have to type this and you have to provide the source uh when you're doing this make sure that um this images that you're using if you're using directly by the name it has to be presented the same directory as the uh HTML file so with this we have mentioned here so let me show you how it works so we are using the intellipad image which is this image right here here and uh since we have given some weird height and width it should look a little bit weird but uh it should display so img1 is the file you can see it is the in B logo then since we have given a lot of height and width to the image so it is expanding the image because image is smaller in size so that is how it looks a little bit weird but you can adjust that based on your input and that is how that you work with different kinds of embedding things inside of HTML you might be wondering what are these softwares which I have opened over here so this is files and this one over here is butty so these two softwares are FTP clients uh so basically FTP file transfer protocol so these Pro these softwares are used to connect with an online server and you can transfer the files from your local system your PC into a server which is running let's say in a cloud platform or a web hosting service so now I'll be showing you both of these first let me explain file Zilla so file Zilla you cannot actually add access every part of your uh server you can only access the contents available in the server and you can copy from your local PC so you can see this is my local PC's uh uh so the files hierarchy so you can see there is a C drive there is a D drive and you can see like my files all the files will be available over here okay so this is my local PC so now I'll have to connect with an online uh server it can be an Cloud Server so right now I have a Cloud Server running so that's what I'm going to show you so also you can copy from your local PC into the server or from the server to the local PC so both ways is available so using file Zilla which is an FTP client when you copy the data into the server an FTP connection is made and when it is successful the transfer is made and once the transfer is completed the connection is closed so now let's connect the server which I have over here so this is an AWS server uh it's pretty easy to launch so I'm not going to show you how to to launch this uh you can check it out in our YouTube videos or any other video but if we have AWS uh CES also you can see that but over here so I have an open to Mission launched I have a public IP address and also I have set it up where is it a key pair so key pair is basically you will be provided with a public key pair sorry you will be provided with two key pairs public and private Keir so the public Keir will be in the server itself the private Keir will be in your let's say the private Keir will be in your PC in your local system so when you're logging into this you'll have to use the private key pair to decrypt the public key which is inside the server only then it'll open the uh server itself so now one more thing as I told you is putty so using putty you can log into the system as well as transfer files so as I told you SSH is uh secure shell uh FTP and SSH are similar but in FTP it is unencrypted SSH is an encrypted protocol so for logging in into the into the server SSH is used but to transfer files FTP is more than enough so first let's transfer files then let me show you how to open it so first of all you'll have to download file Zilla client so download file Zilla client for Windows or any any OS you have so download it see you can have you you have for wind uh open 2 as well as for Mac so download it once it's downloaded install it it's same as installing any software and you get this so once you got it uh once you have launched your server so you'll have the private key file available so my private key is in downloads so here you can see this is the private key uh which got downloaded when I created my instance so now you'll have to go to edit go to settings go to SFTP so secure FTP and for public key authentication you'll have to add the private key file over here so you can see I've already added the file so it's pretty simple to add the file click on ADD key file uh select the file and open it it'll be added that's it then click on okay it's done so now let's connect with the instance itself so now we have the public IP address which is going to be the host name so as this particular server is a UB to server the username will always be UB to if it is an Amazon Linux or a Red Hat Linux server then this would be easy to user so it's open to next password is nothing because when we create uh a server you will be provided with a private key which you're decrypting uh which you are using to decrypt the public key so a password is not required port number is 22 for uh SFTP and FTP is 21 one so it's naturally 22 so go with 22 so you have provided the IP address the username port number and also we have provided the key pair so now if I click on Quick Connect it'll try to connect so let me click okay so it is trying to connect and it's connected and listing directory slome slub to uh successful so I have logged in to my instance so I'm able to see the uh files inside the inside this particular server so now let's do one thing let's go to uh downloads let's like I have some file over here so I have some arrows.png file so I'll just make this bigger yeah so I have uh inside downloads I have these files so I'm just going to upload this arrows.png file into htu so when I click hit enter it'll try to it is connecting with the system it's transferring the file and it has successfully transferred the file so now if you see the ar.png file is available in the ub2 system so now how you can test whether the file has been successfully transferred so in that case you can use your puty client to login into your instance so the thing is you'll have to convert your so as I told you we have our private key we'll have to convert our private key uh it has a format called pem so PM should be converted into PPK so I'm not going to show you that I'm just going to show you how to work with it so that that is a separate thing we can learn later so now I'm just showing you how to make an FTP connection which I told you over here this is an SSH connection which I'm going to show you so that I can show this file has been successfully uploaded so now I have the public IP and I'm going to open party I'm copying the IP address and under SSH there is an option called authentication clicking on authentication going to browse and you can see I have the Virginia key1 file but this is a PPK file not a PM file so you'll have to convert your PM file to PPK file so it's pretty simple while you download putty you'll get this software called paren so using paren you can load the PM file into this so make it all files so you'll have to you'll have to load the pem file and click on save Private key and provide it a name provide it a name and save it so that's how I saved this so this is how you get a PPK file and I have added it and in session I provided the IP address and the port number now clicking on open it will open the instance so I'll just make it bigger so that you can see it appearance change 14 yep so I increased the size so the as I told you the username is Ubuntu for an ubu system successfully logged in so you can see now if I do an LS you can see arrows.png file is available over here which I copied from here so now let me copy one more file from here m let's copy small file I'm just searching for one yeah so something like Cloud Server one PNG file so again I'm copying it to the open to directory you can see it's connecting transferring transfer is completed now if I do an LS you can see the Cloud Server 1.png file is also uploaded so this is how you can establish an FTP connection using files lab and you can upload and transfer content you can also transfer from this into so you can see I'm transferring it from this to this transferring it's asking for overwrite because I already have a file named like that so if I click on that transfer would be successful and that's it I transferred a file from a remote server into my local PC and this is how you can do it and this is how FTP applications work so thank you guys I think we've achieved what we wanted to that is uh showing you how to connect to a remote server using an FTP client uh called filezilla so download filezilla and start practicing this okay guys so what we're going to do right now is we going to create two uh small HTML Pages uh one will be having the image one will be the our index page where we can navigate from and from our image page we can have two hrfs basically linking two more HTML pages from our end from our first page to the other two pages and from there uh what we'll do is we'll try to push these files to our uh server which we have preset up on AWS so let's quickly jump ahead and look into what we're going to do right so this is our index page so I have pre-coded everything but I'm going to go line by line through the code to explain what I'm what I have done so that uh it's easier for you to understand so let's begin so as we saw the doc type HTML we have to define the document type so we type all that generally even if you don't type this should mostly work but uh some uh browsers uh identify certain uh elements on the screen with the help of talk type HTML for example when you are table styling and uh you're using some particular elements it's better to type doc type HTML because it allows you to have them in a particular structure otherwise some browsers are not capable of speaking La that's why we type that so HTML then body and you can see this is our header so we have kept uh we have put in an inline styling here so we have done it align towards the center and hel come Welcome to our page so this is our heading so H1 and attack closes here then this is our first paragraph and here we have used the color red this is again inline styling and uh we have mentioned that we are going to show you uh a frame of our website but we're going to change that here uh let's here we're going to give you two links one for our logo and the other the link to our website right and then we're going to just put in a break in the line that there's something space and then what we have done is we have provided an hrf uh this is basically link for linking you to the next page so whatever you put inside of this tag it will come as a clickable link right so uh this is the IMG HTML which we have defined here this is nothing it is just a very simple file that this is the image element uh we are using an intellipad PNG which is the logo and change the height and width to a little smaller element 200 and let's say 400 and I'm going to save that really quickly so this is a very simple image page and other than that uh this is we have internally linked to a web page that we have created but let's say if you want to link it to a website which is online so this is the HF that we have given to the intellipad website and visit our website I've mentioned it here so these are the two very simple files which we have another thing that we have to keep in mind while uploading is the fact that we have given an intellipad image PNG as something which we have offline right so whenever we are uploading wherever we are uploading these files we have to make sure that this is present uh wherever we want to upload right so that is out of the way let's talk about uh the files allow so let me guide you through what I have done so far um so basically I established a connection so this uh is basically my uh host which we have the external IP of the host that we have on the AWS and that what we have done is while connecting for the aw I have uh I have done secure connection so I have done SFTP and this is the key which I have added if if you have any key you can add the file here and just click okay and after that that uh what I've given is I've inputed the user uh name which was Ubuntu I've entered the password uh uh and the port which is required and then I hit click connect after that uh it basically connected it to Ubuntu and we are in the Ubuntu right now so on the left hand side of the screen on the this is my uh particular desktop information and on the right hand side uh I have uh my server right so this is the Ubuntu that we have so uh inside of this uh what I want to do is I want to go to v/ www HTML right so we have it right here inside of the home uh we have V and inside of this we have ww and we have HTML so basically what we have done is we have uh set up an Apache server on our AWS platform instance and in there in that Apache server what we have done is we have removed the index. HTML page we going to replace that with our particular things that we have here so let's quickly and this director entry so from the left hand side we have everything stored in our desktop and in his web pages so what we want to do is we want to push this so you can just quickly drag and drop also here itself see it is starting the upload one file was uploaded now we have index.html and we have to push the in image. HTML as well and finally uh we have to put this image as well because we loading that image in index. HTML file so uh this so far was um the uh uploading of everything so let's take this IP address and uh open another window let's try to connect and see what is out there as you can see this is our website hello welcome to our page and you can see click here to go to inat image so this is our image file which is here and in here you can click here and this will take you to our inip pad.com website so this is a very small example of what you can do with uh these things so how you can upload files and how you can uh basically create those connections through fppp servers and make those connections and basically upload your website content on a server so this is basically our server where we have uh uploaded our image files now we can directly open through an external IP address and this is basically we have hosted our website on a server and if I put multiple pages in here so let's say uh if I have to just delete this index.html right here and let's edit our index.html file let's put another HF in there and see what happens so uh let me go to my sublim real quickly so this is my index.html file let's copy this and I have pre-made a few more things already pre-present so click here to see I frame I frame Inus right so this is the iframe one and we have created created that web page as well so the iframe one is right here let's open this using Sublime as well let's see what's there in this code so we have created an iframe Source from the intellipad page so let's now upload this index.html and this iframe to uh our server and see what happens and we can change the image file as well we'll change the image file as well we'll change the height and width of this one as well so we'll put it as 400 or we'll put 200 by 200 let's delete that as well from here and let's keep the image because we'll be needing the images so we have index let's wait for it to get uploaded index is on then inline and then IMG so um if I refresh this you can see now we have iframe in us as well see the website changed a little bit so if I click this you can see the image we have changed a little bit and if you want to see if frame in news okay I did not change that name I guess in the if frame index. HTML okay I forgot we have to change this to if frame. HTML because it's pointing to the image one if frame. HTML just save that um change another thing let's add a break in between and let's replace that file on our FTB server again let's just delete the index.html and re-upload it has been uploaded now let's refresh this as you can see now that that has made the dynamic changes that we needed now it should load the if frame okay the application was not found on the server because I think we did upload if frame. HTML right we did not that's why you can see is since we have mentioned if frame. HTML but we have not uploaded if frame. HTML to our servers it cannot find you can see it's not able to find it right here so what we're going to do now is just upload if frame uh and now let's refresh this now this should work so you can see it has loaded real nice right here so we've done everything and that is it so that is was about the uh presentation guys um so we have seen how to create a basic website and how to host it online and how to make changes to that website and see how that works and we've done that in real time real quickly and we have made a few changes here and there made a few mistakes and covered them up as well so uh that was about it all right guys so now let's go ahead and understand how to register a website name now guys there are multiple ways using which you can do this uh so what you can do is you can go to you know on Google and just type register a website name let's do that right now you'll get various options over here you you'll get uh trts like cheap domains from $1 a year right the most famous I think I've heard a lot about godadi so that's again you know a domain that you can go ahead and purchase uh domain registrations for as low as 75 rupees so it's there are all different kind of ways through which you can uh you know register uh your domain name so let's say if you go to Google let's let's try with Google and I will show you how you can get basically a domain name so for example let's say I want uh um hon dot uh let's say in I want this domain name so let's see if this is available or not so I'll just click on get it and it says is not available net is not not available org is not available these two are available now based on the domain uh you know there there are different kind of pricings uh that you get for different kind of uh domain ends right for example page is available for 720 a year . live is available for, 1440 rupees per year so it depends on uh you know which one you are choosing so if you see all the endings which are possible uh for this domain name uh let's see so you have hon. computer which is available for 2100 rupees then you have hon. which is available for 1 43,124 rupees per year so this is probably how happening because you know my name is very common so let's say uh you know we are learning this from Intel aart so let's go ahead and type in tart.com so is not available because obviously uh you know the company owns it but if you look at the other domain names they're pretty reasonable so you will find in tel.net which is available for 860 rce per year you have intel. org which is available for again 860 per year so if the name is not that common the domain name will be available for a very less price but yes in case the word that you're searching for it's very uh common in nature and there are a lot of people who are looking out for that domain in that case the price will go up for example let's see if we can get anything related to Google so let's search for google.com so in this case uh no domain is available so obviously Google would have taken everything oh if you can see google. education is available for, 1440 per year okay that is cool right now obviously you will be charged over here if you select a domain from here now there are some uh websites which offer you free domains for example there's a website called freom so if you go to freenom.com uh this website will be giving you free uh domain names for at least um you know a term of 3 months right so what you can do is you can sign up on this website so I already have an account so I'll just sign in and I'll just show you you know the uh how you can basically get a domain name and again there's a process of connecting your domain name to you know your website as well and I will be showing you that in uh the further classes as well you know as you move down you will find there'll be a demo where we'll be showing you how you can connect domain name to your website but I mean that is for later right now let's just understand how we can go ahead and have a domain name of for else so once you're logged in so we let's talk about fre so once you're logged in you'll have to go to services and in Services you will find something called as my domains and then register a new domain so this is what we want to do let's click over it so once you're here now it'll again ask you you know what kind of domain do you want so it'll ask whether what is the the the kind of domain that you want and then it'll check whether it is available or not so let's say we search for hon again right let's check its availability so as you can see uh these I think are not available as of now and then there are domains which are available but they are at a certain price so hon do some domain name is not available for free so let's try with something else let's say we try with HTML demo let this is a name that we want to check for so we'll again click on check availability and yes we have a lot of domains which are free over here and as you can see HTML de demo. ml is a free domain so we'll just click on get it now it's selected and now we'll check out right so this means uh so it's going to give me this domain for 3 months for free so that is what I want I'll click on continue so we're not going to check any forward this domain or DNS settings we'll do that later for now I'm I'm just checking how I can get this domain name right so now I'll click on complete order okay I'll have to agree to the terms and conditions click on complete order and with this you can see that my order has been confirmed and HTML demo. ml has now been assigned to my account now how can I check for all the domains that I have so I can just go to my domains and here you can see I have two domains on my name one is Netflix demo. okay which is registered on my domain it is again in a free uh domain which I have and then I have HTML demo. ML and this is again registered on my account and it is also a free uh domain now what happens is now what you'll be doing is you'll be using this domain in order to connect your server now how can you do that so there is an option called manage domain over here just click over that and once you have clicked over there then you will have to go to manage M tools and you will have to go to name servers now guys you will have to use a DNS service over here in conjunction with your domain a DNS service will be a place where your domain will be basically mapped to an IP address or a server which is basically hosting your website okay so we have not hosted our website yet so now we'll go ahead and we'll understand how can we host a website um using various tools uh in web development such as C panel so let's go ahead understand how to uh host a host a website and then probably we'll come back and see how we can connect this domain to that website which we post just a quick info guys intellipath offers a full St developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CS SSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course all right guys so now let's go ahead and understand what is basically C panel so C panel is basically a control panel of the web so what you can do is any server that you want to manage if you are not good with Linux commands you you do not know much about how to host websites all you need to do is you need to get a server which has cpanel installed so today in this session I will be showing you how you can do that with Amazon web services so let's go ahead to my browser and now what I'll do is I I'll go to my AWS account and let me go ahead and sign in so I'll sign in to my AWS account now let me enter the password and once you signed in we'll go to ec2 instances so here is ec2 let's go inside it and inside ec2 instances what we'll do is we'll go to running instances so in your case there'll be zero instances running so this is a shade account that I'm using so there are a lot of people who use this account so that's why you see you know a server which is already running but don't worry we'll just click on launch instance so this is what you have to do click on launch instance and once you click on launch instance go to AWS Marketplace okay so here you will be choosing the kind of operating system which will be installed on your system now let's search for uh something called as C panel hit enter so you get C panel and whm for Linux we'll click on select and here you can see the pricing so uh we will be using the t2. micro option so in case you are under the free tier you will not be charged for this but if you are not under the free tier of AWS free tier is basically awarded when uh you create an account and it's not older than one year so if you have created an AWS account which is older than less than one year or uh which is basically not more than one year old in that casee you are under the freeer you don't have to worry about it so the instance t2. micro is free for people who are under the freeer but people who are not under the free fa this is the kind of pricing which will be charged it it's going to be around 012 per hour right so now let's go ahead and uh choose this so we will be choosing t2. micro let me see so we'll be selecting this okay this looks good so yes so now we'll click on continue so the software itself is not going to be chargeable for you it's just a machine now the thing with C panel is it's a premium tool so right now when we are launching it we are basically going to get a 15-day trial okay so if you want you can purchase the license for cpanel and you can basically upgrade it to a lifetime now when you reach the screen uh the instance type here t2. micro will already be chosen you don't have to do anything click on next here you don't have to choose anything leave everything at default click on next again uh this is your hard disk space so it's 20 GB that's enough for us uh again that'll be default click on next again uh now the important thing is the security groups so in security groups my suggestion to you would be select the default Security Group and ensure that everything has been allowed on Source this this Source basically meets anywhere so all you have to do is uh when you you create your Security Group ensure that these settings are done if they are not done after creating this instance I'll show you how you can set the settings of a security group to this particular setting now for this particular setting why am I suggesting because there are lot of ports it should be open primarily we will be using ports 2087 and 2083 but in case let's say you know you want to access your MySQL from you know your local computer as well in that case your 3306 port should also be open and then your Port 22 should also be open for SSH so once you have selected everything over here click on review and launch and finally you can review all your settings over here if everything looks good click on launch now once you click on launch it will basically give you a popup screen like this and here you have to select a key pair of your likin right so you'll have to download a key pair so how can you download a Keir click on create a new key select put that key pair name over here click on download key pair and then that key pair will be downloaded to your system now what is a key pair a key pair is basically a way of authenticating yourself into your instance so rather than using passwords uh when you're dealing with Cloud instances you get key pairs so there's a public key which is there with the cloud vendor and there's a private key which is given to you now that private key can be used as a password when you're trying to connect to your inst now I already have that key so I'm not going to show you how to create one but if you want to create one just type in the name over here and click on download keypad the key file will be downloaded for you right in my case I already have a file so let me choose that file and that file name is uh Mac hyen Mumbai right let's acknowledge that we have it and let's click on launch instances so with this my instance is now getting launched and mind you guys uh since this is the C panel is actually a very heavy software so it usually takes time to get initialized so be patient uh while you're dealing with it and it's always a good idea to have U you know a static I assigned to your uh server now how can you have a static IP just go to elastic IPS now once you are inside elastic IPS click on allocate elastic IP address and in local select IP address you just click on allocate now what it's going to do is it's going to sign you an IP address which is only specifically selected for your account right now this IP address what you can do is you can attach it to your instance so you just click on actions click on associate elastic IP address and choose an instance where you want to elate to so uh you will have to name your instance something so what we can do is let's go to Services let's go to ec2 uh let's name our instance something so that we can recognize it over there right so so this is our instance which is getting initialized uh this is Mac hyphen Mumbai this is uh you know the key name that we are using and uh let's name it as C panel done and now what we can do is we can find this instance over here in uh in your uh elastic IP address dashboard so let's refresh this page choose an instance and as you can see you can see the C panel name over listed over here here select it click on associate and now this IP address is associated to your instance great so coming back to your instance if you refresh over here you can see that the IP has now changed to 3.6.1 97.0 which is basically the elastic IP that you chose right now once this gets initialized I mean it will take some time so what you can do is you can try connecting to it so just hit enter and yes I mean I think the website is now ready so you will get a sorry page like this now how to get past this you will have to enter https enter the IP address put the quote as 2087 so it's colon 2087 hit enter and it'll give you a warning page like this click on Advanced and click on proceed so with this uh you know you will get a login page like this so you will have to enter your username and password for the instance over here so as of now you don't have the username you don't have the password so how can you get that go to your instances select just copy the IP address and open a terminal okay so if you have Windows uh you will be connecting using py I have a terminal so I'll be using the terminal to connect to this instance so let me first go to the place where I have the file my key PIR file and now let me SSH using the SSH Command right so my key name was Macy Mumbai PM the username in this case will be sosos and the password is sorry the the IP address is this let's trust this and now as you can see I'm logged into my instance which is great now what I can do is I can uh just type in Pudo password so this basically will set up the password for your root account hit enter so as you can see changing password for user account user root so the let's enter a uh password so let me enter some password over here so it says the password is weak but I think uh I'm okay with that because this is a just a demo right when you are working on production please create a strong password okay so as you can see all authentication tokens updated successfully which means the password is now set so I can again go back here and now the username would be root and the password would be what I just said so in my case it's this uh it says a network error occurred okay let me just refresh click on Advanced click on proceed enter the username enter the password and as you can see the login is now successful so now your C panel is getting initialized so first of all agree to the user agreement right enter an email address that you know of it could be any email address and then click on finish and with this now your C panel is getting set up on your server okay so this is how guys you can initialize uh you know C panel on a server so I've just used AWS for it right in case you have your own server you can install sheep manual and the steps after that will exactly be the same now this is the admin account guys so usually you do not work in the admin account you create an account from here and then you use the other account which is uh basically the user account so what we'll do is we'll create a new account over here okay it says whf cannot verify your license during the upgrade process so I have a trial license which automatically gets applied wait 5 minutes and then try again so probably you know the whm software is still getting initialized so let's wait for a while and then try it out see as you can see now the license has been applied and it say the license is of type trial okay cool let's click on create a new account and let's enter a username over here so let's say the username is hymon password let me enter a password okay says password strength pt65 all right let me enter a strong password as you can see the password is now very strong let me enter uh email so let's say I enter some random email hmail.com and now we can just click go ahead and click on create okay so I have to enter domain name as well you can enter any domain name so let's say in tart. local is the domain name that I'm entering and let's click on create now so with this now your account has been created and now you can log in so how how do you log in just go to the same IP address so this is your IP address just select it and the admin account remember it's 2087 the user account is 2083 okay hit enter so now you can see we are at C panel login and now I can enter the username as hon and the password would be what I set if I click on login now so I can see login is successful and now I am on my C panel guys so this is where I will be basically um you know using the C panel from and in our coming session I will show you guys how you can use this particular uh C panel to basically get your work done so now what we going to do is I'm going to show you uh you know how you can use the C panel to upload a website a sample website that we have created and also see the domain name that we registered earlier how we can connect that domain name as well to this website once it has been deployed using C panel now the sample website that we're going to deploy is going to look something like this right so this is a sample website it has a simple login interface it has a signin button and this we are going to try to basically deploy onto uh you know a cpanel server which is this all right so let's see how we can do that now before we go ahead guys uh some some things that you need to understand about cpanel let me just walk you through do the different kind of tools which are present over here right so first of all uh as you can see this is the IP address of your server right and here you have all the different kind of Aesthetics that you can choose for your website right for example you have all the statistics uh here and then there is a theme which you can go ahead and change if you want right so if you have installed themes that you can basically browse over here select them and that's how you can use it talking about the C panel itself when it comes down to what you can use so you can initialize U you know Git Version Control on specific directory so if you click on git uh here you can basically search for uh all the G repositories which are present on your system and in case they are not there you can also click on create right specify the uh GitHub repository that you want to download specify the path where you want to have this GitHub repos repository copied and give it a name and then that g uh Hub repository will now be present inside your code so this is how the first time you can get your website onto cpanel now in case let's say uh you know you already have a website now you're developing on your local system and you want to try out whether that website is working out fine or not on the server so how you can do that so that usually is done using FTP softwares and in C panel you get an inbt uh file manager through which you can upload files to the server we'll get back to this in a few moments before that uh let's look at the other tools so if you talk about databases um you know you can create databases and myql over here so MySQL is pre-installed with cpanel so what you can do is uh you can simply just click on MySQL databases and from here it will basically give you a UI where you can create a new database so as you can see you can create a new database you can um modify databases so there are there's no currently any database inside this uh myc that's why it says there are no databases associated with their account but uh as you can see you can create users you can create databases over here you can give a user a certain permission as well so you have all the table uh permissions or the user permissions that you can Define from over here all right so everything is possible from this dashboard and this is for for MySQL databases coming back uh you can also go ahead and create a database using the database visard you can connect to your MySQL using remote MySQL you also have the PHP my admin available over here so if you click on PHP my admin uh it will redirect you to the PHP my admin console right so that is also available at the click of a button so the moment you create a database uh from cpanel you would be able to see all the dat bases over here and then you can import or export databases uh you know using the utility in PHP my admin so that is also a possibility other than that uh you know you have uh domain so in case you want to set up your server as a DNS server as well you have all these options over here in case you want to you know set up the email server that also are the options over here you can make use of those there are a lot of metrics that you can make use of you can see the bandwidth that is coming for your server the the stats right the errors that might have encountered on your website the kind of visitors which have visited your website so everything is available at the click of a button over here then if you want to manage the security the SSS access if there are any IP addresses that you want to block everything can be managed from here even the SSL certificates can be managed from here right so similarly there are a lot of other softwares as well you can change your password and other things from um you know the preferences section uh you can get into the terminal of the we of the of your server from over here right you can set up the indexes you can set up any Crown job that you want Etc so everything can be managed from here now our Focus today is basically to deploy a website right so I told showed you this sample website which is right now on my local so let's see how we can deploy this on U you know the uh server so right now if I go to the index of this website right you will get a sorry page which will look uh like this so let me go to so as you can see it shows an index of the page but I don't want this I want basically the website that I'm going to deploy so what I can do is I can click on file manager it'll open the FTP client so the from here you can access all the files which are there on your server right and my website is basically going to be there inside public HTML folder let's double click here and this is where my index.html basically has to go so how can I uh basically put it over here what I can do is I can click on upload and now I can just drag and drop file over here so if I go back to my desktop I can just drag and drop the index.html over here so as you can see it is done and and that's it I can close it I can refresh this and as you can see the index.html has now been uploaded to my server with a simple drag and drop I didn't use any FTP tool Etc and now if I go ahead and refresh my IP address you can see that my website is now present on my server so this is how you host a sample hello world or a sample website on uh using the cpanel dashboard now let's go ahead and see how we can connect this IP address to the domain name uh that we created earlier on freenom.com so for this you will have to use a DNS server so there is a DNS server in AWS called Route 53 so let's select it so we will create a DNS Zone in Route 53 we will map our domain in freom to this Route 53 uh service and from the service we will map our ec2 instance which is deployed okay so let's go ahead and do that so first of all I will have to go to hosted zones let's create a hosted Zone over here so this is already one what I need to do is create click on create hosted Zone uh put the same name of the website that you basically created so it's HTML demo. ml let's copy it and paste it here it'll be a public hosted Zone since people from the internet should be able to access it and now we'll click on create hostage Zone okay so with this my hostage zone is now created and in this now you will get some name servers so these are these name servers now these name servers are very important guys this is what is going to help us connect our uh domain name to the Route 53 service so now what we'll do is coming back to freenom we'll go to use custom name servers and here we'll put the name servers that we are getting over here uh sorry here in the Route 53 so let's copy these name servers one by one so all the four have to be copied so let's copy name server one then the name server two then name server three and finally the fourth name server which is this all right they're all present here just click on change name servers okay so I'll have to log in again probably let me do that quickly okay so now it says changes saved successfully let's verify if these name servers are present so yes all these name servers are present now in my HTML demo. ml great this is done so all settings from my freenom uh page are now done and this is going to be same for every uh you know website from which you can purchase the domain this is how you can set it up to connect to your Route 53 now once you are in your Route 53 now your domain is going to pass uh you know is going to direct all the traffic to this uh hosted Zone and from this hosted zone now what I'll do is I will basically uh point it to my ec2 instance so how can I do that click on create record and I want to create a simple uh routing record let's click on next and uh now let's define the simple record so uh I basically want www. html. ml website to be routed to an IP address yes I want it to be routed to an IP address and that IP address is basically the address of my dc2 which is this so let me copy it paste it here and click on Define simple record okay so the record has been created so similarly I will create one more record with without any entry over here everything same just that now I will not be entering www over here click on Define simple record and that's it click on create records now and the records have now been created so as you can see there are four records now one with the www prefix and one without it and it's an A type record okay so now what we can do is uh let's try to go to HTML demo ML and this would be with the https and with www hit ENT enter it says the connection is not private let's click on Advanced click on proceed and as you can see on this domain name now I can going I'm able to see my sample website so now without even uh going to you know my domain name or without even going to my IP address I can simply see the website by going to this domain name right I can try this in Incognito as well so just enter https www. uh htmld demo. ml hit enter and as you can see we can see our sample website so this is how guys you can host a website using cpanel and then connect a registered domain name to this website using Route 53 so we're going to upload it to a web server using FTP that is file transfer protocol applications so mainly we'll be using two applications one is filezilla and one is puty so first before starting off with the session install files client and install put I'll show you where to install them where to download and install them okay so before that I have an AWS server running so I'll not be showing you how to create that in this session so it's already created but you'll be provided a session where that will be shown how to use a server and all so in this session let's just concentrate on uploading HTML and CSS files to the FTP application so that the HTML file is uh visible in the web server okay now let's start off with it okay so this is the server over here so this is the server which I have I've not yet opened it so I'm going to show you how to set it up for your web server so before that you will need you would need file Zilla client so download file Zilla client for Windows and whichever operating system you have for example if you have open 2 or if you have mac xos so you can just click on them and download them so I already have it so click on download and install it once that is done install party so once you go to download puty and you have an option here you can download puty here click on that and you'll be taken over here so Windows installer so I need a Windows installer so I'm just going to go with this so I already have this so 64-bit installer I already have it I've already installed it so I'm closing this right now okay so we need puty to log in into this instance because uh using a keypad we'll have to log in into this instance so first you'll have to copy the public IP address so I've already copied it now now clicking on the putty tool so this is how the putty tool will look paste the IP address here keep it SSH and port number 22 go to SSH authentication browse and I have the key pair file so again these will be taught to you in another session so click on open so once this is done just choose yes and the server is open right now let me just make it a little bigger yeah so now I have this Ubuntu Mission so my username is Ubuntu done okay so the first thing you'll have to do is whenever you launch an AWS server just update it so I'm going to update This Server okay now the server is updated so the next thing is uh you'll have to install a web server so I'm going to install a web server called Pache 2 so this is the web server we are going to install and so I'll be showing the location in which we'll be uploading the HTML file I'm just hitting enter okay so right now it's installed guys so first to check whether any web page is available just copy this IP address and paste it over here so now you can see after installing Apache 2 you have an Apache 2 bu to default page and one more thing is while installing uh while creating This Server so that will be taught I told right once while installing This Server you will be asked to create where is that yeah security so you'll be asked to create a security group so in the security group you'll have to allow one thing that is you'll have to allow port number 80 for HTTP so over here you can see SSH will be already allowed so this is how we logged into the instance using Board number 22 SSH so one rule which you'll have to allow us so while creating you just have to click on ADD Rule and go over here click on HTTP choose anywhere and then save rules so uh right now it's already uh while creating the instance I already provided it so you don't need to provide right now so I'm just going to close this okay so right now the web page is running the web server is also running uh so the instance is running and the web server is also successfully running so one more important thing you'll have to know is the location in which this particular Apache to web server will be uh like getting the file from this/ V www HTML okay so this is where the file is available so now if I delete this file sudo RM index.html and I'm opening another file called index. HTML so right now if I do this you won't see the file because I deleted the file so now I'm just going to type in hello world and I'm going to save this and if I refresh it you should be able to see the hello world page because that is the page over here okay so now before moving on to the next part that is uploading an HTML page to the web server using an FTP application which is filezilla the one thing you have to do is just go back that is CD dot dot and then edit this CH mode make it 766 so that is Pudo CH mod 766 sorry you have to provide okay one thing I forgot was providing the directory name itself okay so Pudo CH mod I'm going to provide 766 and the folder name which is HTML so right now we have changed the permissions of HTML page that is uh we can check that yeah so over here HTML so you can see read write execute read right read write so read write is available so right now once you changed read write so you can basically write from anywhere you want you can write from the FTP application itself so if you did not change this you would have not been allowed to write from there okay so now before moving on let me just open Sublime text and let me just close these okay so right now I'll just create a simple HTML page so it can be HTML so you you guys know already know how to create this I'm just creating a simple file I'm going to name it as FTP page and so body I'm just going to give a header this is the uploaded page and close and done okay so right now I have the HTML page ready so I'm just going to save it in desktop I'm going to name it as index. HTML because index.html file is the one which will be taken by the site so for example let me just open HTML okay sorry just a second solo C mode Tri 7 HTML okay so right now I'll just open HTML okay so right now you have the index. HTML page right okay so let me do one thing uh let me create 1. HTML file and type in something so right now let me go back to the site so if I refresh this which page you will see you will see the hello world page or the page which I created just now that is one .txt sorry 1. HTML so if I refresh this you were still taken to the index.html page but if I search for that particular uh HTML page only then you will be shown that so that's the difference between just typing in uh just having the index.html page and a random page okay so what I'm going to do is I'm going to remove this index.html page so that okay so we removed the index. HTML page so right now we're going to upload an index.html page in the position of the previous one so that once we uploaded it we'll be able to see the web page that is this web page will be available so before doing that we'll have to open file Zilla okay so so this is how file Zilla looks this is your local PC and just close this okay so this is your local PC this is where the servers uh files will be shown before starting off with it go to edit go to settings go to SFTP so here I have uploaded a key pair file so as I told you in the session where they'll be teaching you how to create a server in that particular session you will be shown how to create a key pair file so while creating the server the last step is downloading the Keir so once you downloaded the key pair just click on ADD key file and so you'll have the Keir like this so you'll have to just open it and it'll be saved here now once that is done just click on okay and done so this Keir file is the one which is attached to your server that is the AWS server so when you log in this key pair this is a private key file so this private key file will basically decrypt the public key and open the server for you okay so now to connect to the server okay so let me just close this so you you might think I ran I directly uh let's say open the page and just typed in so I don't want that to happen because you might think that what I'm going to exactly do here is I'm going to upload the page directly to the web server and I'll go over here and refresh this so right now there is no uh index.html page so once I uploaded that so in this place the new page will be available okay so let me just close this now going back to file Zilla so here you'll have to provide the host name which is the public IP address which is the public IP address so copying this pasting it over here next the username so if it is a UB to system it is UB to if it is any other Linux system it is easy to user so I'm just going to put in UB 2 so there is no password and then port number 22 so this is for SSH right so you'll have to put port number 22 and click on Quick Connect so it's connecting to this particular uh IP so it has successfully connected to it and you can see it retrieved the direct Dory listing and it showed the directory listing over here okay so now let's go to root so in root we should have a folder named V so coming down so you can see there is a folder named V I'm clicking on that so inside V we should have a folder named www okay I'll just type in okay so hit enter okay so we are inside www right now so inside that you can see there is a HTML folder so let me click on it and now inside of it you see the 1. HTML page so this is the only page which is available in that location so to this location we're going to upload the file which we have in our local PC so to do that you can basically drag it and drop it over here so going over here so this is our PC so in desktop coming down so in desktop once you click on desktop you will be given all the uh files so over here okay wait a second did I save that file okay I saved it as index index.html so coming down okay it's over here so the index.html file is over here can either double click on it or you can drag it and drop it so whatever you do the file will be uploading so connecting to the uh server transferring the file and the transfer is successful so index.html is has been transferred using an FTP application guys so now going to the server and refreshing this should show the index.html file and now you can see the index.htm file is successfully uploaded and you have hosted your website so I have taken the example of AWS over here so it can be any server it can be any server with an IP address basically you can use any server to connect uh using the file Zilla client because you will have your IP address you'll have all the related information to connect to your server so this is how simple it is you can so I've just uploaded one single HTML file you can upload a series of HTML files with the CSS files over here and basically you don't need to provide any path because they'll be in the same location so then HTML files will take the content from the CSS files if they're in the same location and you can host an entire static or a dynamic website in this particular servers so pretty simple if I put it pretty simple then it basically means your text in the browser can go from left side to the right side which is normal also you can make your text come from the right side of your browser to the left side so that's what we're going to look in this particular session so first let's look at what is the property which makes do this so first there's a property called Direction so the direction property specifies the text direction or writing Direction within a block element so a block level element in the sense for example if you have a P tag or H1 tag you can mention the uh Direction so this particular direction property as a CSS property in that so that the for example if you have mentioned LTR it will keep that element from left to right if you have mentioned RTL it keep that element from right to left so if it is initial it will set it to the default value if it is inherit it inherits from the parent uh parent in the sense for example if the tag is within another tag it inherits from the parent okay for now let's go let's check out this sytax so the syntax is direction is the property LTR RTL initial or inherit are the values so this is how it looks so now let's go ahead and look at the code and let's understand how exactly this works okay so this is the code which I have so let's uh check out this stale tag so I have uh two P tags with a class of RTL and class of LTR so here for p. LTR so p. LTR uh direction is LTR so left to right and here direction is RTL right to left so in this case if I mention an RTL class this text will go from right to left if I mention a LTR class this text will go from left to right so now let's test this out okay so you can see the first line of text goes from okay now you can see the first line of text goes from left to right and the second line of text goes from right to left now let's do a little interchange over here let us make it LTR and let us make it RTL and now let's do so now the first line will go from left to right and the second text will go from right to left so this is how you can manipulate the direction of your text but most probably this only uh only sometimes this particular uh way of direction of text is used mostly we just use the default format even if I remove the class of LTR it always keeps the text from left to right right because that is the default way of displaying text in HTML but it still provides CSS classes to do the opposite of that so that's what we have looked in this session so it's pretty simple this topic it's just manipulating the direction of your text in HTML so this is how it works so I'll just close this so that the next session it won't be confusing as we all know CSS is the way that you add different style color texture to your particular web page right so so it it is something that gives your uh web page that flare that makes it look beautiful right so there are different ways to go about it that you can use to add CSS so uh let's quickly jump into that and talk about how we can add different ways uh to your web page how you can add different uh CSS documents so when your browser basically HTML file or uh when it goes through your uh basically what it does is a browser reads your HTML file so there's a code that is written right so your browser basically reads and whatever the instruction is given it basically performs that correct so when your browser is going through your code and it reads A stylesheet then it basically performs activities based on how it is going to uh look like correct so there is different ways that you can make the browser read or U make the browser work according to what has to be done with respect to the screen right so the three different ways that you can add CSS to your particular web page are uh external internal and inline so these uh names seem fairly very obvious so let me give you an example and show you how it works right so uh an external CSS is basically as the name suggest this is the stylesheet where uh which can change your entire look and face of your web page just by calling something from the outside it could be a file it could be a some reference link so it is basically a file which is outside of your particular HTML code that you have written it's some it's it's a separate file that you write and you can call that file in your HTML file and using the details from that file your current page can um basically create a a web page which will be having different colors and different backgrounds and different textures right so this external file that you write the separate file from your HTML file it has to be uh written in uh with the extension. CSS and uh it should not contain any HTML tags that is the two rules when you're are talking about an external CSS file let me give you an example real quickly on the left hand side that you see of the black box that is our HTML code so if you can see uh there is uh the HTML code normal and this is the link which we have mentioned here we are referring to a HF file which is a intellipad docss and this is what intellipad docss has so this has this body which has the background should be light blue and the H1 should be navy color margin uh 20 PX and uh this is what the body will contain so this is uh basically telling you that you must have this in the body and in the body the H1 should have this property and the body should have this property this entire body will have this property so you are importing these properties from an external file which is called as intellipad docss so uh let me show you that file real quickly so that we get that out of the way so you can see I have the files here which are for our inline internal external whatever so these are the different codes that we have written if you want to see the sublime codes are here mentioned as well so these are the different CSS files which are in here so intellipad CSS files so uh the external CSS if I open as you can see the heading is dark blue and the background entirely is light blue so this is what it looks like so coming back to the presentation so let's move further and talk about the internal CSS so as the name suggest it is something which is there inside of your HTML file so this is not an external source that you are bringing in uh like having a file from outside or bringing a file from outs side which will give properties to your web screen this is something which you write internally so an internal styles uh sheet may be used if only one single HTML page has a unique style right so the internal style is defined inside of the style element as you can see we have mentioned it here the style element this is the style element this is where you define how your style will look like and uh inside this element uh this element has to be uh inside the head section so you can see it is inside the head section right here you can Define whatever style that you want to give to your web page and uh let me quickly show you how it looks like we have already pre-created these files for you so um this is what the internal file looks like you can see the maroon and everything that we mentioned this is the source code of it in here so you can see uh it is just having the body background should be linen and the H1 should be maroon which it is so this is what basically how you do the uh internal uh CSS adding so we saw the external where we call a file which is outside which is here and for the internal we Define it inside of a style now what if you wanted to give one particular line uh some additional styling right some additional style which this so that's why we have another way of giving uh CSS which is inline CSS and inl CSS may be used to apply Unique Style for a single elements and they can add relevant attributes to one particular line and this is not very generally used because people don't prefer it people prefer having a uniform uh looking page throughout a uniform uh uh the whole page should be in the uniform wavelength in terms of the Styles and the colors that you are providing but if you are someone who likes to have uh different colors inside of different things and you want to write inline CSS there is another way to go about it and this is uh how you do it so basically inside of the H1 uh we put a property or an attribute called as style and in there we Define whatever we want to do so if you want to refer the last one last one we had an entirely separate style element here we have an entirely separate style element which is defining and H1 is separate from it but if you want to add it to H1 you can still still do that and this one particular line will have this and uh this one particular paragraph will be having this particular color so we have created that file as well let me show you that real quickly so this is the inline file so you can see um I can show you the code right here yeah so you can see we have given H1 the color blue so that's why it has the blue in here and uh we have given the color red to this is a paragraph and this is all defined inside of the line or the particular header and you can give your attributes and in line itself you can Define how that line will look like so that is the different ways you can go about defining CSS we would have used all of these elements and values and units in HTML code so what we'll be doing is we'll be just looking into what exactly a particular CSS value or a CSS unit means to the browser okay so now let's start off with it so first let's look into the elements so there are a lot of elements which we know so there is body head div M H1 H2 H3 so the headers list just goes on so we we are just looking into five of these elements and how exactly it is represented as an HTML uh block as a CSS block so for example if you type in body how is it represented as a CSS value to the browser so that it provides you the exact same thing for example if I'm typing in just uh the tag of M so it does not know what exactly M does so m is basically associated with the font style of italic and it is directly associated with this particular element so whenever I use the M element with an HTML uh let's say there is a P tag for paragraphs so I'm using M within the P tag so then the text within the P tag will become italic and how does it do it does because this particular element is associated with the font St italic in CSS so body goes with display block margin 8px so it's just defining the size and what how the display should be made and div also display block so it is it'll divide a particular set of HTML elements together and H1 so for H1 the size should be bigger so for example so display is block font size is 2 em so this em is different different from that em this is different uh this comes under units which we'll be looking into margin top is 67 AEM margin bottom is 67m margin left and right are zero font weight is bold so if you are typing uh inside of an H1 tag all of your text in the browser will be displayed as bold it will have a font size of 2 Em which is quite large because H1 is a larger header and it will be in the same location the margin at the top and bottom will have a 67 em space but to the left and right there won't be any uh difference then Li basically displays a list item we know o and UL for order lists and unordered lists so within that you'll have to write the LI tag which basically means list item so that's what is represented in a default CSS value so these values will not be shown to us but the browser will understand so for this tag this is the CSS value for this tag this is the CSS value so that's how we'll have to show the content in the browser to the user now coming to CSS units so CSS has several different units for expressing a length so length in the sense it can be your text's length it can be the size of your text so length is a number followed by a length unit for example 10 PX 2 em so these are values so basically these are digits with uh two other characters of your length unit so 10 PX is 10 pixels so 2 em is a size like that so there are two different types of length units available one is absolute and one is relative so first let's look into absolute so absolute is basically the actual units like centimeters millimeters inches pixels points so these types of lengths are basically not won't be used in a website because they are not compatible with the varying screen sizes they'll just stay to the exact size for example if you're using a mobile with uh 5 cm length and if you're providing the website website's length as 5 cm so it'll be perfect for your mobile but when another person with the smaller mobile uses it it'll be a problem because the website will still stay at 5 cm and they'll have to scroll the website as well as if it is a bigger site then your website again will will stick to a small location on the bigger phone so this is what you want to Avid by not using absolute length so C cm is centimet MMS mm you can use them in your website but it is not recommended now coming to relative length which is the most commonly used length uh length units so you can see relative units scale better between different rendering medium that is if you're shifting from a mobile to a laptop from a laptop to a bigger desktop so using relative length is pretty good for that because it'll know when the size is increasing the size of the units also should increase so that's how it goes with the website also so now first the unit is em relative to the font size of the element so 2 am means two two times the size of the current font for example if the font is 12 so the basic font size is 12 then if you're using 2 em that basically means 2 into 12 which shows you uh the text as 24 the size 24 now ex relative to the x height of the current font so it's rarely used because it only takes the height of the text not the the complete size now CH relative to the width of the zero RM relative to the font size of the root element so the thing is most of these are not used for example PX is used em is used so these are the most commonly used unit types and even absolute lenss are not used so this is just to show if you use em this is how the browser will understand how to provide the size for the elements which have been provided as em for example if you providing 2 em for a paragraph so it will have a current size for p let's say it is 10 so 10 will be M multiplied into two and it will give you a size of 20 so this is what is em and this is what are CSS units so I think we've covered the default CSS values for HTML template HTML elements and same thing goes with CSS units so the basic thing you'll have to understand is when you're providing an element in your HTML code it is not Direct directly taken and understood by the browser instead the browser will be given these instructions that is each element has a default CSS value which will be taken by the browser only then you get the output so there are various different kinds of attributes when we talking about CSS right so an attribute could be a title or a heading or something like that and based on the attribute or different attribute that an element has you can define properties of CSS which can you can provide it to right um so a CSS attribute selector basically matches the element based on the presence or the value of a given attribute so it is basically similar to matching a regular expression so let's say if I'm trying to map intellipad with intelli uh if if I want to check if the given word if in a given paragraph let's say if there is a word uh where there is intellipad for example this is an example if there is a word in intellipad then I match and say that it's one that is one way of matching the other could be that we take all the values right like intellipad 1 intellipad 2 intellipad 3 so in the first one we were matching it as it is like it has to be as it is in the second one we could be like okay we just want anything that contains the word intellipath anywhere so we we will have more matches with respect to that so there is different ways that you can use this attribute selector and that is what we going to be discussing now so um directly let's jump into it and uh uh if you see this this basically represents an attribute so this this is the the thing that we are having inside of this this is an attribute and it can have different values right and we'll be giving you an example to make things clear and all of these values which are mentioned here are always in quotation marks so um basically if you have an equal to sign so as the name suggest if you have any equal to sign it has to be as it is if I'm trying to search for an attribute of type intellipad it has to start with intellipad it cannot be one intellipad or intellipad one intellipad 2 it cannot be like that or any hyphen values are also not accepted it has to be as it is while uh and the next one where we have this not equal to sign kind of thing in this one we can have uh things which are separated by let's say a hyphen right so it could be let's say if I'm going for the word intellipath uh every element that has intellipad if I put the attribute intellipad in this one then it could it will give me back the results which will have intellipad hyphen one intellipad high and 2 intellipad high and three all of that will be there in this attribute value but if you do not want that hi uh but this will only give you the hyphen based elements it will not return you everything so let's say if I have uh in telip Pat Uh 1 12 3 as one word it will not catch that because that is not separated by the hyen value so it will not catch catch that element so if it was intellipath Hyphen 1 2 3 it will catch that value but if it is uh intellipath 1 23 it will not catch this value so if you want all of that to be caught that is The Hyphen values as well as the 1 2 3 intellipad 1 2 3 then you have to use this one this basically gives you those uh element who which are immediately followed by hyphen and everything uh all of this is accepted by this one right um and then there is uh this element which represents an attribute which is pre prefixed by some values so if you have some prefixed values basically a word starting with intellipath and uh and it is followed by something if it's starting by that then you have to use this attri this uh particular syntax and uh if you have whose uh value is suffixed or basically followed by some values or it is uh ending with some kind then you have to use this particular uh syntax and if you have an attribute star is equal to Value then in that scenario it represents an element with an attribute uh of which contains at least one occurrence of the value in the string somewhere so this one is for prefix this one is for suffix so if you have anything that starts if an element starts within telepad then you have to search for this if you want to see if the element is ending with in telpad then you have to use this if you have to see that in somewhere in the string it is there then you have to use this so uh let me show you an example of how it will look like so we have it right here on the screen so so this one will basically return me anything of the kind let's say if I'm trying to map intellipad I 1 2 3 it will return but it will not return the values of intellipad 1 2 3 this will not be returned by this particular element correct and talking about the next one if you want both of these to be covered then you have to use this now this uh here the you can see the class is the attribute here here the title is the attribute and here in this again we have the class value so if if any title has the flower in there so if it will for all the flowers which have let's say uh flower flower one and and just flower these two elements will get let's say solid border of 5 yellow X but if I have something like an flower one this will not be matched by this particular element if you want this to be matched by this element I'm sorry this should be small because my flower is small if I want this to be matched as well along with these two then I have to use this syntax where it it should be titled but just but this syntax right here this has to be used and notice how all of these are always in quotation so that is how attribute selection Works in uh CSS just a quick info guys in tath offers a fullstack developer course which enable you to learn textech from both frontend and p through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel who link is given in the description below without a doubt this course can set your careers to New Height so so visit the course page link given in the description and take the first step towards the career growth with the full stack developer course so what are CSS selectors CSS selectors are basically used to identify or specify specific HTML elements that you want to style for example there can be numerous elements in an HTML page but which specific element do you want to spe uh style can be specified using CSS selectors now there are basically five types of CSS selectors when we uh you know talk about CSS first one being simple selectors then we have something called as Pudo element selectors attribute selectors combinator selectors and then finally pseudo class selectors so first we will be looking at some simple selectors right and then we will be moving on to the others so first let's talk about what is simple selector so in simple selector you have many selectors the first one being the class selector so let's understand what the class selector is so what I'm going to do is I'm going to move on to my uh Sublime so this is how my Sublime basically looks like so first let's have an index.html page so let me create an index.html file and let me create a one do or style. css as well so I have two files now one is index.html and then I have style. CSS so first let's create an index page so let me create a samp sample HTML page with the title sample web app this will be the title body let's say let's put an H1 let's say the hmen is welcome to this website welcome to this sample website let's say this is the name and after that let's put on you know a paragraph and let's say the paragraph is this is the first paragraph in the HTML so let's say this is what we go ahead and Define and now what I can do is I can go ahead and style this so first let me show you how this index.html basically looks like so first of all let me go ahead and run this index.html and it basically looks something like this it says welcome to this sample website this is the first paragraph in the HTML great so now what I'm what I can do is let me first uh bring this window over here yeah so we can see it now so so first let's now Define a CSS file for this and for doing that first we have to you know relate or I have to link the CSS file from this HTML to the style. CSS that we have in the same folder so in order to do that in the head I will add a link tag and the link tag is going to look something like this and here I'm going to define the style.css so the style. CSS has now been defined and I have linked it to this HTML page so let's open the style. CSS now and here I can Define what all styles do I want for my website so let's say I want the H1 of the color blue so how can I do that so simply I will say H1 this is the element selector that we using right now H1 we will define the properties of H1 now and let's say the color of H1 should be red right so let's say this is the property that I've defined so now if I go back to my website if I refresh you can see the H1 has now turned its color to Red okay similarly I can Define the next element that we have is the P element so I can Define that let's say the P element the color should be blue so if I save this if I come back here you can see that the color of my paragraph element is now blue moving forward uh now let's talk about classes because that's what this topic is all about so let's say I have multiple paragraphs right so if I Define it like this let's say this class of paragraph is first this is the second uh paragraph and let's say even uh we Define some H2S over here right let's say this is the second header let's say this is an H2 right and let's say even this class is second okay so now what I've done is I've defined classes for my elements I mean this is not going to have any impact on the UI but let me show you what it's basically going to look like so this is the fourth class and this is the fifth class okay so now what I can do is so first let me show you how this looks okay so right now all my uh HTML all my paragraphs are blue in color why because in my style. S CSS I specify the P element to be of the color blue that is fine right but now let's say I just want my second paragraph to be blue in color so how can I do that so whenever you specify a class you have to use um you know the color as or the syntax as dot right so any class that you want to specify the you have to prefix it with Dot and then you have to mention the class name so let's say I want to do I want to make the second class as yellow so I'll just Center second right I'll open the curly braces and now let's say I specify the color over here as yellow so let's see what happens now so if I come back if I refresh you can see all the elements which were there in the second class are now Yow yellow in color now what if I just want to change a paragraph which has a class second so how can I do that now in order to do that I'll just remove this or let's not remove this let's just enter the element of which I want to change the second class as yellow so I want to enter the element as P so a p element which has the class as second the color should change it to Yellow so let's save this come back refresh and as you can see now only the paragraph whose class is second is now changed to yellow color so guys this is how classes work all right guys so now that we have understood class selectors understanding element selectors is going to be very easy for you okay so coming back to my subline time so let me quickly arrange the website up all right so now what we are going to do is we are basically going to understand what are element selectors so what are elements elements are nothing but all the P type of tags that you specify all the H1 tags all the H2 tags these are called elements in an HTML right similarly let's say if I specify a link as well a name let's say I specify it as uh hello and uh what I do is I give the this is an anchor tag that I'm specifying let's say I give the uh HF for this as www. Intel apart.com and let's say this is sample link right so this again is an element so any element if you want to select and if you want to style it all you you have to do is specify the tag of that element and then you can go ahead and specify whatever you want to do with that element right so these are what element selectors are it's a very small topic I understand that but since now you understand what element selectors are you can actually go ahead and build over it by using classes by using ID selectors Etc okay so next in our topic list is ID selectors so let's go ahead and understand what those are all right guys so now let's understand what are ID selectors so ID selectors basically help you to select an element which has been defined according to an ID now how can you specify an element according to ID uh you have specified a class you can specify an ID in the same way so let's say ID is equal to you can specify any ID over here let's say the ID is hello let's say this is an element of class third and and of ID hello so now if you want to style this element let's understand how we can do that so again you will have to go to your style.css and here for specifying any ID you will have to specify a hashtag right so hashtag and then the value of the ID that you have specified in this case it's hello so let's specify it hash hello and then let's specify the properties of this uh element or this uh ID so let's say the color is is going to be of uh blue all right so let's say this is what we specify and now what I can do is now since style. CSS has been specified index.html has been specified let's go ahead and run this so I'll just click on open or run uh this will basically open this up and uh here we had specified blue I think earlier as well so now let's specify some other color let's say it's orange right save it come back refresh and you can see that the element which had the ID as hello is now orange in color right so how do you specify an ID by specifying an hash in front of it and with an hash what the uh compiler understands is that whichever element is going to have an ID of whatever is following hash is going to be styled in the manner that you are specific Ying over here right so guys this is what id selectors are and similarly there is something called as universal selector and we'll be understanding it uh in a little while but before that there's okay there's one more thing that you need to understand and that is about combining different elements so how do you specify elements for two or three kind of elements so let's understand that so let's say I have specified the H1 color as red I understand the P color is blue and I understand uh I've specified the H1 color or let's say I specify the H2 color also over here so let's say the H2 is going to be of the color uh orange okay so let's say this is something that I specify now what I can do is uh I can go ahead and I can specify the P color as well as blue how can I do that so let's remove p okay so what we'll do is we'll specify this P let's cut it out and now let's specify okay so let's cut out this p and let's say all my H2S and P should be orange in color so I'll just specify comma P save it and now let's see how this looks like so I'll just come back uh let me open it here itself and now you can see that all my H2 and my paragraph are now orange in color why this see yellow because I've have specified the second paragraph to be of yellow in color all right that's why uh dot basically as you have learned in the previous session as well dot basically specifies this class so the second class of p is going to be yellow in color but all my H2S and all my P are going to be orange in color so instead of writing it twice what I can do is I can include it in one style and this is how you specify right so now let's say I go ahead and a specifi a also over here so let's see how this is now going to look so if I refresh you can see even my a is now orange in color okay so guys this is how you go ahead and combine different elements in CSS all right all right guys so now let's go ahead and understand what are Universal selectors so guys whenever you want to go ahead and specify an HTML file where a blank rule has to be applied you basically go ahead and use the universal selector for example let's say I want to go ahead and align all these texts on the center so how can I go ahead and do that so all I can do is instead of specifying each element like this I can specify the universal selector which is star give the curly braces and now I can just specify the uh align property text align property and I can say it's the center property that I want to align save it refresh and as you can see all the elements now are Center aligned right so this particular selector is basically used when you want to override some settings which are there in Chrome for all the elements in HTML right and now what you can do is now since you all your elements are aligned as center now you can pick and choose which elements you do not want them to be aligned in the center for example my second paragraph let's say I want to go ahead and I want to text align it uh on the left hand side okay so if I refresh now you can see only my second element has been assigned to the left hand side so this basically is a blanket rule that you can apply and then you can play around with the properties of your elements uh specifically if you want to change something otherwise all the elements will be following the property which you specify in the Universal selector so guys this is what the universal selector is I hope it's clear to you so guys with this we come to an end to understanding uh the simple selectors and then now let's we go ahead and understand the different type of uh a selector Rule now all right guys so now let's go ahead and understand what are descendant selectors so guys descendant selectors basically means as the name suggest all the descendants of a particular element embibe a particular style that you specify in the stylesheet now let's come back to a code to understand this so first of all let me remove all the style which is there in my website and if I refresh you can see this is how my website is right now looking okay so now let's understand what are the different kind of elements that I have in my HTML so first I have the body then I have H1 H2 then I have a div tag and inside that div tag I have five paragraphs and I have an A- link okay I also have a paragraph which has an A- link inside it right and then that paragraph is closing so when I talk about descendants descendants are basically all the elements which are inside the div tag okay so now what are descendant selectors so let's say inside the div tag I want to select all the a tags which are uh you know descendants of the div and let's say I want to go ahead and change their color to Red okay let's say this is is something that I have specified now if I go to the website if I refresh you can see all the a tags which are there in the div no matter whether it's inside the paragraph or no matter if they are directly specified inside the div they have change their color to Red okay so the key thing to understand over here is the Childs right so what do I mean by Childs so for example if I come back to my code in the div tag the child of div tags are basically these paragraphs and this a tag okay these are the direct child of div but when we talk about this a tag this a tag is basically inside this P tag right and hence it's a child of this paragraph It's a grandchild of div right but it's not the direct child of div still when you using The Descendant selector so understand it like this that whenever you talk talk about descendants right your grandchild will be a descendant of yours right but when you talk about child only your son or your daughter are your child right your granddaughter or your grandon is not your child right they are your descendants so similarly in CSS also it's work like it's going to work like that right now we are we dealing with descendant selectors so all the descendants which are there inside the parent element will be basically included in this style element so all the a Elements which are a descendant of div are basically going to have the color red okay so this is one thing that we have understood all right guys so now let's go ahead and understand what are child selectors so guys child selectors are basically the selectors which only deal with the immediate child of the element for example coming back to our code uh let's say this this is my main Dev element and the immediate child of this div element are these paragraphs and this a tag okay this a tag which is inside this paragraph is not the direct child of this div so everybody would agree to this right now let's say I go back to my code and instead of giving a space so space basically means a descendant selector but instead of giving a space I give a greater than sign so this means only the child of div should basically have the color red so let's see how this goes so I'll just save this code refresh this website so this link is not a child of the div which is having all these paragraphs and this a tag right this a tag is a child of this paragraph So if I refresh you will notice that this now is the default color and only this a tag which is a direct child of the div which has all these elements has now changed the color to red right so instead of this greater than size if I just include a space that means it's a descendant selector and in this case all the descendants which are of the type A are going to get the color as red but if I remove this and include a greater than sign in that case only the child of the diff tag is going to be of the color red first let's look into what exactly is Pudo elements then we'll move on looking at some examples of using pseudo elements a CSS pseudo element is used to style specified parts of an element so an element is basically a HTML tag and CSS pseudo elements are used to basically take a part of that particular element and stylizing it or using certain uh let's say color or certain styles to make it different so that's why we use Pudo elements for example if you have a large paragraph and you just want to change the color of the first line you can there is a sudo element for that you can use that to just uh style the first line or also there is a for the first letter of an element so you can change the first line as well as first letter and there are other SoDo elements and I'll be giving you one more example at the end of the session so sod element is used to style specified parts of an element so it's that simple there is a sentence if you want to just change the color of the first letter of that sentence you can do that using a pseudo element so now this is how a pseudo element looks it's pretty simple you have a selector and you have two colons you have the pseudo element selector in the sense for example if you want to use it on a P tag if you want to use it on a H1 tag if you want to use it on a div tag uh so that is the selector so you'll have to provide for example if you're going to use it on a P tag you'll have to provide P pseudo element is this what we going to see you'll have to provide the accurate suro element which you want for example if you want to change the color of only the first line or first letter you'll have to provide it over here then you'll have to provide the property and value now coming to pseudo element examples here is where we're going to look into the EXA exact uh SoDo elements so first we'll be looking into three SoDo elements with examples first one is first line then first letter and then the after pseudo element so let's start off with first line so the first line pseudo element is used to add a special style to only the first line of the text so let's say this is the selector this is the pseudo element so colon colon first line is the pseudo element so now you have your so you can see property and value so this is your property color and you want it in blue font variant all of it should be in small caps so now so let me take it to an example and show you how this this works so I have some examples available uh so I'm just opening it and also I'm going to open it in a text editor so that we can check sorry so that we can check this oh so I'll just open Sublime Text I have all of this available over here I'm just going to open this file yeah so sud sudo X1 is the file which I opened over here so this is just to change the uh color or whatever things you want to change for the first line of your paragraph So the first line is not the first line over here it is the first line which will be shown in the uh browser itself for example if I make the browser smaller and it will change accordingly so if there are only few words which is in the first line only that will be changed and the rest of the lines will remain the same so how to do do that so rest of the HTML code I'm not going to explain because you know that so we are providing a stale tag inside the stale tag p is my selector because that is where I want the change to happen and then we are providing the pseudo element and I'm providing the uh property and value so I'm providing property as color and blue so let's say if I make it red and save it and you can see the first line has been changed to Red so this is how pseudo elements work Okay so we've seen one sudo element now let's go back to the slides to check out the next one so next one is first letter so it's the same thing as pseudo element for first line but in this case it will only change the first letter of the entire P tag so let me open this and this is the example I'll close this and you can see only the first letter has been changed to a larger font also the color has been changed so now let me open this file in subl time text and over here you can see I changed the solo element from first line to first letter uh it's in red color the font size is XX large so let's say I want I don't want an XX large and I can provide XX small and save it now let's go back and you can see it has become small and you can the one the changes will affect only the first letter of the selector you have created for example let's say my selector is going to be H1 I'm typing in this is the header uh so this is the title and I'm going to change this to H1 I'm going to change this back to large now if I go and and you can see the first letter of H1 has been changed so now let me copy this you can have multiple as well so let me copy this paste it change it to P now if I do the first letter of both of these selectors so this is H1 this is p so both of them has been changed to a red color and a larger size using the pseudo element okay so now let's go back and look into the last pseudo element which is after so this particular SoDo element is quite different it is used to insert some content after the content of an element for example you can add more text you can add an image you can add a video file so in this this case we going to add an audio file and sorry in this case we are going to add an image and check it so you have the syntax same syntax uh selector uh sudo element property value so this is the file first let me open it in Sublime Text and show you then I'll show you the output okay so first we have inside this stale tag we have the selector we have after and inside that we have content and URL so I'm just going to delete the P tags so that it's better visible and I'm going to give some space save it so now uh what so what do you think will be the output so will this particular file be under this title or will be to the left or to the right so it is going to be after so for example this particular image will appear after this title so any title which has H1 will have have it after for example if I type in P random text so this particular this particular tag should not have this image after it it should only the tags which have H1 tags are available so they should have this image after them so we have it saved let's go back and let me do an enter so now you can see this image comes after The Heading comes after The Heading and this particular tag is unaffected so there is also one more s element element and it's pretty simple it's called before so this Pudo element makes it makes the images come before and you can see the change has been happened so it puts the images before the text and so these are pseudo Elements which you can use to command your uh particular parts of your code in HTML so this is how you can use pseudo elements on HTML guys so I think you have understood what is a pseudo element and how you can use it so there are more pseudo elements I just shown you few of them line letter after and before let's talk about another very important feature that CSS brings you so uh this is with respect to giving borders and sizes so initially the problem was uh this this is a simple fact that if you do not use this uh box sizing property um then the problem is that the width and the height of element of the box that will be calculated of whatever the Border will be like that will be the width plus padding plus border equal to the actual width of the element and height plus padding plus border is equal to actual height of the element but what the problem with this one is right U is the fact that if even if I put let's say if I want a One standardized box across uh uh with with same spacing with respect to my elements I'm not able to achieve that because for that I have to try uh do trial and error again and again because for different uh amount of text in the boxes there will be different uh size of the boxes created which will be very inconvenient right the boxes won't look similar and it won't match what you want to do so to eliminate that uh there is this property called as the Box sizing property and this allows you allows us to include the padding and the Border in elements total width and height so with that padding what happens is you can have a standardized uh set of the Box a standard model if you will for that box let me show you an example to make things more clearer so um this is a code which I have written uh an HTML code with CSS to uh create a box around this uh default configuration so here I have not used any boxing properties as you can see the width and the height are the same and the border is the same everything same just the color we have placed differently so that you can understand it uh much better and here we have another code where we have used again the same width and the height but this time you can see this change in syntax where we have included just one line just include one line which is box sizing uh colog border box that is it that is all you have to do so what's the different do that uh that brings to the screen so let me show you that so as you can see this is the default boxes with you I've created so let me bring the code screen right up so that it's easier for you to understand so you can see this blue one again the code is the same for the both but the blue box is smaller and this box is much bigger and because it depends upon the element the Box will be created around so to avoid that problem we have created another one which is our boxing property if I'm not wrong so broing property file that we have to open here and as you can see this one we have the same size box and all the difference that it has made is this one so if you want to have uh one particular style where you have the boxes of the same size then in that scenario you have to use the Box sizing property but if you want it to be based on your element and look something like this then you can go for the default method as well but the boxing property basically makes it more uh intuitive more easy to understand and uh it's it's a standard which is followed throughout the world so but the choice is still up to you but this is what it the boxing properties brings to the table so first let's start off with borders so in borders we are going to look into something called border style so how border Styles can be managed and what kinds of Border styles are available in CSS so the CSS border properties allow you to specify the style width and color of an element's border so using the Border properties you can do all of this but we're going to look into especially something called border style which can be be used on any element you want and it will provide a specific b style so uh the b style property specifi what kind of border to display so there are various border Styles there is dotted which provides you a dotted line around the element there is dashed line there is solid lines there are double lines uh no lines hidden lines grooves ridges and inset and also outset so we've seen uh so we're going to look into all of these B right now from a single piece of code so uh we're just going to look into the dotted dashed solid so we going to look into some of these we can also check out the others as well if you want to so now let me open the text editor yeah so I have the text editor uh you can see p do dotted and the Border style is going to be dotted so this is for dotted uh then dashed solid double Ridge hidden mix so these are some of the uh options provided over here so these are the things which we going to Tex test now so let me open this file borders and now you can see this is a DOT of border so this is dots around it dashed border solid border so double border has two different lines Ridge B is very thin with a 3D uh effect over it so you can see that over a little bit over here so it has a 3d effect a hidden border has a border it this has a border but basically it does not show and a mixed border so let me go back to the code so let's just change some of these so let's change this to group and what else there is none and there is insert an outset so there is none inset outset so these are some of the uh things which are not uh covered so these four first four will have these four so let's check that and you can can see uh so first one I gave what did I give grw so this again a type of a 3D uh border so Dash Border in this case it does not even have a border uh hidden border has a border but it's hidden it's just white in color or it's just hidden with the color of the background a solid border has an inser it shows like it's a little uh it's a 3D B but it goes a little inside outside it's like it's coming out of the screen it's a little uh 3D uh even this is inside basically it looks like it is a little it has a little depth and an outside border has a little height so these are the different kinds of borders which you can create using the Border style property so this is how we can do it by mentioning it as class Okay so we've seen this so next we'll look into CSS backgrounds okay so CSS background properties are used to Define the background effects for elements so let's say you have a HTML code so you want to mention certain background properties for example you want uh your website to have a background color or you want to have a background image or you have to have a smaller image which is repeating or you just want an image in a top right or a top top left corner which is fixed so that even if you scroll the image is still there and also position so as I told you top left or top right so that is divided by position so first let's start off with color so let me show you how you can embed color in your website so I have the back color yeah so uh it's just the same code so I'm just adding an H1 tag so body is going to have a background color of yellow and opacity of five so first let me make opacity one so that I can show you the difference and it's going to be back color and you can see this uh I have the text and I have a background yellow so now coming back to the code in this case opacity is provided one that basically means the text will be shown completely the background color also will be shown completely but if I make this opacity let's say 0 5 so in this case the background color will uh so the uh text in the background colors will lose a little bit of its opacity so half of its opacity will be decreased so before it was opaque so right now it is opaque so if I do an enter so I've already changed it over here if I do an enter the opacity of this particular text will reduce to0 five of it so that it becomes a little translucent and you can see it has become a little translucent so now let's make it one so again it'll lose a little capacity and you can see you can read it but still it's merging with the color of the background so if you make it zero and it merges with the background and it's completely transparent so this particular text is completely transparent now so you can just change the opacity and it works like that uh so this is what the background color property does so I'll just close this so we've seen that next going back next is background image so in this case you can attach an image instead of a color to the background of your website so now back image okay so again it's the same thing but instead of a background color you'll have to include a background image property colon so URL inside the URL I'm just providing a sites link of for an image so this is a high quality image so that it will cover the entire web page so again I'm just having a random uh H1 tag and a background image will be covered using this image so let's open this side and check it out back image and you can see it has a background image it has a fixed background image and the text is over here and this is how you can attach a background image guys so it's pretty simple you'll just have to use the background image tag and inside the background image tag you'll have to provide the URL of the image if you're using an online uh let's say if you're using an online U image if you're using an offline image it's pretty simple you'll have to use SRC so let me close it go back to the slide next is background repeat so let's say you have a smaller image but you want to make that image repeat multiple times in that case you can use the property background repeat let me take you to the code let me close this so back image repeat so in this case uh sorry in this case you'll have to make this background repeat and that's it so I have provided an image uh background repeat uh so this is just uh text which I provided so I'll open so right now you're not seeing the image so I think the uh URL link which I provided is wrong one second I'll just change that so uh yeah yeah so the mistake was not that so this is going to be background image because you'll have to choose the image First Once you have choosen the image you'll have to use background repeat and inside repeat you can use repeat which will repeat into the whole uh let's say the whole website then there is repeat X only for the xaxis y- axis and no repeat at all so let's first try repeat and you can see the image has been repeated all over the place so now let's do the same thing with X this is only for horizontally so you can see it's only repeating horizontally now let's do the same thing for y it'll only repeat vertically and if it is a no repeat then there will be only one image you can see that so this is how repeat works you can add this particular uh property and provide what kind of a repeat you need so we've seen this as well then finally we have two one is background attachment that is you can have a background attachment which is fixed and also the background position of that attachment so now let me take you to the code and explain it so first of all we are attaching in background image and we don't want repeat uh so these two we already know now coming to background position so we are providing this particular image should be only available in the right top of the website so when you open a browser the image should be in this location that is the right top of the uh browser the margin right so we just providing the mar margin size to the right which is 200 pixels now background attachment also should be fixed so for example if I do a control uh sorry so now you can see all fixed inherit initial scroll so you can either select any of these or if you select fix it let's see what happens so we have a background image it should not repeat the background position background images position is top right and the background attachment is fixed open this okay so right now you can see the images in the top right I think you able to see that and the attachment is available over there so now if I scroll this the image should still be there so you can see I'm scrolling down but the image is still attached to it and it's still available there so now going back to the code let's try changing this let's make it let's say scroll now let's try what happens so now you can see if I scroll the image will not scroll with the scroll bar so this is how you can use background attachment so let's discuss about um table styling using CSS so um through HTML we all build a lot of different kinds of tables and uh most of the tables generally look just very plain and simple black and white but uh that is not similar to what you see across the board right so every table has different kinds of features and there's a lot of different ways that you can style your table and uh you can greatly improve the way that your table looks uh that you have made through an HTML code you can greatly improve the look and feel of it by using CSS and there's a lot of different ways that you can go about it we'll be discussing a few of them uh we'll be discussing like table borders collapse table borders alignments and whole varable table apart from these there are a lot of different things like um there is caption is there where you can have a table caption on top of the table where it tells you what the table is all about other than that you have uh different things like height and width adjustment that you can do um there is a lot of different other things that you can do that you can explore but uh we're going to be talking about the most used ones which is across the boards you can even have strip tables where you have uh tables which have alternating colors in them if you have seen something like that so that is also out there so uh let's start off with discussing what are table borders so this is a very standard thing which is out there right so every table has a border and every element in the table will also have a b so uh it is basically something which does not have a shared boundary if you will and uh you can see the depiction right here so the Syntax for this would be uh table th comma TD uh you can choose uh if you want th and TD both to have and in there you have to define the Border as 2px or solid 1 PX and you can see that the the way that this works is everything is having its own boundary right so every element has its own boundary and the table as a whole has its own boundary as well so this is not having a shared boundary among themselves this is every uh every element has its own border and the way uh and if you increase the Border width and or or the uh depe of the Border you can see it gets more broader more more much more visible in the table Waters as you can see in the images right here so to solve the problem of this being uh a little bit too much on the side of things they came up with the thing which is called as collapse table uh borders so this is basically a property which is used to uh specify if the elements in a table should have a shared or separate borders right so you can have shared or separate borders all you have to do is Define in table something like this border collapse uh the syntax is on your screen the table TD DH and you can uh choose the uh border element that has to be there um there is one thing with respect to collapse table borders is the fact that uh uh when when you're defining this make sure that you uh you declare that it's dock type HTML uh when you start the document because uh in some of the Internet Explorer 8 and different other web browsers if it is not defined there might be some issues with respect to that and it can go crazy at point of times but other than that it is fairly Flawless if you define and you can see the example how it looks like and it has shared border and not every element of its own is having separate borders you are sharing the borders among the elements uh moving along we have alignments where we have we discuss about two different kinds of alignments so that could be horizontal alignments and there are vertical alignments so talking about the horizontal alignments you can you can use the uh text alignment property to set the horizontal alignments where you can put the elements on left right or center of the content uh in the TD or th uh by default it is different for TD and th when we talking about horizontal alignment uh if you are going for th the it will be Center aligned of the content and for TD it will be left aligned the other type of alignment that we have is the vertical alignment and in the vertical alignment property it allows you to uh put the contents on the top bottom or the middle of the content now uh in the content you can uh for this there is no separate segregation for the default value uh both for TD and th the vertical alignment default value is middle and the syntax is on your screen on how you can Define it and that is about the El alignment side of things moving along we have hover aable table so you can choose an hover aable table uh if you want to highlight the elements where the mouse cursor is going right so all to do that all you have to do is Define TR and colon uh hover and you can Define the background color that you need here we have defined an ex decimal code which gives you a a a a shady um silvery background but you can choose any color of your own choice so basically what you'll have is a normal looking table which looks like something like this and as soon as you hover over any element uh it will change the color defined by you and it will change the color that is defined by you so that is what basically hoverable table does uh so that was about the uh table styling that we going to be discussing other than that you can check out different properties like caption uh and height and width that you can adjust and you can uh change the padding of the table with respect to that you can have strip table so there's a lot of different things that you can do but these are the few basic ones which uh needed to be covered uh because that is something which is covered widely across the uh industry so that is about the table styling that you need to know so uh I'm pretty sure you know what is static and what is dynamic is basically static is something which stays the same and dynamic has changes uh almost let's say frequently there are changes frequently so that's the main difference so now let's look into it a little deeper so first of all as a static web page you send a HTTP request to a server in which you have these HTML Pages available so once you give the request the server will get the request and return back the response with the files you need and those are the files which you see in your browser the HTML Pages now coming to Dynamic web page it's a little complicated that is once you send your HTTP request in it'll first check out a server and then it'll go ahead and check out if there is any backend processing needed that is in your web page you might have a button let's say you want to enter in some details or you want to register to that particular website so you put in all your details and click on sign up so now this data should be written into a database so to be written into a database you cannot just use HTML so now using a server site scripting language like PHP so now the front end is in the first server over here so once the request is received it'll be sent to this particular server This Server takes the request in and once the request is taken taken in it'll basically run the appropriate command to write the uh registration details inside the database so once it is written it'll send back that it is written and the backend process is done so now the web page is returned to the user that it shows you are successfully registered you can log in right now so these are the processes of static and dynamic web pages so I'm just giving you a simple example that's what registration pages okay now coming to all the other differences so let's just discuss this in this simple table first of all the content will stay the same until it is manually changed so uh you cannot dynamically change it so only when you change the content of the website the changes will be available in the uh let's say the server and in Dynamic web pages the content is obviously different for each other so let's consider Facebook so my feed will not be the same as your feed uh what whichever social media site it is my feed will not be the same as your feed so those are Dynamic web pages they show what you need and then coming to uh the next point it's the pages are simple so basically it's just HTML CSS and JavaScript and mostly it is plain text with certain images so those pages are pretty simple and dynamic web pages are a little complicated because you need the front end code and once you click on some buttons an action should be taking place and that action can be a dynamic action like retrieving data from a database so for that these Dynamic web pages are more complicated than static web pages and they have a lot of layers now coming to static web pages they load quicker because they are just text and images obviously they need just less amount of data to less amount of time to pick it up but the same thing goes uh a little more higher in Dynamic web pages that is they take a lot of time to load so static web pages they mainly use HTML and CSS uh even just using HTML you can create a static web page so now HTML CSS and JavaScript using these three you can create static web pages but coming to Dynamic web pages you will need a serers side language like asp.net or PHP then St web pages can be hosted in a simple cloud storage service that is let's say you have Google drive or let's say you have the there's one drive so Dropbox so using these storage simple Services these are just cloud storage Services right even using them you can host your static web pages because there is no need for you to host it on a complete server because there is no server side processing but coming to Dynamic web pages all your websit should be hosted in a particular hosting server so that all the uh backend Services all the backend code can run and finally the cost will be less obviously for static web pages and the cost involved in creating that web pages are a little higher because in the static web page you just need a designer to design the website but in Dynamic web pages you need a front end developer a backend developer and developer and database engineer or database admin who can help keeping the data secure so now these are the differences between static web pages and dynamic web pages the main difference is static web pages are simple Pages they are just HTML and CSS Dynamic web pages also have a server side to them so there are two major ways of doing this and one way is slightly better than the other way because it provides a lot of different advantages so that we'll look in in this session also we'll be doing some demos with two of those ways first let's look into embeding JavaScript in HTML files so as I told you you can embit JavaScript into HTML in two different ways one is the script tag so another one is an external Javascript file so there are two ways as I told you so script tag in this case you will embed the JavaScript within the HTML file itself the second option is an external Javascript file in this case you'll create an external Javascript file in which you'll had uh you will add all the JavaScript code and you will link this Javascript file to the HTML so these are the two different ways so for shorter code using the script tag is advisable that basically means if you have a small HTML file in which you just want to add one or two lines of JavaScript then you can straight go ahead and add your JavaScript to the HTML file itself because it's a smaller file nothing else is going to change but if it is an uh let's say a bigger website with multiple HTML Pages then you can basically build one xnl Javascript file and you can connect that xnl Javascript file to all of your HTML pages so that there is only one Javascript file to load for the browser which will make accessing your website even faster because only one Javascript file is loading so if that does the Javascript file will be cached in the browser so now only the HTML content has to load from the server so this makes the process faster if your script if your JavaScript is within the HTML file itself then it'll take a lot of time to load the page so these are the two ways and this is the advantage of external Javascript file over the script tag because you cannot go ahead and place JavaScript in each and every HTML file instead you can create one H one Javascript file where you put all the JavaScript code and Link it with all the HTML files with one sentence okay so now first let's look at the script tag so in HTML JavaScript code is inserted between the script and/ script tags you can place any number of scripts in HTML document that basically means you can place multiple number of script tags within an HTML document and there there won't be any problem also you can place the script tags in the body section or in the head section or in both and there is no issue in placing it wherever you want okay so now let's look at a demo in this particular like topic which is script tags in HTML files let me open Sublime Text okay so it's open yeah over here you can see it's a typical HTML file but in between inside head I have a script tag then inside body again I have a script tag so you can see over here uh sorry this is the script tag yeah so coming from the top so this script tag inside the script tag I have a function called my function so what it does this it will get element by ID demo so here I have provided for a P tag I've provided the ID as demo and have provided change this sentence okay so now coming over here back so here it shows paragraph changed here it shows change this sentence so button type is equal to but button on click my function so when I click on this button okay so when I click on this button this function is triggered and element by ID is demo that basically means it changes this text because the ID is demo over here it gets element by ID so the ID is demo and the element which has the ID demo is this P tag so it changes this sentence to this sentence so it's pretty simple if you look at it you have a function and you have so it changes the text of any element which has this particular ID and coming down this particular element has the ID demo and I have embedded a button which basically uh if you click on it will trigger this function so once it's triggered it'll automatically check for the element which has the ID demo and it'll change the text of it and before that I also have another script file over here which shows document get element by ID example do inner HTML JavaScript text so over here this document will directly write its content uh in this ptag because it's it gets an element by ID example and the ID example is available in this P tag and also I used document. write so this is to directly write not writing by uh like getting an element by ID without getting an element by ID this is to write it directly okay so now let's test this out and check out how this works yeah so you can see JavaScript text going back to the code so uh JavaScript text so this is the sentence so it got this element by ID and it wrote this text and then one more text you can see one more text next comes change this sentence so this is this P tag but it no it is not changed yet because I not clicked the button to trigger the function so now this button type is equal sorry this button type is equal to button because uh this is an HTML code so in this I'm triggering this particular function which is again is inside head so you'll have to remember that if you have your script tag in head or body it doesn't matter you can just call a function which is in head or from head you can call a function which is in body because JavaScript doesn't care about that it just car cares about the functionality of how you're doing it so if it works it works and then on click is equal to my function so now if I click on this try it button it'll change the sentence to paragraph changed how how does it do because this P tag has an ID of demo and document. getet element by ID searches for an ID demo and changes the inner HTML to paragraph changed so now if I click it it changes the paragraph to paragraph changed so for example if I change this to let's say something else save this refresh this and click on try it it won't work because it cannot find the ID and the ID is not available anywhere and let's say if I create another one and make this H one and now make this demo and type something like hello change this and H1 so now this will change this particular H1 tag because that that there is so this tag has the demo ID so if I click it'll change the H1 tag so it searches for the ID tag because it's going to get the element by ID which it t in its tag itself so once it gets the element by ID it will change the HTML of that particular element itself so that's how it works um so I think we've done this okay so now going back to these slides so we've seen the script tag now let's see external Javascript so external javascripts are practical when the same code is used in different web pages as I told you if there are multiple HTML Pages which needs JavaScript and you can create one Javascript file have all the JavaScript in that file and you can link this Javascript file to all the HTML pages so wherever there is a Java JavaScript need uh that that particular HTML page will fetch the JavaScript code from this singular file which is available so that makes the entire process of the website faster because it just needs to load one Javascript file and nothing more also keeping Javascript file separate from the HTML file which basically separates the HTML and the code which makes it easier for a programmer to read it a web developer to read it because uh JavaScript uh mainly concentrates on the logic HTML is more of the structure of the website so it is easier to separate both of them and check out how they exactly work together also cached JavaScript Pages can be loaded faster so there is only one Javascript file and if it gets cached in your browser that makes the process even faster because the Javascript file is already cached only the HTML loads then whenever you are trying to do and uh let's say if you click on a button and if some operation happen that will happen even faster because the the Javascript file is already available in your browser so now let's look at an example for external Javascript and it's over here so I have an HTML file which is like very small and you have a uh you have a Javascript file so now let's start off with the HTML file over here uh so the thing is I've provided Source message. JS and this is also message. JS but remember this uh if your Javascript file is not in the same name folder you cannot directly provide the name you'll have to provide the complete path or if your Javascript file is somewhere on a cloud storage again you'll have to give the complete path complete URL so in this case my Javascript file is in the same folder so no need to provide I'll just provide it the name so to link your Javascript file it's script type is equal to text/javascript so we know this right like we use Link type is equal to text/css for linking CSS files so in this this case it's script type is equal to text / JavaScript source is equal to the Javascript file name if it is not in the same folder the complete path with the file name and close the script tag so now coming to the body so this is just a normal uh welcome so now I have a form over here so inside this form I have an input type equal to button so the input type is button and the value is equal to click so on click of this button it should trigger the message uh function so the message function is not available in this particular HTML file but it is available in the function sorry it is available in the Javascript file which is linked so if I go to the Javascript file you can see there is a function called message and it shows alert this is an alert from an external file and then it shows document get element by ID example do inner HTML is equal to JavaScript text so one I click on the button it first shows an alert with this so once I select the alert then it will show the uh text over here JavaScript text in the bottom of the page so first it shows the alert and then it shows this because uh once the alert is shown you'll have to click on okay on the web browser only if you click on that it will show this because uh we know that alert functions have that capability and so now let's test it out and while testing you'll understand it even better now let's open and where is it yeah I have it over here and you can see I have the Javascript file over here okay so this is the external Javascript HTML file so you can see welcome to the homepage and welcome to the homepage this does not need any JavaScript because it is just an HTML uh element now inside the form we have a a button so when I click on the button the message function will be triggered sorry when I click on the button the message function will be triggered so let me click on it so the me message function got triggered this is an alert from an external file and I think we know that and then once we click okay it'll display the text because it's in that order for what if we just change the order so I've changed this order Let me refresh this so it's still coming in that order because an alert is here but the problem is in HTML we have provided P tag below the form so in that order it shows that what if I put it at the top before the form so again in this case it will not trigger it because so you might be thinking why is the JS text file not available because I'm not yet triggered this function so one if I trigger this function it'll provide me both the alert and the JS text file even though it's in top it doesn't mean it'll show up only if the function gets triggered both of this will show up Okay so we've seen that let me go back to the slides Okay so we've done both of these guys the script tag and the external Javascript and also we saw a demo on how exactly they work just a quick info guys intellipath offers a fullstack developer course which enable you to learn textt from both front end and back end through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course so first let's look at what exactly are operators so JavaScript includes operators that perform some operation on single or multiple operant and produce the result so basically operators are certain characters which enable you to do some operations for example arithmetic or string operations or logical operations so these are operators which you can use in your code to make it even better so now first let's look at some of the operator ators there is arithmetic operators so plus minus multiplication exponentiation exponentiation is like two and you can exponentiate it to a certain number then you can divide a number then you can also get the remainer of a division using modulus you can increment you can decrement coming to assignment operators there is equal to which basically means uh X is equal to Y this is an assignment operator so if I provide X is equal to Y the value of y will be assigned to X and then plus equal to basically means x + = to Y that basically means x + y is equal sorry x equal to x + y and then minus equal to again it's the same uh method x equal to x - Y and star equal to as equal to is again X is equal to X into y so it goes on it's the same way but the main thing is the assignment operator basically assigns the value to the initial value that's why they are called assignment operators so in this case X is equal to Y y's value will be applied to x x + y this value will be applied to x X - y this value will be applied to X so it goes on the same way next comes comparison operators so this is used in Loops for example you want to compare two variables you can use the equal to if you want to compare the variable as well as what type of variable it is an integer or a float variable or you can can check out two variables if they are not equal or if they are not equal or also they are they do not have a equal type and then there is greater than lesser than greater than or equal to lesser than or equal to and also a tary Operator tary Operator a question mark then you'll have to provide a colon uh so a question mark B colon uh you'll have to provide C so there will be three variables in place in this case what happens is it'll check whether a is true a is true if a is true then B will be uh taken if a is false c will be taken so this is how Turner operators work and this is mostly used for comparison and it is used in loops and uh conditional loops and like while and for loops and then comes logical operators so logical in the sense and logical and so you know if you know Gates logical Gates so it's the same thing you can use and you can use logical R and logical not and type operators basically if you want to return the type of certain variable you can use the type of operator if you want to return true if an object is an instance of an object type for example uh if you're using instant off uh what kind of an object so for example you can create a class and you can create an object and if a variable is dependent on that object you can use instant of to get uh true if an object is an instance of an object type so you've seen this okay so that is the last so now let's look at some examples in arithmetic assignment operations and also there is one more string operators so under string operators there are not much to actually uh learn as an operand but in this case we can concatenate multiple strings so that's what we'll be looking into so let's start off with it so first let's look into the arithmetic uh operator so you can see p is equal to ID equal to demo so uh I'm using JavaScript over here here so variable X is equal to 5 variable Y is equal to 2 variable Z is equal to x + y so you can see uh so 5 + 2 and 5 + 2 is provided over here Z so this particular function you know what it does it checks for the element demo and it applies the value over there so in this case it will print the value 7 on the browser so now let's run this file so arithmetic I can see it shows seven and let's do a multiplication now let's refresh so it's 10 now let's do a division it's a 2.5 now let's do a modulus it's one because uh you cannot directly divide 5 by 2 there will be a remainder and then what else we can do I think that's more than enough so let's check out exponentiation as well so you can see 5 power 2 so sorry five exponentiation 2 so it's basically 5 into five it becomes 25 so that's 5 power 2 okay and what else okay so I think we've seen uh covered arithmetic operators now let's go to assignment operators okay so in assignment operator I'm using the same uh exact format so I'm just using document. get element by ID then I have ID is equal to demo and I have under script variable is X is equal to 10 then x + = to 5 so this basically means X is equal to x + 5 so it will add 10 + 5 and the result will be 15 so let's check it out and you can see the result is 15 now let's do some changes to this let's make it minus and refresh it's five let's make it multiplication it's 50 let's make it a division so it should be two so you can see this is how you can use assignment operators the value which is provided here will be assigned directly to X for example here we are providing variable X is equal to 10 below that I'm providing variable X is equal to 5 so right know which value do you think will be printed will 10 be printed or five will be printed so if you're saying it is 10 then you're wrong because it'll print five because uh this basically overwrites 10 in this case and what else yeah so this is how assignment operators works so this is how you can apply a value to a particular variable then comes string operations so under string operations we are going to concatenate these three text values which are separate variables so now this is a separate string separate string separate string so we're going to attach all of these string together and print them as one so now you can see text one text two and text three okay so now close this and go back now string is over here and now you can see see they are together and let's do some changes for example if I remove this then you can see the first two strings are together then if I make it three I make it three then you can see the first and the third string are concatenated together so basically they are not uh like when you do this they are not the same sentence right now they just different strings printed together that's it so yeah so this is you can concatenate uh there is not much to concatenate operation over here so I think we've covered the major operators and then there are logical operators as I told you logical operators in the sense you can just uh compare to values and print out whether it is true or not for example we can compare like this whether X is equal to Y uh if it is true so let's put uh let's say variable c = x is equal to equal to Y so let's make this C let's check what is going to be the output going to be arithmetic and you can see it's false because the value uh of X and Y are different now let me make this as well five now if we go back and refresh it it should show true so this is how you can compare and also uh other operations like let's say greater than let me make this two it should be greater than so it should show true if it is lesser than it should show false uh let's make this so This should show false because 2 is not greater than five so this is not arithmetic so this is uh logical so this is how you can use it guys so there's nothing much to this so this is how you can use operators in JavaScript now let's discuss a very important term inside of uh or important concept inside of javascripts or any programming language for that matter it's the fact of the loops so Loops are something which are very very important in most of the programming languages it's is one of the most fundamental basic concepts that will be taught to you across the board everywhere and uh let's talk about what is Loops so Loops in programming languages is basically a feature that helps you with the facilitation and execution of a set of instructions functions or statement repeatedly while some conditions uh evaluate if the statement is true and it works based on that so what do we mean by that so on the screen you'll see on the left hand side and right hand side two different uh set of instructions or codes so in this on the left hand side what we are doing is we are typing uh the hello world statement repeatedly for let's say 10 times again and again and again so this takes a lot of time and on the right hand side you're seeing a loop so this is a loop which has a condition where if uh it will start when I is equal to Zer from there to the point where I will be smaller than 10 so as soon as it becomes uh let's say equal to 10 or uh 10.1 or greater or anything any of that value in that scenario this statement will go false it will not go further and it is i++ means that in every iteration before entering the statement it will be uh increased the value will be increased so it I will be starting from zero and once it comes again in the statement then I ++ then I will be incremented and then it will keep on incrementing for every value and every time that it goes it will check for the I's value and based on that it will perform the statements which are wrent inside of this for Loop so it is document. write. hello world right so this hello world statement is repeated for 10 times so you can either write this one or you can use this one this one seems much more efficient now this is a very Niche example because uh we are actually using the entirety of the same thing again and again but imagine if you have a list of elements let's say if I have a list which is called as person and in that list I have a lot of different uh elements so I have stored uh the uh name age and contact number of person and I for like that I have let's say six person and for this statement we have different kinds of outputs with respect to what the person's name is what the function uh person's phone number is what the person's other credentials are right so in that scenario what will happen is if you are trying to print everything then the print statement for that would be uh very long very tedious and very you can say unsettling kind of thing which is uh very boring and not very intuitive right so in those scenarios when you want to print uh State uh like let's say uh the value of a list or an array in that scenario it will become a very tedious task if you do not have this Loops so that's why this Loop comes in very handy when you want to execute things which are similar in fashion again and again and again let's move along and talk about different kinds of Loops inside of java so so in JavaScript U uh basically or in any other program language any Loop is a sequence of statement that is repeated until a certain condition is met now based on this conditions you can have two different kinds of Loops majorly one is the entry condition based loops and one is the exit condition based Loops so entry condition based Loops is where the condition is checked at the start of the statement and exit condition based is when the ex the statements are executed inside of them and then uh then in the end uh uh the condition is evaluated so I'll give you an example when we go along with it so for now you can uh there are two kinds of Entry condition based Loops in JavaScript you can use a for Loop or you can use a while loop similarly for exit condition there is do while so in do while it checks the condition at the end and for these two it checks the condition at the point of the entry so um uh let me show you how it works so let's discuss about all of these one by one so let's talk about for Loop for the first one so the for Loop provides a very concise way of writing a loop structure uh it basically contains every condition initialization and increment uh one by one by one in the beginning and thereby it provides a very short and easy method where you can debug the structure of looping because everything is there on the top so uh it the example is here and the basic uh syntax is also mentioned here so you can see a for Loop which uh begins at X is equal to 2 so this is our entry and this is the condition that we are checking X should be smaller than or equal to 4 this is our condition so we start with this one uh this is the base value of the loop that will be starting this is the condition that we have to check and this is what we'll be doing to X on every iteration so um let's say um if we go through that one so this time when when what happens in this one is we when when we come inside this Loop we assign X as the uh value as two and uh and then we go inside of this we perform the entire activity and then we come and then we do x++ is then at the end of this so now at the end of this Loop X becomes three and we come back to the top again once we come back to the top again we check for this condition again we check for this condition again now X is still smaller than four and then we see uh okay uh that that statement is valid then we go inside of it again and then we write uh the document's value as three this time now once we have done that uh we do x++ now X becomes 4 we come on the top again now now that we are on the top again we check the condition value again so it is smaller than or equal to now X is four so it is equal to so the condition remains valid so we write once again and we write this time the value as four and then we perform the x++ which now X becomes 5 now we come on the top again we check for the statement now X is smaller than or equal to 4 it should be X smaller than or equal to four but we have a value which is greater than four now it is five that's why this will not be conducted and the state statements which follow this for Loop will be executed so the outcomes for this statement is as it is shown here value of x is equal to 2 3 and four so that is about the for Loop let's talk about the while loop now now while loop is a control flow statement that allows your code to be executed repeatedly based on a Boolean condition so if something is of that value or it is smaller than this or if it is greater than this then till that value is achieved you can go through the while loop again and again and again so let me tell you how it works so we have the value of xal to 1 here as set as 1 and exit X becomes greater than 4 then only we will not execute these so X is smaller than or equal to 4 is the condition now when we enter it X is 1 it is smaller than four we write the value of x is equal to 1 then we increment the value here inside of this while condition we have to incrementing decrementing or changing the values has to be performed in for inside of the loop it is not predefined as in the for loop as we have done before we have to define it x uh separately inside of this so we do x++ now X becomes two we come back to the while again we check 2 is smaller than four then we do when we write the value of two then we increment it again now X becomes three we come on the top again again it is it is valid so we write the value as three incremented to four come on the top again then we check again so 4 is equal to 4 statement is valid we write the value of x again we do the iterations we perform everything now X becomes five now we come back X is does not satisfy this Boolean or if condition right here so this does not work anymore that's why we won't be writing any more values and that is the end of the statement so that is how while statement Works uh let me show you another example which we'll be discussing later on but let me talk about do while loop now so how is it how is do while different from the while loop it is very much similar only the difference between these two is that the condition check is at the end of the statement so what happens here is I put the value as let's say x = to 21 and the do while statement is do these following actions while X is smaller than 20 now the problem with this one is that the check condition is towards the end so the statement set of statements will be executed inside of do and then it will be checked so let's say if my value is 21 we still go inside the loop we write the value of xals to S 21 then we increment it to 22 then we check that this should only be done when X is smaller than 20 now we have the value as 22 so it cannot work and it will not be run then the value of x will be 21 but the problem with this one right here is the simple fact that since the condition was X should be smaller than 20 but still the statements went through because the check statement is towards the exit point so it is an exit kind of the condition right so it checks the condition at the exit point and that is the problem with this one so this is useful in certain scenarios just make sure the variables that you are working with so that you understand where a when to use the do while statements so these were about the loops inside of JavaScript so let me show you another example example of the code that we have written so this right here is the example of the script that I was telling you like you can have an array where you have different elements inside of it right so if I want to write print statements for this one then I have to write document. get cars comma 0 1 then two then three then four then five which is which is very tedious and uh not welcoming so if you want to print something like this inside of uh using a for Loop statement you can just do it inside of two lines that's it only you have to do is write two lines that you have to write cars of I and you have to iterate it again and again all the values for car of I we'll be putting it so it will start with zero we will put BMW then Volvo then this then this then this then this so we have uh saved this file preand so let me show you that real quickly so this is the Java test file that we have written so if we run this you can see everything is printed one by one by one in one statement itself so you don't have to write your print statements again and again you can use a for for Loop Loop condition or a looping condition to print those values all right guys so now let's take a look at how we can create our own applications that performs Dom manipulation so I have an empty folder here what I will do is I will open it up in my code editor you can use any code editor that you want I create two files just close this one first one is called index.html all right so this is an HTML file all right and inside the file the first thing I want to do is I want to PO right and there's a button with the ID of add button and finally an unordered list and it should have an ID of list so I save it and and after saving it I have it saved and created in my uh in my application or in my in my uh Explorer now all I have to do is I want to open it up and do this is what it looks like so I need to add some text in the button so this is what it looks like now if I want to create a new file I can just create it name it script.js and finally I have to add it in my HTML code so now that is done and we have our script now I need to get all the things right right I need firstly I need the list so I just use document. get element by ID and the ID that we gave to the list is list all right that's done now I need the button so I need to do the same thing now what I want to do is I want to create an variable named index I'll show you why now button which is the button on our page do add event list now so when I click on the event what I want to happen is I want to create an element so I'll just create equals to document do create element that element needs what kind of element I want to create it's just an Li which is a list item now element text content is going to be task hashtag plus index ++ so it will be task one task 2 task three and so on and so forth and now all I have to do is I have to append it as a child element to my list so I save it go back fresh click on ADD and as you can see I'm able to manipulate the do and to make sure that this is what's happening I open the source code as you can see there are no list items inside the list I can open my developer tools here as well click here this is the body tag this is the list it's empty click on ADD something's added to the list this is the task with the new tag add new and as you can see I can add them one by one and it's working completely so that's how you can do that now let's take a look at what else we have all right guys now we'll take a look at how we can manipulate the Tom inside the browser so we'll create an HTML page and we'll try and manipulate it inside the browser itself so to do that all we have to do is firstly create the HTML page and right now we won't add any script tags to it because we want it to be manipulated inside the browser to do this what we're going to do is I'm going to create a simple HTML skeleton so I've already got a snippet for it this is what it looks like I'll just add a descriptive title okay so this works and I'll add a button and I'll add an ID of but that's about it now if I go back and if I refresh there's a button and I need to add a few more things here name of the button would be add and uh I'm going to have an unordered list with the idea that's about it now let's see what we can do so if I refresh this this is what we have if I open up the console I just right click go to inspect this is what it looks like now depending on the browser that you have you're always going to have a developer tools these are called developer tools these are consoles sources and all these Tabs are required for web developers uh if you're casual user these things are not going to interest you but if you're a web developer you want to take a peek underneath the hood what the CSS of a particular element is what the HTML page is like how the code is structured all of that so as you can see it's being displayed as a Dom Tree in which we have elements which are nested inside other elements and then opening and closing tags and everything when you move over these things these get highlighted with the their with the dimensions are being showed here the size padding border margin and everything in case you want to make some changes you can add them here as well but if you want to execute some JavaScript you need to go to the console uh one thing you can do is if you want to get access to a particular element click on it as you can see it says it's equal to equal to Dollar 0 and it shows you what you can do you can use dollar Z in the console to refer to this element so I can do dollar z i press enter it gives me access to this button if I want access to this button I can just go H button is equals to doll Z and I'll get access to that or what I can do since I have created get element by ID since I've created an ID and attached it to the button I'll just do it this way I should have the same thing and I do now what I want to do is when the button is clicked which is button do on click the l i k i want to execute a function right and when you want to go to the new line but don't want to trigger the you don't want to execute the code but you just want a new line inserted make sure that you have pressed control and then press enter or press shift and press enter and now you can type the code that you want what I want in this code is when I click the button a new tag is added on the Dom right so for that I have to firstly create a Dom uh tag list item is equals to document do create element create element takes the name of the tag I want an lii uh now I want the lii to contain a text node text node is basically something that contains the text so document dot create text node and it should have new list item inside it finally what I want is I want to attach it to the list item so I get list item dop child and I want text node inside it finally I also want the list so I just go lo. get element by ID and I think I named it list but just to be sure let me go back to the code as you can see it is called list so it's going to work fine and now all I want is find the list item okay so this is the function that should be executed when I click on the button let's see if it works and it is working if I click more new items will be added to the screen and it's fine uh the thing that you have to notice though that this is only temporary because it's not saved with the browser these changes are only going to uh be in effect inside this tab of this particular web page and when I refresh this these changes are gone if I click the button again nothing's going to happen this is why I've copied it now it will work so this is a great way to um debug your code or if you want to debug your particular browser if you want to fiddle around with a little bit bit of the JavaScript you can do it with other websites as well open up any site go to any go to the elements Page look at the HTML elements that you want to manipulate after getting to those uh either use dollar Z or use their IDs attached to them classes attached to them to get access to them and then manipulate them add things to them change their color there's lot you can do with JavaScript dog manipulation the same way we're doing it here all right so hopefully this has been informative one other thing whenever you log something on the console this is the console that is going to be logged to so uh when you say console.log and you write something in the Javascript file you can open up your browser uh inspect button and you can take a look at this in case you have some other browser than Chrome uh Internet Explorer uh I think has this Edge has this the newer version of edge also has this Firefox also has this so all the browsers that are currently being supported have these developer tools with elements console and so on and so forth so you should be quite comfortable with those all right now let's see what else we can do all right guys so now let's take a look at how we can basically use JavaScript to manipulate the term so in this one we'll use a we'll create a button and then in that button what we're going to do is we're going to make sure that when we click the button it color get inverted so originally it's going to be colored as it is and when we click the button the foreground color is going to be black and the background color is going to be white let's take a look at how we're going to do that so I have an index.html file here there's no code in it so it's just a blank file and this is where we're going to write the code I'm using visual studio code you can choose any text editor that you wish to use if you want to use notepad that's fine also so now let me just create an HTML page now I have a little snippet that will fill up the boil plate HTML if you need some time to copy pause the video and copy it along and then start with the session so what I'm going to do is I'm going to give it a title JS HTML do saved it now let me just create a button and the button is going to say click me saved it now to I go over this so far there is no change because I have to refresh my browser so that it picks up the latest changes I refresh it picks up the latest changes and it has a button that says click me nothing's going to happen because I've not written any code to let the browser know what it should do when the button is clicked so now that will be done in a script tag because I'm going to write JavaScript and so inside the JavaScript tag I'm going to firstly get a reference to the button now reference to the button basically means I want to create a JavaScript variable that is is pointing to the button that we want to click on now it could be that you are dealing with a really big web page where there are several buttons you need access to one particular button or one single button JavaScript doesn't know how to access so in order to get an access to that button what you do is you need to create an ID tag ID attribute ID attribute you can type something that can give you reference to that button it should be unique on the page so that you only get access to one thing so I'm going to call it button you can call it anything that you want now in JavaScript browser we have a document object in which we call the function get element by ID inside it we passing the ID which is button it gives you the button and now what we want is let's me just console. log it what console log allows us to do is it allows us to inspect what a particular elements uh value is in our browser console and I open up the browser here you can see button with the ID of click it works completely fine now since we have this we have access to the correct button now all we have to do is wire up an event basically we want to tell JavaScript that when this button is clicked there's something that you need to do so to do this I have to wire up an on click event what JavaScript will do is when the buttons clicked it will check whether or not this button has some function attached to the onclick event handler since we are creating that function it's going to work uh this event attribute is passed in automatically if you wish to uh if you don't wish to use it you can choose to ignore it it's just good practice to have it around now what I'm going to do is firstly I'm going to again use the button and I'm going to change its Style Style basically has access to it CSS cont since we want to change the color of the button we have to do this so I want to change the background color and I want to change it to Black this is a hex color hexadecimal color and since it's Black the color or the font color should be white so that we can see what's being written on the browser this is the heximal color for white so that should be it now if I refresh this nothing changes but if I click on it as you can see the color changes this but the thing is now if I click on it again nothing's going to happen that is because we have just told it when the buttons click change the color we not told it what to do when the button is inverted or the color of the button is inverted and we click it again to keep track of whether or not the color is inverted you have to create another variable this is going to be a Boolean variable since at the beginning it's not going to be inverted we call it false now all we have to do is check check if it is inverted which means if it is dark then change the color to this else now we want to just invert the color so it should be f f f f f f which is white and 0 0 0 which is black and we want to change the color so is dark should change to is done so it's false at the beginning it will be changed to true then it will be false then it will be true and this will keep happening I go back to my code refresh this click on it and something happens let's take a look at the code again and okay so when the button is flicked you check whether not it's currently dark if it is dark then we turn it to White else we turn oh that could be an issue because if it's already dark that you want to turn it to White so or we could simply do this click and it's working fine so here's how you can use JavaScript inside HTML in order to create a button in which you can make changes so um it's time to discuss one of the most important features there in javascripts which is the popup boxes now these popup boxes you might have seen at many places at point of time and they say are you sure you want to leave this page and there's a small popup box on the left hand side that says okay or cancel and uh there are different things which are used with respect to that sometimes it's used just to give information sometimes it's used to take information from the users so we're going to be discussing all of that in this section so let's talk about this JavaScript provides buil-in functionalities to display the popup messages uh it could be for different purposes as I mentioned before it could be just a simple display of message of for giving some information or it could be taking users confirmation or it could be to take users input and use it somewhere right so it could be a variety of differ of reasons why that might be in use so so there are basically three different kinds of popup boxes that we have to deal with in JavaScript so first one is the alert box which basically sends you an alert then there is a confirmation box which asks for your confirmation and then there is a prompt box now let's discuss about all of these by one by one and with some examples to make things more clearer the first one is the alert box so basically it is just to make sure that user has uh it's just to give user some information uh that you have uh that you want to present so when an alert box pops up the user will have to only press okay that is the only way to exit that there is no cancel option it's just saying that okay um let's say that this site uses cookies so uh you're aware of that okay just something like that a pop up for that purposes so basically the simple Sy tax for it is window. alert then in the boxes inverted commas whatever your message is so here it says I am an alert box so that is the alert box mentioned here and that is the simple syntax behind an alert box very simple very easy to use the next one is the confirmation box so as the name suggest is just to take that user has accepted something or has denied something it just takes the information from the user uh so there are only two options in this one there is an okay option and there is a cancel option by default so if the user clicks on the okay then the Box returns true otherwise it returns false right um so for that scenario what the what happens is let's say when they ask you that are you sure you want to leave this page then you have an okay and there is a cancel if you press okay the Box returns true then you can obviously leave the page but if returns canceled the Box returns false and you perform different set of actions so we have created a a b simple code to help you understand this better so um this is the confirmation box code that we have here so let me show you this so again simple confirmation box so we have what we have basically done is we have create a button uh which is an on click button so as you as you click it uh it performs a functionality of my function and we have defined this my function inside of the script function and this function is my function uh which is on the button so as soon as you click button my function will be done so uh we have declared a variable called as txt which is the text that we'll be uh entering um to the uh particular given web that we'll be writing in the document so um in this one um we have if the confirmation uh confirm bracket press a button so press a button is the box that we are be confirm box that we are using and if this button if this confirmation is true then in that scenario we will write the text as you pressed okay else the text will be return as um you pressed cancel and then uh document. get element by ID demo so whatever element ID demo so here here is the P ID demo so it has uh the inner HTML that then there we'll be putting the text as txt so in here in this one uh we'll be searching it by ID and putting text so if I press okay then it should press this it should show this one on my uh paragraph ID and if I press cancel then this should be the uh popup box so let's see if that happens real quickly so this is the confirmation box that we have and this is the button that we have created so this as you can see this page says so this this is the button so if I press okay you can see it press it shows this then we to try it again if you press cancel it changes it to you press cancel so as simple as that um basically it's taking the information so you can take this through and false value to navigate across pages and do different things uh moving along uh we have sorry another boxes in our hand which is the prompt box so basically a prompt box is used when you want some value from the user if you want some uh you input from the user before entering the page so when a prompt box appears the user will either have to click okay or cancel in order to proceed and after entering the value you can use this value uh uh if the user puts okay presses okay by clicking some value you can use this value as an input and do different things with respect to it if the user in on the other hand presses cancel then the Box returns a n the basic Syntax for it is window. prompt or basically prompt and then whatever the text is this sum text here is please enter your name sum text and you can put default value which will be represented here so let me show you an example to make things more clearer so we have another code mentioned here so as you can see here again the P ID is demo and again and we have created an on click button to display that so what we'll do is basically we are prompting up an box which will ask you to enter your name and the default name is intellipad so this will be displayed on the uh typing section that intellipad will come by default but you can edit that so um if basically uh person is null or person equal equal to any string which is out there so um yeah is equal to empty if if we are entering those things if we are pressing cancel or if we are not entering any name then it will display that user canceled the prompt so user did not give us any input on the other hand if we give it some value some string is there then in that scenario um hello and then the the person is the uh name that we are inputting so this variable right here is the uh value that we are getting from prompt so whatever the name that we enter how AIO today will be displayed on the P ID right so let me uh show you that real quickly so let's jump here and this is the promt box right here so as soon as I click it you can see by default the name intellipad is displayed but I can totally change that so let's say inell we'll write if I press okay say hello intell how are you today on the other hand if I just remove everything and I press okay then user cancel the prompt on the other hand if I just cancel also it will say user cancel the prompt so that was all about the different uh prompt boxes in popup boxes in JavaScript so there are two main ways and we'll be looking into them so first programming code might contain syntax errors or logical errors searching for errors in programming code is called code DB so if you have a piece of code obviously sometimes when the code gets bigger and bigger there will be a lot of errors and problems you'll have to fix it only then the code works so that is basically debugging finding errors and fixing them so now there are two main methods to do this one is the console.log method which is a very simple method in which you use console.log to check out the value in the debugger window in the browser and then you use it to basically resolve the issues and then comes uh browser for debugging so it's the same thing but I'll show you a little more like that so first first let's look into console.log yeah so first let me show you the code which we'll be using it's pretty simple it's simple arithmetic operations and it's console.log C so this is so console. console.log will not print the value on the browser but it will print the value in the console in the browser so the console will be available when you click F12 so it takes you to the uh inspect page so in inspect page you can inspect elements of your HTML file and also the JavaScript and CSS part so that's what we are going to do so let me first open this what is it console.log file and it is running right now and you cannot see the output which should be uh 10 + 15 is 25 so right now let me click on F12 and it gives me the page of console and you can see the value is 25 and let me go back let me copy this paste it and put an a saved it right now let's refresh this once again and you can see the value is 25 and 10 because the console doc value is 25 and 10 so why should we use this so let's say you have a large piece of code and you're getting a a problem in a certain uh place in your code so you can place a console.log in that location and check out whether you're getting values in the uh log file in the console if you're not getting in the console itself then there is some problem so this is how the console looks so you can uh do it here as well so console. log um a so you can see the value is 10 then console.log B so this is basically the second part and I'm just showing you how it works so this is how you can use the console and over here now let me go back so we've done this console.log part it shows up in the debugger window and we can check whether the values are being printed if it's not being printed then we will know which place the error is and we can go back to the code and make it uh so we'll know where exactly the error is and we can correct it now next coming to using browser for debugging so this is where you're using browser for debuging by pressing F12 you will get this inspect Page by getting the inspect page you'll you can check out every element of your code you can check out the console in which you can type and uh basically get values which is in your code itself and you can go to elements you can check the elements of your file for example you can see body is block and 8 pixels and so this is the body example if you just want to inspect this and change this you can click select this and click on uh inspect it will take you to the exact location where this file is available so it's in H2 and you can see all the values available over here for example you can also edit this if you want but editing here does not change in your local file this is just a temporary change which you will be making uh let's say for example let's say color blue and you can see the color has been changed to Blue and you can basically add a background here you're adding a background to this particular file so basically you can check out everything but if you refresh everything will be back to normal because you're refreshing the local file you're not refreshing the file uh which you're editing in the browser itself so this is how you can debug in the browser you can add some content and you can check whether it works in the browser or not also you can check out for multiple devices so you can see I'm I made this for a mobile so I'm checking for a smaller mobile like this uh so if you can check out how it looks in a mobile then you can change it back to a desktop and check how it works in a desktop so what is this these are some of the browser based debugging tools which are available so this particular tool is available in almost every browser which is there there is Edge Mozilla Firefox so all of the browser based uh all of the tools all of the browsers will have this tool where you can inspect and you can check out how the body looks the main page looks a particular uh part of your code looks everything can be done you can use the console to check out more of the application applications JavaScript whether it works or not and that's it so these are the two ways which you can use for debugging and yeah so by pressing F12 you'll get the inspect menu you can use the console in the debugger menu to proceed further you can check out whether you are getting the values in the browser if the browser is able to get the values then you're going in the right direction let me start with a small introduction to what nodejs is and things like that now what is nodejs there's a long story I'll cut things a little short for you um so nodejs is a server side JavaScript language uh in fact it's a platform basically it's not a language so we use the same language JavaScript to write things that can be executed on the server side uh this idea was not new in fact uh Mozilla the company which created JavaScript was working on um similar grounds for a long time which was called Rhino JS you can probably make a note of that you know search online you'll find out traces of rhino JS now Rhino JS did not get all the popularity that node had uh so nodejs became really popular uh because of one major factor wherein you and I as developers can contrib Ute to the development of nodejs so that is we can write simple modules solve some small issues which can contribute to solving a bigger issue okay so that ecosystem which um has a smaller modules which can be used to build larger applications was a welcome idea by the larger develop uh development audience so they like this idea and then they EMB raised it and everything is now history noj as of now is uh a fast growing platform uh we have around 20 um lakh modules plus okay so um for people who don't understand the word lack it would be around uh 240 million Library uh uh 240 millions of modules which have been written on this platform so which is a staggering number even if about um 1% of those modules are useful that itself is a huge ecosystem which is quite unparallel isn't it so how everything started is Randal who's the creator of nodejs made an announcement in um the JavaScript Consortium called JSC I think it was around 2009 you can do a YouTube search and I'm sure know you'll find that video where he actually announced and the developer Community really like this idea of accepting inputs from other fellow developers to build and know uh something bigger so they all can be part of some uh module and they all can contribute uh I to have given few modules and by the end of this Workshop you will also have some modules in your name so that's something that you can boast about and when uh Randal created this platform he mostly used Unix um as a platform to create and later on you know when this uh same nodejs was supposed to be implemented on other platforms like Windows Mac and things like that um so they started using other external libraries which can migrate their code or which can help the Unix code to be adapted on windows so lib UE is one of those libraries it's extremely useful and uh in order to make sense of the program that we will be writing so we'll be writing programs using JavaScript so somebody will have to make sense out of the program that we write so that's where this Library called V8 um was used now what is V8 it's a JavaScript engine created by Google for the rest of the world it's an open source community and open source JavaScript platform used by uh browser like Chrome um Microsoft Edge even saf Ari uses um weight engine behind the scene uh there are few browsers which don't but what is more relevant is weight engine is very popular it's widely accepted and used by many popular browsers and noj also comes with a large library of JavaScript and C++ programs which are already written now how this helps us is we as developers okay I'm skimming through some slides just to bring the attention to some of the topics that we'll be covering so we will use JavaScript which can be either ecmascript 6 or uh the latest version of JavaScript because no JS is uh ever evolving and I guess this uh um on this day there is version 18 or version 20 which was uh recently released which is what I'll be using on my machine I'll be using the latest version so just to tell you that you know you know uh all the versions of JavaScript are still supported by nodejs and when you write the program using nodejs it'll be used by the V8 engine okay and V8 engine will execute those commands which are written in uh C++ which in turn will have you know which will invoke a hook which is written on a Assembly Language it can be aa32 orm MPS any of those uh platforms so once those hooks are invoked that will then invoke a machine code so if you see uh from the time that you write the JavaScript and till the time that the machine code is invoked this takes the shortest possible route so one reason why node is really popular it is one of the fastest uh platforms that is available um I'm comparing this with both Java and Microsoft platforms of course you know um we are not here to compete compete with them nodejs has its own place it has its own advantages and disadvantages Java has its own advantages and disadvantages similarly um net and Microsoft related Technologies also have some advantages and disadvantages but nodejs has um an approach that no other technology provides that is you can use a Java Script which is common to many of us um web developers can be used to create server side uh programs okay because uh if you compare for example a person who is working on Java he'll have to learn JavaScript to tame the front end and Java to deal with the back end correct but when you um compare that with nodejs you need to just know JavaScript to be a front-end developer and a backend developer as well so nodejs kind of you know helps you fill in those gaps wherein a front end developer could not uh contribute for some backend development all right so that's a big Advantage so I guess we spoke about all of this so I'll kind of you know skim through this um so this is again you know this slide is my opinion because I've been working with um various companies as a consultant and as a developer so what have realized noticed is nodejs is not um competent in every platform but these are some of the platforms wherein node.js really Dazzle okay so what nodejs helps you um do is it is very fast between client and the server request so that makes it an ideal platform for uh realtime dashboard applications wherein um the user is looking at some charts and graphs and it requires uh to be constantly in touch with the back end to mirror any change that may be happening on the back end uh dashboards uh for collaboration uh nodejs is really fast and seamless how will we use nodejs if he does not know JavaScript that's his Lookout isn't it Jin okay uh he will definitely understand graph charts yes yeah so what I meant is Vin uh nodejs helps you create applications which require a frequent update from the server side okay um and even you know uh uploading and downloading files nodejs is pretty fast why because node.js can uh support streaming facility we'll talk about that um and it allows you to upload and download files at blazing speed now back to the context guys um ad servers um again companies which are predominantly uh dealing with advertisements nodejs is um a fast platform because see when the user comes to web application his attention span on a web page is around 7 Seconds sometimes even lesser uh but he will look at the page if he doesn't like it he'll simply leave okay within that short span of time we as developers will have to collect all his demographics his search history and create a advertisement and display it you know for him so you need a technology that can turn out all these information really fast and nodejs helps you do that uh multiplayer games use nodejs I personally worked with u several um um online platforms where multiplayers can collaborate and play games njs does a fabulous job uh serving data of course you know there are other Technologies but nodejs is blazing fast um because nodejs can leverage on this technology called websockets we'll be covering sockets um uh you know in this Workshop so you'll understand how sockets are effective uh compared to the HTTP request so what is nodejs nodejs is not a web framework it does not support multi-threading so if you don't understand what is multi-threading don't bother okay see whatever terms you are able to understand stick to it and whatever terms you'll not understand now you'll understand it eventually okay what nodejs does is it's a single threaded server it helps uh you to set up a call back function uh but it is a single threaded server so you you you don't have the concept of multi-threading in nodejs okay now why they did not support is because JavaScript itself is a single threaded language it does not support so from the architecture it does not support maybe the next couple of versions of JavaScript maybe there would be some change okay so they're definitely working on it JavaScript is a a technology that is evolving on on a day-to-day basis so for every request they can set up a function that will be invoked when the fun when the job is done okay that way they create an idea of pseudo threats okay so leveraging on the callbacks they are able to um compete with technologies that does support multi-threading and they are really fast I think it does not support multi-threading that's plus point to make it faster see it's just in the perspective wein uh if you talk to a person who has worked with with multi-threading um all along okay a Java developer for that matter you will never be able to convince him that nodejs is faster yes it is definitely true that noj is faster than Java but they would not accept because they have spent their life learning a technology glorifying it and you know uh so it takes time isn't it so it it'll they'll have to convince themselves okay they'll have to uh look at some examples they'll have to Lo some applications then they will be able to convince themselves One Reason Why node.js is drawing many people see even today I concluded a workshop at a company where many Java developers uh attended and most of them were convinced that node is the way forward the technology always evolves okay so as a developer as a web developer especially you should always keep your mind open for change okay so in that direction nodejs is is a definitely uh a platform that is worth your time okay so now having that said uh have no doubts nodejs is definitely a platform that is worth your time and um your money so nodejs is not for every web application just because you learn nodejs does doesn't mean that you know this is a silver bullet it'll solve every every problem no it is it does not okay there are lot of cases which cannot be served with nodejs framework allows um see library is um a Javascript file which has lot of methods okay framework gives you a structure and it is a collection of libraries gutam it's just not one okay it's a group of libraries um serving your purpose to develop a web project okay now moving forward and again node J is not for everybody not for every project just keep this in mind but although uh you know nodejs is not meant for everybody but those who have invested their time and effort and um you know resource to attend this Workshop it is definitely meant for all of you please make sure you attend this Workshop fully and uh take the knowledge okay so when you start working with nodejs okay unlike um your JavaScript experience where you would work with window object we you would work with document object uh with the Navigator object you don't have a browser here to support what you have is a terminal and what you get access to is a global object the global object has a require module process and things like that that we can use now you may not understand all of them but don't worry we will you know understand each one of them uh eventually okay so what nodejs basically does is it uh does read evaluate print and loop now what does that mean see it is capable of reading the syntax that you provide it is capable of evaluating it it can give you a response back by printing it and if you give him some iteration he will Loop through it nodejs will Loop through it that's it okay so nodejs is by far referred as a repple tool what reppel means is read evaluate print and loop uh and before we proceed further this is something that you should know that is in nodejs you have two different approaches for most of the packages you'll have two different approaches one is blocking and one is non-blocking now what is blocking let's say you ask nodejs to do certain job so you ask noj hey go fetch some data or maybe you know compute or create this file for me so when you give this command to nodejs what nodejs does is it'll actually go create that content for you so your program can wait for nodejs to complete okay the platform to complete the previous task and then it can go to the next task that way until the task is done your program is waiting to go to the next line This is referred as a blocking code okay on the other hand if you have the same job you can designate a function which will let you know when the task is done but you can continue to the next lines like next line of code that is referred as non-blocking code because you are not stuck by some previous task you can continue to the next line of code you can uh and then start processing it and when when the previous job is done it will let you know by calling a function so that's the difference between blocking and non-blocking so it is also known as synchronous and asynchronous synchronous is a blocking approach nonblocking is asynchronous any example say for example I would want to load um a download a form a download a song from some website okay until the song is downloaded my program will not go to the next line at all it'll wait for the song to download that's one approach on the other hand you can write another program when with which you ask the nodejs to download a song for you and while the song is downloading you can um do additional task you can go to the next line or the next program that you have return can be executed okay so that means to say you're not waiting for the previous command to complete I guess in this Workshop we'll have too many examples to illustrate both blocking and unblocking so you'll definitely get it but just be aware of these two terms that I would be using extensively synchronous and asynchronous what does synchronous mean blocking asynchronous is non-blocking synchronous means blocking okay um a a normal analogy you know for for all of us to understand I guess I used this even in the previous Workshop so node is free from JS coders while executing correct okay uh that is because nodejs will uh set up a call back to that code that you have written to the program that you've written and it'll proceed to the next line and start working with the next line of code okay without having to wait for the previous line to complete its task that's non-blocking so it has its own advantages sometimes you would want to work in a sequential manner sometimes blocking is important block code or synchronous way of working is important block code is important when say for example you um you have the user logging in the user has logged in and he has set his password when he set his password when he's entered his password we have to make sure that the password is hashed and then stored into the database until then we don't want to go to the next line I am okay for the user to wait because it's um you know it's the um the security is more important so in some cases we would want to employ block code in some cases we are okay to use non-blocking code now that's a logical choice that we'll have to make um as we move forward and see that amount of um knowledge you'll definitely get uh when you start programming okay with nodejs okay so how do you work with nodejs step one we need to install nodejs so go to this website nodejs and nodejs.org now you have a choice to download the current version or this LTS version so I suggest you download the LTS version okay so I suggest all of you download this version say if you're on Mac okay so I click on other downloads I guess you know the web application itself is quite smart to find out whether you are on Windows or a Mac and it will direct you to the appropriate version to download so I suggest you know you select Windows or Mac um depending on your platform which one to download okay I suggest download the LTS version Okay so if don't come to this page guys uh those who want to download um the safest installer click on this screen button here and then nodejs will start downloading see it already I already had this file so my download manager is saying that hey you have already downloaded it do you really want to download this file again okay so if I say now show if the download is complete so it'll start installing nodejs for me I don't have to download I don't have to install it because I've already installed this version so which version you install the LTS version the LTS LTS stands for long-term support okay the one on the right side has latest features and it also has lot of bugs which have not been fixed yet okay so it is quite uncertain that these features may or may not be implemented in moving forward yeah so click on this download Once you click on this download install it follow the default process and when you follow the default process come to the conclusion you should be able to restart the visual studio code when you restart the visual studio code and open the terminal in the vs code you should be allowed to navigate to nodejs Terminal here watch so here if you type node space- V you will get the version number this denotes that you have downloaded and installed nodejs and everything is working fine for you okay I'll give you guys few minutes here to make sure that everybody has installed nodejs okay the latest version is 18.1 16.1 I have 18.6 16.0 so as long as you have some latest version you're good to go okay and when you're done installing in the participants panel there is an option for you to raise your hands now you I suggest you run as an administrator okay what to do after installation I did explain deep shika so you open vs code restart vs code open the terminal and type node space- V okay and you'll get the version number that is an indication that everything is gone fine how did you get no terminal right there there is this terminal option click on new terminal you'll get a terminal window okay the open vs code navigate to the terminal open new terminal in the terminal okay in the terminal type node space- V and it will give you the version control J is one option you could also use control till day okay so once you have this day one folder guys we need to navigate to this day1 folder using the terminal how do you do that see as of now I've navigated to C drive node July folder now I'll say hey CD to day one folder now I've navigated to the day one folder then go to the file menu and say new folder um so you also have add folder to workspace so make sure you navigate to the day one folder in the day one folder I will now go create a new file I call this as 1. JS file it's not relevant that you know we start with 1js so just wanted to tell you that you need to navigate to this folder okay now put your eyes on the screen watch how do I execute node commands is the question this is very trivial very easy as well so you notice that you know when you open the terminal it by default opens in Powershell or CMD prompt so a lot depends on you know um um what version of Windows you using it is more or less partial if not sometimes it will also be a uh command prompt so it can also be a command prompt like so okay but more or less it will be Powershell now once you install nodejs if you go to the start menu and look for node let us say node So when you say node see you see that there is a node command okay so if you click on it a terminal window opens here see a terminal window opened and in this terminal you are allowed to type some node commands Okay but we cannot go open node terminal every time in the start menu so one reason why we'll be using this terminal in this vs code and we will switch to node okay how do I switch to node if you type node space enter it will automatically switch to node mode you saw that maybe I'll show this once again I'll terminate this open the new terminal see by default it is what Powershell correct I will now navigate to day one folder and I'll say node okay keep your eyes here on the screen partial correct the moment I type node and press enter it'll change to node isn't it now if you want to come out of node you you press control C two times and it becomes poell again okay so the idea here is if I say node then I can start working with node command now what does node does you know that it is meant for read evaluate print and loop correct it is meant for read evaluate print and look now what will I read I need to write something thing so I'll go create a variable V so I'm creating a variable I say user equals V I'm putting my name you can put yours press enter it says undefined that is because this command was executed inside a function and every function should have a return type but this self invoking Anonymous function did not have a written type so I get undefined now that is not relevant actually but just keep in mind that you have have executed this command and node now remembers that there is a variable called user and it has a value called V so now that I have already created this variable how can I use it so I can say hey console log me this variable called user here so if I press enter it'll give me the answer which I so VI is the value associated with this variable called user easy but let us say I want to use this variable for a long time okay for the next program uh after about two days then this is not going to help you because the moment you close this terminal and get a new terminal that information is gone so if I know navigate to node and say hey console log me that user it will say what I don't know what you're talking about we have undefined below VI I I explained it um U pranic uh prank sorry um so if you missed it don't worry you didn't miss much uh basically it's a function call and the return of the function is what is logged uh you can disable that uh but that's an unnecessary effort uh so I suggest you simply ignore it okay because for the next two exercises you'll not see that any which ways okay now coming back to the context if you don't save these values into a file you'll not be able to use them for a long time okay so what I suggest we do is create a file called 1js and then we can write our varable Ables here so I go create a variable user assign a value V and this time if I want to read the value of the user I will say console log this user for me and now I want to run this file using nodejs how do I do that you open the terminal see now that's why I asked you to navigate to the day one so if you want to access this 1. Js you need to navigate to the day one folder agreed so we'll navigate to the day one folder like this CD day one folder and now you have access to 1. JS I can ask node to render this file out to understand this file to read this file I'll say node 1. js now with this node will print the value okay from this file so whatever you are asking to be printed on the console will be logged here now I can um write some complex code here now if there is a need okay so I can go create a variable I will now say hey this is a hero object and this object is will have a property called title the title is Batman first name is Bruce last name is Wayne and he's from Gotham so I've got all these details and now that I have stored them in a file I can save it close it open after one year if I want to and I'll still find it accessible correct now I want to if I want to read part of this I can so I can say hey node.js it'll give us the log but if I want to log either this entire object or part of this object I can do that I can say hey console log the hero. title and it should log me the title working is this too difficult for you to understand those who are new to JavaScript did you understand all of this that I explained was it difficult not at all clear okay yes understood shre says no no clear awesome so we will be starting in this level okay so don't worry you'll definitely follow uh yes okay so in the terminal you should be able to log all the changes so it's not learning noj is not tough of course you know we are beginning that is why it is not but moving forward we'll pick up the pace uh many of you are new many of them are um new to nodejs some of you are new to JavaScript itself uh some of you are still not installing it I mean they have issues installing these um uh nodejs itself so I will take it slow but the next um starting tomorrow we'll pick up the pace and then we will have lot of things to cover so I guess you know you know what are the topics and what are the um sequence that we are following right it's all available on in Tad's website okay but what I feel is that the content which is available on on intellipad website is slightly old so I'll be using some latest libraries so that your learning is more fruitful can we write directly nodejs without enclosing it anybody um what do you mean by that like script this is a script tag isn't it this is a script file there is no HTML involved for nodejs you don't need any HTML okay this is a script file and all this is now running on the server side okay so you can use all the commands that you have learned so far for those who um attended JavaScript program and those who are new as well see there are various ways of creating a variable this is one of the way correct you can also create a variable by using let now let follows something called as block scope what is relevant here is that this will also work so nodes a supports ecmascript 3 ecmascript 5 ecmascript 6 up until ecmascript version 8 even that is even the latest version is supported that's the summary now if I ask node to run this file it'll still give away the same response now can I use an Arrow function in node.js the answer is yes you can for those who are new to JavaScript ignore this topic okay just to tell you that these new features are supported by nodejs okay so let us say I would want to create a variable let Adder this Adder is a function so if you don't understand the syntax please don't mind okay for those who understand good so if I pass in some numbers num one and num two I would now get a return of num one plus num two and I would want to call this Adder hey console log this Adder for me with these values will this work is the question although this is a new way of writing a function nodejs supports it and don't worry for those who are new to JavaScript you'll understand this moving forward and then you'll know what I'm trying to um teach here just to bring your attention to this point that nodejs supports all the syntaxes that are introduced in JavaScript that's it okay now that you know you are aware that nodejs can uh execute every kind of JavaScript is it supported version 18 only or what do you mean it is supported no up until the latest version things are supported when I try to run node 1js it shows uncaught syntax error unexpected or un um identifier another version is also support 16 will work node 16 yeah of course you can use node 16 okay node 18 will also work node 16 will work so what I can comfortably tell you is that every 3 months node will come up with a new version okay so that way uh EAS script 6 was released in 2016 correct yes Nishant as of now nodejs is installed on your machine correct and your machine is behaving like a server so nodejs is now working on the server only okay 16 will also work okay node version 12 will also work but why I recommend you uh uh download the latest version is moving forward we'll be downloading some libraries those libraries may not be compatible with old version of nodejs I'm not saying that it is not I'm saying it may not be compatible so in such cases if we get an error I will get a different error and you may get a different error okay so then we'll not be in sync and why do you want to you know you you have paid the course in the July 2023 why would you not want to learn which is currently available okay any which ways in 2024 most of these will be absolete anyways so if it is not solved it could also be because see if I'm not in the right context okay so if I go out and if I say node run one. JS file it will not run okay it'll throw an error saying cannot find module this now why it cannot find is because it doesn't have the context there it doesn't know uh if this file exists so I suggest now navigate to the day one folder and now try node space 1. JS if you have tried this and if you still not able to get if you got a specific error let me know okay but it should work now coming to the context if I want this variable to be used in another file say for example this hero information that I have I want to use in another another file how will I use so let's say I go create another file I call this is 2js and I want to use the information that is in 1js in two. JS as well that is I want to access this hero because see this is an information that I may want to use now how will I get access to this 1. JS file content in two JS so in 1. JS file you have the ability to create a module okay so that you can export this information so other file can leverage on it now how do I export this you use this command called module do exports this module. exports is an object okay on this object you can create a property call it hero equals this hero that we have in our program see this hero this hero is what I have assigned here and I'm creating a variable by name a property by name hero on the exports object okay let me explain module. exports is useful to export uh a property from this file to any other file okay so when you're exporting you can set up a property on the module. exports and assign a value to it so frankly you know here I can also say this is a Justice League hero okay let me make it easy for you to read so we have Justice League hero who's Justice League hero I'm assigning this hero as a Justice League hero here so when I exporting there's a property called Justice League hero which is assigned with this hero so I have exported it but how do I use it is the question so how does 2js use it in the 2js usually you would want to use it as early as possible okay so most of these Imports are on the top in the top you want to import import this file now how do I import there's a command called require so module. exports is to export require is to import so here I will go create a variable to hold whatever is imported from that particular command per you know that particular object I'll go create a variable I call this as Justice League hero maybe I'll call this as um info maybe okay equals require and this require asks for a um relative path between this and this file see both of them are in the same folder 1js and 2js are like brothers and sisters they are sitting in the same folder correct they have a common parent folder in the 2js if I want to access this 1js I would simply say dot slash do slash simply means the current working directory in the current working directory I have one do JS file so I can say 1js this JS is not a requirement so we can do away without it okay so if I say one is what I want this info property will now acquire all the things that were exported what was exported this Justice League hero property was exported and that has this hero assigned to it so if I now come here and say hey console show me what you have in the info okay now let us run the two. JS and see what info is so I'll say hey node run to. JS file so it'll tell you that we have this object and this object has a property called just Le hero so what is info info is this object now how do I extract a property out of that from this info you have a property called Justice League hero correct so I can say hey from here I want Justice League hero what is Justice League hero that itself is an object which has these many properties check this out okay it's this object object from this object can I extract a specific property info. Justice League hero. title is what I want to log so let me just clear everything okay and then I say node um evaluate this file called 2. JS for me and it says okay it is as of now running all these um files let me just comment these now now I want to just focus on this log for a minute if we export more than one how can import specific object I'll show you okay hold on to the doubt yam I'll show you mine is still printing both hero and user correct even mine is printing isn't it IM manual um so I shut these um console logs so that we can stay focused on this okay so if I now go ahead and say hey node type tojs file so it says Batman now correct why is it printing the one. log even though um I guess uh um it's probably because you know I was using the one file it basically is importing everything from this one file even the logs are getting imported from where can we find all the commands um in this Workshop I will be covering most of the commands that you might find Handy okay so if you are curious if you want to jump ahead and you know um I suggest go to nodejs.org website click on docs okay from the docs choose the version that you're using 18 six is what I'm using click on it and you'll get all the commands the one that we are using now especially this console commands are all available here see there are tons of commands how to use them right here there are some console logs This is How I Learned okay so you can also learn from here now coming to the context so now that know we are um able to export F you know information from one file to another file okay and to answer this specific question that you know uh you guys asked okay VI why the console logs are printing from one. JS as well when we actually executed two. JS frankly I don't know the answer okay because this is happening with me for the first time so I'll check in the document M mentation if there is a command that is triggering or whatever I'll let you know it's importing full one. JS file not just the hero that's what you are saying but here we are importing Justice League hero isn't it it is importing just the hero not everything if that was true Vio here when I say info will I be allowed to use the user info as well the user as well this wouldn't work isn't it so it is actually not doing that so if I now run node two see it says undefined so which means that it is not exporting everything it is not running everything it is definitely executing those console logs I'm wondering why okay I'll check that out because it has not happened with me now it has happened correct yes it is executing all of them um so why is it executing I'll check out in the doc documentation for now let's stay focused on this I guess you know there is some issue um with the node or uh the way we have implemented node okay kindly again please difference between dot slash and one okay now this dot slash simply means the current working directory okay so if you type dot slash you'll actually know the answer dot slash gives you one JS file this is the file that I want to use from this 1js I get the correct see they both are in the same directory correct day one folder dot slash for this 2js do slash means the current working directory correct sankit do slash is the current working directory now from the current working directory I'm extracting this file see even these commands are getting executed which is what I I want to find out ideally this should not happen but it seems to execute all the console commands can we use all the file of a folder in the same script what does what do you mean by that okay can we use all the file in a folder in the same script can we import we can we can import Okay so I I'll show you few ways to do it okay we'll talk about egas script six Imports moving forward okay we're in um as of now we are not equipped with the configuration to do that okay so if you do something like this now import from okay so from here what are we trying to import Justice League and and I want to render this Justice League here if I try and run this see it says you cannot import outside a module okay because we need to set up few configurations and then we are allowed to do it okay but as of now let us go with the flow okay what is the flow first let us understand how to Import and Export modules here so I'll say module. export Justice League here equals z now optionally if you have more than one property that needs to be exported let us say I want to export user as well I want to export hero as well how will I do it can I simply say see I'll now refrain from this Justice League hero I'll simply say hero module. exports. hero why because this is a little shorter syntax that is all and then user equals user so have I have exported two of these properties now when I'm importing so let me just undo all of this okay when I'm importing all of this this info will not just have one property it'll have both of them okay so now if I say hey log this file so it is now having both of these information isn't it oops sorry it has both of these information so what's happening behind the scene is that this export that we are using although I've used two different lines it still gets exported as one object this exports is an object on this object you're creating these properties now there's another way to do this okay what we can do alternatively is this see we have this module. exports I told you this exports is an object you can override that object with this object so I'm assigning another object to module. exports object so I'm replacing the module. exorts with this object in other words so here I can say I want to export this hero as hero and I want to export um user as user so I'll say user user so I'm exporting both of them of course destructuring is possible we have learned that for those who don't understand destructuring don't bother just follow along the code now that I have implemented both of them in the two. JS file if I ask hey log this it still gives you the same output correct so either you do this or this is still the same now in the new version of Javas script you have a techn technique called destructuring wherein if the name of the property that you are exporting to the outside world and the property that you exporting if they have the same name so in this case I'm exporting hero object as hero I'm exporting user as user correct so you can destructure them like this that means you can simply use the name of the property that you're trying to export because the name name and the property are the same you can simply use hero so what this hero is it is nothing but a object what this user is it is nothing but a string value so you use this when you are exporting multiple objects yeah it makes sense isn't it okay so you can use this to export multiple properties now let me also explain this way of exporting is referred as um okay so this is called as named exports and this is referred as default exports because see here you are assigning a name to this exports property yeah it's just that you know see there are two different ways and as a developer if you want to convey to your friend okay you need to be very specific as to what you are doing so you can can refer this as named export and this uh wherein you are replacing this export as default export okay both of these are default exports so in this case I'm not destructuring in this case this is a default export with destructuring can we export multiple objects here of course you can isn't it Nishant see in this case user happens to be a string but if this was an object you can say for example I will create another hero say this one is called Batman this one is called Superman okay the title here is Superman first name is Clark uh last name is Kent and he's from met Metropolis so if I want to export both of them I can so in this case I can say Batman and Superman so am I not exporting three properties now these properties can be an object can be a value like this it can also be a function of course it is fine okay so you can use see in I'm giving you these different approaches because when you start referring to somebody's code either online or when you join a job um you will get to see some people have done this some people would have done this that's okay okay just be aware of different styles of exports that's it and be capable of has used this you say hey this is a named export where I've given a name called hero and the value that I'm exporting is zero makes sense okay multi-line comment just select them control um I guess you know Al shift and a is what I use shift alt and a on Windows in a file only single default can be used ah correct so if you're using a default export in a file there can only be a single default that you can use okay but in case if you want to use named exports you can use as many as you want uh for multi-line comment it is no shift alt and a control forward slash is for single line comment okay so see if I want to comment all of these I I can comment it in two different ways I can say control slash so this is like single line comment I can also use control shift a and do a multi-line command so depends on what you really want to do okay both can be used now coming back to the context so you have now exported all three properties and now this info is an object which has all three properties see all three properties can I export a function the answer is yes I can see there is a function that we created here and for those who are new I will expand this function okay so there is a function called Adder which expects two parameters num one and num two being passed now when you pass num one one num two it'll return num one plus num two here so this Adder also needs to be exported if that's my requirement I come here and then say Adder as well so what is adder adder is this function in JavaScript there is no type concept okay by default when you're are sending this see this export is an object what you get here is an object okay Madu don't worry keep asking I guess you know your friends in this class will definitely help you with some answer if they know if not I'll help you with the answer nevertheless everybody is quite friendly okay you can get your questions answered now coming back to the context of course you know if you learn typescript uh you can add types onto this for now this info is nothing but an object okay and JavaScript is dynamic typed language which means uh at one point in time the Superman can be an object at a later point in time the Superman can also be a Boolean and that is perfectly fine this is perfectly fine this is a load okay so if I take my cursor here it's pointing to this object if I take my cursor here it is still pointing you to this object but in fact it is false it's a Boolean value so you can dynamically change them if you really want to okay actually we get user also key value pair so as now get it what we pass as object object yes because this module. exports itself is an object that is why we were able to create properties on top of it all right guys so now we are clear with how to export from one file to another file however if you want to from this object okay from let us say I'm exporting user Batman Superman Adder I'm exporting four properties I'm not not interested in getting all of them I'm interested in getting only one of them which is user let us say so then I would say dot user so this info is now only one property not all of them easy so you can filter out whatever property you want let us say I want to call adder adder is assigned to info now this info is a function so I need to pass in some value 8 and 9 let's say now if I run this I'll get 17 15 minutes now see it's an online Workshop VI you can break any time you want and you can come back and then start and join the session um then info will show only one property yes yes it is that's what I showed you now isn't it Nishant so Adder is assigned to this info fund let's say I can add another require I'll say this is user info and this is user okay so the user is assigned here now I can use this user info and then display that here that would work as well just a quick info guys in telepath offer a fulltech developer course which enable you to learn textech from both front end and backend through this course you will gain handsone experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the full stack developer course see think about this like an object you got an object what object module. exports object from that exported object we are extracting a specific property see you don't have to do this you don't have to do this right so you can always is get everything assign it to a variable here I'll simply say info in this case and I get everything okay and from this info I will now use the adder function and I will use the user information I would use the Superman title information so everything is available this info is now an object isn't it from that object I can extract those properties that I know what I have exported so if I run this it should give you the same response hope this is clear okay so guys now we will go to the next step what is that we will now learn see once you know you have the ability to Import and Export ort from one file to another you can Import and Export we can also start working with something called as globals now what is a global um Global is the ability to create a variable or a property that can be accessed to any file that uses it okay so I'll show you what it means though first let us go create a new file I'll call this as Global again the name is not significant you can call call this anything you want you can call this a potato if you want I call this global. JS file that's okay I you call this anything okay so I'll rename this to three.js does the name really matter the answer is no it does not okay no Emmanuel it's spelled as global global okay so what is a global so like the way you have the ability to assign to module. export you have the ability to assign things to a global object so I'll say Global dot not this Global dot um let us say title equals Batman like [Music] so I will in fact that's the purpose of this topic so once you have assigned it to the global okay on the global there's a property called title that has a value called Batman once you assign any other file that uses This Global now can have access to it so here I will go create a new folder file call it four or maybe we will call this is using Global JSF so this using Global will simply require it require what in the current working folder there is this three.js file see I've just required it because I've required it whatever I've assigned on the global will now be available here so now if I say hey console log the glob gl. title it will give you the response okay so let us ask using Global to work I'll say node space using Global see it says Batman see although this technique also can be used to set properties and to use these properties I suggest don't use them for a simple reason that whenever you are assigning a property to the Global every file will be texted okay so when the global object becomes really big your application tends to become slow okay of course you know your computers are really fast you you may not find the pinch but you should remember that node applications can also be performing on a mobile phone isn't it so there the memory is um important so avoid using globals of course you know this would be working on a server so it would really not matter but it's not a good practice to pollute the global space okay so keep things simple use module. exports to Import and Export okay watch okay I'll put both of these in on the screen so you guys can take it this is one and this is using so three.js is where we are defining the global and using Global is where we are using the global okay Global simply means that it is available in every case okay see now in this project if I ever use the word title that will then conflict with the global Title isn't it so that is why using Global is not recommended Global simply means to say it has a scope everywhere so you don't even have to refer the name correct W let's see if you have any more doubts before we jump to the next topic if you use a title again that is if you're are defining the title again you are overriding the property that is on the global okay watch okay what I'll do is this I will now say title Superman okay see in the three.js it is Batman using Global I've set it to Superman I will now create another file and now I will say require require if I now say hey console log this title this is another file right modde space I'm using tab to navigate okay see it says Batman now if I use and now ask for the title it say Superman okay because in the context of this three the global Title was Batman and when you use that Global here the temporary context changed it to Superman so title now has a new value here so if you access this file it'll then be Superman so one reason why you should not use Global okay yeah because see when you're working with global yadalam you should not assign it to a variable you are basically allowed to access it not assign it to a variable and then use it yeah you you simply have to make that file available to this project that's it I hope you know this example makes it clear let me put this also beside uh maybe you know all of them one beside the other see if you can get all of them work for you so what it was you know um showing is there is something called as globals these are are preset globals globals that are already um available or made available to us so if you remember we have been using this require module exports without having to think from where am I getting this okay so you you may say hey VI you have used the word require where is it defined okay so in this 2. JS file we use this word require where have I defined it I'm able to use it because this is a global property similarly in the 1. JS um we used the module. exports where is it defined where is this module. exports defined it's a global property how do you know it is global if you go to the documentation select globals you see there is a list of globals that are already available there Global objects so there is something called as underscore uncore deame underscore uncore file name exports module and require not only this there is a long list actually see these are some of the um globals we have been using a command called console console is also a global property that is why we have been using console.log throughout correct I've been using console.log where is a command console declared here it's a global property okay console itself is a module you see that console is a module I've been using the word called log or the method called log we also have console doino console. warning console. trace and things like that um lot depends on what are we trying to um display okay so cons cons. warning will create a warning trigger so maybe I'll show you that okay watch so in this case I want to say uh console do log um I am a log okay and say bar console. bar is a warning console. error so I let us run all of this uh node space using Global see as of now you don't see any difference between all of them uh if I enable some extensions on the terminal uh um I may find them with different colors but when I print this on a browser you'll definitely see some difference let's open Chrome and in Chrome press F Val to enable the terminal and in the terminal I'll say hey console. log uh maybe know what I'll do is just to make things little quick I'll copy all of these as it is I paste them here okay and if I press enter see you get to see this is a log this is a warning and this is an error make sense so a log simply has no um style associated with it a warning tries to bring your attention onto that particular line an error defines that this is an error and this is more serious offense actually so this is a warning and this is a more serious offence so you can log you can create a warning or you can create an error you know inside the terminal you will not be able to see any colors okay but there are extensions that are available for vs code if you enable them you will actually see difference between log warning and error so there are many such things um but we will still stick to the console.log I suggest please take some time out understand they are all quite useful okay but I'm only covering things which are really popular and which may matter for you you know your interviews so coming back to the context we were discussing about globals so there are some buil-in globals and what are those um we spoke about um the exports module and required now what is the file name this basically tells you the file name that is accessing say for example I'm inside this 2js file I want to know what is this file name programmatically how will I do it I say hey console log this underscore uncore file name this will give you the name of the file I'll just suppress these consoles the console logs I'll just stay focused on this two do JS is the file where I'm using console.log um so let's say node space two umore uncore file name sorry n should be lowercase my bad see it gives you access to the name of the file okay so if you want to programmatically know which file is run running this command you can use underscore uncore file name um this is uh 1 2 3 4 5 and this is six called Step six JS file so I've got a doubt seems you becoming too fast is that so no I these are very easy topics Emanuel so I went little um quickly on that because they will not contribute too much to understanding node okay but there are some built-in ones so you can use console log see I'm not importing anything okay I simply can say underscore file name this will give you the file name and if I want to get the directory name I can say their name directory name let us log both of them okay what is the directory name see I know that I'm inside this day one folder but how do I programmatically know that I'm in the day one folder so I will now say node space step six built-in global. JJs file see the first log gives you the name of the file the second law gives you the name of the directory okay correct the rest I'm sure now you you are through with it because we spoke about it and we we have been using it and we'll keep using those module exports require throughout this Workshop Okay cool so let us now move on um cool understood awesome so there are few more globals in fact you know you have something called as set timeout um set interval so on and so forth maybe I'll create a simple example to illustrate that as well we'll probably be using it moving forward let me comment this out so I can schedule a function to be called at a later point in time let's say after five minutes this is too long okay so I'll make it about 2 seconds I want to call a function after two seconds how do I schedule a function to be called after 2 seconds I can use something called a set time out and this will call a function any function is fine I'm using an anonymous function a function that doesn't have any name I will now want to schedule this after 2,000 milliseconds this duration here is in milliseconds now I can simply say console log I shall be logged after 2 seconds see since you know this piece of program is now asynchronous that means it will allow the next piece of command to execute okay see this is coming from line seven correct and this is command in line nine this is a command in line seven which one is first this one but see I've scheduled this to run run after few seconds correct after two second now if I launch this step six buil-in globals see command in 10 got executed first then command in line seven got executed after 2 seconds so this is how you see that this is an asynchronous program now it allows the next piece of code to be executed before this line is done see if this program was not around that is if I comment all of this and uncomment this line This console log which is in line number seven will get executed first correct and then this line gets executed agreed line seven then line 10 but because I've wrapped it inside a set time out okay because I wrapped it inside a set timeout set timeout will create a delay to execute this piece of code it'll take two seconds and after 2 seconds you'll get the log in line number seven Okay cool so you see you have the ability to delay a function by 2 seconds um see this is where know the concept of pseudo threats how can set interval we we'll be covering that next pranoti so set timeouts job is to delay a functions execution by some time okay so you're creating a delay in execution of the program yeah you can use or you can think about it like controlling the flow of your program you are delaying this program to be executed after some time but on the other hand if you want to call a function every few seconds let us say I want to call a function every one second like a clock okay I want to keep ticking something so then I can use something called a set interval so you're setting an interval and you call this function with a a delay of 2 seconds or maybe I'll make it 1 second yeah okay so here good idea isn't it so I will now use this command in line number 13 what will this do it'll keep calling this once every second until the end of time okay so let's check this out you'll see one log coming every second see I'm getting a log once every second now if I want to terminate this I'll press contrl C and terminate okay but now you may say hey vij no I want this to run five times okay and then I want it to stop yeah it's an infinite Loop you are calling this program until the end of time but that's not a good idea isn't it you would want to control this how do I control this there is a method called clear interval similarly for set timeout there is a method called clear timeout okay and similar to set interval there is something called as clear interval as well so you can use that to stop this Behavior so if I come here and assign a variable to this I'll go create a variable call it si si is what the set interval the set interval now has a reference it has a name it has a identifier I can use SI to refer for this set interval make sense now that I have this set interval I've assigned a name to this set interval I should be able to use this and clear that interval if there is a need I will now call this clear interval clear which interval so that is where you give the reference the set interval that I've created this one which is what I want to clear so as of now if I run this example the set interval command gets executed and before one second this line gets executed isn't it so will it take JavaScript compiler one second to read from this line to this line no way right so this will immediately stop you'll not even see a single log watch see we keep waiting nothing really happened that is because for JavaScript it'll take few Nan seconds to reach from this line to this line it'll immediately stop the interval but we want to delay the interval how do I delay the interval how do I make sure that this C set interval will be called only five times so what I can do is I can go create a variable I call it count this count has a value Z Z attached to it and here in the console log I will simply say command for and I will use the count see count is zero count is what I'm using here and now every time the set interval is called I will keep incrementing this count maybe I'll start with one okay so how do I increment it by one I can say count Plus+ you can also say count plus equals 1 okay I guess Plus+ is the shorter syntax I'll use it so every uh second this log happens and then I'll increment this count and now I will use a condition to check if the count is greater than or equal to 5 okay I want to stop I I guess you know because I set zero here let us say I will say greater than five not equal to five greater than five if the answer is yes I will clear the interval so what will happen now is that JavaScript will come and read this line it'll declare a variable called count and set it to one then it will create a interval and schedule this function to be called once every second then it will come to this line is this condition met see count is one what is the condition here is the count greater than five is the count greater than five no so it'll simply ignore the command okay after a second the line will come again here okay because see you have called this this function isn't it and inside this function the counter will keep incrementing okay after this is incrementing you'll see is this count greater than five maybe what I can do is I can cut this and paste it here inside as well okay maybe know as a responsible developer you can also do something like this see I have this console log and I keep incrementing this count let us start with this zero here don't bother typing just pay attention on the explanation these are um just Concepts that you you can easily grasp and understand I will now use this condition if count is less than this time okay I'm changing my equation here if it is less than five I'll do something else I'll do something so if it is less than five I log okay if it is less than five see count will keep incrementing count is zero I say count plus plus so at this line what would happen the count becomes one okay and this condition will be checked is the count less than five yes the count is less than five then this console log will be executed what is the value of count this time it will be one and else will not be executed why because the count is less than five if we write code outside the count it will not get executed correct by that is why I moved it inside okay so now it gets evaluated isn't it because this function will be called every time for um uh until the end of time okay with a frequency of 1 second so now that Ive moved this condition inside this condition will be hit every time okay so now let us run this let's run this yeah so this command let less than five okay because um we started with zero the first time when it run this will be one this command will be checked or this um condition will not meet so this will increment we can alternatively put this here as well okay 2 3 4 five then top okay yeah less than or equal to five would also work okay but my intention was to make sure that it would run up until it reaches five um all right so let's go to the next example guys so we have seen some basic uh issues but what node does offer is it gives you a huge ecosystem of modules see there are long lots of modules on the left side Global was one of them that we used okay uh clear interval basically uh allows you to clear the specific interval that we have used see here um this one so we had a interval correct so we can clear that particular interval so the clear interval will take the reference of the interval that you would want to stop or you want to clear that's what clear interval does now now coming to the context guys so on the left side you see there are many many modules will we cover all of them no yeah why because see not all of them are relevant and not all of them are um extensively used there are few which you understand and few you can learn on your own say for example uh we'll talk about this buffer um cluster little later some child process these are slightly Advanced so we'll defin Ely scheduled to learn this little later first we'll tackle with something which is very easy to learn okay that's how we can progress so we'll learn about few of them and I will allow you to explore this documentation on your own are the system resources that are available on the server side so that I can continue with my program now that can be accessed with something called as OS module so if I click on OS module it gives you a list of all the methods that you have see so far we have used some built-in Global methods now we are using a module that is not a global okay so how do I work so you import this OS module so let us go ahead and create a file uh this time it is called as step seven using modules do JS file so step six was buil-in globals step seven is using modules we'll also be using external modules moving forward okay I guess we'll start with that tomorrow for now we'll use this um built-in modules so now I want to use that OS module how do I do it so I'll say let Os or VAR OS not car V OS o OS equals require OS now with this we have asked node.js to give us access to this OS module which was loaded when nodejs was installed all these modules were installed on our computer actually where can you find on your user um folder there would be node modules folder okay in that you can find all these modules installed on your machine so when you install nodejs that's where it got installed see if I type node okay so I can right click and open the file location correct so inside this you'll find node modules the core pack I guess T um not here I guess this not the one not this actually um yeah sorry right here it is okay this is on my machine okay so in my machine program files node yes um node modules npm node modules and you'll find OS uh no you don't find OS here I guess you know that would be part of some of the module if I'm not mistaken but most of the modules you can find here correct um just look um where they are on your machine because a lot depends on the system that you are using the location for these node modules may be different but we'll definitely be using the events and globals and things like that uh you'll find most of them here so how do I access this OS module what do I learn out of about this now that know we have asked nodejs to make uh this OS module available can I share my screen after have to show you something what you want to show okay um sure [Music] um sure you can okay so I'll give you some time when we are done okay so now that know we have this OS module yeah we now can use it I can say hey console la a method of this OS which Returns the uh architecture okay so Arc is a method you call it what it does is it basically tell you what kind of architecture you are using so it can be a 64bit or a 32-bit it's quite unlikely that you know you are still using a 32-bit machine most of them would be a 64-bit machine so let us now run this file in the terminal node space step seven run see it says x64 because I'm using a Windows machine which is 64-bit processor um let us learn few more of the server see in fact you know as of now this node is installed on my machine so my machine is acting like a server okay I can change this Arc to the total memory that is is available so this is the total Ram that you have on your machine so let's go check it says 17 I guess I remember installing about 16 GB of RAM so where this 17 came I don't know so I can you know uh um show this in gigabytes as well because the default output that you see is in bytes so if you go back to the documentation and say I want to look for total memory memory say total memory you'll have an example so the total memory Returns the total amount of system memory in bytes as an integer correct so if I want to convert it to MB okay GB and then TB you'll have to um wrap this into an expression oops you'll have to wrap this into an expression divide this by 1,24 and divide that by 1024 and divide that by 1024 so let me wrap this once again in an expression and divide that by 1024 so if I run this example this will give me value in gigabytes so this is about 15 gigabytes okay I I can probably add GBS as well in the end okay so if I run this example so it'll say 15 GB is what I have as memory on my machine so this the total memory but how much is available for me to use so if you press control shift delete on your keyboard control shift delete so if I press control shift delete it'll actually block the screen okay but from this I will enable the task manager now here you can see the there are many things running on my machine as of now if we look for the performance okay so if you see um the utilization um and it tells you where where where no not this the speed at not this this yeah see here you can see about 49% of memory is free on my machine correct so I want to know how much is free here so I can ask a question I know that there is a total memory but what what is the free memory okay so let me just log that message this is to denote the total memory and this to denote the free memory command to duplicate line of code okay I use Control Alt down arrow key oh sorry shift alt down arrow key or up Arrow key both would work so save relaunch run this see out of 15 I have got 8 GB which is what this guy was suggesting about 50% is what I have free available so this is the total memory and this is the free memory that is available on my machine easy let's command this out there are there's a lot that we can learn about um the system which is using nods we can also ask how many CPUs are installed how many CPUs does your laptop have okay um so you can say hey. CPUs CPUs will give you an array back okay so if I run this example it'll give a list of all all the CPUs that you may have there there's a lot of them you may want to find out what is the length of it because we got an array isn't it so I can ask what is the length how many CPUs do I have on my laptop it says I have about 12 core um 12 CPUs uh if you want to get the information of each one of them you can okay see you have got access to the length you can also say hey I want to get the first one square bracket zero I'll get access to the first one then I'll be able to display easy um see there's a lot that you can get okay derive out of um um the server here now if you want to get the user information you can use OS Dot um user info user info is a method and this basically gives you an object okay and now I can ask what is the username out of this let's run so username in my case is VI a lot depends on the computer that you have okay so in my case I have many CPUs on my laptop okay um like many processors um not processors okay basically these are CPUs that are on your machine okay so from the user info if I'm interested in getting [Music] the username I can do that if it is a company provided laptop you'll actually get the details uh which might be your um username or something like that see it provides you the name that I have on my machine so here we'll go create a class any name is fine so I'll say Class Hero this hero is a class and it can have a property called title this title can have a default value default title um we can have a first name um first name equals default first name last name uh like so now we can create a Constructor for this so This Constructor will now allow you to expect two parameters to be passed the first name and the last name so I'll simply call this as F name and L name just to make it easy and when you pass these two parameters I'll use this do first name equals the first name that we have passed similarly the last name would be L name easy and now we can have another method if you want to which says full name full name is a method okay we'll so so far we have just created isn't it Madu so you're have to wait for the next step so that I show you how to how the Constructor works the full name here will return this DOT first name concatenate with a space and say this dot last name yeah last name correct you're right um there it is thanks for the physics yes now you cannot goang pil that would be possible in Java not in JavaScript okay in JavaScript you have a keyword called Constructor which becomes a Constructor okay so we are done with this specific class and now we would want this to be exported or used in another file how do I do that module. exports is is an object and I can have um hero U maybe I'll say hero is what I want to export to the outside world so you know about this idea of destructuring that we learned yesterday correct the short way of saying hero equals z um can we Define Constructor as Constructor function name uh or we have to Define it as Constructor what do you mean by your question web explain the Constructor of course I will be okay so we have just created a manual hold on so Constructor allows you to create a new instance of the hero maybe know if you guys all of you have doubts because if you have not seen JavaScript class this how it works if I want to create an instance of this class okay if I want to create an instance of this class and pass instructions to this class when I'm creating an instance this Constructor is actually used this Constructor is not even used or required if you are not trying to um customize this instance yeah watch watch so what prank ISS can we also export like module. exports equals step class why step class class is the name of the class that's the name of the uh block that you want to export isn't it not the file name we cannot export the file name no so in JavaScript guys you can export classes you can export functions you can export arrays objects um strings um anything you cannot export the entire file itself okay um you can export you know the code not the file name just keep that in mind now if I have this class I can create an instance of this like this so I can say hey let hero equals a new hero okay so when you're using this hero okay see this hero is the Constructor so there is a default Constructor that is created which will create the instance of this Hero on the memory and it will assign it to this hero object now if I come here and say hey console log me this hero. first name it will okay similarly I can say what is the last name and I can also ask what is the full name full name is a method so I basically call it like this easy so if I now run this so I this is step one classes. JS file so I will CD to the day two node space step one classes. JS so you get to see the default first name default last name default first name and default last name combined together so you're able to log all the properties but if you want to modify this class okay so you want to send parameters when you're creating the instance that is when you need a Constructor so like the way we discussed before the Constructor takes two parameters which can be used to set the first name and the last name of course you know we could also have logged title so inside this um uh Constructor we'll get the first name and the last name and this first name last name or you know the parameters that we are getting we can assign it to these two properties what kind of properties are these by the way all of these are public properties in JavaScript can we Define a private property of course you can okay so if you want to declare a private property you would use you will have to use like this hash and say let's say secret or Mission and we can have a value so this is a private property it will not be accessed by its instance okay now coming to the context we had this Constructor like in the previous step we'll say hey this DOT first name concatenate that with a space and this do last name will be sorry what am I doing this do first name and this do last name will be assigned to this do first name and this do last name I I got your question so what you are asking is what is the use of this the use of this is it is basically concatenating these two properties and giving me the output so as of now this has some default properties which we are trying to modify yes so now that you know we have a Constructor which expects two parameters that can be passed we can pass in some value one two what is Bruce a string what is way a string both of these are passed now when this Bruce and vein are passed this Constructor gets this first name and the last name and they are assigned to the first name and the last name respectively so the instances first name and last name are modified okay I can also assign a title property okay so I'm expecting three parameters so first name is used last name is used as title was not assigned so I'll assign one now what I can do with this I will assign it to the title title is H title the hero title so this way now we have taken three parameters so we accepted three parameters using the Constructor yes it is used for polymorphism where you set these classes and new value you can customize the instance okay I'll save this and now if I run the same example you'll see that the past values will now be available so Batman is the title Bruce is the first name Wayne is the last name Bruce Wayne is the full name yeah so these are parameters isn't it so you can call it with any name but when you're trying to access the classes property you need the keyword this when I create a new hero without passing any parameters and the log them it's printing out undefined no it did not print undefined right it actually okay you did that I guess in our case we have some default values being set already isn't it so there were default values so those default values will be assigned when you're not using the Constructor I'll just comment this out okay then there is some syntactical mistake okay check this out or maybe if you forgot to return the full name okay return in the full name or something like that something would have gone wrong isn't it so now that now we have not use the Constructor and I'm not sending any parameters this would use the default values so I get the default title default first name default last name and all of them which were in its original value now that know we had used the Constructor we have the ability to customize or pass parameters to this Heroes Constructor and this Heroes Constructor will then make the assignment necessary to keep private Constructor we also need to mention hash Mission equals yeah so anything private in JavaScript uses hash to keep private Constructor no there is no concept of a private Constructor in JavaScript okay Constructor is always public uh I guess what you meant was because your question is slightly confusing to keep a private Constructor we also need to mention hash Mission equals personal mission now no no no no no this is these are two different statements okay so don't get confused so this section here I'm declaring private properties this section here I'm declaring public propert uh sorry these are public properties and these are private properties and this is a Constructor and these are methods yes cool now there's some conventions that we JavaScript developers should follow like this see this full name although it can be mentioned here we would not do that why because see there is a specific area where these uh methods would be return it would be usually return after the Constructor so the Constructor gets sandwiched between the properties and the methods okay so now then know we have have got this class um maybe I'll also show you how you can use the getter and Setter so far even you have come if we can only Define the public in the class hero without any default value then why will the Constructor see I guess if that's your requirement you can use it that's what you know it is yeah so do you have the flexibility to do it yes you have so what wo is asking is can can you pass nothing here and what would happen so who would like to take a guess as to what would how to use Mission value see since this a private property anywhere inside the class you can use now you cannot have multiple Constructors okay there can only be one Constructor so if I run this example now see we did not pass any value here so this hedge title will be not not defined correct so since this is undefined title will then be undefined first name was not assigned that becomes undefined so undefined is assigned here last name is also not sent that will also be undefined so everything will be undefined see everything is undefined then don't use so did I not show you that don't use the Constructor because in the Constructor you're making an assignment isn't it are we not making an assignment here and since you know you did not send these properties they would be undefined I was making the same error got it okay for output should we need to give console log Mission now that wouldn't work isn't it see it's a private property so what is the point of trying to access it it will not work isn't it so if I say hey hero give me the mission the ID itself is trying to tell you that this is a private property you cannot access it outside isn't it yeah private does not go outside yes so it's a private property who can access it any of these class members can access it say for example I have um um top Mission maybe this would return this dot hash Mission do to uppercase so I'm trying to modify it and then display it so there is a method called top Mission when you call it you will be able to access this property but this will not work so I'll come M this out it's a method that we just created so if I run this you should now get the response okay say it's my personal mission and since you know we did not pass any of these parameters let's pass some parameters here if I run this example in the terminal you should see the response now just to sum up private properties are a class's property any any member of the class can use it it cannot be used by its instance so that you can create a new instance of this hero okay so if you want to create another new instance of the hero you can do that here so this is hero I will say this is Z1 I I can now customize it so once you create a class this acts as a blueprint of the object that you're trying to create okay so this object will have the structure that this class declares since this object object is a copy of this class it will have all the properties and the traits that this class has so in JavaScript there is no method overloading or Constructor overloading possible with this version so it's uh don't compare this with Java okay or any other language which allows you do that Constructor does not need to call when we we define object when um now I'm not understanding your question can you rephrase it goong okay I'll upload this file so maybe you can take this I'll put this on P pin okay so sometimes you also would want to have a property for the class itself okay it's not supposed to be public it's not supposed to be private but the classes property that's where you know you declare something as static now the static can be used for both um methods and properties so now let's say if I want to declare a version number and I want this to be accessed only only on the class no one else okay then I would use the keyword static I can assign a version number let's say something like this now since this is a static member you cannot access on the instance okay so you cannot come and say hero what is your version this a static property if I run this you'll get undefined because there is nothing called version okay but since this is a property of the hero we can access it on the hero hero has version instances don't um get the version that's a class's own property so if I run this you should now get the version there no it is not by above so if you want to deare a classes property which will not be available or accessed on the children or on the instance of the class class can also have its property called Static okay so this is a class classes property it can now be accessed only on the class not on its instance version is not a parameter it's a property of a class yeah you can use it for many cases let's say you know I want all the um not all the I want the class itself to have a property of its own so if you're exporting the class this is available on the class TR see private is used inside ins the class anywhere inside this class you can use the private property you cannot use it outside but static used is used on the class not in the class okay no no uh it is working for me here yeah so check that out okay maybe if you have made any mistakes uh fix them so what is the use if you have a requirement to create a property on the class itself which will be available only on the class directly you can use the static keyword okay you'll have to find a use case for it then if that's your requirement you can set it up as static can I use this static anywhere inside the class can I use this static anywhere in the class then how is it behaving like private can I use private inside the class anywhere inside the the class but I can't access it directly using the instance that's why it is called Static isn't it it's a classes property not the instance property so it is not like private isn't it so they are different now they know we are through with this if I want to export it to the outside world I can export it like this okay see this class can be customized you know how it is used inside so I'll comment this part out this was just to illustrate how you can create an instance now I can actually copy all of this okay copy all of this and now the know we have exported this class this class from the step one classes I can go create another file this called step two using classes not JS file and now I want to use that class here I want to um import this so we have exported it here and I want to import it here now how do I import it so we'll now go say const hero equals require from this current working directory step one classes this has many things to export I guess right this is only one thing okay so you get an object here the require provides you what module. exports object and I'm interested only in this hero in this case and this hero would be assigned to this variable hero and now I can pretty much do the same thing what I did before okay so here I'm just copying all the logs that I did in the previous case um so that I can show you how you can import and then use now if I run the step two classes I should get the same output that we got before okay so I'll say node step two so you get the same properties here so ideally you would create classes uh and make it available for other files to create an instance okay so this is the use case so the idea here is you can create classes export them and then use them the way we want why are we using hero with require when we are only exporting see even if you export one property you still get an object isn't it the shika from that object we are importing only the hero does it make sense because whenever you use use this require it makes this module. exports object available for us of course you know we are overriding with this object this object has a property called hero that is what we are using here okay I hope this topic is clear so you know how to work with classes um how to use them and then now we'll move forward all right so let's go to the next step so this time we'll look at another module called path module now there are many parameters so I suggest you know you can explore these um base name allows you to create a base path for all the requests that you have you may want to set up a base path now what is a base path like this the default location that your program will be looking for V is a variable which allows you to change const does not all you change it so if you come here and just to you know explain you if I use the V here I can say hero equals hello okay this is allow this would work see in using step okay see now everything broke isn't it but what is hero after this line hero is a string so here this cannot be used as a Constructor anymore but if I used it as a con then it will immediately protect you it says hero is not a Constructor that's what you know many of them are seeing now right if I run this it says assignment to constru constant variable is not possible this will not work okay so it will protect your code so I'm using const file name is also correct okay uh because see the same code is working for me the same code is not working for you so there cannot be such discrimination now we'll go create another example this is step three this is a puny example okay so it should be very easy because I'll be using this path module you know um a lot in this um Workshop so I thought I'll um explain about this um so what is the purpose of this path module it allows you to um um create a path that is um useful for for nodejs see because if I want to select a path on your machine let's say um you own Windows okay so if I want to select this path if I want to select a file I'll go create a new um folder call it images and inside this images let's say there is an image okay so if I um just a second I'll app load some images uh or I use some images that I already have on my machine um recently ksb back images okay so I have some images here so I would want to copy one of these image Batman here and I want to use it in my project uh we are at no July so we are here so if I want to access this images okay in my code or any file that I may have um say similar to this I'll also create another image uh in another file this is going to be called as um config.js any name is fine so I want to change this as config.js see this config.js file is an object it'll have a property called title and title says I am a configuration file we'll be using such files moving forward okay for configuration I want to use this configuration file in my project how will I do it so I'll say v um import this file okay so I'll say maybe const um config config equals require so how do I access this file so on my machine I can say/ images SLC config.js if you're on a Mac okay uh I guess you know if you're on Windows if you want to access this file if I want to access this file sorry I didn't want to double click it that don't save if I want to access this file notice in Windows the way I access it a C drive backward SL node _ July back SL day2 back slimes back SLC config.js file you got the point right so the path actually is different on different operating systems so on my machine this is the path okay if I want to access this file this is the path that I would use on on a machine that is running on Mac or Linux the path may be different so in cases like that okay I would like to have a uniform path so that's where you know this idea of path module comes you know handy what path module helps us is to give us a uniform path say for example I want to uh display um a image okay maybe know this is not the example for that because we would not be able to render this image how did you open that config Json tab yeah let's open this okay on your machine using Windows Explorer so I will import const um path equals require path now that the path module is available I can um you know um use this path. join there's a method called path. join uh you can see that here and this allows you to pass in some um file names and then concatenate them together so I know that there is a path by name images and inside images just I'm looking for batman.jpg file okay so you mean I have created a file called config.js okay if you double click you open this config.js yeah so there is a small snippet that I have pasted now all I can do is um use this path module to know that there is a folder called images or maybe I can call this as assets I'll call this as assets because I've um earlier my intention was just to use image later on I thought I'll show you Json file as well so I don't know what would be the uh server configuration when I host this when I put this online okay maybe I would be using a Linux platform or I would be using a Windows platform or I might be using a Mac platform I don't know so what I'll do is I will go create a variable called as link path equals the path it has a method called join now what join does is it will take a list of properties from us and then creates a path that might be appropriate for your operating system to work with Okay so you can you know in this case you can go give a you know all the paths that you have so for example my folder is called assets then what I want to access is batman. JPG file JPG file okay so I I want you to join these two um assets or I want you to join these two um the location and generate a f path for me now if I ask hey console log this link path for me it should give me assets SL or backward batman.jpg file which might be appropriate on my machine to access this batman.jpg file so let's go give this a try node space step three path so you see I'm using Windows and this is my path so if I hold control on my keyboard it allows me to open this file isn't it so that's the qualified path so I don't have to um do any guess work okay will the user be using a Mac will the user be using a Windows um so you know what is the path that you are trying to navigate to just provide them uh as different properties and path module will generate a usable link for you now there may be also a situation where you your code would have exaggerated this is a situation where you're trying to work with um a lot of files in your program and eventually you will okay I would want to access files um or file paths which are generated by um a third party server side program like an Java is generating a list of files for me and then I want to access them so maybe the path will be like this this is like you know a VAR EXT path equals and then I would simply um this is a fake path okay so it it may not be quite relevant but nevertheless let us just copy this path as it is and I'll paste it here and maybe there are some irregularities here okay so I can have a backwards line and something like this you know that this is not a qualified path correct but we can ask path to normalize it your mic is not working okay did you uh do you have batman.jpg file if not create this config.js file and that should work for you just a quick info guys intellipath offers a fullstack developer course which which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without out loud this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the full stack developer course okay try doing this that would work so now the EXT path I want to normalize so I would say um V normal path equals path. normalize normalize will pass in the cxt path and now if I say hey console log me this normal path it would have regularized all these irregular code okay so there is a problem that's probably because I think there are too many forward slashes and backward slashes let us go try this now yeah uh okay uh all right so this is working as X you know so let me just make it yeah this should give you the exact path even if the file does not exist join gives the path correct it it for this example to work you don't need to but to validate you need the file correct prank that is why I created that file or else you'll be questioning okay hey VJ can you actually click on it okay so this is now an active file link it would work isn't it okay so what is wrong here is he called this path module as config correct now if I want to use this module I'll have to call this as config.js and that would work isn't it but how long will you remember that config is path not for a long time isn't it so if you open this file after 2 three days you might again be confused especially if this is a three line file or three line example then there wouldn't be a problem but if this file exceeds more than 1002 100 lines you'll not be able to recall what is config what is config it looks like a generic name it doesn't you know indicate that this is path so I recommend always when you're are loading a module use the name of the module for the variable that way you'll know by looking at the name you know that this is a path module makes sense Emanuel and everybody so whenever you are requiring a module create a variable that denotes or tells you what is the name of the modu that you're trying to import don't give um you know a name that might conflict um that will become too much of a stress uh to program over a period of time okay just make things easy for you because as a software developer you would be working on on code that someone else has done or you have created um maybe two years before 3 years before um then you'll really get frustrated as to um what how to make sense of what you have written Okay cool so uh I'll delete this file but I think you know there is nothing called new.png on your machine do you have a new.png on your machine it says no matching result correct but in my case I have a matching result I deliberately added this batman.jpg file Json File 2 okay uh check you know in your case assets had uh um mistake or does your file name also is called asss SS like this is this the name that that you're using for now this Json file could have been a replacement here so I can you know create a link I mean use a link use this link oh no no not this one so this is a sets uh link path okay this one so this link will work yeah uh the config Json as of now doesn't have any um significant use okay moving forward it will just keep in mind that we can use a configuration file outside and then refer them in your file uh it'll be usually used to store database passwords usernames and things like that okay okay so guys let's move on so we have um learned one more module called path module although path module is not all that big to learn there are a handful of methods here so you have the ability to create a base path uh you can normalize you can parse if you have a long path you can parse it actually you can make a path relative or you can make a part absolute okay check if this is an absolute path or convert it to a relative path you can okay now if you don't understand those terms don't worry moving forward when I get an appropriate example I'll show you what it means okay so basically a base path is the location where every link would work this one okay I'll show you when we get to a point I'll show you how you can use it so in this case they're actually showing you that you know it um it gives you the orinal location of this file um which may be different on different you know operating systems on Windows or on Mac uh the base path usually is different so it is like this if you're creating an HTML file and all the links in your web page will have a base path okay images now if I say hey uh images uh back batman.jpg file it will look for this batman.jpg file in the images directory so in this case we have changed it right so we' called it assets so I'll say assets so that's the base path now here I'm just saying batman.jpg file but where is the Batman located it's in the base path so this the same idea that you can Implement on the server side so if I run this file do. HTML in Chrome you'll see Batman is arrived correct but what is the link that I gave batman.jpg file but without the base path will this link be working is a question the answer is no see it's missing so what base path does is it provides a base reference that can be used by all the links that exactly what base path does so it'll set a base path for all the links so when we get to a point when it becomes appropriate I'll show you yeah in this case no you can alternatively set as well say I I want to keep all my images uh in a different location say this assets is not here it's in a in some other location but um that way um if I have to make changes to All My Links let's say there are many many images and I want to um change all those uh location I can come here in one place and change so there is a body and inside the body I have some images this of no use for us we can even delete it but he had sent this code which I have not yet fixed so I'll check so base path is an idea where you create a base location for all your other links to work so that's base path um and when we get to an appropriate example I'll show you how you can use them okay because in this is not the right example so if I say base path it simply gives you the location of this file now this may not make any sense to you and base path works like um normalize for us as of now href is a keyword what do you mean href where did you find that okay so here yes href is an attribute the hyper reference for all the images has a prefix assets so this base will be used as a base location for all the links in your page so that's the purpose of the path module so it's not um a regular use case that you would use pass this path but whenever you have a conflict okay so you don't know the path and you're um creating a solution which may work on different environments path module becomes a requirement and moving forward when I start using um um some complex applications you'll see the usage of path module anyways okay so the next thing that we will do is use something called as process again the process comes to um use in many use cases okay so I'll I'll probably show you one or two use cas case now but moving forward um you can use the process uh module to create a lot of things basically this process itself is a global module which has a lot of utilities attached to it um so understanding all the use cases of process may not be uh possible immediately but eventually we will learn so let's say know you would want to um send some parameters to this module so I'll go create a example called step for process. JS file and now see this an empty file there's nothing here okay and now I want to run this file so you may say what will an empty file has to display nothing but let us see if we can run this file and I want to show you what happens behind the scene for us so so in the day three day two folder we'll have node space step four process doj I press enter see I get nothing as an output because this file has nothing to say but when you're using this file you can alternatively pass in some arguments as well say I'll save V and press enter maybe I'll pass in India or Bangalore India so I passed three properties okay so if I press enter nothing is being displayed because this file is empty it cannot contain the parameters that were passed to this file now how do I access these parameters you can use the process module which is a global module so you don't have to import it okay see the path module was supposed to be imported because that is not a global module correct the OS module is supposed to be imported because that is not a global module but we never imported console log we never imported module. export we never imported require methods so in this case process is a global module we you don't have to import you simply will say console.log see console is a global module log is a method of that and I will say process. arv so what will process. AR do AR stands for argument vector it gives you a list of all the arguments that you have passed in this case what are the arguments that I passed so if you carefully watch node was the first argument that I passed okay which is an executable that is installed on my machine we all installed nodejs correct the second parameter happens to be the file that node has to evaluate so that's the second uh argument the third argument is Vijay the fourth is Bangalore and fifth one is India so now that we have this process. argument Vector I should be able to use this in my program so now that I execute you will get to see that I've got an array with these many properties the first pro argument the first argument here is to the node itself notice know this is where my node is installed so if I click on it node exe will execute this is the link for my file this one okay and this is the argument the first argument that I passed this is the second argument and the third argument so you use process. arv arv gives you access to the argument Vector object that we have passed now you lost just one line Emanual is what we have written nothing more okay okay and here into this file we are passing some parameters so I'm passing one two and three parameters this is parameters that I'm passing correct so anything that you pass to this file is treated as an argument so in this case if you leave a space okay space separated values will be treat it as additional arguments uh I guess your file name is wrong and you probably are not um uh using the right file so this process. R brings an array okay e an array this array has these many arguments that's what we passed node was the first argument the file name to this node was a second argument Vijay is the third argument Bangalore the fourth argument India is the fifth argument you see all of them here now if I want to use this argument and then process it and then probably send uh you know um convert it to something I can okay so let me comment this out so from now on I'll just be passing one single argument if I say hey so log hello and process. AR V AR V is an array correct I will use the second argument here because the you saw the parameters here the first argument is node so this index zero is node index one is the file name index two is what I'm interested in if I I CD out of this folder and say node space um get my file. Js it'll give the same error okay so make sure you navigate to the right folder CD today 2 in my case and now you should know the exact file name that you have created in my case I created step four Dash process. CS file all right so let's go to the next step so we have learned about process uh not a significant one but uh we will definitely keep using process um moving forward the next one that I want you to know is event uh this is quite useful um especially when you start creating your own modules uh see you events are broadly classified as um used user events and system events the one that we will be creating here is referred as a system event because we are not interacting with the user okay we are um um we are creating a event and we are uh probably subscribing to it on our own and then we'll dispatch them on our own uh and then we will uh send parameters to those events on our own perfect so what we'll do is you know we'll see how to create an event um how to um emit or make that event happen and then I will also show you how you can subscribe to those events and there are some itsy bitsy things that we know we can learn that there is something called as one there is something called sorry there is something called as ones there is something called as on there is something called as off uh listener count get Max listeners and so on and so forth you can also set max listeners um and so on and so forth I'll show you some of these capabilities which are um quite handy when you move forward in node development and if you see the node documentation clearly says that this event emitter is nothing but a class file now if it is a class you know what to do correct so you import okay I guess you know this documentation has two different implementations there are two different ways of working with node modules moving forward I'll explain the esm that is ecma script module but we will stick to the common JS module CJs stands for common JS module this what we use to import and not all the modules in the node ecosystem have already upgraded to esm that is many of these modules still are using the common JS module system so ecmascript module system is relatively new but moving forward everything will become MMA script 6 module but it will take time see the sigas script 6 module system was introduced in 2015 okay and we are at 2023 so it's been eight years but still not all the modules have been upgraded to use ecmascript six modules it may take time right and there are there are millions of modules okay and all of them may not update immediately and the catch here is that you cannot use both the commonjs and egas script 6 modules in the same file so I suggest when you have to pick a side choose commonjs for now because that um works for most of the modules okay almost every module supports common JS way of working okay but few modules also support egas script six modules but moving forward everything else will be modified to ecas skip 6 module but be comfortable with both of these approaches I'll show you later how to use uh EAS script 6 module but for now let us focus on the commonjs module which is what we do using this so how do you work with event emitter you will use um uh event emitter require no dot events now there is a caveat that we have learned you know in the last example when we worked with classes correct we know that this event emitter is nothing but a class see this event emitter is a class actually and from this class you can create an instance and then you can work with so if you scroll down a bit you see there is a working example right here okay so I'll maybe switch to the commonjs way so you see you require an event um uh events module and what you get is an event emitter and you create an instance called my emitter which extends the event emitter and then you'll create an instance of my meter so I guess you know this code is little redundant you don't have to use this but can we use it of course you can okay so let me show you a simpler approach uh instead of taking this uh comp complex step we'll just Chen two three steps okay now let us say my intention is just to make this easy for you to understand that is all so it's not about shortening or you know let go a few steps when you can do the same with an alternate way that we have already learned then why do you want to complicate your lives so this is step four step five events do JS file a blank file and now we are using events this events is a external module not a global one so we'll have to import it so we import it like this const event emitter equals require events from this events we get this event emiter that is what we'll use remember the example that we used here hero class where we know that there is a class that is exported here so we directly used the class itself and assigned it to a variable that's exactly what we are doing here this event emitter is nothing but the event emitter that is exported from this events class okay so now that we have this event emitter class available we'll go create an instance of that so I'll go create a variable let event emitter equals a new event Emer now that know we have created an instance of eventer that is we have created an event basically this is an event actually guys so we can now make this event happen but some um the first we need to do is um maybe I'll show you the problem and then I'll try and fix it okay so you try and follow the flow so we have this event emiter we can emit this and say um so the this emit um would be um the type of the event so I will say emit my event now we know that this event emitter is emitting or making this my event happen now let us say event emitter do add listener listen to this my event and when that my event happens you call this call back function and log and tell that you know my event happened easy so if you see the flow here we have have dispatched an event and then we are listening for it this is wrong because we need to listen or start listening to a specific event much before it can happen it has already happened in line number five and then you started listening to it from line number seven this doesn't make sense so if I run this example you keep waiting but this event would never happen isn't it I mean it happened much before we we started listening to it so if I say node space step five see this program is waiting for this event to emit so the uh flow here is you first set up a listener and then you make this event happen easy so you listen then the event happens now if I run the same program you should see that my event just happened okay now it can happen many times it happen three times this listener will execute this function three times so if I run this example it happens four times you'll also have to be very specific at at least be specific what did you not get I never said you cannot do it after isn't it I said that you know if you write it after because you Wen already fired you're setting a listener after what will it listen for because event already happened so if you want to write this after you still can you can say happened again this time you're overriding the listener isn't it once more need to get from not running and then running yeah so if I run this example okay you see that um we just have this my event just happened it says my event happened again my event just happened and my event happened again that's because we have set up two listeners this one is one listener this is the second listener there are two different functions that are running for the same event okay I'll comment this out this will unnecessarily lead to some confusion I'll explain this multiple listeners in a minute but to understand why should you start listening before you dispatch the event all of you have you understood guys did you understand this part yes so first you set up a listener who becomes capable of listening to an event then you dispatch the event okay if the event happened and then you set up a listener The Listener has no job he keeps listening but that event never happened after the event listener was set up Mak sense sense okay now the question is how many listeners can event listen for so I'll cut this I will use a named function here let um listener 1 equals a function so this is uh listener one okay listener one says my event just happened I can set up another list if there is a need I cut this this is another listener I can clone this this is listener two listener two um maybe I'll I don't need this log I guess okay so I'll just stick to this listner one got the event listner two got the event and now I can take this listner one assign it here although this is a function because this is a call back you don't need the brackets okay now the listener two is something that I will make this happen here yeah that's because we switched the topic isn't it IM manual and probably were you missed me okay so we have an event this event um we have set up the listener we have set up the listener here and then we are dispatching the event here so in this case the first two dispatches of the event are listened by The Listener one okay the second two dispatches of the event are listened by both listener one and listener two does that make sense because see when this event was dispatched these two events were dispatched only one listener was set up when these two events are dispatched this event this listener and this listener are set up why we call two times you can call call as many times as you want okay you can call this as many times as you want see when something happens in JavaScript you don't have to just listen to it in one place or just one component is listening for it multiple components can listen for it isn't it when something happened each one of them may have their own purposes listening to it so you can set up as many listeners as you really want that's okay and you may have purposes for all of them so if I run this you get to see the listener one was called uh Thrice listener two was called twice event emitter is a class and we created a reference to that class so we created an instance called EVT emitter this is an object we are not passing any data this is my own event this can be a potato if I want to we will Lum okay we will not create will not be able to create a significant application without using all of these that we have learned okay first let us understand the module how it works and then we will put into an action using some real life scenario uh okay so that's one way of thinking tun uh you can use emit to dispatch an event now of course you know dispatch has um you know um uh it's doing its job listeners are doing their job they're not interrelated okay but listener is listening for a event of this type now I can I create another event and dispatch watch see as of now I've dispatched these events now I will now listen for another event okay so there is I'll just copy this code this is called listener 3 okay it's called listener 3 um got the event new event okay called new event now the question is now that we have set up a listener we can add a listener like so this time we will create a new event instead see once you have created this event object you can create different types of events okay and I will now call listener three here listener 3 is specifically listening for the new event not necessary I can also ask listener 1 two and three also to listen to this so in this example listener one and listener 2 is capable of listening to both my event and new event okay I guess this is a little confusing uh and you would never use something like that but can you do it yes you can uh so in this case this event emitter is emitting a new event in line 25 Madu has put a question is the event emitter add listener my event the format of using the listener yeah basically this uh add listener will take two arguments if you take your cursor on top of it it takes the event name and it takes the listener function these are two arguments that event listener takes or add listener takes okay now similar to this add listener you can also remove the listener say now I'll run this so it's working listener 3 got the event called new event so this also happened twice now after this if I'm dispatching this new events okay these events and we actually saw that this is also being listened for isn't it no sorry I'm dispatching but where is yeah it should listen listen three listener three okay check check check let's run this yeah I I guess you know this is because uh listener one got the event listen to got the event maybe what I'll do [Music] is how many times am I meeting 1 2 3 4 five six this should have logged um eight times the One 2 3 4 5 six yeah one yeah should also new event as there are def find up yeah that's because you know we have set up the listener already okay and I've dispatched it um let me just comment this one of them for now okay we just have listener one we'll comment this listener two uh just to get the perspective of what's Happening here okay uh my first event load two times yeah that's because this new event is logged two times isn't it you've got a listener one listener two listener three listener one is listening for my event to happen this is happening four times and listeners three is listening to new event which will happen two times okay I've got a question a big one my first event load two times uh now you're are emitting it two times isn't it okay you are emitting it only one time I'll check your code okay prank just a minute because Second Use the first one also no I'm not sure I'll read the code yeah uh just give me a minute let me just finish this and I'll take your question so if I run this example we have dispatched my event which is executed four times times and this listener one is responsible to catch this okay and new event is listened by the listeners three which gets executed twice I'll I'll have a look so you see that's exactly what's happening The Listener one got the event four times listener three got the went two times so if there are more than one listeners okay so let's uncomment this so there is listener one and listener two listening for my event so my event is listened by two events f is capital for a function okay I guess [Music] some uh what is uh I'm getting this here correct I guess you know this um uh error that you are getting probably is because of some syntactical mistake that you have created uh just check that out uh and guys I suggest put your eyes on the screen while I'm explaining so that'll help you understand so if I run this example this my event since it is listened by two of these listeners this will we will be able to um listen to it by two this event is listened by two event it listen that will make it four in the count so let's run this so forry 4 + 48 in the count so you saw that now you got listener one got the event listener two got the event listener one got the event listener two got the event listener one got the event listen two got the event listener one and listener two and listener three got the event twice is being logged okay now there is no limit as to how many types of events that you can dispatch you can dispatch as many times as you really want to and this dispatching is done upon An Occurrence of something that you would want to broadcast some some something that has changed let us say a new value was generated then you may want to Emit and when you are emitting you can also dispatch a property so that we can capture it by The Listener The Listener here so far has not taken any parameters from us we can also pass in some parameters to these listeners okay now how do I pass parameters when these events are dispatched we can pass in some parameters so for now I will go here and pass some different parameters watch log from line 21 22 23 and 24 okay see each one of these event dispatchers carry a different message and this can be caught by this listener function so the first one here will capture that message I call that MSG message and now I log that message here MSG here this listener two is not bothered about the message because he is not capturing anything but is the even dispatching them yes they are okay listener one is the only one that is listening for any message that this event is sending if I run this you see listener one got the event and it got the lock from line 21 22 23 and 24 list two on the other hand did not listen to any of these events so the idea here is can this event emitter dispatch parameters or properties to The Listener the answer is yes it can how many can it pass it can pass a single argument actually this emit here can actually dispatch um uh it can take as many parameters as you want okay sorry about that so so um usually in JavaScript you would only pass one parameter but you can actually pass as many as you want okay so you can have as many as you want so I can pass in another property if I want to okay log from 21 okay I'll say hello for one of them hi for another one a for another one olola for another one okay so all of these parameters can be caught by our program uh of course you know we need to capture it because we did not see now this listener function gets two arguments okay so this message and greeting so I've used both of them let's now check see you got hello hi hey andola all of of them so the idea here is when you work with events you can um send parameters to this listener and if I'm passing two parameters three parameters you can expect those parameters to be caught by this listener function don't we need to pass it to add listener no okay do that here because add listner you are not supposed to use a bracket here what what would happen if you use a bracket then you are calling the function right there are we calling a function now I'm asking you are we calling a function here no what are we doing we are passing this function as a call back isn't it so job of the framework is to call it not our job to call it so when you're not supposed to call it you cannot use the brackets when you're not using the brackets how can you pass parameters no you cannot right so so the call back function when this emit is called The Listener will automatically get these parameters and that's what we'll refer here okay I'll save it we should be able to get this now now then know we have set up some listeners we can also stop the event from listening say for example after this hello the EV events are actually dispatched but what I will do is I will stop see this event listener one and two both are uh being called I would want this event listener to to stop listening after this hello how do I do that you can use something called as a remove listener remove listener and this remove listeners um signature is like this this okay so this is line 21 this changed now to 25 26 and 27 so this remove listener will ask you what listen event should I stop listening to and what is a listener that I should stop calling because see this my event has two listeners listener one and listener two which of these listeners are we stopping listener two specifically correct so you you can remove a event listener a specific event listener using the remove listener so now let us relaunch you upar key press enter and this should work and if you see listener two happened only once because we immediately stopped listening to it after the first dispatch where this code is used in it development a lot of cases okay say for example I want to let the program know when a new value is added by the user how will you do it how will you tell the user that a new value was added a new hero was added let's say so you dispatch an event but you how how long can you wait and fetch cor yeah chat programs can also use it so how long will you wait for the change on the um a hero's list go wrong okay you need someone to tell you that something changed correct you cannot simply listen for it for endless time um or you can't keep checking every few seconds isn't it so we use events to tell us when this happened like if you have change in some DB field yes that's one use case okay but let me tell you most of these database methods already have listeners attached to it okay and it broadcast the change when a record is inserted so you would not use it but if you are creating a uh custom property and you would want to know when this uh when the update happen or you would want to um access the new change when the update happened that's when you can use the listener okay so what are the things that you can do with file system there's lot of things that we can do with file system predominantly you can classify them as three parts you can um read a file you can write a file or you can watch the file but you see there are other operations that you can do as well so you can open a file you can uh read uh append to a file you can prepend to a file you can write them in various formats um so basically when you work with um node uh then you're working with some binary uh um bite arrays so you have options to convert things to an array or a string or a number um so I'll I'll probably be walking you with a few examples so that we can understand but I suggest you know depending on the requirement that you may get um you can use um these different possible methods that you have all right so I'll show you some basic usage so that you can uh use the documentation to um solve your expected problems so what are the things that we can do how do we get started see you have two different uh ways to get started with [Music] um file system so you can either use the commonjs or you can use the ecmascript so I told you that we'll be using this ecmascript methods little later because not many of these modules support and we need further configurations to be added onto a node project yet as of now we'll use the commonjs and I suggest and recommend all of you to use commonjs uh design pattern until all the modules scale themselves to egasp 6 module so if you go to npms website right most of the modules so there are about um 24 lakh modules plus okay most of the modules low Dash or react or ax these are very popular modules so this is a list of the most popular libraries that are with the node so let's say low low Dash so if you click on low Dash and scroll down a bit see they have given you a use case where they're using a requir method they're not using the import method which we learned right uh import is useful in ecmascript six modules but require is a common JS method which is what we use so I'm just trying to uh you know justify as to why you should still use commonjs design pattern unless you know you start working with your own module system uh which I will be covering at a later point in time uh which is a usual practice if you start working with a project or a larger organization then you would be EXP Ed to create your own modules and then you know you are allowed to create your own um flow um let's say you know I would want to uh create a module which does some validation for my users so in that case I'll be writing my code from scratch and then I allowed to use EAS script 6 modules uh to further I say let's say know working with react here if you scroll down a bit here react use using EAS script six module system so you see uh when you use react okay um when you start working with react um you have modules which are compatible with react and most of the modules which are compatible with react are already scaled to egma skip six right and let's say you know when you start working with axios this allows you two different flavors so when you are using axios you can use ecmascript 6 approach and you can also use EAS commonjs approach so both are possible so you see there is an example for uh require and there is an example for import both so some modules have scaled some modules have not so my suggestion is um start working with the commonjs module system until you encounter a module which is very specific and they use only mmas script six module uh Import and Export then you can um start working with um EAS skip six but however you know you cannot have a mix and match in the same project you cannot have both ecma script and commonjs patterns mixing that would not work uh of course there are modules which will allow uh to overcome those challenges uh but they have some limitations so I suggest um keep take them as two different approaches and don't mix and match because see a project when you create uh you would not um have a complete idea of the scalability uh most of the projects that were started as a prototype have scaled um far too much and then uh to implement or uh add more um um features for a module then you would want to take support of other modules which is where you know the problems would arise does we import from react in nod yes ahuh no you don't so you what you do is you create a node module uh which acts as a provider or a um uh server layer for a react application so you don't mix and match they are two different projects altoe okay so you usually don't mix and match so that is where you know um you use no a commonjs to solve a problem uh which can be providing some server side resources to a real application or an angular application okay so just keep in mind that you know even in the documentation you do have two different ways of working but since most of the com modules so you see we have already used couple of modules right so I've used event so if I scroll down a bit here so event does have both commonjs and um EAS 6 module uh we worked with few more modules if you recall um OS module and path module okay so um the OS module does not have a common JS equival sorry it doesn't have easp 6 equivalent you see here there is only one way to import so there is no option here correct but where uh when we work with uh the file system the file system does have option to use both either the common JS or the egma skp 6 module so you have both the choice you can use one of them uh so just that you know you cannot have a mix and match so if you try it'll throw a warning and say okay you you need to have a property called modules implemented which we have not yet added I'll show you how you do that and then it would be easy for you to understand uh what other modules we learned guys path module is something that we learned so if I scroll down down even path module does does not have a um egma script module uh way of importing and exporting you still have to use commonjs okay so I suggest use commonjs uh to learn all the basics see node was introduced in 2009 correct and ecas script 6 okay introduced the model system in 2016 2015 to be more precise uh originally it was called es5 which later on was called es6 isn't it now when node was introduced in 2009 and Es was introduced in 2015 what were they doing in between to handle imports and exports that's where you know they used the common JS way of importing and exporting later the MMA script came up with es modules so many modules that were return return in between they are still using commonjs approach not all the modules have scaled themselves okay and then you cannot have a mix and match of these modules in a same project that's the challenge so you should either use the common GS and for those modules which were um created after 2016 they have scaled they have used they've started working with ecmascript 6 modules but the challenge is most of the modules okay if they have to work with some older modules still have to use commonjs agreed so yes there are two different ways but commonjs has been established already okay so if you want to work with older modules this is the way to go forward okay but if you're writing a module from scratch and you're are expecting it to be only compatible with the new versions then you use ecma script six modules this was the very you know a discussion uh that um uh you know people had or developers had so only importing with different yes yes that is all okay so both are JavaScript correct so you can either use one of these Imports and when you import you get those properties that you can use the way you want um so the veler Community had a um challenge around using easp 6 modules because this is the way forward everybody knows that moving forward everybody will have to use easp 6 modules but commonjs modules have to be updated so there are many um tools that are available which will take the existing commonjs module convert them to ecas skip 6 modules see but that's not the solution isn't it so a new ecosystem was created okay which is called Deno JS so Deno JS uses ecas script six modules so all the commonjs modules had to be migrated so this was a drawback you know when people started working with Deno JS Deno JS is uh consider it to be the next version of nodejs okay so it did gain lot of popularity um you know several years back but now um people have moved back to nodejs I mean at least most of the organizations which have been working with uh node project have moved back so Deno is predominantly for egas script 6 compliant modules okay so I suggest you know you can read the documentation but um since you know not many companies have um put their trust in Deno see you see most of the libraries are intact correct so you do you you can see that you know the um the file system is available so Deno has its own file system or you know it has its own modules to work with file system okay um so you can expect Deno uses the new common JS uh sorry the new EAS skip 6 way of import and exporting but it does doesn't have a larger ecosystem or the support that node has okay so we don't know okay so as of now um Deno is also being used by developers who are um considering some improvement uh but node is quite stable quite standard okay as we have react further so which module will be used so lakian node uh sorry in yeah in react we'll use ecas skp 6 modules okay but see react creates its own ecosystem it does use uh node as a platform to create um applications but node would be the backend server which I guess you know if anybody attended my react Workshop you know that we use node uh to integrate with the database so you can interact with either Firebase or um mongodb MySQL or any database using nodejs okay but the front end part of the application is written with EAS skp 6 using react okay so if you are working with um a you know a full stack application you definitely will have to learn two different ways of importing a module I don't think that's a big challenge right see you you'll either have to use the require method or you'll have to use the import method we have covered the import method uh in the basic Workshop no see it's not like that because um many companies um feel that you know react gives us the ability to um uh scale an application bit by bit angular does not okay angular is quite opinionated and it gives an ecosystem uh that cannot be compromised so it's um um it's quite opinionated I mean it has a way to implement or create a project so some companies like that approach okay so some companies feel that you know you need to have a um uh you know whole solution to create an application that's some companies opinion at the same time some companies feel that you know I would want to scale an application as and when there is you know I have resources available so they use react and somewhere you know in the battle some companies are favoring react and some compan favor angular and see as a developer I suggest you know you don't grow with a bias okay so if it is react um you know use used by a company and that's where you're applying for then I suggest you like and love react okay so if a company that you are applying um is using angular then you like and love angular does that make sense so I don't want you to grow with an opinion because see uh I personally have worked with both in fact I've also worked with VI JS right so I I can definitely tell you that you know my inclination is towards vuejs but see that that that's an opinion that I can use and I can say okay I'm fond of it but when I go to a company for a consultation or for you know some some job I cannot carry my opinion because see these um um root maps are already laid and there is a large team which is working for it isn't it so it should be important that you as a developer scale yourself see these are tools correct either react or angular or VJs or you know um Amber all of these are tools to create an application correct so which tool the client uses or which tool the you know company wants to use uh you should be able to scale yourself to that okay so yeah I do deliver angular trainings react trainings and vuejs trainings but if you ask me which one do you really like the most um I would like all of them because see my client is paying me to train them so I I will do my job so I suggest you know you also um you know grow with a mindset that you know you don't have a specific inclination just these are s simple syntaxes that they will change and whatever you can do with angular you can do with react whatever you can do with react you can do with VJs isn't it so why do you want to create a conflict yeah okay so guys coming back to the schedule uh in today's Workshop we'll uh work with file system and then we will move on to working with the uh HTTP modules and then we will start working with some external libraries which is where you know the serious business of node will start um and we will also create our own module maybe publish it and be proud of what we have done isn't it so let's go create a step one all of them expect you to have a learning curve okay see maybe you know um a little later today I'll explain there is a reason why all these teams are actually striving to make their Mark okay uh no company would actually invest uh um you know in in in sponsoring a team which will write a library and expect it to be free okay they do make money out of them okay angular is written by Google and react is written by um Facebook developers they have an intention they have a vested interest in developing these um um files these these libraries and these Frameworks okay and they do make lot of money teaching them so they don't expect it to be very easy they don't expect it to be um see on the on the surface things look very easy react is easy angular is easy but if you want to customize and scale your application to an Enterprise level then you'll have lot of challenges so you cannot build a big application um from scratch you need to borrow some resources that's where you know these companies make a lot of money so this is FS JS so step one we'll import the file system so how do we import we'll use the common JS as far as possible okay guys so we'll uh require con FS equals require FS so with file system being available now you can use this file system to do three things um write a file uh read a file or watch a file so these are three things that we can do okay so let us see how to write a file so this is my import command I've got my FS here and now with this I want to create a file so what is the file that I want to create let's say I want to create a file by name uh temp.txt file okay how do I create it so I'll use FS dot write file you see there is right file and you also have something called as right file sync so which tells you that there are there is more than one way to create a file and you also have something called as right stream I'll cover I'll be covering streams a little later because we need to First go with some Basics and then you know we'll make this slightly Advanced so I'll go create a right file correct the these are options that you get sanket so you can either write a file synchronously or asynchronously so if you want to write a file synchronously we'll make it synchronous first and then we will make it asynchronous I'll say write file sync so which means that I will not be allowed to read the next line or the program will not go to the next line until this part is done isn't it so if I say here WR file sync it takes three parameters the first parameter is uh what is the name of the file that you would want to write I'd say from this folder from this folder I want you to write to a file called temp.txt I'll say temp.txt file this is the file that I want to write by default it will have the cont text in the same folder so you don't have to specify it however I'll show you when we move forward if you want to create a file in a specific folder you can do it all you need to do is give the location of that folder right here and it'll create so I'll say write file sync so the next parameter is what you really want to write in that so the next parameter is the data that you'd want to write and notice you know here the default format that you'll be using to write is called an array buffer now what is an array buffer this is how a computer sees your file okay using by the binary system zeros and ones so but here you know in our case we don't want to speak the language of computers right we want to speak the language of humans wherein we would want to write a message that can be read at a later point in time so I'll say welcome to your life the next parameter is the option that you would want to use now this is this is where it gets really interesting because you'll have to specify what kind of asky value should I use to create a file see you may have a requirement to create a image file you may you may have a requirement to create a PDF file um or a SVG file or um uh or a text file or a Json file okay in various cases you have different asky values basically this is how each keystroke is identified by your computer so I'll be using utf8 and I you can either use utf8 or you know one of these so I'll say utf8 and now with this I have the ability to write this text into this file using the utf8 that way when someone reads it using utf8 it'll start making sense to them okay so maybe know you would want to understand what would happen if I don't provide if we don't Define third parameter yes yes it is yes it is when you're writing it is okay when you're reading it is an important parameter okay so watch so what I'll do now is I will write this so I'll say hey console see in in JavaScript there is some you know this something that I keep saying to everybody just because it works doesn't make it right okay so just because it is working it doesn't make it right so you should also you know um have the responsibility of writing things to um um with some additional instructions so that now you are not um allowing the program to make some guess okay yeah I guess you know some questions does temp text available so if it is available it'll overwrite it with this text if it is not available it'll create okay so watch so as of now that there is no temp.txt file correct so I've asked it to create and I'll say file created I'll save this and run this in my terminal I'll say hey node run the step 1fs it says file created so temp.txt file is now created now I'll change the message there's no turning back all right so now if I see the file exists now with some message and now I'm asking it to rewrite so this temp.txt file now will have this text instead of whatever was earlier defined if I go back temp.txt file things have changed isn't it so what's happening with this line is if the file exists it'll override if it is not existing it'll create one so if it is existing it'll use it if it is not existing it'll create one make sense now to write to a file I told you the third parameter is optional but I suggest you always provide some input okay don't leave things for chance okay this is how you can fix bugs moving forward okay see if there is a requirement for you to fix bugs when you're developing you are creating those bugs isn't it so make sure that know you um give as little room as possible for the program to create some errors so now there won't be much of a difference okay for you and me now okay the file is now created you see things have worked isn't it so I get to see the same output I did tell you that you have many files that you can write many types of files you can also be writing a Json file you can also be writing a file which is meant for Arabic language okay utf8 is the you you know um um that is uniform text format version 8 is used by a English US Standard keyboard so each ask key value that is if I press a on a keyboard which uses Arabic Keys the SQ values are different if I'm using a Chinese keyboard the SQ values are different if I'm using a English Standard keyboard UT uh so the asky values is what we are referring with utf8 so with each key stroke you're generating an Ask key value that has a reference which is referred as utf8 so there is 8 bit 16 bit and 32 bits and 64 bits as well so though this is the least amount of characters that it'll take to generate an alphabet so which is what we use I guess you know um anyhow if you have um you know more questions about it I suggest you go to the w3c do uh w3c dog website and you'll be able to learn more about the utf8 format yes all right so let's move on if I now write a file okay using this now if I want to to read a file okay so maybe I will also show you how you can write file using um snc method as well so that you have both of these see for the basic few examples it's important that you know you understand uh all of these but moving forward I would I would leave some room open for you to do some exploration see as of now I have this FS read file now I'm not using the sync which means I'm doing this operation asynchronously correct now which tells you that now you have the ability to assign a call back function so I can pass in a call back function this takes two arguments actually uh yeah in fact it takes only one argument in this case if there is an error I mean if it is a read file then it would take two arguments if it is a right file it takes one argument if there is an error we'll be able to lock log let's say we have given this command but maybe I don't have right permissions onto this hard drive so let us say now we we'll check you know if there is an error then we will log the error see this is only in the eventuality where this file was not being created I guess we will create some situation where this file will not be created and then we'll know what is the purpose of this error for now let us proceed else I would want to log and say file was created um and I just want to show that you know this is basically an asynchronous operation by logging the line line 14 okay and uh I will simply say this as done and this is a log in line 17 now this is a log in line number 14 this is a log in line number 17 so since this is asynchronous we can expect okay so I forgot to write the error so if there is an error we'll capture that error as of now this error will not trigger okay we'll have to make this error trigger we'll do that later as of now we have made this same right process asynchronous wherein we are writing this file this the content this is the format and if the file creation has an error we'll capture it and we'll log the error if we are able to uh um complete writing the file without an error this console log will take over and then after this uh line I have return returned this console.log but since this is an asynchronous function now I'm expecting line 17 to be logged before this line 14 you understand the reason why because this is asynchronous so it should allow the next line to be executed first isn't it so let's go check I run the same file see line 17 got executed first and then line 14 correct that was expected and then the temp.txt got created and then there is this message I mean if you sorry if you recall I had actually deleted this file correct let me delete this once again and see this temp.txt file is gone missing let me relaunch this and see I got these logs in the sequence that I was hoping it to because this is an asynchronous method so this first example here is to write a file synchronously and the second one was to write things asynchronously okay and the lines will change so I'll make this as 16 and this is 19 okay error is built in how error is passed through the function yes error is a you know is caught by this call back function so what if this asynchronous operation encounters any error it can be anything so the user may not have the permission or you may you know probably um uh uh write a Content which is uh not having the source so in some cases let's say now I'm expecting this content to come from some other location that's possible that's where know the right stream comes in okay so um if this content doesn't come then we have nothing to write in that case we'll have an error so as a developer I need to know what went wrong right that is where this error plays a major role in which case error line number 13 will be executed Madu I I told you I think I've told you guys couple of times that I will create another example where I'll trigger the error correct also if the file name is wrong we it throw an error yeah see how can the file name be wrong okay so I can say temp file here this is a legal name yeah so I guess uh this uh in my experience okay the error will happen if you don't have privilege to write to a location right to a folder uh I have several questions so hold on I have one question as nodejs does not support multi-thread then how come it is performing a synchronous so sh I think we spoke about that as well if not I'll explain this once again see node has call backs so this function here will actually create a pseudo thread okay and will execute this function when this event actually is triggered so we are not having multi- threads but we have uh a thing called pseudo thread using the call backs while reading it may yeah so I think yeah when we are reading the errors do occur I'll be able to show you I think is better than no not not in all the cases sanket okay so there are some um use cases for synchronous as well that's why they exist so let me tell you um uh let's say I would want to uh read a file after the file data is uh encoded um or you know um after it is encrypted so that's my requirement okay so I don't want the next piece of code to even execute because that's important for me okay so if that's my requirement then I would want to use sync okay or let's say I want to read a file and which is important for me to create a log little later then I have to use sync so if you see you have FS do append file okay so there is a method to append but as a developer what can I do about it how can I append to a file so I suggest you read the file content store it into variable okay and then push the data to that variable then add that content to the file one way to do it but see the easier option is you have something called append file so you can use this prusa okay and then I have I don't think we need if statement IF function is called yes that's the whole purpose of the if condition so if there is an error how will you handle it if there is an error how will know that something went wrong as a developer it's important isn't it so I want to know what went wrong and that's what this error object will tell me that's why it is required not in this context function is not so if that so if that was the case why did this log fire this function exactly was called as a call back isn't it this call back may may not get get the error if it gets the error we'll log it here if it doesn't get the error we'll log this make sense everybody does this make sense yes all right so this is right file is read file now uh okay see for for us to watch file um we um okay we will do that L later first I'll show you how you can see we have done the read file you know both synchronously as synchronously we'll do the right file synchronously as and asynchronously let me comment this out uh I think I have to disable this shortcut hold on guys um okay as of now I'll just use um single line comments moving forward let us say I want to read a file so this stem. txt file is the candidate that we we have we'll change the content not that it would really matter okay I just wanted it to be a little different so how do I read now again reading can be done both synchronously and asynchronously I'll show you both so how do I read it synchronously so what will happen is the fs now has read file now this read file is when the options are really important the first parameter is the location which file you want me to read I'll say hey read this stem txt file the next parameter is how you'd want to read the file options are important so here I can say read it as utf8 now let us say I don't pass this then what will happen it will default to the noes we of reading a file which is an array buffer okay so when I read this file I get some access to the data what I'll do is I will put that data here to this variable so I'll say let data equals this and now since this is uh an synchronous way of writing or reading sorry I'm expecting the console log in the next line to be executed only after line 22 is done its job correct so I will use this data so it easy you know you should now be able to easily see that I get an array buffer here um temp.txt file read file sorry this should have been sync isn't it yeah so if I run this example see you get an array buffer here correct correct I forgot so this was synchronous because we are using that pattern first synchronous and then asynchronous now let us say I want to do the same job asynchronously how do I do that similar steps okay again I'll have a call back this time you know I'll not only have an error but I'll also get the data part of it so I'll now say fs. read file file that I want to read is temp.txt file the next parameter is how you'd want to read the file so this time I know what went wrong and ideally you should have told what is the format UTF 8 okay unless you know you have different keyboards why does it not display proper data that is because we did not provide how to read the data isn't it correct because UTF was not used alosa is right so here now I would want to read this file but this time um asynchronously the next parameter would be what is the UTF uh what is the format that You' want to use the next parameter is a call back function and notice you know this function will take two arguments it takes error and the data the error can be null okay so you see the default value for this error is null and the data is usually a string okay the data is usually a string now what I can do is I can say error and the data and now I'll say if error now you see the error makes sense because that's the first parameter right so I will copy this syntax as it is I paste it here just to save time if error displayed if not I have got the content isn't it so I'll say display the data okay FS read file will read the content of the file yeah okay data is being commented no I uncommented okay console log is being committed correct so let me uncomment it so let's now relaunch this um temp.txt file something it says data is not defined why data is not defined ah sorry this is say task completed so let's now run this see you got the task completed first and then you got the welcome to your life correct so this is synchronous and this is asynchronous so this one is synchronous this one is as synchronous this is read this is read so you can read and write synchronously and asynchronously so we got this stem. txt file and let us say now we would want to watch this file that is if any updates happening on this file we can watch it the watch file uh does take a call back function so it is usually an asynchronous operation um if we need to write a file at some specific location yes you can um you can use the folder name if that folder exists it'll create or it'll work okay we'll do that little later once we are done with the watch file uh any type of data file of course you can deepshika so moving forward we'll be creating some Json files usually you would use this file system to write text files PDF files uh of course you know PDF files require you have a certain format SVG files Json files and images um so using this PDF and SVG files and images are um slightly um a rare requirement but using Json text files um creating um a configuration file is a regular requirement so which is what we'll focus in this workshop and I guess there's no question cool so what if I want to watch a file so let's say I want to watch this stem. txt file that is if any change happens to this I want to watch so I will say fs. watch file so notice you know this watch file does not have sync or async so you simply have watch file so what will watch file do watch file will ask okay which file you want me to watch so I can say watch this temp.txt file so the next parameter is U um I guess you know option I can specify uh any option I want it doesn't take an Ask key value or anything like that okay so um so I can specify a call back function I guess you know let's check what are the options that we can pass the next option that we have is a listener and notice you know this option here um can you know it can be a file watch options that is watch file options uh if it is a big integer um or if it is undefined and things like that and then we have a listener function usually this listener function is what will tell us what happened okay okay and it can actually give us access to two different properties so if you scroll down a bit here you can see the watch file has the current value and the previous value it has access to both so what was the original value and what has been changed okay and then you can specify on the current value uh when was it modified and the previous value when was it modified and so on and so forth so let's go assign this in action so you have a call back function and this call back function will take the current value and it takes the previous value and here we will want to log console. log the current value and the previous value maybe know we'll have two different messages current showes current value previous shows is the previous value the content was the previous value and the content is is the current value so if I now run this example this will actually keep watching for this file okay so I need to open both of these files and you'll see how this method will keep watching for this file now so if I now say step one fs. JS um there is a problem cannot find am I not yeah I think I closed and restarted right so I need to CD to the day three folder and then I should have access to this step one fs. JS file see now it's watching okay correct if I open temp file and I'll say uh is no I save this file then you know you see the logs have been displayed so it basically will tell you um it'll give you all the information as to when this was modified this is the closing time I'm not sure as to um what these parameters all of them are um but let's say now we are more interested in um getting the information the uh data that was um modified so um I think you [Music] know say size size does not give me much of information yeah basically size tells you how many characters um was around right so when the first time when this application started it says the size is 28 so I guess you know this talking about the know the number of characters that were available originally later um no I guess you know this was uh because there are many logs here this I guess you know is referring to the previous and this is referring to the current so current is 56 46 sorry so let me just Shuffle these up I think you know the logging is a problem previous and current so I will make sure that know it logs the way we wanted console.log open the temp I'll just add one character to it and I'll hit save Okay so so you see um I've now made some modification so the previous was 46 characters and it became 47 characters because I just added a period there and then you know you also have the file access time the open Time closing time all of these being logged here see the very fact is that you know the um current is triggered yeah the current is triggered looking at the time everybody you know started looking at their clock is it okay so the very fact that you know this current um is triggered tells us that there was a change isn't it so when there is a change you may want to take some action okay now let us move on to how to create a folder so I'll just create few examples okay before we take a break then you you know at least we'll be done with one of the topics now I'll use FS to write to a file now when I'm writing to a file you have the option to actually write to a path say for example this temp.txt is deleted now I would want to create a I mean I would want to um write this temp.txt file into a folder called temp okay so I can say temp SL temp.txt file and this right file is asynchronous Operation so the next parameter is the data that I would want to write the third parameter is the ask key and you know that this is an optional parameter but I suggest you always use it okay the next parameter is a call back function which can take an error as a parameter if this error exists we'll log tet see this time around there will be an error why because see we have given him a path that does not exist there is no folder by name temp to create a file by name temp correct so this time there would be an error else I will console in the log and tell that hey this file is created I'll say job done let's run this now there is a possibility that we may get an error see you got the error object and this error object see of course the job done came because this was asynchronous Operation now it clearly says that no such file or directory exists see there is no folder by name temp correct we are trying to create a file by name temp.txt inside a folder by name temp but that folder doesn't exist let is now create a folder by name temp in this case and now if I run the same program it will actually create a file inside but since you know the path was not available that's when you know this right file will throw an error if the path itself does not exist or you don't have permissions to write into a specific path then you have the error that will be created correct so although I have shown you asynchronous you can try the synchronous way as well now what if I'll delete this what if I want to create a folder and then write then what I do is I'll say FS dot makeer now again you know makeer comes in two flavors synchronous and asynchronous in this case asynchronous is what I would want to use sorry synchronous is what I want to use why because I want the next piece of line to execute only after this is complete Mak sense only after this line is complete this right file will have access to the stem folder see the stem folder missing I will go write that file here temp now we have some options not interested okay and we can um frankly uh put this into a you know console log it'll tell you whether this folder is created or not but the very fact that you know this line executes that is line 44 um will be called after the line 42 is complete because this is synchronous so if I run this program although I don't have a folder by name temp this will create a folder by name Temp and then it will create a temp.txt file in inside so let's go run this see temp folder got created temp.txt got created inside makees sense so you can make a directory you can write a file into it now there are situations where you would want to um navigate to a directory okay now why would you want to navigate to a directory let us say I want to delete the temp. temp directory in that that case you can only delete the directory if the directory has no content in it so how will you remove the content you'll have to navigate into the directory you'll have to make sure that all the files are deleted and then you come out of this directory and then you delete it okay so there are situations where uh synchronous and asynchronous become important to you okay so try and uh use those uh as is when the situation demands just a quick info guys intellipath offers a full St developer course which enable you to learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course so if I run this again I will now expect an error why why there would be an error if I run this program once again there would be an error is what I'm saying why there would be an error any guesses see because this make there is expected to create a directory but the directory already exists correct so how do we deal with it so what I can do is I can also check if this directory exists so you can say fs. exist notice you know the exist they have deprecate the asynchronous way you only have synchronous way of checking if the folder exist you see this exist is deprecated it says it is deprecated so moving forward there is no support for it so you should use file exist sync so you can check if this folder exist what is the path temp if it is true you'll know this will basically give you a Boolean value okay now we can use a condition to check if this is true if it exists we write to this folder we write in this folder else we create this folder and write this content so now we have a repetion of code isn't it so what what I can easily do is I can cut this put this into a function write my file equals this and now I can call this right my file here and here okay make sense so you can use um exists sync to check if this folder already exists if it is existing you write the file if not you make the directory and then you write the file let's go check in the log if all of this would work write my file is not a function is it not a function write my file is a function write my file write my file it is a function um okay let me check where we went wrong I hope you know there is no issue with the scope let me check before I would uh in line 53 there is an error in line 53 there is an error if it is true what is its problem um just changing the name I don't think this would be uh um okay let's delete this folder it really doesn't matter but let me see we return it correct it is a function that you would have to call isn't it oh okay okay yeah nothing wrong here sorry sorry this should be a function uh my bad okay I should have put this into a function I forgot so now things should work yes yes yes function function see it is now created so write my file is a function that we will call here or here you can do various things guys I think you know once you understand how to work with file um will then be able to use this idea of um um accessing a file to read some configurations which we'll be using moving forward and we'll use this right file to store some configuration take the input from the user and store those configurations on these files so that brings us to the end of the file system so let's proceed further okay so in uh the next example so we have we learned couple of things about the file system of course you know this not the end of the story we'll be using file system moving forward as well sync allows you to uh go to the next line after the job is done okay async allows you to go to the next line before this job is complete so it will you do that using something called as a call back function so ASN allows you to go to the next line line of code and start working with it before the previous line is done with its job so both of them have advantages and their own disadvantages So based on the context you can choose one so guys we'll go to the next you know uh module so in the next module we'll learn about something called as HTTP now what are the things that we will learn with HTTP we'll see how to create a web server because predominantly the you know a node itself um a lot depends on the kind of job that you may adapt as well uh you can do some network operations or you'll be doing some web development okay so we'll be catering both of these um you know paradigms in this Workshop so first I'll show you how to um create some front end and then I'll show you how you can work with that on the back end as well so we'll we'll address both uh see with without having a front end uh if you have um if you start working with back end you'll not be able to see the application of it which module is used most in the real life um again Nishant that's a relative question I've seen developers who use um Express throat their life okay and I've also seen people who use react throat their life they don't work with the uh node side at all I've also seen angular developers VI developers um and now I guess you know out of the built-in modules the most popular ones would be um the fs module because um uh accessing the local file or you know a file on the internet sometimes is a crucial requirement there are few other modules um that are also very useful we have not discussed about them yet but there is something called as child process and clusters so these are mainly uh inclined towards performance optimization yeah so if you are a server side developer um because see node has this challenge of a single threaded approach uh towards solving a bigger problem I guess you know most of these modern Frameworks um the server said architectures are also adapting the single side appro single thread approach now njx is a very popular framework um after um Apache uh which is using uh Apache of course uses a multi- thread approach and that is where you know if many of these threads has to access each other that is they have to access the process of each other that's where the problem would arise so how do we crub those that's where you know the idea of single thread is an advantage but when you're using single thread um your application cannot scale scale well so for which you know you can use these clusters and processors and web workers as well there is one more called Web workers so worker threads can also be employed of course you know workers are A New Concept in HTML 5 uh but um it's you know catching up the pace uh but most of the um server side developers would be working with process and clusters I'll I'll give a overview of them because see this becomes slightly complex um and as a person who is getting started with um node uh it might be an Overkill but I'll give a uh context when we move forward okay so once we are done with some basic modules I guess you know you'll know the problems of a backend developer and then I'll give an introduction to D that will help you okay so just to bring the context back guys we will see how to work with something called as an HTTP module now what can we do about this HTT module there's a basic modu which allows you to uh create a web server okay and this is how Tomcat if you worked with apache's flavor Tomcat creates a web server for us so we have an HTTP module of course you know Tomcat does a lot of things um even um lamp mamp Vamp or you know any of these PHP Frameworks have lot of configurations so we not trying to compete but I'm trying to show you how fast and how easy it is to create some simil Solutions using node uh using this basic module called HTTP so what HTTP does again you know HTP does not have um uh ecas script equivalent you'll have to use a common JS approach itself so you see there is no [Music] um uh EAS script 6 approach to this problem uh sorry to this module uh we'll have to use the requir only so let's go ahead and create a project um we'll go create a new file this is step two HTTP module. JS file so we'll say con HTTP which is of type uh require a module called HTTP so it's a good idea that now you start practicing using this node colon now what is the purpose of this I think in the basic classes I did explain but to do a recap this node colon is a name space so let's say now you come up with another module called HTTP this will not conflict with your module then okay say you create another module called HTTP do JS file okay and you'll say module do exports equals an object let's say t equals I put my name you can put yours so now this HTTP is a module correct that I've exported now if I want to import this module uh maybe uh yeah if I want to import or if I want to get this module uh in this case it is called HTTP isn't it so if I say require like this okay see this is also called HTTP this moduel that you want to use from node is also called h HTP so this might create a conflict isn't it so how do we overcome these a r rare scenario but you may never know isn't it so there are many common names that uh are used by node here and you may encounter one of them so in order to distinguish between your modules and node modules you use this prefix called node colon okay we could have used it in all the other cases as well but I did not okay but moving forward I suggest you make this practice of using this name space node colon now from this node you using HTTP module and which is assigned to this variable so what do we do out of this HTTP module see this HTTP module has a method to create a server so you have something called as create server this create server will give away so notice know this is um an asynchronous way of creating a server sorry yeah this is a synchronous way of creating a server so it will not go to the next line until the server is actually created so what happens is that this create server of HTTP will return a server back to you so we can hold it into a variable and it's a convention many of them will call with the same name we call this a server so when you call this HTTP do creat server what do you get you get a server back isn't it so now we will set up a configuration so if any transaction that may happen on the server we will have a call back function that will be addressing that so we can expect a request that comes in and a response that goes out now you should think like a server set developer of course node is a server side technology isn't it request that comes in response is what we as a server developer send to the client so request is coming from a web page usually and response is going from this web server easy so let us now deal with this so if I get a request I want to do something if I get a response I want to do something so as a response I might want to do something so what I'll do is I'll simply say response Dot right so I want to just write some text of course you know we have other you know methods right head WR procing uh WR continue and right okay so I'll show you couple of them uh rest you know you can easily scale from the documentation so I'll say response. write what do you want to write so you basically write a chunk of information you're not completing the transaction so when you're working with this HTTP basically you are using something called as a stream we'll talk about streams exclusively in the next couple of examples so that becomes really relevant then as of now I'll give an introduction what is a stream see if you if you make a request and you get one response okay you don't need a stream but what if you make a request and for which there may be a continuous response that might be coming so that's where you know you would use a stream so this https creates a server itself is a stream and this request and response that we are actually using these are asynchronous by nature and we will keep waiting for any request that may come in so once you set it up the web server can keep sending um um requests as and when possible yeah it's like a chunk of data it's like a small bit of a huge part so you are also using a stream to write so you are getting a stream and you're sending a stream back see I will write hello one I can write hello 2 again I can write hello 3 again I can write hello 4 again okay hold on we are not done so I'll explain and then it makes sense okay as of now we have just created a server what is this create server doing it'll create a server and send you a server object back now we have you know a stream of information and when you're done with sending all the information when we are done sending all this information you will say response.end so this is an indication to the browser that hey the server has done sending all the information okay and now that you know we have this server we need to configure the server see Server is doing its job now he is capable of listening and responding now we need to configure this so I'll say server do listen listen is a method that we can use um see because server is nothing but um event that might be triggered with every request that comes in the server is basically um listening to a specific port on a host so we can use the server listen it takes three arguments the first argument is the port that you You' want this server to listen on okay so this is uh a number so I'll pass in 2020 any number is fine the next parameter is the host that is what is the domain again you know this um Port um is a number the host usually can be an IP address which will also be a string so I will call this as Local Host which is equivalent to one 92.1 68.0 do1 okay I will simply use Local Host to keep things simple the next parameter is a call back function and you know why call back functions are important because we never know when there may be an error triggered and as a server side developer we want to know that some error happened okay and so we'll keep an error I mean we'll listen for this error and if an error happens we'll log in the console that an error happened if there is no error we'll use a console.log and say web server is now running see moving forward all of these examples that we are actually leing guys are very trivial okay because we will scale from one example to another these are Basics but nevertheless we now know that there is an HTTP module and this HTTP module has a create server which will return a server object which can be configured by assigning a port a host and a callback function and usually you would want to pick this this information if you join an organization uh you will have to interact with the hardware Engineers there and then find out what is the port and host that is available as of now I'm going to use these hardcoded values but moving forward I'll show you how you can read it from a configuration file the server will listen to the server which we create correct so as a server side developer we have created a server which we can listen to We will do the DBS stab connection later okay as of now let us get this web server running can be answered later saapa react is a frontend nodejs is server side framework and nodejs uh I can understand it to server side interation react is the front end okay so using node which is the back end you develop the front end as well that is why this term called M Stack exists okay wherein all the aspects of the uh application development is actually on node itself node is a platform on which express is running react is running and mongodb is also uh connected um see yeah so MVC is a um uh framework that uh react follows no doubt in fact it follows mvvm model view view model mean is is another term for mongodb Express re angular and react angular and node and uh react and angular both follow part of those MVC that is both of them follow model view controller approach uh the old version of angular was strictly abiding to MVC pattern but you know after the version two they did not want to bind that controller part to a project can there be a project with MVC and react together see suap the M uh react follows MVC okay see the model is totally different right so and the view is generated by react basically so react takes the place of the view and it also has controllers let is um access to the data and okay let me address that little later uh but I guess you know uh we will deviate but let me address this part uh request or objects um yes this request and response are um objects that are being passed into this function that we can use okay why do we write no no no see these are objects which has methods onto it the so the request and response that we are getting these are stream objects so these are um they can keep happening and they they have methods on it so write is a method of the uh response object that we are using okay even the request object do have their own methods okay so we will moving forward I'll show you how you can use them first let us let's get this to work see as of now we are using this node as a ser side resource to create a web server so what will this do this will create a web server for us I'll say hey node run this step two- hp. JS file yeah mean and M uh implicitly they do follow in fact the MVC architecture can be followed on the server side programming and the client side programming separately okay these are design patterns that that can be followed by any piece of code that you are writing so basically you are doing something called a separation of concern there Nishant okay and that can be implemented both on the client side and the front end on the react side it does uh bifurcate the data with the logic with the template so model view controller nothing but model is the data controller is the logic and view is the um a view part of the application which the user interacts with it's like the interface the user interface okay and react does use something called as templates to create user interface and it has a class component which can hold the logic and the model is usually not stored in react but it can communicate to a server s side which provides them the the data okay and the same thing with angular as well angular provides you the front end mongodb provides you the back end okay so coming back to um uh the MVC in angular angular also has a class and it has some properties and it has Services where the data will be provided okay um I guess you know when you attend angular or react I make them even more clear but I guess this overview is good enough for you to understand how angular and react follows MVC patterns okay so guys this is now displaying this message uh saying that web server is now running but what is the purpose so we need to Now launch a you know um uh browser and we need to navigate to the configuration that we have made on the web server which is HTTP colon Local Host Port 2020 is what I used so if I press enter I will now get hello one hello 2 hello 3 hello 4 okay ignore these um lockdown install um I guess this is because one of the modules that I have extensions that I have installed on my machine which is causing this problem I'm not sure which one so I've just allowed this to happen but as of now if I run this you see I've got all the resp responses and the browser is also convinced in that case there will be an error okay so in that case this error will actually trigger okay so you can easily figure that out see now this server is running correct so we can ask another terminal to be created see I got another terminal now and we will navigate to CD the day three folder and now if I say hey node run this step um 2. HTTP .js file there is an error you see you're getting an error because the server is not available on that particular port and you see there is an error address already in use and that's the purpose of this error so we know what is happening the wo is saying I'm getting an error what is the error isn't it wo so that's important that's the relevant um you know keyword that's where we can help you you're getting an error what error just let us know what is the error you're getting if you're loing launching it couple of times then you may get an error listen is just once okay it is actually listening all the time okay it is actually listening let me just show you so now let me uh remove this move it out we don't need this and I will say right not right continue I'll say right um we can also write um let us say I want to write some HTML here so I will say H1 hello there and close this H1 tag okay see as of now we have these you know call back functions which directly allow them but sometimes as a developer you would want to dispatch your own errors that's when you know we'll use TR catch as of now let's run this see it says web server is running and you do get to see that this hello there text is displaying but of course you know with this there are some issues as well uh if you go to the network Tab and if you refresh the code you do get this Local Host correct so if you click on the Local Host see guys you can watch what is the response that I'm getting see first it says that you know the status code is 200 and everything is okay but did we anywhere tell how this text should be understood by the uh browser we never told isn't it because we're not sending any response headers which are in line with that see as of now we've got the connection is keep alive blah blah blah all of this is fine but we did not send any response headers which will say how to deal with this okay now that's also quite relevant so what we should do along with this is tell the browser how this text should be understood so we can say response dot um WR head so we are writing some Header information what is the purpose of the Header information this will be understood by the browser and browser will treat the response that is followed after the instruction um following the instruction that we have provided so in other words the response that we're trying to send will be used with this configuration this header configuration can um instruct how the response should be addressed so if I scroll down in the documentation you'll find that there are some um header configurations that we can specify um so what I'm interested in here is this right head will ask you for couple of parameters the first parameter is how do you want the browser to feel when he gets this response so I'll say 200 which means everything went fine the second parameter is a configuration object the status message that is I can specify that I want to specify a content type the content type is um plain SL text I think it is text SL plane if I'm not mistaken let's check okay I think it is text SL plane so which means that this following text or response that I'm trying to assign yeah should be treated as plain text okay so let's now run the same example and now in the browser you now see the text is being WR rendered like the way I've sent it and here in the Local Host you can check that I the um you know the content type that I sent this one is what I have accepted here now you you can write some custom headers as well so you can say hey I want to send this author and I can put my name V this would work so you you can send some procing instruction to the browser as to how this uh request and response should be addressed so if you see here I do see author that I sent is available so we can use it you know on the client side how we would want to you know use this piece of information if I want to treat this information as um um uh HTML then it would be um I guess it is um I guess let me just check the documentation usually I don't use this the content type is plain text okay that is one okay it's text/html this way yeah correct so you have read the documentation well that's good uh usually you don't okay so usually you would uh not do all of this I would be using a Express framework to do all of these okay so nevertheless so you know that you can educate now you may say hey VI without this information anyhow the browser was doing its job isn't it so without the information without this configuration the browser was doing its job the are we wasting our time by providing this information the answer to that question is no okay see the browser when you don't give him an instruction it is using its default logic to come to a conclusion so which means that it is actually doing some computation to come to a conclusion which you can avoid by passing this instruction the browser then does not have any ambiguity it has a clear instruction as to what needs to be done if not it then has to judge by reading this text see usually you would not be sending such small text isn't it you'd be sending a large file in fact and if you are allowing the browser to decide how this text or the file content that you are sending um should dictate what would be the type or then you are doing a mistake so make sure that you specify what is the m type I mean how the browser should read and understand the content that you're sending that way the browser exactly knows what should be done so if I run this example this will now render it as text uh HTML and if you go back and check this will tell the content type is text HTML isn't it some browsers are really smart say for example Firefox um is smart so it actually goes through the content even uh Chrome uh to you know to a larger extent is quite smart it knows the content and then it delivers it accordingly but if I'm sending some Json file okay so that would be application SL Json so the content here will have to be like Json and then the browser will display it like Json but because you say that this is Json browser then gains the ability to display it like Json Firefox does that say you go to this website called Json on placeholder uh type I code data this one and I guess uh if I scroll down these are some um um mocking data that we will probably use in in our Workshop sometime later but if I click on post notice know this time uh Firefox does allow me to read this data as if it's Json but the same situation in the same situation if I go to Chrome and ask him to read the data it will read it as raw data correct it is not like format it I mean I have the ability to collapse these data and then get a tree view of the data correct all of that is possible because browser knows how to deal with the data that you have sent because we have the ability to send the content type okay some browsers are smart they make use of the in you know information that we sent some browsers may not but as of now it's important that you know what are the configurations that are available and and how to use them uh but this not the end of the story say for example I want to take this idea of creating a web server and use the previous Library as well like you know the file system and let's say we would want to come up with a small solution so we'll mix and match two things that we have learned the HTTP model module and the file system module with which instead of writing a simple text like this we will be able to read the content of the file and then serve it okay and then we will graduate to allow the user to decide what file he wants to read on my server okay which is what every web server actually does so if you go to a standard web page you'll have um the homepage the product page right to the user is you know expressing his interest to read a product page so we need to serve that particular file to him okay so let's go ahead and create another file this is step three HTTP with fs. JS file okay see if this file is running okay it is running already correct this file is ready now you want to change let us say you would say hello there again but this information will not be updated here correct see no matter what you do it's not available that is because this is like a fire and forget situation the server is already done you know um creating itself and putting it out there so you need to restart the server then you'll get the update but sorry calling this um rerender or the server to recreate itself uh is sometimes a pain so we can create this or we can ask this to be relaunched every time using a module called nodemon is one of the ways okay there are couple of other alternates I'll show you how you can use that moving forward when it becomes a real problem then I'll show you how you can use it's a very popular module I'll show you how you can use it moving forward okay node modon that is something that we will do later for now you I suggest you manually do it so that you understand the pain okay in termin only I can yes yes you can you just have to control c apparo key and press enter it's not too much of work right noemon also does the same in fact it is watching the file like the way we watched the file and it can check if there are any updates it'll relaunch node okay oh you're not able to rerun press control C in the terminals it'll terminate the server isn't it then use aaro key and press enter again that should work now you're able to do it awesome okay so guys what we'll do is we'll see how to [Music] um create a simple solution wherein we can ask the information User to provide us certain information and based on that we'll be able to render a file all right guys watch so I'll say const HTTP equals require so this is one of the modules that I need okay and I would also want to read files so I'll say FS so from node I need FS as well so these are two modules that I've loaded and now using this I want to create a simple solution wherein if the user uh makes a request I would want to read a file from here and then serve okay so what I'll do do is I will go create a file here I call this as index.html notice this A blank file here so I'll add some basic HTML content here um I'll say this is homepage um let's add some content as well homepage and now inside this HTT the httpfs example my intention is to serve this file okay and we have seen how to read a file isn't it so let us now configure let server equals HTTP do create server this is the code that we have written before so we get to you know address a call back function which will get the request that comes in and the response that goes out the first parameter is the request the second parameter is the response that we are sending okay and here we will check if um okay as a response we would want to write a right head first okay righte and say 200 everything went fine the content type is text/html uh this part is ready and now I would want to say response. write okay this is where you know I would want to read that file and send the response response. end so this end indicates to the browser that have the server has nothing more to send Okay so this will be called immediately so now we will use this configuration server Dot listen Port I'll make it 3030 this time Local Host and I will set up a call back function which will handle the error if there is an error we'll handle that error I'm using a trity operator to make things a little easy if there is an error so if error I will say console.log if not I'll say console.log Local Host Port 3030 I know this is little lengthy long code but I hope you are able to understand if there is an error okay so I'm using a condition trary operator if there is an error log this else log this make sense okay so in fact you know we can achieve all of them in um just few lines okay uh but I want to explicitly WR write them in separate lines so that you know what is happening not that you we cannot condense these lines okay so let's go ahead and run this contrl C now I'll say node this time we are running the step three file it says server is now running on Local Host 3030 if you go back here you'll see that there are some question marks that is what we sent isn't it but in reality my intention is to send the content of the file how do I do that um so because we are using this Arrow function inside this listen method listen would be the scope lakshmikant listen is a method isn't it that happens to be the rapper function yeah let server no no no no okay inside this you mean inside this where did we write okay so this would be the create Server create server is a method correct so this call back function will have the scope of the create server method yes okay so now they know we are done we can use this fs and see this is where you know we would want to read this file and then send it as a response so once you know we have got this we'll cut this okay I'll use this FS dot read file you can use both synchronous and asynchronous and you know what to do with sync or async I will use async because this is um uh something that you know you should probably use rather than the sync there are some specific use cases okay so if uh we get to a point where we can do authorization and authentication I'll show you when sync becomes important or relevant for us so I'll say fs. read file what file I say from this folder look for this index.html so I would now want to read this file as utf8 see I'm not leaving any room for the program to do some um um guesses okay see there are some libraries which are very capable uh which are far more refined to address a developers requirement like Express for that matter so in such case if you leave these room to guess Express has a default answer okay so it'll definitely figure out so in this case I will read this file and if I get the um call back function here see we will get the error file error and the file data these are two things that I get correct and now here if I get an error I would want to log that error so this time I would want to um read that as a developer I don't want show my error to the user doesn't make sense right I don't want my user to know that I made some mistake so I will check if there is an error the file error that is I would want to log that on the server side using console log error and the file error so I know if the file was available not available whatever so I'll be able to understand else um else okay in both cases I need this end to be printed maybe no in this case we can [Music] um I'll simply say error happened okay so if some error happen I mean in what conditions this error can happen if this file name is a mismatch if this file is not found in such cases the error will happen isn't it when we get the data that's the data that we will send here make sense and in case when there is an error happened we'll also have to specify what is the error so we'll we'll say just 44 or see if there was an internal processing error then we would say 500 so you may maybe you would want to indicate what went wrong as well okay and then we can say error happened so this would be the type so in case when error happens you would want to say text SL plane and if we are able to read the file then we'll say text/html and then we will send the data and then we'll terminate so if I run this example see you can also use this end outside as well either if or else will happen correct we can also do something like this let's go give this a run and see if this would work control c apparo key run this it says it's running now if I refresh I get to see the homepage content being loaded but if there is a mistake okay and now we cannot expect the same response so we get to see error happened this what we are showing to to the client and see the response here it says 44 isn't it so it basically will give some useful information on the browser side as well but on the server side we know what went wrong it says no suchar file or directory makes sense see although this file is this example is working we may sometimes uh not to uh hardcode these files or the names we would want to read that information from the user I would want to read the information from the user as well so I'll say this is step for HTTP FS dot JS file I'll copy paste the exact same code that I wrote previously okay now I will terminate the server that is running control c apparo key control C is done now I want to understand what file the user is looking for see if I go to this index file we can create some configurations here I will say UL tag with some allies in it and each Alli will have an anchor tag okay and the anchor tag will have a HF and I would want all of these to be created like four times they got an anchor tag which will have oops I guess uh this is an attribute that I had to write equals can you please paste GitHub I have not yet uploaded them onto the GitHub okay I put them on past bin as of now and when I'm done I'll put it on GitHub okay okay so let's say you know I will have four links the one is for homepage and I'll just create three okay not four this is about page and this one is contact contact page uh this is the homepage okay so I will say this is let's say forward slash home will have a link usually uh like a forward slash and this one is about HTML this one is contact. HTML okay so these are the links but they don't exist as of now so we'll um copy this code create it two more times about. HTML and here it says about and I will cre another contact. HTML so in the contact. HTML there's no point for me to navigate somewhere so I'll simply say hash and this would be index I guess you know this forward slash is good enough in this case this is about. HTML okay in the about page navigating to about again wouldn't make sense so I'll simply say hash okay so I basically created some three simple pag guys so from these Pages the user can actually navigate isn't it so if I go back I refresh okay server is not running let me relaunch this uh the step four is a replica of step three so node space step four it's running on Local Host Port 3030 you should now see some links here yeah uh about is not working y y why let's go check um hre ah that is because this about should have come in between this I made a mistake I guess that's the same problem with others as well see this about paste text should come inside the anchor tag isn't it so I had accidentally typed it outside cool so I've got this fixed in all three pages since I made changes onto the HTML I don't have to um restart the server so if I now click on about page I'm seeing the link as about. HTML but still showing me the homepage right see in the about the link should say about dot about page similarly if I click on contact page it says contact in the URL but I'm not seeing the contact page so how do I actually navigate I'll complete this really quick okay so we we are capable of expecting a request that comes in from the user and usually the request object will have a URL property okay so I can say a request that comes in has a URL property just show me what is the URL that I'm getting okay so I will now say console log request. URL so this URL is a property not a method so if I run this every time the user makes a request to a page I should be able to get that in the terminal see watch so if I say go back to the homepage see it says forward slash correct now if I click on about it says about. HTML if I go to contact it says contact. HTML if I go back to the home it says home so I guess you know you are able to see that I can read the request that the user is making of course I don't have a valid response for each request that I'm receiving that's something that we will do tomorrow we know that you know we are able to get this request. URL and based on this request. URL you can create a simple web server which is what we will do tomorrow I guess you know you give it a try see if you can solve without using any references online okay everybody can become smart using chat jpt or you know using some resource isn't it but see you are here to learn see read from the documentation okay and then you can learn what is reactjs we'll try and demystify what reactjs is and why is it important for us to understand what it actually means why reactjs is so popular is something we'll take a look at afterwards but firstly we'll have to understand what reactjs is all about so reactjs is a UI Library UI stands for user interface so it's a user interface library that allows developers to build small self-contained UI components which can be used to build a user interface so whenever you take a look at your user interface of any application whether it's a web application mobile application desktop application you will see that it forms it's built using some components these components are repeated all over the platforms so on even on an Android mobile these components may be repeated so the components could be a button it could be a text field an editable text field a table view it could be um an image Carousel in which you can take a look at all the images that are available by swiping on them or clicking on the Arrow buttons it could also be some image gallery and all of that and many of these components are built by grouping together smaller components so a good examp example of this is a form a form which is used to collect users information is built by grouping smaller components together components such as text field input field submit button and labels and things like that so react as allows us to write JavaScript code that allows us to build these components these components can then be arranged in a hierarchy structure in which we Define where does a particular component go declaratively and using that we can build up the entire user interface the user interface built using reactjs is built completely using JavaScript so we don't have to understand and Define how you can use these components we just need to Define what these components look like what their Styles is going to be and how they are going to interact with the events that the user dispatches so when the user clicks on a particular component what should happen and should something happen or not things like that so react allows developers to write really declarative code in JavaScript to efficiently assemble together a user interface so thing is is that what react allows us to do is that it allows us to declare our user interface rather than imperatively dispatching commands lets the browser know how to piece together the user interface so react allows us to just deare okay I need a button I need uh inside the button I need some text and the text should be this instead of us having to create a button from scratch and then assigning some text to the text field and stuff like that if you have dealt with the old school Dom manipulation way which we'll cover in a few moments is how it works in Dom generally is you have to create these components or elements yourself then you have to edit their attributes and you have to add the children attributes once you've done all of that you have to assemble them together in a tree like structure which is the Dom tree or document object model Tree in which you have all the child components and parent components efficiently rendered together so you have to create like a form inside a form you have to attach all the text fields and labels you have to associate labels with the text fields you have the input Fields you have to associate types with them so for instance some input Fields can have passwords some input Fields can have email some input Fields can have numbers in a particular range and so on and so forth so that's how we're supposed to do that keeping that in mind when we declare our code using react J it feels like we're writing HTML but that's not what we're doing which we'll cover in a later segment but that was one of the major controversies with react when it released so if you've seen some code in react you can see it as being written HTML with CSS and JavaScript which is not exactly how it's work so we'll cover that as well so it allows us to create user interfaces using just JavaScript and writing the user interface code very declaratively we do have to create the markup for our components so that our components understand what is it we're trying to display fancing button or something like that also reactjs is maintained by Facebook and were released in 2013 Sor so as you can see react has been out for quite a while and there have been some massive by advancements in the development of react currently react J is in it 16th version and 17th version is being released react JS is by far one of the most popular user interface libraries it has overtaken angular and view in popularity and in job requirements as well react is very popular because it's very simple it's very easy to understand and it's very easy to learn and use as well now when I say easy I don't necessarily mean simple there is a sufficient mental model shift that you need to understand if you worked with the old school way of creating Dom elements and then updating those Dom elements and then inserting the data that is going to be difficult in this scenario so we'll have to take a look at that but overall it works fine so in conclusion what react JS is is that it's a user interface library that allows us to build user interfaces by declaratively writing JavaScript code the JavaScript code is maintained by react so if any changes happen to the thing that we have rented all the components react will take care of assembling those components reentering ing the changes and making sure everything is done as efficiently as possible if react was not there then we would have to write the code to figure out what are the things that we have to change and once we do change then we have to display to the user and that's about it and that's how it's supposed to work and now let's take a look at what else we have what is Dom we've been talking a lot about Dom and how reactjs keeps everything in sync with the Dom but we'll try and understand what Dom actually means Dom stands for document object model and it's the tree structure of our HTML components but we'll try and get a bit deeper into it so Dom actually stands for document object model that I think we all knew it is a tree like structure that is used to represent the structure of all the elements of an HTML document so when we create an HTML document with all the markup the tags the attributes and all of that it creates a tree like structure in which uh HTML tag is at the top then we have the body tag which is its child node then we have the head tag which is also the child node of HTML tag and and it has a lot of information about the content of our website such as the SEO related stuff the style sheets and so on so these are all arranged in a tree structure so why in a tree structure because it makes it very easy for us to navigate from the top of our HTML tag to the particular element that we're interested in and we can manipulate it in Java we can manipulate it by getting a reference to it we can manipulate it by after getting a reference to it we can manipulate it by changing its attributes its content its type there could be number of things that we can do and that allows us to manipulate it on the flly so when we click a button and we want to make some changes to our Pages HTML content we can do it using manipulating the Dom so Dom creates a hierarchical structure as a hierarch structure is a hierarchical structure that we have parent and child and sibling and grandparent and all that and in that what it does is that it Dom can be used by programming languages like JavaScript to interact and manipulate now it can be used by JavaScript but that's not the only language that can use it for instance if you're into web scrapping then you can take a look at python beautiful soup and they also use understand the document object model and you can just Traverse the structure of the tree Once you understand the structure and with that structure you can pinpoint to the content that you want to manipulate or sa and you can do that now Dom is a standard interface for interacting with web pages using programming or scripting languages so it's not that Dom is something that people haven't used yet people use Dom all the time and it's a standard programming interface so anyone who interacts with the web page who tries to get data from a web page converts the HTML string into the Dom structure and then manipulates it the way they want to the reason why JavaScript does it is because exactly the kind of thing that it was built to do JavaScript was created so that it can manipulate and add functionality to web pages as times grew the javascript's reach of what it could do become even more and now ja can do a whole lot more than just manipulate the Tom but it's still one of its major features and one of the major reasons why we use do right so now let's take a look at what else we have to do now let's take a look at react Dom we've taken a look at what Dom is uh but when we're working with react in the browser we need to also work with react Dom which is one of the libraries that react users underneath the let's take a look at what it is and why do we need to use it so react is a user interface library but it's built with the purpose of building user interfaces it's not limited to web it could on so be tended to use to be used on uh mobile applications or virtual reality applications such as react VR or react native not in that AO but you can use react to build applications for the web for the mobile platform which could be crossplatform such as Android and iOS and you can also use it to build applications for virtual reality apps now that being said how can you build such applications for such different platforms when you have a single Library well the answer is that they have SE separated the essential parts from the variable parts so when we're using it on the web that is when we're using it to build the front end of the web application that we are going to be building then it needs to interact with the to to make that interaction easy and make that integration seamless we use react Dom so what react Dom will do it will take a look at our component tree and it'll take care of converting that component tree into Dom elements and keep track of managing that compon so we can create the components using react and then when it comes to integrating our components with the actual web Dom we can basically just use react Dom and it'll take care of it all for us that's what react Dom actually is react Dom is nothing more than just a library now it's basically just a package that contains Dom specific methods used by react to enable itself to uh interact with the do so if you're using react and you want to build applications for the web then you use react count other Library such as react native and react VR have their own bridging system system so you don't have to worry about that at all all you have to worry about is how you can build user interfaces using Dom or react Dom in that specific scenario so all react Dom does is that it Bridges the gap between the react user interface library and the web Dom platform so if you want to build react applications by creating components that can then be translated into Dom elements and managed by react we use react Dom specifically for that purpose now let's take a look at UI without react so when you're building user interface without react JS what are the kinds of things that you need to tackle the first thing is decomposition so we can quite easily build user interfaces without react J so if you want to build a user interface without react ja you can do it especially for smaller applications it's also a recommended way that you go with without react JS but for any reasonably sized application it involves some really difficult challenges one of those challenges is decomposition so when you're using react is we can create small isolated individual components which can then be composed together to create the entire user interface so if you have a user interface that you want to create using reactjs you can do so but without reactjs creating smaller components combining which you can create a larger user interface can be really difficult whereas with reactjs decomposition is really easy so that's why reactjs is much more preferred over other other component libraries so without reactjs would need to create the HTML tags then use the JavaScript to add event handling code and wire everything upse so without react GS what we do in play JavaScript is firstly we create the HTML code for our user interface style it using CSS then we get a handle to each of the components that we're interested in such as if we are interested in knowing when a button is clicked and all of that we get those uh user interface elements and then we add some user interface elements add some event handling code to it so if we have a button that we want to respond to when it's clicked on what we can do is we can just create an onclick Handler which will run when the button is clicked on now the browser takes care of it all when the user clicks on the button the event code that we have associated with the event handling code will run this is quite easy in theory but in practice it's really difficult because when we have multiple user interface elements and their interaction needs to be configured simultaneously separating these concerns can be really difficult how do you separate the event handling code of a button from an event handling code of another button which are two different buttons such as the submit and the reset buttons of a form so that could be really difficult and when that difficulty is need is something that we need to manage on medium to large size application it could be really really difficult as well so this is why decomposition comes into play where we can just create selfcontain isolated components and Those comp components will take care of their own logic they don't need to worry about how other components are working and we don't have to go through the entire Dom hunting for each element and then assigning the behavior that needs to happen when the user clicks on a button or some other aspect of the application happens then comes State Management State Management is one of the most important aspects in any application not just front end applications but it especially important when we are dealing with print end applications or applications that the users can see the reason being State refers to the data that our application stores in the memory so that data can be used to display things later for instance when we are building a chat application the messages that you have sent so far and the messages that you are going to send right now that you have typed into the chat box all of these are part of the state of the application this is managed by your application and now your application needs to take that data save it to the database send it to the user the user needs to be able to see it when the user sees it that notification needs to be sent out to all the other users who are associated with the messages as well and that could be really complicated task with that in mind what we can do as developers is we need to firstly understand how to use state so State Management is really really difficult mainly because if you have an application that has some data that is useful for one component and some data that's useful for other component and then there's some data that needs to be shared between those components that is really difficult because now we have to figure out where to put that data so that can be easily shared by child components and so on so that's really difficult especially in an event driven design such as the one that we saw earlier with plain JavaScript and HTML because if you're doing things like this then what's going to happen is we're going to be able to just do State Management we're going to be able to do State Management based on user interfaces event system so when we get a click then we are going to update something when we're going to then we're going to make some changes to the state but all all the data that we need is going to be stored eventually in a larger Global context in a global object all the variables that live on a global object that's going to be really difficult to manage because some part of our application not knows what are the different names of the variables that are saing the information that we need will end up overriding those variables and all the other parts of our application will start breaking and that will be really difficult for us to figure out how that is happening that's why State Management is really important now sometimes when data is being displayed it gets changed or updated so if you have data let's say you have chat application the data that you have is all the messages that you have so far when you load the application and new data will be when the user sends a new message updates previous messages if they have the ability to do so and so on and so the total price that is shown on a shopping cart when another item is added also changes the total price of the entire card when you add new elements the total price needs to change as well and many different aspects of the application need to update the data and that is all very difficult so this is where State management comes into play where we can specify local state local state basically means just the piece of information that only one of our components is interested in and they only need to know so for instance if you have an application that petches data from the external web apis and displays images well the individual components are only responsible for catching data from each of the user interface element and getting the images from the web server and then displaying it into the user interface so this is why State Management is important and simpler user interfaces without reactjs managing State defining local state so that if we Define some other state variable with the same name doesn't get overwritten can be really complicated which is why we use reactjs instead of plain user interface with out react now react takes care of keeping all the data and the display in sync with each other so if the data has changed all components being displayed are updated automatically so if you are not using react then you have to take care of where all the state that we are using is being referenced and then we need to update it one by one and that could be difficult so adding and removing elements from a Dom Tre is very performance intensive Tas now this is what causes a lot of performance hit in a lot of our applications that we build whenever we add and remove completely delete the entire D Tre structure and then rebuild all the components that haven't even changed that could be difficult unless we are very smart about it and we keep a track of what is being rendered if that is the case then it's not really difficult so in situations like this we end up using gjs because it gives us a massive performance boost what react does is that it takes care of rendering the user interface without us having to muddle through the entire user interfaces scod without us having to figure out what are the things that need to be removed and what are the things that need to be added and what is the best way to do it react will just do it automatically for that's why react JS is so popular now react solves this problem by something called a virtual D which we'll discuss later on now virtual Dom allows us to make updates through the components and then the GCT will take care of matching the updated virtual D with the current actual Dom and figure out what are the things that need to be changed it basically dips the entire Dom and fig what are the differences the differences that are found are updated and only the differences are updated other things just left as they are and that's the way it RS finally it comes to debugging whenever are we're building an application that is using the user interface it could be really difficult to us to debug this application debugging basically means if you run into an error how are we going to solve it the way we solve it usually is by going through console log statements figuring out where the error has come from figuring taking a look through stack traces but they are not really reliable ways of debugging an application there are Advanced ways as well and you can use Ides for that but the tools for debugging JavaScript applications are not that good keeping that in mind in react we have react developer tools and what they allow us to do is they allow us to once we're in development mode and we have installed the react developer tools extension greatly simplifies our component debugging we can display components we can take a look at the internal State we can take a look at the props where they are being passed from at what level are the state at what level are the changes to state are being dispatched there are many things that we can BL and all of that it's very useful so as you can see react is so popular because it allows us to do these same things now let's take a look at some of the es6 features that are necessary for us to use in react a or in order to learn react a we need to know so let's take a look at that so react a recommends using es6 features to create more readable and more concise SCP now a few of the most important es6 features are the on that we going to discuss now es6 basically uh refers to es250 es stands for ecmascript it is basically is Javascript but it has been standardized so new recommendations are proposed and then browsers Implement those recommendations and that keeps evolving and those recommendations are given by the excript recommendation Society so that's how we do that so this is why we use the es6 features because new recommendations were proposed in 2015 those have been implemented and are now widely supported and they let us fight really clean and concise code the first thing is variable declaration now in es6 we can use let or con variables and to describe variables and constant values in JavaScript before es6 we would have to use the VAR keyword V which allows us to describe variables but there were certain issues with bar if we were to Define a variable inside a loop it would still leak out to and be available outside the loop inside functions that was really difficult for us to understand and that lead to a lot of issues this was called variable hoisting and that lead to a lot of undesirable this why we ended up using let and cost and that's why they are most important then comes Arrow functions so Arrow functions are used to write Anonymous functions in a very concise way without using the function keyword so when we're using Arrow functions all we have to do is we have to use the simple syntax instead of writing Anonymous function with the function keyword and just not giving it a name of the whole single brackets all the element names and then double brackets double cly brackets what we would have to do is we would for Arrow functions all we have to do is create Arrow like syntax and that will work and we'll take a look at the syntax just in a moment then came classes now classes are uh the fundamental construct of an object-oriented programming uh language such as python Ruby Java C C++ all of them have the keyword class Associated there but in JavaScript the keyword was not present in order to create a class you would have to firstly create a function which is called The Constructor function then create a new object out of that function and add things to its prototype that was really difficult for people to understand so what they have done is they have created instead of creating uh functions we now can use class keyword and just use classes the regular way and that works just fine then comes array destructuring so what destructuring allows us to do is it allows us to get the variables out of objects and so if we have an array with three uh elements that we know are going to be three and we want to get these three variables out into three variables instead of assigning them one by one we can do it all in one line using the D structuring same with objects so if we have objects that are key value pairs we can do the same thing with objects as well so that's why we do restructuring and it's a concept that's available in many other languages we take a look at the advantages that you can use to use react CHS the advantages that you get when you're using reactjs what are the advantages that you should be looking for when you're using reactjs so when you're using reactjs it provides us with several advantages the first one is scalability so reactjs works with well with applications of all sizes if you have built a reactjs applications you built simple small applications like to rist applications to really Jo e-commerce applications a really good example of this is going to be flip cart because they have built their entire front end using reactj and it's scalable because it's we can see that their front end is working quite well so you can build applications using reactjs for the for smaller applications applications that are of giant size another example of disadvantage would be Facebook the company that has created reactjs has built more than 100,000 of UI components that are being used in Facebook Instagram also uses uh reactj and many other fronts of the online websites that are of the giant scale use react so it's quite scalable in that then come compositional UI compositional UI basically means that it allows us to combine our user interface elements or smaller user interface elements that are usable into other user interfaces and then we can modify the things that can be modified and replace the user interface elements if needed so we can just pick and choose the user interface elements that we want to combine in our in our in our front end and we can easily do it by importing the component then rendering it and then changing its Behavior if it's possible and if necessary so that's why we use compositional Ur as one of the advantage then comes portability portability is one of the major advantages of react J mainly because a component can be ported from one project to other Project without much hassle if I have a project in which we I have created a button component and I want it to be used in my other project as well all I have to do is just import the button component and then display it on the screen declaratively creating the markup nothing more than that I have to do if I want to configure it then there's a bit more work to be done obviously but for simple usages it's very easy to do so that's why portability is one of the major advantages of using react and that's why many people use react J because it's very very portable portability also helps across devices so if you have if you're using reactjs in on the web and you want to use it for your native mobile application there are some components that you can carry over not all because the environments are so different the platforms are so different but if you want to you can just create the styles for one component and then at least can share the styles for those components across different user interfaces so that's that's usable and then comes performant so react is very performant what it allows us to do is it allows us to instead of accessing real browser Dom allows us to use Virtual do that virtual Dom can then be used in order to boost the performance when it comes to Dom manipulation if we were doing it without the virtual Dom then there would be a lot of issues the performance would be really cumbersome it would be really clunky the user interface would lag at certain points and that would be really difficult for us to get started with so we don't have to worry about that that will work just fine and now we have done with the advantages let's see what we else we have now let's take a look at some of the disadvantages of using react jss so reactjs is a library but it's not free so there are going to be some consequences of using it so it's better to be advised of what the disadvantage might be the first thing is it's learning C although it's quite easy to pick up the learning C the number of things that you have to learn in order to become a react CH developer are going to be quite a large number also there's a steep uh or there's a big mental shift in the way you look at applications so earlier we used to build applications by creating the markup then getting the user interface elements and then attaching event handlers to perform some tasks on now we need to change that kind of thinking to to Applications being a function of our markup and our state so the markup will be what our application should look like and state would be the data that our application holds so if the user logs out of the application what are the things that need to change if the user deletes a particular message what are the number of things that need to change that's the kind of thinking we need to adopt when we're building applications and that could be a little difficult to understand the right at B so a lot of practice is needed to in order to get understanding how to build applications like that when com document so reactjs rolls out updates and new features quite fast so every now and then new features new updates new experimental features are available as well and old features are removed new features are added with uh different syntax than the experimental one lots of changes are happening quite fast so because of this online documentation tutorials might not be up to date some new ways of doing things that are much more efficient might have come out maybe there are patterns that allow us to build our applications in a much more robust way but we can't use those patterns right now because uh we don't know those patterns because they have been discovered recently and we're not aware of so documentation isn't always up to date the tutorials aren't always up to date there are new things that are happening every now and then so it could be really difficult and frustrating especially for a beginner then comes jsx so jsx is the extension to the JavaScript language that allows us to write HTML light six tag which allows us to declaratively describe our user interface and react will take care of creating that user interface and display it to the user so what happens is to work with react we need to learn how to use jsx jsx is not the easiest thing to learn especially when you come from playing JavaScript background where you're supposed to separate JavaScript into a separate file and HTML to a separate file when you look at jsx code it looks a bit funny it looks a bit difficult to understand it looks like we're breaking some commonly used uh good patterns like not mixing your JavaScript and HTML that could be talk then comes State Management now depending on how your application is structured managing the state of your application is among one of the most difficult aspects of react applications if you want to manage State you need to understand where does a particular piece of information needs to go in your component Tre so if you for instance if you have some list of users that need to be displayed and they have certain properties but those properties are needed by other components as well you need to find the lowest possible common ancestor and put the data there it's called lifting of the state so these are the kind of things that we need to understand we need to be very cognizant of where a particular piece of information is going to live in our application componentry and how we going to be able to use it so that could be a little tough again it's also a shift in the mental model which could be very difficult to understand right at the beginning but overall it's quite easy to understand once you get the hang of it now let's take a look at how we can create our own applications that performs Dom manipulation so I have an empty folder here what I will do is I will open it up in my code editor you can use any code editor that you want I create two files let's close this one first one is called index. HTML all right so this is an HTML file all right and inside the file the first thing I want to do is I want to right and there's a button with the ID of add button and finally an unordered list and it should have an ID of just I save it and after saving it I have it saved and created in my uh in my application or in my Explorer now all I have to do is I want to open it up and this is what it looks like so I need to add some text in the Bon so this is what it looks like now if I want to create a new file I can just create it name it script.js and finally I have to add it in my HTML code so now that is done and we have our script now I need to get all the things right I need firstly I need the list so I just use document do get element by ID and the ID that we gave to the list is list all right that's done now I need the button so I need to do the same thing now what I want to do is I want to create an variable named index I'll show you why now button which is the button on our page dot add event list so when I click on the event what I want to happen is I want to create an element so I'll just create equals to document do create element that element needs what kind of element I want to create it's just an Li which is a list item now element do text content is going to be [Music] task hashtag plus Plus+ so it will be task one task two task three and so on and so forth and now all I have to do is I have to append it as a child element to my list I save it go back fresh click on ADD and as you can see I'm able to manipulate the do and to make sure that this is what's happen happening I open the source code as you can see there are no list items inside the list I can open my developer tools here as well click here this is the body tag this is the list it's empty cck on add something added to the list this is the task with the new tab add new and as you can see I can add them one by one and it's working completely fine so that's how you can do that now let's take a look at what else we have we will now build a user inter face without react so this would be us performing Dom queries on ourself and we'll be using plain JavaScript and you can see how tedious it is so this is what we have right now and if I open the folder that I have created things in this is what look like I have a simple reactjs application or an simple front end application without reactjs all it has is a script file and an index.html file with a main tag and now we want to build the user interface inside so we will be using the code that we write inside our cryp so for that we'll need to create a few functions we want to display an H1 tag with the text UI without react uh as being displayed so that you can understand how difficult it might be let's take a look at that so what we'll do is we'll create a function render render will take children and what we will do is we create our app and for that we need document. get element by ID and the ID is M the main is basically a div inside which our entire application will live app. child CH that's all we need to do here now we need to create a few functions functions that we can compose with each other first function I'll create is for creating an H1 it will also take children and what it will do is it will first create an element H one is what we want to create so we do that element Dot and what we want to do is we want to append the child and then return element finally we want some text content to be displayed so for that we need to create function named text this will also take some content that we need to display and now all we have to do is we need to return document do create text node with the content that we have provided and now all we have to do is we need to compose these functions with each other we need to call the render function we want to create an H1 inside the H one we need to pass in the text the text would be UI without react save it after manually writing all those functions and creating everything if we rerun our app I think we've run into some issues we run into the console and everything is working fine inside the body tag uh we have forgotten to link our script file as far as I can see so all I have to do now is just type script SRC script.js and since it's the same file and now it's working completely fine so as you can see if we don't include our JavaScript then it won't work and we have a d tag with an H1 tag and the H1 tag contains the text content UI without react so that's how you can build a user interface a really simple one without using react how as you can see that we have to Plum together all these components and figure out how to get things done that could be really compli now let's see what else we have now now let's take a look at some of the new es6 features that we have discussed thus far we'll try and understand what these features are and what they look like and how they compare to the old Syntax for that all I've done I've created an HTML page I have created this is the HTML page it has nothing but a reference to a script file and a console that I have opened this is the HTML page it has nothing just the basic HTML skeleton and the script JS reference and every code that right will be written here so let's first understand our variables using n and const so the things that we have to understand are light and const are the first one so what we do is if I create a block if if I create variables inside a block inside an if statement let's say so xal 1 Y = 2 and Z is = 3 if I try to console log them outside my if statement although I declared them inside the if statement they should not be available outside look what happens as you can see they are available in fact I can put them inside the console as well so the reason why that happens is because of a feature in JavaScript called hoisting but ho does is that it takes all of the variables and the function declarations that we have created no matter how deeply nested they are and it gets bubbled up to the top so now it's available everywhere we want to use it the reason that happens is because if we declare a function let's say I declare a function named function a app right and uh inside it I have written whatever I want to do and I call it before I have declared it now that would have been an error because my application knows nothing about it but if I have done it using hosting then it knows that okay this is a function I'm going to bring it when it tries to comp interpret it brings everything at the top and then Tres doing things but it doesn't make sense with the variables and that causes a lot of issues so to solve this scoping issue developers of these languages came up with an idea variable is going to be there we can create one for Le and we can create one for cost now if I run this as you can see Y is not defined if I remove X and Y here sorry Y and Z just use x it's available now what is the difference between let and con both of them are scoped to a particular scope but what the difference is is this DOT log and let x = 10 h y is = to 11 right and now if I print x++ it works so now now the value of x is 11 after I printed it I can also do it the other way plus plus X and that works now if I want to do it this way it's going to give me assignment to a constant variable so I can't change the value assigned to a constant variable that is the only difference so which one should you use I recommend that you chuse con as much as you can because if you use const then there's no way that someone who is using a code can end up changing and changing variables that your application depends on if they are not allowed only when you explicitly need to change a variable used l so with that we have come to the other part of it which is US creating Arrow functions this is done I'm going to delete it now comes Arrow Arrow function basically allows us to create functions in a single time so if I want to create a function right and what that function is supposed to do is it's supposed to print something so let's say that creating a function perform and then we have milliseconds and then we have a call back function right this is pretty standard so far a time out I'm going to simulate a delay for the milliseconds and then execute call back so Handler and then time so call back and then now what will happen is if I call the perform task function pass in 1,000 milliseconds and I pass in the function I have to create a new function with all the syntax and then I have to write console log done run this wait for a second and then everything's done but I can also do it in one other way which is I can use Arrow functions inside Arrow functions I can keep the function body to be the same and I can remove these so now all I have to do is create an arrow as you can see I can do it in a single line run it and then it's done so what happen is I'm just defining the list of parameters that I want if I have some parameters I can pass it here as well but since I don't I'm not going to be passing it and then a single line of function I can do it this way if for instance it's a multiple line function then I can grab it in curly braces and do it whatever I want to do with it as you can see it still looks more concise than using the whole function syntax so that's why we use Arrow functions Arrow functions are more concise way of writing F right now we move on to classes so classes are these are the classes in Old School JavaScript we had to First create a function let's call let me call it app this would be my class inside my function I would conso log Constructor so this is the Constructor function and now I have to add things to the prototyp Prototype do say hello this going to be equal to a function and that function is going to log H all right so I can create a function on object is equals to but since it's a class I have to use the new keyb so I create a new class which is an object now after creating the object all I have to do is say hello now if I run this first the Constructor function gets called then hello function gets called now same thing I can write using class the changes I have to make is just class app Constructor and instead of doing it this way all I have to do is wrap all of this and this should work similarly refresh it as you can see Constructor and hell so everything's working completely fine this is just syntactic sugar and now if I want to create sub classes and super classes all I have to do is I can just s base app if I had a class named B app I don't but this is how you would do in on the other hand on all School old school syntax where we used fun we would have to do assigning the Prototype extending the Prototype and that would be a lot of tricky situations so we don't do that finally we have destructuring which is one of the newest and one of the most used features the structuring and what it allows us to do so let's say that I have a variable names A B and C now I want a to be assigned to a variable named x b to be assigned to a variable named y c to be assigned to a variable name set to do this I would have to then go con xals to names of zero Y is equals to names of one and finally Z is equals to names of two now if I conso log X Y and Z and I run this ABC is there but as you can see this is just a lot of code for something so simple so instead what I can do is I can use the destructuring [Music] syntax and now if I run this it's working just the same so what's happening is it's saying okay this is a variable the variable at the first index goes in X second index goes in one third index goes inide if there are other variables as well they will be ignored so that's how you can restructure and array what about objects so let's say that I have person right and they have name as John and Country as Eng now if I want to create two variables named name and Country to be assigned with the variables with the keys of names and countries what I want to do is earlier I would have to create F name which equals to person name that and similarly for country but here all I can do is I can just use name Country and now if I want to loog name and Country I can do so quite easily fresh everything's working as expect that's how you destructure things these are called syntactic sugar basically because they just do things in a different way they're not changing the performance they're not changing anything underneath the hood they just allowed that with a more convenient way of describing the things that we want the language to perform so that's why we do that so with that in mind let's see see what else we have now let's take a look at virtual Dom or VD as it's called virtual Dom or VD is one of the fundamental concepts that react uses to keep the application performing how does it work and what does it actually mean to use a virtual domm so let's take a look at that in reactjs Virtual dorm is just an ideal so it's just an idea or virtual representation of the user interface so to give you an idea this is just basically how your Dom should look like this is just an ideal or a virtual ual representation of what the UI is supposed to look like that is kept in memory and synced with the real Dom so the real Dom is the browser n or the uh tree structure that we have discussed earlier in module one that structure is what it is then mapped on to the real advantage of using virtual domor is something that we'll see in a moment but the real reason why we use a virtual dor is because the actual Dom is quite expensive to work with whenever you make changes to it there are going to be a lot of changes that you have to to make here and there and that leads to a lot of performance degradation a good idea of getting over it is to use Virtual Dom in Virtual Doms what we do is we create inline similar structure and what we do is we use that structure in order to make sure that what we're doing is taking a effect and then mapping those changes over to the real do so a virtual do is used to encapsulate encapsulate things and it is encapsulated in the react Dom packages so if you've taken a look at the module previously what that taught us was that react was supposed to be is something that is supposed to be used with multiple platforms ranging from the web to Native mobile applications to virtual reality applications so in order to abstract away all the Dom related functionalities from reactjs we use react Dom and the virtual Dom is a concept that has been encapsulated in react Dom so that it can only be used on the web virtual Dom is not a concept that gets carried over to react native or react V because these are different environments they don't have the concept of do so react uses virtual D to improve performance as we've heard many times but the real question is how does it do it well react uses a virtual Dom as in to improve the performance so that the real Dom is updated only when it's needed and all the necessary updates and the transitions are made in the virtual Dom which is in memory and it's really fast this process of updating the real Dom from the virtual Dom is called reconciliation it's a concept that basically means that when we have done making changes with the react Dom we try and figure out what are the changes that need to be persisted to the actual Dom what is the current state of the actual Dom and how are we going to do those changes so for instance if I have three nodes in my actual Dom and three nodes in my virtual Dom and only one of those nodes in my virtual Dom change we'll go and look through all the Dom nodes that are available figure out what are the Dom notes that have changed and update those only so that we do the minimum work required for Dom that this is mainly because Dom is very expensive the document object model it has a lot of issues in it itself which is why we don't like to use Simple plain JavaScript because if we do use it then it's going to lead to a lot of problems in terms of performance and the performance issues really degrade the user experience which is why react is so popular because it takes care of managing the performance behind the scenes so we don't have to worry about how to manage the performance react will take care of all of that and the way it does it is using virtual Dom so you don't have to actually deal with the virtual Dom yourself react does it itself but this is a concept that is used throughout the react community and we have to understand what it actually means and how react does the actual performance optimization that it needs to and now that we have done that let's see what else we have to know now that we have taken a look at virual Tom next is we have to understand jsx jsx is the syntax extension that allows us to use reactjs much more declaratively and efficiently so under the hood react uses the create element method to create a new Dom node that need to to be attached to the nodes so react at the end of the day is creating Dom nodes but uh for us to tell react that we want to create a Dom note of this type we can use plain react which is which will involve us writing react. create element and inside the function will pass in three parameters and that is going to be really cumbersome the main reason why react was not really that popular at the beginning was because it was really really bubo so as you can see that it's very difficult to use especially when we have components nested into each other so this can make our code really unreadable so if you have react. create element calls going from start to end of your code it's going to make your code really unreadable it might be fine for smaller applications for smaller elements when you have only have three or four Dom nodes that you need to add and manipulate but it could be really really difficult for the other parts of the application when you have like multiple applications or multiple Dom nodes interacting with each other keeping the data in sync with the Dom nodes it could be really really problem Matic so to solve this in react we use a special syntax that syntax is called jsx so what jsx allows us to do is that It ultimately compiles to react. create element codes but it makes our code easier to read so underneath the hood once you've written your code in jsx you just run your application and jsx is compiler will take care of everything else it will take your code compile it to react. create element calls and it will be interpreted by the browser which in turn will use the react Library and build the downloads or so that you can build applications much more easily and much more effectively and you don't have to worry about making the calls that need to be made in order to create downloads now react does not mandate the use of jsx which is to say that react doesn't need you to use jsx you can reuse plain react in order to build your applications and if you choose to do so that's fine but do understand that once you use jsx it makes your code easier to read and understand and it is this the thus far the recommended way of doing it unless they come up with a new way but so far this is the recommended way mainly because it makes your code more readable more concise more understandable so because of these features that react jsx provides we use jsx throughout our react code most of the developers currently using react will use jsx as their primary syntax in case you wish to use some other syntax you're more than welcome to but jsx is by far the most popular way if you don't want to use jsx then you would have to use the plain react. create element calls which are going to make your code much more unreadable and really not that concise could be difficult to part through a large storm structure so that's all about jsx now let's see what else we have now let's take a look at props props is an important Concept in react it's one one of the two ways through which you can store data for a component so Props stands for properties props is the short form of properties and they are argu passed to a component by a parent component for it to use so one of the differences between the other ways of using uh internal data and props is that props is not internal this is data that is passed from a parent component so if I have a component that is rendering other components I can pass in some data for those components to render and that's how the data should flow from in a react T from a parent application from a parent component to child component and props allow us to do that props are read only and should not be modified by component on its own so if you have a component that has some data being passed into it bya props you should not modify it they can only be modified by the parent passing those props so if you are a parent component that are rendering a your child components and you're passing some data you have the ability to modify that data but the component that is receiving that data is props cannot change the data this is one of the concepts in react in which you cannot change the data that is being passed to you the reason for that is because if all the components that are being passed the data some components pass data Downstream so anywhere down the stream of some component ends up changing some data then it's very difficult to reason about and it's very difficult to debug so in order to overcome this these are the few guidelines that we have to follow in order to make better decisions about the code that we write and change in prompts from the parent component will leave the child components being updated and rendered to the dog so if you have a some data in your parent component since that is the only place that where you can change it and that is the only place where you're supposed to change it when you do change it it will lead to a reender which means updated data will be merged with the current representation in our Dom node and the reconciliation process will happen and anything that needs to be updated will be updated in the child components and nothing in the child components could actually change the props so that would not lead to a render so this is why when you get something from props make sure that you know how to change it and the only way to change it or the access to change these things or the code that needs to change it needs to exist in the parent component if for instance you have some uh reason to make your data be changed by your child components or you need some way to access the code that changes the props in your child components then you can pass in functions that do the same and we'll take a look at that in a moment so that's how you're supposed to do all right so now we done with props let's take a look at what else we have now we come to state state is the other way that we can change data in a component so Props were passed from parents to child component state is the internal data so if you have some component that needs to have data that's only localized to itself and the parent component doesn't know about it doesn't care about it and doesn't have access to it that's state so let's take a look at that state is similar to props but it is private and fully controlled by the components so if I have a component and it needs some internal data in order to display something that data is needs is something that needs to be stored as state if it's something that the component that is rendering the my component needs to be able to pass in for instance the color of the Border or something like that then that is something that needs to be turned as props but if it's something like a behavior when the person clicks on the button and I want it to be just one thing then I use state so this is where State and props come into play State holds data that is internal to the component that is required by the component and the parent components need not know about it the state is used by components to determine what it to display on the screen and has been managed by the component itself as other components do not have access to the state as we discussed earlier that once we're building a component we need to be able to understand that that component if it has a state that state is not visible to outside components that's it's state only so that could be passed down child components as props but still you are the one who is able to manage it you're the ones who are able to figure out how to manage the data and how to change the data the other components don't have access to it so that's why we use that so what exactly is child components and parent components we have all taken a look at that that's just the hierarchy and that's how we create components so in react a component State should not be changed directly it should be done via a special Setter method because react keeps track of the state so if you want to change the state you don't just go and Fiddle with the variables and mutate it which is to change it so if you have a state that's containing the name the currently locked in user if that needs to change then you want to just reassign the variable to the new name what you do is you call a special seter method depending on what kind of component it is usually the method is called set state so inside set State you pass in an object that object contains the key and the value key is the variable you want to change variable is the and the value is the value that you want to assign to it in react the state is kept as a JavaScript object so that's how you can do that in functional components which will take a look at in a moment we use Hooks and we'll also take a look at that in a moment so that is a little different from the set State function but the idea is the same you have a variable and you have a Setter function the function's only job is to set the data and let react know that something has changed reender the thing that needs to be updated or at least be aware the things have changed and but the next time you reenter make sure that you change these things so that's how State Works state are quite uh the opposite of props in the sense that you don't have to get it passed from parent components you derive the data yourself and you take care of the data itself so those are State and props now let's see what else we have now let's take a look at life cycle methods life cycle methods allow us to hook into important events in a react component life cycle let's take a look at what that means and how you can use it to your advantage react manages the life cycle of the components so tasks such as adding or removing the component from the Dom all of that is taken care of by react the you just need to declare the component and when the component is mounted when the component mounted basically means added to the Dom when the component is removed from the Dom all of that is taken care of by react now that presents some challenges to us because there are tasks as web developers that we need to perform when the components are being added and when they're being removed from the HTML page so some of these tasks may include catching some data and displaying it to the user so only after the component is displayed on the screen then do we want to update the data onto it it's not on the screen and we're updating the data we're wasting time also with that another issue is that event handling is something that we need to take care of if we are on a page where a component is mounted and it has an event handler attached to it once we move away from that component when that component is removed from the screen we need to disassociate those event handlers the reason being that that could cause a memory leak these are the kind of things that we need to be aware of when we're using react components and this is why life cycle methods are such important aspect there are many other things that you can do with life cycle methods but these are some of the things let's take a look at a few life cycle methods so to allow developers to execute code during these life cycles react provides them with life cycle methods which you can override so these are component did Mount component did update and component will unmount there are many other life cycle methods available and sadly we can't cover all of them but these are the most important ones so the component did Mount life cycle method it's something that you can override when you want to execute some code after a component is added to the to so you want to let's say you want to propagate an event that the component is available on the screen and so that other components can manipulate it uh it could also be that after the component component is mounted you want to make sure that it has a particular style you can only do that once it's been mounted whether or not it's being displayed that's a completely different thing now this is ideal for when data is fetched and we want to add it to the Dom so we have a component such as an unordered list and we have a lot of list items in our components and we want to add them to our unordered list that can only happen when the list is added so to do that what we do create list items we wait for the comp component mounted when the component does Mount we write the code in component did Mount which will get executed and that's the code that will add all the things into the components and our code will work just fine then comes component dat update this is a life cycle method that allows developers to execute code after a component gets updated so it's these components may get updated due to props or state change and if that's the case if the props of your component change you want to propagate those changes elsewhere depending on the props then you can use this this life cycle method you can also do this first date as well if you want to pass some data down child components as props you can use the state components or use State and that will work just fine as well and then comes component will unmount this is a life cycle method that gets executed before the component is going to be removed from the do so right before the component is going to be removed from the Dom if a developer wants to execute some code that can be run at that point specifically then VI use component will unot uh this is ideal for removing event listeners from components to stop memory leak if you have an event list attached to all the Dom noades of your component and that component is going to be removed you want to make sure that all of those event listeners are being removed as well so that your component don't leak things to memory and if we have removed it then the jascripts garbage collector will execute take everything away and we can move on and with a Cate of memory so with that we have come to the end of life cycle method let's see what else we have now let's take a look at components components are the building blocks of any react application we use components to encapsulate our UI logic of a particular element of our web page or web browsers uh front end and what we want is for those components to be reusable but what are they in react a UI is built using individual independent pieces called components these pieces are used to encapsulate logic markup and styles and then they could be reused into other places the user interface is built as a tree of components that are managed and converted into native Dom Elements by react so what react does is that it allows us to write components that can then be used by other components as well and for react Dom takes care of compare changing those components from react. create element calls to the native Dom elements that need to be displayed on the web page and all of that is taken care of by react so all we have to do is understand how to create components how to make data flow through our components and how we can use those components in order to work with our application uh internal data representation and all of that is then extremely useful so components allow us to build single reusable and isolated piece of UI which can be used to efficiently render the user interface if you have components then you can use those components use Simple components to build complicated user interfaces because if we have a form that needs to be displayed on the screen it is built up of very small component such as the text field a button to submit the data a button to uh reset the data inside the form and many other things so that's where you can use components components are really useful in that regard now in react there are two types of components which are created class components and function components so these have their own distinct advantages and disadvantages they have their own distinct reasons to be used and not to be used just take can understand what they are and how they compare against each other now let's take a look at class components class components is one of the way we can create components in react so class components are created by creating classes that we have seen in the previous module how to create classes in JavaScript using es6 syntax and those classes need to be extended using the react. component class so there's a class named component the react package and we need to extend that class and override its render method which we'll take a look at the class name will be the same as the name of the component so if you have created a class with the name of login component that is going to be the name of the component that is going to be rendered on the screen so a class component needs to override the render method using jsx to describe the markup of the component so if you have a component that has a form and you want to display that form you need to firstly create you need to use jsx syntax or you can use react. create element as well but jsx is the preferred way and and uh inside the render method that you are overriding from the react. component class we return the jsx that return jsx will then be compiled to react. create element which will then be converted into the real Dom by our react application so we don't have to do a lot here we just need to know how to write GSX and how to uh extend a class and create a component using that class that's the entire gist of what we have to learn now class components are still supported in react but it is preferable use functional components to react borderer plate code the reason why is because and we'll take a look at that but in essence it allows us to reduce boiler plate code and react class component has a few problems and we'll take a look at those uh in future but right now all we have to understand is that there are class components there are function components class components are still supported and there are reasons to use them but mostly it's preferred to use functional components and we'll take a look at that next so now let's take a look at functional components functional components are the second way that you can build a component in react JS or you can declare how a component is supposed to look and function so let's take a look at that in a functional component we create functions instead of a class so as you can see functions are something that are taken to that extreme in the react ecosystem when we create a functional component the reason why we use a function is going to be cleared out in a moment but since we don't have to use classes we don't need to use Constructors we don't need to use class properties and all of that it's simply a function it's going to be very easy for us to bu that function is supposed to return some jsx to describe the component markup that jsx may be lited with some function calls here and there which also can hook into the react ecosystem and allows us to describe what should happen now functional components take props as parameters and have state to keep track of the data to be displayed it's very similar to the class components but in class components we take props in the render function whereas here we just the component function takes in the prop props and we'll take a look at that that simplifies our code greatly we don't have to write a lot of this borderer plate code where we write the class then the class name then the extend keyword then react. component then create a Constructor and binding those functions and a lot of different tasks need to go right in order for us to create a class component and functional component is simply a function that can have state that can have props functional components can have a lot of different moving parts to them as well so in react functional components are given preferences as they are less bubos and more maintainable now the reason why functional component are given that preference to now and earlier class components were given this preferences because a new addition to the react ecosystem called hooks we will take a look at hooks uh in future but right now you need to understand that this change in the mental model is because we have introduced concept of hooks that allows functional components to have state in them and have life cycle methods in them two of the concepts that we have discussed earlier before that for functional components were limited to do were to just take in some props and return some GSX they were not allowed to have any internal data of themselves which was a bit difficult and a bit tricky to get around so we had to rely on class components but now since class components are not the only way you can do it it's much more easier for us to use function components with that we have come to the end of functional components let's take a look at what else we have just a quick info guys intellipath offers a fullstack developer course which enable you to learn learn textech from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course all right guys so now let's take a look at class versus functional components we have two ways of building components let's take a closer look as to when to use what are the criterias you need to consider in order to build class components or functional components so the first thing is backwards compatibility if you have a project in react that's using an older version of react and it's not been updated and there's a lot of code that you need to update then using functional components right at the beginning is going to be really tricky since class components have been supported since the beginning and are still supported in react functional components on the other hand were always supported in react but they could not hold any state until react version 16.8 so if you want to use functional components in previous versions of react you need to firstly make sure that functional components can be used the way you want them to use if you want some State then it's better that you don't if it's a really simple component that only needs props and displays the data and then that's it then you can use react quite easily with that how comes State and props so in class components for State we use set State function which is something that we get by extending the component in our class so we get react. component is extended in our class and now we get access to the set State function and for the props we use parameters passed to the render function so all of that is useful and all of that is easy to use but in function the fundamental difference is that in functional components we use the state use State hook so instead of us having to extend the class and then use this do set State all we have to do is use the use State function which is also called the use State hook and using the US St hook function we can create state which when changed will cause a render of the component this is how you can change the component in react by changing the state variables then comes life cycle methods life cycle methods are useful for class and function components both but the way you implement them is different so in class components you have defined methods that you need to override and that came with its own set of challenges for instance if you had a component that used the same code when the component is mounted and when the component is updated in situations like this you would have to use uh class component you would have to duplicate some code which was an issue in function components though you have other ways of doing this we have the use effect Hook and the use effect hook allows us to just Define this code and then we can Define the variables that the you the hook needs to watch and if those variables change then the effect needs to run again so that's how we do class components and function components we'll take a look at that in the demo as well and then comes verbosity which is one of the major drawbacks of class components class components are extremely verus there's a lot of B plate code that you need to get over in order to build anything useful this is why developers prefer uh using functional components but uh so many developers prefer using class components only when they are necessary so if there are certain functionalities that we want to build that is only available in class components then only we will use class components otherwise we end up using functional components and this is why we use functional components in react because they are not very verose so functional components are really concise hence they are the preferred way of building components and react applications instead of classes right so now let's take a look at what else we have now we have come to prop types let's take a look at what prop types are prop types allow us to define the shape of the props that our components are expected so since props are something that the parents can pass they can end up passing anything of any data type even if we are expecting an email to be of type string they could pass in a Boolean sying through and we would have to take care of whether or not the props are being passed correctly that could be a lot of issues so in situations like this prop types come to our prop types allow us to define the shape of our props and the types and the whether or not a prop is required to be passed in or not and with that we'll come to understand well how are we going to use those prop types so using prop types we can Define what is the data type of a particular prop if it's required if it's not required and many other things that we can do using prop types we can then understand how you can use we need to then Define the shape of our props different kinds of props prop this data type so if you're expecting a Boolean integer a number or whatever and then react CHS will take care of validating the props on its own it will throw a warning if the props are of incorrect shape and size and Incorrect and they're not following the standards that we have set and that will cause some issu so prop types are validated by react automatically all we have to do is Define the shape of the constraints so react will throw an error or a warning depending on what the prop types Library you're using is uh react has extracted the prop types into a separate Library so if you want to use prop types in react you have to import the that script or and then it will work and whether or not props are passed incorrectly or not is what's going to determine the throwing of wanding so we'll use prop types to figure out how to do that if we're not using prop types then we have to do the manual pluming of figuring out what the data type of a particular prop is whether it will passed or not whether it's undefined if it is is undefined then how we're going to use it so on and so forth so that's how we use prop types so now let's take a look at what else we have to do so now let's take a look at how we can create a react component take a look at how to create a react component without using jsx so the playe JavaScript syntax so let's take a look at that now let me just show you the setup that I have I have an index.html file it's empty it doesn't contain any code relating to displaying anything on the screen as you can see it there's nothing there let's just start writing Circle HTML react now I need main uh D tag with the ID of Main and I need these two scripts so let me just explain what the scripts are this is the react development version this is the react Dom development version if you're building for production you need to change this to production as you can but right now since we're building for development and we want to see the errors and Bing we want the development version now I'll just write the code needed for react in order to show our component so the component that we have is going to be called greeting I'm going to use a function to create the component right so for that I'll have to firstly write function we'll be using the simple JavaScript syntax in order to write code so we need to write greetings and this is going to return a react component so it's not taking any parameter return react do create e l e m n t react. create element inside it we need to pass three things firstly the kind of element we want we want an H1 do we want any attributes to attach to it no and what are each childrens we just want a text node which says H world right save it it's done now we need to render it to the nor so we need to use react n do R ND render we use the greeting function which in turn return the react component we want and we want to render it inside the element with the ID of app that is done I've saved everything refresh it and if I open it up inside the console as you can see that Target container is not a Dom element that's because not app it's Main and now it's done as you can see that it's also being shown in our console that download the react Dev tools for better experience right now we're not using um the create react app version which comes in with a local server we're just importing it in a file and using it from there on we can expand and if we're building applications that are much more complicated then we can set up create react applications and we'll take a look at that in future lessons the reason why we're not doing it is because that's going to be a little complicated and it takes time to set up any application that way so that's why we're not doing it that way but if you are doing it that way then you can take a look at reacts as well so we have done this if I go to my code this is what it looks like we have react development version we have the react Dom development version using react. Create element we create a H1 tag as you can see inside the div nothing there right now but if I open up my console go to elements and you can do it in your browser as well which dynamically added new data so that's how you can create an element in react all right now let's see what else with all right guys so now let's take a look at how we can create a react component using jsx so earlier we had taken a look at how to create a react component without jsx now let's see how easier the process is with GSX so again I have an index.html page no code to display anything on the page yet all I have is the previous setup now I need to just add these three scripts so earlier you remember I had two scripts right now I have three first is the reacts development version second is the react dong development version and third is the pable compiler this is what will compile our jsx code into our JavaScript code now for that we need to write the script now one thing you have to do when you're displaying using jsx is you have to describe the type of script text SLB this instructs the browser that whatever I'm about to write in here it's not just plain JavaScript it's something that needs to be compiled using bble and bble will take care of first of it bble is the compiler that will compile it from jsx to react. create element now all I have to do is create a component create a functional component because it's going to be easy I don't need any state right now and I will do the same thing as you can see it looks like I'm writing HTML but I'm not and now have to do react down render and here I have to render it as greeting as you can see again it's this is the name of my component greeting and I have to render it as if it's an HTML page or an HT HML component I can for instance instead of doing it this way I could have just done it this way this is how you open and close a tag in HTML same as you can do here but since I only want to render this component and there are no child components I can do a self closing tag so it opens and close in one tag only I don't need to create opening close opening tag and then a closing tag now I need to pass in document. get by ID and it's going to be me save it refresh it it'll take some time because it's downloading three giant files take a look at if we have gotten any errors we have not and we have a Hello World element as you can see here it is hello world and if I take a look at the code it's just three lines of code essentially it's just three lines not even three lines it's uh yeah it's just three lines three to four lines of codee and it's not really difficult to understand as well what we're doing we have a greeting component that needs to return this markup instead of us having to specify the H1 tag its attributes and childrens in three specific stages all we can do here is just write it as JS HTML it will get compiled to jsx jsx will compile it to Pure JavaScript and then all we have to do is say okay when you compile this whatever return you get whatever response you get returned display that with within this element which is this one that's how we do that now that we are clear on how to use jsx with react let's just recap what we have learned need a basic HTML page need somewhere to display our code if I didn't have D main I could have just written get element by get element by tag name and here I can just here I can just type in body zero and that will work just fine zero would mean because since we're getting a tag name and we could enter a tag says p and p can have many elements on the page such as a paragraph so we can do it that but that's not very useful so we have this this is the preferred way by the way to have a single div element that contains your entire application now we just after creating this we import all the required librar react react Dom P we describe to our script tag this is an important bit you should not forget this if I remove this and then I run this my browser will try and interpret it as plain JavaScript and will run into an error I refresh this and I see nothing on the screen yet and it it just runs and runs and I get an error it doesn't understand why do I have a less than symbol in my in my in my browser if I I change it and then if I refresh it works just right so you can you have to unfortunately do it this way here then we just describe a function that will return this you can also describe it as a class which will take a look at in a moment and then we can displ now that we have come to an end the uh jsx portion of our hands on let's take a look at what else we have now let's take a look at how we can pass props to our component we'll create a component and then we'll modify it Behavior by passing in some props so for that all we have to do is follow along with the previous handson I'll just show you so I have the same index. HTML page it has no cood to display anything on the page yet everything is just boilerplate HTML and we have a div tag with the ID of main we have the react development version we have the react Doms development version we have the bble compiler and we have a script tag that is going to contain some jsx code all I have to do now is create create a component that we had created earlier and it's going to have the same code but I'll show you what I have done differently this time so and the semicolon is not required in JavaScript but many developers like to write it so so do I so inside the reactor we now document do get element by ID this should all be familiar since we had done it earlier it's supposed to be remain so after I've saved it I'll refresh it it'll take some time because it's downloading these files and now we have it but let's say that I want to when I'm rendering it I want to change things a way I can do this is by changing it here so if I want to say hello John I can do hello John and if I want to say hello Jane I can do it this but that's really cumbersome I want this to be dynamic I want this to be able to be changed by the person who's rendering it so the way I can do it here is by accepting some props p o PS I can call it anything I want but I'd like to call it props here and now if I want to dynamically display anything inside my jsx code I have to wrap it inside a acly PR like this as you can see the syntax is changed props Dot and I will call it name I'll save it so just to recap all we have done is we have passed in some props I have hello and I want to uh display anything that has the that the value of and the name contains inside our props object so how do we pass in the value basically when we rendering the component all we have to do is pass in name to be equal to and it's supposed to be a string so let's I call it CH save it and a very hang on for a moment it's it's rendering everything just take a look at all of it since it's downloading the file and yeah com done so we have hello John but you might be wondering why do you have to use it I mean you could have just written hello John and uh save it go back refresh it and the answer is the same thing right what the reason for using it prop so the reason why is let me just show you because this makes a component Dynamic now our component is not just limited to Chan let's say that I have I want to have three components and I'm just going to create them here function demo and this is going to return a deal with greeting and whenever we're returning a component we can't return three components as we have a demo component that's returning our jsx Cod it's wrapped inside a deal so this should work okay we run into an error U that is because we have to pass in props do name and now as you can see we have hello John hello Jane hello Johnson now in case you want to use hello John hello Jane hello Johnson and you can even create more of these components by themselves right just as an HTML marker this is the power of props I'll just remove it and bring it back to the normal state with greeting name John and since it's working fine all I have to do now is just reload it again and see if it's working and it is so with that we come to the end of props understanding what props are and how to use them as you can see we did not change them anywhere in our code because that's not allowed now let's take a look at what else we have to do now we'll take a look at using state in a react application in react components state is local to a component so we don't need to pass it to a particular component and we'll take a look at how that works all right so let's take a look at that again we have our simple apps setup we have an index. HTML file displays nothing on the screen the code is quite simple as we had earlier that and now all I have to do is create some state right and since we're using a functional component I can just don't worry about the syntax right now we'll take a look at that in a moment just understand that this is how you define state and from here we have to just return an H1 tag name being printed and nothing more all I have to do now is render it to screen so greting we don't have to pass in the name all right so everything's done I open it up and if I refresh it again as you can see it's showing John which was the name and if you want to make it completely compliant to what we had earlier hello save it PR it as this now where does State matter here because we were clearly able to do it using props well sometimes what happens is we get some data not from we don't get the data from a from external services or external components we want to get it from our web server for instance if it's a user based application and we're logging in a user we want to display the username so for one instance let me just show you I'll just simulate a network call instead of getting a network call function get user info this will return a promise that results to username being CH and age being 28 right so now what I can do is at the beginning it's supposed to show nothing but but when I get get user info this will return a promise and I can use the then function to get the user and now all I have to do is set name to user dot okay as you can see we're not using age right now so we don't have to do that but we could very easily do it now if I refresh it again as you can see it says hello John now but this is something that we have gotten from an external component so if this is something that only my component needs and other components don't then this my component can get it from the users internet and make a request to a web server get the data part the response and then paste it onto the user screen using this sy so this is how we do this now that we have covered State as well let's see what else we have now let's take a look at how to create a class component so again we have our same setup we have index. HTML page it's not displaying anything and we have our code we have a d tag with the ID of main uh react react Dom and B so we're going to create a class component now for that let's take a look at the anatomy of how do you create a class component you start with the class keyword then the name the component earlier we would have for the as6 class syntax we would have to use function greeting and do a lot of complicated tasks or something as simpler as creating a class but now you can do it this way this will extend the react component class and as you can see that now we have to type in the Constructor function because we want some initial State and it takes in some props have to call the super function passing the props this is why the class components are not so preferred over functional components which will take a look at that in a moment but the reason why is because there's a lot of V plate code you have to write we have written 1 2 3 four lines of code for not any reason because these are not the kind of things that you would have to write they don't have anything pertaining to our business logic now let's set up a state this is something that we would have to do and I'll write a greting to be hello this is something that's going to be intern I can create a render function that R of function is going to return and again because it's a class I to this keyword greeting here I'll just get the name from props that's it so now if I want to see something happen I would have to render it to the page react down render greeting I have to pass in the name to be John document get element by ID save this press it and it displays everything but as you can see the just for a simple component like this that takes one bit of content from State other bit from prop and display it on the screen we have to write 1 2 3 4 5 6 7 8 nine lines of Code by creating one component it was n lines of code that doesn't have in much it needs something from the state something from the prop that needs to be displayed here that's basically all that needs to be done so that was an issue and so this is one of the issues with class component now let's take a look at what else we have all right guys so now we'll take a look at how to create function components earlier we taken a look at class components and we saw that although it was relatively easier to do creating class components but there are a lot of verbosity involved we had to write a lot of boiler plate code let's take a look at how function component can solve that so again the same setup we have an index. HTML file display nothing here's the code now we'll create the same component but here we'll be using function so as we know it was called greeting it will accept some props when we need a greeting and we need a function to set creating that needs to be something that we need to use using react use State inside it default value is going to be low and now all I have to do is return hement tag that prints out greting as well as name from the props yeah so finally now all we have to do is just react n do render passing greeting passing name pass in John as the name and document get element by ID the element is going to be me so now as we have this let's see if this actually work works so we refresh it and as you can see everything works correctly now the thing to notice is that we didn't have to write a lot of code even from a purely AE aesthetic point of view we only had to write three to four lines of code in order to create a component there we had nine lines of code and to be quite honest each line of code was really long we had to write how to get state for accessing the grating we had to write this state do grating for accessing name we had to write this. props do name and for small component it's fine but for larger components these things really do matter because you'll be writing thousands of component so you will have to write thousands of 10 thousands of more lines of code and that's really the kind of code that you're writing is something of problem because if you're writing more code that means more code that you need to maintain more code that you need to manage and more code that you need to keep in your mind in order to understand what's going on so this is why functional components are more preferred so let's take a look at what else we have okay now we'll take a look at prop types prop types is an external Library so we'll have firstly have to import it and then we'll have to make it use with reactjs let's see what the implications of using prop types are and how to use them so again the same code this time i' also like to open up my console as you can see nothing's being displayed right now you're using the bble transformer in development everything's fine so let's just take a look at that here's our code firstly I'll have to import prop types Library this is what the current version is you can import any other version and from here on I have to create components I create a creating component they'll just return hello in the props name so function greeting T props returns H1 tab which say hello and so that's done we render it to the Dom using react to document. get element for ID the ID that I want is in main the name going to be joh refresh this hello John is being displayed but there's an issue with this if I'm someone who has orted this into a library and another person wantses to use it they can do instead of John they can pass in five is a number and we want it to be a string it's going to display it nonetheless that's fine but still it's a problem also if I type in two true and then I refresh it nothing's going to be displayed because true and false are not something that is displayed in jsx so the user has the Liberty to passing in something that's completely useless for us so in order to prevent that or at least have the developers or people who use this component some idea whether or not they're doing things correctly or not we can prop types it's equals to and this is going to be an object that has the name of the prop which is the name and it is going to tell us that that inside it we want string and it is required now if I save it go back refresh it as you can see we're getting the warning failed prop type invalid prop name is of type Boolean supplied to greeting expected strength another thing is important that if the user doesn't pass in the prop which they are at the liberty of doing we will again an error and it will say failed prop type the prop name is marked as required in greting but its value is undefiled as you can see we have ways of now a lot more control over how our props are being passed into our components there other ways as well such as flu and typescript but they are a bit Advanced and for smaller applications prop types are great way they check our props at R time and they make us understand how we can use our props and how we can use props in other libraries if you don't find it then we have an a warning issued in our console so with that in mind let's see what else we can all right guys now let's take a look at problems with class components there are several issues with class components and that's what led to developers using function components with hooks hooks were there to provide function components the same capabilities that class components have so with that we will take a look at the problems that class components are so class components have several issues with them and we'll discuss them one by one first one is Constructor so when using class components that uses State we have to create a Constructor that that just isn't optional for us anymore we have to have a Constructor function and in that Constructor function there's another B of functionality that we need to add that is we have to call the super method and pass in the props that are passed into the Constructor issue with all of this is that although this is something that we would have to do in every classes this is something that takes up a lot of work we don't want to do all of these things specifically mainly because when we using Constructor functions when we're using class components we have to write this lot of boiler plate code which we don't intend to write at all and this leads to really clunky and messy code and a lot of and there needs to be a lot of word plate code for us to write then comes binding so if you ever worked with JavaScript event system the problem with event handling in classes is that when you have a class and you create an event handler function inside a class the value of this keyword inside the class changes and we'll take a look at that in the demo but the main problem with that is that if to solve this we would have to always after creating a function that's going to be used inside an event needs to be bound to the current class and we need to in the Constructor write this. method name equals to this. Method name. mind and in the brackets we have to typ in this that's really annoying and that's really comers we don't want to do that because that takes a lot of time that takes a lot of effort and that's not something that's necessary for us then comes sharing nonvisual logic so sharing nonvisual logic is one of the major reasons why we like to use react but the problem is that when we have non-visual logic we would have to use a lot of complicated patterns like higher order components or render props don't worry if you don't know about them it's just little difficult to get started with it it's going to be really difficult to understand what this means so because of this we have a lot of mental overhead in order to use components and finally there's duplicated life cycle logic so in life cycle methods if we have want to use the same code in different life cycle method what we would have to do is we would have to copy and paste the code mainly because this is how classes function you could extract it to a function but still you that function needs to be copied to multiple places and that leads to a lot of problems as well so with that we these are the kind of problems that we reach in class components specifically in the life cycle methods we would have to duplicate the C between different life cycle and that's one of the major reasons why react is not in react community life cycle methods and all of this is used using hooks because functions these problems are not there all right so now let's take a look at what else we have so what are react hooks well react hooks are used to create functional component uh create functional components with the same capabilities as class components as we have discussed class components have several disadvantages associated with them so we want to create functional components that can contradict those functions are quite simple quite straightforward and they have quickly become the preferred way that react developers like to build their components so let's take a look at some basic react hook we have use State use effect and use context let's take a look at them one by one so as you can see that these are the three cont these are the three react hooks that we'll be taking a look at they are many other react hooks that we can take a look at as well there are many that have been already created and many that are being added in the libraries that are already existing so you can take a look at those at your own time but these are the most common ones and others are built on top of the first one is U state so as the name suggest because in the class components we would have to create a state variable and use the U uh set State function to update the state in this case we can use the use State function and this will add some local state to our functional components uh how to use this I'll show you in the demo then comes use effect the use effect Hook is used to define code which is run either a components loads or when some State changes so if you have some component in which some State changes and you want some code to run whenever that happens and the component reenders then you can use the use effect hook it's very much like the um class components life cycle method however it has some added benefit and we'll take a look at then comes use context context is a way to share some data or some State among multiple child components without passing them through every child component now without using the use context hook in class components you would have to do a lot of complicated patterns like the render prop pattern but in our case we don't have to do that because use context allows us to just extract data out of a context quite easily so now let's take a look at a demo now in the demo we'll take a look at a few implementation of how we can create h now you can create this demo quite easily I will be using Code sandbox I'll just click on create a free sandbox it will open up a p page and it will show me all the templates that are available it's free so you don't really have to even create an account and login and sign up it's quite easy to use it's uh loading and when it loads it'll show me a few templates uh templates will tell us what kind of a Sandbox I want to create I want to create one for react but if you want to use angular view vanilla JS view 3 static HTML page preact typescript and there are other components as well but I want to use react so I will click on this and make sure you are choosing the template by code sandbox because let's the official template or you can create your own if you wish to in which you add your own libraries and all so this will create an anonymous sandbox because I have not loged in I not created any account you don't have to either in case you wish to do this in your own PC you can do that as well I just want to show you a working environment in which can be set up in second so this is what it looks like this is the starting code this is what we can see let's wait for a moment because it's initializing the JavaScript language features as you can see it's written here so this is what we have so right now we have everything we want let me just remove a few things app component not the app component but the yeah everything's now I will just remove this and this is what a class component look like had it been a functional component I would have to export default instead of being a function component I would have to use class instead of being app it would have this extens re do component so this is done now this has to be a function named render and what it does is that it returns some js t f you've been using react for a little bit of a time you know that this is how react works and now yeah so nothing is being shown here if I were to add a P tag which is a paragraph tag and this is by the way not HTML but jsx it will be converted into JavaScript and then run into the browser type in hello save it and one other thing that you have to do sometimes is call a Constructor function and to do that Constructor and call the super function and you can also pass in some props and you can pass in some props here as well in case you wish to or if you don't wish to you don't have to do that as well so that's how our class components work let's take a look at whether or not it's working export default class app and we import it here yeah so that's an issue classes may not have a field named Constructor so that is a problem that we have to solve and that's the Constructor function by default uh if you don't want to use this and you can simply just use the function component which we have created earlier now let's take a look at how hooks allow us to solve this and if we just yeah this is what it look like we are exporting a default function named f app and you can either choose to not rename it as well but you can name it if you wish to and this is what it looks like now if I want to add some state to it I have to use the use State hook uh it's quite simple I want to add some value to it so let's say a number and third number now I have to use react. use State it's a function I have to pass in some default value by default it's going to be zero and now I can use it let's just put it in an H1 and in react if you want to Output some data you do it this way and we have it here now how do you update the data or how do you update the state the way you would do that in normal JavaScript or in normal react is by using the use set State function that was on the class the to call this you would have to use the this dot set State function that would be really difficult so in order to overcome this in functions you don't have to use this keyword I'll just create a button and that button is supposed to add something so this will have an add button this will have a decrease decrement button and now what we want to do is want to add an event handler so when this button is clicked what I want to do is I want to call the set number function and this is going to take in in the current number and return a number that is current number plus one so if I click here as you can see it is incrementing one for me but if I want to change it a little bit I can do that as well instead of incrementing I can now decrement as well as you can see now I can change it so instead of using class components I can just do it this way and that works quite easily for me so that's the set State now you can also use the use effect function uh we'll take a look at that now so this is how you can create State let me just remove all of now if I want to use the state or use effect react do use effect this is how you do it uh let me just create some State as well so I can tell you how you can use second and set seconds is equals to react do use state in zero that's the default value and what I want to do is as the time progresses I want to just show the amount of seconds that have passed quite easy but in react it can be a little difficult so it takes in this now I want to use a function that is the default function called set timeout so firstly timer ID set time out and set interval there are two functions that can do this let's take a look at set interval first and it has two um things that it takes in the timer Handler and the time out so firstly I'll just take the timer Handler what it's supposed to do is that when it runs it's supposed to call the set seconds function and in increment the seconds by one and it's supposed to do this every 1,000 seconds and that's about it so when we call the set interval function it takes in a function and it takes in a Timeout and seem to have run into set is not defined oh yeah let me just type it again I think there has been some issue with the IDE but it's not to worry about it and if you run it now let's see what happen uh basically what we have done so far is we have created a function that is supposed to run it again and again and again on each second and as the second elapses it's supposed to in prevent the second and then it's supposed to make the changes so let's see if it works um to do that uh we firstly have to wait for a few seconds and then okay so it is being shown here I'm not seeing anything right now because I not create anything p and uh now all I have to do is show the seconds that's the first thing and the second thing I have to do is I have to return a function that will call another function called clear interval and will remove the timer ID so that is done let's take a look at any error that we might have it says that there is unterminated jsx content I think it's talking about earlier content so let us just rerun this sometimes the Cod andand box servers don't work as well so it will just reload in a moment and because we didn't have to do anything it works just fine so as you can see it is working now 7 8 9 so so all of this working now let's just explain what happened so we created an interval remove this one so we created an interval uh the reason why we use the use effect Hook is because we want to run it after the component is being displayed on the screen so with that we create a set interval hook or a set interval function which is available in JavaScript by default then what we do is for each 1,000 millisecond which is 1 second we increment seconds by one so we have one more second each time after doing that we return another function named clear interval what this does is that it allows react to know that when this component is being removed from the screen I want to clear the interval which basically means I want to remove this from the memory this function Handler and that avoids something called a memory leak uh whenever you are using react hooks you can pass it this and it'll work just fine another thing you can do is pass in an empty parameter like this uh this basically means that only run this when the component loads for the first time then when subsequent the component loads when the state changes don't run it again so if you had some data that you want uh this fun effect to be dependent upon which is if this effect should run when some data changes you can put it here and react will take care of uh keeping that in sync for you so that's how you can use uh the use effect hook as well there are several other hooks available such as use context use memo and many other now let's take a look at what is bootstrap if you've been doing web development for any amount of time bootstrap is definitely one of the things that you have come across so let's take a look at what that is the bootstrap is a styling library that allows developers to style their user interface components without writing too much CSS uh in case you are a developer or you wish to be a software engineer that writes front end code then bootstrap is a useful tool especially in the prototyping stage when you're building a user interface for a specific application and you want it to look a little more than just blind HTML what bootstrap does is that it allows you to use its already existing Styles and you can just show it to the developers and they can take a look at the user interface and uh you can just use those user interfaces for yourself now these user interface components can be used in react angular plain HTML there's no need for you to use them just in react but the point here is that it allows you to build UI components that look good quite quickly instead of you having to hand roll the CSS yourself you can just use bootstrap stuff let's take a look at some of the advantages that bootstrap provides so there are several advantages the first one being that it's cross browser bootstrap is cross cross browser which basically means that since styling is the one of the most important aspects of an front end application and the major hiccup that comes when we're styling is that we have to take care of several browsers browser versions and which one of those versions support the features that we are trying to use in our code for instance Internet Explorer might not support box Shadows while Chrome might so these different need to be accounted for when you're building your own user interface and when you're using a library you want it to be performant on at least the latest versions of all these browsers and uh bootstrap delivers on that promise it has a really good support for all the browsers it allows us to make sure that even if we Implement our user interface using bootstrap majority of it will be displayed on the screen and none of it will look inconsistent from One browser to the other other if you're using angle if you're using Internet Explorer we using Safari we using Chrome everything will look just the same then comes lightweight so when we including a new library or new uh framework in our application we are introducing some size or some sizable amount of code to be sent over the wire where on an HTTP connection if we are trying to serve our application in uh regions where the internet connection is slow then this could be a problem although bootstrap takes care of this problem for us by being lightweight bootstrap doesn't take a lot of time it doesn't take a lot of memory as well it's only a few kilobytes that needs to be transferred over the Internet especially if it's G then you can just use it easily bootstrap also allows us to customize our own version of bootstrap so that we only take in the component we need and we can take a look at that in a moment but that's really an important feature especially when we're trying to learn new technologies then comes responsiveness so responsiveness basically means that styles are responsive which basically means that if you were to shrink your browser size that things are fluid and they adapt to the currently available size instead of just being cut off with an ugly scroll bar showing up so react uh and bootstrap does that for us automatically it is responsive by default and we can customize the responsiveness by providing uh classes bootstrap classes into our HTML code and we'll take a look at that as well and then finally documentation documentation is an important aspect of a web application uh we want to use documentation for developers to get started with it or you can learn more about it about the technology so in case new versions come along and you want to explore the new features that have been introduced uh as a developer all you would have to do is to open up the documentation and look at how things are structured how you can use the new code to use to build your own features so finally we have come to the Hands-On aspect of presentation so let's take a look at that before we go to the handson this is the bootstrap documentation site you can go to get bootstrap.css about uh bootstrap and new technologies that are relating to bootstrap what you can do is you can just go to the homepage go to documentation and you can go down and you can see all the Technologies all everything and if you want to learn about specific concept such as layout grid layouts and utilities for layouts if you want to take a look at other components you can take a look at the code images if you want to learn how to build a card Carousel or form you can just click on one of these it will open up another thing that's great about bootstrap is that it provides these things called um scroll spice so if you want to scroll to Auto sizing just click on this and it'll take you to that piece of code and it'll explain how this is working uh if you want to take a look at other forms such as form control you can take a look at it here it really doesn't matter it will take care of it entirely for you uh also you can take a look at input groups you can take a look with jumbotrons there are a lot of components that forms provide us with so uh in case we want to get started with it first things first we have to uh get some link to bootstrap and again for that you just have to click on get started the first link here is the only link we need it's the bootstrap.min.css you can download it and install it on your own system but uh we don't have to do that because we just want to use it once also if you want to use it it with react CHS you can use this it's called code box code sand box click on the create sandbox uh feature or button uh in case you're trying to follow along just use code sandbox because you don't have to install anything there uh and just click on react it'll open up in a few moment and it'll show us the uh output and this is what it looks like this is the default code you can change it whenever you wish to so that's the default code for code sand uh and there's another project called react bootstrap when you click on get started this basically is a library that has bootstrap integrated with react component so basically you can just import a component and use it so for instance if I wanted to create a Jumbotron instead of me having to write all the HTML code all I could do is import Jumbotron and just type Jumbotron in my code and it will work so if you are willing to not learn bootstrap from its scratch and you know bootstrap and you just want a library that does it entirely for you you can use thex bootstrap so that's one way to get started but uh what if you want to build everything uh in react JS and bootstrap from scratch well there are ways of doing that and we'll just take a look at those right now but uh for that firstly you would have to have npm installed npm stands for node package manager and you need also need to have uh uh after nodejs you need to have reactjs installed on your system which is create react app uh let me just show you how you can do that make sure that you have reactjs installed or bootstrap in uh nodejs install like like typing node Das Das version and it gives you a version that's at least this one then it'll it will be fine now let's take a look at how you can create a react application do that just type npx create react app and here you can type the name of your application if I want to create an application that says react bootstrap then I can just call react Das Boot strap and press enter now I already have it done in fact I'm in the same folder so I just like to show you that uh once I'm done this is the folder structure it comes with a lot of files in the source folder I have removed all of those and just kept the app and index file now if I run this npm run is the command that will run a react application uh n okay so it's saying npm start should be the one I can just type this and this will work as well if you want to run tests you can run uh npm run test and it will work that way as well so we are incrementing and this is what it's showing right now our code is running this is the user this is the command line interface that is being shown we have a local local network server that is Local Host colon 3000 and now what we have to do is I have opened up the code in my browser and my code redor as well so now if I want to make any changes let's say I make a change by typing in H1 tag in the H1 tag I say hello I save it go back and this will be reloaded automatically I didn't have to reload it at all so as you can see that this makes our development quite easy so now let's start by creating a form using bootstrap and react all I will do is I'll create a folder I'll call it components press enter then I'll create a new file I'll call it form. JS and uh you can call it form. jsx it really doesn't matter but I like to call it form. JS or or jsx so now we need to create a component uh before that I'll just like to use it here and to do that all I have to do is use the form component by typing in form and now I need to import it and for importing it all I have to do is type the import form from and I have to type the word form correctly and I'm using components slash form and we're done so now I have to return a jsx code firstly in the form I have to import theact now that that is done all I have to do is export a by default a function I can give it a name but I don't really have to do that and now all I have to do is I have to return some jsx code uh in case this doesn't make much sense to you stick with us till the end and we'll show you how you can learn these things but by default what we're trying to do is we have created a jsx code and now we're trying to create a form creating a form is quite easy we just use the basic HTML commands and now I'll create a div tag this is where our bootstrap code comes into play the bootstrap basically works with classes if you take a look at the documentation they will have code that has the word class in them but if we take a look at react it allows us to use the keyword class name instead of class this is because we are using in even if it looks like we're writing HTML code we are writing JavaScript tool and in JavaScript class is a keyword that actually means something so to avoid the confusion we have a key we have a prop named class name which when converted to HTML will be converted to class so if you want to apply a class here we have to apply a class known Home Group g r o u p so this makes bootstrap app available to our user interfaces and tells us how the user interface should look like by default it's not going to look like look anything like a bootstrap form because we have not included bootstrap in our project yet but I'd like to show you how to do that in a moment firstly I have created the form group now I need to create a label and an input the label is there for uh and we use the HTML 4 in order to make it accessible let's go going to be for an email field I'm basically creating an HTML login form and now email address so I want the user to enter the email address here and this will be inputed in an input of type email and the ID of email because this is what the Four tag is going to look at then we want to use a class of form control as well and class name is going to be the one that we are using form control and if you want to add more attributes you can but here we don't really have to and uh finally we can add a another text that tells us uh something more about our form but we don't have to so if I save this if I go back to my code this is what it looks like now this does not look very pretty neither does it look anything like what we have seen in bootstrap the reason why is because we have not added bootstrap in our code yet so all we can do here is just copy this code which tells us how to use it copy and paste the Styles sheet link into the head of our uh code before all of your CSS loads so when you're using bootstrap you go to the public folder index.html paste it here right before title save it now if I go back now as you can see this looks much nicer however it looks very contrived and we'll just take a look at how to solve that in a moment but before let's just build our component so the first form is done second I'm just going to steal it from here and here I want a password password type is going to be password if I save this what you will see is it's the exact same thing now comes the interesting bit now after I've done that I can also create a check box a kind of chck box that you would see when you are working on a form that tells you that allow it to Lo allow it to remember you for a long time so here I have to again use a class name I'll call it form group and it also needs another HTML type form group form check and that's done so that's how the our form is supposed to look like we have we have a form group we have a form check and now we need an input and we can also have a label first let's create an input the input will be there so that the user can tell us what they would like to uh be the value of this input so check boox is there then we have class name class name is equal to and it's going to be equal to form check input and these are all the things that you can take a look at the documentation for in order to get a greater idea of what it actually is also you can create an ID for checkbox because we are going to put this in our label now the label is going to be for checkbox and what I want the label to say is remember me and also you can add a class here so that bootstrap can style it and the class is supposed to be form chech label this is done as well and now finally fin we need to have a button now the button doesn't need any div to wrap it all we need is a button that can say a lot of things but all we want is it for it to be of type submit and we can call it login and it needs to have a class now the class is going to be for us it's going to be BTN BTN primary the primary uh is what's going to find its color and now all we have to do is save this if I go back this is what our code looks like this looks like a typical input button and as you can see when I click on the labels my inputs get to be uh active I think the password one I made it incorrect let me just see if I go to password firstly I have misspelled it now it should work so if I click on the password label it uh activates my uh input but as you can see it's very uh stretched out again bootstrap provides us with styling that allows us to deal with this go to my div outside my form component and I have to add a class name this will be called container when I put container here as you can see everything squishes in between now this does not mean that I have to only use bootstrap Styles I can add my own Styles as I'll show you here so all I have to do is use style and I want the max width to be 500 pixels save this go back and as you can see it squished down now if I want to reduce this even further I can just type padding and make it be equal to 50 pixels save this go back again and as you can see now it looks like an actual login form I can put in some HTML remember me and I click on login and it will submit but since it's not an HT email ID click on login and since it can't submit anywhere it just submits it to itself and we have our code so this is what it looks like uh this is what bootstrap looks like in case you are wondering how did I got those Styles you can take a look at the a documentation uh you can take a look at the kind of form that we built it's something that's exactly like we built here you can take a look at the code if you want to take a look at individual components you can such as checkboxes are here you can click here and take a look at the check boxes how they are built what are the classes that we need there what these classes do everything is displayed here so you can use them with to your own Advantage now in case you have learned these things uh these are the technology that you can use uh you can use code sandbox to build your build your form components uh you can use reactjs to build your user interface and you can use bootstrap to provide it with styling first technology types so angular is full-fledged MVC framework which is written in JavaScript whereas reactjs is nothing but a JavaScript library right and guys second parameter is that angularjs was developed by Google in 2010 and in 2016 angular team created angularjs 2 which was pure copy of angularjs and it was actually a completed new framework so in order to avoid the confusion from previous version the angular team decided to remove Js from the original name and since then this new framework is known as angular and in case of reactjs it was developed by Facebook in 2013 and since then it has been used as it is and of course with some changes and updates made regularly now the third parameter that we have is language used in angular typescript consisting JavaScript plus HTML is used whereas reactjs uses JavaScript plus jsx where jsx is nothing but an XML or HTML like syntax used by react which extends ecma script so that XML or HTML like text can coexist with the JavaScript or react code right now the fourth parameter that we have is debugging and testing in angular the testing and debugging for a complete project is possible via a single tool but in case of reactjs it requires a set of tools in order to perform different types of testings now the fifth parameter which is data binding in angular two-way data binding method is followed so it helps us to ensure that model State automatically changes if any change is made whereas react allows one-way data binding that means the user interface elements can't be changed without updating the corresponding model State sixth parameter is the version so guys the latest stable version in angular is 7.2.0 since react always keeps on updating and making Chang changes so the latest stable version in react is react 16.70% is required whereas react is easy to grasp how did I conclude this that we'll discuss in this session as we move forward all right guys so now let us discuss about the pros and cons of using both of these Technologies first and foremost pros of using angular so guys code written in this is comparatively cleaner and structured right it offers higher performance and error is handled in a better manner it has material design like interface angular framework takes cares of routing that means if you want to move move from one view to another it will be easier and in case of cons of using angular if you're a beginner then angular features can be difficult and confusing for you and angular sometime become slow with Pages EMB bearing interactive elements if you want to integrate angular with third party then it'll be really difficult and if you want to switch from older versions to the newer ones then you may face several difficulties or issues right so moving forward to our next point that is pros of using reactjs as well as cons right first discussing Pros it has better user experience it is easy to launch and has faster development if you're using reactjs then it'll be a lot more timesaver than angular it has code stability and one directional data binding it also allows you to use thirdparty libraries right now let us discuss cons of using react.js so if you want to integrate react in traditional MVC framework like rail then it needs complex configuration and setup and the Reax users would be expected to have in-depth knowledge with respect to the integration of user interface into MVC framework so guys as we discussed previously now let us understand the learning curve or in other words the difficulty level of learning angular and react CHS so guys learning curve or difficulty level of learning plays a very important role when it comes to choosing a new or a training technology so let me tell you if you're a beginner and want to learn angular then it will need a lot of efforts as angular is a full-fledged framework so guys if you're looking for making a project or an application there is certain things you need to learn you need to go through typescript thoroughly with all the concepts clear right and MVC model view controller framework you need to have a grasp over it right and other Concepts like directives modules decorators Services components dependency injection pipe templates and lot more right another important thing is that it has very strict coding structure but if you want to enter into angular's World then you have to learn a lot of many things and the entry barrier is clearly higher in this compared to reactjs on the other side reactjs is just a JavaScript library and so it has lesser Concepts to learn in the comparison of angular you don't need to be a programming expert in order to learn react JS it uses JavaScript XML that is jsx right jsx is nothing but a way of writing HTML into JavaScript as I discussed earlier right so you just need to know certain things to learn react I'll name a few of them that is the syntax of jsx how to write the components how to manage internal state routing props of configuration State management using Redux and so on code written in reactjs are simpler and easy to understand you don't have to learn any Loops or new logical structures in it as it's a plain JavaScript another important difference is react provides flexibility and options to the developers to do the same task in different manner but it definitely does not mean that react is better than angular right now moving on to another factor which is popularity and growth of angular versus react chairs so guys before you go to the libraries of framework to use it is really important to have a look at its popularity and growth popularity of a technology is directly proportional to the job opportunities isn't it simply put in most of the cases for more popular or trending technology you can find more job demands for better understanding let us have a look at this data on our screen so guys if You observe here you can see the significance difference react obviously has more than double the amount of GitHub contributors and stars as compared to angular another important factor you should consider is what Google trend search hit says that about the popularity of these two as per the downloads and the visitors currently react has around 10,000 more downloads than angular so according to the above metrics it is crystal clear that react is more popular than angular right now as we proceed forward let us see where these Technologies are used or the companies using them so highs scale companies are using both react and angular I'll list down some of the biggest brands and companies in the world that are using them for angular Google Nike Sony fors Journal Motors upworks HBO and the list goes on right in the case of react you can see that Facebook Airbnb Instagram WhatsApp Netflix Dropbox Uber again the list goes on you must have observed by now that working in these two technologies is not at all a cup of tea right so now we have the Mobile Solutions offered by both angular and reactjs so guys both angular and react can be used for creating mobile applications and in order to develop the hybrid mobile application in angular ionic framework is used and ionic uses a codova container which is incorporated with angular ionic provides a robust UI component library that is easy to set up and develop the hybrid mobile applications hence if you see the created applications on any Gadget it seems like a web app inside a local web application holder right so the apps can be quite slower in reactjs react native platform is used for creating native mobile applications cnx used in react react native is slightly different from ionic synx react native produces a local user interface which allows its developers to make their own parts or components and tie them to the local code which can be written in cotland Java or Swift Etc as we move further let us discuss about the next factor which is testing tools and their usage in angular and react chairs right guys so in angular Jasmine and karmma Etc are the testing framework which can be used and in angular I a single tool can be used for testing and debugging the complete project hence the output is very difficult to read in such scenarios whereas Facebook uses just tool to test its react code right one additional benefit to use this tool is it does not require any configuration to use and it is included in every react project just also contains powerful mocking Library most of the times just is used in combination with enzyme which is a JavaScript testing utility also used in Airbnb so in reactjs set of of tools are used for performing different set of testing now let's move forward and discuss about their code style and syntax in react code is written using jsx plus JavaScript in most cases jsx just looks like the HTML let's have a look at the code from testing program. jsx where we are returning div right and it is a simple hello world program note that react has some different kinds of components but here we have started with react. component subclasses or child class so guys that's how our react code looks like looks easy right so now in angular you can write a hello world program like you can see that testing program. JS file right so guys as You observe here the code to write a simple hello world is little complex than our reacts code right in case of angular isn't it so syntax of angular is quite lengthy as compared to reactjs isn't it now as we have discussed about their difficulty level just a quick info guys intellipath offers a full stch developer course which enable you to learn text from both frontend and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course so let us Begin by taking a look at fullstack developer beginner interview questions first what is the use of a namespace in web development a namespace is a single global object that contains methods properties and other objects it adds ease of use via modularity thereby providing users with with the ability to reuse the code and avoid naming conflicts second question what are the latest trends in full stack development candidates interested in fullstack development should be aware of the following Trends according to Industry experts increase use of Frameworks and libraries such as reactjs and vue.js as well as Progressive apps realtime web apps and mobile web development JavaScript enhancements are beneficial to programmers finally the development of a more compatible extension third question is it possible to reduce the lad time of a web application using image optimization keep JavaScript and CSS in external files reducing redirects load CSS and JavaScript files asynchronously can reduce the low time of a web page let's move to the fourth question what is the use of course course is an acronym that stands for cross origin resource sharing it is a mechanism M that allows multiple resources to be requested at the same time from a domain other than the current request domain fifth question explain pair programming pair programming is the practice of having two programmers share a single workstation formally the code is written by one programmer known as the driver at the keyboard the other programmer is the Navigator who looks over each line of code spell checks it and proofreads it in addition programmers will switch roles every few minutes and vice versa sixth question what is long polling long polling is a web development pattern that is used to improve data push from the server to the client the client requests information from the server using a long polling pattern instead of sending an empty resource if the server does not have any information about the client the server holds the request and waits for some information to become available let's move on to the seventh question how is graphql different from rest the primary distinction between rest and graphql is that graphql does not work with dedicated resources instead everything is viewed as a graph which is connected and can be queried to meet the needs of the app eighth question what is a restful API rest stands for representational State transfer it is a compositional style used to create web services it accesses and uses the information via HTTP solicitation we can create update read and delete data a sites API is the code that allows two programming projects to communicate with one another it enables us to write mentioning administrations from a running framework or another application ninth question how is multi threading used the primary goal of multi-threading is to provide multiple threads of execution concurrently in order to Max maximize CPU utilization it enables multiple threats to exist within the context of a process allowing them to execute independently while sharing process resources 10th question explain inversion of control it is a design control used to invert different kinds of controls in object-oriented design to achieve loose coupling controls refer to any additional responsibilities a class has in addition to its primary responsibility control over the flow of an application as well as control over the flow of an object creation or dependent object creation and binding are examples of this so now let us look at full stack developer intermediate interview questions first what do you mean by data attributes data attributes are used to store application or page specific data they enable us to store additional data on standard semantic HTML elements the save data can be used used to enhance the user experience on the JavaScript page a data attribute is made up of two parts there must be at least one character after the prefix data and no uppercase letters and a string value can be used as an attribute so let us move on to the second question explain the distinction between blue green deployment and rolling deployment blue green deployment strategy this deployment strategy creates two distinct infrastructure environments blue and green a blue environment contains older code whereas a green environment contains most of the upto-date code at any given time there is only one live production environment whereas in Rolling deployment methodology this deployment strategy completely replaces old versions of an application with new versions by completely replacing the infrastructure on which they run the third question how do you protect against screen scraping a simple and effective technique is to use JavaScript to set a cookie value that is checked by the web server captures are also an effective method of preventing scraping if an IP sends too many requests captures can be presented to the end user to validate human interaction fourth question which Technologies and languages would you need to develop a project from scratch so this is a hypothetical question designed to help you understand how the hiring manager will evaluate your Readiness to start the job it is a simple method for distinguishing between a good full stack developer and a novice therefore it is important that you choose your answer accordingly fifth question explain mean stack mean mongodb Express angular and node is a well-known set of software development tools for breaking down language barriers a mean stack is built on mongodb and a nosql data storage text the express and angular HTTP servers are used to build the JavaScript front end the stacks STP tier is note which is used for the server side programming next question explain event Loop in nodejs a synchronous programming is possible in JavaScript thanks to the event Loop every operation in Gs occurs on a single thread but we can create the illusion of multi-threading by using smart data structures any sync work is handled by a queue and listener in the event Loop when an async function or an input output function needs to be executed the main thread relays it to another thread allowing the V8 that is the JavaScript engine to continue processing or running its code there are various phases in the event Loop such as spending call backs closing call backs timers idle or preparing polling and checking with different fif cues which is first and first out cues next question what is a connection leak in Java and how can we fix it so a connection leak in Java is defined as a situation in which the developer forgets to close the jdbc connection when using a connection pool the most common type of connection leak is encountered in Java development we can resolve it by disconnecting the connection and paying close attention to the error handling code next question what is dependency injection dependency injection is a design pattern used to execute ioc object injection and object connection are handled by the container rather than the object itself there are three types of classes involved first client class it depends on the service class next service class it provides service to the client class finally injector class it injects service class objects into the client class ninth question what are the two phases committed in the database explain so the two-phase commit to PC is a feature of transaction processing systems that allows databases to revert to their pre-transaction state in the event of an error condition the two-phase commit strategy is intended to ensure that either all or none of the databases are updated as a result the databases remain in the sync 10th question what is closure Give an example so closures are made whenever a variable that is defined external to the current extension is reached from within some inward degree it grants you access to an external functions degree through an internal capacity closures are created in JavaScript whenever a capacity is created to use a conclusion simply characterize and uncover a function within another function now we take a look at full step developer Advanced interview questions first what is the difference between event bubbling and capturing in JavaScript in JavaScript event flow refers to the propagation of events within the Dom that is the document object model the event flow specifies the order or sequence in which an event is received by a specific web page as a result event flow in Gs is determined by the following factors first event bubbling an event is captured and handled by the innermost element first and then propagates to the outermost element and in event capturing the event is captured and handled by the outermost element first and then propagates to the innermost element the second question what do you mean by temporal Death Zone in es6 so the variable declarations were only possible before es6 using V keyword we now have let and cons to6 let and cons declarations are both blog scoped which means they can be only accessed within the quotation marks that surrounds them where on the other hand does not have this restriction unlike where which can be accessed before its declaration the let and const variables cannot be accessed until they are initialized with a value the time elapsed between the Declaration of let or const variables and their initialization is referred towards the temporal Dead Zone let's move on to the third question do you know how to prevent a bot from scraping your publicly accessible API it is technically impossible to completely prevent data scraping as long as the data within the API is accessible to the public however bought activity can be reduced by throttling or rare limiting rare limiting can prevent a specific device from making an unlimited number of requests within a speci specified time frame a 429 too many attempts HTTP error is thrown if too many requests are made beyond the defined limit fourth question what is callback Hill and how to fix it many full stack developer interview questions are all about explaining certain technical terms callback hell is a JavaScript phenomenon in which the developer attempts to implement multiple asynchronous operations concurrently the nesting of callback functions to produce difficult to read error prone and difficult to manage code we can efficiently resolve it by employing the following methods first dividing large functions into smaller ones then use promises and finally use either a sync or weight next question what are the types of design patterns a design pattern in general is a repeatable solution to common problems in software design these patterns demonstrate the interactions and relationships that exist between classes and objects design patterns are classified into three types first creational these are about the creation of objects or the instantiation of classes these patterns are further subdivided into object creational patterns and class creational patterns next structural these are concerned with organizing various classes and objects in order to form large functionality and provide new functionality finally behavioral these are concerned with identifying common communication patterns amongst objects sixth question what are the advantages of using a Content delivery Network in jQuery CDN are widely used in jQuery because they provide numerous benefits to the users the server's load is significantly reduced as a result of CDN they result in significant bandwidth savings jQuery Frameworks load faster due to optimizations and finally CDN have caching capabilities which contributes to faster load times next question what are the types of CDN supported in jQuery so there are two widely used CDN with jQuery first one Microsoft it is used to load from jQuery ajax CDN then Google it is used to load jQuery from the Google libraries API eighth question give an example of a project you have worked on and the technology is involved how did you make these choices so this allows you to understand the full stack web developers methodology as well as a sharpness and Precision in selecting the right tool set when discussing why you chose a specific tool set you should be as specific as possible and go into detail demonstrate your ability to develop both the front end and back end of a web application ninth question what do you think of AMD versus commonjs so both are methods for implementing a module system which was not native to JavaScript until es 2015 AMD that is a synchronous module definition is obviously asynchronous whereas common GS is synchronous commonjs is geared towards backend development whereas AMD with its support for asynchronous module loading is geared towards browsers most people would find AMD syntax quite boring whereas commonjs is more akin to how you would write import statements in other languages most of the time AMD is unnecessary because if you served all your JavaScript in a single concatenated bundle file you wouldn't get the async loading properties furthermore commonjs syntax is more similar to the node style of module writing and there is less context switching overhead when switching between client side and server side JavaScript development the last question what was your best implementation or debugging in the past the hiring manager will gain an understanding of the type of complexity of previous projects you have completed by asking this question you should describe the difficulties you encountered and the steps you took to overcome them you can also discuss the lessons you learned from the situ situation just a quick info guys intellipath offers a fulltech developer course which enable you to learn texte from both frontend and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodejs and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course