JavaScript DOM Manipulation – Full Course for Beginners

in this course you will learn about javascript dom manipulation this is where you use javascript to modify change or delete elements of a website in the first part of this course you will learn the basic features of a website dom and the javascript commands you can use to manipulate the dom in the second part of the course you will use what you have learned to create practical examples from beginner to advanced this course was created by code lab so just before we begin we're just going to take a look at a few prerequisites so this two-part tutorial is primarily for beginners so if you've never heard about the dom or maybe you're a little familiar with it but don't know how to utilize and apply it this tutorial is for you now in order to effectively understand the dom and how it relates to working with the web it's necessary to have an existing knowledge of html and css and i have crash courses on both of those if you want to check those out before you start this tutorial it's also super beneficial to have a familiarity with fundamental javascript so the syntax and the code structure if you guys want to learn about fundamentals of javascript check out my javascript crash course which covers the fundamentals so there's a couple things you'll need if you want to follow along this tutorial you're going to need a web browser and a code editor now these are all the options you can use and you can mix up these options if you like but this tutorial i'm just going to be using chrome and visual studio code again you guys can choose any combination you like now the structure of this tutorial we're first going to take a look at what the dom is then we're going to take a look at methods to select elements in the dom how we can traverse the dom how we can manipulate the dom and then finally we're going to take a look at event handling so we'll start this off by explaining what the dom is so the dom stands for document object model now the document object is a built-in object that has many properties and methods that we can use to manipulate the content the structure and the style of a project and this ability to manipulate the dom or the document object model is one of the most unique and useful abilities in javascript so almost any time a website performs an action such as toggling a navigation menu or rotating between slideshow images or even displaying an error when a user attempts to submit an incomplete form this is the result of javascript accessing and manipulating the dom now another way of thinking about the dom and understanding how it works is thinking of it as a tree of nodes like you can see on the screen now so this is just a basic diagram of a dom tree and all of its nodes now everything in this diagram is a type of node the elements the attributes the text content and even line breaks and comments which we'll see a bit later on are even considered nodes and all of these make up the dom tree now the dom object itself is actually a property of the window object which is the global top level object representing a tab in the browser and this window object has access to such information as toolbars the height and width of the window prompts and even alerts but in this tutorial we're only interested in the document object which is what is inside of the inner window and the stuff we want to manipulate now another important thing to note here is that most of these nodes in this diagram have a parent child sibling relationship the topmost node are either document node here is the root node of the dom tree which we use to access the dom and manipulate all of the content now this document node has one child node which is the html element and the html element is a parent node to the head and the body element now the head and body elements are what you would call siblings since they're on the same level in the dom tree underneath the head element you see it has one child node which is the title element and the text this is my website is a child node of the title element and these relationships are similar over the other side but the body element is the parent of the paragraph and the h1 the paragraph and the h1 are siblings to each other and the text content inside each of these elements are child nodes to the paragraph and h1 so the my link and my header our child nodes to the h1 and the paragraph element now we can also see by the paragraph tag we have a class attribute now html attributes such as ids or classes in this case styles etc also considers nodes in the dom hierarchy but they don't actually participate in this parent child sibling relationship like the other nodes do the way they are accessed is through properties of the element node that they're contained in now often there will be times you want to move throughout the dom so understanding this parent-child sibling relationship is crucial to understanding how javascript works with html all right guys so now we know a little bit more about what the dom is and learn about the dom tree the next thing to cover in the tutorial is how to select these nodes or elements in the dom tree for manipulation so before we take a look at all these methods of selecting elements let's just quickly go over the layout you see here in the browser so in the index.html file we've got a div of the class of container inside of that we've got a heading which has the id of main heading and then the text our favorite movie franchise underneath that we have a ul tag which has five list items inside of it and then each of these list items have a class of list items so super creative now this is what we're going to be working on when we're looking at selecting styling traversing and manipulating for the rest of this tutorial and then underneath that we have a script tag which has the attribute of source and this is just linked to the app.js file so again guys in order to be able to manipulate an element in the dom tree we first have to select that particular element now luckily for us there's several ways we can do this and the five major ways of selecting the elements are the ones you see on the screen now so we've got get element by d get element by class name tag name query selector and query selector all now some of these methods are pretty self-explanatory but we're going to go over each of them one by one now so the first one we're going to go over is get element by id and as you probably guess you can select an element using this method by its unique id and this is the easiest way to find the html element inside the dom tree because as we know from css the id attribute is used for something unique now if we remember back to the html file you can see that we've got the h1 here which you see in the browser has the id of main heading so this is the element we're going to be selecting so first we need to select the document object model which is just simply document then get the method of get element by id single quote marks really important that you include those and then we're just going to grab the id which is main heading close that off now what we can do with this selection is actually place it inside of variables so we can manipulate it so we're going to go at the front here and just say const title and we'll set this to the id of main heading and if we log this into the console now so we'll just look in title you see it shows up on the console now and if i hover over this you can see it highlights in the browser there so you know now we've selected this element and then what we can do from here is now select that variable we just created for the element and we can add styles to the element manipulate its attributes traverse the element so all of that good stuff which we'll be looking at in just a moment now next we have the element by class name again quite self-explanatory this method returns a collection of all the elements in the document with that specified class name so for example in our html file here you can see all of our list items have that really creative class name of list items so we can select all of these using the get element by class name method so we'll do the same thing we'll put inside a variable we'll just say list item and we'll set it to the document we'll say get element by class name put single quote marks in there and then we'll just say list items i think it's items yes items and then we'll just log this in the console so we know we've selected that element or these elements and as you can see using the method of get elements by class name we've now selected all of those elements now this method actually returns an array like object of all the child elements which have all the given class names so if we open this up you can see it's indexed and they're in the order that they are in the html file now the next method here which is get element by tag name is pretty similar to the get element by class name and that accepts a tag name and returns all of the elements of that specified tag name in the order in which they appear in a document so again return an array like object for all the child elements with the given tag name so for this example i'm going to do is just copy and paste the class name example comment this out and then we'll just say tag name and because the list items are list items we just type in li and if we take a look at the console now you can see it's got that html collection of all the five list items and they're all indexed in the order that they appear in the html file so you can see this method is pretty similar to the getelementbyclassname method now the query selected method that you see here is used to select one item or the first item that matches the selector is given so if you have multiple items with the same class name or the same id or even the same tag it will select the first one it comes across so the beauty of this method as you probably just guessed is that it can accept all css style selectors again allowing it to select it by its tag or its class or even its id so we can actually use this method to actually grab any element in our html file here so what i'm going to do is use it to grab the div of the class of container which is acting as a container for the rest of the content so we'll just go underneath here and we'll create a variable and we'll keep it super creative and call it container and we'll grab the document and then grab the query selector method and again with this method we can grab the div tag or we can grab the class name or if i had an id attribute we can grab that instead what i'm going to do is grab the div tag and then just log this into the console so we know it's working and as you can see in the console now using the query selector method we've selected that uh div with a class of container now as i just mentioned when we're using the query selector it selects the first item that matches the selector it's given which in this case is the div now if we go into the index.html file and we use several more divs again it's only going to select this first div here if we had more divs in this example and we wanted to select them all we then use the query selector all instead so uh what i'm going to do actually is just duplicate this uh one more time uh just zoom out a little bit and then uh just going to change a bit of the word in here so favorite sports and i'm not gonna bother changing the names here but just to show you guys that it selects all of them i'm just gonna copy and paste this but instead of query selector we're gonna say query selector all and then comment this out and quickly just comment all these out so we can only see that variable there and if you take a look at the console now you can see that this method returns a node list of collections of all the matching elements that matches that specific css selector which in this case is a div so similar to the get by tag name and get by class name where we get html collection in this method we get a node list and as you can see it selected both of the containers because unlike the query selector with query selector all it's selecting all of the divs in the index.html file so that's how we can select elements with the query selector and the queryselectoral method so to quickly summarize this section when you need to select a dom element you have five different options to choose from five different ways of essentially doing the same thing which is selecting an element or elements personally i primarily use query selector and query select all because these methods select elements through css selection and i primarily use this to select ids and classes mainly because these css selectors provide a really powerful and efficient way of selecting html documents especially ids because you likely understand that elements shouldn't have the same id that the id is a unique identifier of that element within the document so with that in mind selecting an element with its id is a safe bet because you wouldn't go and apply manipulation to different elements unless perhaps that's what you want to achieve in that case the query select all method and the class selector is what i typically use so now we know all the different methods that we can use to select an element in the dom tree we could finally start doing some manipulating now so firstly what we'll do is just get rid of all of this content here and then head in the index.html file and just get rid of the second container so we don't really need it so let's start things off by taking a look at how we can change the styling of an element so if you are familiar with css and css properties we have a way we can access these properties in javascript so the first thing we'll do is just select this main heading which we have in our index.html file here which is just the title of the container and so we're going to put that in a variable and we'll call this variable title and then document.queryselector method and we'll grab the id of this element which is main heading oh i need to put these in a single quote marks and then let's just log this in the console so we know this variable is working and as you can see now we've selected this element and stored inside the variable of title so what we can do now is actually manipulate the starting of this element and change it around using css properties so to access css properties in javascript we'll just first grab the variable we want to apply the styling to which in this case is the title or the main heading and then we simply type in the style property and then after this style property you just use any css property you want to apply to this element so what we'll do is just change the color of the text and we'll set this to let's say red and as you can see in the browser now we've changed the color of the main heading from white to red using the style property and then the css property of color now this type of styling is what you'd call inline styling and there are other methods to style elements with javascript but this is probably the most direct method now again if you take a look at the console you can see it's actually included the style attribute again because this is actually done through inline styling now it's important to know this because with inline styling this actually only works on a single element if i tried let's say applying it to all of the list items here this wouldn't actually work so just going to demonstrate that to you guys so let's uh create another variable and we'll call it list items and we'll grab all of those list items with query selector all uh they will have they all have um a class of list items and then let's just log in here list items uh so you see now in the console we've selected all of those list items now let's try and use the style property again on these list items and see if it works so we'll say style let's say let's try and change the color again or let's actually do the font size and just quickly guys i wanted to mention that it's important to remember while using the style property css properties are written in camel case and not with a more standard snake case which has the dash so the camel case is essentially just a capital letter to begin the second word and any subsequent word in the name or method or even a property font size in css would be written like this but in javascript we'll use camel case so just so you guys are aware of that now again back to what we were talking about if i tried changing all of the font size of these list items here so let's say to about two rem you can see this isn't actually working because it's trying to apply an inline style to uh five different list items which wouldn't work if we actually wanted to apply this styling to all of the list items we need to loop through the list items first so just to show you guys how that would work uh we'll say i equals zero and then uh we'll say i is less than the list dot length which just gives us the amount of list items inside of our um ul here which is five and then we want to say we want this to increment by one each time and then what we do now is just apply this and put it inside of our for loop and then we just need to index the eye and as you can see now it's quite subtle so let's just make it a bit bigger you can see all of the list items now have that styling because it's been looped through using the for loop so that's how we can apply inline style into elements um using the style property or multiple elements if we loop through them the next thing i want to take a look at is creating elements so what i'm going to do is just comment all of this out first get rid of the list items there i'm just going to put a comment here for styling elements and then now we'll do one for creating elements so again another really cool thing about dom manipulation is that we can create elements from our javascript file here and we do that with a simple method really of the create element so let's say we want to add another list item here in our favorite movie franchise uh container what we need to do first is just create a variable for the unordered list um because we need to enter this on order list uh so we'll say document dot query select that grab the ul and then what we'll do now is use the career elements method to create another list item so we'll just use another variable here so document dot create element and we'll create a list item now this isn't actually going to do anything at the moment this element we've just created in this variable here needs to be inserted into our document and the way we can add elements inside of the document is using the append method so what we'll do is first grab the ul because we want to append this list item inside this ul and then we grab the pen method and the element we want to append which is the variable of li which again is just this list item now you won't be able to see it currently at the moment but if we take a look at um the document here and if we open this up and then open up the div the classic container open up the ul you can see there's an extra list item inside of this ul now because we've inserted this element now using the append method now what we can do from here is add some content inside of our list item so i'm just going to bring this back down go back in the console and i'm just gonna put a comment here for adding elements and then off this we're just gonna say um modifying the text now we don't really need this console log anymore so there are several ways we can include text or modify text in our html and those ways are inner text text content and in html now there is a difference between three so to demonstrate those differences i'm just going to put another html tag inside of the first list item here so i'm just going to put a span i'm going to put neo because that's relevant to the matrix and then i'm just going to create another variable to grab that element there so we're going to say first list item set that to the document and say query selector and then we'll grab that list item and then i'm just going to grab the console log again actually and put in here first list item oh forgotten s so there's our first list item now what i'm going to do here is include in our text first so it just displays the text duplicate this a couple more times and i'm going to grab text content and then also grab in html so if i just pull this up a bit more now if you take a look at the console you can clearly see the differences uh between the three now and that is essentially just the way they're displayed so within a text here you can see we're simply getting the visible text contained inside that node with text content you see it's actually being displayed the same way it is in the html file so it's got all those indents and it's jumping onto a new line and within html a similar sort of thing with the indents and jumping on new lines but it's also showing the tags so showing us the span tags inside of our html here so again that's pretty much the differences between the three now another thing here is that within a html there is a bit of a danger using inner html and that's mainly at security issues you don't really want user input to be displayed in the inner html because this actually allows the user to control the javascript and the html on your web page which obviously has its problems there so in most cases you're just going to use inner text so let's go ahead and use that and implement that in our list item that we created so we're just going to grab the li grab in a text and we're going to set this to equal let's say x-men which is another franchise if you take a look at the browser now you can see that text has been included inside of our list item now all right guys so we've created our list item here we've added it into the ul using the append method and we've also given it some text the next thing i want to do now is make our list item look like the rest of the list items so to do that we're going to need to learn how to modify and manipulate an element's attributes or classes luckily for us javascript provides several methods and properties for add-in removing or changing the html elements attributes or classes so we're going to go underneath here and just put a comment of modifying attributes and classes and the first method we're going to take a look at is the set attribute method so we'll grab our list item and we'll say set attribute and as you probably guessed because it's pretty self-explanatory what it does is set an attribute to our specified element which in this case is our list item so for this attribute we need to include two values the first is the attribute you want to set which will just put an id and then the second is the name you want to give that attribute so we'll just give this attribute let's say let's give it the id of main heading and as you can see in the browser now because we've given this list item the same id as our main heading here which is main heading you can see it's got the exact same styling so as you can see the set attribute method is quite powerful now the next method i want to take a look at is how we can actually remove this attribute so we'll go underneath here and we'll say li dot remove attribute again pretty self-explanatory so let's say we want to remove the id from our list item there all we put in here is just id close that off and you can see now it's reverted back to its default styling and doesn't have that styling that the main heading does now there's also a way we can access attributes in javascript so which follows a similar sort of method so we'll say let's say we want to get the attribute of our main heading here what we need to do is first let's just create a variable for it so const and we'll say title equals document dot query selector and then grab the main heading and then let's just log this in the console so we'll say um title dot get attribute that we want is the id and as you can see in the console now it's giving us main heading which is the id associated with our main heading here so that's how we can deal with attributes here let's take a look at how we can deal with classes so i'll just get rid of all of this and we'll grab our list item again and then we'll use the property of class list now this classlist property has quite a few methods we can utilize and the first one we'll take a look at is how we can use the add method which of course will just add a class to our list item so we'll say dot add so let's say list items and as you can see when we add that class now our last list item here is the exact same styling as the other list items because again we've added the same class as the rest of the list items now what we can also do here is remove this so we'll say remove and again it will just revert back to its default styling because of course we've removed that class now now another thing we can find out is whether an element has that specific class so um i'm just going to log this item into the console here class list and we'll use the method of contains and we're going to find out if it contains list items and as you can see it's returning us false because of course we remove that class now up here so it's giving us false if we change this method to add instead you see now it's returning us true because of course a list item here now does contain uh this class here so that's how we can modify attributes and classes in the dom of course the dom has many more methods than this but these are just some of the core methods you'll likely need to use now there is still one method left to use and that's how we can remove an element and the method to remove an element or our list item in this case is a pretty simple method to remember i'm just putting here first remove elements so all we need is the remove method so we'll say li dot remove and if you take a look at the console now you can see that the list item has been removed and if we just open up all of the elements and we'll open up the div here and open up our url you can see that list item is no longer there so we've learned quite a bit about the dom now we've learned how to access elements and dom we've also learned how to create add modify style and remove elements in the dom too the next thing i want to take a look at is how we can navigate the dom so i'm just going to bring you guys back to the slide which we looked at at the beginning of this video where we have a really basic diagram of a dom tree and all of its nodes now everything in this diagram that you see here is a type of node so that includes the elements the attributes the text content and even line breaks and comments inside the html document are considered nodes and all these together make up the dom tree now the dom object itself is actually a property of the window object which is the global top level object representing the tab in the browser the window object has access to so much information such as the toolbar the height the width of the window even things like prompts and alerts but in this tutorial we're only interested in the document object which is what is inside of the inner window and the stuff that we want to manipulate now if you also remember back to the beginning of this tutorial most of these nodes in this diagram have a parent child sibling relationship the top most note i.e the document node is the root node of the dom tree which we use to access the dom and manipulate all the content now this document node here has one child node the html element the html element is a parent node to the head and the body elements now the head and body elements are what you would call siblings since they're at the same level in the dom tree underneath the head element you see it has a child node which is the title element and the text this is my website is a child node of the title element these relationships similar over on the other side here where the body element is parent to the paragraph and the h1 the paragraph and h1 are siblings and the text content inside of each of these elements are child nodes so the my link and then my header are child nodes the h1 and the paragraph element as you can see here we also have a class attribute and html attributes such as ids styles classes etc also considered as nodes in the dom hierarchy but they don't actually participate in the parent child relationship like other nodes do they're accessed as properties of the element node that contains them so they would be a property of the paragraph tag for example in this diagram now often there will be times where you want to move through the dom without specifying each and every element or node beforehand so learning how to traverse the dom tree is essential to understanding how to work with javascript and html so let's head back into vs go now and look at the different ways we can traverse the dom alright guys so it's pretty drilled in now that we're aware that the dom is full of different types of nodes which have parent child sibling relationships and if we just head into the html file here just to see this in action you can see that the html element is the parent of the head and body element and the body element is the parent to the div but not the h1 here or the ul since these are two levels down from the body now the h1 and the ul are what you would call siblings because they're on the same level so what we're going to do here is use this ul and traverse upwards in the dom and find out what the parent of the ul is and also the grandparent so we'll head back into the app.js file and go underneath parent no traversal and let's just first create a variable to grab that ul so we'll say let ul equals document dot query selector and then grab the ul and then just log this in the console so we've got a ul then you can see it hovers over it and as you know nodes in the dom are referred to as parents children or siblings depend on the relationship to other nodes now the parent of any node is a node that is one level above it or closer to the document in the dom hierarchy so to find out the parent node here we have two options so the first option is parent node duplicate this and we also have parent element and as you can see in the console now we're getting the div with the class of container because this is the parent of the ul here now say we wanted to actually traverse upwards again and find out the grandparent of the ul all we need to do is double down by chaining the property together so after parrot node we just write paranoid again and we'll do the same thing with parent element and as you can see now in the console we're getting the output of body because two levels up from the ul here first is a container and then the body so as you can see what we've done here is managed to traverse up the dom tree from the ul to figure out what the grandparent is so it's really useful to know these kind of properties now you may be wondering what the difference is between these two and it will make more sense when we take a look at how we can traverse child nodes in just a moment but basically the clue is in the name so you can see here we have parent element and parent node and we know that elements are a type of node and this is where it can confuse people because as we know notes can be text it can be a document comments or even line breaks so this distinction can help grasp the difference between the two now that might still confuse you guys a little bit so i'm just going to show you this in action so i'm going to comment all these out and i'm just going to create a variable for our html element so we're going to set this to document dot document element and then i'll just log this in the console again so we'll log in here html and you can see we've selected our html there now i'm going to do the same thing and apply the parent node and the parent element property to this html variable say parent node duplicate this and we'll say parent element and as you can see when we take a look at the console now the parent element is returning us null that's because the job of the parent element property here is to try and retrieve the parent element of the html element ie the document node however the document node and an element node aren't the same type of node hence why we're getting this null here so the parent node property will try to retrieve any node regardless that type of node so generally parrot node is more commonly used when we're traversing the dom again even if you use parent element you likely won't run into this problem so that's how we can navigate upwards of the dom let's now take a look at how we can traverse downwards in the dom by taking a look at the child node traversals in the dom tree so for this example we're still going to stick with the ul and we're going to traverse downwards into the list items so i'm just going to comment this out and then go underneath the comment and because we're sticking with the ul here i'm just going to put this here so we can see it and i'm just going to console log in ul now just like the property of paranormal and parent element we also have child node properties and child element properties which pretty much work in the exact same way so let's first take a look at the child nodes property and see what it gives us so after the ul i'm just going to type in here child nodes you can see in the console now it's giving us a node list and if i open this up we get a list of every child node inside of the ul now again this is where the distinction between nodes and elements becomes more evident because you might have expected this property here to give us the five list items but in addition to the five list items six text nodes this is because we actually wrote out our own html this wasn't generated by javascript and inside of the html here the indentation between element nodes is counted in the dom tree as text nodes that so just to show you guys what happens if i remove one of those indentations so i'm just going to put this list item in the same line as the fourth one you can see now in the node list it's saying 10 instead of 11 again because indentations are counting as text nodes so again that distinction between nodes and element nodes becomes even more evident so what we'll do is actually just put that in another line again so we get a node list of 11. now as well as this child noise property here we also have first and last child and as you probably guessed this just selects the first and last child node of our list here so i'm just going to duplicate this a few more times and for this example we need to write as just first child and last child and again this is just returning us text nodes because if we take a look at the um node list here you can see that the first index is a text node and then the last index is also a text node now when we're using first chart and last child here which is selecting the first and last node we need to be very mindful if we try styling element using this property so just to show you guys what i mean uh if i grab the ul here and i say first child and we're gonna style first child we'll say background color and we'll set it to let's say blue you can see we're getting an error now because the first child here is actually a text node it's not an element now to select the node we want to apply this styling to what we can do instead of using first child here is grab the child nodes property and then take a look at the node list and i think we wanted to apply the style into this item which is indexed.1 so we grab our square brackets grab the first index number and if you take a look at the browser now you can see that our first list item here has the background color of blue which we applied here in this styling now again like the parent element here we also have the same thing for the children elements which is only going to select the element nodes so what we'll do is just comment all these out and we'll use that ul again and we'll log in uh let's log in ul and then grab children now instead of a node list you can see it's returning also html collection and it says it's five which is these five list items inside of our ul now again like first try on our last child we can do the exact same thing for the first child elements so we'll say first child element so that's how we convert downwards into the dom using child node properties so lastly now we're just going to take our sibling no traversal so again knows that our siblings are nodes that are on the same tree level in the dom so if we take a look at our html again we know that the h1 and the ul are siblings to each other because they're all on the same level now it's also important to note here that siblings don't have to be the same type of node like they are here as element nodes if i put a text comment between the two of these so i'm just going to put in here uh space between this too would classify as a sibling to the h1 and the ul because they're all on the same level so let's put that in a visual perspective for you guys so i'll go back into the app.js file and i'll underneath this comment here and i'm just going to grab our uo again and comment these out and just log this into the console here so we get our ul again now just like the two previous traversal properties we have properties for node which covers all the nodes and we also have properties which just cover element nodes so let's first take a look at select all types of nodes so after the ul here we've got the previous sibling and if i duplicate this we've also got the next sibling and you can see in the console now we're getting two text nodes and just to show you why we're getting two text nodes i'm just gonna create another variable for our div just call this div we'll grab the div and we want to find out all of the child nodes inside of that div oh it's about div wrong you can see we'll open this up now and as you can see when we've used these two properties here we've got the ul before the ul is a text node and after the ul is also a text node so that's how these two properties here are working now again like the other properties we used beforehand with parent element and all of these child element notes we have the exact same thing for sibling no traversal so again if you just wanted to find out the sibling element nodes instead of using previous sibling and next sibling we can use the previous element sibling and we can also use next element sibling and i'm just going to comment out this if you take a look at the console now you see we're getting the h1 because this is the previous element sibling node um beforehand in the html as you can see here and then for the next element sibling we're getting a null because there's no element nodes after the ul all right guys so we've gone through quite a bit of information now regarding the dom we've looked at what that dom is we've looked at how we can add elements to the dom style elements in the dom remove and modify elements in the dom and we've just learned how we can traverse the dom the last topic i want to cover in this tutorial is taking a look at event listeners now event listeners are among the most frequently used javascript structures in web design and what they do is basically just allow us to add interactive functionality to html elements by listening to different events that take place on the page such as when a user presses a key or when elements load or when a user clicks a button now the most common events you might listen out for are load events touch start events key down events mouse over events and of course click events now we'll take a look at some of these in just a moment and i will leave a link in the description if you guys want to check out all the other dumb events but let's learn about the two most common ways we can add event listeners in our projects now the first way we can include an event is actually inside of our index.html and directly inside one of these elements so what this event is is the global on event attribute and this way of creating an event to an element works pretty much like any attribute we inserted directly into the html element that's present on the page or the element we want to apply the event to and then apply a one line of script to that particular element which in this case is going to be this button here for our first example so we'll go inside the opening tag here like we did with any other sort of attribute and then we include whichever event we'd like to happen for this example we're going to use an on click event so we'll say on click and what i want to fire off when we click on this button is just to show us an alert box that has the content of i love javascript so we'll put in here alert and then we'll put the content of i love java script and that's all we need to write for this attribute so the syntax for this as you can see is pretty simple we've included the on click event attribute so when we click on the specific button in the browser now the event will fire off and the alert function will be executed which will have the text i love javascript inside of it so we'll head into the browser now and i'm going to click on this button here and as you can see when i click on the button the alert box pops up and it's got the content of our love javascript which we wrote inside of this attribute here so that's the first way we could include an event in our projects which is just direct into the html on that element we will apply the event to so pretty simple and probably the most direct method of including an event listener inside of our project now the next method to create an event listener is the javascript ad event listener method so to create that we'll head back inside our app.js file and the way this method works is first include a element that we want to apply the event listener to so we'll just put in here element and then we use the add event listener method and then inside of here we include the type of event in this example we'll use another click event and then after this the second parameter is the function we want to fire off and then we also have an option here for a third parameter which will take in a boolean data type so true or false and this is in relation to bubbling and capturing which we will speak about in a moment but we're not going to include that at the moment because by default it's already false so it's not too important yet so we'll just close that off so that's essentially the syntax i've had an event list now using the ad event listener method so for this example we're going to use the example 2 button here and again we're going to create another alert box so the first thing we want to do is create a variable for us to reference from so we'll call it button 2. and the button two in the html here you can see has a class of btn so we're gonna retrieve that so document.queryselector and then grab the btn 2 and then first we want to create a callback function so the function we'll call this alert btn and inside of here we'll just put another alert box and then type in here i also love java script and then what we need to do now is include our event listener so i'm just gonna copy the syntax paste in here the element is that button two so we've got our advent listener method there and then the function is gonna be that alert btn and we've got a little i'm saying oh we've got the e in listener so what we've done now is included a click event on the uh button two which is this button here so when we click on this this alert box should fire off and should appear at the top of the screen with the content again of i also love javascript so let's test this out and as you can see now this event is working and we're getting our alert box which has the content of i also love javascript so that's how we can use the advantage listener method here so let's take a look at a another example for example three so instead of a click event we'll look at a mouse over event so uh say mouse over here so for this example instead of clicking on a button here when i move the mouse over i want the background of this whole box to change so to do that let's first grab i think it's box three so we'll create a variable for it and we'll call this variable new background color grab the box so document.query selector and it's box three then we'll first create the function so we'll say function change vg color so we'll grab that variable now new background color style dot background color and let's set it to the color of blue and then uh we'll now include that mouse over event so we'll grab the variable add event listener method uh and we'll say mouse over and then the function which is change vg color so if i head over to example three if i now move the mouse over the box here it should change its background color to blue and as you can see that's working as it should manage to change the style of our third box using the mouse over event and the event listener method now generally people do tend to use the ad event listener method more than the html on event method typically because you can apply as many event listeners to an element through the ad event listener method whereas with the html on event method you can only apply it once so if you had one event already on a html element and then you try to plan another one that new one would override the old one but again if you only want to apply one event the on event method works perfectly fine so these were some really basic example guys of how we can implement event listeners we'll now take things a little step further by creating a reveal hide event where we click a button to display some text which is originally hidden all right guys so the really cool thing about event listeners is that we can combine them with css and other javascript tools to create interactive and fun constructs which for this part of the tutorial is our simple example here where we have a button and then when i click on this button you can see it reveals more text if i click on the button again it hides the text now the html for this example is really simple so we've got a div here with a colossal container inside of that div we've got a button element which has the class of reveal btn and the class of boxes which is just a general class underneath that we have it with a class of hidden content which has all of our dummy text inside of it this also has a class of boxes and this is what it currently looks like right now in our live server now the first thing i want to do here is go into app.js file and create two constants so we grab those two elements so the first one is going to be for our button we'll just call this reveal btn and then we'll say document dot query selector and we'll grab that element which has a class of reveal btn and then we want to create another constant for our hidden section so we'll call this uh let's call this hidden content and then document.queryselector and then grab a class of hidden content which i think yeah so we've got our two constants there the next thing i want to do now is create a callback function which will check if our hidden content here has the class of reveal btn now i will explain this in more depth but for now let's just create that function so we're going to create that function we'll call this function reveal content and then inside the curly braces here we want to use an if else statement so we'll use the if statement first inside the brackets is our condition so we'll say if our hidden content grab the class list property contains class of reveal btn so there's our condition the code that we want to execute if this condition is true grab the hidden content grab the classlist property and we want to actually remove this class if it does contain the class so we want to remove the class of reveal btn again this will make more sense in just a moment but we're just going to write this out for now else if it doesn't contain that class of reveal btn and we want to grab the hidden content classes property then we want to add that class of reveal btn now the next thing we want to do now is include our event listener so we want to apply the event list now on our uh button here so say reveal btn add event listener and we want to look out for a click event and then the function we want to run off is the reveal content function we just created and the last thing we'll do now is visually hide our div here which has the dummy text so we do that inside our style sheet so we'll go inside the internal style sheet here grab the class of hidden content and we'll say display none and then when the function runs off and it does include our class of reveal btn we want to grab the hidden content grab the reveal btn class and then we want to display as block so this now should be working so if i click on our button you can see it reveals our paragraph i click on the button again it hides the content so what we're essentially saying here is that depending on the current state of our hidden content here javascript will either add or remove the reveal btn class so in its current state right now this button here does not have the class of reveal btn and hence why it's not displaying because we've set this here to none when we do click on this button it will display as block because we've added our event listener here which looks out for a click it will run through this function it will check here if it does contain the reveal btn which it doesn't so if it doesn't we've got our else statement here which will add that class will reveal btn and because we've set it as block here it will now display it if we click on the button and as you can see it's displaying it now and if we click on this button again it will run through our function here and it will first check if it contains the class of reveal btn which it does currently in this state so it will remove that class of btn and because in our internal style sheet here we've set the display to none it will effectively hide our content and just show us the button here so if i just show you guys what that looks like if i just comment out the remove section if i click on the button it will display it because currently right now it's added the class of reveal btn if i click on this now you can see now it's still displaying the text because in our if statement here we no longer have the ability to remove that class so that's how we can create really basic reveal hard functionality using event listeners which looks pretty simple but this technique actually can be used for many different things so for instance you can use it for things like toggling a menu on small screens so when you see that hamburger menu or you can display error messages with this and many more things you can do so guys that's how we can create events in javascript how we can fire off different types of events and again there are loads of different types of events we can create and i'll leave a link in the description for you guys if you guys want to check those out now this is actually just scratching at the surface of event listeners there are some things lurking underneath or more appropriately put lurking behind the scenes of event listeners and that is event propagation and event delegation let's first take a look at what event propagation is and what it means now event propagation refers to how an event travels through the document object model or the dom tree and you can think of event propagation as electricity running through a wire until it reaches its destination now as we're fully aware the dom is full of nodes and when referring to event propagation and events the event needs to pass through every node on the dom until it reaches the end or is forcibly stopped now event propagation is also the umbrella term which is used to cover three phases when dealing with event listeners you first got the event capturing then you've got the target and then you've got the event bubbling now in the simplest definition the capturing phase starts from the root and travels all the way to the target after it's reached the target it goes into the bubbling phase which travels back up from the target to the root so to better understand this let's take a look at a visual representation of the event propagation so in this slide you can see we have a basic diagram of our three phases now imagine that our button at the bottom here has a click event attached to it and is being clicked now when this happens javascript behind the scenes starts three phases first it begins with the capture phase where it starts at the highest level of the dom and it'll trickle all the way down i will notify each element so it will notify the html element the body and the div and tell it that something underneath it is being clicked so again going back to that analogy of electricity running through a wire so this will trickle until it reaches the target phase this phase is a dom node in which we click so in our example the button here at the bottom has a click event attached to it so this would be the target and essentially our target phase so once this target phase is triggered the next phase is what we'd call the bubbling phase which is essentially just the opposite of the capture phase this travels back up the dom and notifies every element so the div the body the html the document all the way up to the highest level period of the target again this is all happening behind the scenes and it's almost instantaneous so let's go ahead into vs code now and take a look at what this looks like in the browser and the console all right guys so we're inside this code here and you can see in our example here we have several elements nesting inside of each other if you take a look at the html the markup is pretty simple for this so we've got our div which has a class of div two inside of that we've got another div with the class of div one and then inside of that div we have a button element so this is what it looks like in the browser and as you can see it just has some basic styling now if we head into the javascript here you can see we have event listings on pretty much everything in the dom tree so we've got one for the window we've got one for the document we've got one for the div two div one and then the button here now as you can see i've set this up a little bit differently in regards to the event listeners instead of creating a variable for the window the document as well as the elements here i've just added the event listeners directly after now creating a variable and doing it this way both work perfectly fine but for this example there's less code here and it just saves me scrolling up and down a bunch of times which can be a pain for people now in regards to the events themselves you can see their click events and as for the functions they just simply log in their respective name in the dom tree except for the button here now instead of the text you can see we've included an e inside of the functions parameters as well as the inside the function we're logging in that e now i will explain what this is in just a moment but first i just want to draw your attention to the third parameter inside of all these event listeners so if i highlight them all for you now you can see they all have a boolean value of true now if you guys remember back to a bit earlier in the video when we were learning about the ad event listener method there was a third optional parameter we could include well this the parameter dictates whether we want to use event capture or event bubbling so let's go ahead and click on the button here in the browser and see what this gives us in the console so as you can see now in the console it's giving us the first phase which is the capture phase so it's starting from the window and then it's going down and notifying all the other elements it comes across all the way down to the target which is saying is this pointer event now the stuff that you see here represents all of the information about that event so this is exactly what that e means inside of our function here which is inside of our button so this e represents the event object and again this is exactly what you see here in the console all this information is about that event that has occurred on this button so if i open this up you can see all the different properties and information about our event here so we've got all sorts of things we can take a look at and utilize so we can find out what type it is we know it's a click event we can check out where exactly that button is exactly on the screen in a browser on the x and y axis we can also check things like whether the shift key here has been pushed down same false because we didn't use the shift key so all sorts of things that we can use here and utilize now the main property i want to bring your attention to and the relevant one to the three phases is the target property here so this here you can see it's saying the button so this property represents the element that the event is actually on so again it relates to our target phase so if i actually go into our console here and i type in here dot target and i'll just refresh this and i click on the button again you can see now it's starting from the window going to the document div two div one because we're using the target property to show us what element the event is on which again is our button now again we can do some other cool things here so let's just say for example when we click on this button um we'll just change the text to say clicked so after the target we say dot in our text and set this to equal it to say clicked so what should happen if i click on the button it should change the text to click so as you can see now in the console when we've clicked the button it's changing the text to click because what we've done is use the event object to grab the target which is the button and then from there we use the inner text property and then change it to click so when this function files off the buttons text change to click so as you can see here in the browser and if you also take a look at the console you can see we also see phase one so the capturing phase so we start the window document div two div one and then click which is the button so that's the first and second phase how do we now initiate the third phase which is the bubbling phase well to do that all we need to do is just grab all of the true values here for our third parameter and just change them to false now these are actually false by default and if i click on the button now you can see it started from the button and then it's going to div 1 div 2 document and then the window so it's bubbling upwards hence the term event bubbling so from the target it's bubbling up to the highest position in the dom tree now there are ways we can actually stop event propagation so let's just say we wanted to stop the bubbling um to happen at the second div we can do that with the stop propagation method so let's go to the second div here include our event object then inside of here we'll just say e dot stop propagation so what should happen now is when i click on this button once it reaches the second div we want the propagation to stop so we'll no longer be able to see the events on the document and the window so if i click on this you can see it's going from click to div one div two because we've stopped the propagation in our function here now this also applies to event capturing so if i grab all of the third parameters here and change them to true so we're in the capture phase and then i click on this button you can see the opposite is happening because we're starting from the window where the cap where the capture phase begins then goes to the document and then goes to div two and then stops at div two because we've stopped the propagation so that's how we can stop event propagation happening forward capturing and bubbling another useful ability we can utilize an event bubbling is to have events far off only once so for this example again we'll use div two and i'm just going to comment out the stop propagation method there take out the e and then change with these two false even though they're false by default um we'll just keep it like this for consistency so again if we only want div two to fire off once for our third parameter here what we can do is grab the once property and set this to true now if i click on this button you can see it fires it all off as normal so it starts from the click and bubbles up all the way to the window if i now click this button again you can see it's starting from the button or the target going to div one but now dev2 is no longer firing and then it goes on to the document and then the window and then again if i click this again you can see the div 2 event isn't far enough because again what we've done here is defined that we only want this event to fire off once now another common method you likely run into is the prevent default method now what this method does is pretty self-explanatory really it just prevents any default behavior that might occur on an element or an event so this is quite dependent on the type of element involved and the context of an event so to see example of the prevent default method what i'm going to do is go into the index.html and i'm just going to change the button to an anchor tag and i'm going to give this a class of a button and i'm just going to put in here click and then uh we'll go where the styling is for the button and we'll make this a class and then what we'll also do is just put it on a new line so we'll say display block because anchor tags are inline by default so we'll head into the app.js file and what also do is just make sure our query selector here is targeting that class of button so our anchor tag now and this event listener here is now the target and the event and because we've changed the button to an anchor tag if i click on this now you can see it's firing off all the events but they quickly refresh and the reason it's doing this is because the default behavior of an anchor tag is to try and redirect us to somewhere else and this is what's causing this quick fire off of all the events and then a refresh now we can stop this from happening with the prevent default method so to do that we'll go inside our button here or the class of button and we'll grab the um event object prevent default and if i click on the button now you can see it's showing us the bubbling phase the content has changed to click that it's staying there and all this has happened now is because we apply the prevent default method onto our anchor tag so it's no longer trying to direct us somewhere else now we will see a more practical example of all the methods we just learned so the prevent default uh the stop propagation in part two of the tutorial where we look at practical examples and projects but i just wanted to make you guys aware of these um so they don't confuse you in that subsequent video now the last thing i want to mention in this tutorial guys is event delegation now event delegation is one of the most potent event handling patterns inside javascript and the dom and what it does is allows users to append a single event listener to a parent element that adds it to all of its present and future descendants that match that selector now what we'll do is actually break this definition down to show you guys exactly what it means now the first part here where it says it allows users to append the single event listener to a parent element adds it to all of its present children to find out why this is useful let's actually just go back a few steps and see how we get to event delegation so if we head back into the index.html file you can see we've got an unordered list which has a bunch of different sports inside of it now this honorable list has an id of sports and then each of these list items have their own id which is equivalent to the content that you see inside of each of the list items and this is what it looks like in the console now if i click on one of these list items you can see it's showing us in the console that football's click and it also changes its background to a light gray again to highlight that has been clicked and again this is going to be the same for each individual list item now to achieve this what we can do is apply event listeners to each individual list item that we have inside our unordered list so we'll head into the app.js file and we'll grab the first list item so we'll say document dot query selector grab the id of football add the event list now and we're going to look out for a click event grab a function inside of the function we'll include the event object and then inside of this function uh what we want to do is uh first just console log in let's say say football is clicked and then the next thing i want to do is change that background color when we click on the actual list item so to do that we're going to first need to create a constant so we're going to say call this target and this is just going to equal e dot target which is that list item and i'm going to say if and the condition we're going to put in here is if target matches so matches is just a method basically which essentially checks with the target which in this case is the list item matches with our css selector which is going to be li this is going to return true and then when it returns through it's going to change our background color so after condition we want to include the code that we want to execute so we're going to say target dot style dot background color and we'll set that to light gray and if we head into this folders live server here you can see we have the exact same layout and what should happen now if i click on the football list item the background should change to a color of light gray and it should also show here in the console so if i click on this you can see saying football is click and then it's changing the background to light gray because we've just created an event listener for it um inside the app.js file now again if we wanted to do it for all of these what i need to do is just duplicate this four more times so instead of football here we have basketball and then for the third one we have boxed for the fourth one we have tennis and then we'll create one more for golf and now all the starter then the console logs should be working for each of the list items so we'll start with football see that's working basketball's working boxing's working tennis and golf are also working so we're getting the exact same thing as our draft example here except the text is a little bit different but again it's the exact same styling and you can see it's working perfectly fine now this is great and works fine there's no real issue with the code here because we're getting the exact same result as our draft example but as you'll learn throughout your code and journey there are always questions to ask when you have written out your code to help improve it so you can ask yourself things like can we remove some of this code can we remove some of the event listeners and still achieve the same result can this task be done writing less code instead or can we even optimize this code and the simple answer really is that we can we can write less code here and achieve exactly the same result using event delegation so the idea of event delegation is pretty simple instead of attaching the event listeners directly to each of the list items here we can delegate the listening to the parent which is the ul here which has the id of sports so that when the li is clicked the listener of the parent element catches the bubbling event and performs our task which change the color of our background to light gray when we clicked on one of the boxes and also showcased some text inside of our console here so what we're going to do to achieve this now is go back to the app.js file and get rid of all this code here and then we're first going to grab that unordered list element which has the id of sports so we'll say document dot query selector and then we'll say we'll grab the id which is sports and add the event listener to this so a similar process it's going to be a click event rudolph function which has the event object inside its parameters inside of our function here we want to say let's console log that bit of text so we'll say e dot target dot get attribute method of get attribute and we want to get the id and then we want to say plus we'll put in here is clicked so what we're saying here is that when the target which is our list items has an id attribute which all of them do whichever one that we click on will display that specific sport plus the extra bit of text here of is clicked so if i go ahead and click on one of these now you can see it's saying football is clicked if i click on tennis you see tennis is click golf boxing and basketball so you can see all of these now are working because we've attached that one event listener to the parent element which catches the bubbling event and then performs our task which we've written in here now we also want to change uh the background color when we click on these so to do that first going to need to create a variable of um the target so we're going to say target it's going to equal e dot target which is those list items and then we're going to say if the target variable there matches our css selector which is our li we're going to want to change the uh background so say target dot style dot back ground color to a light gray so again if i click on one of these now uh we're getting an error um that's because i spelt matches wrong so again if i click on one of these now you can see the text will appear in the console highlighting which one i clicked and then we also now have the extra feature of where the background changes to a light gray for all of our list items there now again this brings us back to our first um part of our definition which allows users to append a single event listener to our parent element that adds it to all of its present children and as you can see this is clear benefits ranging from code quality as well as code maintenance because instead of having all those lines of code um in the previous example where we attached an event listener to each of the list items we now have it all inside one event listener here now we've also improved our performance because having more events in our code will take up a lot of memory and using event delegation we're going to save a ton on memory which again will vastly improve our performance inside of our projects now another crucial benefit of event delegation is the second part of our definition here so the first part was it allows users to append a single event listener to a parent element that adds it to all of its present descendants now the second part of this definition was that it also adds it to future descendants that match that selector so this is actually in regard to dynamic elements so let's just say we had an add button here at the end of this box where it allowed us to add another sport to our list so let's actually just manually do this to show you guys exactly what i mean so first we're just going to create a constant for our um ul which has the idea of sports so we'll say const say sports equals document.queryselector and then we'll just grab the id of sports again which is that ul and then what we'll also do is create another list item so we'll say const new sport equals document dot create element and we'll create another list item and then what we'll do is uh we'll say new sport so that variable which is that new list item uh we'll give it uh in a text of uh let's say let's make the sport rugby and then we'll also give it the uh id of rugby so we'll say set attribute first an id attribute and then we're gonna have the uh id of rugby and then what we want to do is append this now to our list so we'll grab the sports variable which is the ul and we'll say append child and then the chart we want to append is of course that new sport so let me say new sport so as you can see now rugby has been added to our list here so if i click on this it's got the exact same styling and the output in the console like the rest of the list items would because we now have an event listener to the parent which is the ul and because of event delegation we've delegated the event to the parent and as you can see this gives us the power to dynamically add new list items and those new list items will display the same behavior so again without the magic of event delegation we'd have to use the method we previously used we would have to include event listeners to each individual list items and that includes any new list items that might get added on along the way which will just clog up memory effect performance and just create too much unnecessary code so that's going to be it for this video guys in this video we're going to be using everything we learned in part one and applying it to five different projects ranging from beginner to master level so just like in part one guys there's going to be a few prerequisites in order to effectively understand the dom and how it relates to these projects i highly recommend checking out part one first as well as also having an existing knowledge of html and css now in regards to styling we're not gonna be focusing too much on it for our projects because this isn't really the goal of the course however there will be substantial css styling involved and then lastly it's going to be essential to have familiarity with the fundamentals of javascript and the syntax and the code structure because obviously we're going to be using javascript in this course all right guys so our first project for this course is going to be this beginner friendly quote generator that houses a quote and then has a reference by someone famous underneath it now underneath that reference of that famous person we have a button which says new quote and if i click on this you'll see it'll just generate us some new quotes by someone else famous so pretty cool design and quite simple to create now some of the key concepts we're going to need for this project is document.queryselector add event listener of course the math object and in a text property so now we know what we're creating and the key concept we're going to need let's head into vs code now and create our quote generator all right so we're inside vs code and you can see we're inside a folder called master dom manipulation part 2 inside of an index.html file as well as having a style.css file and a javascript file for our project one and also have an image folder which has all of our images which is just going to be the background uh image for all of our projects so the first thing we'll do is include a link to our style sheet so we'll go inside here and we'll grab style.css now the next thing i'm going to do is go and get a google font so we'll head over to google and the global font we're going to be using for our project is going to be a roboto regular 400. so we'll just grab the link here inside google fonts head back into vs code and then just paste it underneath the style sheet there and then just tab this over so it is looking all neat and what we'll do as well is just put a comment here so uh global font links and we'll do the same for the style sheet and then lastly what we'll include in the head tag is just a link to font awesome so we can grab all of our icons that we're going to be using throughout the project so we're heading to our font awesome cdn here and then we click the first link so we copy the link tag head back into vs code and then just paste it under our google fonts so we'll just say font awesome i think place that in there close that off and then let's open this up with live server so we have our blank canvas and we can see all of our work and we'll split screen this and just a bit smaller so we're ready to start a markup for our first project so if we take a look at the original example you can see we have two sections here so we have our heading and then we also have the main section which houses the quote uh the famous person and the button so we'll head inside the body we just put a comment here for project one quote generator and we're going to house this project inside a div the class of container hit tab and then again we're going to need a header so we'll just put another div here with a class of header put in here a h2 and we'll say java script quote generator so you'll see that there in live server and then underneath the header we're gonna have this content here which has the quote as well as the name of that specific person who said the quote and then the button underneath which will um generate a new quote for us so we'll get back into this blank canvas there we'll go underneath the header and we'll just create a div with the class of main content which again is just going to house everything scroll down a little bit and then the first thing we need is the actual text area so we can just put div call it text area inside of that we want to have a span which has the class of quote which is going to be our quote and then i'm going to paste our quote inside of here which is the exact same as the original example and then underneath the text area div we want to have a div for the actual um famous person who said the quote let's keep it simple and just say person hit tab and then this person for this quote is abraham lincoln so we have our quote now as well as having the person who said the quote and then of course underneath this we're going to have the button so we'll house the button inside of a div with the class of button area and this is going to house our button so this button is going to have an id of say new quotes we're going to need to grab onto this later and we'll just put in here text of new quote so that's essentially it for our markup let's head into the style sheet now and just apply some general styles first so what you put in here general styles so we use the asterisk to grab everything and we're going to say margin zero padding zero box size into border box let's also make sure that the uh font family for all of our projects is our lato font uh we'll just have sans serif as a backup and then let's first grab the body element because we want to use display flex to center everything so we'll say justify content to the center align items to the center let's use the height and make it a thousand one hundred viewport heights which would be the height whole height of our um window there and then let's also text the line everything to the center and then the next thing i'll do is include our background image for our first project which is this sort of library image here so to do that we'll grab the background property url grab the image folder head inside it and grab project one now this is way too big at the moment so the first thing i want to do is add a few more bits of styling so no repeat uh we want to center everything on the x and y and then we want this to cover the whole body so as you can see now it looks pretty much exactly the same as our original example so that's it for the body there next thing i want to do now is grab the container class which houses everything i'm going to give this a width of 550 pixels a height of 450 pixels now the next thing we'll do is just style our heading which is the javascript quote generator text there so we'll grab the header class and let's uh increase the font size of this to say about 1.2 rem and let's give this a border of solid say about 2 pixels and make it a nice white color change the color of the text to white uh let's make that a bit clearer so we'll change the background color to uh a bit of a darker gray let's also add a bit of padding there between the text and the border so about five pixels and let's make the width of this to be about say about eighty percent set the margin to uh let's say 20 pixels from top and bottom and about and then auto on the left and right so this is centered now let's actually make the edges of our border here a bit more rounder so we'll use the border radius method property let's make it about five pixels i just think that looks a little bit better so that's it for our heading now let's grab the uh main content which is basically just all of our content here so the um quote the person who said the quote and then the button itself so this is a class of main content so what i want to do is just make the width of this 100 the height let's make about 300 pixels the padding let's give this a background color of white so there's our content let's also make the edges more rounded so say border radius so about 15 pixels let's uh also add a bit of padding here between the content and the edges so we'll say it's about 50 pixels on the top and bottom about 40 pixels on the left and right uh next thing i want to do is actually give this a box shadow so it gives it more of like a 3d look so let's say zero on the x and y let's put about 10 pixels blur so the box shadows all the way around which i think looks a lot better there now let's uh style the text or the quote so this is the main content and the text area so let's just give this a font size about let's say 1.5 ram see what that looks like yeah i think that looks pretty good let's also add a bit of line height here 1.5 give it a bit of breathing room and uh yeah i think that looks pretty good now we want to style the person who says the quote so we'll say main main content dot person and let's increase the uh size of the text so we'll say font size let's say about 1.6 rem yeah looks pretty good change the color to red uh let's think the original is capitalized so text decoration uppercase so text transform uppercase now of course we want to add a bit of margin here so let's say margin top it's about 20 pixels so i think that's starting to look a lot like the original as you can see there now let's uh let's now start the button so we'll grab the uh button area which uh houses the button and we'll grab the actual button itself uh so um let's change the background color to that dark gray let's change the color of the text so we can see it to white and let's uh increase the font size of this to say 1.2 rem let's actually make that a bit bigger 1.3 and then let's add a bit padding of course so i'll say 10 pixels on the top bottom about 15 pixels on the left and right let's also add a bit of margin to the top of this to separate it from that text there margin top let's say about 20 pixels and then let's make it rounded on the edges so border radius let's say about five pixels so the last thing i want to do here is that when we click on this um you can see in the original when we click on this it actually uh changes color so we need to change its active state so we'll just grab this and let's grab the active pseudo class and we'll say the background color let's make it a light blue so that's pretty much it for the styling all we need to do now is start applying some logic to this so we can generate new quotes when we click on this new quote button so the first thing we're going to need to do is head into the index.html file and just go underneath all this content here and just put a comment for scripts because this is where we're gonna be placing all of our scripts and then we're just gonna link to that script file or our first script file so we'll sort it to it's called project one dot js so we've linked it to our javascript file so we'll head into that the first thing we're going to need to do is just create some variables so we're in the variable for our button here as well as the quote and the person that said the quote so we'll just put a comment here saying variables and we'll say let btn equal document dot query selector and then we'll select the um button which has an id of new quote so we've stored our button inside that variable there we'll create another variable now for our quote itself so we'll just call this quote we'll set this to document.queryselector and i believe this has a class of quote close that off so now we've stored the span which has the quote inside of it inside that variable there and then lastly we're going to need one more for the person and we'll say document dot query selector and this has a class of person so we've got our three variables there now the next thing we're going to need is array for all of our quotes so we'll call this array uh let's call it quotes now i'm going to copy and paste all the quotes i used in the original example um which i just found on the internet i'm not really sure if they those individuals actually said those quotes if you guys want to use different quotes and people for your quote generator feel free to do so so i'm just going to paste those in there so there's all our quotes there which i think is a total of 10 quotes so the next thing we're going to do here is now apply an event listener to our button here so when we click on this button of new quote it will generate a new quote for us so one of these quotes by one of these individuals so we'll go underneath the array and we'll say btn.ad event listener and we're going to look out for a click event and we're going to have a function now inside of our function here we're first going to need to create a variable which houses a basic math equation which is essentially just going to involve the built-in math object and a couple of its methods so let's call this variable let's call it let random now as i just mentioned javascript has that built in math object and this object has several methods now the two that we're going to be using in this equation are math.floor and math.random now i will go over the equation again but i first just going to create it quickly because it's just a bit easier to explain so let random is going to equal math dot floor and then inside of this method here we're going to have math again dot random and we're going to times this by our quotes array dot length which is essentially just all the quotes in our array so again how this equation is working is that the math.random times the quotes dot length will generate a number between zero and the total number of quotes inside of our quote array now because math.random doesn't actually generate a whole number we need to wrap this equation in math.floor or the floor method which essentially just rounds a number downwards to the nearest integer and what this will do now is allow us to access our properties inside of our array which are the variables of quote and person so that's essentially how this variable and this math equation is working here now this equation will randomize through our quotes array however we need to display the quote and person inside of our array to a string format so to do that we'll go underneath the variable here and we'll grab let's grab uh quote first and we need to change the inner text and then we're going to set this to equal the quotes array square brackets to turn it into a string format and we'll put in the random variable and we'll say dot quote and then we'll do the exact same thing but we'll do it for person so i'll just change this to person and this now should randomize through our quotes array and display new quotes said by different people so if we go to the button and we click on the button it's generated us new quotes and it's also giving us different people who have said those quotes and that is our first project completed so a pretty cool project and pretty straightforward to create all right guys so the next project this course is the beginner plus project which is a modal now a motor is essentially just a ui element that appears in the foreground of a website and they're usually triggered by the user allowing them to view more information or complete an action without having to navigate to another url in our case it's just going to show more information so we have our ui element here in the foreground and then if i click on this you can see another box animates downwards the rest of the content darkens so it puts a lot more focus in the box in the middle and that's essentially what our model is here now of course in this box you'd likely have more information but i just wanted to keep it simple uh for this example now the key concepts we're going to need for this project switched up a little bit we're going to be using the document.elementbyid of course the ad event listener method the e.target and we're going to be using css styling throughout javascript and we're also going to include some css animation in this project so let's head into vs code now and create our model all right guys so we're back inside our master dom manipulation part two folder and as you can see we've got our blank canvas there open up in live server so the first thing we're going to need uh for our markup it's just gonna be the modal open button so we'll just put a comment in here model open button which is the button if we take a look at the original example uh this button here which is going to trigger our model so we're just going to have a button this is going to have an id of open btn because we're going to be using a element by id for this example and we're just going to put a paragraph tag in here and this is just going to have the text of where's uh model so that's it for the open button now the next thing we're gonna need is the actual model itself so i'm just gonna put a comment in here say modal and modal background so we're going to have a div with the id of modal container inside of that we're going to have our div with the id of modal which is going to be our modal paragraph tag inside of that which is going to say here i am and then underneath that we're going to have another div which is going to be our close button so we're just going to have let's say div we'll give this an id of close btn and to create that x we're just going to be using a html entity so it's going to be an ampersand times semicolon and that's going to be that cross that you can see there so that's all we're going to need for the markup the next thing i want to do is just quickly uh comment out this script for project one but duplicate this and then link it to project two so if i actually open this up you can see i've created another um js file which is project two just close that back up so the next thing i want to do now is just apply some styling so we're heading inside the style shape and the first thing i'm gonna do is get that background image that you see here in the original example so we're just going to grab the body and we're going to change the background to url and this is going to be the image folder project two and then apply those same rules that we did in the previous example so no repeat center center and then we're gonna have cover so we'll be able to see the image there and then to make it the whole heart of the browser should change the height to 100 viewport heights so there's our image now the next thing i want to do is actually position this relative because i want to initially position our button here a little bit further down and slightly to the right just like it is in our example here so what we're going to do is now grab that button which has the id of open button i'm just going to open our module set the position of this to be absolute so we can now position this anywhere um on our browser there i'm going to say top say about 70 and then let's also from the left 10 now let's start giving this a bit of styling so it looks a little bit better uh we'll give this a width of 350 pixels make it a bit bigger and we'll also give it a height let's set about 80 pixels uh let's make the font size a bit bigger let's say about two ram see what that looks like yeah it looks pretty good and let's make the background transparent just like the original change the color of the text to white so we can see it um let's also change the color of the border uh let's make it solid two pixels white now let's also uh let's add a bit of uh border radius to the edges just because i think it looks a lot neater when the edges are rounded uh so let's say about 10 pixels and maybe a bit padding it's also about five pixels there that looks pretty good let's also use our good friend box shadow give it that nice 3d effect so we say zero on the x and y but three pixels blur so it goes all the way around uh let's make it black yeah looks good um now if we take a look at the original you can see there's an effect on there so we need to add a transition uh transition say about five seconds uh so that's pretty much it for that styling the next thing i want to do obviously is add a bit of a hover effect so we'll just grab this so we'll just grab this and paste it in here over effect we'll hover class and we'll change the background color uh let me choose the background color to white and then the text to uh black so there's that effect which is the exact same as our original there that looks pretty good now the next thing i want to do is style our model here which is going to be that box that um shows up when we click on this button here so uh has the class of modal and then we'll change the background color of this to be white we'll set the position of this to be absolute then we'll say scroll down so you can see we'll say top 50 left 50 and then transform translate and we'll say uh negative 50 and negative 50 which would basically just uh center this in the middle so this is just another way to actually center content instead of using flexbox or css grid now i want this to be a bit bigger so we'll say width so 200 pixels height let's say 100 pixels um give it a bit of padding on the top and bottom and then 20 on the left and right uh the old classic border radius give it rounded edges and then uh the font size let's make this a bit bigger let's say 1.5 rim now this is actually not going to display at the moment but i just want to create the styling here um so we don't have to do it afterwards now this model is actually wrapped inside of the modal container which we're going to be displaying as none initially because we don't actually want this to show but i just wanted to start everything first before i make this sort of disappear initially now the next thing i want to do is if we take a look at the original example you can see that the text is on the left and the x is on the right so to do that we're going to be using display flex so we have like a nested flexbox and then we'll just say justify content space between and then we'll align the items vertically to the center now if we take a look again at the previous example click off this you can see this actually animates from the top so we're going to be using keyframes uh to do this so i'm going to create an animation um say animation animation name we're going to call this animate modal and then we want the animation duration which is going to be 0.4 seconds we'll create this animation right at the end but i just wanted to again put all the styling on this modal uh first before we get to that so the next thing i'm going to do is style the cross here so this has a class of not class rated id of closed btn font size um let's make this about three rem so it's nice and big and then let's apply a hover to this so when we hover over it it turns red so close btn um let's make it also a cursor pointer uh font size let's also make sure this is three rem and then change the color to a red color so say f 0 0 0. so there's our cross there now just to quickly mention guys this is the same style sheet we were using in the previous project so it has those general styles there just in case that confused some people but anyway uh we've done the modal now so what we need to do is actually grab the modal container and actually initially make this disappear so we'll grab the modal container and we'll display this as none comment this out so we can still see it but what i want to do is actually position this to fixed so it's right at the top there and we'll say top zero and then left zero width one hundred percent and then the height to also be 100 and then have the z index here let's have this at one so it's above everything so let's just uncomment this now so we can no longer see it so that's nearly it for the styling um there's still some styling in regards to the animation which we can do in just a moment but let's first start applying some javascript to this so we're heading to the project 2.js file and the first thing we're going to need to do is just create some variables so one for the open button one for the modal container and then one for the close button so we'll just put in here comment for variables we'll say let open vtn equal document.getelementbyid which you're going to be using for this example and this has an id of open vtn and then we'll create another one for the modal container so we'll say modal container equals document dot get element by id and this has an id of modal container and then one more for the close button so close btn equals document dot get element iid and this has an idea of close btn so that's it for the variables the next thing i want to do is now start writing out our of event listeners so we'll just put in here event listeners so the first one we're going to apply it to is the uh open btn variable so the open button so we'll say open btn so add event listener look out for a click event function and inside of this function we're going to be using css styling so we're going to grab the modal container and we're going to grab the style attribute and then inside the star we're going to be using the display property set this equal to block because if we take a look at the style.css you can see we have this as displayed as none now we wanted to display it as block when we click on the open button which is this button here so if i click on this now it should show us our model as you can see it's popping up in the center there so this event listener is working now we can't actually click off of this model so we can't really close it we're going to need a couple more event listeners so we'll do one for the close button there so we'll say close btn add event list now look out for a click event function and inside of this function we'll apply the same sort of styling so we'll say mode or container dot style display attribute display property and then we'll set this to none so we'll just refer back to none so now we've got two event listeners here we've got our open button and then for our close button there if we click on this this should get rid of our model and as you can see that's working now now if we take a look at the actual original example if we click on this and we show our model it closes if we click on the close button here but if we also click outside anywhere of our model here you can see it closes the modal tube so i want to add another event listener so we can do that so we actually apply this to the window object so this is actually the highest object in the dom tree this goes above the document so we'll say look out for a click event function again we'll insert the event object in there and then inside of the function itself we're going to use an if statement so we're going to say if e dot target if you guys remember back to the um part 1 of this course the event.target essentially just returns the element that triggers the event which in this case is going to be our window so we're going to say if e.target is equal to modal container we're going to grab the modal container use the same style attribute display property i'm going to equal this to none so again what this should do now is when we click on this to activate our modal so we can see it on the screen we should be able to click anywhere outside of this module and the model will disappear so as you can see that's working if i click up here disappears click up there disappears and if we also click on the close button it will disappear so that's pretty much it for the javascript pretty simple design really and quite simple to create the next thing i'll do is just apply some style into the module and the modal container because if i click on this you can see that the background darkens around the modal as well as the modal smoothly animating from the top of the browser there do that we'll head back inside our star.css and to create that nice animation you can see we've got animation name and the animation duration we're going to be using keyframes so we'll just say a comment here first modal animation section we'll say the at keyframes rule use the name which is animate modal is that oh it's not got a capital m what you want to say is just use the from n2 so from when i say top negative 300 pixels set the opacity to zero so we can't see it and then two let's say from the top fifty percent and then the opacity to one so as you can see when we type in this keyframe out the animation is working so i'm just going to click off this click on our open button and you can see now the modal is animating exactly the same as the original and lastly i just want to create this this dark background when the motor appears so to do that we're going to go in the modal container here or the id of a motor container add a background color rgba we'll say zero for red zero for green zero for blue and then for the alpha which is the opacity we'll say point two and as you can see it just gives the modal container and which is wrapping around the model a nice uh dark effect which just gives us a good emphasis on the model itself this now looks exactly like our original example it looks pretty good so our third project is going to be an accordion now what an accordion does is let you squeeze in a lot of content into a small space and a web page and a classic example is like one in our project here which is an faq or frequently asked question which you'll most likely see in utilized in many websites so as you can see here we have a couple of questions just some random questions like a return policy or where they're located and if i click on one of these you'll see it open up and show us more content which again is a really useful project to learn as you're most likely going to be utilizing this type of design in many of your own projects now the key concepts we're going to need in this tutorial are document dot get element by class name this time of course the advert listener the for loop but this keyword on the classlist and toggle method so let's head into vs code now and create our accordion all right guys so the first thing i'm going to need to do is create the markup for the accordion so we're going to have a class of accordion which basically just houses everything or the accordion then i'm gonna have a h2 the class of uh say accordion title and we'll say frequently asked questions and underneath that we're going to have several containers which is going to house the question and the answer and you guys can put as many of these containers as you like but i'm just going to use three which is the exact same as our draft example so we're going to create that class of content container and this is also going to be the class that we link to our javascript so we can show that extra content so inside of these we're going to have class of question so the question first question is what is the return policy and then we're gonna have the class of answer which is just going to be some dummy text and then we'll just duplicate this container two more times again you guys can include more if you like but we're just going to stay the same as the draft example so that's essentially it for the markup let's head into the style sheet now and just apply some uh styling to this now the first thing we're going to do is just grab the body and include our background image so this can have a url image folder project three and then a few more bits of styling so no repeat center on the x and y and then cover so we can see the whole image make this the whole height of the browser and then use flexbox again to center our content and then align items to the center so that's all we need for the body let's start applying some styles to the accordion which pretty much just houses everything we're going to give this a width of 65 and background color let's give it a white background color add a bit of padding so let's say about 30 pixels all the way around and then of course a good friend border radius just to make the edges more rounded so so we'll apply 30 pixels there now for the title itself uh we'll go and give that a bit of styling this has the accordion title styling scroll down so you guys can see a bit clearer we'll just add some margin bottom of 30 pixels to separate from the rest of the content and then text the line to the center so it's centered there now let's apply some style into our questions there so grab the accordion content container and then grab the question or class of question and let's give this some padding too so 18 pixels on top and bottom zero pixels on the left and right and let's also uh increase the font size a little bit 22 pixels set the cursor to a pointer and then let's add a border bottom here one pixel solid black so it has a line underneath the questions just so it's a bit clearer to see the separation between that and the content and then the next thing we need to do here is set position of relative that's because we're going to be positioning the open and close sections that you see here in the original example absolute to our question class so that's what we're going to go ahead and do now so we'll grab the accordion class content container question class and we're going to be using the pseudo element of after and we'll go inside this and we'll grab the content property and use a plus sign in there and then we'll position this absolute and then from the right we'll say about negative five pixels so i think that looks pretty good there let's now focus on this content here so the dummy text so we'll go underneath this bit here grab the accordion class grab the content container and then we'll grab the answer class which is the dummy text and we'll add a bit of padding top of 15 pixels just so it separates it from the ball the bottom there will increase the font size of this it's about 22 pixels as well and then let's add a bit of line height let's say 1.5 between the content and then make sure the width of this is a hundred percent now of course we want this content to be hidden initially like it is in the original example so to do that what we're going to need to do is change the height of our answer class there to zero pixels now if you take a look at the browser you can see that all of the content is overflowing it's doing exactly what we wanted to do by setting the height to zero pixels but of course all this content here we want it to be hidden so what we can do to hide that is just use the overflow property and set that to hidden and as you can see all of that content isn't showing now one last thing i want to do in here is that if we take a look at the original example we open this up you see it's nice and smooth so to do that we're gonna need to set the transition of this to be about 0.5 seconds so that when we do apply the javascript and we click on these it'll be nice and smooth so that's almost it for the styling we're going to need a few more bits in just a moment but first we need to create the javascript to get this all working so we'll head into the javascript file there and the first thing i'm going to do is just create a variable i'm just going to put a comment here variable and this variable is going to be called uh accordion and we're going to be using the document dot get element by class name so this is going to select all the elements with this class name and we want to select the content container classes which houses the question and the answer now we're going to want to access all of these classes and to do that we're going to need a for loop so we're just going to put in 4 we're going to have a variable of i equals 0. and then we're going to say i is less than the accordion dot length and if it is less than the accordion.length which it will be we want to increment this our variable by one then inside of this for loop because we're essentially selecting all of the classes of content container we want to apply an event list now on each of these so we'll grab the accordion and then grab the variable of i inside of our for loop and then add an event listener here in where we want a click event so on each of the content containers we want to click event then we're going to include a function and then inside of this function what we want to do is reference the object which the function is a property or in other words reference the object that is currently calling the function which in this case is our accordion and we could do that by using the this keyword and then using this we can insert a class of active on all of those reference points which are essentially our content containers so we'll say class list dot toggle which is just another method which i actually forgot to mention in part one but what this essentially does is just toggle between adding and removing a class name for an element with javascript and the class that we want to toggle is of course the one i just mentioned so we want to call this class active which i'll show you guys in a minute why we need to do this so what we've done here is store all our elements with a class of content container inside of this variable of accordion we then loop through this variable and this has allowed us to add an event listener to all of our content container classes and inside of the function we then reference this object that is calling the function i.e our accordion variable and then added the toggle method to either add or remove the class of active so all we need to do now is head back into our css and apply the styles to our active class we created inside of this function so we'll head back to star.css again and then what we'll do should put a comment here and say java script styling link go underneath here and then just grab the class of accordion grab the content container class select the active class we created inside of our javascript and then grab the answer or the class of answer which is all of that content which has a dummy text inside of it and then just set a height of this to be 150 pixels so what this should do now is using the javascript we just created toggle the class of answer so that when we click on any of the questions the height of the answer container will be 150 pixels instead of zero pixels and then show us all that content so if i click on this you can see now it's open up and showing us all that content so you can see that the javascript is working as well as the styling we just created with the active class we just inserted with the active class so just a few little bits here now to finish off so we'll just grab the accordion grab the content container grab the active class again and we'll grab the question so i just want to change some style into the question when this is clicked so uh let's affect the font size that's a little bit smaller so say about 18 pixels and we want this to be smooth so we'll just put a transition of 0.5 seconds so as you can see this shrinks down when we click on this um just so it puts more emphasis on the content there and then lastly let's change the open button to a closed section when we click on it just like it does in the original example here as you can see there so let's go underneath this grab the accordion class again content container dot active and dot question after pseudo-element change the content to a dash let's also increase the font size of this to 30 pixels let's give it a nice transition by five seconds and as you can see there it's all working perfectly fine the javascripts are working as well as the styling so that's going to be it for this project another really useful project to learn as you'll most likely run into needing something of this project's nature so for our fourth project we're going to be up in the ante a little bit and create this pretty cool stopwatch which as you can see here we have a play and also a reset button if i hit the play button you'll see it transform to a pause button as the stopwatch is starting if i pause it it will pause on that number and then i can also reset this if i want to so a pretty cool design and we're going to be implementing much more javascript for this project some of the key concepts we're going to need for this project are document.queryselector document.elementbyd add event listener if statements the tostring method the set interval method and inner html so now we know the project and the key concept we're going to need for the project let's head into vs code now and create our stopwatch all right guys so inside our index.html file the first thing we'll do is just create a div with the class of container and inside of that div we're going to house another div which is gonna have an id of timer and inside of this we're just gonna display our timer then underneath that we're gonna have our buttons so we're gonna have a div with a class of buttons and then we'll have the start stop button and this is going to have initially when we're first showing this going to have an icon and this is going to have a class of fa solid fa play and we're also going to give this an id of play and then we'll just duplicate this for the reset button reset vtn and this is gonna have an id of reset and instead of play it's gonna have arrow dash row tate dash left so that's all we're gonna need for our markup let's head into star.css and just apply some styling here so first thing we're gonna have is the body we're gonna include our background image just like in the previous examples but first let's just make the height 100 viewport heights background url img project 4 and of course some of that classic styling so no repeat center center cover so we can see the whole image so there's our guy there and then we want to position everything in the center so let's display this as flex justify content center align items to the center now let's grab the container which houses everything and this is going to have a width of 60 percent a height of 250 pixels background color is gonna be white let's give it that nice border radius 30 pixels and then let's just give this a bit of shadow so zero on the x and y and then three pixels blur so it's all the way around now the next thing i'm going to do is style the timer here so this is an id of timer set the width of this to be 100 font size uh let's make it 72 pixels so nice and big text align this to the center give it a bit of margin so zero on top and bottom auto on the left and right and then let's also give this a bit of padding top let's say about say 35 pixels just to push it down a little bit now as for the buttons themselves we'll grab the button we'll grab the buttons class which houses the buttons we'll text align this to the center and then let's give it a bit of margin on the top let's say about 40 pixels and then let's style the buttons here so so um let's give a bit of margin between them so they're not like squished up next to each other so let's say zero on the top and bottom about 10 pixels on the left and right giving that space uh let's also remove the border both of them and then let's style the actual icons so button i say font size let's say about two ram padding so about 10 pixels and then let's change the color to white now we can't actually see those really clearly so let's grab the ids of each of those so we've got one for play duplicate that one for pause which we'll create later and then one before reset now for play this is just gonna have a background color of green for reset this is gonna have that background color of red and then for pause it's gonna have a background color of orange and that gives them their background color now the buttons here actually aren't the same size so let's just quickly make these the same size so we'll say about 50 pixels yeah that looks a lot better so that's pretty much it for styling let's head into the project 4.js file now and start adding some functionality to our stopwatch here all right guys so the first thing we need to do is just create some variables for our buttons so just going to put here variables for buttons and we're going to say const start stop btn equals document dot query selector and then we're just going to select the id of start stop btn and then we're going to have one more for our reset so reset btn equals document.queryselector and this has the id of reset btn so there's the variables for our buttons the next thing i'll do now is just define a few variables to hold time values so um put a comment here again time values so we'll say let seconds equal zero let minutes also equal zero and then let hours equal zero so that's all the variables we're going to need at the moment the next thing i want to do is actually create our stopwatch function which is going to determine when our stopwatch needs to increment to the next number ie seconds minutes or hours as well as displaying that value in the ui so we'll just put in here uh stop watch function and then we'll just say function we'll call this stop watch so firstly what we want to do when we invoke this function is actually increment the seconds so when this fires off when we press the play button the seconds will start to increment so we'll just say seconds plus plus now of course if we leave it like this it's just going to increment the seconds it's not going to jump to the next value so if we wanted to increment when it gets to the minutes and the hours what we're going to need to do is just create an if statement and then we're gonna say seconds divided by 60 which is the amount of seconds is equal to one we then want seconds to jump to zero and then we want the minutes to increment so what we're saying here is that once this reaches 60 our seconds will restart and then the minutes will start incrementing so that's how we increment the next value now of course we haven't just got minutes we've also got hours so we need to include that as well so we'll apply the same logic here so minutes divided by 60 is equal to 1. the condition we want is that minutes let's back to zero and then the hours increment now what we need to do from here is actually create a variable to display this if statement in the browser so our stopwatch will actually increment otherwise the numbers will just stay static the way they are now so to do that we're just going to need to go underneath this if statement here and say let's say let display timer equal document dot get element by id we're going to get the id of timer and we're going to change the inner text just scroll down a bit so you guys can see that and we're going to set this to equal hours plus uh colon plus minutes plus a colon again and then finally seconds close that off so what we're doing with this variable is just making sure that when our if statements here are working we want it to be displayed in the browser so the way we can display that and check that out is we'll just grab the window object and then we're going to grab the set interval function which is basically just a method that calls a function at specified interval and the function of course that we want is going to be our stopwatch and this interval takes in two parameters so first the function and then the amount of time and we're gonna be putting a thousand which is a thousand milliseconds so we'll say stopwatch and then time of a thousand and if we take a look at the browser now you can see that it's beginning to increment and then if we just make this a bit quicker so we'll lower down to one you can see that the minutes now is also incrementing and then if we just wait a little bit longer it should jump to the hours and as you can see the hours now is also incremented when it gets to that 60 so i'm just going to put this back to a thousand and then comment it out now of course as you've just seen there when this function fires off the lead in zero disappears and if you take a look at our demo example here and we play this you can see that it starts incrementing as it should but the leading zero is still there now to fix this what we're going to do is actually create a couple more variables so we'll go underneath these variables here and then create variables for that leading zero so say variables for leading zero so we'll say let leading seconds equal zero duplicate this a few more times let leading minutes equal zero and then obviously hours now what we need to do is go back inside our stopwatch function here go underneath uh this if statement here and then create some conditionals to include that leading zero if our seconds minutes and hours is only one digit so we'll say if seconds is less than 10 we want to grab the leading seconds and then set this to that leading zero which is a string value but we also want to make this a string value so we'll say uh two string but we also want to make this a string value so we'll apply the two string method which will turn this all into a string else we'll just make sure that else we'll just leave the leading seconds to equal the normal seconds variable so of course we want to create two more for minutes and hours so we'll say this one is for minutes and leading minutes hours hours and of course we're also going to have to change uh the variable here too so we'll say leading hours leading minutes and leading seconds so again what we're doing here with the if statements is making sure that our leading zero will show if our stopwatch is only showing one digit and as we just seen when we invoke the function here with the set interval that lead in zero will disappear but because of the statements we've just created here and this variable which will display in our browser if i uncomment our set interval here it should start incrementing with that latent zero so i'll uncomment this out and as you can see now it's incrementing with that leading zero and if i just speed it up it should also apply to the seconds minutes and hours as you can see it's working in the minutes and then if we just wait a little bit longer again for the hours the leading zero should still stay there and as you can see it's working exactly the way it should so i'll just put this back to a thousand and just comment that out now we're actually invoking this stopwatch when the browser loads because we're immediately invoking it through the window object and our set interval function but of course we want to have more power than this and what we want to do is actually add functionality to our buttons so what we're going to need to do now is actually create a few variables to hold the set interval function as well as containing the status of our stopwatch and which i'll show you guys exactly what i mean so let's create those two variables we'll actually create them up here so variables for set interval and timer status so we'll say let timer interval equal null just for the time being because we want to choose when we want the stopwatch to run not when the page loads and then of course create another variable for our timer status i'm going to set this equal to a string value of stop we now need to use these variables and apply it to our start stop button variable there so we'll just go underneath here and then we'll grab that start stop button add the event listener we're going to look out for a click event we'll grab the function inside this function is going to be where we use those variables we just created so we're going to say if timer status is equal to stopped we then want to grab that timer interval variable and set it to our actual set interval function there paste that in there close that off we then actually want to change our button to switch from a play button to that pause button like it does in the uh demo example so we'll say document dot get element iid grab the start stop id there and then grab inner html set that to backticks and then we are going to grab the icon this has got a class of uh fa solid fa pause and then we want to actually include the id and which gives it that color of orange and this has the id of pause and then we'll close this off and then we also want to change the value of our status so we're going to grab the timer status and set this equal to started else if the stopwatch is now running we also want that functionality of where we can pause the timer so to do that we need to grab the window object again grab the clear interval function and what this will do is actually stop our timer and then insert us time our interval variable which is in reference to our timer variable there close that off and then of course when this statement rings true we also want to change our pause button back to our play button so we're going to say document dot get element by id grab that start stop btn id again and then change the inner html this is going to equal another icon to i dot class equals f a dash solid f a dash play and then we also want to grab the id of play so it has that green background color close this off and then again obviously change the timer status back to stopped so what we've done here inside this function was just checking if the timer status is equal to stopped the timer will start and the play button will also change to a pause button as well as the time of status changing to started else we click the pause button the time will stop with our clear interval function there and the pause button will revert back to our play button as well as the timer status we'll change back to stopped and this now should complete the functionality for playing and stopping our timer so if we go ahead and test this you can see it's changing to a pause button and our time is starting to increment if i press the pause button again it will stop the timer and our button revert back to the play button so as you can see our function's working perfectly fine there now we're almost done we just need to add an event listener to our reset button here so we're going to need this event listener here grab the reset button variable add an event list now look out for a click event grab the function keyword inside of this function scroll down a bit so you guys can see we want to grab the window object again clear the interval so it stops and then reference that timer interval and then what we want when we click on this is grab the seconds this is going to equal zero duplicate this two more times the same for the minutes and then same for the hours and then again we want this to actually display in the browser so we'll say document dot get element by id we want to grab the timer and then grab inner html and then set this to the base of zero zero for the hours minutes and then for the seconds so with this event listener we just created here for our reset button inside of the function we're again stopping our timer interval using the clear interval method which is essentially just a method which clears the time i set out with a set interval method now this of course is referencing this set interval here so again this will stop our stopwatch just like it does in the else statement that we've done here now of course we don't just want to stop the timer we actually want to reset it so we revert all of our seconds minutes and hours back to zero which we've done here just by changing the values back to zero and then of course we want this actually outputted into the browser so we use the document.getelementbyid grab the timer and change the inner html to zero on the minutes hours and seconds so this now should actually reset our stopwatch to zero so if we go ahead and test this out press the play button so it starts incrementing and it also reverts to a pause we'll pause this reverts back to the play button and our timer stops and then now if i click this reset button it should reset our timer and as you can see our stopwatch is working with full functionality and this now concludes our fourth project so quite a bit more javascript to take in for this project however once it's understood it's actually quite a fun exercise to create alright guys so for our master level project we're going to be creating a to-do list and how this to-do list works is that we simply enter a task inside the input tab here and then we enter that task with our add button and what this will do is add that task underneath our tab here and when that happens we get some extra functionality so let's go ahead and see what that looks like so let's just enter a task here let's say collect shopping we'll enter that task and as you can see that task is added underneath and as well as that we've got some extra functionality so we've got this orange box here and we've also got this trash can now what this orange box does is that if we complete the task and we click on this it'll put a line through it and if we want to get rid of the task completely we'll just click the trash can as you can see it will delete that from the actual task list now of course this isn't the prettiest to-do list but again this isn't really the objective of this project so feel free to style it however you like when you guys are creating yours now this project is actually going to include quite a lot of what we learned in part one so i hope you guys are paying attention so far our master level project project five the to-do list these are the key concepts we're going to need for the project so we're going to be using document.elementby d of course again we're going to be using the event listener e.target we're going to be using the penchal method the create element method the parent element method as well as the remove and the classlist.add method so quite a lot of the concepts we learned in part one so let's head into vs code now and create our to-do list so the first thing we need to do is create our markup for our to-do list so we're going to wrap this in a div the class of container and then we're going to have a div which houses the input and the button so we're going to call this oh we're going to give this an id of add the task container inside of that we're going to have our input should be the type of text we're going to give it a placeholder value of enter task which is just going to be that text inside of the input and then we're going to give us an id of input task because we're going to need to grab onto this to give it an event list line in the javascript and then we'll go underneath this and create our button this button is going to have an id of add task because we're going to need to grab onto this as well we're going to have an icon with a class of fa solid dot fa plus and there's our input and our button there and then we'll go outside of this container and we're gonna have an id which is gonna be a container for all of the tasks when we do add them to our to-do list so we're just going to give this an id of task container and that's all we're going to need for the markup let's head into the style sheet now and give this some styling so the first thing we're going to want to do so the first i'm going to do in here is just grab the body give this a height of 100 viewport heights and then give it that background image which is going to be an image folder and it's for project 5. then some extra style in here just the same as the others now we want to align all of the content in the middle so we're using flexbox items to the center so that'll center our content let's now give some styling to the um add task container so it's got the id of add task container this is going to have a width of say 350 pixels some padding say 20 pixels on the top and bottom and 10 pixels on the left and right and give it some background color of white and then our trusty friend border radius just to give it those rounded edges and then give it some box shadow because always looks good with a bit of box shadow and then we're going to also need to display this as flex because we want to apply some flex rules to the input and the button there so let's go ahead and do that let's go and grab the input give this a flex of five so it takes up most of the space uh give it some margin to the right so it's a bit space between that and the button so we'll say about say about 10 pixels give it the border radius for those rounded edges and then font size let's make this a bit bigger so let's say 1.2 rem and then let's also give it some padding so about five pixels see what that looks like yeah looks pretty good and then for the button itself this has the id of add task say font size for this because it's saying icon we increase the size with the font size property say 1.1 rem maybe 1.2 yeah that looks good and then let's also give this some padding all the way around and i forgot to actually apply the flex properties so let's give this a flex of one just so occupies a bit of its own space um let's give it a background color of white and the color of the icon green and then the border let's make it green solid 2 pixels classic border radius so that's looking pretty good and i think in the demo this has a hover effect so let's actually apply a transition to this to 0.3 seconds grab this and then apply the hover and let's change the background color to green and the color of the icon to white so let's go ahead and see if that's working as you can see it's got a nice hover effect now so we know that we're going to need to click on this to add a task now we're not completely done with the styling as you'll see in a moment when we um enter a task but let's first add that functionality of adding a task to our to-do list so let's go into the javascript file and then we can start to enter tasks after this so let's head into our project 5.js file so first things first in the javascript we're going to need to create some variables one for the actual button here one for the input and then one for the task container which is going to hold all the tasks so we'll do the first one put comment here first variables and we'll say add task equals document dot get element get element by id so the add task button has the id of add task and then one for the task container we'll call this variable task container it's going to equal document dot get element by id id of task container and then we're gonna have one for the input task document dot get element iid and this is gonna again be for our input which has the id of input task so we've got our variables the next thing we want to do is create an event listener for our add button here which is pretty much going to hold all of the power so say event listener for add button so we'll say add task which is that variable there add event listener we're going to look out for a click event and this is a function and inside of this function the first thing we're going to do is create div and then we're going to store it inside a variable of task so we'll say let task equals document dot create element and we're going to be creating a div and this div is essentially just going to house um our task as well as that extra functionality of the check button and the delete button so we're also going to want to give this task a class so we can style it this is going to have class of task so we've got our div there now we're going to need to insert a list item for the actual task itself as well as that again that functionality of the check button and the delete button so first we'll do the list item it's going to equals document dot create element i'm going to create an li then we're going to want to and then for this list item we're going to want to display that text that we insert in the input or the value so to do that i'm going to grab the li variable and then we're going to say inner text is going to equal and we'll do backticks here and then we'll insert that variable of input task got the value again it's just what the value is that we're going to be inserting so whatever task we insert inside of our input and then of course we're going to want to append this inside of that div which is the variable of task so we'll append the li so now we've got our list item the next thing we want to include now is the check button and the delete button so we can include some extra functionality when we do insert a task so so we'll say let's create a variable called check button this is going to equal document dot create element and we'll create our button and then we'll say uh let's include the icon in here so we'll say check button dot in uh html is equal to i say class of f8 solid it's insert the quote marks there so fa solid fa check and then we'll just close that off and then we obviously need to style this so we need to include a class and check task and we'll say task dot append child and then obviously you need to include this inside of our div so we'll just say task start append child and then we'll append the check button and then we'll duplicate this for our delete button change release to delete button and then this one has trash can and then let's also change the class to delete task so we've created all the elements we're going to need to include in our task the next thing we need to do now is just make sure this actually shows and appears in our browser when we try and add a task so that will say if and actually i first just want to show you that we have a bit of validation here so if we take a look at the demo example if we try and enter a task without actually entering anything in the input you can see we get this alert box which has please enter task so for this button to work we need to either add a task or it's going to show us this alert box to tell us to enter a task um just so it's like a bit of validation to the project so to do that we'll say if input task dot the value so whatever value we put inside of our input is equal to nothing then we'll include that alert box please enter a task so we'll just see if that's working as you can see that alert box is working so i'll say else then grab the task container which is going to be the container houses or the task then we're going to append child and we're going to append that task which houses um the check button the list item and the delete button so we'll just close that off and we'll see now if this works so we'll enter a task say collect shopping hit enter and as you can see there it's included our list item and it's also included our two buttons that we created obviously we're gonna be starting this in just a moment but one other thing i want to do just before we go into the style sheet and style this is that i want this to revert back to the placeholder text instead of holding the value we put in the input so uh to do that just grab the input task variable and the value we want this to equal nothing so if we go ahead and type that out again collect shopping enter that you see it adds the list item but it also removes it from the input so we can insert another task so we're almost nearly done here inside of the javascript we'll come back and add the functionality um to the checkbox and the delete button but first let's just start all of this so it just looks a lot nicer and easier to work with so head back into the style sheet so let's apply the styling now for our um tasks when they get added to the list so we'll just put a comment here saying styling for tasks which get added to the list so first we'll grab the tasks which is the div which is going to house all of that content so we're going to just give this a width of 100 and then we're going to give this a background color of white so we can actually see the content um let's also give this some broader radius about 10 pixels and then also the box shadow always love a bit of box shadow and then um add a bit of padding here now say about five pixels and let's push this down a bit actually from our enter tab there so let's give this a margin bottom of 20 pixels so just to separate the two and then let's also give this a bit margin bottom as well so it separates um all of the content all of the tasks a little bit so just say five pixels and then let's grab display flex and let's say justify content space between and then let's now grab the list items itself so dot task li remove the list style put a point let's give this a flex of four so it takes up most of the space uh let's give it a bit of padding about five pixels and let's increase the font size of these to say uh let's say 1.2 rem a bit bigger 1.3 it looks good and then let's give this a bit of margin as well 10 pixels now as for the buttons themselves grab the task grab the buttons and we'll give these a flex of one and let's also give these rounded edges so border radius 10 pixels and then the background color of these to be uh let's make them white now let's grab the um items themselves actually let's change the cursor to a pointer as well so let's grab the task dot check task it's going to have a color of orange and let's give them a bit of space and margin right five pixels and the border say solid two pixels orange and let's increase the font size of the tick there to let's say 1.5 ram it's looking good and then let's do a similar thing for the delete delete task but instead of color orange i have the color of red i don't have any margin on this but we'll change this to red and let's decrease the font sizes to say 1.3 yeah it looks better now both of these have a hover effect so let's do the check first say background color change that to orange and then the color to white copy this therefore the delete task and the background color is going to be red color's going to be white so we'll hover over these and you can see those are working so all we need to do now is just go to the javascript and apply the functionality to this so inside of our event listener here we go underneath the input task value there and then we'll say check button so add event listener we're going to look out for a click event function and we're going to say check button and then because we need to go one element above um we need to traverse the dom so just like we learned in part one we're gonna grab the parent element i'm gonna say dot style dot text decoration and this is going to equal line through so we'll check if that works so let's enter a task as you can see it's putting a line through um our content there now let's do one more for the delete button and we'll add an event listener to this and we'll look out for a click event grab the function we're going to need the event object and we're going to say let target equals e dot target which if you remember back to part one this is reference in the actual element that's been clicked and then we want to grab the target and then grab the parent element twice so we need to traverse the dom two times and then we want to press remove so with the target here we're referencing the trash can or the bin or delete button one level up there's a list item and then one level above that is the task so that's how it will remove it and then we'll just add this to um we'll just check this is working sorry so we'll enter this task collect shopping and then if we click the check button it will cross it out indicating that it's been completed and then if we want to delete it we just press the delete button here so we can add more than one value here so collect shopping add that and we'll do another one for walk the dog add that and then we can cross this out we can delete the collect shop in as you can see the to-do list is fully functional so that's actually going to be it for this project guys again the style wasn't really the prettiest for this project again this wasn't really the point of the project of course this was more about how we can manipulate the dom but this now also concludes the part two video of dom manipulation i hope you guys enjoyed the video and learned a lot throughout the two-part course be sure to leave it a like and leave any questions in the comments below that you may have and i'll see you guys in the next video

Channel: freeCodeCamp.org

Views: 998,257

Keywords:

Id: 5fb2aPlgoys

Length: 161min 21sec (9681 seconds)

Published: Thu Jul 07 2022