Build A Scorekeeper Using JavaScript | DOM Manipulation Tutorial | JavaScript | Edureka Rewind

Key Takeaways

hi folks my name is Arya and today we're going to learn the basics of document object model manipulation using JavaScript so the document object model or Dom is a programming API for web pages it defines the logical structure of the web document and the way a web page is accessed and manipulated and JavaScript has become a new universal language for Dom manipulation now before we move ahead let me give you guys a sneak peek into the topics that I intend to discuss with you guys today so firstly we're going to see what HTML is because it is the language that makes the structure of the whole Dom and then we're going to learn about something interesting called the HTML tree then we're going to briefly discuss CSS and selectors and then finally move on to JavaScript and the functions that I used to select and modify queries in the end we're going to code a scorekeeper using HTML CSS and simple JavaScript and it's going to look something like this so we're going to have a basic web page that helps us keep track of a score of two teams so suppose you were watching a football match with your friends and you want to keep track of the score and suppose you also kept a limit that whichever team reaches five goals first is the winner so you could say player one reaches four goals and then player five reaches five player one reaches five goals so player one score becomes green and it shows that the is player one you can also set this to be any value that you want and we'll work on this later on so now let's begin with HTML so HTML is a computer language devic to allow website creation these websites can be viewed by anyone else connected to the internet it is relatively easy to learn with the basics being accessible to most people in one sitting and is also quite powerful in what it allows you to create it is constantly undergoing revision and evolution to meet the demands and requirements ments of the growing internet audience under the directions of the worldwide Web Consortium or w3c which is the organization charged with designing and maintaining the language now the definition of HTML is hypertext markup language hypertext is a method by which you move around the web that is by clicking on special text called hyperlinks which bring you to the next page now the fact that it is hyper just means it is not linear that is you can go to any place on the internet whenever you want by clicking on links there is no set order to do things in now markup is what HTML tags do to the text inside them they mark it as a certain type of text that is supposed like ital siiz text for example and HTML is a language as it has a coded word and syntax like any other language out there okay so now let's look at this interesting thing called an HTML tree now when your browser receives an HTML document it renders it as a tree of all the elements with the root element being the document object to which all the tags of HTML belong we won't be going into tags and their users as you could very easily look up our HTML tutorial for that now the important thing to understand here is that the HTML tags are rendered in the order they are written keeping their scope and indentation in mind anything indented under the scope of a tag becomes a child to that elements node in the tree and the attributes of tags are also Tre to as children now does html alone make up web pages well of course not we have CSS and JavaScript too but what HTML does is build the basic structure of the view aspect of the web page it's just the bare minimum using an analogy one could say that if you were to put a web page under an x-ray machine what you would see is the HTML which is basically making it the skeleton of the web page okay now that we know how HTML fits into the big picture let's go and create the HTML for our very own scorekeeper now I'm going to be using Sublime Text as my text editor and you can use any text editor that you want to actually you can use stuff like atom or Microsoft Visual code now that's not important so let's get on down to the codee aspect now we'll start off by creating the basic boiler plate for any HTML document now in Sublime you can just go HTML and press Tab and that'll just create your HTML B plate so we're going to call our scorekeeper let's call it scorekeeper now the head has been created so let's get into the body part now let's see so first of all this looks like an H1 that we have out here so obviously we going to need an H1 that says my score keeper so we go one and my score keeper now we also see that it's bolded out here instead of text like this which is just normal so we obviously have to get it bold so for that we're going to use the strong tag or you could also use the B tag but strong tags is what I normally go with okay so now that's done so next it says score and it's going to take the score of the first player and the second player so we could let's say handle it in a certain way so first let's say it's an H3 and you going have the big tag so it's going to say score let's give a space out here now these are two different parts if you guys notice that this is one thing that gets updated separately and this is another part that gets updated separately so it's only natural that we should be giving them under separate tags so let's get a span so this La a span and let's say it has the ID of score one I'll get into IDs just in a bit and you'll understand what I'm doing out here and let's say we close the span and it says two out here and the second span so let's say zero and it's going to have an ID of score two now what we need next are three buttons so we are going to use a button tag for this thing so let's create three buttons first so so this is a button that you're going to click to submit so let me just clear it reset this thing and so yeah so that's a submit button so this type is going to be submit and it's going to be let's call it what's it called it's called player one so player one let's copy this thing out and another button it'll be off submit type two and we need another button and this is going to say reset now our reset button is not exactly a submit so let's leave that up then we also need a part which says the winner is and if you guys see out here if we keep the score to be three this part gets updated with the name of the player that is player one for round so we need another division in our document to actually create this so let's go ahead and create the division so first of all we need an input part where we're inputting the limit of the score so go input and the type will be numbers and so the name of limit and let's give it a pre-made value of five now once that's done we have this the winner is so that can be just an edge3 and let's say the winner is so this part gets updated so let's create a span out here let's keep the span empty as we're going to update it with our JavaScript let's have a look at what this looks like so this is what a proper HTML would look like let's go and create a new folder let's call it demo and we're going to call this index.html now if you were to actually open index.html we'll see that it looks nothing like this whatever we've created already now another thing you see that these buttons are in one line so actually let's create a division for it's always nice to create divisions as it helps our code to be mod uh now that's done let's also keep the input in a separate div and the S3 will just be there now let's keep this whole thing in a div so okay let's get the indentation right this comes here this comes here this comes here and this is indented correctly and that's all save our file and let's see what this looks like so let's find our demo folder we have an index or HTML okay so this is what our general skeleton of our score keeper is going to look like there is no styling attached to this and there's absolutely nothing it looks absolutely Bland even the buttons don't work because there's no JavaScript to make them work so as we see we have created the skeleton of our score key so now to add some styling we're going to need some CSS now before we use CSS let's get into see what CSS actually is okay now let's move on to CSS so cascading style sheets fly referred to as CSS is a simple design language intended to simplify the process of making web pages presentable CSS handles the look and feel part of a web page using CSS you can control the colors of the text the styles of font the spacing between paragraphs and how columns are sized and laid out what background images or colors are used layout designs variation in display for different devices screen sizes as well as a variety of other effects CSS just like HTML is very easy to learn and understand but it provides powerful control over the presentation of a web page now the history of CSS dates back to the time of HTML 3.2 when tags like font and color was introduced which made the lives of web developers utterly Miserable as they had to incorporate CD styling changes to their documents now to solve this problem the worldwide Web Consortium made CSS now CSS comes with quite a lot of advantages CSS saves time as you can write CSS once and then reuse the same sheet in multiple HTML Pages you can Define the style for each HTML element and apply it to as many web pages as you want secondly Pages load faster if you're using CSS you do not need to write HTML tag attributes every time just write one CSS rule of a tag and apply it to all the occurrences of that tag so less codee means faster download times also it's really easy to maintain and above that larger array of styling choices and HTML attributes are available in CSS also it has a multiple device compatibility okay so CSS is basically used to style stuff now how will the browser know where to render which style well this is handled by selectors now there are two major attributes that are used to select tags that is classes and IDs classes are used to select a group of objects or tags while IDs are used to select a particular element of a web page while these are two basic selectors there are a lot of selectors and you can have a look at them and the documentation of CSS selectors just remember that when you're selecting a class to style we use the dot operator followed by the name of the class and for IDs we use the hash operator followed by the name of the ID so going by the analogy I used to explain HTML as a skeleton of the web page the skeleton wear can be considered as the styling of the web page now just to give you guys an example as to how powerful CSS is let's have a look at this web page called CSS zen garden so I already have this website open which is called CSS zen garden and it shows us how much of a variety CSS can make so this is just one website and people are free to actually design the website however they want and submit it to the people who actually maintain this website so we have multiple designs like this one so it's the same website again and again and we can see how different the design aspects can be now this looks completely different from what we were now looking at at it has a completely different layout and feeli to the website so this is how powerful CSS can be now let's look at some other styles also like look at the steel one now this has a completely industrial look to the website and this is just what CSS can do okay so enough of looking at other people's CSS let's get to coding some of our own CSS now for this I'm going to be using bootstrap 3 which is basically a CSS framework that again saves a lot of developers time as CSS can be a pretty tedious job nonetheless bootstrap lets us style stuff really quickly now to include bootstrap into our web page we're going to Simply use the link tag and just use the CDN link for bootstrap now bootstrap uses class selectors to implement its styling changes onto elements so we basically have to just remember that what each class does when using bootstrap it's a pretty simple and easy to use library and I think I'll make a tutorial on it in the new future seeing that bootstrap 4 is gaining quite a lot of Praise but until then just bear with me for now just understand understand that all we have to do to implement bootstrap is simply add classes to the tags of our HTML document okay so first of all we need to go and find the CDN link for bootstrap 3.3.7 so you go bootstrap 3.3.7 CDN and all you have to do is just copy this link and add it to your HTML page so you add it under the head tag as you want it to load before the web page loads so there you go now that we've included bootstrap we can go ahead and use it now to use bootstrap all we have to do is just add classes as I just said so the first one that we're going to add is for the buttons now remember we had actually separated this buttons into separate divisions is just because so you could use the form group of bootstrap so you go class equals form group so what form group does is actually groups all the buttons into a form and it's just better for styling now the second one what we have to do is add a class to the buttons so that they get stylized without us having to beat our brains out so we go button and another thing we can use two classes at the same time you just have to use a space between them so the first class is going to be button and the second class is going to be button default so what button default does is actually Styles the button into a white color that you can see out here it will give this gray color to the button second we'll have to do the same thing to this button so let's go ahead and do that and we have to give this button a red color so that's given by the class button danger so button and button danger okay so now that we've included a little bit of bootstrap into our HTML web page so they should include some CSS now let's save our file and let's see what it looks like so just to remind you guys this is what our web page looks like right now without any CS s and as soon as we save it now our web page is going to look a little bit different okay so let's see what it looks like okay now you guys can see that our buttons have become much better it says player one in a much unique way like the buttons are bigger larger and they have this nice shadow touch to it we also have this reset button going for us which is now red in color and we also have our input groups which have been changed now now there's a lot more to do so let's get on with that now we have to put class into our input group also which is a form control so let's see what that does so let's see form control and our input has become much better it has the Shadow and it's just huge now so we're going to control that with our own bit of CSS but let's get down with boot strap for now now we also have to add the class form group into this div okay so that was enough of using bootstrap it's time we write some of our own CSS so CSS we're going to be using using our selectors that we just learned about so first of all we need some general styling for our entire web page so let's give this div an ID out here and let's call it a class actually so let's call it content now all we have to do is Select content in our CSS so we go do content because it's a class and we start styling it so first of all we need to align all this text in the center so we go text a line and we go Center secondly we need some margins also so we go margin right and let's say we want a 30% margin from the right and margin left could be let's say 35% now margin top is going to be let's say let's give it also 25% from the top okay so first we need to save this as our CSS file so we're going going to call it style then we also need to include this into our file we go with the link tag now we just go style. CSS because it's in the same folder that we had saved it and let's see how that changes our web page okay we have everything in the center now our text is aligned properly we have margins and everything's where we want it to be now we also need a background image because out here you're seeing a very good background image which shows some football so our already downloaded the background image and let me just transfer it to the folder yeah so let's go to our CSS again and we need the body tag so to just select tags like that we just go body and Open brackets background image so we're going to give it a URL which is just the name of the picture so I've saved it as the background with BG and a JPEG file format next we have to set the background size let me just show you guys what it looks like without with the background image so as we see that the background image isn't really centered properly so let's fix that now so we go background size and we say cover so cover will cover the entire web page let's see how that works yeah that's nice then for the content as you guys see out here the color here is grayed out but the color here is white so we we say color and white and that has changed our color to white nice secondly we're going to set the opacity of our background image to be 60% so it gives it that nice transparent feeling also we need to set our HTML to be 100% of the screen so you go height and say 100% let's see how that changes everything yep now as you guys can see it's not really identical to everything out here there's no spacing between this so we'll get to that in just a bit but for now we've almost replicated what we wanted to create but still there's no life to this application if you press player one nothing happens you press reset nothing happens it's just a bunch of buttons that do nothing for that we're going to need JavaScript so JavaScript is a scripting language that enables you to create dynamically updating content control multimedia animate images and pretty much everything else okay not everything but it is amazing what you can achieve with a few lines of JavaScript code above that the fact that it is lightweight and universally used just puts icing on the cake really so to learn more about JavaScript you can check out our recently launched JavaScript tutorial which teaches the basic of the language something new that we're going to learn today is how to use JavaScript to select elements of an HTML document and manipulate them accordingly so for this we have some functions called select the functions we select the element using the function fun and Stor the element in a named variable and manipulate it as we want using semantics of programming so let's go through the most used functions and the users so first of all if you guys see all these functions are of the document object so this means they are from the document object which is basically used for Dom manipulation stuff so the first function that we have is the document. query selector so it'll take in an argument of the query name and it Returns the first element within the document that matches the specified selector secondly we have document. query selector all now this returns a static node list representing a list of the documents elements then mat a specified group of selectors so basically if you're finding all the P tags in a document you can use a document. query selector all next we have document. getet element by ID so this returns an element object representing the element whose ID property matches the specified string also we have the document doget Elements by class name which returns a collection of elements in the document with the specified class name as a node list object now referring back to the analogy for explaining CSS and HTML JavaScript fits into the picture as the dynamic actions that the skeleton in question performs like dancing as you see here okay now it's time to bring our own scorekeeper to Life by actually adding in some JavaScript so let's get started now first of all we're going to create a new file and we're going to make it a Javascript file so now once that's done let's get ahead and create our own JavaScript okay now once we've set our file to be a JavaScript type let's go and analyze what we're going to try and make so if you see out here wait let me reset it once so yeah if you see out here every time we click player one this part the score part gets updated so first of all we have to tie in these two parts so this is going to be a counter and this is going to be the part that is updated so let's see how we do that first of all we have to select our counter which is the button so our button needs to have an ID okay so let's see out here so our first button needs to get an ID let's call it counter one and let's give by ID of player two button counter two fine let's save it and let's move ahead so let's say variable button one is equals document I'm terrible at typing document do query selector now what we want to select is the id1 now you could have also used document. getet element by ID but I'm just going to try and showcase all the functions that we learned so double code this so this will select this button the button one that we have created out here this says play one so now we also need to select the score part which is this part this highlighted part that you see out here which is the Span in the HTML which is score one so to select that we have to create a variable so so let's say variable that says player one score and we use document do query selector and we're trying to select score one because that's the name of the ID of the spans yep score one and we're going to say that variable score of player one is zero now we need to do the same for player two and it's button so let's copy this down now so this is called button two it's going to select counter two this called player two score and it's going to select score two and score two will also be zero now let's also select the reset button for our use later on so variable reset is document dot query selector and let's say hashtag reset because was that the name of the ID okay let's give it the ID reset because we haven't given it any ID so we've given reset button an ID and we've selected it through that let's save both the files so we're going to call the script so now that's created let's go ahead and create some event listeners so what exactly is an event listener well you're going to be clicking on these buttons right on the web page so every click is actually an event that you are triggering so we need an event listener for that so how do we create an event listener well all we have to do is say button one do add event listener and in this we are going to pass in the event that we are looking for which is a click and the call back function which is basically the function that is executed on the event when it's trigger so first of all we need to select the limit so let's go and create the limit tags out here where let's give this input and ID of limit and let's select it so we go variable limit equals document m. query selector which is basically the limit ID that we just now created now what we need from this is the value so we can do that by going dot value and we'll get the value of the limits that is set out here so if our value is being set to five the dot value will give the limit value of five now every time it's pressed what we want to do is increment our score one out here by one so we can do that by saying Score 1 equal Plus+ so score equal score + one which is basically shorthand written as Score 1 ++ and we also need to change the text content out here so what we can do is go okay document and play one score. text content equals to the score one now that we've added an event listener to that we also have to add an event listener to our second button let's copy this down so button two. add event listener this is also going to have a limit which is equal to the value then we're going to addition to the score two out here and player two score will be changed now what we are forgetting is we also have to check if the score of player one is greater than player two and if he has already won or not so if we don't put a condition to check if he's w we just keep on incrementing the score and this condition will never we met so we need to handle that now for that we need an if statement so we go if so first of all if the score is equals to the limit so Score 1 equals to equals to limit or if score one is greater than score 2 and what so score one has to be greater than score two and score one also has to be more than the limit so score one more than the limit now if this condition is met that means somebody's one so what we see out here that whenever somebody wins their digit turns green now to do that we can add a neat little trick first of all let's go into our Styles let's create a class called Green code do green and we just have to make the color green right now we can add this class whenever somebody's one so we just going to add this green class to the elements of whoever is winning so we do that by saying P1 score do class list. add and you save the name of the class so you go green then what you see out here when somebody's one these two buttons get disabled so we can do that too by saying button one. set attribute and you go disabled and true you also need to do this for button two yep and we also need to print winner so let's handle that later let's do this if statement for this function too for button two so copy that down go down to the function for button two and set it there so F score 2 and just flip everything down okay so now we've worked on these two buttons now we also need to work on the reset button so when the reset button is clicked everything goes back to the way it was the value goes back to five there's no winner printed these buttons get undisabled and the score goes back to Zer and zero so that's a lot to do so let's add an event listener to our reset button so we've already selected our reset button into this variable called reset so we're going to just use that so reset. add event listener and we're going to be listening for a click here too and we're going to pass in a call back function now first of all we want to undisable the two buttons so button one got add attribute rather we removing an attribute so we want to remove the attribute disabled and we want to do this for button two also so we now also need to make the text green so we can just go P1 score dot remove class list so you have to remove the class list so class list. remove and you want to remove green and since you don't know if player one or player two is winning you want to do it for both of them we also have to set both the scores to zero so we go score one equals z or you can just go score one and score two equals z what we need to do next is actually display the scores to be 0 and zero again so do that if you guys remember we go P1 s. text content = score one and the same goes for for P2 score also next we need to define the limit and set it to the default of five again so for that we need to say document dot query selector and we want to select limit which is an ID and we want to make its value equals 5 okay if you guys remember we also need to print out the winner so let's go and do that so first we we need to give an ID to the span that we had created so let's call this winner now we need to select the span so to select the span all you have to do is create a variable called Venom and you go document. query selector and you pass in the ID that is winnner so this will select our ID so first of all when somebody wins we need to actually update the winner content so if somebody wins all we have to do is say winner. text content equals to player one or something like that so actually we're going to create a new function just for that so let's do that first function print winner we're going to pass in the name and let's say if score one is greater than score two we want to print so winner. text content equals to layer one and else it's just going to be winner. text content equals player two let's give this space actually player two is rightfully we actually don't need to pass in anything to be honest let's go up here now when this is done when all this is done we want to call Print winner and passing the scores actually but the scores are actually Global variables so that they can be access from all these functions so we don't need to do anything so you go print winner here and after you've done all that we go print winner and in the reset function all we have to do is set the winner content so winner. text content equals nothing so that's how it is so now all we need to do is add our script to our HTML page and we do that using the script tag so we say the type is either text or JavaScript and we give the source which is basically the name of the script so script.js let's save that let's save all our files okay now let's see if our scorekeeper is actually running properly okay let's something's wrong soccent is not defined js6 okay socent js6 okay cool cool that should fix it okay now let's see if it works so player one should get updated that's not working it looks like we've done something wrong so to always see what is wrong you go into the console and you always edit out so we see we cannot read property of value of null HTML button element. Anonymous js14 14 document. create qu a limit so apparently it can't select limit so okay yeah we forgot put the hash it's an ID have we done this mistake anywhere else I don't think so okay let's go ahead and try again okay our scores are updating and let's see if it turns green as it turns five yep and let's see if the reset button works now the reset button is working but our score is not actually being updated again so we have to set that again let's see what did I do wrong okay so let's let's declare them separately and let's see if that works click it up to five the winner is player one click reset it goes back to zero okay guys so we've successfully created our very first score keepo you can use this Nifty app to actually give the scores between teams if that's what you want to do but this actually what it showed us is how we can manipulate the document object model using JavaScript so efficiently okay guys so that was it for me from today I hope you guys had fun learning about ja JavaScript and document object manipulation until next time goodbye