Basic Javascript Projects

what is going on guys and welcome to basic JavaScript projects in this video we're gonna do a change of background then we're gonna do a create hex quotes project pass the message project counter project background image slider calculator digital clock and for all our projects we're gonna have the same basic setup we're gonna have a folder then within the folder there's gonna be index.html then main CSS and script and for some projects we're gonna need to download let's an image or we're going to download font awesome or some type of logo but pretty much for starting the project this is all you're gonna need any folder with three files with links to them so if of me talking and let's start building with this javascript project we're gonna create a button we're gonna place this button actually in the middle of our screen both horizontally and vertically and once we press the button you can see that our background color is actually going to be changing and the way they're all gonna do that we're actually gonna set up a array which is gonna called a colors in our case it's gonna be only a few colors however as we're clicking through the array the actual colors of the background of the body are gonna be changing now before we start working on a project let's go our setup so I have a folder on my desktop called change color now I drag this folder or I open this folder in my texture which would be Visual Studio code and over here I have three files which would be index.html then we'll have a main CSS and then we have a script jeaious now within index.html I have a link to my stylesheet to main CSS and also to my JavaScript which would be the script with a source of script jeaious and the first thing that I would want in my HTML would be creating a button then this button should have a type and for the type we're going to say button then also we would want to class because we would want to target this button so I'm going to say over here class and the class is gonna be color BTN so this is gonna be in my name now once we're done with an HTML the last thing we would want to write is press here so basically some kind of text that we would want in a button so over here I'm gonna say it's change change color so press here to change color now you can see over here I have the button but obviously nothing is happening right now now for the styling we're gonna go to the main CSS and first I would want to place this button in the center and I'm gonna use a CSS flexbox to place the button in the center so first I'm gonna target the body because the body is gonna be the parent element of the button and I'm gonna say well here that min height is gonna be 100 new heights over it then for the Flex box we will use a display flex for the body then we're gonna have a justify content and aligned items so justify content is gonna place it in the center horizontally and over here next we would want is a line items and a line items is gonna place it vertically in center so here you can see that if I'm targeting the body I can use the Flex box to display flex justify content and this would be horizontally in the center and aligned items would be vertically in center now remember that you need to use this main height of hundred view Heights for the whole window so basically what we're saying is no matter the screen size I would want to have a min height of some kind of percentage of the window now it doesn't have to be hundred-percent I'm just using it because it is easier for me let's say over here we can use 50 so what I'm saying is the main height should be always half the screen and now my button is gonna be in the center of the half the screen so let's go back over here 200 and once we save this let's go and actually style the button so for this let's use the and we creating before so this will be color McKean and let's start over here with a simple padding so it's do padding 0.25 or your REM s this would be vertically and then what we're gonna do is 0.5 our EMS which would be horizontally so this would be our padding over then we're gonna have a border and let's do border of 3 pixels solid solid and then we're gonna have hashtag f EF EF V so this is gonna be a white border now we cannot see anything right now because obviously the background is also white but we're gonna fix that later then we would want a border and let's do border radius so border radius and let's do something like I don't know 7 pixels solid and let's do the same thing let's do solid and this is gonna be you know what now let's just leave it 7 pixels like it is we don't need to obviously at because we already worked with the border so let's do just border radius 7 pixels then once we have the border radius let's do a color for the actual button so let's do color this is gonna be the font color for the button and that's gonna be again f ef ef e so this is gonna be the white one so now we cannot see anything completely however if we're gonna do a background RGB a and what I'm saying over here with an RGBA is I wouldn't want a black background however I would want a little bit of opacity over here so this is not gonna be completely black this is actually gonna have a 0.6 opacity and over here you can see that we have this opacity now once we have the background and let's do a font size so let's do font size and for the font size let's do something like 0.85 or EMS and now you can see that our fonts actually got bigger and also what we would want is probably to have the text capitalized so for that we would want a text transform property so I'm going to say text I'm gonna do a text transform and we're just gonna say over here in addition we capitalize now also you know what let's right away make the font size actually bigger I'm going to do something 1.5 just so it stands out a little bit more and the last thing I would want a cursor and I would want a outline so for the cursor if we have cursor:pointer so if I'm gonna be go over the button you can see that the cursor is gonna be changing and also you can see over here if I click the button I have this annoying blue outline so what we're gonna do over here we're gonna say outline and we're gonna do none so we're gonna get rid of that outline and now I can see that I have my button ready to go now before we leave we would want a color button hover so as we're hovering I would want to make the button darker so I'm gonna say we're background RGB and this is gonna be without the opacity over here I'm gonna say zero zero zero so this is gonna be black button and as I'm hovering so over here you can see that when I'm not hovering it does not have the actual opacity I'm sorry it does have the opacity however if I'm over here if I'm hovering over the button it does not have the opacity anymore it's actually totally dark so now let's actually switch to JavaScript and that's right of what kind of functions we would want this button to have so before we actually and can have any kind of functions for the button first we would need to target two things we would need to target the button and we would actually need to target the actual body so we can change the background so for this we're gonna create a variable Const and was gonna say over here color and we're gonna say color button so this is gonna be a variable and that's gonna be equal to document so now we're gonna select actually the button will then use a query selector for this animal here we're gonna say that this would be a parentheses I'm sorry this would be quotation marks and over here we're gonna write a class name that we would want and if we remember we had color BTN so that's what this was our class now we have selected the button now after that but also we would want is to select actual body so again we're gonna say Const and for this we'll just gonna say body be CG so this would stand for body background now again we're gonna use a document then we're gonna use a query selector and more here we're just gonna write the parentheses first then we'll have a quotation marks and then we're just gonna select the tag name because we know that with query selector we can use a CSS selectors so basically what I'm saying query selector select the body now before we can start actually adding the event listener I also would want to create a an array that's gonna hold the actual background colors that we're gonna use so for this holding say Const and we're gonna call this colors now over here this is gonna be equal to we know how we can create an array so we'll have a square brackets then the first element we're gonna say yellow so this would be yellow background then we're gonna say over here and then this is gonna be red color then we're gonna have a green and the last one just to show you that we're not limited to only the name colors we also can place a hex color so let's do hash tag and let's do three B and five nine and nine eight again this is really random and doesn't really matter what hex color you're choosing now once I have these four colors let's actually add the event listener so once we click the button actually something happens because so far we have done is just HTML CSS and we actually targeted the button but we haven't actually added any kind of event listener to the button so for this we know that we need to actually use whatever variable we already created so the variable that's targeting the button then we're gonna have a add event listener and now what kind of event we would want so we would want a click event and over here we would want click event and we're going to write there's going to be a callback function and we're going to call this function change color so this is gonna be change color now obviously nothing is gonna happen because we haven't created this function yet so we're gonna go over here and we're actually going to write the function so we have a function this is gonna be a function name change color then we're gonna have empty parentheses because there's not gonna be any parameters and over here we're gonna say first that let's just look how we can change the background color so we can again use this variable for the body so I'm gonna say over here body body BCG then we're gonna say style so we're selecting the style and then let's do a background color now once we have actually used this style background color we can set it equal to something so first let's say do something like random let's say blue now once I have added over here that the background color should be blue if I'm gonna go here and press the button you can see that the background color is I was linking to people now that's all fine and dandy but that is not interesting enough work for us first we would probably want one of the colors that we can have from the array so for this we know that we can use a colors alright and we have and we can say over here that lets say the index of the color that we would want would be something like 2 now we know that this would be 0 this would be 1 and this is gonna be 2 so if everything is correct once we press the button now the background should be over here green now again this is all fine and nice but when we would actually want is every time when we press the button we actually would get a random color from this array so how we would actually would do that well first let me just comment this out so just so you can have this and let's create over here a random number so I'm gonna sell that random and this is gonna be equal to what this is gonna be equal to a math.random however first we would want is math.floor because if you remember that math.random was always in between zero and 0.9999 had something so for this what we're gonna have is math.floor so this is always gonna round down to a lower number then we'll actually use actual math.random so we're gonna create a random number however we also would want this math number not to be values between zero and zero point nine nine nine nine nine we would want actual values in between what we have over here in this array so what we're going to say over here multiply this by the array name so this wouldn't be colors length because we know that this always is gonna give you this value of what we have so the length would be four so every time we would have a random number in between zero and actually four now this is never gonna be actually four because this is always going to be rounded down to the floor so we're always gonna have a zero one two three so this is how we're gonna get a random number now once we have the random number this is always gonna be within this array next we will do the same thing that we did over here I'm gonna say body DCG then we're gonna say that we would want to use style then we're gonna say a background color and now we're gonna save in this background color is gonna be equal to what this is gonna be equal to colors and again we're gonna be selecting the same alright however instead of actually defining the number over here I'm just gonna say random so every time whenever we click the button we're gonna get actually a random color that's gonna be displayed from this array so let's test this out so first we're gonna get red which is gonna be over here one then once we click it again this is actually gonna be green which is gonna be over here too then we're gonna have this color whatever it is this hash tag color then after that again and we're gonna get that going back to green then we're gonna have a yellow and you can see that everything is working so as I'm clicking the button I'm actually getting a random from the array that we created before now again there's gonna be times when you're pressing and the same color comes back on because this is a random number but in general we completed our project and now we have the button that can get random colors from the array and we can change the background of the body using these colors this project we're going to create a container it's gonna include a heading and in heading there's gonna be a hex number which is gonna refer to the background color that is for the Bartek right now and over here this would be a button that's actually going to be changing the hex color so every time we're going to press a button there's gonna be new hex color for the background of the body and I will here this background color code the hex code is actually going to be this plate over here so has we're clicking you can see that color is going to be changing and we're gonna see over here what color code is over here for days hex color now before we start coding away let's again look at our setup so in desktop I'm gonna have a folder of hex color then in the actual code error you can see that I have in the folder index.html that has links to main CSS and main CSS and script layers over here files and now we can start actually working on them so let me just hide the sidebar again and once we do that then let's start with HTML and in the HTML for the actual heading and for the button we're gonna create a container so we're gonna start over here in HTML by creating a container now I'm gonna say well here container and since we're using Emmet I can just right over here and it's gonna know that this is gonna be difficult ainur now we're here within the container what we would want is actually heading to and within heading two gonna have a class of hex color so this is gonna be our class and then over here as next we're gonna have is this is a hex this is or just this this hex color code I want right over here code and I'm gonna say is then we're gonna have a : then after that we would want a span with a class of text where we're actually gonna place our numbers so let's say we're here and this is gonna be a span and the span is gonna have a class and the class is gonna be hex so this is gonna be a class and was gonna have an X now once we are done with a heading and this would be the span where the actual number is gonna appear what would be the hex color number then we would again want a button so again for the button we're gonna have a type button and over here we would want a class so for the class again we would say hex BTN so this is gonna be our class and let's write again over here then this is gonna be press here to change color again we're gonna have some text within our button now once we are done with our HTML now let's go to our main CSS now in the main CSS we're gonna start again by placing this container in the center and so since we're gonna be using this a lot I'm not gonna go again in a great detail because we covered this in the first project with actually changing the colors so I don't want to repeat myself too much but we're gonna create again body as the height of hundred new heights and then I'm gonna use a flexbox to place the actual whole container in the center so I'm going to say over your body then we're gonna have a min min height so this is gonna be a min height and again we're gonna have a hundred V height then we're gonna have a display flex for the whole body again aligned items I'm gonna say Center this is gonna place it vertically in the center and just if I content is gonna place it in the center horizontally now once we have done this let's do a container and actually let's place text-align:center for the whole container so as we know we have a class of container so what we can say over here text align and center so now we have the text that is actually aligned in the center now after that we will have a class of hex color so basically whatever the number is going to be over here and for this we're going to say that this should be actually capitalized now actually the hex color over here what I'm talking about is this one they'll have the actual hex that's gonna be the numbers so for the hex color we're gonna use the class that we created and I was going to say over here text transform tracks transform and we're gonna say capitalize over so once I save this you can see over here that I have my hex color that's gonna be capitalized now like I said we also would want to target hex which would be actual our numbers over here and we would just want to give it a bigger font so again we're gonna select the class of hex which would be over here this guy and so this spanner and we would want a bigger size so we're gonna say over here font size and let's do something like three our EMS now obviously you cannot see anything because we haven't added yet the numbers now once we're done with our heading let's do a button again we're gonna say hex BTN this should be our class name for the button and over here let's start with a color that's gonna be in the text color and that's gonna be hashtag f150 2/5 so this is gonna be this orange color now obviously I can say I made a mistake this is hexed button and if I change it now I'm actually targeting the right class now let's start over here again with a boarder suborder 3 pixels solid and let's do again the same color so I'm gonna have the orange color of f15 and then 0 to 5 now after that let's do a border or yes radius and let's say that the border radius is gonna be like seven pixels over here so these are going to be the rounded corners and once we have the border radius let's do again in background and again we're gonna have a black background with an opacity so this is gonna be zero zero zero and zero point six so the black color with an opacity and let's do a font size of one point six REM so font size one point six REM is over here so this would be a bigger font size now once we have the font size let's do a padding and again we're going to have a 0.25 our EMS and 0.5 our EMS so they should be two font sizes so now we have over here a panic now once we have the padding let's do again cursor:pointer and then we'll have this annoying outline that we would want to get rid of you see over here this blue color so let's write over here in the outline and we're gonna say none oh here as we are clicking and let's do again text transform capitalized so we have a couple of options we can just copy and paste this line or we can just write a rule over here right our property and then give it a value of capitalized now last thing let's do a hover let's do the same same thing so have a hex button hover and for this let's do a background and let's do again RGB and again this is going to be zero zero zero so as we're hovering this is gonna be totally black and if we're not hovering this is gonna have the opacity now this should be it for the HTML and CSS now let's go to JavaScript and now let's actually start working with our code now here you can see that with a hex color the way we create a hex color we have a hash tag and then we have six values over here and the values that we can have is between Z and nine and then for the values above nine we have a b c d e f so basically a would be value of 10 then b would be 11 and so on and so forth so the way we create a hex color we just pick one of the values that we have between let's say 0 9 or between a and f and we just place six of them over here in a row so the way we're gonna do it first we're gonna create an array that has all these numbers and then every time when we're gonna click a button we're gonna generate this by again using the random number we're gonna use this as a random colors that we're creating from these values and then we're going to add this background color to our by so again first things first let's create an array that's gonna contain all the possibilities that we have for these hex so I'm gonna say over your hex number this is gonna be my array and we're gonna start like I said with the numbers we can have 0 then we have a 1 and as you can see that all I'm doing is just placing it as a value then it's 3 4 5 6 7 8 9 then once we have our 9 values over here well I'm sorry this would be actually 10 values because we start with 0 but once we have them let's do right now the actual values with the letter so first would be a then we're gonna have a B then we're gonna have over here this would be C so comma C then we'll have after that D and E and F so D E and the last one over here is gonna be F now once we have these values these are gonna be our possibilities now let's actually target what do we have for the button and for this hex remember we're all going to be placing the values and also obviously we need to target the body so let's start with a button so let's say we're const hex BTN and this is going to be equal to document and again we're going to use a query selector and for the query selector we're gonna say them this is gonna be a hex BTN because we remember that we can use classes Oriya in our query selector now once we have selected a button now let's do the actual background of the body or in general let's select the body first so again we're going to have a Const this is gonna be a body be CG and we're gonna name this like this then this is again document query selector and for days again we're gonna select the whole body so you can see over here I need to use any kind of class name or anything I can just use the element tag name then last one is remember over here we had this span then had a class and the class was hex so we'd want to target this also because that's where we're gonna place our actual value on the code over here so if the color is going to be this we would want to place it over here so once we change the color we can also see over here the actual value of that color so let's go back over here to our script this is one and let's select this hex so again well I'm gonna name the variable the same name and we're gonna do a document then we're gonna have a query selector I know here we're gonna say then this is gonna be a parenthesis then quotation marks and over here class effects now we have done the first part we have selected all the elements that we're going to be working with now after we have selected them now for the button we would want to add a click event listener so I'm gonna say we're here hex button then I'm gonna say add event listener now what type of event this is gonna be click event now once I have the click event the next I would want what would be the actual callback function now the callback function is gonna be get hex now obviously again we haven't created the function so now let's go ahead and let's create a function so for this I'm gonna say get hex this is gonna be the name because obviously they need to match over here I'm gonna say this is gonna be empty parentheses because there's gonna be no parameters then first what I would want is create a variable that's gonna actually hold my hex color so I'm going to say let and let's do over here hex color so this is gonna be the name of my variable now first it's just gonna have a quotation marks and hash tag over here that's all nothing else and nothing more so this is gonna be my effect hex color that eventually I'm gonna use now after that what I would want is I would want to generate this six numbers over here somehow I want to generate this either number or this would be actually a ABCDEF value right but I would want to generate from these possible available from zero to nine and a to F and also I know that I need six of them so basically I would need to create a for loop that picks these values from this array six times so how do we do this well we're gonna create a for loop like I said so first we're gonna have a for loop and we know that we need to start by saying that I should be let's say in our case this is gonna start with a zero then we're gonna say that this is gonna go this is gonna do it six times so before it actually gets to six we need to say that I needs to stop when it is less than six so now then we know that it's gonna run six times and then we're gonna say that we're gonna increment each time by one so high plus plus now over here what we would want each time when we're running this for loop then again we're gonna create another variable we're gonna say let random and again this is gonna be equal to generating and the number so we already know that first we would want to create math.floor then we're gonna say math.random so this is gonna be the random number that we're generating and again the same way if we know that we would want whatever value out of here this array each time we know that we would need to multiply this number by hex numbers the name of our array and like in this way all these six times we're gonna get a random number that is gonna be less than a length because even though we're multiplying by a length we're also applying math.floor so this is always gonna be if the length is let's say gonna be over here 16 or 17 this is always gonna be less because we're saying is like length but we're using also math.floor so this way we're always gonna generate whatever number of these possible values now once we have done this then what we would do with this number whatever we're generating well what we would want is we would want to add this value to this hex color over here so what I'm gonna say over here is hex color panel is gonna say plus equals and over here we're gonna say hex and let's do numbers over here hex numbers and we're gonna say over here random so what I'm saying over here is add to this hex color something that you're picking from this hex number with this random variable oh yeah so we have a random variable we're getting a random number then we're placing this random number in the hex numbers because we know that we have an array and we're placing this number as a index and whatever we're getting back we're just adding over here to this hash tag so if we run this six times we should every time have random number like this now before we actually change anything let's do a console log just so we can see that this is actually working so let's do console log every time and let's do hex color over here like this so now let me save this we're gonna go back to our document what I'm working I'm gonna open a google developer tools and let's check it out what do we have in a console so for now I can see it in my console is empty but if I press it over here you can see that first we got a number actually for now how did we get for well in general let's do also like this let's maybe show you how we can get a random number and then let's do a hex color so again let's do console.log and let's do run them just so you can see how we're generating these numbers so as you can see over here because we have 0 to 9 actual numbers if we're getting one as a random number it also reflects as a value from our index from our array is also gonna be 1 however if we're gonna go down all the way to 14 which would be a random number you can see that now we're getting e because as it is going through over here you can see that number 14 is gonna be actually and then again we're gonna go back to 4 over here and then this should be our value now since we're generating this number now we can use actually this number as a background for our body so let's get rid of this console.log so let me just comment out these console hugs and we can click we can actually close developer tools and over here let's go back over here to our body so for the body we're gonna say body BCG and for this we'll gonna say style and again background color and what would be this background color well this background color now is gonna be equal to this hex color that we're getting over here now what we would want is actually get out of this loop because we wouldn't want to change only the background color as we are done with the for loop so when we're done with the for loop now we would want to use this hex color to change the background so I'm going to say over here hex color so this would be a for the background and also remember we had this value of x so we would want to place this hex value so we're gonna say hex inner HTML and this is also gonna be hex color so that's all we have to do so now when I'm gonna save this there's gonna be changing my background and I'm also gonna get this value right away so you can see that if we had two numbers of FF then we had three zero and then we had and as I'm pressing you can see that how we're generating this random number out of this array and then we're placing this random number back in over here in the actual array and getting the value and then once we have this you can see that as I'm pressing over here we are getting our hex color which we are using to change the background of the body and also to display over here in our span in this project we're going to create a quote generator so we're gonna have a quote by famous people now obviously this is just gonna be an example but in general we're gonna have a quote and then once we press the button then we're gonna be able to see what is the text on the quote and over here this would mean the person who's actually saying that for before we start coding let's look at our setup so again in desktop and I have the folder quotes that is in my text error and again I have index.html main CSS and script genius I know here I'm linking to main CSS and also script to scroll script is now in the script is in this case I already have this quotes array more here with a quote from the famous people but I'm gonna talk more about this once we actually get today using the JavaScript so we're gonna go back to index.html and we're gonna start over here by creating a container div with a class of container over here that we're gonna use for our quotes over here this is gonna be our document now within the container we would want to start by creating a heading - oh yeah and within heading to we're gonna say that this is gonna be quotes bye-bye famous famous people people who are you and once I have my heading over here next what I would want is actually have a button that's going to display these quotes so again as always we're gonna have any button then for the button type I'm just going to say that this is gonna be a button then we're gonna have an ID and for the ID in this case let's use something else let's say then this is gonna be quote me TN now if you remember in the previous projects we use class so just for change let's use the actual ID now within the button let's write again that we would want press to display a quote so this is gonna be our text within the button and then we would want to create an element of block mode and within this block mode we would want a heading 2 and this heading 2 is actually gonna have an ID of quote and text over here inside and as well as gonna be equal and as you can see over here the Emmet suggests right away what would be the abbreviation so we have heading 2 with an ID of quote then we have actual text once I press the tab over here this is what I get heading 2 idea of quote and the actual text of quote now last but not least we're gonna create a heading 3 that's gonna be a quote author so again we're gonna do the same thing hash tag this is gonna be 40 ID then we're gonna say quote author this is gonna be our ID and then we're gonna have a text this is gonna have a author off the quote over here and again you can see right away how Emmet is suggesting what we're gonna get now once we're done with our HTML let's go ahead and let's style it in the CSS as always let's place the container in the center so let's start over here by targeting the body saying the min height is gonna be hundred all right then we're gonna have a display off flex then we're gonna align the items in the center vertically so aligned Heineman center and justify content also gonna do Center so this is just for aligning our container in the center now let's add some this you know things first let's do a background for the body let's say then this is gonna be hashtag FF and then we're gonna say d0 8 I'm sorry a8 so this is gonna be our background then also we would want the actual color for the whole body and we're gonna say hashtag 333 so this is gonna be the color of our text then let's do font family let's do Calabria Cali Brie over here and then let's do Sun surf so the sensor then let's do a font weight so font font weight and let's do $400 now once we have the setup for the body let's deal with our container next so again we have the div with a class of container so let's target the container let's do text-align:center then we'll have a padding all around it's gonna be to REM so to REM now once we have the padding let's do a border radius oh yeah so border yes now this is gonna be - let's say 5 pixels over here now after that let's do a background color so for a background color let's use a white one so let's say hashtag FFF oh yeah so this is going to be our container now with a display flex with basically with the flex flex box what we can do is we can use the Flex properties to get a width for our container so now matter of what of the screen size it's always gonna stay the same so for this we're gonna say flex zero zero and over here we're gonna use percentage now again we can use whatever percentage we would want but I'm gonna use 80% so no matter what on the screen size this box over here is always gonna be 80% over here like this now obviously if I would change this to 50 it's gonna be a 50 now once we're done with a container let's start working with a quote button so in this case we had so we had quote BTN button and for this we're gonna say first that border is gonna be none for our quote button so you can see over here our border disappeared then we're gonna have a color so let's say we're here then this shouldn't be a color and let's do a white one so again hashtag FFF white one now obviously the text disappear so for days we would want a background so let's do background and this is gonna be the same that we were using over here or you know what no let's let's do a little bit different let's say D and then we will have eight nine and one five six one five six and this is gonna be a color for the button and let's do a font size let's say one point I don't know three REM s so this is gonna be our font size I don't let's do a padding our usual padding of 0.25 our EMS and 0.5 our EMS so this is gonna be your padding now we can also let's do a border radius so border radius and again let's do 7 pixels something like this now once we have everything over here I think we're ready to go and actually have the cursor and let's do cursor:pointer now after that what we would want is as we were hovering the button what should happen so let's do a quote quote BTN and hover now as we are hovering again let's change it to color so we're gonna have any color panel just gonna have a color of hashtag FF d 0 0 0 like this so this is as I'm hovering you can see that the color is actually changing into text now last but not least we're actually gonna have a block quote over here and for the block quote we're gonna have a background now what we would want we would say then this is going to be a block quote for the block we're gonna have a background and the background is gonna be hashtag f9f 9f9 Moria so this is gonna be see over here this is gonna be a black one then we're gonna do a border border left and for the border left we're gonna say ten pixels solid and let's again have a hashtag F C D BBF oh yeah so this is gonna be over here our border and let's do a little bit of margin I'd say margin is gonna be one point five our EMS and let's just leave it like it is so basically there's going to be marginal around none let's do the same thing when the padding let's say padding is gonna be 0.5 our EMS all around so this is what we're going to get as a block one and the last but not least is gonna be quote author so let's say over here and this is gonna be a quote author so hashtag because this is gonna be our ID quote author and for this we're gonna say color and again let's use the same thing over here what do we had so I'm just gonna copy and paste this and this is what's gonna be our color over here for the call now we can also maybe do a text transform over here for capitalize so let's try it over here for the whole body let's just say then this is gonna be text text transform and let's do capitalize so all of them over here you can see that are going to be quite wise apart from the button area but we can just leave the button the way it is and we can just work with our JavaScript right now so like I said I already placed over here this array that contains our quotes now obviously you don't need to do it this way you have two options you can either go ahead and download the zip file we're gonna have this array right away within your script yes or just for the sake of working right now as we're building everything you could just say this is me let's say simple quotes so this would be my simple array and over here we can just say like this we can say that this is gonna be first of all array so we need this square brackets here now once we actually have a square brackets what we would want is we would want to place the object over here so the first element of array is gonna be an object and we're going to sing name and let's say the name is gonna be author number one author number one oh yeah I'm not I'm gonna say the same thing that this is gonna be quote number one so oh yeah this would be the quote and we're gonna savor your quote number one now again you have two options you can either download what we had over here in scripture here or you can make your own basically by placing the objects the same way in the array and just change over here these values so this would be author number two and quote number two now again since I have already quote done I'm gonna be using this array that I already created before so I'm just gonna let say comment this out right now just so you can see that you have this option but we're gonna be working with these quotes so let me just make a little bit of room and let's go back over here and let's actually start first of all targeting what we would want now what we would want to target first so first we're gonna target a button so I'm gonna say over here quote BTN this is gonna be the name of my variable then we're gonna have document and again we're gonna use a query selector then we're gonna have an ID so now we know that we're targeting ID and the ID name was quote BTN this is all righty now once we have selected the button we also would want select more here this whatever quote and also the author so if you remember we are over here the ID of quote author and the actual quote so we can go back over here and we can also select them so let's do Const and this should be a quote author this is gonna be the name of our variable again we're going to use a document query selector then what we would want is select the actual author so ID and quote author and the last one as our selection is gonna be the actual quote so I'm gonna say Const quote here this is gonna be equal to document query selector and over here this would be parentheses and again end quotation marks hashtag quote this would be the name of our ID so first things first we need to target these IDs so we can actually access them now once we have accessed them now we would want to place a event listener to our button so here I'm gonna say then this isn't going to be quote BTN we're gonna say add event listener again this is gonna be click event and over here we would need to write a function so I'm gonna say that this is gonna be display quote so this is gonna be our function now obviously we need to create the same function so let's say this play quote and let's create a function so the function is gonna be display quote and over here we have empty parentheses so no parameters no arguments but within the function body what we're gonna write and as always what we would want is we would want a random number that's gonna be starting from the zero index all the way to possibility to a last index so we would want a random number that's not less than the lowest index over here and not bigger than the highest index from the array because what we're gonna do is every time we press the button we're gonna again generate the number random number from the array that's gonna select this index let's say 1 and then we're gonna get to retrieve this name and then quote from each of the random numbers that were so let's start again by creating a random number so this should be number and since we already have done this a few times where you know that we start with math.floor then we're gonna have a math.random order this is gonna be math.random so we're generating again random number however since we want to actually have the math number that is within the boundaries of our array what we would need is just have a quotes the name of our array and then we're gonna have a link so this way our number is never gonna exceed the biggest index of our array or it's not gonna go lower than our lowest number all right so once we have this let's just again look at what we're getting so let's do a console log and let's log out the number so let's do a number number over here and once we save it now I have five quotes here so my length is gonna be five so let's do over here let's do the actual developer tools and let's do console now I'm gonna make this little bit bigger and let's just see what we have so as I'm pressing the button you can see I'm getting four then I'm getting twice for three times four then I'm getting two two times four then again I'm getting four three two again two one here and I can just keep going and going and going and going now what's happening over here is I'm always gonna get whatever value of a array that I'm actually working with so let's go ahead over here and let's once we have the number let's actually use this number so first things first let's actually go ahead over here and let's delete this console and once we have deleted the console log we can also close this over here on actual developer tools so let's close this out and now what we would want is every time I press and I get this random number I would want to get a name and a quote and actually place them one is going to be placed within the and the other one is going to be author of the quad so the way we do that we know that we have selected the quote author and the actual quote so let's start with quote author I know that we have selected quote author so we're saying is inner HTML of this quote author is going to be quotes which is gonna be our array then we're gonna get our random number which is gonna give us a random index and form this random index we're gonna get a name so this is gonna be our name and obviously the same way we're gonna do over here with our quotes actual value so we have another one which is actual quote so I can delete this quote author message is gonna be quote then we're selecting again quote number but then over here instead of name we're getting a quote so this is gonna be our value pair so we're getting is quote and over here we have a name so if I'm gonna display this we have get busy living or get busy dying this would be Stephen King then we have over here Abraham Lincoln then again we're gonna have John F Kennedy then again Abraham Lincoln Stephen King layout and again or just keep on going so basically what we're getting is just random quotes what we got over here so I started Stephen King and John F Kennedy Abraham Leon are and Leo Tolstoy so this is how we can generate random quotes using a JavaScript and actually placing them within our document this JavaScript project we're gonna create a input we're gonna pass the message so here you can see that we have our input and if we're gonna write hello world what's gonna happen is once we click the button or you can see that we have last message delivered so here this would be the hello world that we just wrote over here in our input box however if we're trying to pass an empty message so as you can see over here I'm not gonna write anything and I'm just gonna press the send gonna have a alert box that's gonna say please enter a valid value now before we start coding away again our usual setup would be there's a folder somewhere again in my case this is gonna be in desktop just so it's easier for me to find and then we're here we're gonna have our text error and the folder is gonna be in our text error and within the folder we're gonna have index.html that's gonna have links to the main CSS and scrub genius and for now these both of these files are gonna be empty and the first thing that we want in the index.html we're gonna create a div that's gonna have a class of container now within the container we're gonna have a heading one and for the heading one we're gonna have a text of message you would like to send oh yeah then we'll press the tab and then we have a heading one after that we're gonna have a input and for the input we're gonna have a type of text so I'm gonna have an input type is gonna be text then it's also going to have a name so I'm going to say over here and then this is gonna be the name and the name is gonna be message and we're gonna call this message in now also we're gonna create an ID and for the idea we're gonna say that this ID is gonna be message in so this is gonna be the ID of our input and once we have our input we're gonna have a button now for the button as always we're gonna have a type and for this type we're gonna say button then also we're gonna have an ID for the button so let's do when ID and let's say send BTN so this is gonna be our send button now we're gonna say for the text press to send so this is gonna be the text within our button so you see over here now we have our button then after that we would want a heading one which is going to say last message delivered so we're gonna go back over here and we're gonna say last message delivered oh yeah this is gonna be for the heading now after the hang I'm gonna have another heading one however this heading one is gonna have an ID of message out and it's not gonna have any text in here because this anyone is gonna be used whenever we're delivering actually the message so this is gonna be it for a index.html now let's go to main CSS and start styling as always what I want is I would want to place this container in the center so first let's give it a min height of 100 new heights for our body then let's do a display flex and after display flex let's do a line items Center let's place it vertically and justify content let's do Center to place it horizontally so we're here our container is in the center let's give it a background of hashtag 8 ad 8 ad and 5 e 9 5 e 9 oh yeah this is gonna be the background our body after that let's give it a color so hashtag 333 oh yeah this is gonna be the color of our phones again let's do phone family I will do a calibrate and let's also do a sensor so let's do calibrate and sensor now once we have the font-family let's do font-weight and so so found wait on what's the 400 once we have our body let's work with a container so the next one is going to be the container we know that we have a class of container so we're selecting the container and let's do text-align:center we're here so first let's put everything in the center then we're gonna give it a padding and the padding we're gonna have is gonna be to our EMS over here this is gonna be our padding also we would want a border radius so would want the rounded edges border-radius and let's say something like seven pixels over here also we would want a background color so let's do a background for our container and let's give it a white man so here you can see that this would be our container now also we would want is a flex and basically what we're saying is we would want always to have this container certain that with and we're gonna use zero zero and eighty percent or so no matter the screen size this container he's always gonna be all here this a percent then after that let's do a button so let's select the button since we have one button we can just select it as a button and let's add few things over here first of all let's do display and let's do display block so here you can see that it starts right now on a new line after that let's say that this will have a font size to our EMS oh yeah so this was gonna be our button now after that let's also have a margin so let's do margin 1 REM top bottom and let's do Auto 4 left and right so what I'm saying is top and bottom have 1 our EMS and left and right just place it or no no so I want what I want is for this button to be in a center then also I could do a padding so not page break padding and for the padding we're gonna say 0.5 our EMS and 1 REM so again bottom and this would be one REM left and right now let's do a color so what would be the color so we're gonna start with a color of hashtag ffff so this is gonna be our white color let's give it a background and for the background we're gonna say hashtag six cc3d eight here so this is gonna be your background and let's do border radius border radius and for the border radius let's do something like eight pixels and once we have the border then we're gonna have actual motor and let's say the border is gonna be none so we're gonna get rid of the border altogether however we're gonna have a border radius once we're done with a button let's create a button hover so as we're hovering so we'll have a button hover over so for the button hover we're gonna say pasady and let's give it a pass it is 0.8 so as we're hovering the opacity is gonna go down and then we're also gonna have a cursor:pointer so only as we're hovering over the button we're gonna have this cursor this plane now let's work over here with our input over here in this one so for this input we're gonna say is and there's gonna be an input and for the input we're gonna say square brackets and type we're gonna say text over here text now for this type of text we would want first a padding 0.5 0.5 our EMS then we're gonna have a margin all around is gonna be 1 our EMS so this is gonna be our input then we're gonna have over here a border three years some border radius and this is gonna be five pixels after that we would want a font size and for the font size we're gonna say 1.5 our EMS and then we're gonna have also a border and I'm gonna say border and border is gonna be 3 pixels solid so I'm gonna say border and this is gonna be 3 pixels solid and this is gonna be ash tag 8 8 D 5 e 9 or yeah so this is gonna be our border so now once we have the border however again what I would want is I would want to get rid of this outline you see this by default our lawn so I'm gonna say over here height lon none so once why focus over here in my input box you could see that I don't have anymore it's annoying outline come on so let's add a boat docks shadow as we are focusing in this input box so here we're gonna say input then we're gonna say type we're here type and over here text now for the type of text we're gonna say box and we're gonna say shadow and for this we're gonna say is 0 0 10 pixels and then we would want the color so what we're saying is what would be the blur what would be the actual width horizontal vertical and over here for this one we're gonna say hashtag 8 8 and D 5 e 9 so this is gonna be our box shadow as we're focused you can see we raided we're getting a box shadow now after that what we would want is actually our you know what I messed it up over here so you know here we need a focus so not only we're selecting but only as you're focusing you can see that we're getting this box shadow now last but not least we would want a message out and we would want to add some styles to message out so then we're gonna have a ID of message out over here and for this we're gonna say first margin is gonna be 0.5 our EMS and 0 left and right it's only top and bottom and then also we would want a color so this would be a different color since we're gonna use the same color I can just copy and paste the color over here so copy and paste and now let's go to JavaScript and let's actually construct our logic now and see that we have empty scripture here so let's start first by targeting everything so first we're gonna have a button so let's call this send BTN this is gonna be our variable document then we're gonna have a query selector so query selector and then over here we're gonna say it's gonna be parentheses then we'll have a quotation marks and since we have now ID we're gonna say send BTN so this is gonna be send button then we're gonna have a message in and message out so we're gonna call this message in and this is gonna be document query selector again so we're gonna use a document and we're gonna have a query selector and for the query selector we're gonna say that we would want to target the ID with the same name message and in and since the message out is similar we can just copy the line and then just change this one out to out message out and also this ID is gonna be out so we're targeting also different ID now obviously as always we need to add this add event listener in order to send this message now maybe you know what before we do this let's go back to main CSS and I had the text transform capitalized oh yeah so all of them again apart from this button which we can do the same thing again we can just copy this line over here let's say so we're just copying this line and adding the same thing to the button so now everything is capitalized so we're gonna go back to scrooge's and now let's add an event listener to the button so again send button add event listener then we're gonna have a click this is gonna be the click event and now we would want to send a message some send message now over here within the send message and I'm sorry I shouldn't have done this automatically for some reason and over here we have this send message obviously we need to create this callback function it's gonna be executed only when we press the click event we're here now we have a function so let's call this a function send and message no more here we're gonna have again empty parentheses but then we're gonna say that there's gonna be a variable that's gonna get a message in value so you see we're here we are targeting this message in this is gonna be our input box oh here we are also targeting message out now I would want to collect the value of this message in so let's say over here if I write something once I press it I would want to collect this value so how do I collect eval first of all let's create a variable and let's call this content so this is gonna be my variable this is gonna be equal to message in here this my variable that is actually working with an input box I'm just gonna say value over here and now let's do a console log so let's do a log over here and for the log we're gonna say content just so we can see what we have so far and again let's do a inspect can maybe make it a little bit bigger oh yeah we can say console and let's oh you're right like this so once we say oh here you can see that we can get the value so now it's the easy part since we already got the value now I would want to pass that well so again we can over here just comment this out this console log and maybe we can close this one out the route developer tools and we can just say well you're like this that once we are passing the message we would want message out here and we would say inner HTML so what we're saying is first let's get the value from our input box and then let's place the value in the message out so again let's do a Content and more here we have the content now next over here once we have this I also want this input box to be empty value so let's say if I write this and if I send the message I don't want to go back over here and delete this because you can see that right now it's working we just passed the message so here let's do a message in so let's go back over here to the message in value where we're collecting from the input box and let's set the route and let's actually set the value to the empty over here so what's happening over here is as I type hello world let's say our little world then press the send and now what I'm getting over here is hello world however this isn't and also I would want to avoid when somebody's just passing the message like this but they're sending the empty value so how do we do this well we can create an if statement an if statement that's gonna check this content and it's gonna make sure if the 2news MD let's throw an alert box so let's say over here if and since we have a content and if the content is equal to the empty value then let's create a alert box and let's say in alarm box what we would want to write and let's just say over here please and enter valid valid value over here now once we have this obviously we also need to create a nulls so let's create a null statement and now an else statement we're basically gonna do the one we did previously where we passed a message so we check the value if the value is empty then we have the null box if the value is not empty then we're actually gonna pass the message so let's copy and paste this let's go back over here let's save it and the moment I press the send please enter a valid value now we can also maybe add over here current value is empty empty oh yeah and if we're gonna pass the message so let's say pass pass this message if everything is correct we're gonna have passed this message over here and as always you can see that I misspelled it horribly but I think this is gonna be good enough for this project in this project we're gonna create a counter that we can use to add count or lower the code and if we're above zero our numbers that are going to be in the green color and if we're at zero our number is gonna be white and if we're actually below zero our numbers are gonna be right and we're also gonna look at how we can create a little animation so as you can see over here that numbers are first invisible and then they eventually appear so we're also gonna look at how we can do this with a JavaScript and as always before we start coding let's look at our initial setup so we're going to have folder I'm gonna name my folder counter and again this folder is gonna have three for index.html main CSS script is wherever this folder is also going to contain a background image for this project so in general again you could just download the zip file and you can get the image or you can actually place your own image and one that you would actually like so here this folder is already in my texture and like I said these are the files that are all going to be working on and over here this is gonna be my image folder again I'm gonna get rid of the sidebar and we're gonna start working in our index.html now first things first let's create a div that's gonna hold everything so we're gonna call this div a counter box now in the counter box we're gonna have a heading 1 and we're just gonna say well here and this is gonna be counter now once we have this once we have the heading 1 then we would want a also another heading 1 which is gonna have a class of counter so I'm gonna say over here counter and for this we're gonna actually place a 0 so this is gonna be our counter and this is gonna be our 0 that we're gonna be counting then we're gonna create a div over here that's gonna have an ID of buttons so I'm gonna create a div and we're gonna say over here and this is gonna be a hash tag and this is gonna be BT and BT ends so now this is gonna be our deal now within the dev we're gonna have a button this is gonna have a type off button and also it's gonna have a class and we're gonna give it a class of BTN and after that we're also gonna give it an ID now for de ID I'm gonna say lower count and BTN now let's write over here lower count over here count and let's go to the beginning of the line and let's just actually copy this line so now we have two buttons both of them are in the same class except this is gonna be not lower account let's say that we're gonna say add count button and we're gonna say that this is gonna be add count now this is gonna be a different ID and also different text and that's gonna be it forty HTML now we're ready to go to the main CSS and actually stylus just so we have it a little bit better looking now in the main CSS first things first let's again as always start with a body now for the body let's do a min height and again let's do a hundred events and as always you can choose something else something smaller however I just like to use all my window whenever I'm working with something then we're gonna say display flex and those are two properties we should already know a line items Center and justify Content Center also that would place everything in the center of our window and then let's do a background so for the background let's say this is gonna be URL and over here we're gonna place an image so let's do a image this is gonna be our image folder and then we're gonna have our tech PNG now also what I would want is actually I would want to place it and we're here in Center then I would want to have position now I'm gonna write a shortcut but let's actually first do a long version just so you understand what's happening so first of all we're gonna say background and we're gonna say position so you know we're gonna have a background position I'm gonna say Center then after that let's do a background and I'm gonna say sighs so sighs I'm gonna say well here cover so that means that we would one place the image in the center however we would always want to span the whole imagery so it's never gonna be smaller than it needs to be and then we have a background repeat' back around and we're going to say repeat and we're gonna say no-repeat and also we could a macaron fixed however in our case it's not gonna make much sense like I said we all here are writing in a long way so if I'm gonna comment this out we can go back over here and we can do it like this we can say that this is gonna be a center Center cover over here just remember that you need to have this forward slash in between them and then we're gonna say no no repeat oh yeah so if we say that we get the same thing however this would be a shortened version how we can write this writing the same properties but we need to remember that this is always comes first then we need to have forward slash this would be background size and then we have no repeat now also you can have different values over here but I'm just placing the ones that actually make sense in our case now once we're done with this let's have a color for the whole body let's do color and I'm let's say white don't worry so the color is gonna be white and also we're gonna mount a font family you would say Arial Arial oh yeah now once we have this then we would want to work with counter box so let's say over here counter counter and we're gonna say box box Orion now what we would want for the counter box first let's do a width of a counter box so again we can use a flex property zero zero and just for a sake of it let's put like 70% because we always keep adding everything as a flex that is actually 80% and now let's do a text online and let's do Center so now everything goes back in the center in the box then we would want a border so let's let's do a more you know I'd say border is gonna be I don't know 3 pixels solid that's a gray oh here so this is gonna be our border then let's do a padding one or EMS more here and then we're gonna have a four wait and let's say that fountain is gonna be mold and let's do a box shadow again let's make it a shadow all around the box now for the actual box shadow we're gonna do a box shadow and let's start with three pixels three pixels and let's do five ten pixels ten pixels and then let's say black Orion and as you can see over here that we have a bigger one over here on the right hand side and over here in the bottom now as we're starting right here family is gonna say we have one pixel and one pixel now we have a one pixel and then over here we have ten pixel values so obviously what changes is that whatever values we are choosing to use and then over here we're choosing the color so pretty much just feel free to maneuver with these numbers around and choose whatever box shadow you would actually want now over here let's go back to again let's say three over here like this and then let's go and actually work with the actual counter remember we had this counter over here and you know what before we do that let's do a text transform and honors also let's make it a capitalized over here and let's say that for the counter we have a class of counter and what I would want is for that zero to be massive so I'm gonna say over here six are Eames oh yeah so this is gonna be a massive 0 now what I would want for the button and since I have the class that targets both buttons I can just say BTN I'm here now I'm going to be affecting both of them now background color what I would want let's say we're here background you can just write like this background and let's do I don't know hashtag FFF so this is gonna be our background now also what I would want is border radius and let's say a pixels over here so this is gonna be our border-radius font size to our EMS here so our mass their buttons are massive padding not page back padding say 0.5 RMS so this is gonna be a bigger padding margin let's do margin 0.5 our EMS and then say 0.25 miriam's so top and bottom I would want a bigger wound and left and right I would want a smaller one so this is gonna be our panics now let's do a border so for the motor or let's do 8:08 and 5e so let's say over here this is gonna be a hash tag oh you know what just let's do Lac over here let's avoid over here this one I'm not saying this is gonna be one sorry about this let me just get rid of this I don't want to do a actual hex color so let me do border three pixels solid solid and you know what let's do f150 to five or so this is gonna be our border then we would also want again the mock shadow so let's do box shadow for this zero pixels over here and then let's do five pixels and let's do a color of zero zero one two two one so now once you can see we're here now we have our little box shadow here in the bottom and let's do a outline and let's create that outline is none because you can see over here I don't want this outline Oriya so let's do over here and this is gonna be outline:none now last I would want a button active and button hover so when I'm pressing the button something should happen and also when I'm hovering over the button so let's start with button hover so as I'm hovering what should happen well let's do a background color let's do hashtag for CA 4c hey and then f50 oh yeah so this is gonna be our background color and then let's do color let's let's say this is gonna be white so as I'm hovering this is what I'm gonna have from my button and also let's do the active one when we actually pressed a button so let's say over here BTN and active active we're here so for the B me TN active button active once we press I would actually want to get rid of this box shadow so I'm gonna say box shadow and we're gonna say none so here we're gonna get this little effect you can see as I'm pressing that my shadow disappears so it looks um that I'm actually pressing it over now honestly I can make it a bigger one so let's say over here 10 pixels and then once I press it over here now it's not as good right it doesn't look like I'm actually moving the button if I would really want to make this visual effect where I'm moving the button you need to actually translate this boot button down right but if with a small one it still looks like as if we're actually pressing the button so let's say over here again you can see that it looks like we're pressing the button and once we have our CSS set up let's go ahead and let's start working with our JavaScript so we can say on this and we can go to JavaScript I'm not going to save this and again as always first we would need to actually select all of them so let's start over here and this is gonna be a what I'm gonna call this counter so this is gonna be a variable and then we would want to select the counter so I'm gonna again we're gonna don't go document and we're gonna have a query selector and since we're using query selector I'm just gonna say a counter so they're selecting the counter then also we would want a Const this is gonna be a variable had count now we're gonna be selecting two buttons so the first one is gonna be add count some document over here then we're gonna have a query selector then for the query selector we would want is a add count button and lower count button so for this one we're going to use is since we have over there is two IDs so we're gonna say add count BTN here and let's go and copy and paste this line and this would be lower count so not add count lower count and also we would want to change this one well--we're count and obviously as always they need to match if we have lower count BTN ID and ID add count BTN then they need to match as we're selecting them actual in JavaScript now once we have selected both of them let's do let count and this is gonna be our variable that we're gonna set it equal to zero so this is gonna be a run number that we were actually gonna be using for accounting and so far was gonna set it equal to zero now let's create two event listeners and this is gonna be for her two buttons so first we will have add count I'm gonna have add event listener then this is going to be click event and now we would need our callback function so we're gonna call this increment increment counter this is gonna be our first function now the other function is going to be decrement so again what we can do over here we can just copy and paste the line and over here this is not gonna be add count I'm gonna call this lower count over here and you can see over here that I would need a you warrior that's gonna make a little bit more sense if we have a count so this would be add not conent but actually count so let me just fix this and it's actually gonna make a little bit more sense so I apologize for this and we have lower and count right so now they should actually match and this is not going to be increment I'm gonna say decrement decrement now we have two functions and we have two buttons two buttons and obviously if one button is gonna be click the counter is gonna go up and the other one the counter is actually gonna go down now over here let's go back and let's say that we would want for soon increment increment counter function now we also need to have a keyword so I'm gonna say function increment counter and over here we're gonna say again empty parenthesis and this is gonna be our code block now here first things first how do we increment the count we're all gonna do is we're gonna say count so we're getting this variable over here I'm gonna say plus plus we're here and then we're gonna go back over here to the counter and the innerhtml is gonna be equal to this count so I'm gonna sit over here and this is gonna be counter counter inner HTML and this is gonna be equal to what well it's gonna be equal to the count so we're gonna come back over here if we're adding the count you can see over here that we have our number that's actually going up now obviously we haven't set up a function decrement counter that's why this one is not working so we can do the same thing and we can just copy and paste this because the only thing we're going to do is we're gonna change it around the function name so over here we're gonna say that this is gonna be decrement ment counter this is our second over here function and let's do a negative one we're not adding we're actually gonna be taking it off now once I'm done with a function this is actually not gonna work because they were here you can see that I still miss spelled it incorrectly I have lower count so if we're gonna go back over here and now everything is working so this is gonna be negative and now we have add count which is going to be adding account now also what I would want is I won't want to change the color as I'm counting through the numbers so how do we do this well we're gonna do this by actually using a if statement so what we're gonna say well here that we would want to change the numbers depending I'm sorry the colors depending on where our numbers so for the ink counter how we do how we do that well first what we're gonna say is we're gonna say like this if we're here and we're going to say get counter HTML in our HTML and if this hTML is bigger or here then 0 then something should happen and that's something is gonna be the actual color so I'm gonna say counter style here and we're gonna say color now for this color we're gonna say that the color is gonna be hashtag oh yeah and for C a and f50 so that's going to be the color if we're above 0 so if we're adding the color you can see that we have the actual green color however we also have an option of if the color if the actual counter is equal to 0 so I'm gonna right over here else else if and over here we're gonna say counter and inner again in our HTML and we're gonna say is actually equal to 0 so not bigger than 0 it is actually equal to 0 and what we would want then we would want again counter style and let's do color here now this color I'm just gonna say over here then this is gonna be white this is gonna be simple color if we have the 0 so if it is 0 have it as a white however if we are adding up this is gonna be green now if I'm gonna go down over here now once again I'll have a 0 this is gonna be a white now I also would want something that if it is actually less than 0 so how do we do this and also we're gonna just copy and paste these two also an if statement so we're gonna go down over here copy and paste them and now we're gonna say the opposite we're gonna say as we're decrement the counter if this number over here is less than 0 then we're gonna place a red color over here so we can just write over here all red and if it is actually equal again to the 0 we're going to have a white so now we have two options as we're going up this is gonna be actually green and if we're going down now once we reach zero and once we get below zero well actually gonna have a negative now also what I would want is now our functions are working everything is fine however we would want at a little bit of CSS just so as we're clicking the number it actually appears over time and that shows up right away and for this we can have a element animate and over here I'm just looking at a Mozilla developer Docs and just to show you what would be the syntax so we have over here when we read the element then we can use the animate function and our heroes is gonna read and this is gonna be keyframes and then we have options now we're not gonna be exploring every option that's out there we're just gonna look at a basic setup where we have our duration and instead of iterations were just gonna say that this is gonna be fill and fill mod is basically where you would want to stop would you want to go back to the previous setting where you started or you would want to go to the actual setting where you finished so I'm just showing you where I'm getting this animate function well documentation on this animate function know if I'm gonna go back over here to our one which is gonna be counter and then five and if I'm gonna go back to my function what I'm gonna say over here like this I'm gonna say I also would want to animate this counter so I'm gonna say counter because I want to select counter I'm gonna say animate animate now in here the syntax is the first will have a parenthesis then we'll have our keyframes and over here for the keyframes were all gonna say over here and even over here you can see that there is a suggestion now over here what we're gonna say we're gonna create to object now the first object is gonna be opacity so I'm gonna say over here opacity and this opacity is going to be equal to 0.2 so what I'm saying is as I the button the next number shouldn't be showing up right away it actually should have opacity of 0.2 in the beginning now in the end so if I have the array the next object where I'm placing is gonna be where I would want to end or I'm gonna say over here opacity and this opacity is gonna be equal to 1.0 so this would be the end opacity now once I have my keyframes over here right now my when my array is done I also can have another object over here so here I'm gonna have an object and this object is gonna have options now for the options we're gonna have a duration so this is gonna be how long this actually takes 500 over here and also like I said the second one is gonna be fill and for the fill we're gonna say is once the animation is done we would want to go to the state of where the animation finished not where the animation started so we wouldn't want this number to have 0.2 opacity what we have over here we would want the end state or it and the age that would be one so here we're going to write the fill and this is gonna be four words now once we have written all this then let's just check it out what we have since we added this to the increment counter let's just check it out so you can see over here that how the numbers appear over time and if we're going now you can see that there don't take any time they show up right away and obviously the same thing that we did over here to animate as we're incrementing we can do the same thing as we recommending so I'm gonna go down over here in paste and now as I'm lowering the count you can see that there's an animation that takes some amount of time and as I'm going up there is also an animation now obviously if you want to see it better let's say duration is now gonna be 500 milliseconds say that this is gonna be actually one second same over here and let's check it out what do we have so lower in account you can see that now it takes even longer and if we want to go up this actually takes less time this project will gonna create a image slider with a JavaScript so here we're gonna have a container and then I'm just gonna change the background images of the container as we are over here clicking the bow let's start with our basic setup so the basic setup is gonna be that we will have a folder in my case I'm gonna call this slider and I'm gonna have it in desktop and in a folder we're gonna index.html main CSS script is now these are gonna be empty over here and over here we'll have a images now this is gonna be for the background for the whole project and these are gonna be used for our sliders now you can obviously download the folder with all the images inside there or you can actually create your own images now there's a reason though why I use these names with a zero into the four and you'll see later on once we were working with the JavaScript why I did that so if you're using your in own images I would suggest that you actually name them exactly the same way and over here once we are in our texture let's actually start working with a index.html so for the index what I would want is I would want a div that's gonna have a class of images now within the images we're gonna place two buttons so for the first one one's going to say over here type and we're gonna say type button for a class we're gonna say class and then I'm gonna say generic class which is gonna be button and then it will have another class of previous button now once we have this I'm gonna go back over here and was gonna copy this line so I'm gonna say well here and there's gonna be two buttons here now this one is not gonna be previous button we're gonna call this next button and we can also write within the buttons then this is gonna be brief BTN over here save it and then it will have a next button so this is gonna be next BTN so two buttons over here so what we're gonna do with these buttons and with this images well first let's go to see and that's actually styling and first I would want to place that container with images class actually in the center so let's start with anybody let's say we're here to the body and we're gonna say min height over here let's say hundred viewers so this is my preference always to have this window hundred percent then we're gonna say display and we're gonna say flex then we're gonna do a line items in the center so we're placing them vertically and then we would want justify content which is gonna place it in the center horizontally it's now our count container is sitting over let's do right away a background for the whole image for the whole project let's do URL and this is gonna be images folder and background image now right away let's do center so we're gonna place the image in the center cover so we're always gonna cover and then let's do no repeat no repeat for the image so now this is gonna be our image now once we're done with an image let's work with images folder so I'm sorry not the images folder images div so for the images folder first we can always start with them background just to see how it's gonna look like so let's do yellow just so we can see what we're working on see over here this is gonna be our images div now first things first let's do flex zero zero and let's say something like eighty percent so this is gonna be the width right now of our images div then let's do a height so let's do a min height for the main height let's say 70 view heights so we can do the same thing when we're doing when we're working with the whole body you can see the same thing we can do actually separately to our own div that we would want and after that let's do a background and for the background first let's do a image so here you can see that we used a background just so we can see what are we working with but actually let's place a URL and again this is going to be a quotation marks images let's start with background zero and again let's do the same thing where we have a center cover cover and no repeat no repeat repeat over here and you can see as always my bad spelling is coming back to haunt me and now I actually have my image now also let's do a border border radius radius let's say 15 pixels over here so once we have our border radius then we also would want a box shadow so let's say box shadow and box shadow first one is gonna be vertical line so let's say five pixels and 10 pixels is gonna be horizontal and again I'm just making them separate just so you can see what is happening and which one is which value so you're gonna read black so obviously the bigger one is gonna be over here in the bottom and then we have over here which would be the five pixel one so once we have our box shadow last but not least we need actually position:relative the reason why we need position:relative because I would want to place these buttons over here notice they're sitting over here right in the center and also in the center over here like this so you can see over here that's right now they're sitting over here and we're gonna use absolute positioning for this to move these buttons all the way over here so let's actually target the class that we had as BTN because both buttons have that class and let's say over here then this is gonna be display display and let's say inline block now after that we would want a background and let's say white for both buttons then we would want a color I'm just gonna we're gonna say that color is gonna be black and let's do a border and border is gonna be three pixels solid and let's do just green color over here so this is gonna be our border now let's do different font size 1.5 REM so let's make the font size bigger let's make a padding bigger so padding padding and 0.5 REM so this would be padding all around and over here you can see that I actually messed it up I can see that I have a font size and this is not gonna be a : so now let's do a padding 0.5 then let's do border radius and we can use a 20% so we're not limited to pixels we can use a percentage values and let's do box shadow next one and this one would be 2 pixels and 3 pixels or you know what let's do 5 pixels again black so I'm gonna do the same thing over here so this would be a horizontal and then we have vertical and last but not least you know we have this outlined this blue line and let's just get rid of it so here we're gonna say outline:none and once we get rid of the outline after that let's place them actually over here on each side so for this we're gonna say first with a previous button so first one would be previous button pre BT and now since we have this position:relative for the container that actually contains both of these buttons what we can do is we can actually use the position:absolute for the button so I'm gonna say position and this is gonna be absolutely and for now you can see that both of them are here on the edge now since I'm targeting the brief button BTN what I'm gonna say that if this one has the position:absolute then I'm actually going to place it where it is so top is gonna be 50% so what I'm saying over here you can see I have my button from the top 50% and then we're gonna say that from the left is gonna be 0 now over here you can see that it is zero anyway but I'm just making sure that is for sure zero now after that you can see that it's still not where I want it to be because the actual button itself has the values so for this we need to use a transform with a CSS and what we're gonna say is translate and we're gonna say translate both ways we're gonna say that we would want to translate negative 50% and negative 50% to the top so we would want negative 50% left and right and negative 50% to the top bottom so what I'm saying is I'm moving it 50% to the top from its own value and 50% left from its own now and as you guessed now if we have previous button we can make the same thing with the next button so only thing that I'm gonna do over here I'm gonna copy and paste this and we're here we're gonna say next button because this was our class but here we would need to change the values from the top it's gonna be 50% that's correct however here we're gonna say right and the right is gonna be 0 because we would want it on the right hand side so we would move it over here now we also would need to work with these values you see over here that this one this button is not where it needs to be however if I'm gonna change this to 50% now I can see that I'm actually moving 50% to the right however I still moved 50% to the top because the button itself had there are some once we place them in the center there is two more things that I would want to do first I would want BTN active so as I'm pressing the button something should happen first we're gonna say background and let's say gray over here so this is gonna be our background and then we'll just do a box shoutout that's gonna be smaller so let's say box shadow and this is gonna be one pixel one pixel and again and we're gonna do great so this is gonna be once the button is active once we're actually clicking on it you see over here this is where and let's do a hover one also so BTN hover and background let's do green over here and color let's say white I'd say white color so as I'm hovering this is gonna be green with a white color however as I press it you can see that my back shadow is also changing so once we're done with the CSS now we would want to work actually with our JavaScript now for the JavaScript what we would want is we would want to select all two buttons so first we're gonna start button so next beat the end and also we want to select this images container so here I'm gonna say document then we're gonna say this is gonna be a query selector so query selector and for the query selector we're gonna say then this is this is this would be the selection of next BTN because this was the class for one of the buttons and now we want the previous button previous button and breathe me BTN and also we would want for the container so we're gonna say Const container and document then we're gonna say a query selector and over here this would be images so this is the actual class that we have for our images and over here I'm just gonna add them this is gonna be the container now once we have let's do again the counter this is gonna be our again value how we're getting and for now we're just gonna say that this is 0 and for both buttons I want to add a event listener so next button add event listener and we're gonna say what event this will be click event and here we're gonna say next slide so this is gonna be our function now again I'm just gonna copy and paste this I'm gonna say for the brief button for previous button I don't want previous slide and now what I would want it is actually create these functions now let's do first a next slide so first we have a function then we have next slide so for this next slide I would want to create a actual function then this would be a code block and over here we're gonna say like this we're gonna say first how we can change this so we're gonna say counter plus plus so for the next slide we're always gonna be adding value to our counter over here and now what I would want is actually how would want to change the actual value from my background so I'm gonna say we're here container container then I'm gonna say style style and for the style we're gonna say then this is gonna be a background image some background image background image over here and the background image is gonna be equal to what well the background image is going to be equal to the actual container and container value that we have so if you notice over here there's a reason why we have 0 1 2 3 4 now if I'm gonna go back over here and if I'm gonna say container and then over here this is gonna be the actual background image for the container I'm gonna say over here then this is gonna be the bat back ticks then I'm gonna say URL and then we're gonna write image this is the folder that we're getting then we're gonna say BCG which would be the name of our images and then now it's time actually to use the variables that we already learned so we can use the counter variable so as we're changing the counter also the value of the image is gonna be changing so if I'm gonna go back over here you can see that as I'm clicking I'm getting actually a new value over here because the previous one I'm updating the counter and if I start from the 0 then this is gonna be the image for image something and if I just keep going up however the problem is at some point you can see that I'm running out of images you can see that nothing changed because if you notice over here I have 0 2 1 2 3 4 however once I get past the 5 because my counter is obviously going more than 5 because I just keep on adding I'm running out of the images so what I would need to do over here I actually need to check what's happening so first before I do this counter over here plus plus I'm gonna create an if and I'm gonna say if counter is actually equal to four then change back the counter to negative one so I'm gonna say over here counter is negative one so what's happening is I keep clicking I get to the four then it changes back to negative one and I go back to the zero and if we remember the zero was my first image over here so let's try it out and this should be the infinite loop right now because it doesn't matter how far I go the moment I get to four I go back to negative one and let's do the same thing with a brief slide so again we're gonna do the same thing was gonna copy and paste this and this is gonna be a previous one now for the previous light we're also gonna call this function breathe slide now over here since we are actually subtracting from the counter we would need to change around this if statement so in this case we're going to say that if the counter is zero so if we're going back all the way to the zero then we would want to change this counter to the five and the reason for this if the image last one is four I know that I'm gonna change it back to the five and then I'm gonna do counter negative negative so what's happening is now I can go backwards and over here now I can go to the next image and there is no point where I'm running out of images now of course in general now we know how many images we have in general you would probably want to create an array that would hold the the name of the images so then you can use actually the array length so it doesn't matter how many images you have now in this case we're using the fact that I know that I have these five images from zero to four so obviously these if values would also change if we would create an array for the background images but the basic idea is like this and last but not least that's actually an animate so let's say we're like this then we would want counter counter then we're gonna want a animate so this is gonna be the function that we learn in our last in our last project now here we're gonna say like this I'm gonna say that we're gonna start with an opacity so first we're gonna need to create two objects over here over here this would be our starting position and ending position so Paz airy and opacity pasady what opacity is gonna be zero point one over here and the next one is actually going to be one so again we're gonna start with an image that has an opacity of 0.1 and then the opacity is gonna be one so I'm gonna say opacity again equal to what equal to one point zero now once we have the opacity next value is actually going to be actual duration so how long we would want so again we're gonna place a comma over here then we're gonna place another object and over here we're gonna say to raishin and for the duration let's do a thousand which is gonna be thousand milliseconds which is one second then we're gonna actually place the calm over here and we're gonna say again fill and for words so if we're starting with an opacity of 0.1 we would want to stay with opacity of one so I'm gonna save this over here and for the next slide you can see that right now we should be having our animation working now let me check what's not happening because so far we don't have this animation and the reason why it is not working you can see over here that I didn't place my value in the object in the quotation marks and not only that I actually was trying to animate the counter not the actual container so what I need is container and then we would need the animate and also we would need to change this fill to four words where we have the value that needs to be in quotation marks so if I'm gonna save this and as you can see over here now we're animating actually our images and if I'm gonna go back over here you can see that they're changing right away so what we would need to do in this case again we're just gonna grab this counter animate we're gonna copy and paste this and we're gonna go down over here to the previous slide and copy and paste in back order so now for both of the images you can see that there's gonna be animation as we're switching in between the images this basic JavaScript project we're gonna be creating a calculator so here you can see then this is gonna be our end result so I can clear it over here and then I can say let's say over here one plus nine and then I can click what would be the sum and again I can say well plus I don't know 45 or here what would be the sum then times I don't know 90 or here what would we do some all here and then I can clear it as always first let's look at our setup so here this is gonna be a folder then we're gonna have index.html main CSS script is over here and once we're gonna go to the text editor this is gonna be the file with a link to the main CSS and over here this is gonna be the scriptures and first what we would want is we would want to create a section over here and for the section we're gonna say that this is gonna be the class of calculator so this is gonna be calculator oh yeah now within the section first we're gonna have a form and for reaction was gonna delay this we don't need the action over here and within the form we're gonna have a input and then we're gonna say that this is gonna be input text and within the input text we're gonna leave the name and ID just empty and over here we're gonna say that this is gonna be the class of screen oh yeah so the class of screen now once we're done with the form we also would want to create a div or gonna hold all our buttons so first we're gonna say that there's gonna be a div we're here with the muffins and then we're gonna start creating the buttons so first we're going to create a hello button so I'm gonna say over here yellow and this would be a button more here then for the type we're also gonna say that this is gonna meet the button and then we're gonna have some classes so the first one is gonna be BTN class and then we're gonna have BTN yellow BTN yellow would be for the actual color and then we need an attribute so we're gonna say over here data and then we're gonna say num so this isn't gonna be an attribute that we're going to be using and we're gonna set this one equal to and this is gonna be multiplying and the reason why we're setting it equal to multiplying over here is because as you can see over here this is the first yellow button that we have on so we need three more division subtraction and addition so let's say we're here that we want to copy this line three times and they're always gonna change some values over here we're gonna say plus more here then this is gonna be a subtraction and all here this is gonna be the division and we're gonna do the same thing or your division subtraction I know this is gonna be an addition so these are gonna be the yellow buttons now what we would want is the green ones see over here now we continue actually with the gray buttons so let's go back over here and let's just copy and paste a little bit so here we're gonna copy in the first one over here and then we're gonna create a comment I'm gonna say over here and this is gonna be the gray buttons over here and then we're gonna change this one to they actually to the gray and you know what just to make it easier I just leave this one blank because we're gonna be copying pasting quite a bit over here because you can see where and start with a dot and then we're gonna go from nine all the way over here to zero so let's go ahead and let's actually copy and paste this ten more times so one two three four five six seven eight nine ten hopefully this was correct and we're gonna start over here with a nine all the way or you know what no this was the dot so let's say over here and this is gonna be the nut then we're gonna say that this is gonna be the nine over here then this is gonna be actually ten or you know one oh this is gonna be eight this is gonna be the seven then we're gonna have six five this is gonna be four three two one and zero and luckily I didn't make a mistake over here so I'm gonna go back zero one two three four five six seven eight nine so these would be our gray buttons and the last but not least well have this equal sign over here and this is gonna be the clear sign so here we're gonna create two buttons but those are not gonna have the BTN class so we're just gonna say over here that this is gonna be the button you can type and the type is going to be button then we're gonna have a class this is gonna be BTN equal so you're gonna say equal equal over here and then we're also gonna have BTN gray so we're gonna still keep the same color and over here for this guy we're gonna say this is gonna be the actual equal sign and we're gonna copy and paste and the next one is gonna be clear so BTN I know what you're gonna say clear oh yeah now once we have this let's add a big C over here and now we have our buttons and over here this is going to be the calculator now once we're done with our HTML let's go to the main CSS and actually style this so we start over here by saying that all the items over here we're gonna have a margin of zero and padding also of 0 and plus we're gonna say for the box sizing we're gonna have a border box some box-sizing over here and we're going to say then this is gonna be the border box now once we are done with initial styles then we're gonna select for the whole body and since we actually have only one child over here for the body which is gonna be section we were going to be using a flexbox so here we're gonna say that for the body the min height is gonna be hundred view heights over here then we're gonna have a display of Flex once we have display of Flex now we would want to place that whole container in the center over here so I'm going to have an alliance atoms Center so this is gonna be vertically and then we're gonna have justify content center this is gonna be horizontally in the center then after that we're gonna have a calculator so this is gonna be targeting the actual div and since we know that this is the only child over here we're gonna say this is going to be a flex zero zero and 95% so we save it and right now the actual div is actually 95% with now once we are done with a actual container now we're gonna deal with the screen so for the screen we're gonna have a width width is gonna be hundred percent over here so this is gonna be this input screen that we're dealing right now then we're gonna say that font size over here it is gonna be actually seven REM so I'm gonna place a quite a bit font over here for this input then we're gonna have a padding of 0.5 our EMS and also we would want a background and let me do a proper background and this is gonna be our GB and all here we're gonna have a 41 41 and over here 56 we're like this so this is gonna be the color and also we would want a natural color and color is gonna be white and also we would want no border so let's do border none' oh yeah so now we don't have the border over here on this endpoint and once we're done with the screen now let's actually line up the buttons so let me make more room over here we're all just gonna say that this is gonna be a buttons and now we're targeting this div over here and as you can see this one has way more children in the actual body which had only one calculator so here we're gonna say that for the buttons what we would want for this div again we're going to say display flex and this is gonna be displayed as a flex marks then we're gonna say flex wrap and wrap so once it gets not enough room we would want the buttons to actually wrap and then we're gonna say that there's gonna be a transition and for this transition we're going to say all so for any kind of transition I'm gonna say 0.5 seconds linear so this is gonna be one directional transition and also what we would want for the buttons we're gonna say over here that for the button we would want to flex so let's say we're here for all the buttons and now I could see I'm not selecting the class not selecting the ID I'm actually selecting the L and so all the buttons I'm gonna say that all of them are gonna be zero zero 25% more here so now you can see that they're taking up this ninety-five percent that is for a whole container we're here for the calculator now they're taking up 25% each so now we have actually four rows over here like this and also we would want a border I'm gonna say border one pixel solid and black more here and then we'll have a padding so I'm gonna say we're here padding and this is gonna be 0.5 grams and this is gonna be zero also this is gonna be our padding and then I'm also gonna do a transition this is gonna be all I'm gonna say over here to two seconds and we're gonna say ease all right so this is gonna be a little bit longer and now let's do a hover effect so we're gonna have a button hover and now we would want to add a background color so I'm gonna say over here background and blue oh yeah so as you can see then all the buttons as I'm hovering over over here they're gonna have this blue color over here so once we have added a hover effect now we're gonna have some colors over here we're gonna say BTN yeah well and for the BTN yellow we're gonna have a background RGB and over here we're gonna say 245 then this is gonna be 146 and then we'll have a 62 or really like this so 62 is gonna be our background color and then the actual color is gonna be white oh yeah so these are gonna be our yellow buttons and once we have a BT and yellow let's do a BT and gray and by the way I'm I think I'm realizing that I misspelled it but I think we're gonna get over that so here we'll never say BT and gray and this is gonna be a background and over here we're gonna say RGB and over here this is gonna be 2 2 4 we're here 2 to 4 and 2 to 4 these are going to be the colors over here for these gray buttons and also we would want to add a size and style these two over here these two buttons so here we're gonna say that we would want for all the class and bt ends and I want the class of BTN equal equal here and also we would want a BTN and clear and all these state classes and what we would want over here we're gonna say over here font size this is gonna be for our EMS over here so this is gonna meet the size of our buttons right now and like I said the last thing is gonna be BTN equal this class over here equal and for this guy we're gonna say that there's gonna be a background and the background is gonna be green okay like this so now this button is gonna be green and last one is gonna be BT and clear BT and clear and this guy is gonna be a red some background and red oh yeah so once we say this we're now we're ready to go to JavaScript and actually start styling so here we're gonna be in script changes and the first thing that we would want is actually select elements so here first we're gonna say Const and this is gonna be for all the buttons so here we're gonna say be DNS so this is gonna stand for all the buttons then we're gonna have document then this is gonna be query selector so we're gonna say over here and this is gonna be query selector and for this guy we're gonna say query selector all so we would want to select all of them and we're here gonna say BTN so basically we're just dealing with the class of BTN now next one is going to be the actual screen so we're gonna say Const screen and this is gonna be again document but this is just gonna be a single query selector so I'm gonna say over here and this is gonna be a query selector over here like this and then for this guy we're gonna say that this is gonna be screen so here we would want to select the screen then we have two more now the first one is going to be constant is going to be equal button so here we're going to call this equal equal and beat the end and this is gonna be again query selector with a button of clear it's a document query selector I don't know here let's write it this is going to be BTN clear or you know and on this one is equal over here and now we need to just change it around so let me select this this is gonna be clear BTN and this one is also gonna make clear BTN so now we have four selected elements and they are assigned to our variables so we have BTN screen BTW unequal and clear equal and the first thing that I would want to do is I would want to actually loop through all the beat the ends over here because you see what we're getting back over here is we can actually loop loop through so what I'm going to say well here is like this so I'm gonna go down and I'm going to say for this is gonna be my for loop I'm gonna say let hi is gonna be actually equal to 0 then we're gonna have a semicolon then I'm gonna say that loop until you actually reach the beteen and s length so stop before you get to the end and over here I'm going to say that this is gonna be I plus plus over here so whatever buttons I have over here selected how we want to loop through them this is what I'm saying with this statement because obviously we know that arrays are gonna be indexed 0 indexed so here we're just gonna go through all the buttons that we have already over here we're gonna say BT and s so each and every time I'm looping I'm gonna using this I over here because obviously what I'm getting over here is a really like so this is gonna be bid in s and this is gonna be an I so here I'm gonna say for all of them I would want to add an event listener here and this is gonna be click event listener now what is going to be the actual function now we can write it actually outside but I'm just gonna keep it over here an animist function because there's not gonna be much code and over here we're gonna say let number and this number is gonna be equal to what I'm gonna say that this number is gonna be BTN s then we're gonna say I so we still continue working with this single button whatever we're looping so let's say we start with 0 then we're gonna be targeting a first button that is over here in our BTN s then the second time we're looping through this is gonna be already in BTN s1 so for all of them what I would want is would want to get that attribute remember when we added over here this day Dayton numb attribute so this is what I'm trying to get so I want to loop through them and actually each and every time I would want to add as I'm clicking I would want to store this actually value somewhere so I'm gonna add this click event to all of them and once I click them I'm gonna be storing that value so here if I'm gonna save me TNS then I'm gonna say then this is gonna be again an attribute and over here I'm need to specify what kind of attribute well we know that we have data and this is gonna be numb attribute this is the attribute that we would want so once I grab this attribute now I can do actually something with it well actually what I can do is you see over here the screen this is actually holding our value over here of the screen so I'm gonna go back over here I'm gonna say screen value this is gonna be the value for this input is gonna be equal to what well this is actually gonna be equal to plus equal to number so every time I'm gonna click the button I'm gonna collect the data attribute that actually holds the value that I see over here and then I'm gonna add it over here so this is what this loop is doing so once I'm done with a loop then I would want to add two things the first one is gonna be for the equal button and then this is getting before the Clear button so for the equal button I'm gonna say over here like this I'm gonna say equal button again we're gonna add an event listener then we're gonna say that this is going to be a click event and again we're gonna do a unanimous function over here and in the function we're going to write again we're gonna create a variable I'm gonna call this variable a value and over here what we're gonna say is like this there's a function eval that actually evaluates in JavaScript so here we're all gonna say screen and value so what I'm saying is once I click this button how do one use this function to evaluate whatever I have over here on the screen and then I'm gonna say like this I'm gonna say that there's going to be a screen and we're gonna say value is value so I'm gonna say well your screen well you over here is equal to value more here like this so once we save it now we're gonna be actually able to evaluate now after that what if we would want is actually ad for the clear button so we're gonna say we're here for the clear button we're gonna say again and listener and this is gonna be the click event and once we have the click event then we would have a function and in a function we're gonna write that this is gonna be screen value and clear so we're gonna say well here screen value and this is actually gonna be equal to clear like this so now once we save it we can actually go to the big screen and test it out we have so this is gonna be our recording you can see that this was blank before now my refreshen this is gonna meet my calculator so once we have let's say one you can see that now we're grabbing this data attribute and placing more here in this input so this is what we were doing with this first one over here whenever we added to all the buttons to grab this get attribute which would be data num we set it equal to number and then we just added this to whatever value we have over here for this input and then once we click again plus and then this is gonna be a so now once I'm gonna click this one over here now this is gonna be evaluating so in this actually I had the listener we had eval that was looking whatever the value is over here and we were setting in equal over here to this value and then we just said you know what if we're getting this value was gonna place it over here in the screen value and the last one is very simple we just cleared it so we said for the Clear button whatever we have over here we would just want to clear more here to screen well everything else is working fine we actually have two bugs over here well the first one you can see that I didn't select the correct class over here so if this one was BTN equal and here I selected clear equal so I need to go back over here and I need to say that this is gonna be BTN clear so now I need to select the proper button and the second one over here is you can see that if there is no value and we just press over here equals we get this undefined over here all across the screen so if we do not want this we can actually create an if statement so we can say well here if and then we're going to say again if screen actual value is equal to MD so I'm gonna say over here screen well you um we're gonna say equal to empty then I'm just gonna have an alert or else then we're actually gonna run our function so I'm going to say over here and this is gonna be the else statement and over here we're gonna say alert now when alert which is gonna say alert and we're gonna say input is is empty and over here know what once we save it and we're gonna go to the actual bigger screen you can see then once i refresh I don't get this undefined I just say input is empty now that lets the user actually know that we need to input some values so here we're gonna say eight again plus I don't know four it is going to be 12 and x nine is gonna be over here 108 and now we got ourselves a working JavaScript calculator this JavaScript project we're gonna be creating a digital clock as always for the setup I'm gonna have over here the folder and desktop and I know we're here we have index and main CSS and script.js over here and over here later on we'll going to be downloading the font but we're actually gonna do that once we start styling and over here in my text editor we're going to start with an index.html and index.html is actually going to be very short we're just gonna say over here div and an ID and I'm gonna say that this is gonna be the clock so this is gonna be my do now once I have an ID now just gonna go to the main CSS and just apply some styles so here what we're gonna say that for the body we would want a minimum height so muddy so let's say over here min and height and this is gonna be hundred view heights or and once we have the height and we're gonna say again display flex over here and justify content center and then we're gonna say a line items also center over here and once we have all this done let's do a background and the background we're going to say well here this is going to be hashtag zero zero zero oh yeah and once we have over here this dark background now let's actually apply the styles the clock so I'm gonna select again then ID and over here we're gonna say font family and this is we're all gonna go and actually get the font family so we're gonna go back to Google over here and we'll see that we're going to be using this orbit run fonts so hold then I go to the google fonts then over here we're going to select this font over here then they were gonna give us a link where we should include it in our actual document so I'm gonna go back over here this is gonna be our index.html this is we're all gonna be including the link so I'm gonna copy and paste this over here and then we're gonna go back over here and then we're gonna have a fun family so for the font family we're gonna grab these two guys over here and in the main CSS was gonna say over here then the clock is gonna be equal to that now obviously there's nothing showing right now so we're not gonna be able to see but once we're actually gonna add it with the JavaScript then everything is gonna be more then we're gonna have a font size this is gonna be five REM over here and then we're gonna have a color and the color we're going to be using is actually gonna be hashtag three two and we're gonna have CD and then this is gonna be three two oh yeah and you can see that this isn't gonna be this green color so once we're done with HTML and CSS let's actually go and start working on a clock order so the first one we're gonna do is we're actually going to create any function and we're going to call this function show and time so this is gonna be our function now once we have the function over here then let's actually create a variable and we're going to say that the variable is gonna be let and date no more here this variable is gonna be equal to the global object off a date object so here this is gonna be equal today and what we need to remember is that once we have over here this global data object equal to our or here variable then we can say that this is gonna be another variable that let's let ours this is gonna be date and get ours over here so I'm gonna be getting the hours now what we're gonna be getting here we're gonna be getting starting from zero all the way to the 23 so this is gonna be the numbers that we're getting and I'm gonna say let and we're gonna say seven minutes and this is gonna be date and the same as within hours we'll just gonna say it's gonna be in the minutes no I'm in the minutes we're gonna say again what is it gonna be what we're gonna be getting this is gonna be zero to fifty nine over here and then we have one more and this is gonna be the seconds so here we already know what we need to do I'm gonna say seconds over here and this is gonna be instead of getting met I'm gonna right over here then this is gonna meet and get seconds and again this is gonna be the value between zero and fifty nine so now we have the actual hours minutes and seconds now first what I would want to do is I would actually want to format the hours over here so let's say we're here that we would want to format them so how we would format them first we're gonna say that there's gonna be a variable so we're gonna say over here let format our sorry and this format hours is gonna be actually equal to another function so we're gonna say we're here convert over here format format Orion and we're gonna pass this variable of ours over and now let's go ahead and let's actually create this convert format function so here this function we're going to call it function then we're gonna say convert and format we're here and then we're gonna write them this is gonna accept a argument of time so this is gonna be the actual hours that were passing over here but we're just gonna make this a generic name right now for this actual argument now over here we're gonna say like this so basically what we're trying to do is we're trying to get a values of a.m. or p.m. which you are going to be actually at the end over here of the clock so if we're gonna go back over here total o'clock what we're trying to get over here is this guy so if it is pass a certain time then this is gonna be p.m. so basically if it's gonna be passed 12 o'clock then it's gonna be p.m. and if it's actually going to be less than that then it's gonna be a so this is what we're trying to create and over here we're gonna say let format and well right away you're gonna say that this is going to I am so by default this is gonna be a however I'm gonna check that if the actual hours is equal or more than 12 then this is actually gonna be p.m. so I'm gonna say time equals or here and bigger or equals 12 and then we're gonna say that the four month is actually p.m. so I'm gonna say them this variable he's gonna be equal to p.m. so this is gonna be the p.m. and last village is gonna say over here that this function is gonna return this format for us so here we're gonna say this is gonna be the format so here you can see that now we're storing this variable over here this variable stores this guy or whatever we're gonna be getting over here because as you can see once I open up hole here this new date now I'm getting instantly a time because I'm getting at hours get minutes and get seconds so obviously whatever I'm getting in these hours I'm passing in this function and I'm getting back either or either I'm getting back am or in this case this is gonna be the p.m. now once we have formatted the time there's not a thing that we would need to fix so if you remember we were getting values between 0 and 23 for the hours and actually I would want to fix that I would want to make sure that over here I have nine over here not if I would be having over here like 21 so we're gonna go back over here and we're gonna create another function before we do that let's just set it equal to a variables and we're going to say that this hours is gonna be actually equal to the function that it will going to be creating and the function we're gonna be creating is gonna be check or here time and we're going to be passing the actual hours variable itself so we're gonna create a function then we're gonna pass over here this hours variable and whatever is gonna return we're gonna set this hours variable equal to so here we're gonna go down and we're gonna create a function I'm gonna say check time aurilla now we're here we're going to be passing again a generic argument so we're just gonna call this a time and over here we're gonna say like this we're gonna say if time so basically if the hours are passed well well what we would want to do well first we want to say time so whatever we have passed well let's say 13 and this would be or here equal to time minus 12 over here so I would actually subtract the 12 from the hours so in that case I'm not getting these 20-something numbers I'm actually gonna beginning getting these numbers well they're zero over here nine or something like that so this is the first check that I would want to do so if it is gonna be past 12 actually I would want to subtract 12 and then this is gonna be equal to this time now also another thing that I would want to do that if over here time is going to be equal to 0 and we know that time is going to be equal to 0 once it actually hits the midnight we would actually want to set it to 12 so here we're gonna say if it is equal to 0 like this then this is gonna be equal to the time and equal to 12 over here and the last thing that we want is as always a return of time because as you can see over here we set it equal to this function so here this was a function expression whatever we were getting back I actually need to pass in these hours all right so we're gonna say over here return and I'm gonna say time over here so this is what we're getting over here as a variable now the last thing that I would want is actually fix the fact that there is no zeros over here so over here you can see that we have the zeros but normally what you would have is if it is less than 10 you wouldn't see the 0 over here so let's actually fix that also so before we do that let's actually say that there's gonna be three of these variables so again we're going to start with an hours over here and then we're gonna again set it equal to add zero function and we're going to be creating ourselves now we're here again we're gonna do the same thing we're gonna grab whatever is over here in hours and what do we need to remember that with hours we already converted at one time see over here we grabbed an hours then we passed it over here now we're getting this value already and passing over here so all we want over here is add the zero and the same thing we're going to do with seconds and minutes so here we're gonna call this minutes and this is gonna be seconds so let me just grab both of them over here like this and we're gonna say this is gonna be equal two minutes and this guy is gonna be equal two seconds so I'm gonna go back over here and check this guy and I'm gonna say seconds so now what we have is three variables that were actually going to be using actually insert over here in our document but what we're gonna do is we're gonna pass first through the function of add zero so let's go down over here and let's create this function so we're gonna say function and we're gonna call this again I had zero and we're gonna have a time and this is gonna be generic whatever we're passing through and over here again we're gonna say an if statement so this is gonna be if time is less more here than 10 then what should happen then we're gonna say like this then we're gonna say that the time is equal to more here first let's say that this is gonna be zero and then we're gonna say the actual time so then if this is gonna be less than ten that we're gonna say zero plus nine something like this so time over here and the last thing again as always we'll have to return so here we're gonna say return time now we're getting back over here these three values now the last thing the only thing we need to do is actually place it in our document so what we're going to say well here is then this is gonna be a document then we're gonna say get element by ID now our D is gonna be o'clock this is gonna be already and then we're going to say inner HTML and 40 inner HTML we're gonna use a template strings because that way we can use the variables so now what I'm gonna say like this I'm gonna say that I would want to select first hours over here I would want to select hours then I would want to select minutes but before that let's put a colon over here then we're gonna have a minutes oh yeah minutes and then the third variable and the fourth variable was a seconds and for nine hours so again another : then this is gonna be seconds more here and then the last one we're gonna save and this is gonna be again dollar sign and over here this is gonna be the format ours this is where we're getting back this a.m. or p.m. so I'm gonna go back over here and we're gonna say format format hours now once we are done building this show time function now it would be good time to actually call this function now what I'm gonna do over here I'm gonna go to the bottom of the document and I'm gonna actually call this but over here what I would want is actually call this as a callback function and I'm gonna call this as a callback function in a set interval function so this is gonna be a built-in JavaScript function then it's gonna take two things first it's gonna take a callback function basically have function it has to be run and the second argument is actually going to be a time interval in how often that function is run so we're here this would be in milliseconds so if I'm gonna say over here then this is gonna be thousand that means and this is gonna be one second over here because this is gonna be tell a thousand milliseconds and over here I'm gonna say that this is gonna be show time function so basically what I'm saying I created this function that gets a new date and then it actually transport all these functions that we created then we insert over here in our document and then I'm gonna say over here like this that I would want to run this function however not just run at once and show the numbers would actually run each and every second within this set interval as a callback so let me save this one over here and now you can see that now I have my clock and as you can see that each and every second is going however there is one thing where let's say if you're gonna refresh you can see that for one second you're not gonna see anything because it's gonna take one second for this function actually to start run so what I would want to do over here is I would just want to call this function first so let's say this show time what's gonna call it on our own or here like this so we're just gonna say that we would want to call this function now once you refresh you can see that you have first the values and then your set interval starts running so if we're gonna go back and we're gonna say it all recording and holding a refresh you can see that right away we have our clock in this JavaScript project we're gonna be creating a menu so here you can see that we have a header and then this would be a banner with an image background and over here if I click the button you can see that right now I'm getting my menu items however if I'm gonna go back over here and click it you can see that it's closes and also with a JavaScript we're gonna be controlling over here how these bars move over here like this now let's look at our project so here you can see that will have a index.html then we're gonna have a main CSS and this would be a scriptures however we're also gonna have image this is gonna be the header image and over here this is gonna be the logo but we're gonna be using in the actual header and also in the document we're going to be using a font awesome so for now what I'm gonna do is I'm just gonna get a font awesome but I'm just gonna use a CDN so I'm gonna say font awesome then I'm just gonna open up a web page and once I'm in the website I'm just gonna look at how to use and then we're gonna use the SVG with Jas and then over here like I said Rose is gonna grab the CDN so I'm just gonna copy this one then we're gonna go back to our index.html and over here we have the links to main CSS and script jeaious but over here what we're gonna say is we're gonna copy and paste and now we're gonna get our font awesome icons so now that we're done with our setup let's actually start placing our HTML so here we're gonna say that first we would want a nav so I'm gonna say over here like this then this is gonna be a element with a class of nav bar here so this is gonna be on my element now within this nav bar what I would want is I would want a nav bar header so in the header what's gonna happen we just close this we would want to place first a logo and over here this button so we're all gonna say well here that there is gonna be a div with a class of nav bar and two underscores and we're gonna call this a header so this is gonna be out there then over here we're gonna say that there is gonna be a image now this image is gonna have a source and over here we're gonna say that this source is gonna be image and then we're gonna say that this is gonna be the logo and this is where we would want to place the logo and once we have the logo then we're gonna add also a class now for this class we're gonna call this class in a bar and again to underscore logo so this is gonna be the class and once we have our image over here now navbar header then also we would want to create a navbar button so I'm gonna say over here and there's gonna be a div of navbar again to underscores and BTN now within this div we're actually gonna have three divs with two classes each so there's gonna be a div of bar and there's also gonna be the second class but over here I'm just gonna leave this blank for now so I'm gonna have bar but now I'm gonna say written this is gonna be bar one so these are gonna be two classes and that I'm gonna change over here that this is gonna be bar three and this is actually gonna be bar - the reason why we're adding over here these classes is because you can see that they're all gonna have a different functionality so this would be first second third and you can see the second one disappears and the first one and the third one perform some kind of action all right so this would be our hero header so once we're done actually with a header now what I would want is have the links because first we're gonna place the header and then we would wanna links so let's say over here if this is gonna be the header let me create some room and we're gonna say over here this is gonna be ul unordered list and we're gonna call this navbar and two underscores again and we're gonna have links now what am I gonna have in the links well first let's create a comment and we're gonna say then this is gonna be single link or here because we're gonna have to create a lie and then over here we're gonna have a link and then within a link there's gonna be a font awesome so let me just close this window and all here in the single-link we're gonna have is like I said Li we're here and then within a liar we're gonna place actually also a link now for the linkage is gonna have a hashtag so this is this link is not gonna go anywhere so far but also it's gonna have a class and the class is gonna be navbar then it's gonna be two underscores single and then we're gonna have a link so this is gonna be our class now within the link like I said we're gonna go over here and we're gonna have any font awesome over here so you can see that I messed up a little bit now what I would want is I then I'm gonna say FAS and then this is gonna be FA home now I open up this font awesome now I can see this is gonna be my Phantom icon now once outside the font awesome don't place it inside the font awesome I'm gonna write over at home so you can see now this is gonna be our link and what we would want is we would want four other links like this well three other links like this so here we're gonna say that we would want to copy this and we're gonna say over here then this is gonna be one two three oh yeah and let me just check whether this is correct over here and let me say this unseen this is gonna be home and here we have home HTML CSS and JavaScript so what we need to do right now is we need to change these values over here because you can see that we have all of them home so we can actually maybe use multiple cursors over here because these are all the values that are all gonna be changing over here and I was gonna say that this is gonna be home and this is gonna be home home home and then we're gonna delete all so this guy and this guy so we're just gonna leave them and then now we're gonna say that this is gonna be HTML and then we're gonna say html5 however here we need to change from FAS to fa B so now I can see that I have my HTML and we're also gonna write that this is gonna be HTML now also let's do a css3 so this is gonna be CSS and this is going to be jeaious so it's a jeaious and outside we're also going to Junius so now I can see that only thing I love to do is for me to change these bees over here and once I have this guy over here now we can save it and now I can see that I have all of them now once I have the nav bar now it would be good time to actually place a header over here so we need a header element so we're gonna have a header and once we have the header element we're actually done with a HTML and we're you to go and start styling in the CSS and what I would want to style in CSS first I'm gonna start with the actual as always a all elements so I'm going to say over here then this is going to be a margin:0 then this is gonna be a padding:0 also for all of them and they're also gonna have a box sizing and for the box sizing want to say border box so this is gonna be the rules that we want to apply for all of them so let me just save this one over here now I can see that we don't have any packs now after that we would want to start with a nav bar header nav bar and we're gonna say over here header and don't worry that you cannot see this button over here we need to add the actual colors so here we're gonna say header let me just make sure that I'm actually targeting the correct class because I have been to Nome to actually miss my classes so here nav bar and this is gonna be the header so here we're gonna say is we would want a background now for the background this is gonna be hashtag 5 4 5 4 5 4 I like this I can see that I have my background then we're gonna have a display of flex and over here we're doing display folks because I want to move them as far as I can from each other and then we're gonna have a justified content and if we use the space between this is we're actually placing them in between again we still need to create a the actual button so then we're gonna be able to see better and over here we're gonna say a padding padding over here and this is gonna be 0.5 REM so this is going to be top bottom and one REM off left and right and then we're gonna do a border and let's say border bottom like this border bottom 0.3 or EMS and solid and now you would want to do a hash tag now six then the next one is going to be be a a seven five oh yeah let's save it and now we got ourselves a border once we have the border let's we'll start working with the button first of all let's do a bar over here and BTN so this is gonna be your class and over here we're gonna say border and for this border what I would want is five pixels solid and again we're gonna use the same color so let me just grab this color and let me copy and paste this save this and sure enough right now you can see that I have my button now what I we don't see right now but I already know that I we're gonna have to do is align itself and Center because basically by the end of styling this over here logo is going to be way bigger than this and I want them to actually be lined up in the center and then last let's do a cursor and let's say this is gonna be pointer as we're hovering this is gonna be the pointer now let's do the actual bars I'm gonna say bar one bar class of bar 2 bar 2 and the third one is gonna be bar 3 over here like this and this is gonna be my class so what I would want over here now actually I would want first of all a width so I'm gonna say 30 pixels no here then I would want a height this is gonna be 5 pixels and then this is gonna be margin 0.5 our EMS hole here so this is gonna be my bars however we cannot see them right now because we need to add the actual color again so let's do again a background here and copy and paste and now we can actually see the bars and then let's do a transition transition over here and we're gonna say this is going to be all two seconds ease what is the reasoning for this transition see we're here once I'm gonna click it I'm actually going to be applying this transition so whatever you're seeing that it takes over time this is actually CSS transitioning so that's why we're adding this transitioning Oriya now once we're actually done with these bars now let's start working with the links so first of all let's do a class of nav bar and this is gonna be links this is gonna be the links class we're here we're gonna say first list style I don't know how to type and we're gonna say none then we're also would want to do a transition so I'm gonna say over here transition now in this transition is gonna be once we're clicking you see over here how they appear in disappearing again this is how this transition actually controls and since we want them to actually take the same amount of time so let me click it over here and we would want over here we're gonna say like this I'm gonna say transition and over here we're gonna say again all two seconds ease aurilla so this is gonna be our transitioning now once we're actually styled in the navbar links the next one is gonna be navbar single link so I'm gonna go over here and we're gonna say that this is gonna be no more no more on single link oh yeah now once we have created a element this is not a function actually we need to place the curly brackets and then we're gonna say like this so now we're styling order this one like so first we're gonna say display and we would want display block over here then after that we would want a background and the background is gonna be like this we're going to say that this is gonna be hashtagged six nine seven six nine seven and four seven c-47 see over here I'd save this we're here this is going to be the background for each and every link then we're gonna have a padding padding all around one our EMS then we'll have a font size this is gonna be one point five our EMS reeling this then we're going to have a text decoration we're going to say none we don't want any decoration text transform let's do a tracks transform and we're gonna say that cap toys so we're gonna have this first letter uppercase and then we'll have a color actual color and the color we're gonna copy this green one over here so I'm gonna go ahead copy this and copy and paste it so now I have my color for the length then we're gonna again have a transition however this transition is as I'm hovering over them so this is nothing to do with the JavaScript we're gonna do a again transition and we're gonna have all one second and East and well here again let's do a cursor:pointer oh yeah and now let's do actual hovering so once we are down over here let's say that this is gonna be never single link hover so as I'm hovering what I would want is first of all padding left I'm gonna make sure that I have actually padding left and I'm also gonna make sure that I have a different background so let's say we're in this is gonna be padding left over here and we're gonna say that it's 1.5 our EMS and the point for this is see over here I have padding all around one our EMS so if I would want them to move as I'm hovering I actually need to add a little bit more padding let's say from the left so that way they were gonna be pushing to the right so let's do it live over here like this and then let's do a background and again we're gonna do hashtag five four five four or five four or here save it now check it out what happens as I'm hovering you can see that it changes the color and it actually moves a little bit to the right because we have pushed the padding to the left and now let's do a header header over here and for the header what we would want is actually have first a background and for the background I'm gonna say URL and in the side the URL what we would want is to find the actual image so it's gonna be images and header over here and then we're gonna save it and we're not gonna be actually able to see anything and that is because we would need to add some height so again we're gonna have a min height over here but instead of just hundred what we're gonna do is we're gonna use the caulk over here from CSS because I know that eventually this header over here is gonna take up a ninety one point eight pixels so I'm gonna say right now I'm like this is gonna be hundred view heights - and whatever the height of the navbar well since I already know that this is gonna be 98 point a ninety one point eight pixels I can just do it over here like this you can see that I need to add a semicolon otherwise it's not working so now you can see that I have actually my image and if I'm gonna be able to close it down then you'll see that it's gonna be taking exactly the whole screen so I see over here since I know that once my navbar over here when it's done this is gonna be ninety one point eight you can see that it's taking exactly hold the rest of the screen because if I would add over here hundred then there would be 91 pixels and then I would scroll even down so that's not what we want we actually want to have 100 - whatever we're gonna have for a number and then let's place a image in the center so we're gonna say Center cover make sure that we cover and make sure that we no repeat because if the image is too small it might repeat a horizontal direction so let's do it like this and now we're ready to jump to JavaScript and actually style it so let's go to a JavaScript and first we're gonna have to create two variables oh you know like this I'm gonna say that we would want variables so first is gonna be Const and we'll have a navbar BTN and this is gonna be the button and over here we're gonna select the document query selector query selector in the query selector we're gonna say that we would want navbar and this was underscore underscore BTN so this was our button that we would want to select and the next one is gonna be navbar link so we can copy and paste this we can just say this is gonna be links and over here this is gonna be like so gonna write over here links so these are gonna be our two variables that we wouldn't want now basically what I'm saying over here like this I'm selecting this button here and then I'm gonna be working with the links now first what I would want to do with a button you see you or hear that I'm selecting the button now once I click it I would want to toggle this menu over here so let's go here and let's say there's gonna be a nav bar button add eventlistener over here and this is gonna be the click event click event and over here we're gonna say function so for the function what we would want is first we're gonna create a variable so first we're going to check whether we have a class or we don't so here we're gonna say let well you over here and this is gonna be navbar links so first we would want to select the links whatever we links had over here and we're gonna say we're here then this is gonna be class list and navbar collapse and over here we're gonna say class class list and contains so we're looking whether this actual navbar links do they contain the class or not and there's actually two questions right now first of all what is navbar collapse over here what is this class actually and where we are looking whether this actually contains it or not so let me save this over here so this is gonna be our class in that bar collapse and what we're gonna do over here we're going to go back to the main CSS and we're actually gonna change around a little bit okay you see that I have over here my navbar links over here I have the links now by default right away they're showing and that's actually not something that I would want what I would want over here is I would want to go back over here to the links and let me just place a comment just so we can see that we are adding this later and then we're gonna say over here that there's gonna be height over here off zero for these links over here like this now first of all you can see that once I added the zero they are gone oh here and also I would want a overflow more full hidden oh yeah so once I said it everything is gone so first things first we got rid of this navbar or no second one let's create the class that we were talking about let's say navbar we're here and we're gonna say collapse collapse more here and we're here we're gonna say is height and I'm just gonna say this is gonna be 240 pixels and again I already tested before what would be my height of the whole thing that's how I know that this is gonna be 250 now you can use whatever value you prefer if you don't like this value so now we have two things first of all we hid the actual links and then we add over here this navbar class now let's go back to JavaScript and now what we're saying is check whether the links actually have this navbar collapse class well we know right now that in the index.html they do not have it over here and the reason why we're saying this navbar class list because this is just gonna be easier for using this class list then we can just check whether the classes that navbar links have do they contain never collapse or not well they don't so now we can write over here in an if statement now I can basically say like this we can say that if value is true in which we know then this is gonna be false but let's write over here if value and now we have if announce so here we're gonna have else over here like this and what we're saying is we would want first if it is true if it does have the navbar Klux I would actually want to remove it because this is how we're gonna be toggling so I'm gonna say well here navbar links so this is gonna be my variable then we're gonna have class list and then we're gonna say over here remove obviously this is kind of right now redundant because it actually there isn't there but this is for actually toggling so here we're gonna say now bar collapse and again make sure that we have these two underscores collapse over here now if it is exists then we're actually removing if it doesn't then we're gonna be adding so I'm gonna grab over here and I was gonna copy and paste this no we're here we're gonna do here that instead of a remove I'm gonna check if it does not exist we're gonna say over here add so now what's gonna happen is once I click it you see over here now my links appear now the problem over here that you can see that I misspelled over here in this class so it's actually collapsed so now once I click it everything is working fine because before that it wasn't working so as you can see over here now when I'm clicking I'm actually toggling again the reason why this takes two seconds is again back to the CSS over here because we had this transition over here for the navbar links and now we're just basically toggling with this class you see over here this knob bar collapse we're checking whether it has the class if it has the class then we're removing the class if it does not have the class we're actually adding the class so this is how we get the actual navbar working now let's look at how we can work with these buttons so let's say over here that we have the same thing again we're gonna be checking for the value oh yeah and then we're gonna be adding a class or removing the class however in this case since we see over here that we're gonna be working over here with inside this nav button itself so what we need is actually use the nav bar button that we have over here so I'm gonna say over here no more BTN and then again we're gonna do the same thing class list and if this is gonna be true which in the beginning this is not gonna be true I was gonna say we're here to move because the actual starting position for both of them is gonna be exactly the same so we know this is gonna be false so I'm gonna say remove and in this case we're gonna create again a class and we're going to call this class and change and again we're gonna have to go to the CSS and actually create that class but for now let's have a change and maybe let's add over here he remove so if this was the removal its and add over here and now let's go to the CSS and actually create this class over here so if we're gonna go back to the main CSS I'm gonna scroll up you see the bars over here now let me go down over here and what I'm going to say that I wouldn't want to create a class the name of the class is gonna be change and then we'll see how it affects each and every bar so first I'm gonna say change this is gonna be my class that I'm gonna say bar one so what I'm saying is if this class exists with this button then this is how it's gonna affect over here this bar one now first of all I'm gonna say transform so I'd want to transform it and that I'm gonna say I would want to rotate this is gonna be negative 45 degrees over here and then I'll also want to translate so first I'm rotating and then I would want to translate so here I'm gonna say negative 10 pixels and then positive 10 pixels so this would be for the bar 1 then what I can do hole here is I can just copy and paste this and you can see that I messed up a little bit let me just go back over here and so like this and over here let's do 1 2 and now let's change 4 bar 3 & 2 so let's say over here this is gonna be bar number 2 it's gonna be more number 3 now the difference for the bar number 2 what we would want is we would want to get rid of it so we're gonna say we're here very simple we're gonna say opacity and we're gonna say 0 so we're gonna hide the second one once we apply this class to a parent navbar button and the third one was gonna change the values I'm gonna say over here not 45 degrees rotate and translating also then change the values I'm going to say negative 7 and negative 8 over here like this this is gonna be negative 7 negative 8 now once we have created a class again what's gonna happen is you can see over here now we're applying this class so what do we need to understand is that by default if we're gonna go back over here to our document and if we're gonna go over here index.html you can see that this does not have this links class over here and also this navbar button doesn't have the class however we can create this class in CSS we can check it out how it would actually affect whatever HTML and then using javascript we can actually use this checking we can check whether the element has the class and then we can either add it or remove it so let's say we're here if I'm gonna go back if I'm gonna say well here inspect so let me make this a little bit bigger and let's get over here Google developer tools and we're gonna have a element so you see over here if we have a navbar if I'm going to open this navbar up you can see that we have a nav bar links and over here this is gonna be a nav bar button now check it out what happens now once we click it this guy gets a change and this way actually gets in anbar collapse so this is how we get this actually done and this is how we can create this menu using a Java Script

Channel: Coding Addict

Views: 801,935

Keywords: javascript tutorial for beginners, website, programming, web, javascript, javascript tutorial, javascript tutorial for beginners with examples, javascript for beginners, tutorial, javascript introduction, JavaScript (Programming Language), Programming Language (Literary Genre), javascript lesson, learn javascript, for beginners, javascript tutorial beginners, beginners, lesson, Web Design (Project), Web Development (Project), Web Developer (Job Title), coding addict, codingaddict

Id: Kp3HGwlXwCk

Length: 181min 7sec (10867 seconds)

Published: Mon Jul 09 2018