**Working with Slides**

When working with slides, we have two main options: scrolling and navigating back to the end or beginning of the slideshow. To implement this functionality, we need to add some comments to our code to highlight the different setups.

Our first setup involves using the `scroll` function to navigate through the slides. We can do this by adding a counter that keeps track of the current slide's position. We start by setting the counter equal to the length of the slide array, which in this case is five. This means that we can navigate through all five slides.

However, as we progress through the slides, we need to fix the fact that eventually we run out of slides. To do this, we add an additional setup where we check if the counter is equal to the length of the slide array minus one. If it is, we know that we've reached the last slide and can navigate back to the beginning.

To implement this navigation feature, we use an `if` statement to check if the counter is less than the length of the slide array minus one. If it is, we set the counter equal to the length of the slide array. This means that when we reach the end of the slideshow, we can navigate back to the beginning by setting the counter equal to zero.

We also use another `if` statement to check if the counter is less than one. If it is, we know that we want to navigate back to the end of the slideshow. To do this, we set the counter equal to the length of the slide array minus one. This means that when we reach the beginning of the slideshow and want to see the last slide, we can use this counter value to access the last slide.

In addition to navigating through the slides, we also need to hide or show certain elements such as the brief and next buttons. To do this, we add comments to our code to highlight the different setups.

**First Setup: Circulating Through Slides**

Our first setup involves using a counter to navigate through the slides in a circular motion. We start by setting the counter equal to zero and then use an `if` statement to check if the counter is less than one. If it is, we know that we want to navigate back to the end of the slideshow.

To implement this navigation feature, we set the counter equal to the length of the slide array minus one. This means that when we reach the beginning of the slideshow and want to see the last slide, we can use this counter value to access the last slide.

We also use a `while` loop to navigate through the slides in a circular motion. The loop continues until the counter is greater than or equal to the length of the slide array. This means that when we reach the end of the slideshow, we can start again from the beginning by resetting the counter to zero.

By using this setup, we can easily navigate through the slides in a circular motion and access all five slides without any issues.

**Second Setup: Hiding or Showing Elements**

Our second setup involves hiding or showing certain elements such as the brief and next buttons. To implement this feature, we use `if` statements to check if the counter is within a certain range.

In the case of the next button, we use an `if` statement to check if the counter is less than the length of the slide array minus one. If it is, we know that we want to show the next button and set its style display to block. Otherwise, we hide the next button by setting its style display to none.

We also use a similar approach for the previous button, but with an `else` statement to check if the counter is greater than zero. If it is, we know that we want to show the previous button and set its style display to block. Otherwise, we hide the previous button by setting its style display to none.

By using these setup, we can easily hide or show the brief and next buttons as needed, without any issues.

**Conclusion**

In conclusion, working with slides involves using counters to navigate through a circular motion and hiding or showing certain elements such as the brief and next buttons. By using `if` statements and loops, we can implement these features in our code and create an interactive slideshow that is easy to use.

"WEBVTTKind: captionsLanguage: enHello, everyone, and welcome to 15 basic vanillaJavaScript project video, where we will sharpenour JavaScript skills by building cool project.Since there are quite a few projects, I'mjust going to show you how you can navigateto a website where you can find all the project.So that way you can explore all of them yourselfon on your own time. So if you'd want to seeall the projects that we're going to buildin action, just navigate to John's melton.com.Again, the URL is dub dub dub, John's milka.com.keep on scrolling past the courses. And thenin the latest project, look forward to JavaScriptproject. Nine in here, just click on the Homeicon. And you'll navigate to a website whereyou can see all the project pan if you wantto see how the project is gonna look likejust click on a card. And then of course,you'll see the project in action. So for example,this is going to be our reviews project. Ifwe would want to see I don't know menu project,this is going to be another one where we willbe filtering on the menu items. And we'lltake a look at our cut them dynamically. Andhopefully you get the gist few quick notes.Before we begin. All the projects are partof my JavaScript course, which consists ofJavaScript tutorial, and many more cool projects.And as far as the project since our main goalis to practice JavaScript, all the CSS isalready created for you. And you just needto add few classes in your HTML. One thingthat I would want to mention is that duringthe project, we will not use arrow functions,and few other possible IR six syntax options,simply because these projects were built asa practice for the course Dom module. Andat that point, and of course, we simply havenot covered ear six yet, obviously, coursedoes contain extensive ear six module, wherewe cover ear six syntax and build more interestingproject using ear six. Now if you're extremelysad that we don't use arrow functions in thisproject, well, you can just replace all theregular functions with your own arrow functions.It is as simple as that. Lastly, in orderto follow along with the project, you willneed a starter project. And you can get itby visiting John's milka.com. So if you'llnavigate to john smith.com. In a latest project,if you'll look for the JavaScript project,then of course, in the bottom you'll see astarter files and a source code. Now for thisparticular project, both of them lead to sameexact GitHub repo. So if you click over here,you will navigate to my GitHub repo. And fromthere, either clone or download the starterproject, and you will be good to go. Sincethe setup for all the projects will be exactlythe same might as well save us some time andshow the project set apart only once. So youwill have to navigate to my Git repository,and then choose the clone or download option.And then once you do, you'll have access tothe folder. And then once you crack open thefolder, you'll have all the projects in there.Now for each and every project, you'll havetwo folders, you'll have the final folder,where you'll have finished application. Andthen also you'll have a setup folder. Andthen at the beginning of every project, I'mjust going to grab my setup folder, and addit to my text editor, Mark. So sorry, my setupfolder, just drag and drop, this is goingto be the first project. The same I'll dofor the next one on next one on next one.So as we're starting with the project, youjust need to look for that particular project,and just grab the circle. And then the finalfolder is for your reference. So for example,if you would want to see all the lorem ipsumis gonna look like I'm just gonna open fornow, another browser window, work so and thenI'm looking for final. And then I'm just openingindex HTML. So this is going to be a finishedproject, just in case you need to referenceit. Now, as far as the setup one, of course,I'm just going to drag and drop the folder.And now it's going to be in my text editor.And while I'll be developing the application,I'll set it side by side with a browser window.So my setup is going to be always exactlythe same, where I have the text editor onthe left hand side, and then the browser onthe right hand side. And then I'm using myextension in order to open up my file. Soas you can see, right now, in the right handside, I have my current project. So this isgoing to be my setup for all the projects.Whatever project we'll be building, I'll justopen up my setup folder in a text editor andset it side by side with a browser window.Now there's one more thing that I would liketo cover because I see that way Too many times,and now on is the fact that even though youhave access to a final project, it doesn'tmean that you can just copy and paste thecode. Unexpected, everything will work. Now,let me show you what I mean by that. For example,I'm working on a first project. And for somereason, I came up with my own class for thebutton. So say class, I'll call this specialbtn. And I'll call this also special button.Then, of course, since I'm following alongwith the video, something doesn't work, becauseyou came up with your own class. So what Isee people doing is, of course, looking forwardto final project, man opening up the address,or grabbing all the code, and then copying,pasting work. So so for example, we alreadyhave something in the address, I'm just goingto delete it, copy and paste, and the codestill won't work. And then of course, if Icheck the developer tools, I can see thatI'm having here. So this will not work. Ofcourse, you can use the final project as areference as a reference our setup the project.But if the code works, the final project codeworks. That means that you have some kindof error. And oftentimes, what I see is thatpeople just look at my code, they copy andpaste it and they say, listen, your code doesn'twork. Well, the reason why your code doesn'twork, because of course, you're setting upyour own HTML. And of course, that's why youwill get an errors. So yes, of course, usethe final project for your reference. So youcan see how I set up the project. But if theproject works on your local machine, thatmeans that it's not my code runs bad. It'sactually your setup, because you missed outsome kind of class some kind of ID, some kindof HTML element, or along those lines. Okay.And once we have looked at our setup, I guesswe can start working on our project, the firstproject we'll build will be the color flipper.And essentially, the idea is following, we'regoing to have a button. As I'm clicking thebutton, notice, we'll change the backgroundcolor of our body, and also will display whatcolor we're using. And we'll have two setups,we'll have a simple one, we'll just use specificamount of colors. So it's going to be fixedarray with fixed amount of items. And thenwe'll have the second set of the hex colorsetup will generate hex colors on the fly.And in this case, we have infinite amountof options. Now, of course, when I say infinite,what I'm talking about here, is we're justgenerating the hex color on the fly. So asyou can see, this is not a set amount of items,every time we click on a button will generatea unique x color. In order to get started,we'll have to build our index HTML first.And we'll start with our simple one. So effectivelywhat I'm doing right now in the index HTML,we're building out the simple setup. And thenonce we're done with the simple setup, thenof course, we'll work on our x one. So inthe index HTML, first out want to create anavbar, because I'll use for both of the pages.So we'll navigate between the project. Andthat's where we need our navbar. So I'm goingto go here with a nav and you're not now itwill not have any kind of class or the divwithin the nav will have this nav center.And this div effectively is just a parentfor my title, as well as my cue links, maps.The only reason for that, so within a div,we'll have the heading for with a text ofcolor flipper. And again, you can name itwhatever you'd like. And then I'll have aon our list with a class of nav links likeso, not set up on our links will have a listitem, each list item will point to a page.Of course, in our case, we don't have thatmany pages will have index HTML. and the valuewill be simple, or you can call home, whateveryou would want. And I'll copy and paste thiswith me open this up. I don't know why I collapsethat the second list item will be my nextone. So change this around hex. And then alsothe value will be hex. And again, I'm justpointing to the hex HTML they already havein my project. So I have the hex HTML andwe'll work on on of course a little bit later.And then as far as our setup right after that.So right where we have the nav closing tag,we'll just set up a main element. And thenwithin the main element, there is going tobe a div with a class of container. And thenwe'll have two things. We'll have our title.So this is where it will display more Colorwe're using, and then we'll have a button.And I'll start with a button even though it'sgoing to be their last. And for the button,we'll add two classes btn class, and btn heroclass. And then we'll also add a ID, becauseI would want to target that button, of course.So basically, I'll need this ID for my JavaScript.And then as far as the value, all right, clickme. And then like I said, above the button,I'll have my Heading Two, with a text of backgroundcolor, background color, then a colon, andthen I will set up a span. For this brand,I'll have some kind of class. And again, inthis case, I'll use that class, also for myJavaScript, so I'll need it for my CSS, andalso for my JavaScript. And then within thespan, I'm just going to set up the currentbackground color, which is the gray one. Andof course, since I was setting up the project,I know that the value for my gray color isF one, f five, and F eight. Let's save it,we have our basic setup. And now we can startworking on our JavaScript. Perfect once wehave set up our index HTML. Next, we'll bravelynavigate to address and set up our logic.And then at the moment, we can see that inthe app js, we have the colors array withfour values. And effectively, they just representwhat kind of colors we'll have, whether thatis going to be green, which is a simple colorrally, then allow another one, the red one,and then RGBA, just so we can see for surethat it will work with any color values, whetherthat's a actually named color, or RGBA. Andwe'll also have the hex one. And I guess I'llstart by targeting two things, the button,so I'll name is btn. And then the second onewill be my color. Now for my button, I willuse document that get element by ID. And thensince for my button, I have the ID of btn.And of course, Aria as a value. And the secondone will be my color span. So have the conceptof when color is equal to document. More inthis case, I'll use the query selector onthe class for my color was color. So use thisone. Okay, good. Now, let's set up the eventlistener for click events. So I'm going tohave my btn event listener, and then I'llbe listening for Michael Cohen's. Not Of course,in here, I'll pass in my callback function,Marcus is just going to be an anonymous function,and then within the function body, and thisis where I would want to set up my logic.So each and every time I'm going to clickon a button, I'll change the background colorfor my body. And that is actually going tobe our first task, how are we going to targetthe body. Now since we know that the bodyis the property on the document object, inorder to show me that, I'm just going to consolelog it, the document body, and then if wecheck it out our levels, mostly in the console,we have our body. Awesome. So now I know collagen,target my body. What's next? Well, I wouldwant to use this style property, more specifically,background color property, and change thatvalue. And of course, I'll start doing thatjust by manually accessing my items from thearray. So in this case, I'm going to go withconst is an array random number. And I'm justgoing to set it equal to number two. Now Iwould want the comments were, our goal isto get a number. So let's write here commentget a random number between between zero,and three. So why are we having three, onebecause we know that arrays are zero nextday, correct. So this is going to be our firstitem on model will have the index of zero.So if I would need to select it, I will dosomething along the lines of colors, and thenI'll be selecting zero. So that's how I canget my first item. Part One, the second one,I'll have here, one, two, and then three.That's why our goal is to get a random numberbetween zero and three. Okay, it's good toknow our goals. But for the time being, we'lljust have it as a hard coded value of two.And then like I said, we'll use our documentobject, then we'll look for the body, thenstyle property, not styles style, and thenmore specifically, the background color, thisvalue in the properties. And of course, youcan see that Visual Studio code is givingme nice suggestions. And for the time being,we'll set it up to a colors so of course thatis my array, and I'll use my random number.So use my hard coded value of t and then alsoour want to select my color and why I'm selectingthat Hello, because I would want to changethe value here as well. So we want to display,which is actually the background color, formy by property for that is text content. Andagain, we'll do the same thing colors. Andthen we'll have a random number. Let's saveit. And then of course, the moment, I'll clickon my button, you'll see that I'll accessmy third item, because of course, I'm usingthe index number two. And then of course,I can refresh. And I'll do the same thing.So all this is nice and dandy. But how wecan actually make this more interesting, wherewe'll get a random number from our array.Well, I guess we could start by setting upsome kind of function available, generatea number between zero and three. And I'llcall this function get random number. So I'mjust going to go here with a function keyword,then get a random number. Now, I will notaccept any parameters. But I will return frommy function, a math random method, I willinvoke it. And then of course, within my callback,I would want to display it somewhere. So I'mjust going to go here with get random number.That is, of course, my function. I'm justinvoking my get random function. And thensince I would want to show you what kind ofvalues we'll be getting, I'll go with consolelog right underneath my random number. AndI'll just check, what is the value I'm getting.So random number, that's what I would wantto console log. And of course, the momentI'll click, you'll notice that at the moment,I'm not getting anything, because I'm gettingthis weird 0.57. And whatever all these valuesafter the dot, and what is happening witha math random, we are getting numbers uniquenumbers from zero all the way to one, butit's never going to be one. So it's alwaysgoing to be between zero and 0.999999. Something.And okay. But as you can see, doesn't reallydo much good. Since Of course, there is noitem with this type of index. So again, we'relooking for numbers between zero and three.And one thing that we could do is make itinteresting, I don't multiply with the lengthof our colors. So what is that going to giveme? Well, that is going to give me numbersbetween zero point something, and three pointsomething. because keep in mind, our lengthis four, of course, correct, we have 1234items at the moment, of course, if you willadd more items, you will have bigger length,at the moment, our length is four. So we'rejust multiplying the random number we're gettingby four. And then since I said that, we'llbe getting these random numbers between zeroand one, we'll have a result between zeroand then three point something, but it's nevergoing to be four, because our value is nevergoing to be one. And I'll close that out.by just saying that I would want to multiplythat by colors. And then length, which again,in our case, is for an hour, see if we clickfew times that we're essentially generatingthese numbers. Notice, like I said, it's goingto be from zero point something all the wayup to three, point something. Now, of course,in our case, it doesn't get there, I can keepon clicking. And yes, there is 3.06. Now howwe can fix this right now? Well, the solutionwould be using another method that is on amath object, and that is a floor one. So whatfloor is doing, it is going to round downto a closest integer. But again, it's goingto round always down. So even though technically,as far as math, if we have 1.59, they shouldround up to two. With a math more will alwaysround to a nearest integer, which in our caseis going to be one. For example, if we'llhave 0.98, we'll round down to a zero. Andwhat will happen, we'll get our numbers betweenzero and three. And the way we'll set thatup, we'll have our math floor. And then we'llpass the value that we're getting when wemultiply math random with our colors. So I'llplace it in the parentheses, I will save it.And you'll notice the moment I click the valuestoo. So of course, now I'm accessing my thirditem. Then if I'm going to click one moretime, then of course I'm going to be gettingthe value one, which represents the colorof red, I can click one more time. In thiscase, of course, I'm accessing the item witha an extra zero, which is migraine. And asyou can see our functionality works. And eventuallywe'll get to all our values. And of coursewe're done with the first part of our project.Now let me test it out on a small screen.Let's see how it's gonna look like noticeagain, we are selecting all their items, andeverything works exactly like we expected.Awesome work once we're done with our simplesetup. Now, why don't we spice things up andactually work on hex color, we're effectivelywhat it will do is you never done or clickon a button, we will generate a random hexcolor. Now, of course, the moment as you cansee, nothing is happening. But if I checkout the complete project, the hex color onewill notice that as I'm clicking, I'm generatinga unique color using the hex value. And justa warning, some of the functionality willbe exactly the same, we'll still select ourbutton will still select the spine will stillgenerate a random number. But the differenceis going to be how we will set up the core.In this case, we will not use some fixed valuesis going to be generated on the fly. Now inorder to speed things up, if you'll checkit out the hex HTML, you'll notice that Ialready created the setup for you. Again,this just saves us time of repeating the sameHTML. Now you'll notice also that the coloris the same, the btn ID is the same. The onlydifference is that we will use the hex js.So in the index HTML, we were using the addressof ads where we set up our basic setup. Butthen in this case, in the hex HTML, we'repointing to x j, s, we're all set up our functionalityto pick a hex color. And again, the reasonwhy I set up the HTML already for you. Soyou don't have to retype the same thing likewe did for the simple one. So I'll close mysidebar, I don't think I need the app JS orindex HTML. Like I said, there's going tobe a little bit of repetition, but not toomuch. And I'll start by again, selecting mybutton. And if you'd want, you can copy andpaste from the objects. That's up to you.But I'm just going to retype it. So I'm goingto go with document, get element by ID. Again,I'm looking forward the same button, copyand paste. And now of course, I'm going tobe looking for the color. So I'm going togo color. Now this is not going to be getelement by ID, even though maybe we couldhave practice. And we could have renamed itbut I mean, it is what it is. So query selector,I'm going to go with a color. Now of course,I'd also want to change in my small browserwindow, what am I seeing. So now I'm goingto have my hex project. And then I'm goingto add a event listener for a button. So btnevent listener will be listening for our clickevent. And then we'll have our callback function.So function here. And then we'll do the samething with a random number. But the setupis going to be a little bit different. Nowhow we can generate a random hex color. Andwhy would want that. So the way we work withhex colors is following. We're hex color consistsof the hash tag, and then we have six values.And those values could be from zero to nine.And then we have letters that will represent10 1112 1314, and 15. And again, a typicalexample of the hex color would be somethinglike this. This is my favorite orange color.And as you see, I'm starting with an F, whichwould be 15. And then I'm getting 15025. Andthis is exactly what we'll do, where we'llset up a loop that will generate this hexcolor on the fly. And then of course, again,we'll target the body, change the color forthe background of the body, and then alsoadd the value within the color span. And withinthe function body, let's start creating ahex value. And I'll start by setting it equalto ash that because like I said, at the endof the day, in order to get that x value,we must have this hashtag. So that needs tocome first. And then we need the six routers.And then of course, we will get those routersfrom our array. But at the very beginning,we just need to have some kind of variablethat holds the hashtag. Okay, that's awesome.And then we would want to set up a loop thataround six times. Now why needs to run sixtimes, we're gonna, we'll have six valuesover here. So for each and every time we'llrun that loop, I'll get a random value frommy array, and just add to my hex color variable.That's why I was using her let, because ifI would have used cons, well, I would getan error. Now we can set up a loop we go forloop, and then syntax would be for when wehave parentheses, what would be our startingpoint, we'll start with a zero, so I is goingto be equal to zero AM, we need to actuallyhave your semicolon My apologies, where wewould want to stop the loop while before iis equal to six. So I'm just going to sayor We're on the loop until i is less thansix, which is gonna mean that he will runfrom zero to five, which is four, six times,and then each and every time I'll run it,also i plus plus, so it will increment byone. And then within our actual loop, I'mgonna have my hex color, and old want to addthat particular number. Now, again, we'llstart by just hard coding, and how it willlook like, I'm going to go hex color. Andthen I'm going to say that each and everyiteration, I'm just going to add a value frommy array. Again, I'm not going to be gettinga random number, we will hard code for thetime being, but at least I will be able toshow you that we will get six of them. Soof course, my array name is hex, and I'llstart with my first item. That's why I'llset it equal to the index of zero, then wewould want to target both things, again, thebody as well as the text content. So in thiscase, I'm gonna go color text content is equalto my hex color, like so. And then also, Iwant to do the same thing for my body. SoI'm going to document body, and then we havea style. And then background color, backgroundcolor, will be equal to my hex color. Now,what's the setup, it should be all black OnceI press on a button. And of course, I cansee that I'm getting my background color.And the value here is hashtag. And then sixzeros, which is awesome. Now just means thatI am getting six items from my array, or thereis an issue that, of course, I'm not gettingrandom items, I'm just getting all of themas a item on one, we would need to set upa function that would generate a random number.And then of course, I would get a random itemfrom my array. Now also something to keepin mind that we must have this plus equalstwo. Because if you have just equals, you'llsee that effectively, we're just overridingthis in each and every iteration. So if youhave Click me, you'll see that on the righthand side, I just have the zero, because thatis the last thing that we're adding in ourloop. That's it, that's the last iteration.And then we're just setting equal to a zero.So keep in mind that you need to have thisplus equals two, because that way, you'regenerating a string of ad will consist ofthe hashtag, six values from our hex array.And just to show that, of course, we're gettingdifferent items, I'm just gonna go with forexample, I don't know 123, and then maybethis one, the index of 10. And then let'ssee what we have. So this is going to be aand we can try 11, maybe, see, okay, thatis going to be B. And as you can see, ourcolor is changing. But of course, we're stillgetting all six values exactly the same. Wealready know what we need to do, we need toset up a function. And we already actuallyhave all the functionality, the only differenceis going to be what is going to be the lengththat we use, is there going to be from thecolors, right? Or is it going to be from hex.So I'm going to set up my get random numberarray function again. And then within a functionbody, again, we will return math lore, wealready know the drill, we will round down.And of course, we'll have our math num willinvoke it. And in this case, like I said,the difference is going to be that we'll multiplythis by the length of the hex array, not thecores array. Because again, what I would wantis this random number multiplied by the lengthof my array, which is just going to make surethat I'm getting routers between zero, andthen the last index in my array, just likewe had before, so not colors. some reasonI was speaking about colors, so I kept ontyping. But in fact, we'll go with hex, andthen again, and again. In this case, the lengthof course, is different. Now I'm going tobe exactly like we had with colors, wherewe had four items. So the length was four,or since I have more items, I have a biggerlink. Let's save it. And now you'll see thateach and every time, we will click on a button,we will spin up our little loop and then withinthe loop will generate that random number.Now at the moment, I still haven't accessthat number. So where I have the hex and thenI'm accessing the item from an array, I justneed to invoke my function. I need to sayget around a number. I will invoke it andyou'll see that the moment will click willstart generating random hex colors. And that'show we can set it up. northmead just stoodout on a bigger screen. Notice previouslyit wasn't working Now, of course, as you see,as I'm clicking, I'm changing the backgroundcolor for my body, and I'm generating on thefly some kind of hex value. And then of course,I'm having it in two places. In my span, I'mdisplaying what kind of color it is. And alsofor the body, the background color value isequal to the hex value that I'm generatingfrom my function. Awesome work. And next,we have our counter project, where we'll builda counter, so I can increase the count, Ican decrease the count, and I can set it backto zero. If it's above zero, then it's goingto be green. If it's below, it's going tobe red. And of course, if it's zero, thenit's just going to be black. If you open upthe setup files, you'll see that currently,this is what will happen. And of course, I'llnavigate back to my project. And we'll startwith index HTML. So instead of this awesomeremote one, we'll place a main element withinthe main element, we'll have our container,and then within the container, we'll startwith a header one. And we'll just type counter,let's save it and see what we'll have. SoI have my counter value, Okay, good, thenwe'll have a span. So right after headingone web span with an ID of span, and we'llhard coded to be zero. And also, I'll haveanother div with a class of button containers.So go with div, and we'll say button container,and then within a container, we'll have threebuttons, all of them will be exactly the same.But of course, just the classes will be alittle bit different. So have btn. So thatis going to be my generic button class. Andmore specifically, one is going to be decreasethat's for the first one. And as far as thevalue, we also right decrease, that is, ofcourse, going to be my first button. And youknow what, it's not actually span, my apologies,it is value. So sorry about that. So the actualID is value, not a span. And I'll copy andpaste my button. And then of course, likeI said, all of them will have this genericbutton class, but each of them will have thisspecific class, which we'll use in the JavaScript.So the first one has decreased class, thesecond one has the reset class, and the thirdone will have increase. Now, of course, Istill need to change these two hours. So I'mgonna go here increase. For the second one,I'll reset, we'll save it. Now we have threebuttons, of course, we can click all day long,and nothing is gonna happen. But we do havethe HTML. So now of course, we just need towork on our JavaScript. And in order to setup my logic, I'll navigate to App j s. Andfirst, I'll start by setting up some kindof count value. So have a variable, that variablewill you let someone say count, and that willbe equal to zero. So that effectively willbe marked out. And you know what, I will alsoset up right away a comments, we're also set,initial, and then count, that's going to bemore common. And then also, I'd want to selecttwo things out, select the value certain wantto select the value span. And also I'd wantto select all the buttons. Now when we'relooking at the buttons, what would be ourchoices, technically, you can say, all right,we could select them one by one, where I'msaying query selector. And then I'm just grabbingthe class of decrease class of recent andclass I've increased. And technically thatis possible. But we also need to keep in mindand for all of them, we would need to setup pretty much same event listener, just adifferent value. So maybe a better optionwould be using query selector all where Icould select all the buttons that just havethis generic btn class. And then we'll setup a for each method, because it's going tobe array like, so we can use for each on that,and then we'll loop over them. And then we'rejust going to check. If the button is decrease,then of course, we'll decrease the value.If it's increased, then we'll crease it andyou get the drift. So in the app, j S, R willselect your things. And in fact, they'll landthe comments here. I'll say select value buttons.And I'll start with my value. That's the easyone, we'll go with value. Then we'll use thequery selector. So query selector, and we'relooking for the hashtag value. Why? Becausethat is the ID value. So since the ID nameis valued, that's why I'm using hashtag andthen value. Now, I will use the query selectoralso in this case, I'll write const btn. Sothat means buttons and we'll go document,and then query selector all. And now I wouldlike to select all the buttons that has thisclass of button. And if we want to consolelog, what we'll get back, you'll see thatwe'll have this funny note list. And justto showcase that, I'll open up my dev tools.And you'll see that in the console, we'llhave the Nautilus. So knowledge is a trickyone, where it is array like. So there's somemethods that you can perform on the node list.For example, for each, this is going to beour case. And then there's some methods arraymethods that you cannot run on unordered list.So you need to transform it into an array.And again, we'll cover that later in the course.But for the time being, we only need to worryabout the fact that for each, we can run onour list. So we're good to go. And, of course,you can see that I have first button, secondbutton, and the third button. So I would liketo run my for each method. So let's say buttonsfor each. And we already know that in thefor each, we pass in a callback function,we arrived here function, and then this functionis called against each and every item. Inmy list, my what's called in this callbackfunction, I can access each and every itemusing parameter. So for example, I can namethis parameter item, and money for console,log it, you'll see that we're accessing eachand every button. So check it out. Now, ofcourse, I have all my three buttons. Now sinceit is parameter, of course, I can call itwhatever I would like. So maybe I can evencall this orange, my functionality will stillwork, orange and orange. As you can see, theamount of buttons that are having a consolelog did not change. Now I'm going to be abit more conservative, I'm not going to callthis orange burrito or banana, I'm just gonnago with a button. And now I want this eventlistener to all the buttons. So again, insteadof selecting those buttons, one by one, usingthe specific classes that they have, we selectedall of them using the button class. And nowas I'm looping over my list, then I wouldwant to add those event listeners. So I'mgoing to go btn add event listener, and I'mstill going to be listening for my clicker.And so I'm going to say here, click, and wewill need to again pass the callback function.So I'm going to go my function. And in thiscase, I'll right away access my event object.Why? Because I would want to check which buttonI'm clicking, because now I have a list. SoI will use my event object to actually check,which is the button that the user clickedon. And we already know that on the eventobject, we have the current target, as always,we will console log it. And we can just sayevent, current target numbers is gonna spitback effectively, which button I clicked on.And more specifically, I could get the colossallist from the actual button. So you're nota callback function, we're accessing the eventobject, event object has a property of currenttarget. And now more specifically, I'm lookingfor the class worst. So all the classes havethis element has an hour if I'm going to clickon reset, versus the value that I'll get,if I'll click on increase. Notice, again,I'll have the list of classes what this elementhas. So this one has btn reset, as well asbtn. increase. And I can actually assign thisto some kind of variable. So instead of consolelog, I'm going to go with const. And I'm goingto call this styles is equal to my class list.So each and every time I want to click ona button, I will save in my variable, whichare the classes of this element has. And nowI could set up a if statement where I couldsay if on line styles, course that is my variablethat I'm going to say contains. Now what thismeans is that I could say if the variablecontains specific class, that means that I'mclicking on reset, or decrease or increasebutton. And I'll start with decrease whenI say if Stiles contains and then I'm goingto look for my decrease. So effectively, I'mlooking for this decrease class. And if thatis the case, then of course, I would wantto decrease my count. So I'm going to go here,count, minus minus, so I'm decreasing thecount by one. Now we'll still set up someelse if and else. But for the time being let'sjust use the value better we have, becausewe already have selected the value and legendsreplace the text content with our account.So what I'll do here is I'm going to say valuetext content. So the variable that holds thevalue my span, and I'm changed the text contentin that span, and set it equal to the count.So if of course, I'm checking only for decrease,I'm going to be clicking only on a decreaseas well. So as I'm clicking, notice, I'm decreasingthe value. Again, I selected, all the buttonsare used for each, I looked over those buttons.And for each button, I added an event listener,as I'm clicking, and I'm using the event objectand getting the current target and a classlist. So getting me the classes that the itemthat I'm clicking on has, so one is goingto have button, decrease button, reset button,add increase. And if the item I clicked onhas the class of decrease, that means thatthere is decrease button. So we'll just decreasethe count. And of course, we can do the samethings for rest of them. In here, I'll sayelse if. And then I'm looking for styles contains,again, just checking whether that style exists,whether that class exists more specifically,increase. So that is the case, of course,that is the increase button. What are we doingwith increase or just gone count, plus, plus,again, so my girl on and off, we go to thelast one, which is an odd one, out here, I'mcheating a little bit. Since I know that Ionly have three buttons. I mean, I checkedalready for decrease a check for increase.So I'm already assuming that my last optionis recent credit, if you would want to bemore diligent, of course, you can just say,if and style contains. But in this case, Iam cheating a little bit what I'm saying you'renot, if I'm not decreasing, if I'm not increasingIRA know that I'm just resetting the value,and my value will be equal to zero. So asalways, let's start up with Oh, then we canreset. And of course, we can decrease. Andin order to make things a little bit moreinteresting, we're also going to change thecolors for our value. And we'll take a lookat how we can rewrite this using only theif statements. So instead of if else if andelse, then we'll go if, if count? What I'mdoing is I'm saying what is the value formy variable? Because in here, I already performedthe operation, where are either increasedor decreased, because in this case, increasedand then set to zero. And now I'm saying,Okay, what is the value, if the value is biggerthan zero, then I would want to change thecolor for my span. And my span is in the valuevariable. And then we have the style property.And then within the style property, we haveaccess to a color. And since the count isbigger than zero, might as well set it equalto green. Now, of course, the moment I clickon this, now we'll get my green color. Andthen I just need to keep on typing these giftsconsole if and then what is the other option?Well, crowland could be less than zero, correct.And now again, what are we doing, I'm grabbingmy span, I have style property. And in thestyle property, I have a property by the nameof color. If it's less than zero, what I wouldwant to do set it equal to red. And last oneis the 01. So in this case, I could say ifand then count is equal to zero, then I'lljust use my black color. So again, value,so the span style, color, and I'll use thehex color. So I'll go with quotation markshashtag, and then 222. So that's the blackcolor, and save it. And you know, in orderto test it out, I'll navigate to a biggerscreen, I think it's gonna be a little bitmore interesting. So I can increase, of course,I'm choosing the color, I can decrease, I'mchoosing the value as well as the color. Andof course, we can reset. So congrats on finishingthe counter project. Awesome. Up next, wehave the reuse project, where we'll have reviews,and we'll use JavaScript to loop over thosereviews. Back and forth, will also set upa random review. And as a side note, thisaround review will be a challenge. Since wehave already covered random number and allthat at the end of the project, I'll tellyou what I would want you to do. And thenof course, I'll show you my solution, butthis is going to give you an option to tryto find a solution for yourself. At the moment,if I'm looking at Mr. Course The only thingI have is the heading one we have review project.So I'm going to head back to my project. Idon't want the one anymore. We will set upmain tags here. And as always, we're juststarting off with HTML. And then we'll havethe section with a class of container. Socontainer and then within the container We'llstart with a title. So out here comment online,there's going to be a div with a class oftitle. And then within a title, we'll havetwo things, we'll have a Heading Two, withwhatever text you would want market that willbe reviewed. And then also I'll place theunderline. And let's save it. And now of course,we have my our reviews, and then I have myunderline as well. And after that, I wouldwant to set up the actual review. So let'ssee where the dividends right here, we'llhave the comment with a value of review. Andthen you know what, I think I'm going to scrolldown all but just so I can see it better.We'll have the article with a class of review.And then within the article, we'll start byplacing the image container. So there's goingto be a div with a class of image container.Within the container, we'll have our image.And you'll see that in a set of files, you'llhave the person want jpg. So that's the imageyou're looking for. Now, of course, later,we'll use our data from the JavaScript. Butfor the time being, while we're still settingup the HTML, we'll just use a local image.So say, Here, I'm looking for person wantjpg, and then I would want to add the ID formy image. So in this case, I'm going to saythe ID will be person IMG, let's say, right,and we should have our card, at least somepart of the card online, we should also seethe image, Okay, awesome. of the rod willhave the header and footer with an ID of author.So it's right here ID and the ID will be author,four, as the name will HeartGold in the beginning,so I'll have it as our Jones, then let's havea paragraph, which will represent the job.So we're job D person who's doing online,I'm just curious, I'm gonna go with UX designer,your ex is a designer. And once I have thejob, I think I'm gonna go with an info. Soparagraph with an ID of info. And then here,I'm gonna go with 20 words, and also read.So that should work for the card. And nowI would want to add, of course, my buttons.So I'll go first with a next one, previousone. So where I have the article, still, withinthe article, I will set up my previous nextbuttons, so prevx max buttons. And in thiscase, I'm gonna go with div button container.And then within this container, I have mytwo buttons, one with a class of Preview button,and the other one with a next button. Andin there, I'll place my Font Awesome icons,which also by the way, you have access toso we have a folder, where we have the FontAwesome icons. So let's start with a button,the class will be prevx btn. And then withina button, we'll have a Fs, fa Chevron showChevron icon will have left. So that's thevalue Chevron left unanswered. That's thebutton. And now copy and paste, the only thingthat I would need to change the class. Soinstead of left, we'll have the right one.And then if you want to do a challenge withme later, then I would suggest setting upthe button right away. So again, if you don'twant the button, then you can just ignoreit. So right after this div, I'm just gonnasay a random button. And I'll have a buttonwith a class of random button BTL. And thenas far as the text surprised me, we'll saveit, we have our HTML. So of course, now wecan start working on our logic using JavaScript.While hard coding all my values is awesome.Probably a better option would be using JavaScript,where we can set up our functionality. Andin order to do that, we'll have to navigateto App j s. And once we arrive here, we'llsee that we'll have the array. And then withinour array, we'll have items. And each itemrepresents a specific person. So we have yourname, we have the idea as a side note thatwill not use this was just mimic a more likereal world response. Then we also have thejob. So that of course would represent whateverwe have right underneath the name. Then we'llhave the image, which I'm just hosting ona cloud Nori, just for easier access. Andthen also we have the text. And before wecontinue our want to address the elephantin the room. Yes, normally you would get thistype of data using Ajax requests, so it wouldbe somewhere else. And then you would justperform a HTTP request. Why we're settingup data locally. Well, it's very simple. Wehaven't covered what is Ajax and how to setup HTTP request routes, why? For the timebeing, we will use a local data. And again,it is an array array of objects here. Andeach object represents different person withdifferent name with different job with differentimage, as well as different text. And we havetotal four items. That's why as we'll be navigatingback and forth, we will have four items. Andwhat I would want to do first is get all theitems that I would want from the index HTML,what am I talking about, odd want to accessthe image odd want to access the author, jobinfo, since we'll change these values dynamically.And as you can see, we have all of them withIDs. And also I'd want to target my previousand next buttons, as well as the random one.Again, we'll do it at the very end as faras the random button as far as the challenge.But I would want to selected right away surein the app, j S will start with a bunch ofget element by ID, as well as three queryselectors. So we're going to have a commenthere. Let's write select items, we're goingto have const. img that will be equal to document,get element by ID, and land for my image,I have the ID with the value of person. img,now copy and paste four times. And once wehave copied and pasted, now I would want tochange these routers around. But as a quickside note, ESL co ops this reviews array,because in my opinion, it takes up too muchspace, and you have your reference in yourown objects file. Like I said, the secondone will be author. So I want to change thisaround. So you know what I'll use in thiscase, for the cursors, I will delete this.And then we'll also get rid of this image.So then we'll be gone. And I'll use my twocursors to change these values. So the secondone will be author, then the third one willbe JOB, JOB. And the fourth one will be info,we're going to cursors. And we'll have ourinfo. Let's save it. And now let's selectall of our three buttons. In this case, I'mnot going to use a for each. So I'm not goingto set up query selector all, I'm just goingto select them one by one using query selector.So we're going to go with const, then prevxvivianna is equal to document query selector.On learn here, I'm looking for prevx btn.Let's copy and paste these guys as well. Oh,man, we just need to change these rolls around.So next button. And then after that, I'llhave my random one. So random. And then asfar as the variables, we'll have the Nextbutton, I'm gonna have a random one as well.And then I'll start by setting up some kindof value. So I'm going to set up a value ofzero, which will represent my first item inthe array. Again, because the arrays are zeroindex based, that is going to be my firstitem. So have the comment of set, startingitem. And I'll give it a value of currentitem. But of course, you can name it whateveryou'd want, as long as you remember that valueas we're setting up functionality. So currentitem will be equal to zero. And the firstthing that I would want to do is once my documentloads, display the first item, or whateveritem you have here as far as the value. Andremember, the options you have are 0123, becausewe have four items in the array, and thatis going to be my initial value. Because again,at the moment, everything is hard coded. Sowhat I would want to do, once my documentloads, then I would want to access whateveritem from the array. So whatever number youhave, I have zero, so I'll be selecting thefirst item. And then all the variables thatI have the image, author, job and info willall replace those routers. So let's startvery simply. And we can do that by using DOMcontent loaded. So that's the event that I'mgoing to be listening for. So in here, I'llhave a load initial item. And we would wantto add that event listener on the window object.So go with window, add event listener. Andthen again, the event name is DOM contentloaded. And we'll start very simply by justconsole logging, just to see what happens.So my function, my callback function, willhave here console log with a text of shake,break. And you'll see the moment my documentloads all my shaking back and essentiallyThis DOM content loaded event fires when theinitial HTML document has been completelyloaded, and parsed. Okay, so we have our shakenbake in the console. Awesome. What's next?Well, now I'd want to access my first itemon how I can do about, Well, technically,I could just access it using reviews array,right? Because we have reviews, and then Ican have my square brackets, and then passin my current item. But I think it's goingto be a little bit faster if I assign it toa variable. So I'm going to go here constrandom, and then we'll have reviews array,since I would want access items from my array.And then I'll just pass my current item. Again,whatever your value is over here, just makesure that you have values from zero to three.Because if the values are going to be bigger,then of course, I don't have any items. Ionly have items, we have indexes of 012 andthree. And now of course, I'm accessing myfirst time. Now why I think it's cool to assignit to a variable. Well, let's see, if I have,for example, image and the image, I know thatI have the source property amount for thesource property, I'll just set it equal tomy image. Why am I setting equal to an image,because now I assigned my item, my variableto my first item. And then of course, in myfirst item, I have the image property, whichgets me the image. So let's see, in the nexthour, I'm sorry, nothing Linux, let me actuallygo opposite. See, that's what happens if it'snot corrupt. And I'll just say, item. img.Again, why am I assigning this to a variable?Technically, I could have done this this way.So we're at reviews, then I have the currentitem, sorry, not this one, current item, andthen I can look for the image. But I justfind it easier if we have four instances,to use item instead of reviews and then currentitem, and then get whatever property I wouldwant from the object. That's the only reasonwhy I'm just assigning this to my item. Andyou'll notice the moment I save it, sincemy first item, this image, of course, nowI have this image, once my document loads,if all treasures rally around to for exampleone, then of course, I'll have a differentimage if I change this material, and now I'maccessing the third item in my array, andyou get an idea, this is going to be my numberfour. Now you fall go with number four, theactual number four, you'll see that we'llget an error in the console. That's why wecan still see the image. Because we have hardcoded one in the console, I have the actualerror, why I have the error, because it sayswell cannot read property image of undefined.Why? Because our item is undefined right now.Because in our array, we have only four items.So the last index is three. So if I'm tryingto access something with a value of four,and I don't mean index of four, of course,there's nothing there. That's the only reasonwhy we're getting this error. Again, I'llgo back to my 01. And I would want to targetthe rest of them. Now when I say the restof them, what do I mean, when I have the author,I have the job. And I have the info. So oneby one, we'll have the author. And we'll gowith text content. That's the property we'relooking for. Since I don't want to add anykind of HTML, I just want to add a text. Andin here, we'll have item dot name, and saveit. And of course, now the name is Susan Smith,I think we can collapse a little bit on DevTools.Just so you can see all the items we're addinghere. And a lot of job and text content willdo that too. And this is going to be equalto my item job again the property in my itemobject. And then last one will be my info,and then text content. And that is equal toitem and then dot text. And of course allthese four values are now applied once thedocument loads. Okay, awesome. And now I guesswe can start working on this functionality,where Once I press, I'll change the item.So if I'm currently targeting zero, I'll bejust changing this value around. And thenof course, access different items in my array.So if I go to next, and of course, our Christmasnumber. So now x is not the first item inmy array, and then the second one, and youget an idea. Now before I do that, I wouldlike to refactor my code. Because even thoughthe initial setup looked Okay, imagine ifwe will be increasing or decreasing the number.What do you think we'll do? We'll each andevery time I have to do something like thisis Walker, because we'll have to not onlyget the item, but we'll also have to changethe values. So what better if we would adda function that does that for us. So thatway, we don't need to set this up in our clickevents, because we'll set up to click eventsfor proven button. And also as a sign up forrandom as well, I'm giving you already hint,what we'll do. And I don't want to copy andpaste the same code in all three of my eventlisteners, I might as well set this up asa function. And then I can just reuse thatfunction. How's that function going to looklike? Well, we'll see in a second. So I'mgoing to go first with a comment of show personbased on item here. And then I'm just goingto have a function, then the function namewill be show person, pretty self explanatory.And it's going to be looking forward to number.So pass here, the number, or I'll name thisnumber, a person. Again, you can name thisnumber, you can name this item, whatever you'dwant. It's just a parameter. And not all havethe same logic. So cut it out from my DOMcontent here, and copy and paste. However,of course, I'm not going to be looking forthe current item, I'm going to be lookingfor whatever is passed in here. So I'm justgoing to say here, person. And this is exactlywhat I'm pressing, I'm going to say here,person would say that, now I have my awesomefunction. And then within the callback function,I'll call this function, I'll say, Show person,and now pass in my current item. So I'm justgonna say current item. Again, the functionalitywill not change. Or now we can reuse thisfunction. So based on when we would want tocall it return a social person, and non passingcurrent item, traversing, pass in currentitem, not technically, you could access currentitems and the way it is, but since I wantedto practice on how we can pass in some argumentsand actually use those arguments, that's whyI set up here as a parameter, again, technically,if you really wanted to, and I'll show youthat at the end, we can just access the currentitem, since it is global anyway. But again,matters as a side note. So now let's set upthose two event listeners. We have one forthe pre, one for next. So have comment, Iguess here, we'll say show next person. Andyou know what, let me scroll down. So we havemore, I'll have my next btn. And then I'llhave have event listener. So it will be listeningfor to click around. So once we click on nextbutton, and then of course, we'll have ourfunction. So our callback function. And thenwithin a function body, I'll just increasecurrent item, or say current item loss plus,so where is my plus plus? And now of course,I'll want to call my show person. And again,I'll pass in my current item variable wouldserve it at the moment, you can see all right,so cannot read property. addEventListenerhave no. Okay, what is happening? Well, Idon't have this button. So I would need tocheck what is happening with my button, whyI'm not accessing my button. And I'm goingto check the actual index HTML. Let's see.And of course, I didn't change the class.So my bad, I did not change the class. Letme save it. Now I have next button. And nowof course, we're selecting correctly. AndI'm just showing you about that. Yes, mistakeshappen. That's part of being a developer.Once in a while, we make a mistake. And ofcourse, when we're talking about me, probablymore than once in a while. But anyway, that'sa different topic. So we have a show person,right now I'm calling an RLC. That each andevery time we'll click will access differentperson. So we're gonna click OK, now notice,I'm accessing the third item, and I'm gettingmy fourth one. Now, what do you think is gonnahappen? When my current item is going to bebigger than three? And we already looked atit, we'll get an error. Correct. So once Iclick on it, notice, I'm getting my big, faterror. Why? Because, again, we cannot accessthe item doesn't exist. So if the currentitems for then of course I cannot access,what would be the fix? The fix would be verysimple. Where I'm going to say if I'm not,I'm going to check my current item, if thevalue is bigger than a reviews, and now we'relooking for interesting thing. We're not lookingjust for the one because let's think aboutit. What is the reviews like? That would befor correct, since I have four items. Andwhat I'm saying here is if the current itemis bigger four, well, if it is bigger thanfour, I'll still have my error. Because biggerfour means that my animals still be at leastfour. If the items for our Have no item inreviews that reflect that index for. So whatI need to say here not only reviews length,when also I need to add minus one, which willmean that that reflects the actual last itemin my array. So if that is the case, I'm justgoing to set my current item equal to zero.So I'm going to say if I add my last itemin the array, then the current item is zero,show start from scratch again, see, we keepon clicking, once we get last item, we'llstart from scratch. And of course, we'll haveto do the same thing with a free one. So inthis case, in order to speed this up, we canjust copy and paste alternatives to pre button.Hopefully, I have selected correctly thisbutton. So I have my pre button. And now Iknow I also hear a comment, I say show previousperson. So brief person. Now in this case,I don't want to do plus plus, I want to dominus minus, because we'll be showing theprevious person, or again, at one point, we'llget an error, because our value will be lessthan zero. And again, there's no items thathave the index that is less of zero. So again,we'll have to set up some kind of or statement.And in this case, I'm going to say if currentitem, current item is less than the zero,sorry, if it's less than zero, then is justgoing to be current item is equal to again,reviews length, so whatever is length, length,in our case will be four, minus one. So nowmy valuable three, which is equal to my lastitem, we'll save it. And now I can navigateboth ways I can go up. And once I reach mylast person, I'll start from scratch. Andthe same works backwards. So if I go backagain, once I get to my first item, if I'mless than zero, then I just set it equal tothe last one. And I'll start from the backof the array. Now just to showcase that technically,if we didn't want, we didn't have to passhere to person, I could just remove this person.And then we can directly access our currentitem. I just thought it would be an awesomepractice, if we're passing in as an argument.So now of course each and every time or I'mcalling the current item, and just deleteit because I'm not passing anymore as a primer.So there's no point for me to set it up asa primer. Because again, current item is aglobal variable. So I can access it from myshow person. And then each and every timewhere I'm running the show person. Well, I'lldisplay the correct info anyway. So this way,and also the late last year, either way, areyou have the functionality, it will work again.So we're still clicking, and we're still accessingthe items. Now the last thing is the challenge.We already have used the random number quitea few times correct. So here's what I wouldwant you to do. We have our button, randombutton. Let me just double check that I havethe class. Yes, I do. Everything is fine.So I'm selecting my button. Odd wants youto add eventlistener to our button. And thenonce the user clicks the button on wants youto get a random item from my reviews array.Again, we have the button random button, theevent listener listening for click events.And then in the functional body. Rememberhow we set up a random number, how we usea railing to get a specific number in therange of our array. And then of course, usethe show person once you have accessed thatparticular item. So pause the video and resumeonce you're done, just so you can see whatis my solution? How did you do? hopefullyeverything went fine. And this is my solution.So right after a pre button, I'll go witha comment of sharanam Burson show random person.Remember, we had our random button. So I'mgoing to add event listener, I'm going tobe listening for click events. And here aremy function. So I'm gonna have my callbackfunction within a function body, I'm justgonna have to access the random number thatis from my array. So I'm going to have tocreate a random number that reflects the numbersthat are possible in my array. So I wouldhave numbers between zero and three, becauseI have four items, so my possibilities wouldbe 012 m three m, od one assign it to markor a number. So since I would want to getthe random number, I'm using the current itemWe're gonna have to assign my current itemto that around a number. And again, we havecovered already random number. So this shouldfeel like home, where we have the currentitem. And I'm just saying what is going tobe valid for my current item, we use the mathfloor, since we would want to round it downto a closest lowest integer, then we'll usemath, and then a random, this is going togenerate that random number. And then again,we'll multiply by the reviews like, Why, becausethe range should be between zero, and three.So those are my possible numbers, 012, andthree, because those are my indexes. And thenof course, once I have this particular item,if you want, you can test it out with consolelogging, like so. So can just say, currentitem. And then right off the bat, we can justcall our show person. So call here show Burson.And you'll see in a console, all my randomnumbers. So for example, this is zero. Andthen of course, I'm also displaying that item.So this is my first item that I have the firstone, or I'm sorry, more correctly, this isthe second one. And then again, I'm gettingmy last one now, off we go. So all the time,I'm getting my random person from the array.And of course, we can switch to a bigger screen.And we can see that we can iterate over arraywork, so back and forth. And also we can geta random person from our array. Awesome. Andnext we have navbar toggle project, wherewe'll have a navbar. So this is how it's gonnalook on a bigger screen. And then once wemake the screen smaller, then of course, wewould want to toggle goings. So I wouldn'twant to display them right away only oncewe click on a button, then we will displaythe links. As always, we will start with ourHTML. And at the moment, if you're lookingat the oil, that's the only thing you cansee is the heading one with a text of navbarproject. And I'll start by creating a nav.So of course, I will delete my heading one,my awesome heading one. And then within anow I'll have a div with a class of nav center.And I'll place a now header and the links.Now, don't worry, we'll not have to type outall the links, the actual HTML is alreadyprovided. So I'm going to go here with anerror comment. And then of course, I'll havemy actual div with a class with no header.And then in here, I'll place the image witha class of logo. And first we need to findour logo. So the file name is logo, SVG, andclass. Like I said, the class name was logo.and here we can just write as alternative,also a logo. Now the second thing that willhave always in our header is going to be ourtoggle button. So we're going to go here withthe button, and then the class will be nowtoggle, we have our button. Now within a button,I'll place my Font Awesome icon. So FA s,fa bars now have my icon. And once we havecreated a header, now I want to set up mylinks. Now since I wouldn't want us to wasteour time and type them up manually, I didprovide them in resources. So open up thesidebar, then I'll look for utils. txt. Andthen in here, you'll find the links. Again,it's just a straight up HTML. That's why Iwill not type it out altogether. I will copythat. And we'll navigate back to index HTML.And then I'll look for the end of the header.So this is going to be my div and header good.And then we'll copy and paste our links aswell social media icons. Now, of course, there'sa little bit of CSS already. That's why youkind of see social icons, but you can definitelysee the links. So that's going to be a lookon the smaller screen. And then once we getto the bigger screen, of course, we'll haveour full blown up bar mod maker set out, Ihave the current project. As you can see,this is going to be the navbar on a biggerscreen. But then once we get to the smallerscreen, we have our links displayed like this.And of course, we'll have to set up our JavaScript,where once we click on the toggle, we willtoggle the links. Now before we start typingaway our code, a functionality in the JavaScript,I think it's extremely important for us tounderstand the general concept on how thetoggle will work. And we'll start by gettingthe height for our links. And again, we'retalking about two things. Effectively, we'retalking about the links class, that's whatwe're interested in. That's what will togglethe height for our links for our links aroundthe pages. And then of course, we'll do thatonce we click on the nav button. So thoseare the two things that we will look in theJavaScript so target them, we'll assign themto a variable. And then of course, we'll setup a add event listener To the button. Butwhat will happen? Technically, we can actuallydo manually. So I'll show you first the manualexample without clicking the button. And thenof course, we'll set up all the JavaScript.And like I said, we're looking for two thingswe're looking for now button. And the links,in order to have our setup will need to knowwhat is the height for the links when they'reopen. And I think the easiest is to do iton a bigger screen. So let me inspect theelement. And you'll see that if I'm lookingfor my links, I have the height of 160, whicheffectively is then RPMs. So that's alreadya good start, then, by default, how wouldone Hi, darlings, and only once I add a specificclass, then the links will get the height.So let me show you quickly CSS. In style CSS,you'll have a links class, which at the momenthas this height zero or four hidden, and thentransition is equal to transition. And thenanother class show Lynx has the height oftenharems. Now why this height is an arms, becausemy height over here once the legs are open,is 160 pixels, which is 10. REM. So that answersthis question. And then like I said, I wantto hide links by default. And the way I cando that is by adding height equal to zero,then also org wants to set up overflow hidden,because otherwise, you'll see that even ifI have the height of zero, I will still beable to see the links and do not think it'sgonna be easier if I just uncomment that.And now as you can see, if I just have theheight of zero, you'll see that I can stillsee the links. That's why we're adding thisoverflow hidden. Okay, good. And then whywe're adding in this transition, because Iwould want to change from height zero to 16RPMs to happen over time. So if I'll checkit out the finished project, you'll see howthis change is happening all the time, notinstantly. That's why I added this transition.And of course, I already have some kind ofvalue in the CSS variable. And then the onlything we'll do is we will toggle this showlinks class. So when we click the button,we will check if the showings is already there,then we will remove it. If it's not there,then we'll add a monitor we'll set up ourtoggle functionality. So let me show you amanual setup. And then of course, we'll dothe same thing using Java. Again, remember,the class name is show links. And we'll justmanually add it to a links and then removeit. So I'll navigate to my developer tools.And then I'll look for links. Now remember,by default, right now we're hiding the links,we have hide zero or hidden, and then thistransition. And now what I would want to dois just manually add this class. So noticeI have my unordered list with a class of links.And in here, I'm just gonna write show links.Now once I added, check it out, of course,I can see the links. Now if the class is alreadythere. And if we remote, then of course, myclass disappears. And this is exactly whatit will do using JavaScript will target thebutton, then once we click the button willcheck whether to show links class is alreadyon the on our list. If it is, then we'll removeit. If it's not, then of course, we'll addit and now we will be able to toggle our links.Beautiful once we understand general conceptbehind the toggle functionality. Now it'stime to implement it. So I'll head back tomy project. And I'm looking for a j s. Andthen in the app j s, you'll find some comments.And of course, our will explain what theymean in a second. But we'll start by targetingtwo things, we will target our nav toggle,as well as links and I'll sign them to somekind of variables, some toggle. Emaar willbe equal to document. And since I have a classthere, I think I'm going to go with queryselector, and the class I'm looking for istoggle. Then we'll copy and paste, and I'mlooking forward to works. So not nav toggle,but I'm looking for the likes. Of course,I'll have to assign it to some kind of variable.And in my case, I'm going to go with links.Of course, I would want to set up some kindof event listener, as I'm clicking on a button.So that's our next job. I'm going to go withnav toggle, then add event listener. I'llbe listening for click events. And then we'llhave our callback function. So our function,and then within the function body, we'll startby console logging the class list. Now whatis a class list property? It returns or showsor gets, however you want to call it, allthe classes that the element has none ourcase, which element are we looking for? We'relooking for links so I wouldn't want to knowwhat classes links has And we read that wejust go with links. So that is, of course,our element. And then I'm looking forwardto class list. And of course, I'll open upthe dev tools, since it's very important tosee what is happening here. So console. Andthen once I click notice, I have the listof classes that the links I currently have.No, of course, the only class that's thereis links class, because we haven't added theshow links. Okay, that's awesome. But thenwhat are our next steps? Well, what happensis not only we have a class list, but thenwe also have methods we have contains, thatis going to check whether specific classesthere, and then we can have a class. So thatwouldn't be add method, then, of course, wecan remove it, I won't be removed method.And then we have the most beautiful one, thetoggle one. Now we'll do a long way, justbecause I would want you to understand howeverything works. And then of course, at thevery end, we'll just use a one liner usingthe toggle. And we'll start simply by lookingat the contents. So what happens once we runthe contains with some kind of random class,so copy and paste. So in this case, I'm notlooking for the links, or I will leave thisfor your reference. So comment this out. Andthen I'll say links class list. And then likeI said, the method name is contains. And thenwithin the contains, we're passing in, whatclass are we checking for. So in our case,I'm just going to go with some kind of randomclass, which definitely is not there. So whatI would want to see is what is going to bethe response. And then once I run it, onceI click on it, notice, I get the responseon false. So what that means is that thisrandom class is not on the works, which wealready knew, because the only classes thereis of course, the links. Now, if I'll copyand paste, and if I'm going to add here linksclass, I should get true, correct, becausethat's the class that should be already onmy unordered list. Once I click course, mynext response is true. So knowing this, wecould set up a statement correct. So I cansay if links class list contains, and thenof course, the class that I'm looking for,is show links, not the links. If the classis already there, then I would want to removeit correct, because we're toggling. But ifthe show links class is not already addedto my lens, then of course, I would want toadd it. Again, I will come besought just workinghard for your own reference. But I'm goingto go with if then links. When I go to classlist, and we're looking for compaines method,I'm going to pass in show links. If that isthe case, you the show links is already there.Again, we're setting up a toggle functionality.So if it's there, what I would want to do,and then I would want to remove it. So I'mgoing to go with links, then classless abandonmethod name is remove. And then again, I needto pass in show links class. Now what happensif my response is false, because at the moment,of course, I'm setting on functionality basedon the fact that this is true. So if the showlinks is already there, then of course, I'mremoving. But if it's not true, if it is false,so if the class is not there, then I'm justgonna say else. And now I would want to addsomeone to go with links, when class listthe ad, and then we'll pass in show linksclass analysis there, our functionality willwork. Again, I'll look for my toggle button,check it out, once I click on out in the class.And once I click it one more time, then ofcourse, more about how we can toggle our links.Now, like I promise, of course, there is aone liner, and not one liner is a toggle method,which just takes a class. So I was lookingfor a class again, and I'll show links. Andif the class is there, then of course it removesit. And if the class is not there, then added.So instead of writing 12345 lines of code,we can do it in one liner, the way to waris going to be links classless, then toggle,just make sure that you pass in the correctclass, in our case, show links, and you'llsee how our functionality will still work.So I'm going to comment out my previous code,and you'll still see that everything worksas expected. So as I'm clicking, I can stilltoggle my links. Now just to show you thathe is exactly the same as our manual setup,the only difference we're adding the JavaScript.As you can see, if I navigate back to my project,I have my links and show links. As we're clicking,we're just adding the class or removing theclass. Now one more gotcha that I would likemention, is the fact of what is happeningon a bigger screen. Sorry, see, I'm settingup here the media query. So once we get tothe bigger screen, or mode, the toggle button,and then I showed the links, as well as theactual social media icons. Now, it is importantwhen you're setting up that media query thatfor the links, you have to add this heightorder. Now, let me show you what happens ifyou don't do it. So I'll comment this out.And you'll see that right now once I get tothe bigger screen, I have this weird heightfor my links. Now, why do you think this ishappening? Well, I can tell you right away,it is happening because we added, of course,the show links. So what was the height fourshillings, my head, of course, was 10 armsor 160 pixels. And that's why these weightsare going to be so massive. And not only that,if, for example, I removed those links. Soif I make sure that I click on a button, andthen I'll hide the links, you fall get toa bigger screen, you won't see the links atall. And why is that happening, because inthis case, we have of course, the height ofzero, and then overflow hidden. So that'swhy it is important once you get to a biggerscreen. Once you set up your media query,make sure you add height of auto to the lungs.Once you do, regardless whether the linkswere shown or hidden, they will appear ona bigger screen. And that's how we can setup toggle functionality using JavaScript.Beautiful Up next, we have a sidebar project,where we'll have the sidebar and we'll useJavaScript in order to toggle the sidebar,as well as close the sidebar. Now, don't worry,you will not have to write any CSS but I willshow you that on a smaller screen, sidebaror span or percent. So all across the screen,then on a bigger screen is just going to havea fixed width. And also we'll add some linksas well as social media icons. But again,I already prepared some code for you. So nothave to spend countless hours typing out HTML,but we will have to start with HTML. And onceI navigate to my sort of project, I can seethat the only thing I have is a sidebar project.And of course, we would need to add some itemshere. And I'll start with a close button.So there's going to be a button. And thatbutton will have a class of sidebar, toggle,class sidebar, a man a hyphen, toggle, andthen within this button will go with FA sfa, and then bars. That is the class name.So now of course I have my clothes. And thenonce I have the button, I will set up my sidebar.So here I'll have a side, that is the nameof the element, the class will be sidebar.And then within your side, we'll just setup a header. And we talked about header, wehave the image. So that's our logo, as wellas the close icon. And then the rest of it.I'll provide the code for you. Because again,I think that it is important to highlightit because it represents a proper sidebar.But I don't think that it is important forus to type out the HTML, so the code is alreadyprepared, we only need to set up a header.So go here with sidebar error. And then withinthis div, I'm going to add first an image.So IMG. For source, we'll use logo, SVG, Ido want to add a class here, class will belogo. And right after that, I would want tohave a button, my close button. So let's writebutton, one class, close btn, close btn. Andwithin this button, we'll go with Fs fa, ntimes. Let's save it. And now I can see thesidebar. Don't worry about the fact that youcannot see the closed button that is on purpose.And we'll fix that in a second. Now afterthe header, like I said, I would want to addthe links, but I wouldn't want to type themout. In order to speed things up. If you'llnotice the files, you'll see utils. txt, andin here you'll have the links. So again, itis just a unordered list. Each list item representsa page that we don't have, or we do have length,for example, to index HTML, about HTML andall that. And the same goes for social mediaaccounts, where we have on our list list items.And then each item is just a link to a socialmedia account. Again, it's just a straightup HTML. So I thought we could save a littlebit of time, skip the typing, and also everythingon copyright. And then in the index HTML,I will look for the end of the header. Somake sure that you copy and paste in the sidebar,but right off the ED sidebar, paste and youshould see here two links As well as socialmedia icons. Now, of course, I can close mysidebar, and we can figure out how to addfunctionality using JavaScript. Before westart typing away our JavaScript functionalityin the objects, I think it would be very crucialthat we understand our setup. And the wordwill work if we look at the styles, CSS, andif we navigate down. And last thing you'llsee here is the class of sidebar. So thatis my sidebar, I'm using here position fixed,I'm placing it on top left corner, and widthand height is 100. That's why it's takingup the space online. Once we get to a biggerscreen, then I'm just using the width of 400.How are we going to show and hide the sidebar?Well, by default, I would want to hide thesidebar, how I can do that, I could use thetransform property and set it equal to a valueof translate minus 100. So what this willdo, it will push the sidebar left 100% ofits own width. So what it means it will disappearfrom the page. So the moment you will on commented,you'll see that our sidebar disappears. Now,in order to show the sidebar, again, willthis transform and translate our in this case,the Translate will be zero, what that meansis, it's just going to go back to its defaultposition, which was exactly what we saw asecond ago. And we'll add that in a show sidebarclass. And what we'll do with JavaScript,we'll just gonna toggle this class. So ifthis class will be added to our sidebar, thenof course, we will show the sidebar if theclass won't be there. And then of course,we'll go back to default, which is translateminus 100%, which means that the sidebar hasbeen removed from the page. And there's nobetter way than doing it manually. Becausethis will give us a clear understanding whatwe're doing with JavaScript. So navigate toa bigger screen. I'll look for a current projectnotice, my sidebar is gone. But then if Iopen up the dev tools, if I look for my element,I can just manually add the sidebar class.And you'll see that our sidebar will appear.So I'm looking for my sidebar. Of course,at the moment, our sidebar has this classof sidebar. But what is the class that showsthe sidebar? Why is this one, the transformtranslate, the name of it is show sidebar.Now, as a side note, by the way, you can alsotoggle it here in a dev tools like this. Butsince in JavaScript, we will add and removethe class. I'll type it out here. Notice whereI have the sidebar, I'll just say show sidebarclass. So that's the class we'll add laterwith JavaScript. Once the class is there,check it out, we can see our sidebar. Now,if I remove that class, of course, sidebarwon't be there. So it's going to be a littlebit of mix. We have already CSS prepared.But I'm just showing you that effectively,this is the only thing we're doing will addor remove the class. That's how our functionalitywill work. Excellent. Once we have coveredwhat is our goal, let's proceed your objectsand start tapping away. And I'll start byselecting three things. I would like to selectmy sidebar toggle, I would like to selectmy actual sidebar, as well as the close button.So those are the three things that are wantto select in my address. And I'll start withmy toggle button. So toggle btn. And in thiscase, again when we use the query selector.So our query selector and the class is a sidebartoggle. Now, I do need to add, of course,my dot sidebar, toggle. And I'll copy andpaste two more terms. And the next one isthe close button. So this is going to be closebutton. And the class is also closed btn.Close, close. btn. And then we have one more,which is our sidebar. So it's right here sidebar.And then instead of sidebar toggle, we'llhave our sidebar, we'll save it. And thenI would want to add event listener to my togglebutton. And I would like listen for clickevents. So we're going to go toggle button,then add event listener when listening forclick events. And then we'll have our function,our callback function. And then within thecallback function, like I said, we'll justcheck whether the sidebar which we have ofcourse selected has the class of show sidebar.If it doesn't, we will the show sidebar class.If it already has the show sidebar class,then of course We will remove it. And justso we all are on the same page. I'll startby console logging the class list on the sidebar.So right here sidebar and class list, justso we can see what classes will have. So I'llopen up the dev tools, we'll click on a toggleon our console, we should see only one router.So that's the only class that currently oursidebar has. And then we have two options,we can go the long way, or we can use thetoggle. Now, since I would want to tortureyou a little bit, I'll write the long wayfirst, and then we'll do the short way also.So we'll say if sidebar, so if sidebar, andthen we have the class list property, of course.And then we have the contents. And using thecontains, I can just say, if the sidebar hasthe show sidebar class, then of course, Iwould want to remove it. But if it doesn'thave the class, all one on it. So I'm hereI will say sidebar, then class list. And thenI'll say remove why. Because in this case,I'm checking if the sidebar has the class.And of course, since I have the toggle button,I would want to remove that class. What classam I talking about? Of course, I'm talkingabout show sidebar class. And I'll set upalso the else. What does that mean? It meansthat the sidebar does not have the class.So if I'm hitting the house, that means thatsidebar doesn't have to show sidebar class.So just add it. So say sidebar, class listand add. And of course, the class that I'mtalking about is show sidebar, we'll saveit, I'll navigate to a bigger screen is goingto be easier to see. And you can see thatas I'm clicking. Of course, I'm doing exactlywhat we did previously, when we were manuallycontrolling it. Now we're just checking inthe sidebar, how's the class? Awesome, we'llremove it. If it doesn't, then we're justadding the class. But we can save ourselvesquite a bit of code, considering the factthat there is a method called toggle. So I'llleave this for your reference. So that isstill going to be there. But a much fasterway is writing sidebar, then class list, toggle.And now I just need to say which class I wouldwant to toggle on again, in our case datashow sidebar, we'll save it. And now again,I'll check on a bigger screen because it ismuch more easier, since the sidebar is notcovering my button. And of course, still thefunctionality works. Or I was able to do itin one line, where previously, I believe Ihad five, that would be a little bit fasterway where we can use our toggle, and thenjust pass whichever class we would want, whichin our case, of course, is show sidebar. Andthen of course I would want to work on myclose button as well. So open up my sidebar.Now I need to target my close button. So gowith close btn add event listener will listenagain for the click events, we'll have ourfunction or a callback function. And thenwithin the function body, we'll just say thatwe will remove the class. That's the onlything that the close button needs to do. Becauseat this point, we already have added thatshow sidebar, if we can click on the closebutton, that means sidebar is open. And thatmeans we just need to remove the class. Sowhat color Am I looking for of this one sidebarclass was the demo. And I'll speed thingsup by just copying pasting. We'll save it.Again, let's open up the sidebar, then closeit and we're good to go. So as you can see,we have our functionality, we can see oursidebar, we can hide our sidebar, and we'regood to go. Again, the main thing is to setup the CSS where you hide the sidebar by default.And then you're just toggling the class thathas that value of transform, translate, zero.Great. And up next we have the model project,where if I open up the project, you'll seethat we'll have some kind of background imagein the center, there's going to be some content,or some kind of banner, of course, in ourcase, is just going to be a title of our project.And then we'll have a button. And the momentwe click the button. Notice we'll get a modalwith a nice overlay. And then some modal content,which in our case, again, is just going tobe a one sentence. And of course we'll havean option of closing the modal. Once I clickthe modal notice modal is gone. And we'llstart with our HTML. So head back to my setupproject, and then probably make this sitea little bit smaller. And I don't want theorange one. In fact, we will set up our herofirst. And we're talking about hero we talkabout a massive background image and thenso kind of content innocent. That's why we'rereferring to as a hero. So go with hero andhave hero. And then within hero, we'll gowith a header with a class of hero. Of courseCSS is already added, so we don't need toworry about it, I was I will go with a banner.And then with your banner will place a penguinwith a text of modal and then project as wellas the button that will open up the modal.So I have a button. And then for the button,I would want to add two classes. One is goingto be the generic button class, we're justgoing to add some styling, and then also havea modal btn, of course will utilize in ourJavaScript, as far as the text our right openmodel, also read our should, my hero awesome.And I would want to set up a model. Now thisproject is going to be a little bit different,because I'm going to give you a challengein the beginning of the next video. That'swhy as we're typing out the model, you won'tbe able to model. And again, that is doneon purpose, because I would want you to startnext video with a little bit of challenge.So don't worry, as long as your classes areexactly as mine, everything will work. Butat the moment, as you're typing everythingout, nothing will change on the screen. Soin this case, what are we looking for is model.So we'll have a common model, then I'll havea modal overlay class. So div with a classof modal overlay mark so and then within thisdiv, we'll have a modal container. So we'relooking forward to class of modal container.And then within this container, we'll havetwo things, a array and a button. So prettymuch the same setup, when we're in this case,of course, when we're talking about is theclose button. So if I open up the model, noticewill have some kind of content. And that isgoing to be a heading three, and then theclose button. But again, at the moment, asyou will be typing this out, you won't seeanything, because the CSS is already addedwhere it hides the model, okay, so don't worryabout it, just keep on typing away, and makesure that the class names match though. Otherwise,if they won't match, then of course, you willnot be able to follow along. So I'm goingto go with having three modal content. Andthen I'll have my close button out here aclass of close or class, close and btn. Andthen within a button, I'll place my Font Awesomeicon, the classes are going to be high F,A, F A times. And once I save as I keep onrepeating, we won't see anything in a browser,but we can start working on our functionality.Since it's not our first rodeo. Essentially,we have done quite a few projects together.And the setup is almost the same as we hadfor the sidebar and nav bar, I would wantto give you a challenge where I want you totry to create the project yourself. Now, don'tworry, I'll still give you a guidelines andall that. But instead of giving you a generalconcept, like I was doing for the sidebar,and for navbar, I want you to try doing theproject yourself. And we will work if we hadto style CSS, you'll see the modal overlayclass. Again, the class is modal overlay.Now we're using position fixed, we're placingon top of rest of the content. But then likeI already previously mentioned, I alreadyadded CSS that will hide the model. That'swhy at the moment, we cannot see the model.Now if you comment out these two lines, andof course, you will be able to see the model.Now the class that shows the model, like ina previous project is called Open model. Again,remember with the sidebar and then with anapp, but for both of them, we had a classthat was just toggling the sidebar, or dinajpur.So the same works over here, where the modelis hidden by default. And then we're usingthis open model class to toggle the model.So here's what I would want you to do headto objects, and then you'll see the comments.And as you can see, these are the steps thatI would want you to take, I would want youto select model button, model Overlay andclose button. So what are those three things?Well, if we check out HTML, I can see themodel button, I can see the mall overlay.And of course, I can also see the clothesbut then once you have selected them, I wouldwant you to add a event listener to modelbutton and the close button. So both buttons,add event listener. And of course you'll belistening for the click event. And then whenthe user clicks the modal button, I wouldwant you to add open model class to a modaloverlay. But then when the user clicks theclose button Then of course, I would wantyou to remove the open model class from themodel more like. Now, of course, I will showyou my solution in the upcoming video. Andalso, if you would like to take a peek ofhow the final project looks like, of course,you can head to final directory, but I wouldreally want you to at least try doing it yourself.Because you'll notice as you're strugglingwith things, you'll learn way more than justwatching me type out everything in front ofyou. Alright, hopefully, you're able to completethe project on your own. And here goes mysolution. So I'll start by targeting threethings modal button, modal overlay, as wellas the close button. So go with const modalbtn is equal to document dot query selector.And then the class that I'm looking for ismodal, bt, not particularly original, buthe will do its job. And then I'll copy andpaste two times. And then of course, I wouldwant to change these values. So for the secondone, I'll have a variable of modal. And thenthe third one will be my close button. Soclose btn. And, of course, I do need to changethese classes around to and then the modelhas the class of modal overlay. So let medelete the button part and just add modaloverlay. And then of course, for the closebutton, class is close btn. And then likeI said, I would want to add two event listeners,one for each button. So go with modal btn.And then I'm looking for add event listener,I'll be listening for a click event. Here,I'll have my callback function. And I'll dothe same thing for my closed one. So let mecopy and paste. The only difference is thatof course, I'm going to be adding this tomy close button. So have both of the eventlisteners. And then once I click on a modalbutton, I would want that open modal classto a modal overlay. And again, just to recap,in the CSS, we are hiding model by default.That's why we have this visibility hidden,and then z index minus 10. So this open modelclass has the visibility of visible and thenz index of 10. That's why when we have thisclass, we'll be able to see the model. Andthen once we remove the class, again, modelwill be hidden. That's the whole setup forour model. I already have selected my model.So our model, then remember, we have a propertywith a value of class list. And since I wouldwant to add it, I'm going to run method. Andthen the class name, but I'm looking for isopen model. That's the class. And I'll copyand paste. And then here we'll have a room.So once we click on Close button, and of course,we'll have array. Let's save it. And thenthe moment I press on the button, of courseI can see my model. And then I also have theclose button. So of course I can I hit thebutton. Now if you'd like to test it out ona bigger screen, of course, we can navigatethat. And that is my current project, I clickon opening the model, I have some kind ofcontent, and then I can close it. Now if youdon't want to test it out, of course, youcan have to index HTML and just add more stuffwithin the model. So it's more than just asimple heading three. Well, that should doit for a project. Hopefully, you're able tosolve the challenge. And I'll see you in nextproject. Awesome work. And up next, we havequestions project, where we can imagine thatin one of our sites, or in one of our projects,will have a q&a section. And then of course,we have some general questions online if theuser wants to see the answers, of course,he or she needs to click on the plus icon,and we can see our answer. Now a few coolthings that we will learn during this projectis how we can close arrest of the items. Oncewe open the second one. And honest once Iopen up the second one that only this onestays open, and the previous ones closed.And also this project will have two solutions.Were in one solution will traverse the DOMwill navigate up and down the DOM tree. Andthe second option will be selecting elementsfrom within the element. And I completelyunderstand that this sounds like gibberishright now. Don't worry, once we get there,you understand completely what I mean. Butas always, we do need to start with our indexHTML. Effectively, we do need to add our HTML.And of course, I don't want questions projectheading one, which is in my setup. I'll deleteit. I think I'll close the sidebar for timebeing as well. Just so I have a little bitmore real estate. And then what I'm lookingfor here is a section with a class of questions.So section class of questions. Trans mathquestion questions. And then I'll start byhaving some kind of title. So let me add heremaybe a comment first. So title, and thendiv with a class of title. Then with a title,I'm going to place a Heading Two, with a textof general portions. And then right afterthe title, I'll have my section center. Solet me out again common of questions morash,trans. Mark, so and then the div with theclass of question center or, you know, nosection center, sorry, not question section,section center. And then within this therewill have three articles, which each of themwill present a single question. So I'm goingto go here with the common single question.And I'll copy and paste unless it's just mypreference, when I'm copying, pasting somethingto have the opening comment and the closingone, because that way, I know that I justneed to grab both of them. And I'm good togo. And then like I said, He will be an article,and it will have a class of question. Andthen within this article, we'll have two things,we'll have the title. So again, dependingon your question, this will be your title.And then of course, we'll have two buttons.Now at the moment, you can see only one. Butin order to set everything up, of course,we'll have two buttons here, we're gonna havea plus one, and the minus one. Now, technically,they both will be spans within the same button.But don't worry, we'll get there. The generalidea is like this, where we have the paragraphand the button. So I'm going to go here witha paragraph with some kind of text. Now youcan come up with your own text, but I'm justgoing to go with the you accept all majorcredit cards, question mark. On line a rightafter the paragraph, like I said, we'll havea button. And then for the button, we'll havea type of button just to stay consistent.And then class is important. Now one as questionbtn. And then like I said, within this button,we'll have two things. We'll have two icons,one plus and one minus. Now both of them areplaced within these bounds. And both of themwill have some kind of unique class. So forthe span, one will have a class and the valuewill be plus icon, plus hyphen icon. And thenwithin this panel, have my Font Awesome, whereall have classes of fA r and then fa, hyphenplus, sorry, plus here, and then hyphen, square,square number that is going to be my plusicon. Okay, good. Once I say that should bemy look. And you know what? I think I missedout on there. So my apologies, instead ofjust placing it willy nilly, you know what,within the question, I'll have to have onemore class. So I'll have here question. Andthen hyphen title. My apologies. I shouldhave added it in the beginning. But I guessI'll have to do it right now. So let me moveit up. I'll have question title. And thiscase, I think I'm going to add your commentas well of question title. And then withinthis div will place the paragraph and thenthe button with two spans at the moment, wehave one but don't worry, we'll fix that ina second. So I have my first panel. Awesome.And then I'll have a second one. Now for thisguy, though, the class will be minus icon.So that's the class on span. And then forthe Font Awesome. I'll have fA r. and thenfa, fa plus our I'm sorry, minus i guess,minus square, or exoteric. And now I havetwo buttons. Now, don't worry, we still needto do some general setup. So at the annualnot only one, as we're clicking but for thetime being or after. So that should do itfor our title. Let me see where my title ends.All right over here. And then I'll have myquestion text. So question, text. And of course,there's going to be corresponding div as well,with a class of question text. And then withinthe question text, I'm just gonna have a paragraphwith, I don't know, 20 words. 30 words. It'sreally up to you. I'll save it. Okay, awesome.And now I'm just gonna copy and paste. NowI'm not going to go really crazy. I'm justgoing to have three questions. Just remember,functionality will work regardless. So ifyou want to have 20 questions here, feel freeto do it. But in my opinion, you probablydon't want to watch me, Hawaii add 20 questions.So I'm just going to add two more. So likeI said, I'll select everything, starting witha single question to the end of single question.And I'll just copy and paste through time.So one, two, and then I'm just going to changesome values around and I'll take a look atthe text. So the You support organic ingredients?Or I'm sorry, do you use organic ingredients?I guess I was reading both questions at thesame time. That also happens sometimes. Soin this case, I'm looking for my third question.And I just want to change the text. That'sall we have to do. So again, we don't needto treasure any classes or anything like that.We just have to have a different text here.And I'll do the same thing for my second question.Just so I can speed up a little bit. Let meget my text, I'll scroll up. That should doit. We'll have our second text as well. Andnow I have all the questions, I can see allthe answers and all that. And now of course,we can proceed and start setting up our functionalityin JavaScript. Before we start typing awayour functionality. Like in some of the previousprojects, I want you to understand generalconcepts first. So essentially, how it willwork without JavaScript. And then once westart out in JavaScript, we already have generalidea of what do we need to accomplish? Soif we had two styles, CSS, keep on scrolling.In a bottom, you'll see bunch of classes thathave been commented out. And what we wouldwant to do is hide this question text by default.So the moment page loads, I'm hiring thisquestion text. And only once we click on abutton, then we'll display that. And the waywe'll do that is we have a question. Textclass, of course, that's why we have equalto display on by default, so the text willbe hidden. And then again, we'll introducea class by the name of show text. Now, oncethis show text has been added to a question,the question text class will have a valueof display block. What does that mean? Thatmeans that question will be visible, as faras the icons, by default are high the minusicon. That's why we'll have minus icon displaynone. But then again, class will be addedby the value of show text. And then once thatclass is added, then minus icon will be displayed,and plus icon will disappear. So we need touncomment this. And we'll right away, seethat text is gone. Minus icon is gone. Andthen again, we can do the manual setup. Wherewill this class show text manually, just sowe can see how everything works? Now, I'mnot going to a final project, even thoughtechnically I could. But I'm just going togo to the project where we're currently working.We'll crack open my dev tools. I'm lookingfor the question. And, again, you can addit to any questions. But of course, I'll doit to the first one, because it's just convenient.And out here quotation mark, judges deleted.And then like I said, the class name is showtext. And you'll see the moment I run it,I have two things happening. I have the minusicon instead of the plus one. And then I cansee the text. And then of course, a momentI'll remove this class, what do you thinkwill happen? Well, it's just going to go backto the default. And again, effectively, thisis what we'll do with JavaScript will dynamicallyadd this class. And then the moment we clickone more time, then of course, we'll rewardwe'll just be toggling, like we did for thesidebar for the navbar as well as for themodal. But there's going to be some more interestingthings here. Because again, we have multipleitems. So now we'll take a look at how wecan make sure that we close one of them ifwe open the other one. And that sort of stuff,like I mentioned in one of the previous videos.In this project, we'll take a look at twopossible options. One will be traversing theDOM, and you'll see what that means in a second.And the second one will be using selectorsinside the element. And I would want to startwith traversing the DOM option. So open upthe sidebar, I'm looking for my objects. Andas you can see, I have two comments. So we'lltype out first traversing the DOM. And thenwe'll comment this out, just so we can haveit for our own reference. And then we'll usethe second option using selectors inside theelement. And I would want to start by selectingall the buttons. Now buttons are my lookingfor looking forward to question but so whatI would want to do is I would want to selectthree question buttons. And then once I haveselected them, our loop over them, and thenI'll click event listener, and then I'll justmake sure that the parent is in fact the question.And then we'll just add that particular class,remember show text to the parent to the question.So let's start by selecting all the buttonsand again, we just need to come up with somekind of variable markers that is going tobe btn s so mediums and then document thenquery selector, but I do need to add all becausethere's going to be multiple of them. Andthe class name is question btn. So once Ihave selected all the buttons, awesome, thenI would want to loop over them, because Iwould want to add that event listener to eachand every button. So I'm gonna go with btand s. And then for each online, remember,we had a callback function. And then withinthis callback function as a brahmer, we couldaccess each and every item, which in our case,is just that button in our list. Okay, good.And then as far as the button, and by theway, since it is a parameter, I just needto add it here. So I will name this button,but you can name this orange. And then I'llsay, button, event listener, listen for clickevents. And then we have another callbackfunction. So in this case, I would like toaccess the event object. So I'm going to gohere with the, and then for the time being,we'll just console log the current target.So I'm gonna go with log, then event, andthen current target. Let's save it. I'll openup the console, just so you can see that thereis no black magic. And once I click Checkit out, of course, this is my button. AndI can clearly see that, as I'm hovering notice,it tells me that this is the button that Ijust clicked. So if I'm going to click ona second one, of course, this will referencethe second month. So now what I would wantto do, well, I would want to traverse theDOM, which is a fancy way of just moving upand down the DOM tree. If you would like toknow more, we can just add to our bigger browserwindow. And then notice, of course, I havemy question, right? And then I have the questiontitle. So what I would want to do? Well, onceI click on a button, I would want to checkwho is the parent? Now direct parent? Is thequestion title, correct? Because I have aquestion title, and then the button is sittingwithin title. But what I'm looking for isthis question. So that is going to be theparent of the parent. So the moment I clickon a button, I know that I have clicked onone of the buttons. And then I'm just gonnasay, Get me the parent, and more specificallyparent of the parent. So once you get thatparent, then just add show text to a parent.And we're gonna do that because in JavaScript,we have a property by the name of parent element.And we can simply do it this way, where Ihave current artists, and legends this parentelement. Now once we click, what do you thinkis gonna happen? Am I gonna see the currenttarget, which would be the button where I'mgoing to have the title? And you can probablytell already, by the way, I'm asking the questionthat probably the answer style, so click here,notice, is this a button or title. And thisright away tells me which actual title is.So since I clicked on a second button, ofcourse, right now I'm referencing the secondpile, I'm not referencing the third, I'm notreferencing the one, I'm referencing exactsame title, where the buttons if we put twoand two together, sorry, if we have event,that is, of course, our event object, andwe have current target, which is our button.When we have a parent, which is a title. Whatdo you think we would need to add here inorder to access our question? Since questionis the one that's looking for that show class,the show text class? What do you think wewould need to add? And I can give your handor we just need to repeat the same thing.We just go with the parent element. And nowyou'll notice something really, really cool.If I click here, not only I'm referencingthe button, and the title, but I can alsoright away access the actual question. Andthat is it. That's all we actually need. Becauseagain, remember, once we have access to thatparent, what do we have to do? We alreadyknow, class list, toggle, and then show text.So each and every time I'm going to clickon a button, I'll just toggle, I'll eitheradd, or all remove show text class, from thearticle. And I think I'll assign it to somekind of variable just sorts a little bit moreinteresting, and a little bit more structurallysound. So I'm going to go with const question.So this will reference of course, the question,let me delete the parentheses. And the onlything out here is question classless togglethe property and method that we have coveredbefore. So question. Now of course, I'm referencingthe parent for the button and I'm clickingon an classlist class list and remember theproperty name or I'm sorry, I guess more properly,the method name was toggle. And what classI want to toggle on that would be show text,not save it on navigate. To a bigger screen.And I think I can just close or you know what,I'm not going to close it, just so you cansee actually how we're adding this class.So I can see that I have my first question.Now I'm just going to click on my first book.Notice once I click, I'm adding the classof short text. And rest of the magic is donealready in CSS, where we're showing the text,we are displaying different icon and all that.And of course, the moment I'll press course,I'll hide my question, not gonna do the samething for us to them, like so I can just openup close. And I think I'll close the dev tools,just so you can see that it's happening. Yep,everything works like we expected. Again,this time, we use traversing the DOM option,where I selected the buttons. And then I startedlooking for the parent elements. And of course,we're going to look for children, we can lookfor siblings, and all that is just in thiscase, it was very convenient for us to finda parent. And we use parent element twice.So first, we got the title, then we got theactual question. And once we got that specificquestion, that's it, we were good to go. We'lljust toggle and method show text. And ourproject is complete. Okay, we were able tofind solution by traversing the DOM. So thatwould be one option. And then, of course,I'll comment this out, just so we can haveit for our own reference. But now use anotheroption, where we can use selectors insidethe element. And this is going to be the casewhere it just makes way more sense for meto show you with an example. Now in this case,I'm not looking for two buttons. What I wouldlike to do is select questions. So those articles,so those bad boys that are looking for thatshow text class. So I'm going to go with const.And I'm looking for questions, because again,I'll use query selector also, I'll go withdocument that query selector all and rememberthe class was question, single question, question.Okay, I have all my questions. And if youwant, you can console log in, you'll see thatyou'll have a list of three articles. Now,I would want to loop over them. So I wantto call my for each. So go here with a questions.Then for each remember, again, we had ourcallback function, so I go with my function.And then as a primer, I can access each andevery item in my array. And just to make thingsa little bit more interesting, I'll try outthe orange. And we'll also console log theorange, just so we can see that we have ourarticles, and beautiful. We do have the articles.Good. What's next? Well, here's the kicker.Same way how we use document and then queryselector or query selector, or get elementby ID, I can also add this query selectorto my element. So once I have access to thatone specific item in my loop, I can also usequery selector all or query or whatever geton my body. Now, you're probably wondering,okay, how does that help me? Well, that helpsus because we can select that specific button.So for example, I'm looping over. And foreach and every article, I can select thatspecific button, and you'll see why it's souseful in our use case. Now, I would wantto get a little bit more serious, though.And I'll reference this as a question. Nowagain, technically, I can name it, whateverI would want, but I think is just going togive you a better representation, if I'llhave a more meaningful name here. So I'm goingto go back here to a question. Now leave thisconsole log for you. Just again, you wouldwant to test it out. And then I would wantto select a button from within the each andevery question. And how it will work, I'mgoing to go to cons and then btn. Now in thiscase, we're not typing document, because you'llnotice that it will type out here document,I'll be selecting, again, all the buttons.So for each and every time I'll be loopingover, I'm just gonna be selecting all threebuttons. That's not what I would want. I'mnot going here with the document. I'm goinghere with a question. Now what that does isjust limits where we're looking for. So nowI'm just looking either in the first one orsecond one or third one. So I'm going to gohere with query selector. Again, the methodname has not changed query selector, and I'mstill looking forward to same class. A classis question btn. Now again, let's consolelog. Let's see what we'll have what buttonsand we should have three buttons. And allthree buttons. Reference exactly what we havean items. Notice, as I'm hovering over themin my dev tools. Right away I can see in abrowser, which document I actually have selected.Okay, good. Now, what does that give us? Well,that gives us an option of adding a eventlistener to our button. And then again, oncewe'll click on a button, then our questionwill toggle it. Now let's see how that willwork. So I have my button. Again, I'll commenton my console, log on live it for your reference.And then I'll say btn. So again, I'm justtalking about each and every button in myquestion. So I'm going to go with btn. Theevent listener, I'll be listening for clickevents. And I'll go for my callback function.And then within the fallback function, I'mjust going to be a question. Now why am Isaying this question? Because that is thename of my parameter. So this question referencesmy article. And then the button references,the actual button that is within the article.And again, the unique thing here was thatwe use question not a document. So I'm notjust flying around the document and lookingfor that button. I'm saying, Hey, listen.Now I'm within that question, because thatis, of course, my loop. So that is my iteration.For example, first one, second one, or a thirdone, in my case, and in my iteration, I'msaying, okay, I can access my article beautiful,then look for that button within the article,don't go looking around the whole document,just look in my question. And once I haveaccess to that button, I'm just say, Alright,I would like to add eventlistener. And thenI'm just gonna say, all right, so that specificquestion, that specific iteration of thatarticle? Well, I'll just talk about. So onceI click on a button, that is within the article,I'll, again, toggle the class on the actualparent. And the question, which is that articlein my iteration, so here, I'll say class list.And you guessed it, again, toggle. And thenwe're looking for show text class, we'll saveit. And I can, of course, open it, I can closeit, I can open it, and I can close it. Andone last thing that I would want to add isthe functionality that if, for example, Ihave my first one open, and if I click onany of the other ones, I'll close my firstone. So close all the other ones that areopen. And I'll open the one that I clickedthe button on. Alright, how do we do that?So within the eventlistener, I would liketo select all the questions again. So beforequestion, class list toggle, I would wantselect all the questions now I already haveselected them. So I have access to them. Sothe only thing I need to do is just referencethem. I'm just gonna say question matters,my list. And then again, all right, a foreach. That is my loop. And in this case, I'mgoing to say function. Again, that is my callbackfunction. And again, I do need to referenceeach and every item as a parameter. Now, sinceI don't want to repeat the same length, insteadof question, I'm just gonna call this item,just again, understand, it is the same thing.Those are the same articles. Only in thiscase, I'm referencing them as items insteadof the questions. And here I'll have the functionalitywhere if the item. So if the article doesnot match the article, where I'm clickingthe button, then just close the actual article,meaning remove the show text class. And again,if you want, you can just console log, andyou'll see again, that those are our threearticles. There's nothing really specificorder, I do it here. And notice. Now thisjust shows me all my three articles, or inthis case, since I clicked on a second one.This also lets me know that the second oneis the one that is already open, because ithas the show text class. And the way I'llsend that functionality is by using the ifstatement, where I'm going to say if the item.So if the article in this setup, does notmatch the actual article, where I'm clickingthe button, then remove that tax. That's whyyou will see that the moment I for example,click on the third one, while it's not goingto match the article. So the articles aren'tgoing to be same. And that's why I'll closethe text by removing the show text class fromthe second one. So in this case, I'm justgonna say if the item does not match the question,then we'll write item. So that particulararticle, class list, remove a man we're lookingfor show text class. That's all we have todo. So now what happens if I click for example,on my first item, of course, I can see mytext. But then now once I'll click on a secondone, what do you think is gonna happen? SoI'll click on the second one, and then I'llloop over my quote Now, is the second articleequal to my first one? No, it's not. And ofcourse, once I click on that button, in mysecond question, I will have my loop. Andthen since the first item does not match thearticle, where I click the button on one button,of course, or remove the actual text, so checkit out, I click, I will close out the texthere. And here, even though on the third one,of course, it wasn't open to begin with. Andthen I'll just display on the second one.And I can do the same thing, close it open,close it open. And now our functionality works.So that's how we can set up questions projectusing two approaches. One was by traversingthe DOM, parent element, notice somethingyou should probably remember a property, itis very, very useful. And then of course,we also have a very, very nifty option, whereI can select elements already within somekind of selection. So I don't have to eachand every time Look around the whole document.So if I already have selected some kind ofspecific item, I can look within that item,I can say, question and use, again, the methodquery selector, or I don't know get elementby ID, this is very, very nifty. Because again,you can select specific items, you don't haveto select all the buttons or order articles,you can select very, very specific thingswithin that selection. Awesome work. And welcometo our next project, the menu items project,where we'll take a look at how we can displayproducts or any kind of items dynamically.So once the page loads, we'll use JavaScriptto populate our page. And also, we'll setup some filtering options. Now why I really,really like this project, because displayingitems using JavaScript, or maybe even withreact and view and Angular is going to beyour bread and butter. Now granted, most likely,you will do that by getting that data somewhereexternally, whether it is a database, whetherthat is a third party API, or that sort ofthing. But in our case, of course, data willbe local, because we haven't covered thoseAjax requests. But that doesn't mean thatwhat we learn is going to be useless. In fact,the only difference is that once you get thatdata externally, well, you just add a fewlines of code, you get the data, but thenstill everything that we'll do in this project,you'd have to repeat anyway. So don't dismissit just because data is local. That is oursetup, the rest of the things that we'll learnin this video are going to be very, very usefulbecause like I already said, this will beyour bread and butter, getting some kind ofitem, and then using JavaScript to iterateover those items, then decide what you'd wantto display on a screen, what kind of functionalityyou would want to add, and so on and so forth.So, we have our project. Of course, as always,we will start with index HTML. In this case,it is very important, because we will addthis dynamically, this HTML syntax. So I'llshow you why I always like to set up my HTMLfirst, see how my project will look like andonly then dynamically added in JavaScriptbecause it's going to be much more easier,we just need to copy and paste few lines ofcode. And we'll be good to go. So we headback to our setup. And then of course, atthe moment, the only thing I have is my braveand proud and awesome hitting one with thetext of my new project. So of course, we wouldwant to change that around and we'll go witha section, the class will be menu. I'll closethe sidebar. So I have more real estate onhave a title class here. So title class, Oh,you know what a comment as well. So commenttitle, then my div. And then within a div,I'll have the heading two. And I'm gonna havethe text of our menu. Very beautiful. Andthen on the line, just some fancy CSS. Andof course, when I say fancy, I'm being sarcastic.And then I have my footer buttons. So rightafter the title, let's see where it ends.Let's add a comment for filter button, whichat the moment, we're not gonna have them butstill have the comments of filter buttons.Okay, awesome. And then we'll have our menuitems. So another common here, and we'll saymenu items. Then I'm going to add a div witha class of Section center again, so sectioncenter, and essentially, this div is justresponsible for my column layout. And thenI would want to select that single item Andthat's going to be the code that will latergrab and just copy and paste in our JavaScript,because it's just going to speed up our workflow.So let me save it and see where it is. Okay,I have our own menu. Beautiful. And like Isaid, Now I'm creating that one single item.So we'll not worry about the buttons at themoment. But we care about this one item. Soat the moment, we'll just structure one, we'lldo a little bit of copy and paste, just sowe can see that our column layout works. Andthen Mike already said probably 50,000 times,we'll just grab that code that we have forthat item added to our JavaScript. And asalways, I do like to have the comments here.So single item, just because I think it givesa little bit of structure. So I'll go hereand off single item. And then it will be anarticle. And it will have a class of singleitem or not no sorry, menu item, or a singleitem menu item. And then within this article,I'll have the image. Now at the moment, I'mjust looking for the item that is in my rootfolder. So I'm not looking at the images.Later on, we'll also take a look at the imagesfolder. But at the moment, I'm just lookingfor the menu item. So this guy over here.So I look over in my files, and I'm lookingfor the menu item, okay, beautiful. And thenI'll add here, the class of photo class willbe photo. And then as far as the alternativewill just write menu item, not say what we'llhave. I said, awesome. And then I'll havea div that will have the info. So have thephoto. That was one part of my item. And thenthe second part will be disinfo. And sinceI needed for my layout, I'll place this ina dev. So I'm going to go here with a classof item info. And then within there, we'llhave a drink for water milk. And of course,you can write whatever you want. But justto have a little bit more real world scenario,I'm just going to go with a real text. Sobuttermilk pancakes, we'll have a headingfor I'll add here a class right away, andthe class will be price. And then I'm goingto have $1 sign of $15. Let's save it. Okay,I do have my text beautiful. And then I'llplace this actually in the header. So letme go with the header. Let me select bothof them both things here and place it in theheader. And then right off the header, I'llhave my paragraph. And the text over hereis going to be item text, or that is goingto be the clause, the text will be whateveryou'd want. In this case, I'm going to gowith 20 words, but the class will be itemtext. Let's add here item text. Now let'ssave it. And just to double check that mycolumn layout works, I'm going to take myitem, and then copy and paste a few times.Now we don't need to change the values oranything like that, I just want to see whetheron a bigger screen, we'll have to come whileand I do, which is awesome. So now this case,I can press Command Z, and go back to thatone single item. So once I said I have allthe HTML that I currently lead, and we canstart setting up our functionality in theJavaScript, okay, so let's add the logic wherethe moment the page will load, and will dynamicallypopulate our menu with items. So if we hadtwo objects, we'll see a menu array. And thenin the menu array, we'll have a bunch of objects.Now each object represents that one singleitem, again, we'll have a property of ID,which as a side note, will not use. This isjust to mimic a real world response. And we'llhave title, and then of course, we'll havesome kind of value, there's going to be acategory, because we'll use it for filtering,we'll have some kind of price, some kind ofimage. Now this is a tricky one, where again,since we're not getting this from externalAPI, if you ever would want to use that menuarray somewhere else, just make sure thatyou also have this images folder. And in fact,it is in the root. So as you can see here,the path, the dot and then images, that justmeans that this code will be located in theindex HTML, and not just a references aboutimages array. So if you'll try to run thiscode without those images, well, those imageswon't show up, or even if the images are goingto be there, but the path is going to be different.For example, you'll mess images somewherein a different folder. Again, the functionalitywill not work because this specifically referencesthe images folder, as they are In the road,and then we have some kind of descriptionthat is going to be displayed here in thebottom. And yes, like I mentioned before,Normally, you would get this data externally,you'd set up some kind of Ajax request overhere, and you would get the data. Now onceyou get the data, again, everything is goingto be exactly the same. Like we will, rightin this video, there's going to be no difference,you will get the data. And then you'll iterateover the data, you'll decide what you wouldwant to display, what kind of functionalityand yada, yada, yada. But the initial setup,yes, would be a little bit different. Eventually,once we learn Ajax, we'll see how we can setup data request, get that there. And we'llbe good to go. But like I previously alreadymentioned, we haven't covered Ajax. And Ithink it is crucial that you understand thebasics of how to display items on a screenbecause it will, it will be your bread andbutter as you're working with JavaScript.So I have my menu. For the time being, I'llcollapse it. I will reference it once in awhile, just when I would want to show someproperties or maybe some vouchers and allthat. And just always remember that you haveit in your own app js. So if you ever needto take a look at it, just open it up. Andyou can take a look at the specific informationyou're looking for. And I'll start by selectingthe section center. Now, why am I selectingthe section center? Because remember thatDOM content loaded and was one of the eventsthat we already used in the previous projectwhere I had window, add event listener. Soit was listening for that DOM content loaded.So when my page loads, and then I had a callbackfunction. So here's what I would want to do.When my page loads, I will access my menu.So my array, and I'll dynamically populatethese items, or I need to place those itemssomewhere correct. So if I'm checking outmy index HTML, which is the parent, for allmy items, are all my single items. Well, thatis a section center. That's where we'll needto start by targeting the section center.So I'm going to go here, we can't sectioncenter. Again, you can call this variablehowever you want, I just went a long way.And then the document, then you get the queryselector, since that seems to be my favoriteone. And then section center. Awesome. I selectedmy parent. Now, remember, we had DOM contentloaded. So when our page loads, we would wantto do something. So I'm going to go here withwindow, then add event listener. And thenI would want to listen for that DOM contentloaded event. So I have my parentheses. Okay,I have my quotation marks. And I'm listeningfor DOM content, and then loaded. And thenof course, in here, I'll have my callbackfunction. Now within a callback function willstart very, very simply, by just console loggingshake back, just so we can see that everythingworks. We'll head to my console, I alreadyhave the shake and bake. Once I refresh, notice,again, I get my shaking back. Beautiful. Now.Well, now let's see what we can do with ourmenu array. What would be the plan? Well,we could set up a map method, correct. SoI have my items. Now, I would want to iterateover those items, and dress them up in HTML.Now that is a term that I came up with. Again,that is not official terminology, but justlet's think about it. So we have our HTML,right. So we have our article and everything.And then in each of these elements withoutemerge, whether that's heading four or whatever,I just have some kind of data. This at themoment just points to some specific image.This one just says buttermilk pancakes, butI have that data already in my items. So Iwould just need to come up with some kindof way where I can iterate over those items.And then I can just add some HTML, and thenplace this data in that HTML. Again, my terminologyis dress them up in HTML. But of course, thatis not official or anything like that. Now,the way it will work, as First of all, I willcollapse this, and we'll use our map method.And we'll assign it to some kind of variablebecause that wouldn't make sense. Since we'recreating new array with a map. We might aswell do that. So let now I purposely usinga lot and you'll see in a second why. Andagain, we need to come up with some kind ofname. I'm going to go with the Display menuhere. And then I'll use my menu array. Andlike I said, we'll use map method. Now theway map method works Here's just like withfilter, we could access each and every itemin the parameter, as long as it is a parameter.So in this case, I'm just gonna call thisitem. Now what's really cool that with map,we can modify our array. And just showcaselet's just start very simply by returningthe same item. So I'm just going to go hereitem. Now as you would want, you can alsoconsole log item, if you don't believe me,but you'll access each and every item. Andthen in here, I'll just console log and displayDisplay menu, like so. And then let's see.So notice I have all these items, I have nineof them. So for each and every iteration,I can see my item with all the IDS with allthe categories, prices, and all that. So allthe properties are there. And then in thebottom, of course, I have the same array.So in this case, I didn't do anything, I justlooked over it iterated, and then said, okay,just return the same item. Okay, that's aneasy part. Now, let's make it a little bitmore interesting. Where What if I would wantto access for example, I don't know titleproperty. But then what's really cool thatwith map, I can customize, or you can sayyou can modify the new data structure thatyou'll have to know, in order to make it alittle bit more interesting. Instead of returningthe item. Why don't we try this one out? Whydon't we say you know what, I'll return atemplate string. And remember, within templatestring, we could just write HTML. And thenI'm gonna say, Hello, hello, world. And thenwe'll close out the heading one. Now, whatdo you think is going to be in the Displaymenu? It's going to be nine items, correct?Because that is the total of my menu array.But what do you think are going to be devalued?So let's see. Let's save it. And I have abunch of HelloWorld. So I have hello world.Hello, world. So again, same amount of itemsthat I had in the menu. In this case, I modifiedwhat was my response? So now my response is,of course, hello, world. Okay, not as good.But what I'm really looking for is this guy,the title card. And I already know that whenI'm using the template string, what I cando, I can place a variable in there. And sinceI can access each and every item, we alreadysaw that in a console log. What do you thinkI can do over here can delete hello world,I can use the dollar sign. And I can accessmy variable. Now mine is my variable name.So this is my object, the item? What is theproperty for my title? Item, dot and thentitle. That's it. Now what do you see hereon the right hand side, I have heading onewith buttermilk pancakes, I have a second1/3 one. And again, all the way till the endof my array. And all the titles are unique.So a lot of them have been added mark so andthen the actual values are referencing exactlywhat I have my re don't believe me, you candouble check. And you'll see that the titlesare exactly the same as the values in my titleproperty. Okay, good. Now, well, remember,we were setting up the index HTML. And thiswas the whole point. This was why we wentthrough all the hassle to set up all the HTMLbecause I'm not going to be returning to headingone. I'm going to return everything that Ihave in my single item, just grab the wholearticle, head back to App j s. And then insteadof having one, copy and paste your article,so now you're returning the article. And nowlet's think about it, what do we need to do?So right now, of course, I'm returning thehard coded article. But we already saw witha heading one example, that of course, wecan make this dynamic, correct. So how dowe make this dynamic? We start accessing thevariables, we start accessing the propertiesin object. And we'll start with our image,of course. So instead of hard coding thismenu item, I will go with my dollar sign,of course, I'm accessing my variable. Andthen the property name is item. img. So that'swhere I have my image. As far as the class,I will keep the class of course, but thenas far as the alternative, I'm just goingto go with a title actually. So I am titlejust like I had in one than I think for whatdo you think I'll place here? Yes, you'recorrect. We'll look for that title. So thesame one, for realtor price. Well, the propertyname is price. So I'm going to go here, item,price. And then the last one is the text.Now for a text. The property name is description.So I'll delete my hardcore adoption. Thenagain, I'll use my variable here, and we'llgo with item and then description like so.We'll save it and now of course, I can seethat I'm Getting these items. And what doyou think is going to be our next step? Well,next, I would want to join them in one string.Why? Because I would want to place them inmy selection center. And I can do that byusing join method. So since this is an array,we're getting back the array, the Displaymenu, we have an option of running the joinmethod, which just joins it in one string.Now, let's see how it's gonna look like. I'mgoing to go here with this play menu. So sinceI'm using what course I can override it, andI'll just say, Alright, yeah, Display menuwill stay the same. But I'll run Display menujoin. And then we need to have here emptyquotation marks. Now there's multiple valuesthat you can add here. But the reason whywe're adding here empty parentheses, is becauseof then we won't have these annoying commasin between. So let's save it and you'll seethat we will have a one giant string. Nowif you want, add that, you'll see that inbetween them, you will have those commas.So if we find we have article here, and thennotice in between articles, you have thiscolumn. So what will happen, that will bethe item that will be displayed, and you don'twant that. So you for sure want those quotationmarks here, the empty ones. That way, youwon't have those commas in between those articles.So now we have that big, giant string. Andwhat do we do now? Now we just add it as ourdata. So the word will look like, we'll gowith section center. So remember, that wasour parent, of course, then we go with innerHTML. And then we just pass it here, we sayDisplay menu. Because this is the data thatwe're getting back, we looped over our array,we return new syrup, we actually added herea string with HTML syntax, we dynamicallypopulated that, at the very end, we joinedall of them together. And then we're justplacing it in the section Center, which isthe parent, then we're using inner HTML property.And we're just setting it equal to our Displaymenu. And you'll see that the moment you navigateto a bigger screen, Wallah, we have all theitems, and they reference exactly what wehave in the array. Again, this is going tobe your bread and butter, you will have somekind of items, we will have to iterate overitems, you will have to decide what you'dwant to return. So what kind of info as yousaw with heading one, we can return whateverwe would want. In our case, we had specificHTML, then we join everything together, andthen just placed it in the parent element.And then we use the innerHTML. And then justassign this to whatever we got back. Oncewe run join method on our array, that's goingto be something that you'll do very, veryoften, as you're working with JavaScript,we're at work, we're done with our initialsetup course, in order to set up filtering.If we wouldn't want to repeat ourselves, itwould be better if I would place all thisfunctionality in a function. And then as aparameter in a function, I'll pass in thearray. And again, it will make way more senseas we set up the filtering. At the moment,you would be like, Okay, why is this guy refactoringthe code again, again, in order to set upfiltering, it will just make sense if we setup this functionality in a function, becausethat way, it's going to be much more easier.We won't have to retype this. And our members,I don't know, display items, or Display menuitems, maybe that wouldn't be a nicer namefor my function. So I'm going to go here withfunction, then Display menu items, Mark. Sothat is my function. And then like I said,this item will be looking for the array. Sothis function will be looking for some kindof array. Now in this case, we'll still useour menu one. But since it is Brahma, I'mgoing to call this menu items. That's goingto be my parameter. And as an argument, yes,initially, we will still pass our menu. Butas we start filtering, you'll see why it'sso convenient for us to have it as a function.And now what I would want is just grab everythingthat we have within a function body, withina callback function, everything up to here,got it out. So now it's just going to be empty,copy and paste. But what I would like to changeright now is instead of iterating over themenu, there is of course, our array, I wouldwant to iterate over the array that will passin the function. So half your menu, itemsarray. And now of course, Sam od one stilleverything to work, I'll call my function.I'll call Display menu items function. Andlike I said, initially, yes, I'll still passin my menu array. So what happens is I havemy menu items array. That is, of course, myparameter. And as an argument, I'm passingin the menu, and you'll see that our functionalitywill still work. So everything will stillstay the same, the differences, now when we'llset up filtering is just going to be muchmore easier, because we will have our function.And then depending on situation, we will callour function. And we won't have to retypethis is just going to be a faster setup. Andas I said, I have been adding some referencesfor you. For example, if you check out basicdx dy, you'll see the previous code. So justin case, as you're factoring with me, andsomething doesn't work. Remember that in basictxt, you'll have access to the code you havein the beginning of the video. So that way,you can just make sure that you don't makesome kind of bug. Or if you make a bug, thenyou can find where is your actual error. Butthat should do it for this video, we now haveour functionality in the actual function,we're ready to start adding our filteringoptions to our project. Once we're going todisplay our items, once we have a refactorour code a bit where our functionality isin function. Now let's start working on filtering.And as always, we'll have to start with indexHTML. So where we add filter buttons commentwill add here a div with a class of btn. painter.And then within this container, for the timebeing, we'll place four buttons. Now, whydo we need four buttons, because we have fourcategories, we'll have category for all. Sothat's when we'll display all the items. Andthen we'll have for breakfast, lunch, as wellas the shifts. So we'll navigate back, andwe'll set up those four buttons. So I'm goingto go here with a button. But then I alsowant to of course, select that model. So inorder to do that, I'll have to add some kindof class. And the class, we're all of themwill be filter, bt and not the button. Andyou know what, I'll also add a type here,and I'm just gonna say button, and I'll justadd a text. So I'm gonna say all that's goingto be my first button. And of course, likeI said, I don't want to copy and paste, one,two, and three, now the class will stay thesame, we will target using the filter button.But I would want to change these values here.So the second one will be breakfast, breakfast,like so. The third one will be lunch. Andagain, they're just referencing the categoriesthat I have in their items. So for example,first one was breakfast, and I had lunch,and then I had shakes. So those are the threecategories that I'm using. And the last onewill be srecs. Let's save it, I have the buttons.Now, of course, I can click all day long,and nothing will happen. But we'll fix thatin the next video. Okay, so how do we setup the functionality so that when we clickon buttons, we display specific items, whetherthat is the ones that are for a breakfast,or lunch or shakes. So essentially, the itemsthat have the category of breakfast, lunch,or shirts, or we just display all the items.And you guessed that we would need to headback to App A j s. And I'll start by selectingmy filter buttons. Now for the time being,I'm going to close my menu, I don't thinkI need it. And first, our selected sectioncenter. And now I'm going to look for my buttons.So create a little bit more space. So const,then I'll name them filter btn. And now isequal to my document. query selector all sinceagain, I'll have a list. And then the classname is filter btn. Once I have selected mybuttons, then right after the window, theevent listener, I will just listen for theactual event on buttons. Of course, I'll iterateover them, but then I'll attach a event listenerfor each and every button. Now of course,you can place it here at the very end. It'sreally up to you, but I'll place it in between.So right after the first event listener, wherewe are just loading all our items. So let'ssay load items. And then I'll say filter,filter items. And then in here, I have mylist. I have my filter buttons. And now Iwant to iterate over it. So we already knowthat we have filter buttons we can run fromFor each, and then we have our callback function.We're referencing each and every button asa parameter. So I'm just gonna say here btn.And then for all four buttons, I would liketo add the event listener, I'll be listeningfor click event. And then this is going tobe interesting. Well, we will understand howthe data set properly works. So I have myfunction, I'll still look for my event object,beautiful. And then within the function body,I'll console log, something really cool. Andthat will be our data set. So I'm going togo with console log. And then I'm lookingfor event, rental object, then current target.So what is going to be the current target,that is, of course going to be our button,the one that we're clicking on, and then I'lllook for a property that we haven't coveredyet. And that is a data set. Now, please keepin mind data set property is not unique toa buttons, but we're just using in this case,so you can have this, there's all sorts, ofcourse, all the other elements as well. Now,the way data set property works is that onthe element, we can add the attribute witha data prefix. So for example, for my buttonthat has the text, Vol. I could right heredata. So that is my prefix, then we have thehyphen, and then whatever name we would want.So if you want to name this category, youcan name this category. Since our want tohave a short name, I will go with ID. Butagain, that is your preference. You can nameit whatever you'd want. In my case, I'm goingto call this ID. But what's important is tohave this data and then hyphen in front. Soonce you have this, then you'll be able toaccess the new JavaScript, using data setproperty is at the moment, you'll see thatwe'll have nothing there. So go with dataID, and then our need to set it up to somekind of value. Now, since I'll be using mycategories, I need to reference also. So inthis case, I'm going to say all. Now thisis of course, just because I have the textfor my button as well. But then for the restof them for rest of the buttons, I'll haveto reference to that specific category. Nowjust to showcase what we'll get back. If youclick on All button. Notice, you get thisobject and then within the object, you havethis ID. So like I said, if you'll call this,I don't know Banana, banana, you'll see inthe object also banana, once you click, again,that is the property name. That's why I keepsaying that. This is up to you, however youwant to call it in my case, I just call thisID, what's important is to have the data andthen hyphen. And then in JavaScript, you canaccess this specific value using data setproperty, data set property will return thatobject. And then you can already probablyguess that if you would want to be a bit morespecific, you would go with a data set. Sothat references the object within the propertyname is ID. And that way, once I click Checkit out, now I have undefined. Why am I undefinedbecause of course, I didn't save it. And itwas previously banana. So let me say a check.And I get back this value of all, of course,just references, whatever I have here as avalue. So knowing this, I can just copy andadd to each and every button. So we'll haveone for the breakfast. I'll have one for thelunch. And you know, in this case, I'll zoomout because thing is going to be easier foryou to see. And then last one will be shakes.And I just need to change as well. Like Isaid, I'll use them to access my category.So it needs to match, not what you have here.I mean, it would be awesome. If the text herealso would reference the category, but it'snot gonna break anything. But they for sureneeds to match the categories that we havehere within the menu. If they won't match,then again, functionality will not work. Solet me zoom back in. And then I'll changeone by one. So my second one, and I'll callthis breakfast, breakfast, hopefully the nameis exactly the same. Third one, we'll havelunch. And then third one, we'll have shakes.Okay, awesome. And now in the objects, ofcourse, I can close my menu. And then as I'mgoing to be clicking on a button, you'll noticethat awesome getting those IDs, okay, beautiful.Now, well, once I have that ID, I will assignit to some kind of variable. So I'm goingto go here const, and I'll call this category.And of course that will be equal to my currenttarget data set, and then Id great. And nowI want to use a filter method. So here's whatI'll do. Remember, we have our function. Wehave Display menu items. Now what is thisfunction looking for? It is looking forwardto your right. And I already know that I canuse a filter array, where I can filter outwhat items are going to be left in the newarray. So I could filter out array, dependingon what is the value for my category. So letme format this properly. And now I'll createa new array. So I'm going to say const. Menucategory, and then that will be equal to mymenu. So my main array, the one that I haveup here, and then I'll use filter method.Again, we have the callback function, eachand every item is represented in a parameter.So I'm going to call this a menu item. Andif I won't set up any kind of condition, ofcourse, you'll see that our returning allthe items so far right here, return menu item,so there's no condition, if you'd want toconsole log in the menu category, menu category,you'll see that you'll get all your items.So once you click on a button, you have alldeny items. So of course, we need to makethings a bit more interesting, where now Iwould want to return only if the menu itemhas the category that is equal to whateverI have in here. As a side note, if you'd wantto console log even more, so menu item, andthen category, you'll see that for each andevery item, of course you have this category.So now the job is very simple. I just wantto return if the item matches whatever I havein a category. So what is going to be in thecategory. That is of course going to be thedata ID that I placed there in a button, whichI'll access using data set. And then whenI access it, I'll assign it to category. Andthen I'll say okay, in the menu item categorymatches to the category variable, beautifulreturn on item. If not, then I don't wantit. So console log, let's say that one foryour reference. And like I said, we'll setup our if so menu, item, category Eve thatmatches my variable value, then of course,I would want to return menu item. And I ofcourse, already that text. So I'll just sayright here. And then instead of just consolelogging, we can right away display. And weneed to be careful, though, because we'lluse also all correct. My first button. Thisall that was the value for the ID. Now ifI'll use my filter, do you think I'll getsomething back if I use all? And the answeris no. Because of course there is no categorythere with a valuable, they either have lunchor breakfast or shake. So we need to set upanother statement. In this case. And again,I couldn't just leave that for your reference,just in case you ever want to. But we'll gowith if category, if that is the case, ifthe category is equal to all. So that wouldbe all button. And I'll need to sign thisto a string, then, or want to call my Displaymenu items. So that's going to be my function.So that's why we were setting up the functionbecause I did not want to repeat this functionality.I was the whole point of why we refactor ourcode. So now if the categories all then Iwill call my Display menu items with my menuarray. This is important menu array. That'sthe one that we're using. However, if thecategory is something else, so if it is breakfast,lunch, or shakes, then we'll run the Displaymenu items. That is of course my function.And then since the function is looking forthe array, what do you think is my new category,that is my new array. So instead of menu,or go with menu category will serve it willnavigate to a bigger screen. And we'll seethat once you press on all course you willdisplay all of them. And once you read inbreakfast, you'll have breakfast lunch. Andthen again, the biggest thing over here isthe data set. So you have this data, and thenhyphen, then whatever value you want, or youremember that will show up in the data setobject. And you just need to come up withsome kind of values here. So in our case,it was all breakfast, lunch and checks. Andthen in the objects, we use current target.But of course, we can assign this data setto other elements as well if we would want.So data set property, then we're looking morespecifically to ID, because that's how I namedit, Senator category, used filter, filterout the items that have the same exact matchingcategory. And then at the end, we'll justcheck if the category resolved and I wouldwant to display all the items if the categorywas there. So whether it's breakfast, lunchor shakes, then we'll use our filtered outarray, and then we just call Display menuitems. Then pass in the array, great workon setting up our items dynamically, as wellas setting up our filtering options. However,there is a tiny issue. And that issue is falling.We're at the moment, our setup is a bit naive.Now, what do I mean by that? Well, we hardcoded our buttons correct. And then each buttonwas referencing the category. But then whathappens if these various changes for the categories?What do we do then? Do we run to index HTMLeach and every time and then change this value.Or it would make sense if we would set thisup dynamically. And I'll give you an example.For example, in the address, remember, wehave a menu. And then what if I would addone more item, and this is going to be a steakdinner. So what I'll do, I'll copy and paste,I'll change the ID. Again, not that we'lluse it, but it's just a little bit realistic.As far as the title, I'll go with steak dinner,now the category will change. So add a newcategory, and that will be dinner. Now, asfar as the price, usually steak is quite expensive.So I'm going to go with 3999. And for themajority have the image with a value of 10.And description, of course can stay whateverit is. Now I'll navigate back to my biggerbrowser window. And I'll see that, of course,I have the steak dinner, because items arebeing added dynamically when the button isnot there. So of course, as I'm filtering,the only way I can see my steak dinner isif I click on all matters, not the best setup.Because again, if we change any of these names,for example, in our data, then of course,our buttons are not going to match. And thisis again, something that we need to rememberthat normally we'll do this with some kindof external API, where at the moment, of course,I know all my categories. So that's why it'sso easy for me to but the moment when someonewill start changing the data, we need to makesure that our data is dynamic, where our checkall the categories. And then depending onthose categories, I'll filter those items.So for example, once I added a new category,it should show up over here. And then onceI click, then I'll display my steak dinner.And we'll do that in a multiple steps, don'tworry, we will not do that right away. AndI'll collapse the menu steps will be fallen.So we'll have to get only the unique categories.And I know this is going to be the hardestpart, because we'll have to do a little bitof JavaScript magic in there. And then oncewe get our unique categories, and of course,I'll talk in great detail. Once we get there,then we would want to iterate over those categories,and return buttons. So still use our HTML,or we'll do it like we did previously withour dynamic item setup. But then we incorporateJavaScript. And at the very end, we just needto make sure that once we actually set upthe buttons, only, then we select them. Andagain, this is something that I'll cover whereonce we add our buttons dynamically, thiswill not work, we won't be able to accessthem, we'll have to move this code in a differentplace. Like I said, we'll do this step bystep. So don't worry. I'll start by simplycommenting out the buttons in the index HTML.So right now we have Carthoris all our items.So I would want to comment them out. But don'tdelete them. Because similarly, like we have40 items, we will grab this code, since Idon't want to write it from scratch. And asa side note, who can also comment on the article,because we already have the code in JavaScript.So comment this out. Once the index HTML isdone. As you can see, we don't have the buttons.So we'll have to dynamically and we'll startdoing that in our app j s. Let's navigateto App j s. And then I'm going to look formy event listener, the DOM content loadedone. And then right after I display the items,I'll start setting up the functionality. AsI sign out at the end, we will set up a function,same how we have Display menu items, we'llhave one for the buttons. And then of course,we'll just copy and paste everything withinthat function, and then just invoke the function.But since I don't want to confuse you rightoff the bat, at the moment, I'll just writemy code here. And then we'll refactor ourapplication a bit. I also want to let youknow that since we'll be adding some changesto our JavaScript. We already have the previouscode over here. So if you check out a naivetxt, you'll find all the code that we haveat this point. So if you make some kind ofbug or something like that, you can alwaysreference this file, which is exactly whatwe have covered. Only since we'll be addingsome changes, starting with this video. LikeI said, the first thing that I would wantis get only unique categories. And it willbe the hardest part. And we'll just startvery simply by running a map method. So whatI would want is display the categories. Sowe're going to go with const, then categories,and that will be equal to my menu. And thenI'll run my method. Because this is what Iwould want to do, I would want to iterateover my menu array, and then return only thecategories. Remember, each and every itemhas that property of categories. So I'd wantto store this in the categories array, sinceI know that map returns a new array. So Ihave my callback function, I'll have my item,I'm not going to be very creative with myparameter. And I'm just going to say thatas we're iterating over my array, I wouldlike to return item, and category. And asalways, I do prefer console logging everything,just so we can see that we're all on the samepage. And if we'll check the console, you'llsee that I have array of 10 items. Now whydo I have 10 items, because I have 10 categories.So everything works really well. But likeI said, I would want to get unique ones, Mattis very important. Because otherwise he willdisplay my buttons right now e-file actuallyiterate over these categories and return mybuttons. When I'll have 10 buttons, and Idon't want them buttons. I only want buttonsfor unique categories. So how do we set thisone up? Well, instead of map we'll have touse urges. And as a side note, with arrivalof air six, there is a easier way how we cando that. But again, since we haven't coveredear six yet, we'll use orange juice. And Ialso think that it's very useful that we'llpractice with the juice, because reduce isa very, very powerful method. And the sooneryou'll get comfortable with it, the betteris going to be now I'm not going to commentout this code. In fact, I will delete it,since there's already quite a few commentshere. And we'll just around the herders, soI'll have my reduce method. And then the sameas for the map and filter, we need to passin a callback function, or the differencewith reduce is that we have two parametersin our callback function. And also, we needto come up with some kind of initial value.And most likely, if you have been lookingat examples, you probably saw something likethis where they were returning initial value,because most examples online are how you usereduce, to sum up some kind of values. Butreduce can do way, way more than that. Inour case, instead of returning some kind ofnumber, we will return our array. And we'llhave one item in there. And the value willbe a string of all. So why am I placing hereto string of all because I also have thisbutton that references all the items. Thatis of course not my category. So that's somethingthat I would want to add manually. That'swhy I'm returning an array. And then withinthat array, I have this string of all. Andonce I have this syrup, then I have two parametersin my orders. Now they are referenced as accumulatorand current. But as always, it is a primer,so you can call it whatever you'd want. Soin my case, I'll call this values. So thatreferences this array that I'm returning,and then actual item references each and everyitem because again, with the reduce, we'restill iterating over Alright, so we'll stilliterate over each item in my menu array. SinceI'm running menu and reduce. And here's mysetup, we always always when we use reduce,need to return the values. So that's goingto be our total. So on each and every iteration,we need to return the values Otherwise, thisfunctionality will not work. And here's whatI'll do, if you'd want again, you can consolelog, just to see that you'll get the item.But since we have console log quite a fewtimes, I'll skip that. But I would want tocheck whether the item category. So that isthe property with the value is already inmy array. So I can write here The if statement.And I can say not. So values. So that of courseis my array. And then I can use includes method.That is of course again, the array method,and then I'm just looking for item category.And if that is the case, then I would wantto actually add an item. So I'm gonna sayvalues, push and don't worry once we writeout the code I'll cover in greater detailwhat we're doing but item category, not saveit. So here's what is happening. First ofall, we can see in a console that I'm gettingall my unique categories. I have all I havebreakfast, lunch shakes and dinner and asyou can see I'm not repeating them. But whatis happening here in the function body iswhere I have the if statement. And I'm saying,If values. So that is the array that I'm returning,does not, does not, that's what I have here,the exclamation mark, include the item category,which of course, is property. Each of theitems that I'm iterating over land values,again, my array, add, please that category.If that is not the case, if, for example,in the next iteration, already, that itemcategory is already in my array, which ofcourse is going to be case, for example, forbreakfast, lunch tricks and dinner, then justskip, just return the array. So that's howwe can get our unique categories using reduce,again, with ESX, there is a shorter way, wecan write a one liner, but I thought thiswould be a great practice for us to use areduce, where again, we iterate all the items,we have two parameters, in this case, onefor total, and one for each item, we are returningarray with already some kind of initial value.Because we need to have this all categories,well, I'm not, I'm just checking. If the itemis already Nuray, then just return the arrayand keep on moving. If it's not an array,that's what I'm saying here if and not commercial,van, please re add that specific value thatyou have in the item category. Like I previouslymentioned, getting these unique categorieswas definitely the hardest part. And I canpromise that starting from this point, it'sgoing to be smooth sailing, since we'll berepeating a lot of the same stuff that wealready covered. And we'll start by actuallyadding these categories as our buttons. Andit's going to be very similar to what we didwith a menu items where again, remember, wehad some kind of array. And then we just iteratedover the array and grabbed HTML, and dynamicallyplug the routers. And we just need to comeup with some kind of name for whatever wewill be returning. So in this case, I willdelete my console log. And I'll just comeup with some kind of variable name. And thatwill be category buttons, or category btn.So buttons, and I'll use my categories array,I'll use my map method, we have our callbackfunction. And in this case, I'll referenceeach and every item as a category. And theninstead of returning some random string, Iwould want to wrap my value my category valuein the HTML. And of course, since on one Returnbutton, I'll just use one of the HTML forthe button. So grab one of the buttons, itdoesn't really matter which one because we'llreplace these values and just added in myJavaScript. So instead of I'm sorry, likethis, I need to set up of course, the templatestring, copy and paste. And now I'm returningthe button. And what am I looking for as faras the value? Well, since each and every itemrepresents the category, wouldn't make sensethat if we dynamically place it, where wehave the date ID, as well as the value. Solet's try it out. Instead of breakfast, hardcoded breakfast, I'm going to go with my category.And then I'm going to do the same thing fora value here. So I have here, again, the dollarsign, and then we'll have the category. Nowof course, once I have set up my buttons,that is only the start, I would need to setthis up as a string, because we still haveeach and every value in our array. And remember,we need to use join method for that. But thenwe have multiple ways, we can either do itthe wrong way where we have Display menu,and then I just reassign it to Display menujoin. But in this case, I purposely use cons.So we cannot do it this way. So we cannotreassign. What we can do is by adding thejoin here, so your journal at the end. Soessentially, I will just change my methodsare actually saved. And you'll see that again,in category button, we'll have our string.So in this case, I will console log categorybuttons here, and you'll see that we'll haveour giant awesome string that contains allour buttons. And now of course, I would wantto target my container. So my button container,and I want to add a class of btn containerand just using our HTML to add my string.So then I'll have my dynamic buttons. So goback where I have the selections on we'regonna go right off their sexual containerbecause assignment we'll have to move thisone. So I'm skipping a little bit ahead, butthey We'll be sitting somewhere else the filterbuttons brought in here, I would like to targetlike I said, my container, the class was btncontainer. So go with container, or will bemy value. And then I'm using document, queryselector. And then let me just double checkthe class. There's button container becauseI tend to make some silly mistakes. So container.And once I have selected the container, Now,of course, the same way how we place the items,all using our HTML to place my buttons. Soright after I've set up my buttons, I'll usemy container, since we just selected it, ofcourse. And then like I said, the propertyname will be innerHTML is equal to my categorybuttons. We'll save it. And voila, now wehave our awesome buttons. Of course, at themoment, as I'm clicking, notice, nothing ishappening. Now why nothing is happening? Well,let's think about it. So I added the buttons,but then manually selecting the buttons overhere. So what do you think is happening? Dowe get any buttons when we make the selectionwith filter buttons, because the differenceright now is that we're adding these buttonsdynamically. It's not like previously, wherewe added in the HTML. So when the JavaScriptloaded, it was like, Okay, get me the buttons.And here we go. These are the buttons. Nowwhat happens since we're adding them dynamically,when JavaScript tries to get those buttons,we'll get back undefined. So I can just consolelog in for your reference. So filter buttons,and you'll see that even though these buttonsstill have the filter button class, becausewe're adding them dynamically, we have noaccess to it, our node list is empty. So there'sno way for us to access them, and then addthat filter medians. Now how we can fix that?Well, the fix is simple, where we will needto select these models, once they have beenadded to our DOM. So once we dynamically addthem to our DOM, then we can target them byselecting them. And adding also these eventlistener for each and every button. So weiterate over the buttons, and then we addthe event listener. So what we need to dois just move this filter buttons, and I'lldo it my console log. And let me move thisline down. Let's keep on moving, keep on moving.And then right after we have added them inthe container, then I will select them. Andnow of course we'll have access to them. Andof course, we can also iterate over them.And we're adding this event listener. So letme keep on scrolling, I'll cut everythingout. Like I said, For the time being I'llplace everything within my event, the DOMcontent loaded, but then we'll set up of course,a function because it just makes a littlemore sense. So let me say just so I can showyou that functionality will work. So as youcan see, now I'm selecting the items, andI'm getting the unique items. The reason whythis works, because now I'm selecting thebuttons, after we have added them dynamicallyto our DOM, not before, not right away runningand selecting because they're not in the HTML,they have been added dynamically. That's whywe can only access them once actually, theyhave been added to the DOM. And if you wantto keep on practicing, remember, you couldalso use a more specific setup where we'relooking for the container. Now again, thatis a side note. In this case, it doesn't reallychange anything. But just for practice. Remember,we didn't have to use always document, wecan also use a more specific selection, ifwe have selected that element already. AndI guess the last thing that I would want isto set up a function display. And I guessI'll call this I don't know, Display menubuttons. And I'll just invoke that functionin my event listener because I think the codeis going to be a little bit cleaner. So gowith function. Around display, not menu itemswill have buttons, so have menu modules. Nowthis function will not pass any kind of parameters.So it's not going to be accepting any kindof arguments. But what I would want is everythingstarting from the categories all the way tillthe end. And I'm just guess I just do needto be careful. Because I probably don't wantto delete some unnecessary parentheses orthe actual curly braces. So let's see, let'ssay Eric, I don't have any errors. Awesome.And now I just need to copy and paste whereI have my menu buttons. So of course onceI save it, now I should see my buttons, butI do need to invoke that function. So howThe Display menu buttons, again, we're stilllooking for the categories, we're still addingHTML to our categories. That's how we cansee the buttons. And at the very end, we'readding categories to our HTML. And only then,and I know I said this 20,000 times, but itis very, very important. It will save youa lot of time debugging, where you know thatif you add something dynamically, you canonly access it once it has been added alreadyto the DOM, not before, not like Normally,if you already have something in the HTML.And then of course, same I'll do we'll justiterate over them, and then check what isthe category and then only return the itemsthat match that category. And like I said,the last thing that I would want is just torun my function. So Display menu, buttons.And in this case, we're not passing any kindof argument. And we're good to go. And nowwe have our categories. So if I head backto my project, I can see that I have breakfastand lunch shakes, as well as dinner. And ifI want to see all of them, I just click onall again, very, very important project, becauseit will be your bread and butter. Hopefullyyou were able to follow along. And I hopeto see you in a next project. Awesome work.Next we have the video project, where we'lladd video in the HTML. But then since we'llhave a white text, we'll have to add somekind of darker overlay. So once we add theoverlay will not be able to access the controlsthe video controls. And that's why we'll haveto use the JavaScript to add the play andpause. And also during this project, we'lltake a look at how we can add a preloader.Actually, in order to show you clear on navigatenetwork on make sure that I have a slowerspeed. And you'll see that while the videois loading will have a preloader. As a sidenote, it's not unique to a video. So effectively,you can add the preload to any project. Onceyou'll know how. The only reason why I addedto the video because videos are usually largeassets. So it just made sense to add the preloaderto this particular project. And just in caseanyone is wondering, no, I have no idea whatis this guy's problem, why he thinks it'sokay to run barefoot in the desert. Hopefullyhe's okay. And with that out of the way, we'regonna start working on our project. Okay,and we'll kick things off by setting up ourHTML. So navigate to a set of folder, I'mlooking for index HTML, I might as well keepthe heading one with the text and video project,because that is the same heading one withthe same text that we'll use later on. Andin here, I'll just place a comment for theheader, because eventually there's also goingto be a preloader. So go with my header element.And within the header element, I'll placemy video element. So go with video element,instead of placing the source in the attributes,I'm just gonna go for the source tag. Andthen I'll have my source. And as far as thevideo is obviously available in the route.So if you look for the files, you'll see avideo mp4. Now we do need to add here a Typeand Type will be video forward slash pampyfor Let's save it, and then I would want toadd few classes here or more specificallya few attributes and one class. So I'll gowith class. The class name will be video container,just because I would want to add a littlebit of CSS. And also, like I said, we'll havefew attributes here. So I'm going to go withcontrols, muted. autoplay loop, that shoulddo it. So once I save it, you'll notice thatwe'll have access to controls. So the usercan control the video, video will be mutedby default. And the moment it loads, it willstart playing. That's where we'll have theautoplay and at the very end we have the loop,which just means that once the video is done,we'll start playing it from the start again,I can navigate to our bigger screen. Thisis what we should see. Now I wouldn't wantto place my heading one with video projectbecause at the moment text is here in thebottom. So just make sure to place the headingone after the video. So let me move it up.Let's save it and we should see our headingone. Now at the moment we don't see it. Andthe reason for that is because we will needto navigate to a styles and where you seethe video container, we will need to add somekind of xenex because at the moment if I'mplacing my text right now, like so it is notgoing to work. So I need to navigate the stylesand then for the video container. So that'sthe class that we added to a video elementwill add a z index of negative two So nowof course, we can see our text. So that shouldbe our basic setup, we have the video, awesome.And also we have our heading one, right smackin the middle. Now once we add our headingone, everything works really well. But thereis an issue, because my video is really bright.And also my heading color, the white coloris bright. So it's somewhat hard to see myheading one. And you can simply say, okay,you can just change the color. Okay, I could,but what if I don't want to? What if I wouldwant my text to be white. And instead, I wouldwant to place some kind of overlay to my image.So that way, my background would be darker.And I could see much clearer, what is my text.And this is exactly what we'll do right now.So I'll navigate back to my project. And I'lllook for the end of my seriousness. And hereyou'll see a style that is commented out.And essentially what it does here just asan overlay to our image. So now as I'm lookingat my image, you'll see a nice black background.So that way, I can see my text much clearer.Now what is happening though, as we're addingour CSS as we're adding our overlay, as wewere adding our z index, at the moment, wecannot access the controls anymore. So essentially,you might as well can just remove them, becausethere's no way for the user to access thosecontrols, and basically control the video.So that's why I removed the controls attributealtogether. And what I would want is to setup a button that will allow me to controlthe video. So if I will press pause, and ofcourse, we'll pause the video, you will pressplay. And of course we'll play the video.And we'll do that by just using the JavaScript.Now we still have to start with HTML. So I'llhead back to my index HTML. And then rightafter the heading one, I'll place my buttonhere or a comment or video switch. And we'llgo with a button. Now I do want to add a class,and the class will be switch button. So classswitch btn. And then in here, we'll have threethings, I'm going to add a span with textof play. And then I'm going to copy and paste.So one to the second one, and I'll have atext of pause. And the third one, I'm goingto leave it empty. But I'll add here a class,and the class will be switch will save it,we have the button now at the moment, of coursenothing is happening, I can click all daylong, and nothing will change. But we willset that up in a next video. And we alreadyknow that in order to add some kind of functionality,we would need to navigate to App js. At themoment we have there some comments, don'tworry, I will cover them a little bit later.But I would want to start by selecting twothings. I'll do want to select my button,and also would want to select my video container.So in the index HTML, the button has a classof switch btn. And the video one has the videocontainer class. So those are a few thingsthat I want to select in order to set up mybutton. And I'm going to go with variablebtn. Then I'll use document query selector.Again, the class name was switch btn mightas well copy and paste. And then in here,I'll say video. And the class that I'm lookingfor is video hyphen container. Once I havethis set up when our event listener for mybutton. So btn event listener mambi. listeningfor click events, we have our callback function.And then within a callback function, I wouldwant to check whether the button has the classof slide. Now why am I checking for that class.So first of all, let me find the class classname was slide. And the way the button isset up, I have my button, I have my two spans.And then that third span is this blue containerthat is going to be moving to the left orto the right. And the way I'll move it isusing the slide class. So for example, ifthe slide class will be added to a button,then my container will move to the right.But then if the class will not be on a button,then the container will be here on the lefthand side. And again, I'm just moving it usingCSS. And that's why we'll head back you haveJess and like I said, we'll check if the buttonhas the class of slide and I'll go with myNOT operator. So say btn class list. Again,I'm checking for all the classes. And I'msaying whether my button contains the slideclass. But then of course, since I have myNOT operator, what I'm saying is, if the buttondoes not, does not have the slide class, thenof course, I would want to hide it. So gowith btn, class list, class list, and thenwe'll go with add function, and nine yearold pass slide. So if the button does nothave the slide class, then we'll add or willalso have an option for us. And in here, I'mgoing to go with btn class list and non remove.Now why am I adding this functionality inthis case, because in my error statement,I'm checking whether the button does not havethe slide class. If it doesn't, then I'm addingor in this case, else, of course, means thatit already has the class or slide. That'swhy we are removing our right remove slideclass. And at the moment, we'll be able toclick on a button, and you'll see our containermoves left and right. However, we're stillnot controlling the actual video. And in orderto control the video, we'll have to accessour variable that is going to be our videovariable. And the method we're looking foris pause. And of course, I do need to invokeit here as well. And then we also have a methodof play. So go with video, and play. So let'sgo what is happening. Again, I'm selectingmy button, adding a event listener will clickevent. And then I'm just checking. If thebutton does not have the slide class, thenof course, I would want to pause it Why? Becauseif you notice, this is my option, I have myspan with a text of pause. So once I'll clickon my button, you'll notice how my containerwill move to the right hand side. And I'llalso pause my video. So that's the methodname. If you want to pause the video, youhave a pause method. And then if you'd wantto play the video, then you have the playmethod. Now if I click on my button, noticemy container moves to the right. So that'swhy I'm covering right now the pause option,and I also paused my video. Now if I wantto play the button, then I just need to clickon my button. And of course, I'll be ableto play my video. That's the setup, I canclick on my button, notice how I'm pausingand playing the video. And I'm doing thatagain by checking the class. If the classis there, then I would want to remove it.If it's not there, then I would want to addthe reason why I did not use the toggle, becauseI also wanted to add a video functionality.So I wanted to add these two methods, onefor pausing the video. And the second onefor playing the video. Once we have our videocontrols in place, next, I would want to addsome kind of preloader. So while the videoloads will display a nice looking GIF, andwe'll have to start with HTML. So head backto my index HTML. And above the header, I'lladd my preloader. As a side note, since we'reusing position fixed for our preloader, technically,you can place it anywhere in your HTML. Butin my case, I'll just place it at the start.So we'll have here pre loader, that is goingto be my comment, man, it's just going tobe a div with a class of pre loader. And thenwithin this div, I'll place my image. Nowthe image is located again with the rest ofthe files. So you will find here a preloader.gif, get that file. As far as alternative,you can just say pre loader. And once we haveset up the pre loader, I can save it and you'llsee our pre order. Again, like I said, we'reusing position fix product. That's why we'llhave to add some JavaScript in order to hidethe pre order. Now since we have covered thisquite a few times, I'm not going to show youthe manual setup. And we'll directly headto App j s. And in here, you'll have two comments,you'll have one for DOM content loaded andthe second one for the load event. Becausewhat will happen is we will hide the preloaderonce the load event fires. So remember, previously,we used a window and we add an event listenerfor DOM content loaded. So once the page loads,then we did something we have some kind ofcallback function. And of course in therewe'll place the functionality. So in thiscase, we'll do exactly the same or we'll usea loader, not a DOM content loaded, and thedifference would be the poor Dom on the loaded.It wires were an initial HTML document hasbeen completely loaded and parsed withoutwaiting for style sheets, images, sub frames,to finish Loading, heard the load event isfired when the whole page has loaded, includingall dependent resources such as style sheets,and images. So that's why we'll use a loadevent. So once everything loads, then I wouldwant to hide my preloader. As always, we'lljust do it simply by adding the class. SoI'll look where my pre loader, where is mypre loader, pre loader, and you'll see thatit has position fixed, like I said, and thevisibility is, by default visible, the nextnine or 99. But then we'll do the oppositeof what we have been doing in a previous project,where by default, we show the pre order, andthen only once the whole page loads, thenwe'll add our class of hide pre loader, effectively,our pre roll or will disappear. So let's navigateback to App j s. And then we can do it rightafter we have set up our event listener forthe button. First, I'll target my preloader.Here a comment pre loader. And I'll go withconst, pre loader, variable and document queryselector. Again, I'm looking for the preloadacross pre loader class. And I would wantto listen for the load event on the window.So I'll go with window, then add event listener,and I'll be listening for a load event. Andlike I said, the same thing, we have our callbackfunction. And what I would want to do in thecallback function, simply target my preloaderand just add that class of hide preloader.So I would want to hide the preloader oncethe page loads completely, so go with my preloader, event class list. And then we'll justadd a hide pre loader. Let's save it and you'llsee that the moment our page loads, then ofcourse, we'll hire the pre loader, and thenthe video will be displayed. And in orderto make things a little bit more interesting,I'll head back to my bigger screen, I'll openup the dev tools. And in here, I'll slow downmy network speed. So I'll make this a littlebit bigger. And look for slow 3g, just sowe can see our preloader will refresh. Andyou'll see that while our page is loadingwill nicely display our pre order. But thenthe moment our page load is complete, thenof course, the pre order is gone. And we haveour awesome video. I should do it for thisproject. Hopefully you enjoyed. And hopefullyI'll see you in the next project. Alright,and next we have the scroll project. And beforewe take a look at the actual project, I justwant to warn you that this project will bea little bit tedious. So there's going tobe few gotchas. So I would suggest payingattention as you're coding along. Now frommy part, I will split up everything in smallchunks, so we're not going to jam everythingin one video. But from your port, I wouldsuggest, if you don't understand something,rewatch the video, or if that doesn't helpthen utilize the external resources. So forexample, if you don't understand the propertythat I'm talking about, just search for theproperty yourself, take a look what it does,and then try to understand how to implementin our project. The main idea about this projectis to see how we're going to work with a scrollevent. So for example, as we start scrolling,notice how to dynamically add the class tonav bar. So previously, our navbar was static.Among the moment, we start scrolling, andthe moment we pass some certain pixel size,then of course, we'll have our navbar, whichwill be fixed. So we'll take a look at that.Then we'll also set up smooth scroll. So onceI click notice how we scroll smoothly to thatparticular section, whether that is aboutmoderniser services, or whether that is goingto be now also as a side note, there's goingto be more HTML than typical in our project,because I wanted to make it a more realisticscenario where we have more stuff in our project.Now as you can see, I didn't add any itemsin the actual sections. But I wanted to showcasethat of course, your project normally wouldhave more sections, then we'll also set upa date. So for example here in the footer,you can see that we have the year. Now wewill not hard code this year, we'll take alook at how we can use JavaScript in orderto set that date dynamically. And we willalso set up a back to top button. So oncewe click notice how we're nicely scroll backto the top and then as we start scrollingonly once we reach certain pixel size again,very We have our button. So it will not gopast that pixel size, then we won't see thebutton. But then as we start scrolling notice,again, at certain pixel size, we will haveour button. Now, there's also going to betwo setups, because on a small screen, we'lltake a look at how we can set up the lengthhold, this is going to be a dynamic setup.And since I would want to show you with actualexample, you'll see once we start workingon because remember, previously, we kind ofalready did this kind of project where wehad a toggle port number, however, this isgoing to be a little bit different, whereit's going to be dynamically reading, whatis the size of the number. And again, it'sjust gonna make more sense, once we get tothat actual part. And then for example, ifwe scroll to services, again, we navigatenicely to the services. And the reason whythe project is going to be a bit tedious isbecause we have multiple setups, we have oneset up for the big screen, we have one setup if the number is fixed or not. And thenwe also have a setup for a small screen. Soagain, just be patient, try to follow alongwithout falling asleep. And I have no doubtthat together we will complete the project.Like I mentioned in the previous project,there's going to be more HTML than typicalin this project, especially the first videoI would want to spend on setting up our HTML.Now since it's not our first project, I feelquite confident that we can just add all theHTML first, and then one by one, we can startadding functionality in our app js. Now startby getting rid of this heading one, and insteadwe'll place your error. So we'll have herea header comment. And then of course, a headerelement. Now close the sidebar just to havemore real estate in here. And as far as thead, I'm gonna go with home. And don't worry,of course, I will cover why we'll use quitea few IDs in this project. Just wait. Andwe'll get there in no time. And then I wouldwant out here a navbar. And then as far asthe nav will have a nav element. And thenI'm going to add again, the ID. And the IDin this case will be nav. Now once I havemy ID, awesome, then I would want to placea div with the class of nav center. Now withinthe nav center class, there's going to bea hair. My hair is my logo, as well as thetoggle button. That's what we'll place inthere. So let's add comment header here. Andit's going to be a div with a class of navheader, some header. And then within thisdiv, like I said image, and the value forthe image is logo, SVG. And we'll just typelogo as far as the alternative. And then let'salso add here class. So for the image, we'lladd a class of logo. And also side by side,we will set up right away our button. So rightwhere I have the image. After that, I'll havemy button. And we'll have a class of nav,toggle, nav hyphen toggle. And here we'llplace a Font Awesome icon. So I FA s and fa,and then hyphen, wash. So now of course, we'resetting up our toggle icon. Good. And rightafter my header div, I would want to placemy links. Now the difference is going to bethat in the index HTML, we will have a containerfor the links. So please make sure that youhave them because this is going to be somethingdifferent than a previous project. And ofcourse, I will explain why we're adding this.So we'll have a div with a class of linkscontainer. And then within this links container,we will place our unordered list. Now sinceI don't want you to waste your time on typingon the HTML, if you had to use HTML, you'llfind the on our list that I'd want to addto my index HTML. So right within links container,copy and paste, and you have here on our listwith a class of links, and then each and everyitem will be of course lists that are in there,we'll have our link. And the difference isgoing to be that it's not going to navigateto a page is going to navigate around thepage. And then for all of them will have thisclass of scroll. So it's important that youdon't delete anything here. I'm not sure doit forward and more. Then right after NAB,but still within the header. Again, the headeris extremely important. We'll have our banner.So I'm going to go here banner, and we'llhave a div with a class of banner. And we'llhave another container. So just a container,so not a lynx container, like we had before.Just a simple container. on in here. Let'swrite anyone with a text of scroll or object.And we'll have some kind of paragraph with,I don't know, 20 words or something like that.So Lorem 20, I have my paragraph. And thenI would want to set up a link that will alsoscroll around our project. And as a side note,as you can see, my typing is just excellent.So this, of course, is going to be scrollproject. And the reason why I'm setting thislink, because I want to showcase that you'renot limited to set up a smooth scroll onlyin your nav. So for example, here, if I clicknotice, again, we will smooth scroll to thatparticular section. However, I can also addhere the same link that I'm adding here number,as long as I'm adding my scroll link class.And then of course, I can also navigate todoors. So that was the whole idea behind thisone. So right after the paragraph, we're goingto have a link. And again, the href will bespecific, where it's going to be hashtag andthen doors online in here, I'll have class,the class will be scroll link, so the sameas in my number. And then just for styling,I'm going to have btn and btn. White, andas far as the text, and we're going to gowith explore doors, we'll save it, I havemy link beautiful. And then like I said, sincethat would want to set up a more realisticscenario, we'll just add some sections withsome title, just so we can nicely scroll aroundour project. And the way it's going to looklike we'll have about and then in here, we'llhave a section. Now what is important thatwe have the ID with and about, the way it'sgoing to work is that we'll have some kindof section with an ID. And then where we havethe link, once we click, we will read thatvalue. So we'll know which section we're talkingabout. And then we smooth scroll to that particularsection. Now what's important is that youhave the name is exactly the same. So youcan call it of course, however you want. Butif you'd call this hashtag, Bobby Lee, andalso make sure that if you're adding the section,that also the ID value matches that. So inmy case, since my link has hashtag, and thenabout, that's why I'm adding ID to my aboutsection with a value of about a month sinceI would want to add a little bit of styling,and more specifically a pattern. So I'm goingto add here a section class. Now within asection, like I said, there's not going tobe too many things, we'll just have a title.And then title will have a link to with thetext of our and add a little bit of stylingwith the span. And then we're just going tosay us. And as you can see, it wasn't actuallyour is about because I was reading alreadynext section. So it is about us. Now I alsowant to quickly mention that I purposely addedno padding in here, because it is very crucialfor us to see that we're navigating exactlyto the edge of the section. And you'll seea couple of gotchas that we'll have to solve.But again, I did this on purpose. It wasn'tlike I forgot how to add padding on top, justin case you're wondering, you never know.Node wants to copy more section. So selectedone, two. And now I just need to change theserouters around. So I will select right nowmy comment as well as my ID. And we'll deleteit in here. All right services. Okay, that'sgood. And then as far as the text is goingto be our services, okay. And then in here,we'll go with tours. So again, we select bothof them will write tours online, as far asthe text within heading two will just writefeatured tours. And lastly, I would want toset up the footer as well as the scroll button.So can we can scroll back to the top rightafter my section. I'll add another comment.And I said not if you want to check it out.This is what we'll have. Again, nothing spectacular.But this is just going to give us a structurewhere we can nicely scroll around our project.So our footer, I think I'm going to add aclass of section just working to get a littlebit of padding here. So right here, footer,and class section. And then within footer,I will have my paragraph. I'll start by settingup the copyright will use a special HTML character.So I'm getting my ampersand and then I'm goingto write copy. And then we'll write backroadsback roads, travel tours company. I will HeartGold right now my date. But then of course,we will use JavaScript in order to see howwe can set it up dynamically. So for the timebeing, I'm just gonna write warning 20 online.We will have Here a class, and the value willdate. And then right off in dishpan, we'llset up another sentence. So let's write allrights reserved, Mark. So And lastly, we willadd our button, but I can tell you right away,that the button will be hidden by default.Again, I didn't see the point of adding thebutton and then going over the same old stuff,we already have covered quite a few timeswhere we add something, and by default tohide it, and then of course, we just add thatclass. So what I'm trying to say, of course,once we covered the button, I'll show youwhere you can find this in CSS. But just don'tget discouraged that as you're adding thebutton, you won't be able to see the button.So in here, I'll have another comment, itwill just say back to top button or link,or you would want to call it and it will bea link. Now I do want to add some classeshere. So go with class, scroll hyphen, link,and then top link. So that is also anotherspecific class. And then as far as the href.Muslims, I would want to scroll back to thetop. And the ID from my header is home. Whatdo you think is going to be my intro? Yep,of course it is going to be home. So I'm goingto have down to my address, I'll look forhome. And then in here, I'll have hashtagand then home. So that's my trip. And thenwithin this link will place a Font Awesomeicon, and the values will be FA s and thenFA arrow, I don't know. Let's see how thatwill look like. And of course, I'm kidding,because you won't be able to see the link.But that should do it for our index HTML.And then one by one, let's start setting upour functionality in JavaScript. Beautiful.And we'll start by setting up our date dynamicallyusing JavaScript more specifically here. Becauseof course, it is okay to hard code the valueif you want. But then what are you going todo on January 1, are you're just going tolook for all your projects and then updatethe current year, or you much rather wouldset that up dynamically. And then just forgetabout it. Because that always will displaythat actual current year. And I think thesecond option is a bit more nicer. Becausewe all have some other things to do on Januarythe first. So we'll start by looking in theapp j s. But one thing that I think I messedup in a previous video is that I have herea class of date. And I actually want it tohave the ID. Now it is not a big deal. Ifyou want to keep the class, just rememberto use the query selector. But in my case,I'm going to go with ID of day. Again, nota biggest deal. But I just like to stay consistenthow I made the project. So where I have theapp j s, notice we have quite a few commentsand the war. Of course, I talked about themonce we get there. But we'll start by settingup the date. So that's our first task. Andin here, I'll just have some kind of variable.And it will be a date, because why not. Andthen like I said, I'll use get element byID. If you want to keep the clouds Just rememberto use the query selector. I'm looking forthe date. And then I'm going to go with datein HTML, and I will be equal to our date object.Remember, we covered global objects and oneof them was date. So in this case, I'm goingto go with new date, then I will invoke it.And right away on that object, I have a methodwith a name of get full year. So this is exactlywhat I'll use. I'll use this get full year.And you will notice that even after we removethis 2020 technically, we should have everythingempty, you'll see that I nicely still havemy 2020. And this way again, I don't haveto be a madman on January 1. And I don't haveto update all my project manually. So I setup my date. And I'm good to go. Alright, andNext, we'll take a look at how we can toggleon once again, this is going to be a littlebit different setup, because we'll calculatethat height dynamically. Like I promised,I'll talk about it in more detail once weactually get there. So we'll navigate backto App j s. And you notice where you havethe comments for close links, Mrs. Will andwe'll start by selecting three things. Sonot to things like we had in a previous projectwhere in order to toggle, but in this case,we're looking for three things. I'm lookingfor links compare, ran, I also want to getthe links. Of course I also need that toggle.So those are the three things that I wouldwant to select. And I'll start by settingup some kind of variable and I guess for thebutton, I'm going to go with and toggle usingto document and again, we're using query selector.And then as far as the class name is nav,toggle, triggered. Let's copy and paste. Andwe'll change these values around. The secondone will be quite long variable name, whatI just thought that it will give us more clarity.That's why I'll write this as a linked container.Again, of course, you can shorten it, if youwant, just make sure that you remember theactual name. And then as far as the classword is guy, it is a links container. So linkscontainer. So that's the div where all thelinks certain. And I think in this case, Ican just make this one smaller. So I can stillsee everything in one one. As far as the thirdthing, that will be my links. So on here,all right links. And then the class name islinks. And we'll start very simply by repeatinghow we created the previous project. So wealready know that we can just add a eventlistener. So now I've toggle add event listener,we're listening for a click event, we'll haveour callback function. And then within thecallback function, well, we should have somekind of class in CSS correct. So if I checkout right now, my CSS and I don't know whyI'm going to index HTML for needs now CSS,if I'll find my navbar navbar, you'll seethat by default, the links, the links containerwill be hidden, we'll have our links container,then height set to zero, or flow is againhidden. And then remember, in a previous project,it was very simple. We just grabbed this class,we added the height, and we're good to go.So we'll do exactly the same. But then, ofcourse, at the end, I'll show you what isthe downside of this approach. Or more specifically,maybe when we'll have some downsides. I mean,you can use this approach, there's nothingwrong with this approach, you just need toknow that there's going to be some specificsetups, where this is not going to work. Soagain, we hide our links container, that'swhy we cannot see the links. And then we haveour show links class, like we did in a previousproject, I'm just gonna grab, of course, myLinux container, Linux container, becausethat's the one that's hidden out here, a classlist. And then we'll just toggle, I'll saytoggle. And then the class that I'm lookingfor is show links. So let's add that class.And now I will say that the moment I click,of course, I can see my legs. Now, let meshow you the downside of this approach. Again,there's nothing wrong with this type of setup,you just need to be aware of the situationswhere you will have the issues. So I'll navigateright now to Microsoft Project. And now whydo we have here this 200 on a small screen?So if I open this up, why do you think I'madding this class of show links, and thenthe height is 200. And if you remember theprevious project, it is simply because ifI inspect, I will know that for my links,the height is 200. Now in this case, it showslike 201 point 14, okay, that doesn't matter.But the whole idea is that yes, of course,we will have that height. And then of course,we would get the height and then just addit in our CSS. However, what do you thinkhappens if, for example, in the index HTML,in this case, and actually do need the indexHTML, I'm sorry, not the utils index, I wouldadd another link, or out remove the link,for example, I add another link. Okay. AndI'll see on the right hand side that morefunctionality still works. But I'm definitelymissing here a link. And I can clearly seethat if I click on the links, you'll noticethat Yeah, one is missing. So one is somewherehere, and I cannot see why I cannot see it.Because in my CSS, and for some reason, it'sclosing all the time, with me open up. Sothe more open, this height is hardcoded. Again,awesome setup. But we always need to makesure that this is going to be exactly theheight. And there's going to be cases wherethis will be dynamic, this value will be changing.Yeah, for the links, you're probably the kingof the castle. So you will be the one who'ssetting up the links. So of course, you willbe the one who's controlling the height andall that. But again, there's going to be somedynamic set up once in a while where you'renot going to be able just to add that heightmanually and just forget about it. Okay, youmight run into specific issues. For example,in this case, what if these links are changing?What if one time you have four and then thesecond time you have five or maybe in onecase you will have three. So in that case,of course, I will delete it. Now you can seethat I will have my height, but then I havethe space. Again, not the best scenario. Soof course in the next video, we'll take alookLearn how we can do this dynamically. Again,I'll repeat this for 55th time. But you canuse this approach. There's nothing wrong withthis approach. But just keep in mind thatthere's going to be some situations whereyou will have to calculate the site dynamically.And we're adding this manually in a CSS andjust adding this class will simply not work.Wonderful. Once I have spent half an hourtalking about the setup that I will not usein this particular project, I'm just goingto comment out for your reference. So youalways know that you can still use this ifyou are not using any kind of dynamic data.And then we'll take a look at how we can actuallycalculate the height and toggle the actualheight. So the height of my links, not thehard coded value that we're using in the showings.And in order to do that, we'll use this method,the get bounding client rect. And as you cansee it as a method, it just returns the sizeof an element, and its position relative toa viewport. As always, it is going to be muchmore faster. If we'll start using this particularmethod. And I'll come up with some kind ofvariable. And in this case, again, I'm goingto go with the long one. And you'll see ina second why. Because there is going to beanother variable that is very, very familiar,or I'm sorry, similar to this one. And I wouldjust want you to see clearly which one iswhich. So in here, I'm going to go with container,and then height. And this is going to be equalto a Linux container. So remember, we hadthat div, where all the links were sittingon the one that we were talking about in thisclass. Well, in this case, I'm going to gowith links, container, and then I'll use thatmethod. So get bounding on this client right.Now, in order to actually not make any kindof pronoun session errors, I think I'm justgonna say good bounding, I think there's gonnabe a little bit more faster. So I'm gonnahere invoke my method, of course. And nowlet's console log it what we have here. SoI'm going to go with log and then container,right? Let's see, of course, I would liketo open up my console. And then in the console,I should have some kind of value. Now theinteresting part is that I'm getting the objecttriggered. That is awesome. But we're alsonoticing that we're getting this height ofzero. Now, why are we getting this heightof zero? Well, by default, we set this equalto zero. So of course, this is going to bemy value. So I'm getting this height of zero.Okay, these two match. Now why I have thisheight of zero, because of course, by default,I want to hide these links. So that's whyI have this links container wrapping aroundmy links, because by default, I want to twoitem. However, you're probably wondering,okay, why you are telling on this, becauseI just want to let you know that we purposelyuse this div to wrap our legs. So we stillget the height, not this height, not the heightof zero, I'm just showing you where you wouldget an error. If, for example, you will havethis wrapping div, and you will just use yourlinks and then set them to height zero. Sothere's no way for you to access, what isthe actual height on the links. So what isthe height that you're looking for? Becauseif you're just going to be looking for anelement where you set it equal to height tozero, it's not going to work. So yes, we usea parent container, we set it equal to heightto zero. And in fact, we'll use this value,but not to actually set it up our new toggle.For that we will use this links. Why? BecauseI did not change the height for my links.And I think it's going to be easier for youto understand if I just delete my containerheight. And then let's look for this all inside.So not the container, not the parent container.But the links. And again, I'm going to gowith links and height. Like I said, prettysimilar variables. That's why I wanted tohave a longer name just so you can see waterswhat and then we go with links. And then again,we go with this, get bounding whatever methodnames or get, let me get my get bounding clientand whatever method name. And in this case,again, I'm looking here for height. Now ofcourse, since it is an object, I can justaccess the height if I want. So I don't needto go with the full object and then get thatproperty. I can just add here dot and thenof course I will get right away my height.Now once I have both of them knowledge, checkit out. What is the link site? So containerheight, we already saw that it was zero. Forwhat if we go with links? Alright, let's see.If we click them. Can we have some kind ofvalue? Now what is the value? value is 150?Why the value is 150? Because I have threelinks. So in order to show that, I'm goingto copy and paste two more times, and nowwe should have larger value, what do you thinkis the value right now? It is 251. Why? BecauseI have a five links, I'm calculating thisheight automatically. Again, I'm going tonavigate to a bigger screen just chokers.So we're getting this value, because thiswill be zero by default, this is zero, youcan see it here. It has some kind of width,but the height is zero. And we cannot setit up. If we're using this height of zero,it just won't work. It will work. However,if we're getting this length zero, horrorfor the parent, we have to have this heightzero, because I want to hide them. Okay, thatwas the whole point of the setup. So oncewe have both of these routers, beautiful,I will get rid of this console log. And nowI will set up a if statement. So I still neededmy container height. Remember I mentionedthat. And in this case, I'm going to say ifcontainer height is equal to zero. Now whatdoes that mean? Well, that means the defaultset of correct. So if the container heightis equal to zero, then I would want to dynamicallyadd height to my container. So again, we'restill adding height to container because itis zero, however, we'll use this link site.And the way it will work will look for ourlinks container. And then we can just lookfor our style property. And then not sorry,not this one. And then on the style property,we have the property of heart. So this isgoing to be my head. And I'll just set itdynamically using template string equal tomy variable. Now what variable I'm lookingfor, I'm looking for the actual link site,again, not the container height, that willbe zero. But in this case, I'm looking forlinks height. And then I would just want toadd these pixels here. So I'm going to gowith pixels. Now, what is the other situation?Well, the other situation wouldn't be if thelinks are already open, correct. So in thiscase, we just need to go with else. And thenwe go with links container. And then again,style, and then height. And probably I couldhave just copied and pasted. And I'll setthis equal to zero. And you'll see how nicelyonce I opened this up exactly what I'm lookingfor. Because this will be dynamic. This willdepend on those links. And of course, I'llshow you by deleting few links as well. Andthen since now, height is not equal to zero,because we already added, of course, the height.Now just close it up. That's it. Now the actualcontainer will go back to zero. So that'sgoing to be our setup. Now there's one gotchathat I want to show you. And that we'll haveto deal with. Once we get to the bigger screen.You'll notice that in our case, everythinglooks very beautiful, hard, the reason whyit looks beautiful, because in style CSS,I'll look for my media query, and you'll seethis links container. So again, there is thecontainer for my links, has this height ofhonor. Now notice what happens if you commentthis out. So we'll go back. First of all,I kind of see the links, where I can't seethe links. Well, because I close the toggle,right, so links were hidden. Now in this case,if I'm going to go to the bigger screen, you'llsee that my height is very, very big for mylegs. Why? Because I open up the toggle. Becausethe way it works, you can see here in theactual developer tools. And by the way, letme make this bigger, you'll see that we areactually adding inline styles. So that's howit works here. When we're using JavaScript.This is in line, if you remember from HTMLand CSS, inline was stronger than our actualexternal CSS stylesheet. So that's why whateverwe type over here, will just override that'swhy in CSS, I needed to add this height auto.So that way, it will always be auto not zeroor whatever the value for I just need to uncomment.And what's important is to have this importantflag, because again, this will be inline CSS.And as always, we'll just want to showcasethat we can add or remove links if we wantto. Sorry if I'll go back to four items. You'llsee that my head still be awesome. So stillon my services, the site note I don't knowwhat happened here. Should have been heretours. So let me go with tours. Probably messedit up in a previous setup. Um, let's see.Yep, we have our tours beautiful. Then ifI would want to actually copy and paste let'ssee One more tour. And as you can see, nowI can dynamically add, remove and do whateverI want. And I'll always always have my exactheight that I'm looking for that. So that'show we can set it up using this property.So again, we are setting up three things,we have the container, we have the actuallength, we have the toggle, then we're usingthis get bounding client rect. So that's goingto give us an object, what we're looking foris the height, the moment we get the height,we'll just check the height for the parent,which should be by default, zero. And that'show we will hide our links. And then of course,if the height is zero, then we'll add a heightfor the children, which in our case is length.And then if it is reopened, if we have toggledon, then of course, we would want to hidethem. So we set it back equal to zero, butwe just need to remember that in a CSS, weneed to override that. Otherwise, since we'reusing inline CSS, this is going to be morepowerful. And that's going to be a dynamicsetup for toggling the links. Next up, wehave fixed navbar. And back to top scrollbutton. So here's what I would want to do.Once I scroll past the height of the number,then I would want to set up a class. Remember,the fixed class. So whenever I notice, asI keep on scrolling navbar will always staythere. And the same will work with a backdoorbutton, where it will only show up once wescroll past a certain point. But then oncewe go about that point, and as you can see,we cannot see our scroll button. The way I'llset that up is by using scroll and so we haveour window object, then we can add a randomlistener. And I'll be listening for a scrollingscroll event. And then again, we have ourcallback function. And the property that I'mgoing to be looking for is going to be pagey offset. And as always, we'll start by simplyconsole logging. And we'll write this as window.And then page y offset. That's the propertywe're looking for. And as a side note, ifyou're interested in page y offset, it isa read only window property that returns thenumber of pixels document has been scrolledvertically. And of course, we can just doublecheck that by opening up the console. Andyou'll see that in the beginning I'll havezero. How's that keep on scrolling? Noticethese values keep on getting bigger. So thatmeans that first I'm scrolling down. And inhere, I'll simply say that if this value isbigger than the height of my navbar, whatare we gonna do, we'll add a specific classto our number, the class I'm looking for isthe fixed navbar. If we scroll up a bit, we'llsee that we'll have our fixed nav positionfixed top left with a little bit differentbackground, where at the moment, as you cansee, on a bigger screen, it is transparent.So I have my transparent background. But thenwithin this position fixed the fixed nav classon our background of white, and then a littlebit off shadow. That's what we will add someback in the app JS or the one start by targetingboth the navbar as well as back the top link.So for the navbar. I'll have here a variableof course, and I'll use my ID. So I'm goingto have document, get element by Id get elementby ID, and I'm looking forward in it. Andthen a second, remember, we have button allthe way at the bottom. And I'm just goingto call this top link. And that will be equalto the document. And I'm sorry, this shouldbe a equal sign. So document, then a queryselector, and I'm looking for top link. Solink had the class of Taplin. So once I haveselected both of these things, then I wouldwant to get the height for my number. Andwe already know how to do that we can useour get bounding client rect. So we'll havetwo variables. One will be scroll height.So let's have your const and scroll heightwork. So that will be equal to our window.And then page y offset. Beautiful. And thenin here we'll have a nap. Alright, so I'mjust going to have const height, and thenheight should be equal to A nav bar, thenget bounding, get bounding client rect. Andthen I'm right away looking for my height.I'm just going to set up a if statement, whereif scroll height is bigger than a knapheidethen I would want to add that class. Now whatClass am I talking about? Well, the classname was fixed now. So we're going navbar,one class list, then we'll add, and we'llhave here fixed nav bar is the class name.And then of course, we also have the elsecorrect. So how else navbar class list, remote.And then in this case, again, the class nameis exactly the same. So fixed. Now, let'ssave it, navigate to a bigger screen, justso we can see it better. And you'll see thatthe moment on scroll past the height of thenavbar, I will get my fix number. So of course,it is sitting right here. And the same thingwill be for my button, back to top scrollbutton. So as I keep on scrolling, I justneed to come up with some kind of value. NowI went with 500. Of course, you can changethat value, however you want. And in orderto show and hide our link, our back top link,you'll see that we have our show link class.So again, this is going to be scenario wherelink is hidden by default. That's the reasonwhy you cannot see if you'll come under south,you'll see that we'll have our link over here.But it is hidden by default, like we alreadyhave covered in a previous project. And thenin order to show the link, we'll toggle thisclass show link class. And we just need todecide what is going to be the point in thedocument where I would want to show my backto top link. And we'll set up another if statement.And in this case, I'm going to say if scrollheight is bigger than for example 500. Again,that is arbitrary number, you can add whateveryou'd want. In that case, I'll have my toplink. And again, I'm looking for a class list.And I would want to add a show link class.And what is the most well done, I would wondermore correct. So I'm going to go with else.top link again, class list. And then we'llremove the class we're removing is the showlink class, an RLC. First we start scrolling.Notice once we get past the size of the numbercourse I get my fixed number. And of course,I can toggle my navbar as well. But once Ikeep on scrolling and then reach 500 pixels,then of course, I'll display my backdrop.As a quick side note of the links, the actualscrolling will work already. Okay. Now, ofcourse, in this case, I'm showing the completeproject. But yes, it will still work. Okay,that's something you need to keep in mindwhere it will work. But there is some additionalfunctionality that we would need to add. Soat this point, we can see that we're scrollingto a sections, but we're actually missingthem. Okay. Now, why is this working by defaultright away? Well, there's two things. First,in the actual HTML, or I'm sorry, CSS, I addeda code for that. So the reason why we cannavigate around the page because that is adefault HTML setup, where once you click ona link, you will navigate to that particularsection. Again, this is not a sorcery, thatwon't happen. Now, the reason why it's happeningsmoothly right away is because in HTML, Iadded this scroll behavior smooth. So if Icomment this out, you'll notice that yes,we can navigate around our page. But noticethis is not happening smoothly. So as I keepon clicking, check it out. Yes, I do navigateto those particular sections, that is nothappening smoothly. So in this case, in HTML,you would need to add this scroll behaviorsmoothly. However, in our case, we do needto add even more functionality in our JavaScript.And we'll do that in next video. Why? Becauselike I just mentioned, we are missing oursections, we can clearly see that I scrollpast the for example, about section, all thesame word services. As you can see, I cannotsee my services. So we will need to fix that,again, using JavaScript, when that would beour setup, if we would want these classesdynamically based on where we are in the document.And again, the functionality is followingwhere we're checking for the page y offset.Now of course, the first we will need to setup a eventlistener for scroll event, and thatwould be on window, then we're looking forour page y offset, like I just told you, andthen I'm just saying what is the height forthat bar. Okay, once I'm past the height,I'm good to go. Then I'll add my fixed mathclass. Now once I'm below that number, thenof course, I will remove the class. As faras back to top, we just simply say the scrollheight must be bigger than some kind of value,whether that's 500 word that's 100, whetherthat's 1000 or that is up to you, and thenwe just add the show link, where again, wejust display that link. And then on the else,we just remove the link and our final jobis to set up a site smooth scrolling, or aprecise, smooth scrolling. So for example,I might never notice, once I navigate to abouton exactly where the about section startssaying for services, the tours, and you getthe point. And of course, I can navigate allthe way back to the top, I can also do thesame thing with my button, it's going to dothe same thing, regardless of the screen size.So I can also do it over here, where one sideclick, we will hide the number, so hide orlinks, but it will still navigate to thatspecific section. So for example, that couldbe tours. And of course, we can navigate back.Because like I said, even though we technicallydo already have the small scroll, becauseof the CSS that I added, the problem is thatwe are missing our sections. So notice, Ican clearly see the scrolling past the sections.And it's even worse on a small screen wherefor example, notice I'm navigating to thedoors, and I don't know where I'm even at.Now, at the moment, what do we have an addresspretty much nothing, right, so we just havethe comment for the smooth scroll. Remember,when we were setting our links, I purposelyadded to all of them, this scroller class,and that includes this guy as well, this linkthat is in my banner. And now we'd want totarget them, of course, in the app j s. Andor just iterate over them using for each andto each link will add a event listener andor listen to a click event. So let's startdoing that. So const scroll links. So scrolllooks like so that will be equal to a document.So document. We're looking for a query selector,our we're looking for all of course, remember,now we're getting a list. So right here, ascroll link class. And then I'll have my nodelist. Okay, beautiful. And of course, I canaccess it by X variable. So right here foreach. Now, I'm iterating over, I do have mycallback function. In a callback function,I can access each and every link in my parameter.And I'll just name it a link. And in here,all right, link, event listener. And again,we'll be listening for the click event. Andthen we'll have our callback function. Andthe first thing that I would want to do inmy callback function is actually prevent thisdefault behavior. Or at the moment, as youcan see, we are getting the small scroll,but we would want to add more functionality.So I would want to prevent this default behavior.And in order to do that, I'll have to accessmy event object. And I'll right here preventdefault. And now you will notice that onceyou click on a link will not navigate anywhere,or you will be sitting, right exactly in thesame place. And this is exactly what we want,at least in the beginning. So here we willwrite a comment will say prevent, and default.Now what are our next steps, I would wantto use event current target. So that is goingto give me my link. And I would want to getmy attribute. Now, what attribute am I talkingabout? Well, in the index HTML, I can seethat each and every link will have this href.And then hashtag afterwards. So I'm lookingfor this value, because I'll use this valueto find that section dynamically. So in theobjects, right after prevent default, I'llgo with a common animal right here, navigateto specific, specific spot, okay, beautiful.And I'll start by getting the ID, so havemy ID variable, and that will be equal toE. And remember, current target was the linkwe're clicking on. And then we have a methodof get attribute. Now what is get attributegoing to give me? Well, that is just goingto get me the actual attribute. And the attributethat I'm looking for is the href. So in thiscase, I'm saying get attribute. And then Ineed to be specific, which attribute am Italking about. And I would like to get thehref. And as always, it is the best case scenarioto actually console log it, just so we allare on the same page. So let me open up mytoggle. And you'll see that now of course,I'm getting this value, the van Of course,I can also get services tours, and you getthe gist. Now why do I need this value? BecauseI'll use document get element by ID, justlike we haven't been doing before. Rememberwhen we're selecting the navbar. For example,we use document get element by ID, and wepass in the ID. So this is exactly what I'lldo right now. where of course that href willarrive Friends, my section, the ID on thissection, I'll just want to get this ID andpass it into document get element by ID withthis specific ID. Now the way I can accessit, is by using slice. And I'm just gonnasay one. Now, if we scroll up, you'll seethat slice, extract a section of a stringwithout modifying the original string. Andwhy am I passing here, this one, because I'mjust saying, you know what, start from theindex of one. So skip that hashtag. That'swhy, if we console log in right now, you'llsee that I'm just getting the about I'm notgetting this hashtag about, I'm just gettingthe boat. And of course, I can select thatelement. If I just set up some kind of variablein my case element, then I'll use document,get element by ID. And this is where I'm passingthis ad. So whether that's about services,and tours and tours, so within the ad, let'spass in our ad, and now have our element.Now we're halfway there, we have the element.Awesome. Now, we want to get the positionof that element, whether it is a tour section,whether that is a services or whether thatis about and I couldn't get that value. IfI use offset up again, let's scroll up, wehave offset our property in number representingthe top position of the element in pixels.So let's try it out. I'll have some kind ofvariable. And in this case, I'm going to callthis position. Now I'm going to be settingthis up with lead. And you'll see in a secondwhy. And also this up to a element. So thatis the element that I'm dynamically selecting,depending on which link I'm clicking on. Andthen like I said, offset up. So we'll go withoffset top. And this should give us a valuefor the top of that section. Now that valuewill be a little bit off. And we'll coverthat in next video. So don't worry, we stillhave ways to go. But this should give us atleast an idea where there's actual elementis. And as always, we can console log if youwant. So we're going to go here with position.And you'll see for example, that once I clickon the about, I'll have 838 pixels. For thedoors, I'm going to have 1600 45. Again, thesenumbers will be different and will changebecause we have a little bit different setup.Remember, we had position fixed involved,we had a bigger screen, we had a smaller screen.So again, in the next video, we'll get thosecoordinates Exactly. But for the time beingout, still want to scroll somewhere correct.So I have my position. And in order to scrollto that position, I can use window and thenscroll to again, the method name is scrollto. And then within this method, we pass inthe object in the object, we have coordinatesand the coordinates that I would want is left.And I'll set my left to be equal to zero,because I would only want to navigate vertically.And then of course, for the top, I'm justgoing to use this position. So within thewindow, scroll would just say where we wouldwant to scroll to where window Scroll to andthen left zero and then for example, top 100.So then, of course we would scroll 100 pixelsfrom the top. Now just to showcase that itwill work I'm going to go with about and noticehow we scrolled 100 pixels. Now, of course,I would want to use my position. So that isgoing to give me the value where I would wantto scroll to again, it's not going to be precise,because we have a little bit more complicatedsetup. But I can just add here position. Andyou'll see that it is going to be somewhatcorrect. But we'll have to do some modificationsare the last thing that I would want to addin this video. Before we start calculatingthe height and length, I would just want toclose my links on a smaller screen. Again,I don't really care about the bigger screen,because my links are in one line anyway. Buton a smaller screen, don't you think it looksbetter. He For example, when we scrolled upand down, we would close our little togglenav bar, because otherwise we just keep onscrolling. And notice we're all the time we'llhave these links open. I don't think it isthe best user experience. So right after wehave our window scroll to remember in orderto close our links, we just needed to targetthe links container. We already have accessto it because of course up here I have selectedit correct. So links container and what dowe need to do out here was style and thenheight and we'll just set it equal to zero.And now you'll see again, we will not scrollto a specific place. We will have to fix thatthe next video but We will close our littletoggle nav bar on a smaller screen. So beautiful.In the next video, we'll start calculatingour heights. And then we'll finally be ableto scroll to that particular section smoothly.And we'll scroll to the exact beginning positionof that section. Alright, let's finally fixour smooth scroll. And we'll start by settingup again the heart. So we'll be interestedin the neighborhood, we'll be interested inthe container height. So that is, of coursegoing to be the container for our links, we'llbe looking for the fixed class, whether wehave added to a number or not. And then we'realso going to have to change this positiona little bit. So here I'll add a comment.And I'm purposely pushing this position down,because alternative smell here in a second,but what I'm looking for here is Cal crewlate the heights. So we're going to righthere, right, and we'll start by getting deniedby right now I already have selected nav bar,so I just need to come up with a variable.So I'm gonna have here, height is equal tominor bar, again, I already have selected,then I'll use again, there's get boundingclient rect, that has my method. And I'm lookingforward to height. Okay, good. Now, I'd alsowant to do the same thing with my container.So again, I'm interested in my container.So I'm going to go with const. container.And I'll go with a longer name for my variable,just because I think it will help you to understandwhich one is which we have our links container,then we have again, our get bounding clientdirect. Again, we're looking for height. Asa side note, if you want to select them somewhereglobally, of course, you can do that. In mycase, since this is the last time where we'reactually getting them in this project, a minerswill do the whole setup here. And once I haveboth heights for the knife, as well as forthe container, then I'll set up another variable,which will hold the value, whether the navbarhas a class of fixed nav or not. So I've constfixed now there is my variable name, and thenav bar again, and I'm looking for the classlist and contains, and again, this is goingto be either true or false. So if the navbar has the fixed class, then of course, thiswill be true. If not, then it will be false.And once we have all these three values plusour position, now, I would want to start byfixing up the position. So what exactly I'mgoing to be fixing? Well, you see, as we'rescrolling, the first thing, you'll noticethat once we get to that particular section,the reason why I'm not at the exact positionwhere the section starts, is because my navbar covers it correct. So what I would wantto do is, instead of setting it to elementand then off the top, which is just goingto give me the position for that exact section,how would one subtract the height of the number,so I'm going to say minus nav height. Andyou'll notice that if the restricts again,this is important nav needs to be fixed, wewill nicely navigate to that particular section,Mark. So why, because we just remove thatvalue of the non part. So we have offset upthat is the exact location of the sectioncorrect, but then we subtract the nav right.And once we subtract the nav height, thenof course, we just move a little bit up. Soif we would be here, then of course, thiswould be the value for this section. But sinceI'm saying Yeah, but I have this section,but I don't want to navigate that far down,because my nav bar covers it. That's why wesubtract the value for the number. That'sthe easiest step. Okay, then I would wantto deal with a fact that if my number is notfixed, if my number is fixed, the values willchange. And I'll simply show you that by consolelogging the position, work so position, andyou'll see that if the nav bar is fixed, ina console, you'll have one value for the section.And then if the nav bar is not fixed, andof course you will have a different value.So at the moment nav bar is not fixed. I clickon the boat and you'll see 443 so that ismy route. Now if I navigate to services, andat the moment of course, my nav is alreadyfixed and then I navigate back, check it out,we have a difference. So in one case it was443 and then in next case it was 360. So Iwill need to fix it, where I will need tocheck that if of course the navbar is notfixed, then I would need to have a differentvalue. Now first of all, why is this happening?Well, you see, once the navbar is fixed, we'retaking out of the normal flow. So originallyhere, we have one value, and that would bethe height of our navbar. But then once weremoved that height, even though technically,our initial value was correct, since we removeda navbar, from our normal flow, now this valuedoes not match where the actual section is.Okay? That's why when we have actually navbar,not set to fixed, you'll see that once younavigate your about, you actually scroll pass,because the moment the number goes to fixed,then we take it out the normal flow. So nowof course, this value is not exactly wherewe want to be, the actual value is this oneis 360. And as you can see, it is smaller,more it is smaller, because we take out theheight of the novel out of the normal flow,where with a navbar, the location for about,for example, was 443. Once we take out thenavbar, which we do with position fix, thenthe value is 360. So it is actually less.So what I will want to do is check if thenavbar has that class of quick snap. And thenwe would want even subtract more value fromthe position. So the way it will look likeI'll have my if statement. And in here, I'llsay if natrix. Again, it is going to be ournav, or I'm sorry, the NOT operator. And I'mgoing to say if fixed nav is equal to false.Now what does that mean? That means if thenavbar is in a static position, it is notfixed. We haven't scrolled past the heightof the number. If that is the case, I'll setmy position. That's why I use the keywordof luck. And I'll say whatever I have my currentvowel, whatever it is over here, and we'llsubtract even more than now fight. Again,why we're doing that, because when we madethe calculations at this point, we're stillcalculating the height of the number. Butin our setup, we already started scrolling.So of course, we removed that number fromthe normal flow. And now we need to actuallychange that value. That's why once we addour code, notice, even when we are sittingnicely at the top of document, so our navbar is not fixed, we can still nicely navigateto the actual section. Now as a side note,you know what in the index HTML, I alreadyshowed you how we were calculating this dynamically.So I think I will remove this stores one.And as you can see, even once I removed thisparticular link, because we're still usingthe value, we're calculating the height fora number, nothing here is hard coded. Oursetup will still work. So if all now get back,notice we're still navigating services towardsan all that now the problem is going to beon a smaller screen. This is one more thingthat it would mean to fix. Because if we'reall the way on top, we click on a boat, we'renot going to be exactly where it would wantto be Why? Because we're also here calculatingthe height for the container. That's why inour code in app js, we will still lookingfor this code as well. So let me set up onemore if statement, where I'm going to seeif nav height is bigger than 82. Now whatam I talking about with 82? Well, that's justgoing to be a setup for the actual top ofthe navbar. So that is the case, if it isbigger than 82. What that means is that Ihave already opened up my links, and if thenav height is bigger than 82, then I wouldwant to set my position equal to positionand then plus the container height. And ofcourse, container height will be whateverI have the links there. So I'll save it willtry out on a bigger screen. Now let me seewhat I have. So at the moment, I have thehome, of course we navigate home, I open upmy links, then I navigate to about and ofcourse I navigate there, I close my links,and I'm exactly where I want it to be. Nowin this case, of course, I would like to alsolook for services, and we navigate to ourservices, we can try out on a bigger screen.In this case, we don't need to worry aboutthe height being bigger than 92. Because thisis not the case where we're toggling the length.Of course, in this case, we can just simplydo whatever we're doing before. Again, thegotcha there is that we're just calculatingfor the height. So we're just checking ifthe nav height is bigger than 82. That meansthat I have these links involved. And that'swhy I would need to add that value to my element.Because if you remember, in the beginningwhen we were subtracting that value, thisis exactly what we're doing right now. Sowhat I'm saying here is position is equalto element of the top. And now right? Now,what do you think is the nav height rightnow, and I can tell you right away that thisis going to be a sum of the top of our numberwith our container with our lungs. That'swhy once we actually subtract, and if we don'tadd this code, you'll see that we'll navigateway more higher than we should be. So clickon About and notice, I should be way lower.Now, why am I a lot lower, because we subtractthe nav height. And that is, of course, aregoing to be our big one, that is going tobe the total of our top of our navbar withour container height. So that's why in thiscase, if I check, and I can see that nav heightis bigger than any two, then I just add thisvalue of the container height, because I subtractedway more to begin with. So navigate againto a bigger screen. And we can just clearlysee that if I navigate for example to abouteverything works, services still works. Andthen we can also navigate back to the top.So this was our project. Hopefully you guysenjoyed the project. And I'll hope to seeyou in our next project. Beautiful. And nextwe have the tabs project, we'll have a boatsection, and in there, there's going to besome granite marriage. And then of course,we'll have some kind of information in here,notice. So once I click on a tab, I'll havedifferent info displayed. So for example,these would be our goals, then we have history,and then the vision. Now as always, we'llstart with a fresh new project. So insteadof you find index HTML, and here, we wouldneed to add the HTML first. Now start by settingup the section. So go over here and our section,then within a section, I'm going to startwith a title. So div with a class of title.And then with the div, we're going to havea heading two with a text of about. So that'sgoing to be my section on a paragraph withI don't know, 10 words, I think that shoulddo it. Beautiful. And then after that, I'mgoing to set up my center. So right off mytitle, we're gonna have a div with two classes,about Center, which we'll set up our columns,and then section center that is going to makesure that we have a certain width for oursection. And then there will have two columns,so have two articles. So article number oneand two. Now, if you'd want, you can add herecomments, but there's not much in there. SoI'll just leave it with all comments, I'mgoing to have a image, and I'm going to belooking for my hero one. on mine. As far asthe alternative, we're just gonna say aboutpicture, I'm sorry, I should have my picture.Awesome. Within the second article, I'll placemy container. So the way it will be, is goingto have my article, and then I'll have mybuttons. So this is going to be my buttoncontainer. And then in here, I'll have mycontent. So at the moment, of course, onceyou click, you notice only one content. Butin general, there's going to be three divs,each of them will have the content. Of course,once we have JavaScript dynamically, we willshow only one column, and then hide the restof them. And we'll start with setting up ourbuttons. The container. So in this case, I'mgonna add here a class off article, or I'msorry about a class about for some reason,I was looking at the article. And that's whyI said that the class name is also articlebut the class name is about, then I'm goingto add my button container painter. And thenit's going to be a deal with the same class.So button container. And then within thisdiv, I'll have three buttons. So button, allof them will have a class, the class willbe tab btn. But then one of them will havethe class of active, and you'll see how itwill work in a second. But then I also wantto add data ID. Remember we already coveredthis particular setup, where we have a dataset in the JavaScript. So that's how we wereable to access it, then in the HTML rightaway, set up my data attribute. So I'm goingto go with data hyphen. Again, you can nameit, whatever you want. But since I like shortnames, I'm just going to go with data ID.And the first one, I'll set it equal to history,and you'll see why we're doing that. So history.And as far as the value, it's also going tobe history. Now I don't want to copy and pastetwo more terms, and then class will stay.So that will be still tab btn. But then thesevalues Of course, we'll change. So insteadof history, the second one will be vision.So let me set up two selectors or two cursorsmore properly. And I'm going to go with vision.And I'm going to do the same thing for thisguy as well. So instead of history, it isgoing to be goals. And instead of goal shouldbe goals. So now set up my goals. Awesome,beautiful. And you're not, I will add herethe class. My apologies for the first article,also add about IMG, and you'll see just alittle margin propping up some other CSS.And then as you can see, these are my buttons.Okay, beautiful. Now, the way it will workis we'll have this active class that willjust showcase which button has been clicked,like so. And then of course, for content willalso use this active one B class are activeto show or hide the content. So the contentthat will have the active class will display,whatever is the content, and then the restof them who don't have that course, we willhide that particular content. Now, we willdo it dynamically with JavaScript, but forthe time being, we'll just art coding. Andyou know what, in this case, I think I canmake it even smaller, just so I can see alittle bit more here. And once I have my buttons,awesome, I'll set up my content. So a articlewith a class of about common. So let me makesure that I'm right outside the article. Andhere is the article with a class of about,about content. And I'm like I said, therewill be three items in here, and comments.And so copy and paste. So single item, copyand paste, let's add here and up single item,and have single item. And in here, I wouldwant to have a div with a class of content.And again, eventually we'll add a class ofactive or not, for the time being, why don'twe add class of active for all of them. Andthen eventually, we'll just remove that class,because otherwise we won't be able to seewhat we're adding. And then we would wantalso add the ID. Now these IDs, need to matchwhatever you have here as a value. So if forthe button here, add a value of history. Also,the ID should be history. So of course, fortime being, I'm gonna have the ID and I willbe equal to history, and I'll copy and paste,but then we'll have to change these values.So they match, for example, vision, or thegoals. So that of course, will be my Dev,beautiful. And then within a dev, I'm justgonna have a drink for with a text of history.So let's go with history. We'll say it, thatshould be my first item. And as you can see,it is displayed awesome. And then also outwant to add rest of the text in here. So let'ssay we have our single item. And I'll copyand paste. So now I have three of them. Andthen eventually we'll add a little bit morecontent in here. So for time I, I have theactive active active, don't worry, we'll deleteit actual later. But then First, I would wantto change these values here. Like I said,they would need to match whatever have 40IDs. So if I had history, vision and goals,same thing should be here. So the second onewill be my vision. And the third one willbe goals. So let's fix them, like so. Andthen also we can do the same thing for values.What's right over here, vision, vision, Ialso add goals. Now technically, you can addwhatever you'd want over here as far as theparagraph. But if you'll check it out thefinished project, you'll notice that I addedsome different HTML, just so it's a littlebit more interesting. For example, in here,you will have a longer paragraph and thensome kind of ordered list and all that. Thenin here you have a different text. And inorder to set that up, if you'll check outthe files, you'll see the utils HTML. Andthen in here, as you can see, are just preparedfor you a paragraph that you would need toadd again, technically, you don't have todo it, if you want to, you can just writeLorem and then add whatever text you want.But I just thought that would be cool, ifwe would actually add them different, becausethat way we would be for sure able to seehow we're switching the content. So in thiscase, I'm going to copy and paste and I'llplace it where I have history. So copy andpaste I have my history. Now of course don'tworry, we will be displaying all of them.But then the moment we'll remove that classof active then we'll be able to see only oneitem And I'm looking for my vision, of course,vision where you are, here you go. Let's keepon scrolling right after our heading, copyand paste. And the third one, we have alsogoals or not, of course, I missed out on myunordered list. So let me head back to indexHTML, I'm looking for my vision, right offthe paragraph. Again, just to spice thingsup, I'm just gonna have this unordered list.And then last one is goals. So again, letme copy and paste my paragraph, right afterthe goals, I should have something like that.And then like I said, I would want to removethis class of active from all of them wouldjust leave it on the first one. Okay? Becauseagain, this class of active will be the onethat's responsible of hiding or showing thecontent. So let me delete from the secondone, I believe that was vision, and then alsofrom the goals. So as we're going to changethis class of active, that will show or hidethe actual content. Now, you'll notice onething that is missing a lot is a little bitof CSS. So what I would need is to grab myarticle about content, and place it withinthe about. So my article that is my about,but then also would want to grab my aboutcontent, because within the section Senator,I should have only two articles, the firstone with about image in the second one withabout. So let me grab my about content. Andif you want, you can of course collapse it,that's going to be faster, then I'll cut itout. And then I would want to copy and pasteright after my button container. So noticewhere I have the button container. I'll copyand paste and now have a proper CSS. So again,we have our class of active as a sign up,if you want to see how the styling will takeplace, navigate to a bottom of CSS. And you'llnotice that once we have a class of activebackground will be white. And for the content,the display will be set to block. That's whyfor example, if I will remove the class ofactive from the first one, and attach it toa second one. So we're have the classes, you'llsee that now of course, I'm displaying division.Now, I didn't change the button. That's whythe button still says history. But as youcan see, as far as the content, I have thevision. So let me remove from the second one.I'll leave it with the first one because ofcourse that is my button. So let me go backto my single item. And then just add here,my class are active. And now we can have twoJavaScript dysfunctionality where the momentI will click on the tab, and of course, I'lldisplay a different content. Alright, let'smake our project a bit more dynamic. And we'llstart in the objects by selecting three thingson one select my about, so let's look forour article that has the class of about, thenI would want to target all my buttons. AndI can see that all the buttons have the classof btn. So that's what I'm going to be targeting.And then also, I would want to get all myarticles, since all my articles has the classof content. That's how I also will targetall my articles. So 30 things about buttonsand articles. Let's come up with some names.And I think I'm going to go with btn. So Iguess I'll go with document then query selectorall since it's going to be a node list. Andin here, we'll type tab btn matters, of courseclass, that all the buttons that I would wantto target my about. And I'll name it aboutdocument, then query selector. Now the classis of course about so just about class. Andthen last, like I said, I would want to targetarticles. So I'm going to go with const articles.And we're looking for document and query selectorall and then the class that is on all thearticles is content. And once we have selectedall three of them, now on want to do somethinginteresting, where I would want to attacha event listener, the click event, to a about,so not the buttons, not the articles, butthe about and just to showcase one more timeabout is the parent container. And we willuse the target the event target to actuallycheck it out what we are clicking on and you'llsee that of course in a second. So again,not the buttons, not the articles, but theabout. So I'm going to write about then addevent listener. be listening for click events.So so click, of course, I'll have my callbackfunction. In a callback function, I can accessmy event object. That's why I'm typing inhere, the E parameter, and then out want tosee what is my actual target. As always, wecan just simply console log. So console. logand not the current target, because of course,that will be about, I'm looking for my target.So say, E, target. And because of event bubbling,what will happen is, as I'm clicking on thecontent, or the buttons, I'll see in a console,what I'm actually clicking on. For example,if I click here, notice, it tells me thatI clicked on a paragraph. So if I'm goingto click on the top order, you'll see thatI'm actually clicking on the article. Nowif I'm going to click on buttons, then ofcourse, it will display that I clicked ona button. Knowing that what do you think isunique about the buttons? What is unique aboutthe buttons regarding the articles, or theparagraphs? And what's unique about the buttonsthat we have this data ID remember, data ID,we could access using data set. So here'swhat I could do. I could say, you know what,get me that data set ID. And then if it actuallyexists, if it's not on the phone, then I knowthat I'm clicking on our buttons, and justshowcase that I could say, okay, he target,of course means whatever I'm clicking on,on that data set, remember that return theobject. And since I've named my one data ID,or the property I'm looking for is the adresave it and now you'll see that if I clickhere, of course, it's going to be on the phone.Why? Because paragraph or the article doesnot have this data set ID or data ID attributewhich I can access with data set ID howeverbuttons do. So if I click on here, and notice,I nicely get back my value. So whatever Ihad there as the value for my date ID, thatis, of course displayed in the console. Beautiful.So now what I can do is have some kind ofvariable, I'm going to name mine wine ID,you name it whatever you'd want. And I'llstill do the same thing, event target data,set, and then ID. And here, I can just setup a simple if statement. Where if Id exists.So if it's not undefined, then I'll want todo something. If it's undefined, then I'mnot going to do anything. And basically whatI'm doing is I'm just responding if I'm clickingon a buttons, because if I'll be clickingon an article, of course, nothing will happenbecause it doesn't have this data ID attribute.So it's going to come back as undefined. Soyou're all set up our logic. And I'll startby removing the class of active from all thebuttons. Why, because once I click on particularbutton, I will add this actual class of active.But before I do that, I would want to removeit, how I can access all the buttons? Well,we already have the variable, correct, becausewe use query selector all and we selectedall the buttons. And I'll add here comments,I'll say remove active from other all buttons,I guess, buttons. And we'll have a variableof course, then we'll set up a for each. Remember,we had a callback function, each and everybutton, we could access using the parameter.And of course, since I'm accessing the buttonright now I can just say, class list, thenremove. And I want to remove the active classscenario. See, if I click on a button, I'llremove that class of active from all of them.Again, why I know that I clicked on a buttonbecause it has the data set the property thatI'm looking for. Awesome. What's next? Well,now I would want to add that class of activeto a button that I clicked on. So how canI access the button that I clicked on? I'mon target. That's the item that I'm clickingon. So I'm just going to go with E targetclass list. Add class of active. And now you'llsee as I'm clicking on a button, are removingthe class of active from all the buttons rightfrom the get go, and then adding to a buttonthat I clicked on. And of course, now I wouldwant to do the same thing for my conference.Because at the moment, I am clicking on buttons,but the content stays the same. All right,how we can do that. Well, I could again, removeClass of active from all the contents, becauseI would want to hide the rest of them, samelike we did with buttons. And then I'll usethat ID. Notice the value that I got backfrom data set ID to target my specific content.Because remember, all condoms had the ID.and the value matched exactly what I had herefor date, right? So we'll use get elementby ID, or grab this actual content, and thendisplay it. So let's try it out. Like I said,I'll start by hiding all of them, let me see,where are my actual setup ads for buttons,still within the if statement, of course,because if I'm not clicking on a button, thenI wouldn't want to do that, since buttonsonly have the actual data set, or data orthe attribute. And then let's add commentshere, hide our articles, or I guess, basicallyhide all the articles. And then we'll displaythe one that actually has the matching ID.So again, we have the articles, we do a foreach, then we have a callback function. Andwe can access each and every article witha parameter. And I'll name my one article,an article, class list, same spiel, classlist, and move on what class I would liketo remove active class, that's all I wouldwant to do. And then which are one display,which content I would want to display? Well,the one that has the matching ID, how I canget it? Well, I can use document get elementby ID correct. So I'm going to set up somekind of variable and I'll name this element,then I'll use a document get element by ID.And what value Am I passing in? Well, thisone, because remember that return either goals,vision, or history. So pass here the ad awesome.I have access to my element. And what do Ineed to do? The same like I had for the button,just add a class of active. So how am I element?class list add on, I'm looking for my activeclass. Let's save it. And now you'll see thatthe moment you click on your target vision,of course, annual display division, you'llclick on the goals course you'll target goals.So this is a awesome project where we canpractice on event target. So not the currenttarget. But the event target. And what eventtarget gets back is whatever you clicked on,it just using the fact that we have this eventbubbling, where if we set up an event listeneron a parent, even as we're going to be clickingon a children, the actual event will bubbleup. And we'll be able to access the item thatwe clicked on using event target. If you wantto check it out on a bigger screen Be my guest.And I'm noticing right away that I have amissing class. So for some reason, in thisproject in the index HTML, I decided to skipyour classes. That a reason why you don'thave any padding there on the top, becausewe should have here a section class. And I'mlooking for the section class. So once I add,you'll see that we will have our parent monitorback to the JavaScript, if I have history,or some display history, vision or goals.I can click all day long. And as long as youhave the data set that is matching the ID,every time you'll click on a button, you willdisplay the matching content. Hopefully youguys enjoyed the project. And I hope to seeyou in the next project. Awesome. And ournext project is countdown timer. Again, weimagine some kind of giveaway whether or notis an older iPhone, or subscriber or whateveryou would like. And then of course, we havesome kind of date. So that is going to bedate when the deal ends. And we'll set upa countdown timer, which counts correctly,what is the remaining time and we will startwith our index HTML, we navigate to our setupfolder. I'll close the sidebar for time beingand we'll start by placing in this section.We don't want to have one. We want a sectionwith a class of section and center class.Now within this section, I'll place my imagefirst. So let me have my image comments. Thenwe'll have the article. And then for the articlewe right away we'll add a class of gift manhyphen IMG within the article place our imagethe actual Last year's gift, as far as thealternative, I don't know, say gift, giftpicture, picture. And once we save it, ofcourse, we'll see our image. And then of course,we'll have another article, where we'll haveall the info. This is where we'll have theheading, we'll have our actual time, somekind of around and paragraph, and the containerfor our countdown timer. And we'll place itright after the first article, we'll havethe info, comment, info comment. And in hereagain, the article now the class will be alittle bit different. We have a class of gift,man hyphen info. And then within this article,start by setting up heading three. And whatevertext you'd want, in my case, it's going tobe old iPhone giveaway. And right after thehearing three, I'm going to place a headingfor with a class of giveaway. So this is eventuallywe'll we'll set up our deadline. But for thetime being, we'll just talk code. Now I dowant to add the class because we will targetin the JavaScript. So give away, man as faras the values, I'll say give away and on andon, again, whatever that you'd want. Becauseeventually, it will be set up dynamicallyfrom JavaScript. For timing, we're just hardcoding. So I'm just going to be spitballinghere 24, April 2020. I don't know 8am. Sorry,100. am, okay, good runner will have somekind of paragraph, again with some kind ofrandom text. So Lorem warning, okay, beautiful.This should be our text, or you know what,I think it's gonna look better. If I'm goingto go with 30. A little bit more text looksa little bit nicer. And after that, we'llset up our deadline. So right after the paragraph,we'll have a div with a class of deadline.And then within this div, we'll have dayswe'll have hours, minutes and seconds, andall of them are going to be divs on its own.And then within there is going to be somemore info. So for all of them, we'll haveto do a little bit of work. Within a deadline,I'll start with days. So let's add here commentof days, then div. And for div, we don't needany kind of class, I'm just going to havea div. But within a div, I'm going to havea heading for with a class of days, and theseclasses will change. So for hours, we'll havehours, minutes and seconds. And again, we'llstart by hard coding, for example 34. Andthen right after the heading four, we're goingto go with the spam. So txt, technically,you can write wherever you'd want, just makesure you have the same classes over here.Now let me see where my dividends. And I'mgoing to add your comment and have item forexample, because the rest of the values willchange. And I'm going to copy and paste. Andinstead of days, this will be hours. And youknow what, I'm missing something. And whatI'm missing is one more div over here. I apologize.We have deadline, and format. So I'll takemy div with my heading four and spine andplace within the div. So I will be the difference.So let me delete what I just copied and paste.So we have a div with a class of deadlinefor month. And then within that div, we haveanother div with a heading for a span. Sonow let me selected and we'll copy and paste.And I'll change it to hours, minutes and seconds.So 123 So three copies. Here. Like I said,we'll change these values around, it's notgoing to be days. The second one will be hours.So change that, then we have minutes and 40minutes, we're just gonna write a short way.So mins, like so. And of course, we also needto change these values around. So hours. minsmeans and last one is the seconds. So I'llselect my comment, class, text value, andrule right here seconds. Now once we are done,of course now we can start setting up ourJavaScript. And with our HTML out of the way,of course, we can bravely navigate to Appj s. In there you'll find two arrays, onefor months and second one for DVDs. At themoment we don't care about them. So of course,I'll just collapse them more the moment we'llneed them, of course, I'll explain why wehave them in there. And what is going to bethe use case. And we'll start by selectingthree things. I'm looking forward to deadline.So they will the class of deadline. And Iwould also want to get the giveaway whereI have the heading for because, of course,we'll place this dynamically, we will nothard code or date. And then also would wantto get all the heading fours. And headingfours I'm talking about are the hours, minutes,and then days and seconds. So let's startby selecting all three things. So const, Iguess I'll give the same variable name, sogive away. And that will be equal to documentthat query selector. And then I'm lookingfor my class of giveaway. giveaway. And alsowould want to select my deadlines are const.The line that is equal to document are goingto query selector, we're looking for deadline.And then last, I would want to select my headingforce. Now, of course, we have multiple optionsof all we can do that, for example, you couldselect them one by one, correct. I could saywell give me an hour's give me today's Giveme the minutes, give me two seconds. Yeah,definitely, you can do that. You can alsomaybe add here a class, for example, I don'tknow item, and then add the same class toall of them, and then just select that item.But just to show you how powerful is the queryselector, I could also do it something likethat, where I have const, then I'll name thisitems, because I'm just lazy to come up withsome kind of meaningful name. So documentas an query selector. And then in here, allright, deadline, deadline hyphen format. Nowwhat is that is that is of course, the div,the parent div. And then I can just say, youknow what grabbed me during for that is withinthat div, and result will be exactly the same.If you're console log items, you'll see ina console, that the result will be exactlythe same, where we will have a node list,of course of the items. Now I didn't use allthat's why I have this issue. My apologies,I should have used node list, I'm sorry, thequery selector of all. And that's, of course,when I get my node list. So now I have myhead and force, again, could we have addedhere a class of course, we could add, forexample, item class to all of them. And wecould have selected that item class. Again,using query selector all could we have, Idon't know, used a query selector for eachand every item, for example, days, hours andminutes. Yes. But the reason why I'm showingyou that is because I would want you to knowthat query selector is very powerful. I canwrite whatever CSS selector we would wantover here. And also later, I'm just goingto show you a shortcut where we will loopover these items, and then add these routers.So instead of selecting them one by one, andthen adding the values one by one, I'm justgoing to loop over my node list. And thenusing the index, I'll just add my routers.And the routers I'm talking about are of course,the days, hours, minutes and seconds. Andof course, we haven't calculated these Valerie'sYep. But don't worry, we will get there ina second. And once we have all our three selections,now I want to start working on a date. SoI would want to show dynamically using JavaScriptwhen my giveaway will end. And I'll startby setting up new date. Now, of course, ifyou would want to just get a current datehere is somewhat simple, where we need tocome up with some kind of variable futuredate. And that will be equal to a new date.And you'll see that once we console log itour future date, future date in the console,we will see a current date. So this is justgoing to give me a string of current date.Now, of course, it is a far cry of what I'mlooking for, because I would want to showwhat is the weekday, what is the actual date,and all that. So how we would fix that? Well,we will need to start by actually adding thevalues in the date. So if we would want tohave a current date, then we just start new,and then date. But if I would want to havesome kind of specific date, then I would justneed to have these values in the date. Nowthe word will work is for time being I'lljust cancel or I'm sorry, comment out thefuture date. And then if you'd want to havesome kind of specific date, you just needto add them as well years and you'd startwith a year so I'm going to right here 2020then you're looking for a month. Now one gotchawith Mundo is that it is zero in expects.Now what does that mean? Well, for example,we know that may would be written as 15 Correct.Most since the arrays are zero and next base,in fact, you will have a value of four. Soif I would want to display may of 22nd, orsomething like that, then the value for themonth is going to be four, not five, becauseagain, the array is zero index base. So we'regoing to go here with four. So now I'm lookingforward to May, then what date I would want,I don't know, I'm gonna go with 24. And thenwe go with ours. So as you can see here, ina suggestion, we have right away we have theyear, then we have the month, then we havethe date, then we have hours, minutes, seconds.And also we have option for many seconds.So I'm going to keep on rolling, I have mydate, and I'm looking for the hour. Now asfar as the hour, the values are from zeroto 24. So for example, if you'd want fiveo'clock in the afternoon, you right 70 knots,Oh, you're right that in this date function.And then like I said, I'm looking for somekind of value, 40 hours of value, I'm gonnago with 11. And then 30, were my minutes.And as far as the seconds, I'm just gonnago with zero. So set up like this. And you'llsee that once we console log, the future date,course, this is going to be Sunday, May 242020. And then we have the actual time 1130.So like I said, if I'm going to go here with17. And this is going to be a five o'clockin the afternoon. So that's something youneed to remember that when we talk about months,they are zero next base. So instead of normalmonth, like you would have, for example, forme to be five, it is going to be four. Andas far as the actual clock is zero to 24.So five o'clock in the afternoon is goingto be 17 or nine o'clock in the actual eveningis going to be 21. So those are the gotchasthat you need to remember. And now of course,we would need to start extracting these values,because eventually I would want to set upsome kind of logic, where I'll place themwithin my heading for, I will start with thesimple ones. I'll start with year, hours andminutes. Because months, the actual days,the weekdays are a little bit tricky. So Icannot just grab this value correct and justplace it in the heading for that wouldn'twork. So I would need to extract them oneby one. And like I said, I'll start with asimplest ones. And those are going to be years,hours and minutes. So just go const, thenyear, and then future date, and get full year.Now I'm not going to right away, type it inthe console, I might as well right away, setup my functionality, where I'm updating thatin the HTML, the actual value that I'm lookingfor, is this guy is the giveaway, I alreadyhave selected it. So I'm just gonna say giveaway, then text content. Remember that wasthe property that controlled text content,I'll set it equal to a template string, I'mgoing to right give away and on. And thenthere's going to be multiple selections. Andlike I said, we'll start with a simplest ones.And I'll start with a year, because that'sthe one that I just selected. And you'll seethat once I run it I should see in hiringfor giveaway ends on 2020. Awesome. So thiswas easy. If I wanted to access the full year,the only thing I needed to run was get fullyear. So this is going to return from thatdate again for year. Now that could be a currentdate, or that could be our future date. Thatdoesn't really matter. As long as you getfull year, you'll get the actual year. Now,we also covered that when we were workingwith our scroll project. Remember, when weplaced it in a span, so that way, of course,you always get the current year. In this case,of course, I'm getting the future date. Nowsince I would want to keep you up to date,I'm still going to use my onto my blog. AndI apologize that I keep on removing and thenadding some reason I thought I would needit. But actually, I think it will serve uswell. So I have our year awesome. And thenlike I said, we're looking forward to moreeasy things. Because months and the weekdaysare a little bit hotter, until more easy thingsare hours and minutes. So we're gonna go herehours, again, some kind of variable, whateveryou'd want, future date, and then the functionyou're looking for is get ours, we invokeit. Of course, I want to place it right aftermy year. So of course the one that I'm lookingfor is this one. This is the format the routeone giveaway runs on Monday 1/4 may 2020,and then whatever is my actual time. So inmy case it was 1130 so That's why I wouldwant to look for minutes right now. So oursorry, were already went ahead with minuteswhere I'm still looking for my hours, thenI don't have my colon. And then of course,I'll add my minutes. And minutes are alsogoing to be easy. Where instead of hours,we'll write minutes. And then the functionthat we're looking for, is, you guessed it,get minutes, not milliseconds, get minutes.And then of course, once I have my minutes,are going to add to here as a variable, minuteshere, and then we'll add AM. So once I saveit, check it out. worse now I have my fiveo'clock in the afternoon. And I'm writingthis out I am so of course, I don't need tosend this back to elementary, I'm not suredo it. Now I have the year, the hours andminutes. So those weren't easy ones. So whatare the hard ones? Well, those would be months,because again, you'd get some kind of value,instead of the value of May, even though ina string we saw May, there's no way for usto access it, what we will access is thisarray of months. Now what we will access actually,is going to be numbers from zero to lm. Solet me show you, I'll go with left month,because I'll change this around. So let'smonth, and that will be equal to future date.I don't know why I added here a.so have aget month. And once we run out, notice, wewill get a value from zero to 11. In thiscase, we're getting four. So like I said,since arrays are zero in next base in ourarray, we're getting zero to 11 array. Andthen since May 4 is the fifth value. And that'swhy the index is for. So this is where thearray A month come into play, where you wouldneed to set up this month's array. And you'regoing to either write it as full name, ieJanuary, or for example, you can also writehere, john, it's up to you. But you need thistype of array where you can access that value.So for example, if I'm getting here for andof course, I would access here me. Now ifmy month would be different, then of course,the actual value from my array also wouldbe different. So let's test it out. I'm goingto go with my month array month array. AndI'm looking for the actual month. So let meget my value month. And you'll see that ofcourse I have the May. Okay, so again, wecannot access this main from JavaScript, we'reaccessing this number. And that number representsthe month. Again, the gotcha is that it isnot exactly like we would normally think ofmonths, where main would be first one. Infact, it is your next base. So that's whywe're getting this value for now, if I'llturn this around, and if I'm going to say11, you'll see that it's going to be December.Why? Because that is of course the last month.So that should do it as far as the month.Now how we'll set this up? Well, very easy.We're just going to say that month is equalto months month. Again, we can write it howeverwe want. But since I already use let purposelyjust to show you multiple ways. I'm goingto go with months. I'm not I'm looking forwarda month, now save it. And I would want toplace it before my year, of course. So whereare the year, another variable on mine andeuro a month. And I'll say that, of course,I have June, June 2020. Because June is thesix month in the right areas in extra four.So if I'll go back to four, and of course,I'll have may fall go back to April, course,I'm going to use the value of three beautiful.Once I have this particular setup, then Iwould want to work with a days because I wouldwant to display whether or not it's a Friday,or Monday or Sunday. So how do we do that?Again, we days we will need to use get andthen day, that's going to be interesting one,where if we would want to have get date, thenof course we'll see the actual date. So maybelet's start with this one. And we're goingto write Khan's date is equal to future getdate work. So we will invoke that if I wouldwant to display that on do it before the month.So let me right date. And that of course willgive me the date. Now in this case it doescomplain the future as I should have useddate, my apologies. Now of course I'm usingthe 24th. Why? Because that is my currentdata. If I'm going to have here 26 then ofcourse I will have 26 allowed 28 minutes courseI'll have 28. And I'm going to go back toI don't know, maybe 25 Macerich. And thenof course, this is going to be devalued. Sodate is still one of those easy ones, wherewe just need to get a date. Now again, inmy case, I'm setting this date manually inhere, when I'm setting up new date, normally,probably you will just have a new date, whichis the current date, and then you will justaccess this value of getting the date. Andlast one is our weekday. So how we can getthat one? Well, we will need to get get day.And again, this is going to be a value zeroto six, because the weekdays are seven ofthem. And then as you can see, they are ofcourse zero next base. For example, Sundayis going to be zero, Monday, Tuesday, Wednesday,Thursday, Friday. So right after the date,if I go with get day. So let me write thisas const. weekday is equal to a future date,get date or not date now was the easy oneI just gave you a day. But if you look fora day, you'll see in a console that I willhave a response of week, they, like I said,this is just going to give you a value fromzero to six, because there's seven week days,so of course it is zero next base. So thatshould mean that it is a Saturday. Awesome.And of course, again, I can use my array thatI already set up, where if I want to accessthat value course I just need to say weekdaysand then whatever index i have. And in thiscase, I'm not going to override that, likeI did with a month. Or I can just simply say,week days, and axes that value. Certainlyhere I'll have my square brackets, and thenwithin the square brackets, I'll just placea future date, and then get the course thatwill return me the value, whether that's 0123456.And then I'll use my array, my weekdays areright to access that particular day. And thenonce I have the value right before the dateon my weekday, week, then we'll out here comma,and of course there is now we have the futuredate. Now, like I said, You're not limitedto accessing these values, only when you'resetting up some kind of specific date. Ifyou'd want to see that for the current date,just remove these routers, save it. And thenof course, you'll see that it is Friday 24thApril 2020. And at the moment, it is 1007.Now, of course, we will need to fix this value.If we have, let's say less than 10 minutes,we will probably want to add zero before it.But we'll work on it a little bit later, aswe're working with these routers. So let mego back to my specific date, the one we'lluse as our deadline, I guess I'm gonna gowith, I don't know 24 sounds good enough,because that is still in the future, becausecurrently, we have a pro 24. So again, justremember, when you're setting up new date,you have two options. You either just geta current date, and you can get it by justrunning new date, without any kind of valuesin their arguments. Or you have multiple wayswe can add arguments and this is one of them,where you can just go one by one, you'll startwith year, you'll start with a month, justremember that it is zero and next base. Whenyou have actual date, then you have hoursand you have minutes, seconds and milliseconds.And then you'll get this value back, you'llget this awesome string. And then in orderto access specific things, you need to startrunning the functions for the year hours andminutes. It is as straightforward as it gets.You just have whatever variable name, thenget full year get hours and minutes, you grabthose values, then for a month, you'll geta number from zero to 11. And you'd need toof course, set up some kind of array withmonths if you would want to actually displaysome kind of text value. And then the sameworks for the days where you get a zero tosix. And then you just need to choose whichday it actually is. Now date technically isstill a simple one where you just have a variableagain, and get date. So this is going to spitback what is the actual date. So those arethe basics of working with a date object inJavaScript. Awesome once we can display whenis going to be the end of our giveaway. Next,of course, I would want to set up my countdowntimer, where I'll correctly show how manydays are left hours, minutes and seconds.And I'll start by getting rid of this consolelog of future date. The way it will work willTo use milli seconds. So what happens if youget this future date, you also have an optionof using milliseconds, so get millisecondsfor our future date, and then we'll get millisecondsof our current date. And then we'll have tosubtract them. Now that is going to give usa value the difference in between dates. Andthen we'll have to calculate, how many daysare there, hours, minutes, and seconds. Andsince I'm a big fan of console logs, rightafter setting up our text content for thegiveaway, we'll have some kind of commenthere. And I'll say future time in milliseconds.And we'll have a const. Future time that is,of course, my variable name, and it will beequal to my future date. So whatever variableI have over here, and then the function you'relooking for, is get time. Now, once you invokeit, you'll see that you'll have a large numberin a console. Now, don't worry, we'll discussthem, we'll discuss how we get this large,awesome number. But what we need to know thatwe will need to have these routers, we willneed one for the future date, and then onefor the current date. And then we will subtractthem. That's the way our confined, there'sdifference, because of course, this is goingto be in the future. And this is just goingto show how many days we have left hours andminutes. In order to set up that functionality,I would want to create a function. So I'mgoing to write here function and the actualfunction name will be get Remaining Remainingtime. And then I'll invoke the function whereI'm sorry, I'll actually set up my functionbody. And I will invoke the function rightafter that. So let's say get a remaining time.And then within the function body, I wouldneed to get the current date and also gettime. So get the current date in milliseconds,R will work, I'm going to go with some kindof variable. today. For example, I'll typeyour new date, our will invoke it, and I'llright away, call my get time function. Andagain in the console, we'll see that todayalso has some kind of value in these milliseconds.So right here today, and of course in theconsole, we'll see another value. Now, ofcourse, our first value, the future time willbe bigger. That's the whole set of Porterfunctionality. Because, of course, once thecurrent time is bigger than our future onewilden. There's really no countdown becausewe already past our future date. And likeI said, the way the functionality will work,we'll take our future time, and then subtractthese routes. Because as you can see, rightnow, we're not dealing with may 5 or whatever,we're just dealing with numbers. So we cansubtract these routers, because the firstone is bigger one than the second one, andthen we'll have some kind of difference. Andthen we'll just have to calculate, well, howmany days we have in that difference, andall that. So I guess we can just remove bothof these things, the console logs, let's setup our math operation, where I'm going tohave some kind of variable now I will justset it up as E because I need to use it inquite a few places. And I just think it justspeeds up our typing surgery is going to beT and that will be equal to a future timeminus the today. So minus today. And oncewe set that up again in the console, we'llhave a value now for this value will be smallerthan the other ones, because this is our difference.And now we need to talk about these milliseconds.So why we have these large numbers? You seein one second, we have 1000 milliseconds.So one second is equal to 1000 milliseconds,then we already know that one minute is equalto a 60 seconds correct. Now, what is onehour equal to that is equal to 60 minutes.So out here 60 minutes, 60 minutes more here.And then what is one day, that is 24 hours?Correct? So again, another comment one dayis equal to 24 hours. I'm sorry, not two hours,24 hours. And the whole point here is thatthis value is in these milliseconds. So wewould need to set up some kind of functionalitywhere one by one we get actual values. Sohow many days are in this large number ofmilliseconds, how many hours, how many minutes,and how many seconds? The only thing you'regoing to need to remember that one millisecond1000 milliseconds within one minute, we havesix seconds, within one hour, we have 16 minutes.And within one day, we have 24 hours. So we'llstart by actually calculating how many millisecondsare in one day. Because that's what I'm interestedin e-file know that value of how many millisecondsare in one day, then of course, I can justdivide it correct. So this is going to bemy total value. So I'm kind of a large valuein milliseconds. So once I divide that byhow many milliseconds I have in a day, thatis going to give me the value of how manydays are indeed correct, sir, in here, whydon't we add a comment? And I'm going to sayvalues in milliseconds. And we'll start withthe days. So one day, how many millisecondsit has, so one day, and that should be equalto 24? Because the day has 24 hours? Now,how many minutes? Does one hour have? 60?Correct. So we will need to multiply thisby 60. Okay, good. Now, we also would needto multiply this by another 60. Why? Becauseone minute, the 60 seconds, correct. So gohere with 60. Because remember, we alwaysalways looking forward is milliseconds value.And then once I have multiplied 24, by 60,and then by 60, because one minute has 60seconds, then I would want to multiply thisby 1001. Because one second 1000 milliseconds,now this is gonna give me a value of how manymilliseconds are in one day. So once thatconsole log, of course, this is going to bemy value. So this is going to be the valueof how many milliseconds are in one day. Andthis is not going to change. So as you seeright now, our actual T is changing all thetime. If you're console log, notice how it'sgonna actually get smaller. Why? Because ofcourse, the current time is catching up toa future date. But this one will always dothe same. Why? Because regardless of the day,one day, we'll have 24 hours, one hour, 16minutes, one minute, watch 60 seconds, andthen one second, we'll have 1000 milliseconds.So these things won't change. In the sameway, I would want to set up course, the millisecondsin one hour, and then also in one minute,because we will use these routers who mightas well set them up. So one hour, is equalto 16 minutes, multiplied by 60. Because oneminute has 60 seconds, and then we'll multiplythis by 1000. Now this is going to give mea value of how many milliseconds are in our.And if I want to check how many millisecondsare in one minute, we're just going to gowith one minute is equal to 60 minutes, ofcourse, my minutes, multiply by 1000. So I'mgoing to go here 1000, because one second1000 milliseconds, let's say beautiful. Andnow we can start finally calculating Well,how many days, hours, minutes and secondswe'll have. And we'll start with our daysor days, so some kind of variable, and thatwill be equal to t. So that, of course, ismy difference. So what is the difference betweenthe current time and the future time, andwe'll divide that by one day. Again, remember,this value is in milliseconds. That's whyI want my milliseconds, well, I don't wantto divided by 24 hours. Since this value isin milliseconds, I also want to actually divideit by the mini seconds router. And you'llsee that if we console log days, that willhave a number. So one day, Okay, that makessense, because I'm looking forward to April25. And actually, I have April 24, currently.And then I have one point something something.Now, I don't care about this something something,because these are hours, minutes and secondsthat will calculate later, what I care aboutis only the actual round value. And whichone is that matters, of course, this guy.Now just to showcase that our functionalityworks, file changes to 26. You'll see thatof course right now I have two days. So twopoint something something days. Now what I'mlooking for is this only two value, becauseI don't care about this point something somethingbecause those are the hours, minutes and secondsthat we will calculate later. So what I cando is I can just use days and reassign itto math floor, and then I'll pass in my days.So this of course will give me this integer,the two, not the value that is coming afterthe comma. Let's say okay, I have my days.And of course once I have the value for thedays, now I would want to calculate the samething for My hours order is going to be agotcha. And let's start working on that. Andof course, you'll see what I'm talking about.So I'm going to set up hours. So let oursis equal to a tee. And then we'll have dividedby one hour, correct. Because that's the valuewe should be looking for our will see somethinginteresting, where once I console log thehours is going to be 48 point something. Now,why is that happening? Because of course,the date that I have is sometime in the future.So in my case, that is going to be April 26.That's why I have this big value. But nowlet's think about it. If we are already displayingdays, do you think it makes sense that weare having all these hours, the 48 hours,or we would want to display two days becausenow it would be two full days in 48 hours,and then whatever hours are left, so I wouldwant to get this remainder, and then dividethat remainder with that one hour, insteadof dividing the whole value. And the way wecan get a remainder in JavaScript is followingwhere I have console log. I'm just gonna placehere a different code, summer, say eight,modules three. Now what will happen here iswe'll get the remainder. So check how manyfull values we can place in eight, nine willbe too. So we can place one, three, and thenthe second three, and then whatever is leftover. That's the value we have. And of course,you can check it out. If for example, youhave nine, I don't know. Two. So if I multiplyfour by two, I'm gonna get eight. And that,of course, just leaves a one as a reminder.So that's how we can get remainder and JavaScript.Why do we care about it, because we'll useour T modulus one day. So that is going togive me the leftover, after I have checkedhow many full days are in there. So insteadof one hour, instead of dividing by one hour,I will set this up as modules D. Because Iwouldn't want get all the hours that I havein my difference, I would want to get onlythe ones that are left over. So t modulesand then one day, so get me the value thatis left over, and then divide that by onehour. And of course, if I just console log,I'll see that my hours is this value. So somethinglike 0.8 something something. Now what thattells me though, is that there's not too manyhours in there, at least currently, becauseI still have two full days. But what I wouldwant to do is use the math floor, becauseI would want to even round it down more. Nowjust to show the actual situation where wewould use that, why don't we increase thisnumber to maybe 15. And then of course, fromhere, I'll just remove the ATM, because that'snot gonna work. Now, as you can see, I havefour full hours correct. So I have some kindof day value that is leftover. So I have twofull days, and then four hours. So this isleft after we use t, then modules one day.So this is where we check how many full dayswe have in there. And then we divide the remainderby one hour. However, again, I don't wantthis actual value after the.so, you do thesame thing where we have math floor. And wewill pass in the our math operation. So letme run this one. And now of course, I'll havefour. And the same thing I would want to dofor two minutes and 40 seconds. Now the onlydifference is going to be what I'm passingas a values, because for two seconds, I wouldwant to check how many hours are full there.And then for two seconds. Odd want to havethe minutes. Okay, so let's go here with minutes.And I will be right away equal to math floor,then I have T and let me set up another parentheses.So t modulus, and then I'm looking for thehours. So again, I want to check how manyfull hours are in there. And not only whatis left, then I would want to use that onehour, or I'm sorry, the one minute, I canget that one minute by dividing of lon minute.And you're probably thinking okay, in thiscase, I didn't care about the full hour. Sowhy am I passing in here? The full hour? Oryou know what, sorry, not hours, one hour.So one hour, why am I passing this one hour?Because it's just much easier? Because inthis case, I don't care if this gets me back48 I really don't. What I'm looking for isthis remainder. So just say whatever the timedifference module is the one hour so see howmany minutes are left. Okay, the same allwe had here with days. I said in order toget the hour Just get me today's first, andthen whatever is left, I'll just divide thatby one hour. And of course, we will need todo the same thing with a second hour, we'llhave to change these values, seconds here,then instead of one hour, we're looking forone minute. And then we're dividing this by1000. Why? Because one second 1000 milliseconds.So this is, of course, going to give us thevalues for days, hours, minutes, and seconds.Now, we can either place them directly, whereare we headed over here, or we can do a littlebit of formatting. And I'll start by settingup actually my array. So let me set up setvalues array. And then since I was using thesetup, where I was actually selecting themwith a query selector, all in my value inmy arrays value, I will just place days, hours,minutes and seconds. So I'm going to go herewith const, then values, and that is equalto days. So my first value, then hours, thenminutes, and then seconds. So whatever I gotback, I'm just placing in this array, I wouldwant to iterate over my items. Of course,items are arrived here on top, and then usethe index. And just place these values insidehere. So the word will look like, we'll haveitems for each items for each. Now there isa function, of course that we can pass inas a callback function. And, within a function,I am looking for two things, I'm looking forthe item, but optionally, I can also accessthe index correct. So that is going to giveme the index of the item in my array. Andin here, I can just say item, since I canaccess each and every item, days, hours, minutesand seconds. And then I'll say, inner HTMLis equal to A values, and then index. So here'swhat I'm doing. I'm iterating over my items.And I know that the first one will be days,hours, minutes and seconds. And the same setupI have here in this array. Again, could youhave selected them one by one, and then actuallyassign them to these routes is, of course,when in my case, I just wanted to speed itup. So I selected all of them, I showed youhow you can nicely work with query selector.And now I'm just iterating over that array,and then using innerHTML. And then I'm justgrabbing. So since the days will have thesame index as days in my values array, I canjust say values, and then index, then thehours will be same minutes will be same, andseconds will be same. So of course, once wesave it, you'll notice that I left two days,four hours, 42 minutes, and then 49 seconds.Now, of course, the moment our refresh, noticehow the seconds are going down, we have torefresh. And now we have 36. Now there's onething that I would want to add, if the valuesare less than 10, I would want to add thezeros in front of it. And the way I'll setthat up is by coming up with a function. AndI'll name this format. And I'll pass in theparameter of item. And we'll have just a simpleif statement. So if item value is less than10, then I would want to return item and setit equal to template string, add in a zero,and then whatever value I have for my item.That is of course, if the value is less than10. If the value is bigger than 10, then justreturn my item instead of passing in values,and an index will first pass or format functionwithin the format function or pass this valuesof index. So of course, we'll get the samedays, hours, minutes and seconds, we'll justrun it through this function. Once we runthrough the function, if the value will beless than zero, or I'm sorry, less than 10,then we'll add this zero. I'll save it andyou'll see that I have 0.2 days 0.4 hours.And as you can see, the seconds again, willbe all the time going down. Okay, now of courseit is annoying for us to refresh. And we wouldwant to set up some kind of functionalitywhere this is all the time changing. And wecan do that by setting up the interval. Nowone thing that I would want to do right awayis assign it to a variable because a littlebit later, we'll add here functionality inour get remaining time function where if,of course the time expires are would wantto have some kind of different So, above theget remaining time, I'm going to have thecountdown. So count down, and now will beequal to a variable select countdown. Andthat is equal to mark set interval. Remember,set interval needed two things, he neededthe callback function. And also we neededto say, Well, how often we'll call this function.So first, we'll start with our get remainingtime. It is, of course, the function we willwant to call. And the second one is how oftenI would want to call it, I would want to callit every second. That's why right over here,1000, which is, of course, one second. Sothose are my milliseconds in one second. Andsince I would want to quote every second,that while right here, there's 1000. And asyou can see, right now, on the screen, we'redisplaying how many seconds are left, nowwe have in the console, this console log thatI would want to remove. So I don't want toshow that T. Let's save it. And then of course,our functionality still works. So as you cansee, we are having our countdown, where, forexample, if we change these routers around,if I'll say here, I don't know, maybe April24. And let's save it. Now you'll see thatI have only four hours left. So four hours,36 minutes, and then 40 whatever seconds.And of course these seconds are going down.Now as you can see days already 00. Why? Becausethis is the same exact date that I have rightnow. So since I said future date, equal tomy current date, that's why I have only fourhours left. So if I'm going to go here, andsay for example, 1130 course, which you'llsee that I have only 36 minutes left on afile, just say that my deadline will be 1030.And of course, I'll have these errors, whyhave the errors because already we passedour deadline. So how do we fix that you seewhat happens when we have our set interval,we're getting back a value, and we have anotherfunction. And that is clearing the interval,that always is important that we invoke ourget remaining time after set interval, becauseI want to have an access to my condom. Okay,so within get remaining time all the way inthe bottom, I'm going to say if t if t isless than zero, so when t is going to be lessthan zero, or the current time is bigger thanour future time. Correct. This is our caseright now. And I'll say clear interval again,that is the function that we have accessedfrom JavaScript. And then we'll just passin our counter variable. Again, it is importantthat you invoke your get remaining time afteryou have set up your countdown. Otherwise,you will have no access to this variable.So we clear the interval. And now of course,I'm looking for my deadline. So that is oneof the things that I selected all the wayin the beginning. That was my deadline, theactual article with a class deadline. Andthen in here, I'll say innerHTML and Lancerto some kind of template string. And I'llhave some kind of heading for maybe. So headingfor. I'll add here a class of expired classand expired. And I'll close out my headingfor. So let's close it out. And then as faras the value, all right, sorry, this giveaway.This giveaway has expired as export. Let'ssave it. And then of course now I'll havesorry, this giveaway has expired. Why? Becausemy t, e is less than zero, because my currenttime is bigger than my future one, becauseI was looking forward to 1030. And I can seethat I have time 56. So again, my future timeshould be in the future. Now let me head onup and fix that. So half here, 26, and 1130,something like that. Let's save it. And nowof course, I can see that I have two days,I have zero hours. But don't worry, this willchange. Of course, once you have one day,then you will start having some kind of hoursvalue as well. And then 32 minutes, and 50whatever counting down seconds. So that ishow we can set our countdown. Again, the biggestdeal probably is this one, where you wouldneed to count how many milliseconds you havein one day, one hour, one minute. And thenyou need to use this modulus operator, whereyou're just counting. Well, how many hoursare left? How many minutes are left? How manyseconds are left, okay. So that's why I usemodules you say okay, well Is my remainder,and only then you divide that remainder. Andthen the same goes for seconds, and minutes.And then in here, I just set it up as an array.Because since I selected multiple items, Ijust iterated over my items that are comingfrom HTML. And then I use the index. And sinceI knew that the values of the same index fortoday's hours, minutes and seconds, so theindexes are the same for these routers asmy Nautilus, then I just said, You know what,grabbed the index, and then just add it intoitem. And then since I wanted to format it,I just added zero. And then all the way atthe bottom, we invoked our set interval. Andof course, we pass in our get remaining time.And then we are running it every second. Nowsince Eventually, the deal will expire. That'swhy also within get remaining time, I clearthat interval once the value is less thanzero. So once that is true, then of course,we just had this heading for that says, Well,sorry, in that time has expired. And if youwant to see that in action, let me see whatis the actual time so 24, then 58. So halfhere, 24. Nine, I'm looking for, I believe,what is what 1058. So let's do it here 10and 58. And we'll say whether it has Okay,it has already expired. So why don't we do59? Because it also has expired. All right,so why don't we do 11 and learn on zero. Let'ssee. And now I can see that I have 40 secondsleft. So now you'll see in action, all theactual counter expires, or more precisely,probably how the countdown expires, becausethe value for the future time will be lessthan we have actually today for the currenttime. And once that is true events that aredisplaying the counter, which wouldn't makesense, we'll just gonna have a heading forwith sorry, but the actual deal has expired.So let me keep on scrolling down. And I'llsee of course that eventually I'll have thisheading for with this value. So once thatis the case, of course right now I am sorry,this giveaway has expired. Now I know thiswas already a big project. But the one lastthing that I would want to add is this functionalitywhere each and every time we'll start theapplication, we will check for the currenttime. And we'll just add 10 days today. Soonce we add these 10 days, that's why alwaysthe counter will work. So even though we dohave the functionality where once the timeexpires, then of course we showcase the hearingfor with our text, or since we would wantto show that application works that our controlworks, we will always want to have some kindof time in the future. And the way we do that,we'll first navigate back to my setup to theobjects. And I will add here again this amin my text, okay, good. And then I also haveto change my future date. Because as you cansee, right now, I'm just hard coding thisvalue. So I would need to have some kind ofsetup, where this will always check the currentdate, and then add these 10 days. And theway we can do that is by setting up anothervariable. So let temp date is equal to a newdate a man let me get the year. Let me geta month. And let me also get the date. Sohere are like let temp here is equal to atemp date. And we're Of course looking forget full year. So let's invoke this function,then another one will be 10 month. So lettime month is equal to temp date. Get month,once give that Okay, let's invoke it also.Lastly, we are looking forward to today. Solet temp pay now is equal to a temp date.Get right now as far as the month, I don'tcare if it's a number of hours, because we'llpass it over here. Okay, so we will not actuallyneed this array. We will right away this intoour setup when we're setting up a new date.Now I'll comment this out just so you canhave it for your reference. But now I willset up that date in the future, always 10days from whatever the application starts.So in here I'll have again the future date.So I don't want to change this value. I stillwould want to call this future date becauseCourse. Amaury accessing in multiple places.And then I'm just going to say, new date.And then I'll grab my temp here. So let mestart with a year. And I'll have my temp month,month. And as far as them date, since I wouldwant to set up 10 days from now, I'm justgonna go with damp DAY PLUS, then mark soAnd don't worry, JavaScript will automaticallycalculate. So for example, if it's end ofthe month, it will add necessary days andit will display the next month. And then asfar as the time, I'm going to go back to 1130.Zero. Okay, let's save it. And now you'llsee that I'm still setting up time in a futurecore. I'm grabbing these values I'm checkingOkay, what is the current year right now?Okay. It is, I don't know. 2020? Or it is2022. Okay, good. So set up future date. Also,in that year, okay, check what is the currentmonth, so that way, always check what is thecurrent year, and then have these 10 days.So that's why how my counter will always work.Because each and every time someone will openup the application, I'll check what is thecurrent date, and then just add the standardsto that. And that's how we can set up ourapplication, which we can check it out ona bigger screen, and we can see that our counteris working. Now I know that this was a bigproject, I understand that. But unfortunately,that's how it is when you work with dates.Hopefully, everyone enjoyed the project. AndI hope to see you in your next project. Excellent.And next, we have a lorem ipsum project. Now,if you're not familiar with lorem ipsum, thatis a dummy text that we can display. If forexample, we don't have the content. And asfar as the inspiration for the project, thatwould be hipster ipsum, where instead of justgetting the Latin text, we can get a nicehipster text. If you'd want to navigate tothe project to the hipster, ipsum projectand of course, just go to hip some.co. Sofor example, in here, we can go and decidehow many paragraphs we would want. Think I'mgoing to go with five beer me. And you'llnotice that I'm getting a Lorem text, so adummy text, but is just using a bunch of hipsterwords. So in our project is going to be somewhatsimilar, where we are going to navigate toour project, and we have a heading off tiredof boring lorem ipsum, then we can pick howmany paragraphs we would want. If we don'tpick any paragraph, then we'll get some randomones like so. So I can keep on clicking. AndI'm going to be getting around the paragraph.Or if you want to be more specific, for example,if I would want to have eight paragraphs,I just write eight over here and generateand then of course, we'll get eight paragraphsof text. Now in here, I got some lorem ipsum,from other generators as well. So this shouldbe an interesting project, where we'll practiceof how to work with forms in JavaScript, aswell as how to get random numbers, somethingthat we have covered before. And also, whatis the gotcha, when you're working with anumber input with HTML, and how you can accessthat value in the JavaScript. As always, wewill start with our index HTML. So we haveto set up our structure first, back to a subfolder.In here we have the heading one. That's notwe would want. And then of course, let's setup our structure. I'll start with a sectionand we'll have a class of Section center.Within a class, we're going to have a headingthree with our text. And my case, I'll typeit out. Tired of boring lorem ipsum? Questionmark. After that, we'll have our form someoneI have a form element with a class of loramform. And it's going to give me an actionnow not submitted to the server. So I reallydon't care about the action. And then withinthe form, I'm gonna have a label. Now theID that I'll add for my input will be aboutthat's why I'm typing in the amount, or I'msorry, I said about the ID will be a month.So almost the same, but not really. So theID will be a month. And then as far as thetext, we'll write paragraphs, and then colon,I will set up my input. And it's not goingto be a text one, it will be a number one,because I would want to show you the gotchathat you should be aware of when you're workingwith inputs and the JavaScript. Now as faras the name unless it equal to your mounteven though we won't submit it to a serverminers will have the name, Id will be alsoamount, amount and then right after the IDon the Going to go with a placeholder of thatwill be equal to five. So just showcase somekind of number value online right after ourinput, I'll set up my Submit button. So itwill be a button with a type of Submit. Andas far as the text, I'm just gonna write generate.And then we just need to add here a classof button. So class btn. Now, right outsidethe form, but then still, within section,I'd like to place a article with a class ofLorem text. And this is where we will displayour text. So for the time being is just goingto be an empty article. But eventually, wewill place our content in there. So article,class of Lorem, text, and we have our HTML.So we have the structure. Again, we can submitform all day long, nothing is happening. Oncewe have the JavaScript, then of course, weonly have the functionality. As far as theJavaScript, we already know the drill, weneed to navigate to App j s. And you'll seethere a array. And then each and every itemin the array represents a paragraph. So itis a array of nine items. And each item isjust a paragraph. That's why you'll see agiant text, then comma, Max giant text andyou get the gist. Like I said, total willhave nine paragraphs. So of course, once we'llset up the logic, then we'll just fetch eitherone or two random, or all online articles,or paragraphs from our text array. And we'llstart by selecting three things are want toselect the form, the amount, that is, of course,my input. And then also the result, whichis an article that will be used to displayour paragraphs, one by one form, then forthe form, I guess, I'm going to go with queryselector. And then the class is loram. form,then for the amount, it is an ID. So of course,I can still use the query selector. But wemight as well can practice with an ID. Soget element by ID, document, get element byID, and the ID value was a mob. So just typeyour amount. And then last only want to targetmy result, my article with the class of result.And that one will be document and query selector.And we're looking for Lorem text. So that'sthe class. Once I have selected, all thesethree things are want to listen for the event.But I'm not going to be listening for a clickaround on the listening for a submit event.Number two, I will this event to a form. Sowe are form, then we go with ADD event listener.And then like I said, the event name is submet. And we are here a common event our callbackfunction. And again, we'll be looking forour event object. And what you'll notice withthe forms is that they have a default behavior.And that is to submit to a server. Now whythat is not something that we're looking for,because of course, all our logic will go bananas.And I'll just showcase that with console log,where if I'll type in Hello. And if I openup my console, you will see that you won'tsee that Hello. So you'll see it for a splitsecond. And then it's gone. Because the defaultbehavior for the forum is to submit it toa server. And we would want to prevent that.Now since we already have access to a eventobject, I can simply say e prevent default,so that will prevent a default behavior. Now,of course, once I click on submission, I canclearly see my Hello. So that was the firstchallenge that we needed to tackle, we neededto prevent the default behavior of the form.Awesome. next one will be another doozy. Anotherone will be the value that we're getting backfrom the input. Because even though our typeis number, you'll see something very, veryinteresting in a console. Now, first, I guess,let's decide how we can access the actualvalue. And since we have target already amountthere is ID for my input, or my number input,I could use the value one. The way it's goingto look like is I'm going to have const valuethat is my variable. And in here, I'll justtype, amount and value. Now of course, ifI don't type anything in, you'll see thatthere's something in a console, but that somethingis actually going to be an empty string. Andas a side note, at the moment, you won't seeanything because I didn't console log it.Now let's see. As you can see something isthere, but VAT is just a empty value. Butfor example, if I add some kind of number,of course, the number is the only thing thatI can add, because I already have the inputwith a type of number. But notice somethinginteresting in the console. And that's somethinginteresting is the fact that this value isblack. Now, you might be saying, okay, what'sthe big deal that it is black? Well, sincethe color of my number is black, it is actuallya string. Now, if you don't believe me, youcan just type your type of value. And onceyou generate that, you'll see that it is astring. Even if you add here a number, forexample, 20, generate that, and you stillget back the string. So even though your initialthought would be that, if you have type ofnumber, since you can only enter the number,that the value that you're going to be gettingback is going to be number, you'll be wrong,because all the inputs that return a string.So that's a gotcha that you need to be awareof. Now how we can fix that, well, we canuse parse integer, and we'll just write hereparse int, that is our function. Now we don'tneed to import it, it is right away available.And within the parse int, we will just passthe Amount value. And you'll see right nowthat wants to enter for example, my time,I'll be able to generate, and now my valueis number. And now of course, if you'll justconsole, log it, the value, you'll see thatit is a color of blue, let me generate, forexample, again, then the color is different.Now I know that you might be saying, okay,what's the big deal with these values withthe color values, trust me once in a while,when you'll be debugging something, you mightremember the fact that the strings are goingto be black, so the color will be black, butthen the numbers will have a blue color. Sothat's just gonna save you once in a whiledebugging where you'll be like, Okay, youknow what, I'm looking for a number, but I'mactually getting the string. Now, once I havemy awesome number value, now what? Well, nowI would want to set up my if statement, becausewe need to understand that we have a coupleof options. So what are the options that wecan pass in here in the paragraphs? Well,I could pass numbers from one to nine, correct?Those would match my awesome paragraphs. Yeah,that's good. But then also, I could pass inI meant, like we just saw, for example, ifI console log value, you'll see that thatis my empty value. So of course, we wouldneed to check that. For some reason I didn'tsave there. Let me generate one more time.And as you can see, right now, I'm gettingback, not a number. So why is that not a number,because of course, I'm using my parse int.And that's the value that I'm getting back.So we have an option for empty value. Andlet me write some comments here. Empty value,we also have an option of adding a numberthat is less than zero. So that's not whatwe want. So right here, negative one willpresent my negative values, then also I canwrite more than nine, correct. So more thannine. Again, that's not something that I wouldwant. And so I have only nine paragraphs,so say bigger than nine. So why don't we setup a if statement where if I have either ofthese three, then I'll just display one paragraph.Now eventually, we'll set it up as a randomparagraph. But we'll start by just displayingthe first paragraph. So if this is the case,if the user doesn't enter how many paragraphsor tries to enter less than zero, or biggerthan nine, in all three cases, we'll justsay, you know what, here's one paragraph.So I can just say if, and then I'll set upmy or statements. So we'll say is not a number,and that is a function. Now what happens withthis, not a number function, either returnseither that is true, or that is false. AndI'll set up my if statement. And then of course,we'll just console log it. The actual functionname is this one is an A, not a number, andthen I just pass in the value. And as yousaw it, last, I have here a string, then ofcourse, it says, not a number. So if I'llhave my function is not a number, and passin the value. Of course, that will be true.So have another or, and here I'll say if thevalue is less than zero, and the last oneif the value is bigger than nine. So if allthese three things are true, or more specifically,if any of these three things are true, thenof course, I would want to do something andthat something is just displaying my one paragraphagain, in a second we'll set it up as a randomone, but for the time being is just is goingto be my first paragraph. Now I can accessit, I can target my article, the result one,then I can just go for innerHTML. And thisis going to be the case where I'm not goingto set up my HTML in the actual index HTML,because there's not going to be much to it,I'm just gonna have a paragraph, I'll addhere a class, a class of result, because Ihave a little bit of CSS. And I'll also closeout my paragraph. And then within a paragraph,like I said, on one axis, my first item, soI know that within a template string, if Iwant access to variable, I just need to havethe dollar sign and then curly brace. Andthen I'm looking for a text array. And thenI'm just looking for the first item. So you'llsee that, for example, if the user doesn'tpass any kind of value, by the way, like Ipromised, I'll console log also is not a number,and passing value. And you'll see that thisis true. So that's why I'm saying, if thisis true, then of course, get the first paragraphis generate. And of course, we have the firstparagraph. And this is equal to true. So thatwill be if the user doesn't enter any value.Now what if user tries to enter, for example,negative value, same thing. Now in this case,of course, it's gonna say that is not a numbersfalse, because it is a number, not a emptystring. However, I do have it in my condition,where I say if the value is equal to a zero,or I'm sorry, less than zero, and then ofcourse, display my first paragraph from mytext array. And then of course, I can do thesame thing for the bigger than nine. So letme move up. Let's, for example, say 10. Andthen again, I will get my first one. All right.Now, why don't we make this a little bit moreinteresting, where I will set up my randomvalue. Now since we have done that alreadyquite a few times, I'm just gonna go witha random number, we'll use math floor rightaway, so we actually around a down and thenmath, random to generate a random number.And then remember, we had the array, and I'lljust multiply it by the length of array. Andthen instead of accessing the first paragraphin my array, I'm just gonna stay here random.And you'll see right away that once you generate,notice, now I'm getting some kind of randomparagraph here. And if I have the empty string,for I have negative, same thing, I'm gonnahave a random paragraph. And if I have, Idon't know, 20, I also have a random paragraph.Okay, now what happens if the user actuallyenters correct values, from one to nine? Well,we have our else correct. So go with else.And then in here, for the time being, I willset up a temporary array, I'll say, let temptxt and I'll use my slice. So when we're usingslice, we have the beginning and the end.So we'll make a copy of our array. And forexample, we'll start with zero. And then andwith the first item, then, of course, ournew array will just contain that one item.But as always, it is much more easier forme to show you. Now the array that I'm lookingfor is the text array. And then like I said,we're using slice. And then as you can seein suggestions, we have the start, and thenthe end. Now what am I going to use as myend, that will be my value. So start withzero, that means that I'll start with my firstitem. And then I'll use my value. Now whatvalue I'm talking about this one. So of coursenow I'm saying if the numbers are betweenone, and nine. And if that is the case, thenI'll just get a copy of my array. If yourconsole log it, you'll see that dependingon what is the value, that is going to bealso your new array. So type text. And forexample, if I add here too, you'll see thatI'll have array of two items, because it startswith zero, and then it ends with index oftwo. So it grabs values with indexes of zero,and one. If you have three here, then of course,it will stop by the index of three. So tograb one, zero, and two, so 012. And of course,we can also test it out, for example one,and you'll see that we're generating one item.And with knowing that course now we can setup some kind of functionality, where if I'mgetting this new array, based on whatevervalue the user enters, I just need to iterateover that array. The tamp techs are And thenarrived these paragraphs in the actual paragraphtag. So let me delete my temp text, then I'llset it equal to a new term text array. Sotemp text, I'll use my map. So temp text map.So now we're iterating over an array. Nowwe can access Of course, each and every paragraphthat we have in our parameter. And I'm justgoing to call this item because I'm too lazyto write a paragraph. And then I'll just wantto wrap the paragraph, the string that I havehere in the actual paragraph tags, so I'mjust gonna say here return. And then of course,I have my template string, since I would wantto access the variable, I don't have my paragraph.And out again, the class of results, samething. And as a side note, probably we couldhave just copied and pasted. But let's doit this way, the result is and I'll closeout my paragraph. And then for each and everyitem that I have in the array, I would wantto do so that's why I'll grab that item. Andthen I'm just gonna place it in my paragraph.Now again, if you'd want, you can console,log it and you'll see that your string rightnow is wrapped in a paragraph, whatever thevalue is going to be, whether that is goingto be one, whether it's going to be five,six, or whatever. So let me look for my temptext. And in this case, I'm passing the valueof six, just so you can see that we can havebigger vouchers as well. Of course, now thisis my array. And each and every paragraph,the string is wrapped in the actual paragraph.Now remember, the only thing we really neededto do was to use the join method. So you getone giant one. So are your join, I'll havemy empty string. So that's how I'm going toavoid, as always comments that I would havein between. And then I already have the result,of course. So result innerHTML is equal tomy temp. That's it. That's all we have todo. Um, before we start testing it out, Iwould want to add one more thing in my ifcondition, because as you can see, I'm testingfor empty value, or negative for the biggerthan zero, how we might as well add zero,otherwise, user can enter zero, and we'lldisplay nothing. So we might as well say herethat if the value is less or equal to zero,Mark, so in the address, we'll add it here.And now of course, we can start adding ourvalues. For example, I can add here four,and I'll have my four paragraphs. If I addnine, you can probably already guess thatI will have nine paragraphs. If we have negativeone, then it will generate one, it will addzero, same thing around them paragraph, wecan try it with 20. Course same thing. Andif we want, we can navigate to a bigger screen.Same setup. Again, if we have item of 20.We're just getting around on browsers. Hopefullyeveryone enjoyed the project. And I'll seeyou in the next project. Awesome. Up nextwe have grocery board. And before we takea look at the application, let me go overwhy I included this particular applicationin our project. So as you can see is justa glorified to do list where we can add theitems we can add, add them, we can deletethem. And we can remove all of them from thelist. And of course, we'll also use localstorage. So that way, once we refresh theapplication, the info still stays. Now whydid I add this particular application in ourproject since to do lists are experiencingquite a bit of backlash, and some of it isdeserved. And some of it, at least in my opinion,is unnecessary. I view to do list as a toolas a tool to learn a language or a framework.Because everyone who bashes to do lists stillcannot point to me a better simple applicationthat will allow you to create, read, update,and delete. With that being said, should youinclude a to do list in your portfolio? No,because they don't showcase the fact thatyou are an expert in a particular languageor a framework, but they are a very usefultool while you're learning that's why I includedin the project. Now that is of course my opinion.If you have a different opinion and just bylooking at a to do list, you are very unhappythan probably you should move along to a nextproject. But I just gave you my explanationwhy I find to be useful and why are includedin our project. And with that being said,let's take a look at the actual application.So we have the form, we have the input. Soif I'll add some kind of item, and then ofcourse, I'll add it to my list. Now, if wewon't add any kind of value, we will havea nice alert. And it will say, Please enterthe value. So let's go with eggs, then wecan go and milk beer, and I don't know fish.And I think that should do it. At this point,we have three options, we can either editthe item, we can delete the item, or we canclear the list. So as far as deleting an item,we're just removing item from the list. Andthen since we're using local storage, thenonce we refresh notice, we still get all theinfo that we had right now. So each and everytime the actual user will come back to theapplication, it will be saved in a local storage.So right away display what items were addedto the list. And if we would want to removeall the items, of course, we can just clearthe items. But then what's really cool aboutthis app, we went to great lengths to setup a edit, and not only simple edit, but infact, once you edit the item, it will stayin the same position. And it sounds simplerthan it is. But trust me, we'll have to writea little bit of code to get that. And alsoonce we click on Edit, notice how the valuechanges for my Submit. And for example, ourwrite this as a second item. And you'll noticeonce I click on that it I have value changed.So I did not add value to the list, I justchanged the value. And now where I had myitem I have right now, second item. Beautiful,that's going to be our project. Let's startworking on it. All right. Since it is our,I believe 14th project, you're probably notsurprised, we need to start working in a setof folder. And we'll start with our HTML.So in the index HTML instead of folder, wewill get rid of our awesome heading one. AndI'll start by placing a section with a classof Section center. Now within this section,we'll place two things, we'll have a formand a list. So let's start with your commentsform. And then worst, as far as the form ofa form. Now we don't need any action. So hereour class instead, on the class is groceryform, within a form, we'll start by placingthe alert, once out here class of alert. Andthen we're not going to add any kind of text.So that's just going to be an empty paragraph.And then after that, I'm going to have a threewe grocery. But that is of course the nameof my application, then we'll have some kindof form control. Form control here. So divwith the class of form control. And in there,I'll place the input with the type of text,Id will be equal to grocery. Now that is important,because we'll accept that ID. So if you'renaming it differently, please just keep thereference of what is the actual name. AndI'll have some kind of placeholder with exampleof the text. So I have here x. And Sarah,I should have something like that on the screen.And then still within the form control, let'sadd our Submit button as well. So I'm goingto go with button and type and submit. AndI'll just add a class here with Submit button.And as far as the text, you can do whateveryou'd want. But I think I'm gonna go withSubmit. And then again, in order to speedup our JavaScript, I will set up my HTML rightnow. So that way later, once I need to havethis dynamically, my item, I can just simplycopy and paste my HTML. So I'll have my listbeautiful. The list will consist of grocerycontainer. That is, of course, the div withthe class we grocery container, and grocerylist. So that is important because there'sgoing to be a clear button as well. So withinthis container, we'll have two things. We'llhave our grocery list, and then the clearbutton. So why don't we add this clear buttonfirst, because that way, we will avoid someunnecessary mistakes. So we're going to havehere button is just going to be a simple buttonwith a type of, you guessed it button, andout here a class of clear, clear button. Textalso we'll be clear items, and then stillwithin the container. On top of the button,we'll have our list. So we're gonna go witha class of grocery list for my div. And thenwithin there, we'll just place one item, butone item that will later add dynamically anditem will consist of article, class will begrocery item. And within this article, I'llhave two things I'll have my button container,and a title. So paragraph with a class oftitle. And let's just right here item. Andthen like I said, second one will be my buttoncontainer. So div with a class of button container.And in there, I'll have two buttons, one buttonand one delete button. So again, same spieltype. But first one will be edit. So classedit btn. And I'll place my Font Awesome.The value we're looking for is FA edit. Sofa, S, fa, edit. And I'll just copy and pastethis particular button, and instead of edit,it's going to be delete. And then of course,the class also will be a little bit different.We're all have fa, and we're looking for trash.We'll save it at the moment, I cannot seemy awesome list. Now that is fine. That isby design, because if we check out the styleCSS, we'll see something interesting, wherelet me navigate to my container. So I havesection center, all that is good. But whatI'm looking for is this grocery container.And as you can see, by default, it will behidden. If I comment this course now I'llsee my item. Again, that is done on purpose,because once we add the item only then wewill display. That's why if you don't commentthis out, but of course, you won't be ableto see the list. Now since I want to keepit that way, I will uncomment my visibilityhidden. And now of course, I can see my items,which is exactly what I wanted. So we're donewith our index HTML. And we can proceed toJavaScript setup our awesome functionality.Alright, and once we have our HTML in place,we can start working on our functionality.Of course, in order to do that, we need tonavigate to App j s. And our first order ofbusiness is going to be a little bit boring.But we might as well get out of the way. Sowe can focus on more interesting stuff. Andthat is selecting items one by one, I'll selectall the elements that I would want. And I'llstart with my alert one. And for that, I'lluse my query selector. And then the classfor my alert is alert. Right? It has donearound let's copy and paste two times or notnormally, one time, my apologies one time,and this one will be form. And of course,the class form, my form is grocery form, groceryhyphen form, then I'm looking for my itemfor my grocery item, and that one has thead. So I'll just call this grocery. And whatI'm actually seeing right now is the input.And for this guy, just to spice things up,I'm going to go with an ID, and the ID isgrocery. And then we have a few more queryselectors, I'm looking for my Submit button.And I'm just going to call this Submit button.Then again, we have document query selector,and the class name is dot, submit btn. Oncecopy and paste three more times. Next oneis the container. Now what is the containerthat is my grocery container, where I havethe list on the clear button. So class inthis case is grocery container. After we havethe list. That of course is this one, a divwith a class of grocery list. And I'm justgoing to name it simply list. So list andlet's delete also, the class of Submit button,we're looking for grocery money first. Andlast one will be my Clear button to clearbtn. And then the class name is clear button,clear button. And I would want to set up alsosome variables that we'll use later on. Soright after the Edit option comment on setup three variables. One will be edit element.So let's edit element by one for the timebeing will be undefined. I'm also going toset up a flag so edit flag. And of course,since we're not going to edit right from theget go, we're only going to edit once we clickon the Edit button. That's why it will befalse by default. So red flag is false bydefault. And then the last one will be editID. And we'll use this ID in order to geta specific item in the list. So right edit,edit added ID will be just equal to an emptystring. So we are set up and of course nowwe can start doing more interesting things.We'll start by setting up event listeners.And the first event will be listening to willbe Submit. And that will be on our form. Soright where we have a comment for event listenerson just add here submit form, submit, form.And then since the form has the variable ofform, I'll just add event listener. And I'llbe listening for submit event. And just tospice things up as a function of the callbackfunction, I'll use it as a reference. So insteadof writing it here, function, and then whatevercallback function we have, we'll just changethings around. Because we know that we canuse our callback functions. And we can justreference them. So for example, I could setup all my functions in here, and then referencethem in my event listener. And I know thatI'll call this one add my item mark. So andnow I just need to come up with a function.So my function Add Item. And I do need tohave my rental object. And the reason whyI would need to have my event object. Becauseremember, by default, when you submitted theform, while the form was trying to submitthese values to a server, and that's somethingthat we wouldn't want. So if you're safe,and there, he will save your address. Andif you'll type in some kind of value, or evenif you wouldn't type in the value, once you'resubmit, we're trying to submit a form. Andthat's not what we would want. So instead,I would want to go with event that is, ofcourse available to me, because I have theparameter of a man, I would want to set upprevent default, that prevents that defaultbehavior. And once that is done, then I wouldwant to access the value for the value thatis in my grocery, why it is in a grocery because,of course, I'm targeting right now my input.So I target the input and assign it to a variable.And now I'd want access to that value. Howcan I access that value, I can use value property.So we'll just console log, grocery, and thenvalue, you'll see that whatever we type out,so for example, item in console, we shouldhave access to it. So let me open up my devtools. And of course, there is my item. Now,of course, I can submit it, for example, withoutany kind of value. And then I'm just gonnahave the empty string. So that's the firstthing, I'm going to have my value, so I'mgoing to be always grabbing my value, andI'll assign it to a value variable. And I'mgoing to call this grocery value. Why? Becausegroceries Of course, my input. And then inorder to access the value, I'm just need touse the value property. And now I sign itto my variable. Now also when we will setup our items. And before we even add themto our list, I want to have some kind of uniqueIDs. Now, this is not going to be a seriousapproach. Just because this is a practiceproject, we're just going to do a little cheating,where I will have my ID. And then in orderto get my unique ID, I'm just going to usea new date, then invoke it, then rememberwhen we use get time when we got back, althoughit was that time in milliseconds, right. Sothat was the number. And I'm just gonna convertit to a string. And if you're wondering whywe're converting all of this to a string,because later when we access this particularID, it's going to come back as a string. Sowe might as well set it up as a string. Sofor the time being, if we would want to seewhat we have in console, once we'll submitthe form, you'll see some kind of values.So this is just going to be some kind of uniquenumber. Again, you're not going to do thaton a more serious project. In this case, justbecause we would want to get that unique IDand I don't want to include any kind of externallibraries or anything like that. And I don'twant to calculate what is the number and anincremented and all that, we'll just do alittle bit of cheating, where we use new date,and get time to get that in milliseconds.And right away, turn it into a string. Sowe have these two things we have whatevervalue is going to be coming from our input.And then we have our unique ID. And essentially,once we are submitting the form, we will havethree options will have an option off justadding the item to the list. So if we're notediting, so if the Edit is false, then we'llhave another option where we are earning.So everything will be true. And the thirdone if the user hasn't added any kind of values.So in here, let's set up our if there is goingto be some condition, okay, then there's goingto be if else Or else if another conditionover here. And then lastly, we're have ourelse so have these three conditions. And thefirst condition will be if the value is there,okay, so I'll say if the value is not empty,and I can write it the long way. This is whatwe'll do right now. And then eventually, I'mgoing to show you a shortcut. So in here,I can say if the value is not equal to anempty string. And so I need to use my handoperator, I'm not editing. So a red flag isequal to false. So what this means is that,I would want to add this item to my list.If that is the case, beautiful. This is exactlywhat I'll do. Now, another option I can haveis, if unnecessary not is one too many. Justneed one. Another way i can do is if my valueis not empty, that is, again, something thatI would need to have. But I am editing. Soof course, again, I can write them on whereI can say, value is not equal to an emptystring. And edit flag is equal to true. Sohere, I can just say, is equal to true. Andlike I mentioned, yes, I will show you a shortcut.And of course, in here, I also would needto set up and so if both of these conditionsare true, then there's going to be some kindof code on last one will have empty values.That's why I'll just say, unfortunate, I mean,we'll just add console logs, so say emptyvalue, then the second one is running. Soconsole log editing. And as a sign on, wewon't be able to see anything, because wehaven't set up event listener to our Editbutton. And then the first one is add an itemto the value, or I'm sorry, to the list. Soright here add item to the list. And I'llsee something interesting, where if we have,of course, some kind of value, then we'regoing to have either on the first two, soeither will be editing, or not editing. Andas you can see, the only difference is goingto be the value for our edit flag. But thenif it's going to be empty value, well, forthe time being, we'll just have a empty valuein the console. So if I'll try to submit it,check it out. Now I have empty value. Andof course, I can submit all day long. Andthis is what I will get back. Now, if there'sgoing to be some kind of value even one letter.Now of course, I can see that I have add itemto a list. Why? Because my value is not equalto zero. And then of course, edit flag isfalse. And again, error flag will be falseby default, it'll only set to true once weactually click on that Edit button. And likeI promised, I also wouldn't want to coverhow we can shorten this up. And we can dothat because every value in JavaScript iseither true or false. Now what happens witha truth value in the condition it will evaluateto true or false, of course will evaluateto false. So for example, we are getting thevalue for our input. And essentially we'regetting a string, the difference is eitherwe're getting an empty string, which is afuzzy, so it evaluates to false. Or we'regetting some kind of string value, which evaluatesto true, because empty string is of course,falsie value. So for example, I can just setup some dummy if statement. And I can justsay if value. And in this case, I'm just gonnahave console log that I don't know, valueis truly value is true. And I believe that'show you spell it, truly. So let's save it.And now you'll see that once you type somethingin, you'll submit, it will say value is terrific.Now, of course, in this case, if you havea knot operator, so what you're checking here,if the value is not true, if it's false, thenof course this will be false. So in here,just have the empty string, and I'll see thatvalue is false. So again, we're just usingthe fact that each and every item in JavaScriptwill be either true or false. An empty stringis palsy. So for example, if you place itover here, and the value will be empty, youwon't see anything in the console. Becauseit is positive. So this one won't evaluateto true. Now why I showed you the NOT operator,because we'll use it for our error flag. Sohow we can shorten this up, notice where wehave the Well, I don't need to check it fortwo empty string, I can just say, listen ifthe value is true, so if the value will beequal to an empty string, then we know thatthat is a falsie value correct. So in thecondition it will evaluate to false. So thatmeans is that once I hit my F, then of course,I'm not going to follow up with my code, becauseit's not going to meet the condition. It'snot going to be true. And as far as theirflag instead of setting is equal to false,I can just use the NOT operator, where I cansay if edit flag is not true. So for the valueI'm checking if it is true, then for the Editflag, I'm saying if it's not true, now whatit is by default, it is false. Correct. Soof course, this condition will be met. Unless,unless, of course, we change it to true. Sothe same way we can shorten this one up, we're,again, I'm still looking, whether there'ssome kind of value, because even when I'mediting, I still want to have something asa string, because there's no point for meto edit something, or just leave it as anempty value. And then as far as the Edit flag,I can just say if it is true, so if there'ssome kind of value in input, and if the Editflag is true, if both of these conditionsare met, then of course, we're proceedingwith our code if the value is there, but theadded flag is false, this is essentially whatwe're saying, then, of course, we would wantto add it to a list. So that's how we canshorten up our if conditions. Okay, we haveshorten up our if statements. So one by onecan start working on our condition. And we'llstart with the simplest one. And now one isor else one, because we just simply need tohandle the fact when the user doesn't enterany kind of value. And we'll just start simplyby displaying on our alert. So within thehouse, I'm just gonna target my alert element.Since it is in the alert variable, I can justsimply say alert, and then text content. Sosome kind of value, or just right over herecontent, and I will be equal to whatever wewould want. So it's a for the time being hereempty value. And don't worry in a second,we will set up a proper function, and justwant to showcase that this stuff will work,even though our function, and then I wouldwant to add some kind of class. Now what classI'm looking for in a style CSS, if you'llsearch for class, we have alert. And thenwe have either danger. What do we have success,that's what we have. So one is going to bethe red background and red text. And thenthe other one, of course, is going to be greencolor with a green background. So within theapp dress, just because of course, it is goingto be a danger, or you know, user hasn't enteredthe value, well might as well add that classof danger. So in here, I can just say alertthan class list. Mark zero, let me close thesidebar here. class list online, I want toadd, another class I'm looking for is alert.danger. What's this one. And then now of course,once the user tries to submit the form, withoutadding the value, check it out, we'll haveour empty value up there on the top. But thething is, I would want to use it in multipledevices, if you remember when I was showingyou the project. For example, once we deletethe item, once we clear down the list, oncewe I don't know edit and all that, I wouldstill want to work with my alert. So insteadof doing this manually each and every timewe need to do that, it would be a better wayif we would set up a function. So right belowour Add Item, we'll have another comment.And of course, this one will be display alert.So we'll have a function, it will be called,you guessed it, display alert. Now this functionwill take two arguments, a text, show whateverwe would want to actually show and the secondone is the action. No action just means whatis going to be the color, are we going touse this alert danger, or we're going to usealert success. So it is going to be red text,or is there going to be green text. Now, theway we set that up is we still use both ofthese values. However, I'll cut them out,because of course, I will run my functionhere. And then instead of setting this upto some kind of hard coded value of emptyvalue, of course, this will be equal to mytext. So whatever I place here as the argument,and the second one will be action, and forthe action, I'll have two choices, dangeror success. So instead of adding this clausethis way, I can use template string, and thenI can just say alert, and then whatever isgoing to be my action. So whatever is goingto be my argument, if I have it this way,so of course, this action will be danger.So let's invoke our function, display alert,what text I would want to have is please entervalue. And then like I said, either successor danger. So I'm going to go here with adanger because I would want my text to beread. We'll save it and then Once the usertries to submit the form without enteringthe value, very Oh, we have please enter value.Now one thing that I would want to add, though,is that we remove that alert, because I don'twant that alert to be there all the time.And we can do that by running set timeoutfunction. So right below, where are we settingup our alert and all that, we'll have anothercomment, remove alert, and then I'll use myset timeout. And remember, set timeout waslooking for two things. It was looking fora callback function, so one function willrun. And then the second one was in Hong Kong,so my callback function in Hong Kong, I wouldneed to invoke it. And since it is, again,in the milli seconds, you've heard one, onesecond, I will need to write 1000. And thenwhat I would want to do within my callbackfunction, most simple, I'm just going to grabboth of these things. Again, copy and paste,text content should be set to an empty string.And then I would want to remove the same classthat I just added, show whatever class I added,I'll just remove it, then, of course, we cantry it out, try to submit within the router,and within one second, our alert is gone.Again, why we went through all this hassleof setting up the function, because we willrepeat. For example, once we'll add the itemwill display that there was a success, weadded the list with an E for example, theuser tries to delete, then, of course, we'lldisplay it. And hopefully you get the gist.So since I'm repeating the same functionality,I might as well set up a nice function thatjust does that for me. Okay, and once we havetackled the easiest scenario, where user doesn'tenter anything in format, and tries to submit.Now, of course, let's tackle the big beast,where if the value is true, so if there'ssome kind of value, and the Edit flag is false.So if that is the case, of course, we wouldwant to add that item to a list. And we'llstart very simply, by creating some kind ofnew element. Now what element I'm creating,oh, I just need to check what I have in theindex HTML. So I had my list. And then I hadan article with a class of grocery item. Sothis is what I want to create. So if there'ssome kind of value, if I'm not editing, thenI would want to create an item. So I'm goingto go with some kind of variable name, I'mgoing to call this element that is document,then create a moment. So we're going withthis function, and then what we would wantto create what kind of element Well, sincein the index HTML, I have my article, untilI'll create the article. So I'm going to gohere are they. And then there's two thingsthat I would want to add, I would want toadd a class, since all my articles have thisgrocery item class. And I would also wantto set up that unique ID as a data set. Sowe'll start with class, because that's thesimplest one. So I'm just gonna say add classon in here. All right, a element, element,and then class list, add, the class is groceryitem, that's the class that I would want toadd. And the second thing is that ID and again,we'll use this ID in order to edit. And I'lluse my data set to add the URL. Remember,if the index HTML had data, and then whateversome kind of value, I was able to access it,using the data set property. So in this case,we'll add that dynamically, where I'm goingto first create my attribute, so I'm goingto call this lead and you're not, we'll say,add ID. So let's create a variable const attributeis equal to document, then we are creatinga attribute, create attribute on fly. Andthen I'm going to call my attribute data hyphenID. So what's important is to have this data.And then since I would want to access as aID property, I'm just gonna say hyphen dataID. So again, everything that we did beforejust the difference was that we were manuallysetting this up in the next HTML. Now I'mdoing that on the fly. I'm creating the attribute.I'm just naming a data ID and then later,again, I'll use my data set in order to accessthat value. And then I do need to set up myvalue. So attribute value, and that is goingto be equal to my unique ID, the one thatI'm just creating here. And then of course,once that is done, I would want to add itto my home. And so in here, I'm going to rightelement, the set attribute node, that is importantthat is the method name, and then I'm justadding this attribute. And then once thisis done, I would want to add my HTML. So inhere, I'll go with element, the inner HTML,and I'll set this equal to a template stringNow in this case, we do need to be carefulthough, because you don't want to grab thearticle. Okay, because we already set up thearticle, what you want is everything withinthe article. So cut it out, and then again,leave this article where it is in the indexHTML. And we might as well come deleted, becausewe'll add the rest of them dynamically anyway,just make sure that you grab everything withinthe article, not the article itself. Becausewe already said, the article up here, withan ID, the ID, with the classes and all that.Okay, just make sure you follow the same setup.So I'll get rid of my article, because therest of them will be dynamically Anyway, I'llsave my index HTML, and then in the app, js,or copy and paste, whatever I had within thearticle in my template string. And now ofcourse, I would want to change this hard codedvalue to whatever I'm getting from my form.So this is going to be equal to value. Butof course, we're not done. So now we set upthe Omen, but we would need to add it to ourlist. Correct, because this was just per stepof setting up the item. So in here, when weadd a comment, append, child, and that willbe equal to my container, or I'm sorry, notcontainer list. Correct. Because we were selectingour list that I don't want to still there.And we selected here, when we were settingup our variables. I want to use append child,list, append, child, and now I want to addmy element. So let's type here element, okay,we're adding it to the list, we're still notdone, we would still want to display the alert.So display alert. Now what I would want todisplay, I would want to say item added tothe list item added to the list. And thenwhat is going to be the color thing that shouldbe success. So that's one we're adding. Andthen also I would want to show my container.Remember, in style CSS, I said that we'rehiding the container, our I have the classhere, show container where visibility is visible.So now what will happen in the app js, ifthis is success, if we have added this toa list, but of course, I would want to showmy container. I'll just say here, commentsshow container. And I have my container variable.I already selected my container, class listand then add on I would want to add show conpainter. Let's see what we'll have again,the user will try to submit them developers,please enter row. Okay, good. And then wego with item. And of course, now I have myitem, my alert. And I have my awesome twobuttons as well. Beautiful. Now there's twomore functions that will add over here. Butfor the time being, we'll just set up placeholders.Why am I doing that? Because I think it'seasier if we have them as placeholders becausethen we don't need to scramble around ourapp j s and try to find it because of course,we'll be adding more code. So might as welladd them as placeholders because that wayI won't forget once we get there. Okay, nowwhat are these functions add to local storage,and the function name will be exactly thesame add to local storage again, for the timebeing is just going to be a placeholder. Andin here, we'll pass two arguments ID and value.And then another thing will be set back todefault. So set back to default, the functionand will be exactly the same. So set backto default, let's invoke both of them. Andnow of course, let's just set up some kindof placeholder because otherwise, we'll getbig fat errors. Soon here, I'll say set backto default, as far as the local storage isgoing to be my function. And function namewas add to local storage is going to be lookingfor two things, ID and the value. For thetime being can just say log added to locallocal storage, the default one will be somewhatthe same, where again, we'll have our function.And we'll just console log something. So sayset back to default. And this is going tobe a function. It's not going to take anykind of arguments. And we'll have a consolelog set back to default. Again, we're justsetting up placeholders because in my opinion,just going to be a little bit easier. Insteadof hustling around our document, once we wouldneed to add those functions because then weneed to find a specific place and then itjust introduces more Possible bugs. And Iguess that should do it for adding an itemto the list. Again, we just go with some kindof item. exalt here, and we can see that we'readding them to the list. And in this case,we're going to add milk. We can also add,I don't know, sugar, and all that. So we'readding them to our list. But as you can seein the console, we can see it added to localstorage and Doctor default, and all that.So this is something that we will fix lateron. Okay, and once we have our setup for addingthe item, why don't we right away fix theset back to default situation, where at themoment, we're just invoking the function,and we have the console log. But what we wouldwant to do instead, well, as you can see,as we're adding items each and every timewe do it, we still have the old value in here,right. So if I would want to add another item,I need to delete it and all that. So as faras setting back to default, we'll just makesure that things go back to our initial setup,I can tell you right away that in this particularcase, when we invoke Sam back to default,you'll be wondering, okay, why we're doingall these things. Since at this point, weonly would need to clear this value. And wewill clear this value, but we'll add our initialor I'm sorry, we'll add some additional things,why we're adding them right now. Because thisfunction will be called multiple times, inthose times, we would want those other thingsas well. Okay, that's why I'm just tellingyou that initially, we would be only lookingfor clearing the value. But since I alreadyhave the function, and since I'm going tocall it multiple places, I might as well setup the whole function. And then when we callthis function later, it will do its job. Soas far as clearing, I'll devalue, I'm justgoing to go with Grocery, and then value andthat will be equal to an empty string. Andthen I'm going to add those values that atthe moment will not make sense. So in here,I'm going to say Edit flag is equal to false.Okay, good. And then I would want to add edit,Id set it equal to an empty string. And lastone will be Submit button. text content, textcontent is equal to submit. And again, atthis point, it looks like an overkill, becausethe only one we're really looking for is thefirst one grocery value is equal to an emptystring. That's why when I add for example,your milk notice, before adding the next item,I have empty vouchers in here, because I'mjust saying you know what grocery value, youshould be empty string. And only when theuser starts typing it out, then it's goingto show I cannot hear sugar. And of course,it's going to be the same thing where everythingis wiped clean. These ones Yes, at the moment,a flag is already equal to false, edit IDis already empty string and submit text contentis already submit the letter once we willcall this function in different scenarios,they will come in really handy. Alright, andonce we can add items list, I think the simplestone will be removing all items. So still withinfunctions. So still within functions and notwithin local storage, I'll just place my deleteitems or clear list whatever you would wantto call it function. Now, of course, I wouldwant to set it up to my Clear button. So wewill need to start by setting up event listenercorrect. So we have one for form submission.And next one will be for clearing out thevalues. So clear items, I'll use my Clearbutton is the last election that I have clearbutton, clear button, then add event listenerwill just be listening for click events. Andthen the function name will be clear items.Again, just to spice things up, of course,we can write our callback function right here.But since we have done that quite a few times,we might as well, there's some different setupsas well. So I'll place my one before sendback the default. But of course, it's up toyou, as long as you don't set it in a localstorage because otherwise, it's just goingto be confusing. So once right here, the functionname, clear items, clear item status, my functionas a function, clear items, I'm not gonnapass any kind of arguments. First of all wantto select all the items. So once I click onmy Clear button, I would want to select myitems. Now which items am I talking about?Well, the ones that have this grocery item.Now of course, I cannot show it in the indexHTML anymore. We're just adding this dynamically.So remember, when we are creating these articles,we're adding this grocery item. So now onceI click on the clear items list, I would wantto get all of them So, let's scroll down clearitems will use some kind of variable items,he is document, then query selector all, sincejust gonna spit be back the list, and thenthe class name is grocery item. Now I'm notgoing to console log it because again, wehave done that quite a few times. And in here,I will just want to check if the length ofthis node list is bigger than zero, then sinceI would want to clear out the whole list,I'm just gonna iterate over them. And thenI'll use my list variable, the parent container,and then remove that item from the list. Soif items length, so if the node list has anykind of line, that means what that means thatI have added items, correct. And then if thereis the case, then iterate over those items.So for each and since I can access each andevery item, in my callback function, I justneed to come up with some kind of parameter.In my case, that is going to be the item.And then I'll use list. So there is the parentagain, that is grocery list. And it has amethod of remove child. So since in each iteration,I can access that child will just pass ithere. I'll say list, remove item, list, removechild, and then I'm just passing in that item.Now, we're not Dumbo. Because even thoughwe can remove all their items and all that,what else we would want to do? Well, we wouldwant to of course, set some things aroundhere, where for example, if we remove itemsfrom the list, I would also want to hide thecontainer. Now how is that going to look like?Well, we would need to remove that class ofshow container. So now it's this route, I'mgoing to go with item, then I don't know I'mgoing to go with item number two, a lot, bothof them to the list. And once I clear dayitems, notice, I still have my clear itemsbutton. And that's not what I would want.That's why we'll go over here with containerclass list. And then remember, previously,we added the class and now we're just removingthe class. What is the class name it is showcontainer, we just remove this class. Okay,awesome. Now also would probably want to displaythe alert, not we just cleared out the list.Remember, we have functions that then thevalue will be empty list. And then I wouldwant to set it up as a danger. Now if youwant, you can set it up as success going isjust the preference of what kind of coloryou would want to set up. Let's see, again,item, an item number two, they're not clearlyitems. And then I have my alert, awesome.But I also hide my container. So I don't seemy clear List button anymore. And then orderwant to do two more things, I don't want toset back to default. And then I would wantto also remove the whole list from my localstorage. Now going to local storage at themoment will not make sense. So that's whywe'll come into salt. I'm going to say localstorage, then the method name will be removeitem and I'm going to be looking for a list.Again, don't worry. Once we get to the localstorage, I'll cover this in detail. But forthe time being just add this one liner, andthen we'll use our set back to default. Soback to default. And you're probably wondering,okay, why we're sitting in this case backto default, I'm going to show you with a finishedproject. So what I would want is, for example,add one item, I don't remember to whateverthree. So once we click on the Edit, noticehow I'm changing this value over here in thebutton. But there's also some things thatI'm doing behind the scenes. Now what I don'twant is, for example, if the user starts deletingother items, this still stays as edit, orif I'm clearing all the items. That's whywe're setting back everything to default.Again, at this point in time, you're like,Okay, this is an overkill, but it's not goingto later once we add this edit functionality,this will make sense where we sitting backeverything to a default. So that should beour clear items functionality. Again, we selectall the items we added dynamically, we takea look. If the length is bigger than zero,what that means is that there's at least oneitem. Okay, if it's that case, then of course,we just iterate over them. I can select eachand every element. And then I use list theparent on the parent we have removed childmethod, and I just pass the same item in here.Good. Now once that is done, then of courseI would want to remove my class. I don't wantto hide one I'm sorry, show the containeranymore. r1 display some kind of alert, setback to default and eventually we'll alsoremoved from the local storage. Perfect wecan add item we can clear the list So I guessit would only make sense. If we would startdeleting with edit, and delete buttons, orbefore we can set up anything as far as functionality,we also need to understand when we'll haveaccess to them. So let me show you what Imean. I'll navigate back to our project, andyour initial thought would be following, whereif we scroll up, I can notice that I'm addingone button for editing, and a second one fordeleting. And then one has the Edit btn class.And the second one is delete button class.So you're probably thinking longer, okay,where am I event listeners, I'm just gonnaset up one for editing and the other one fordeleting. And I'm just going to show you withone because essentially, it will fail. AndI'm going to go over why. So we can just probablysay, here, const, delete btn is equal to document,then we can use maybe query selector doesn'treally matter. And then we're just gonna saydelete the Li btn. That's the clause thatI'm targeting, are gonna double check. Otherwise,you'll think that it doesn't work becauseI have some kind of bug. And let's consolelog it. Because of course, we can only addthat event listener if that thing exists,correct. And once you arrive, you'll see thatit's not. Why do you think this is no? Andthe short answer is because we're adding themdynamically. So what happens once we haveour app, if I add this item, initially, whenit loads, we have no access to these two guys.None. So you cannot just set it up. Okay,there's a delete button. And then I wouldwant to add event listener, like you did,for example, with clear button on the forum.Why we're able to do it because Clear buttonis right here, of course, initially wantsmore app gerris loads, or can simply targetall my things. But in this case, it won'twork. I have no access to delete, or editbutton. Now I have two options. Either, wecan use the fact that there is such thingas event bubbling. So for example, I couldset up a event listener on my parent. Andthe parent container, in our case could beprobably grocery list, right? So if the userclicks on list, land will check either ifit's a Edit button or delete button. And thenof course, it will do something either editthe item, or delete item. But since we havecovered already bubbling, I think it's goingto be a little bit more interesting, wherewe take a look at the setup where we targetthose buttons with selectors when, and thisis very important when we have access to them.Now to show you when we actually have accessto them, let me first of all get rid of thisgibberish. So there's no event listener. Okay,how are you deleted? Awesome. Let me keepon scrolling down. And now notice somethinginteresting, where I added the element, okay,good. But then when I have access to it, whenI actually created the element, correct. Andremember, we could use a non document, andthen query selector and then look for an editbutton. In fact, I can just use that element.Correct. So what I could do over here, inthe if where I have value added flag is true.So once I'm adding this item, this is wherewe have access to those buttons. So this iswhere we can set up those event listeners.And then of course, we can just sum thesefunctions in here, where we have all the functions.So for example, here, I could have edit function,then copy and paste, and I can just have delete,I believe it will work on Delete first, butyou get the point. I'll have these two functions.But I'll target both of them when I have accessto them, not when the upload. But when I actuallyhave access to them. Or again, the other optionyou have is setting up a event listener ona grocery list, and then check for those targetsand then do it that way. If you would wantto have a challenge, you can probably onceyou're done building the app This way, youcan maybe try it out the other way, wherewe're using the event problem. Now in my case,I will target both of these elements whenI have access to them and only use my element.So I'll start by setting up some kind of variable.It's going to be delete btn. And then again,instead of document, I'm using element, alright,and query selector, and now I'm looking formy delete button. Okay, and of course, inthis case, class needs to match. Otherwiseit's not gonna make sense on target The sameway my added one. So copy and paste. And I'lljust name this edit. So Edit button. And hereis going to be Edit button class. And nowI want to set up my two event listeners, clickevent listeners for Edit button, and the actualEdit button. So I'm going to go with deletebutton, then add event listener, add, I'msorry, not this one, add event listener. Andthen I'm going to be listening for click event.And as far as the callback function, again,we can write the functionality in here, butit is getting already quite busy. So justsay that there is going to be a delete itemfunction, or copy and paste. In this case,I'm looking for a red button, a ribbon, andthen the function name will also be added.So we do need to of course, set up some kindof placeholders at least. So let's scrolldown, we have our delete function, I'm gonnahave function, and then delete, delete itemfunction. And in this case, for time being,we just have it as a simple function, andin the console, log and resume, say item deleted.And I'll do the same thing for my added one,just so we can see that we have access toboth of them. So this case, this is goingto be added item. And I'll say, not item addededit item, edit item. Now, once we have bothof these things, let me add some kind of item,what I'm looking for is some kind of consolelog. Now I can see that I'm editing data,in this case on deleting data. So yes, inthe following videos, we will set up the functionality.But trust me, if you don't have this initialone, where you actually have access to them,anything that you do later on just wouldn'tmake sense anyway. Because whatever you wouldwrite in your actual function, you wouldn'tbe able to call it that callback function,because you will have no access at the verystart two buttons to edit, and delete. Becausewe're adding them dynamically. We're not inthe index HTML, when our app JS loads, okay,we have access to both of the buttons. Now,we just need to set up functionality in deleteitem, added item. And I think I'm gonna startwith delete item, because it's just gonnabe a little bit simpler. Now what I am lookingfor is though the event object, so that'swhy I'll pass here as a parameter, becauseI would want to access the parent container.So what I would want to do is, once I clickon my button, my delete button, I would wantto get my parent compare. Now what is theparent container, in this case, what I needto think about it, we have a section center,then we have our container. And then of course,I have my list. And then in here I have mygrocery item correct. Now I have my buttoncontainer. This is where my buttons are sitting.But once I click on Delete button, I wouldn'twant to access the button container, I wouldwant to access the grocery item. Why? BecauseI already have reference to grocery list.So again, I can use my remove chop, the onethat we use previously, when we cleared outthe list. In this case, I will we will useremove child with specific item. So our parent,so I'll click on a button. I'll look not formy parents, my direct parent, but actuallyfor my grocery item. And then once I'll haveaccess to that element, I'll just remove itfrom my grocery list. So that's why I needOf course, my event object. And I'm just goingto have some kind of element variable thatis going to be equal to event than currenttarget. Current target why I'm using currenttarget, because this is already set up ona button. So I don't want to actually by mistake,select for example Font Awesome icon, I wantthe button. Because if it's Font Awesome icon,then, of course, the path is a little bitdifferent because the actual button is theparent. So something to keep in mind. There'scases where you'd want to use target, whereyou're actually seeing what you're clickingon. But then in this case, you want the currenttarget because the path is very specific.So I'm going to go to current targeting. SoI'm clicking on a button, I already know thatand then parent element. And since I wouldwant to get the grocery item, I need to goto levels up. So this is going to give himmy button container. But I want actually parentelement as far as my grocery items. So onceI have selected my element, then like I saidI would want to use list, remove, child andthen I'm going to use my element So we'regoing to go here with element. And you'llsee how nicely we're moving this item. SoI'm going to add item. And then of course,once I click, I removed from the list. Nowwhat other things I would want to do, though,because yeah, removing the item from the listis awesome. But I also would want to hidethe container. So in this case, I would wantto check, well, how big is my list, becauseif I have other items, then I wouldn't wantto hide lists. But in my case, for example,since I had only one item, if that is thecase, then of course, I would want to clearthe list, I can do that by removing the showcontainer class. So here, I'll say if listchildren, and then length is equal to zero,then of course, what I would want, well, Iwould want container, class list, remove,and then we'll go with show container. Soshow container should be removed. Let's tryit out again. item nine, this is my item.And once I click, notice, my list also disappears.Beautiful, then we would want to go with displayalert. So display alert. And then I'm justgonna say item removed. Removed work. So we'lladd here, danger, okay. Again, that's yourpreference, whatever color you would want.And I'll set it back to default, again, whywe're doing that as far as deleting the item,because I don't want user to start editing,and then deleting items, and then I'll stillhave those edit setups. Okay, that's why we'rejust going back to default. So again, thefunction name was set back to default. Awesome,that's done. And then lastly, I would wantto also remove it from local storage. Butthis is where I'll use my IDs. So again, I'llhave my common here. Remove from local storage,Okay, awesome. And then I have my function,of course, now, we haven't created a function,but it's going to be there eventually removefrom local storage, and then we'll pass inthe ad. Now we don't have the ID Don't worry,we'll set it up in a second. So I have myID, I'll comment this out. But down below,where I have local storage, I will set upthis function. So function, and again, thename will be removed from local storage, we'llpass in the ad. And then I don't think I'mgonna have the console log, because probablyour console is going to get quite busy. Somight as well comment, as well. But then there'sgoing to be this function. Now, where arewe going to get this ID? Well, remember, wehave the data set correct. As we're addingthe item, you'll see in a console, that orangeor not console elements. Notice if I checkout my section center, my show container,my grocery list item, notice how item hasthis data ID. So that's the one we're addingdynamically. And now I would want to accessit. Okay, so let's move up where we have theDelete item functionality. And since I haveaccess to the element, when I use parent elementand parent element, I can also access thesame ID. So I can just go with const ID isequal to my element, then remember, the propertyname was data set. And since I named my oneID, I go with.id. If you name this banana,or Bugs Bunny, then of course, use the samevalue. So I'm going to get my ID. And nowwithin the local storage, removed from localstorage, I will pass this ID again, we willget eventually local storage, don't worry,I'll cover this in more detail. But yes, therewill be a function removed from local storage.And we'll use this ID that we're accessing.With data set ID. Again, we have current target.So that is our delete button. Correct. That'swhy we're using current target, because wehave the Font Awesome. And that might be alittle bit confusing. So since we are settingup event listener on a button, I'm grabbingthe actual button. And then I have parentelement parent element. So that's how I accessmy element, I get my ID, I removed from thelist from the parent, I also remove show container.If there are no more items on the list, ordisplay alert, I said back to default becauseI don't want us to start editing and thenremoving items. If the case is that the useris adding and removing an item, I will setit back to default. And then eventually I'lljust remove from local storage. Alright, andonce we have delete item out of the way. Nextwe'll focus on Edit item. Now when it comesto edit item, it's going to be a two stepprocess. Because not only we would want toset up the functionality in here, we willalso need to handle it when we're submittingthe form because remember, we were checkingwhether we're submitting the form or we areediting it We'll start the same way like wehad in the Delete item. And we're just gonnacopy and paste the first line. So what I'mtrying to access here is the grocery item.So this is going to be exactly the same. Now,there's also a small bug in here, it shouldbe element, not whatever I had in there. Soof course, if I would have that bug, I wouldn'tbe able to pass in the ad that would be onthe phone and, or functionality will eventuallybreak. So just make sure that you have hereelement, and data set, and then ID. Now oncewe have the element, now I'd want to set upthose edit items. So remember, we had addedelement red flag and edit ID. So this is finallythe time when we'll change these values around.So we're going to navigate back to our edititem, and I'm one by one, we'll apply thesevalues. So we'll start by set edit item, thisis going to be my edit element. So that'sthe first thing. And I'll set it equal toevent, current target. So the button onclickevent parent element, and now I'm lookingfor a sibling. So why am I looking for twosiblings, because I'm gonna have my item here.And you'll see in a console problem make thisone a little bit bigger. We're looking forour item. Yep, that is true. And I don't knowwhy I'm looking for should be looking in here,I look in a grocery list, I have my item.And I'm looking forward to startle. Now remember,the parent container will give me this buttoncontainer. Correct. So parent element is thebutton compare. But then I'm looking for thistitle. That's the value that I would liketo access. And, as we're traversing DOM, aregonna just say previous, previous years work.So that element, and then sibling, sibling.So that's gonna give me that title. So onceI have that title, I can start setting upthe values. And in here, I'm just gonna sayset form, value, set form value. And thisis going to be equal to my grocery value,because remember, we have the grocery. Andthen we also have the value. So instead ofcleaning it, instead of setting it equal toA empty string, I'll set it equal to the editorelement. And then in our HTML innerHTML. Again,this is just going to give me this name, whateverit is, whether that is the eggs, or whetherthat is milk, or whether that is an item.Now again, of course, it's going to give methat specific value for that specific item.So I'm going to have milk, and I'm going tohave beer, you will see the moment I clickon the item. Question here, I have the beer.Why? Because I go to the parent. That is mybutton container. And then I'm looking formy title. So this is going to give me thattitle. And then I just use my input, it hasthe value property. And instead of grabbingthat property, in this case, we're settingthat property, we say grocery of value, andthis is going to be equal to our edit elementin our HTML, then, of course, since I'm editing,what I would want, I would want to set editflag equal to true, correct. So we're goingto go here with edit flag, and then we'resetting it equal to true. And then the lastone will be edit ID, someone wrote with editID and that one is equal to my element. Andagain, I will just want to access that dataset. Because for both of them, of course,there is going to be the unique value. SoI'm going to go here with data set. And thenthe ad is that as of course, my attributename. And lastly, I would want to change thevalue in my Submit. Because now at this point,I'm editing, I'm not just going to be submitting,I'm going to be in fact editing. So in here,we'll say submit text, and then content isequal to read. So let's save it, we will testit out. And then of course, we'll head upand fix our Submit. Because at the moment,we just have the OS or df. So we're not handlingright now, our edit functionality, we're goingto let's start with milk, and beer. So again,if I add it, notice I have my milk, I havemy edit, all those values have been set. NowI just need to handle it when I'm submittingmy form. So I'm going to scroll up, of course,my first condition is if the value is true,and then also if the error flag is false.So that's when we're adding it to the list.Now the second one is if the Values true.And the Edit flag is false. Because one thingwe need to keep in mind, it will delete itand try to actually submit will still havethis please enter value. So hit this else.And this is exactly where what we would want.Because remember, I don't want the user toclick on edit, and then get the value andthen just delete it. Okay? And then say, Okay,now there's no, no, that's not what I wouldwant. So it's good that if the value is empty,and we'll still have our display alert, pleaseenter value and all that, but we're not goingto be submitting it to a list. And we're alsonot going to be changing our value. Alright.But what we would want to change though, okay,good question. And what I would want to dois grab my value, and assign it to my editelement. Remember, in here, I had my editelement, correct. And I assigned it to myspecific paragraph. And then I had my groceryvalue, and I assign it to add an element andinnerHTML. So I grabbed whatever I had inthat paragraph, and assign it to my form.Now I would want to do the opposite, whereinstead of assigning to the form, since thevalue, of course will be changed. Since we'reediting something, now I would want to grabthat value, and set it back equal to my paragraph.And since I assigned it to my edit element,the Edit element is of course, up here inthe top. When I'm actually submitting my form,I can say, You know what? The Edit element.So remember, that was our variable, edit elementhas an innerHTML is now equal to the value,where am I getting the value? Right here,grocery value. So again, first, we assignedit to innerHTML on our assigning it back.So we're kind of reversing right now. So editelement innerHTML, that is equal to our value.Awesome, then I would want to run my displayalert. And I'm just gonna say value valued,changed, like so. And then it's going to bea success, we'll have a green color. And thenthere's going to be two more things, we wouldwant to edit local storage, and also set backto default. So we're going to go and set backto default. Again, why am I doing that, becauseI would want to edit a next time as well.So now when I'll run my set back to default,remember, this one was grocery value equalto an empty string, edit flag equal to false,that ID is actually equal to an empty one.And then we'll have submit text content isequal to submit, because at the moment, wehave actually added and of course, we wouldwant to do that. Now there's one gotcha, though,because above set back to default, I wouldstill want to edit the item in the local storageas well. So make sure that set back to defaultis actually the last one. In here we'll havea function. And we'll call this edit localstorage, edit local storage. Again, at themoment, we don't have that function, but wewill have in a second edit local storage.And then there's going to be two things, Iwould want to grab that edit ID. So I don'twant the new ID, I don't want the one thatwe're creating from scratch. I want this guythe Edit ID. And remember, within the Editevent handler, we were assigning this to avalue that we're getting back from the item,the item have data set ID. And then of course,this was assigned to edit ID. So now we'repassing in down to our local storage. Andthe second one will be the new value. So ofcourse, this is going to be the new one wherethe user has changed that value. Now let menavigate down. And this case, I'll set upmy function. Now this one, of course willbe for my edit. So I'm going to go with editlocal storage is going to be looking for twothings, the ID and also the value. So let'sset this up. And now we'll be able to edit.So for example, if I right item here and itemnumber two, and then I don't know eggs. Andif I want to change my first item to somethingmeaningful, are going to click on it. NowI have my item I'm editing. So now I grabbedmy title assigned to my input, or two I havethe value. And now of course once I'll changeit to for example, I don't know milk, right?Once I'll click on Edit, now assign it back.Check it out. Now I sign it and of course,I have the milk. And as you can see, sincewe're keeping the reference of which itemit is, that's why we're not changing the order.So if I'm wearing the first time I'm addingthe first item. And the reason why we're allthe time setting back the defaults, becausethis is the behavior that I want where, forexample, if I'm editing this item, if theuser decides that you know what, at this point,I'll delete the eggs or clear the items, I'llset it back to default, because I don't wantthat edit to be lingering. Because as youcan see, once we press edit, we actually assignthese guys some kind of values. And I don'twant to keep on holding on to those values.If the user decides to delete something, thenthese will be set back to default as well.So that way, if there's some kind of editinggoing on, we'll have to start from scratch,instead of just making a big mess with someold values, new values, and all that. So thatshould do it for our functionality. And ofcourse, now we just need to focus on how weset up a local storage, where the moment werefresh the application, we still have accessto the items we have in our list. Alright,our functionality is working. Now, of course,we would want to work with our local storage,where each and every time we do somethingwith our list, we will update our local storage.And then once the user comes back to the application,we have all the values. And the reason whywe can do that is because when we work withJavaScript, of course, we work with the browser.And one of the API's that browser has is thelocal storage API. If you'd like to checkit out, just navigate to our developer tools,we're looking for application. And in here,we'll have a local storage. And essentially,what we're doing here is we're saving informationas key value pairs. Now methods we will needto remember as far as local storage. As aside note, we have access by default localstorage. So again, there's no external libraryor anything like that, we just need to runour methods. And the methods we have is setitem, get item, remove item. And one thingwe need to remember though, is we need tosave those values as strings. So that's alittle bit of gotcha. But the way we wouldwork with a local storage is we would writea local storage, local storage. And then likeI said, if we want to set item, we will gowith set item, then whatever name, so I'mgoing to use the name of a list. But of course,we can use whatever we would want. So forexample, I can say here, orange. But thenif I would want to say for example, save array,I would need to save it as a string. And forthat, we would use JSON, and then stringifymethod. And at the moment, I'm just goingto pass in value only. But of course, later,you'll see how we're accessing some kind ofarray. But in here, I could say I don't know,array of item. And item number two. So ofcourse, once I'll save it, I'll see that inmy local storage, I have my orange, and Ihave the item. So item and item number two.Now again, the gotcha is that we need to usethe stringify array, otherwise, this functionalitywill end. Now if I would want to get thosevalues, I could just say I don't know, let,or whatever cons doesn't really matter. Orangesis equal to local storage, then get item.And then in this case, we would need to usethis JSON parse. So I'll use my get item.Now what is the item name, it is orange. Butthen this whole thing, we will need to setup a JSON parse, parse, parse, and here, we'llpass in the local storage. Now I know thatwe already covered this when we talked aboutthe DOM during the tutorial part, but it'salways to have it as a refresher. So onceI'll save it, you'll see that if I try toaccess my oranges, I should have my list.So oranges. Great. So now I have item one,and item number two. So now I have the array.Now again, if you won't use the JSON stringifyand JSON parse, then you'll have a big fatmess, because again, we need to store themas strings. And if we would want to removethe item from local storage, again, we wouldrun all local storage, then remove item. Andthen whatever is the item name. So local storage,and then remove item. And then we just needto say water is the item name. In our case,that is orange. Let's do that. And now wecan see that in application course we don'thave the local storage. So essentially, thisis what we'll do in the apple local storageremoved from local storage and local storage.Now why our setup is going to be a littlebit complicated because of course, we're notgoing to store oranges in there. We'll haveto store it as a object. So it's going tobe a array with objects, and each animal andthe ID and then the value and then if we wouldwant to remove one, then we would need toaccess the ID all kinds of good stuff. Butthis is going to be a general setup wherewe have set item, then we have get item, andthen remove item. But we just need to usethe stringer for it when we want to save it.And parse once we want to get that value back,because of course, we will need to turn itback into array from the string. Beautifulonce we have jog our memory. As far as localstorage goes. Now let's start working on ourfunctions. And I'll start with the first one,add to local storage. Now, I guess I'm goingto leave this for your reference. So I'm justgoing to comment this out, just in case youwould want to use it later on. And then asfar as our local storage, here's what we'lldo. While we're running this one, well, let'sdouble check, we're gonna head up, and I cansee it if the value is there, and I'm notediting. And of course, all the way to thebottom, I'm running my add to level storage,I get this unique ID, so the same one thatI passed into the item. And then I also havethe value, so whatever is displayed on thescreen. So those are the two things that I'mpassing into my local storage. And like Isaid, I wouldn't want to store oranges inthere, I would want to store actually arraywith items. So I'll start by setting up somekind of item. And I'm going to call this grocerybut doesn't really matter what you call it.And that is going to be equal to my ID, orI'm sorry, to my object. And yes, in the object,I'll have my ID is equal to ID, and a valuewill be equal to value. Now one thing that,of course, we haven't covered e6. But essentially,with the a six, we have a little bit of shorthand,where if this value has the same variablename as your property, you can just shortcutit. Now again, what I'm saying here is, there'sgoing to be a property of ID, and that IDis of course, value of my parameter over here,the one that I'm passing in the same willwork here, where I have the property witha name of value, and that one is equal tomy value parameter. And if both of the match,shortcut is following, or I can just removethe second one. And now I have my object,the ID, and property value. And of course,whatever I'll pass it in here. And this isgoing to be the case where I would like toconsole log in, because I think it's justgoing to give us a good understanding. Soif all right here, eggs, and if all rightin the console, I'll have my ID. So that isthe value that is coming from the parameter.Remember, that was the second thing. And thenalso, as far as the value, we have the x.So again, this is just an iOS six thing wherewe can just shorten our syntax a little bit.But essentially, it's the same thing. Id isequal to ID, and then the value is equal tovalue, you both have the match. If this variablename that you're passing in, has the samename as your property name, you have a shorthand,my friend. So we can just save the typinga little bit. All right, we have the grocerynow what? Well, now I'd want to get thoseitems from the local storage, because eventuallythey're going to be there. Now you're probablyright away saying okay, but they're not thereat the moment. And yeah, you're right. Butwe would need to still set up some kind oflogic where initially they wouldn't be there.But eventually, we would also need to checkwhether they're there or not. Now, we cando that. We're going to set up some kind ofitems. Now this is going to be my array. Andthen in this case, of course, I would needto get that item right now how we were ableto get the item we use get item function.So on here, I'll say local storage, then getitem. But then Am I going to get the itemor no? Is there item with the name of list.And I can clearly see that in my application.Everything is empty. My local storage, thereis no items. So what am I going to get backin here? Well, let's see. items. And we'llhave a big fat undefined. We're going to gowith eggs. And yes, there is no, so thereis no item in there. Okay, that's good news.Now, we could set up a ternary operator, whereI'm going to say you know what, if there isan item, good, assign it to my variable. Ifthere is no item, if there's no list, thenjust set this up as a empty array. Okay. Now,of course, we can write an if statement hereif we would want. But we can also do it, likeI just said, with a ternary operator. Nowthe way that will look like is following whereI have local storage get item. Now again,either this is just gonna say yeah, that valueis there. Or we're gonna get back No. Nowif we're gonna get back know that if you rememberternary operator, we're just gonna set thisup as a empty array. Or if there is actuallythat value there. If the list is already there,then we'll have the actual value. Now remember,though, when we were using the get item, weneeded to use this JSON parse. So this isjust checking whether the item exists or not.If it does, then get me that item and usethe JSON parser. If it doesn't, set my itemsequal to my empty array. Now, again, let'srun JSON. parse, and now have our local storage,get item, and then the name will be list.Because I know that I will set this up asa list. Now, if the name would be differentthan Of course, I would name it differently.But I know that eventually here at the endof this local storage, I'll set it up as list.Okay, so now I have two options, either I'mgoing to get this as a array of lists, whichat the moment, I don't have it, or a emptyarray. And I know that in this point, I havethe empty array, okay. And now, I would wantto add this grocery, to my items, whateverit is, I mean, I know that this is right nowan empty array, but eventually, it's not goingto be in theory, there's going to be someitems in there. So we'll just say items, we'regonna push we're adding, and then I'm addinggrocery. And now once I have my items readyto go, I just want to use my set method. Andif you remember, one thing with local storagewas the fact that if there is already somekind of value, and if we're sending anotherone, we are essentially overriding that. Butwe don't care about it. Because each and everytime we'll add our item, we will get backour old list. So essentially, yes, we willoverride that whatever value has been there.But we need to remember that, of course, thisis going to be the actual latest value. Sowe really don't care. Now I have my items.Awesome. It is going to be some Carnival,right. And then like I said, we'll have ourlocal storage set item. And I'll name thislist. And now say JSON stringify. And I'mpassing in the items. So now if the item wasn'tthere, we were definitely setting this up.If the item was already there, then of course,we'll get back that item. And we can clearlysee that it will console log our items. Andyou'll see that the first time when we addour item, the items will just be an emptyarray. Because this guy, this JSON parserwill be equal to that know, that we alreadycovered. But the second time, once we alreadyhave some kind of item, this JSON parse theone that we're actually checking the localstorage get item, that one won't be anymore,no. Okay, so that's where we'll grab our JSONparse, and pass in the get item. So get ourlist, pass it through the parser. And thenthe items will be already the array. Okay,and of course, we will need to test it out.So if our pass here, the eggs will see thatfirst time, our value for the items will bethis empty array. Why? Because local storagedoes not have the item by the name of thelist. But the next time, since we're settingit up over here, local storage set item listand then stringify the items, then we'll haveour array with values. So let me run it, I'madding the eggs, like I said, in the beginning,I have the empty array. Because I had a ternaryoperator, I'm checking for the item of list,that item does not exist, we just evaluateto an empty, alright, then the second timecourse, there's going to be already some kindof item. So just grab that item, we use JSONparsing, then whatever is in the item, wegrab it, we assign it to the items. And nowwe'll add to our array. So if I add over here,milk, milk, you will see that now I have arrayof two items, the eggs and the milk. Alright,and once we have add to local storage outof the way, of course, now I'd want to focuson remove from local storage and edit localstorage. Now one thing though, is that forboth of these functions, I would want to accesswhatever I have in local storage, I wouldn'twant to copy and paste this code because whatif I want to change something so it wouldmake more sense, if we would have a functionthat just takes care of that. So here I'llhave another function get local storage. Nowwe don't pass any kind of parameters, butI will return my result. So I'll just grabthis local storage code, like so copy andpaste. And I'm just going to say, well returnfrom local storage, whatever you get, eventhere's gonna be a list returned my list.If not, then just return a list empty array.And I'll just use my function here. I'll sayget local storage and I'll invoke And you'llsee that the functionality does not change,we still have in our local storage, our items.So if I open up the application on the smallerbrowser window, you'll see that I still havemy values. So that didn't change can refreshall day long and will still have those values.So now let's start working on removed fromlocal storage. And I'll start by looking wherewe are calling it on, I believe we calledit when we were deleting the item. Remember,we were accessing the parent, and then onthe parent, we have the ID. Correct. So oncewe had the idea, of course, we can pass itinto our remove local storage. Now, as faras remove local storage goes in here, we'llhave the same thing, we'll have our items.So I'm going to call this let items is equalto get local storage, again, either all havethe empty array, or I'll have the array thatis in my local storage. And at this point,of course, I already have my array, becauseit is there. So my items will be equal tothis array of two items that I currently havein there. And then since I already have thearray, well, then I will just need to do somethingwith that array. Now I purposely use let,because I'm going to use my filter method.And I'm just gonna say items is equal to itemsfilter. So now iterate over this array, theone that I'm getting back. And then I'm justgoing to call my callback function, I canaccess each item as a parameter. So we'llcall this item. And then I'm just going tosay like this if item ID, because that's oneof the properties that I have within the itemthat is coming back from local storage doesnot match the ID, but I'm passing in whenI'm deleting the item, then of course, returnyour item. So what I'm doing here is I'm justfiltering out the values that don't matchthis ID. And that's why the one that actuallymatches to whatever I'm passing in here. Well,that one will be removed from local storage.So in here, I'm just going to say return item.And then at the very end, I would need tostill set those new routers. So this is goingto be the case where I'm going to get a littlebit lazy. I'm just going to copy and pasteI'm going to say local storage. So that item,list stringify items, again, yes, we are overridingthese values. So I grab whatever happenedthere. Then I assigned it to items, I filteredthose items, my callback function, I can accesseach and every item. And then this is alreadythe local storage item. And then on that item,we have the ID property. And as a side note,if you want to see what you're getting back,just add a console log here. Because we havedone already quite a few console logs. That'swhy I'm skipping right now. But if you'restill not what we're accessing, we have ofcourse here are items from local storage.And then of course, once I removed that item,I'll just set it in the local storage. Nowin this case, I'll have no beer. Of course,I have my items here, because I already hadsomething in there I had eggs, milk, and thenthe last one is beer. So in theory, I kindof delete these two. So I'll need to cleanout my storage eventually, because I haveno access to them in sense of UI, becauseas you can see, they're not there. But whatI'm trying to say here is that we could deletethe beer. And you know, I don't think we needto console log it here. So I have my items.Awesome. Now I added another extra beer. Mesure I don't know what's on something likethat. If you'll check the application courseyou will have more items. And you know what,this is going to be the use case where I wouldwant to go to bigger screen, I see my itemson my application. And as you can see youhave the eggs, milk, beer and onion are keepon adding those items. Now, I have only accessto the iron. So click on deleting the item.Now check it out. If you'll notice in yourlocal storage, you don't have the icon anymore.Again, yes, we will remove all the items,of course. So it makes sense. Once we're donesetting up everything, but at the moment wehad the audience. And then we'll just removethe area. And because we deleted using ourdelete button, we had access to the ID. Weaccess items from our local storage. We areon filter. And then we set the new items.And then of course send it over to our localstorage. Now we have two more we have editlocal storage. But then also remember we hada remove item. So why don't we focus on thatone. So if I'm going to head on omp I shouldfind clear items and remember, we had localstorage remove item and now you can see whywe're using it because we have access to thelocalor storage, and the method name is removeitem. And what item I would want to remove.Well, that is a list. And now you can seewhy we added this piece of code. So we accesslocal storage, we have our method, and wewould want to remove this key value pair,the one that has the name of a list. So inorder to test it out, I'll add some Coronavirusin here, maybe item number two. Now as youcan see, it was added to my items. So theseare all my items. But now once I save my app,j s, and of course now this is not going towork, I need to add one more, maybe item numberthree. Now again, this was added to our list.But then once we will click on clearing theitems, you will see how we use our local storage,remove item, I will just remove all your items.So now we don't have that list anymore. Sonow again, this is going to be the case wherethe first time we're adding those items, whatdo you think is gonna happen? Well, this getlocal storage will just return me mine array.Correct? Because get item will be no. So wewon't use this guy anymore. And now we'lluse of course, our empty array. And we'llpretty much do everything from scratch. Sowhile we're still on the subject, of course,let's deal with our edit local storage setup is going to be very, very familiar, we'llhave our items get a local storage. So again,we either get our items or we get an emptyarray. And since I'm passing in here, twovalues, ID and value. And as a side note,if we had up we can see where we call it.So we had our edit item. Okay, that was onething. But then we actually called our editlocal storage, when we were submitting withedit flag off true. So when we're not justsubmitting, but when we're actually editing.Remember, we had edit local storage, we accessedour ID, so not this guy, not the ID that we'recreating. But the Edit ID, we passed thatone, as well as the new value. So what isthe new value. So now what I would want todo is get that item from the list, the onethat is sitting in my local storage, and justupdate the value. So I do need that Id inorder to access that item. But I'll changeit into my routers. So in here, I know I'mgoing to be getting back my array. And again,I can use one of the array methods. So itemsis equal to items, we know that map will returna new array, just like filter. So we're goingto have your items map, then again, our callbackfunction item. And then if the item ID, again,matches to the ID that I'm passing in, thenI'll just change the value. So in here, I'llsay item ID is equal to an ID that I'm passingin the item value is equal to the value thatI passed in. And then I would want to returnthe item, return the item. So what happensas I'm iterating over my items, if the itemID does not match, we'll just return the itemthe way it is. Now if the ID will match, thenI'll set the old value equal to a new value.Let's see it in action. And you know what,there's one thing missing, still need to setthe item. let me paste localstorage time.So now let's try it out again, we'll haveour item. Okay, as you can see, I'm addingmy item in my local storage, I have the ODAmanda value of item. So now of course, onceI edit, I have my item, okay. And then I'llchange it to eggs, you will see that in localstorage, also this value will be changed toeggs. So again, we get our items from localstorage, we iterate over, if the ID matchesthe ID that I'm passing in, awesome. we'llassign it to a value. If it doesn't, we'lljust return the item. And then again, we overridethe new value in our local storage. So localstorage set item, and then list of course,and JSON stringify. Alright, and the lastthing that I want to do is once we refresh,I would want to grab my items from the localstorage and actually display them. That way.When the user comes back to the application,we still preserve all the items that we justadded because at the moment we're doing alot of functionality. We are moving from thelocal storage, we're editing and local storageand all that we can clean out the local storage,but we're not faking the use of the fact thatof course we can access local storage, oncethe app loads and then just display all theitems have been added to the local storage.Now in order to set that up, we'll have tohead on up to our event server, we have theevent listeners. And now set up one for DOMcontent loaded. So say load load items. Now,we'll set up on a window. So say your window,then add event listener will be listeningfor the DOM content. So DOM content loadedaround. And then once that happens, we'lljust set up items. So this is going to bemy callback function, set up items, career,that's my function. Let's save it. Now wewill navigate down. And notice here, I haveset up items. So this is exactly what I'llcall my function, I'll say set up items. AndI'll start by getting those items from localstorage. And remember, the function that didthat was get local storage, again, let itemsis equal to get local storage. So in here,I would want to check if the items have somekind of length, that means that course thereare some items, so I want to display them.So all right, if and then items, dot lengthis bigger than zero, well, what I want todo, I want to iterate over them, and createthose new items. Now, if we remember, whenwe were checking for the form submission,we were creating already decided. So it wouldmake sense, if we would set up a function.So we would get this code, pass it into thefunction, and then call it into places. We'llcall it when we're submitting form. And thesecond time is, as I'm iterating over my items,then I'll call my for each. And then for eachand every item, I will call that function.So the function name will be create a listitem, function, create list item, it's goingto be looking forward to arguments ID andthe value. Let's pass it here. And now likeI said, I would want to copy and paste thatcode. So in this case, I will cut it out.And I'm looking for element. So that's goingto be the beginning of my code. And then Iwould want to end it over here. Now I stillwant to include the element selectors, becauseeven though I'm getting them from the localstorage, I still want the functionality correct,where if I click on Edit, or delete, it stillworks. So just cut out everything up to despoiler.Then navigate down, copy and paste. This ismy function. This is what the function isdoing. And now we just need to add these valuesin here, where notice, since I'm adding hereiD iD value they match. So my argument matchesto whatever I have in the attribute. And thesame goes for the value. Now in this case,as I'm iterating over those items, I wouldwant to call of course my function. So items.So if the items length is bigger than zero,then I'll run items. For each. I'm lookingfor my callback function, function, magazineeach and every item. And then these values,of course, are coming from the local storage.Now what does that mean? Well, that meansthat in the item, I have two properties, Ihave the ad, and I have the value. So nowI can call my create list item. And I'm lookingfor two things correct. I'm looking for theID, and then the value. So do the same thing,passing here, the item ID first property.And the second one was item dot value. Sowe call them. And the last thing that I wouldwant to do within this function is show thecontainer. So once I run it, then I'll justsay container, class list, add, remember theclass was show. cron, Dana. Now, of course,since we cut out the previous code, I stillneed to create a list item, once I submitmy form. Now in this case, it's not goingto change much. Because again, I'll say createlist item. And I'll pass in ID and value,again, where I'm getting the value here, whereI'm getting the ad right here. And then itwas pretty much the same code. So the onlything again, is that we're just passing theID and value into attribute, as well as theactual value. We'll save it and you'll seethat we'll get called from our console. Nowsomething is missing. And it says your itemis not defined 151 Well, let's see. So I haveitem for each of the functions. And of course,I'm saying here Item should be items, my apologies.Let's run one more time. And I have my eggsthat are coming from the local storage. Andnow I will navigate to a bigger screen. Andwe'll just as we have the eggs, awesome. We'lladd your beer. Now I can see that I had abeer if I refresh. Yep, there it is. We aregoing running our function iterating overand we have all the routers, if I want todelete them, of course, I'm removing themfrom the UI, as well as the local storage,I can clearly see that. Then I'll add onemore time, eggs, mail, mail on in on em work.So let's add this guy. And then once I haveall these values, well, of course, I can deletethem one by one. Let's remove an item. Ofcourse, that is going to be my item item numbertwo. And then if I want to edit instead ofitem, let's call this eggs. So now I havemy eggs. And if I would want to edit thisto a milk is going to become milk. So that'show we can set up our application. Hopefullyeveryone enjoyed the project. And I hope tosee your next project. Awesome. Up next, wehave simple slider built with a JavaScript.So later in the course once we cover someother topics, we will build a more complicatedone mob, this is just going to give you anidea of how to set up a simple slider witha JavaScript. So the setup will be followingwhere we'll have two options, we'll have oneoption, we'll work with the buttons. So hidebuttons at certain points. So for examplepre button will be hidden in the beginningof the slideshow, then the next button willbe hidden at the end of their slideshow. Soin this case, as you can see, I can only Navigateback and forth. Because once I get to theend of the slideshow, I hide my next button.And then once I get to the beginning of theslideshow, course I hide my pre button. Andthe other setup we'll take a look at is theone where we'll just circle back to the endof the slideshow, or the beginning one. Nowthe way it will work is once we get to theend of the slideshow, notice how we circulateback to the start. But then once we are atthe beginning of the slideshow, and we wantto take a look at the last one. And of coursewe just circulate back to the end of the slideshow.Now everything else stays the same, we canstill Navigate back and forth. Just the differenceis once we get to the beginning of the slideshow,or the end of the slideshow, where insteadof showing and hiding the buttons, we'll justcircle back either to the beginning of theslideshow, or the end of the slideshow. Excellent.And we'll start with our HTML. So again, I'min setup folder. And instead of my awesomeheading one will create a slide container.So div with a class of slide container. Andthen I'll place my slides. And this is somethingyou need to keep in mind where slides arethe important ones. So there's with a classof slide, everything else is optional. Whateveryou want to place in there, you're the boss.But slides are the ones that will set up ourslider, or you can call carousel whereveryou would want. So I'm going to start withmy first one. And as a side note, I was purposelytrying to spice them up. So effectively setthem up in a different way. So they're allthe same, because that way you can understandthat pretty much you can place whatever you'dwant. Within the slides, what's importantis to have that div with a class of slide.And I'll start with the first one, we're allhave the image with a heading one. As faras the image I'm looking for IMG number oneon here, a class of slide IMG and then rightafter that, I'll have my heading one witha value of one. Let's save it. And of course,I can see my slide. Awesome. Then, actuallyI'm missing here the class name it is notslide it is slide or container. Okay, so nowof course, everything looks much better. AndI would want to set up three more slides.But then like I said, since the setup is almostthe same, just the difference what we're placingwithin, I can just copy and paste 123. Andnow I just want to change these values aroundwhere this is going to be a heading one witha value of two, then three, and then four.So now I have four slides, but since all ofthem are not going to be exactly the samefor the second one, just delete the image,so I'm just gonna be gone. For the third one.We'll also actually hide the image so we willdelete the image. And then for the fourthone, the setup will be the different image.So I'm going to go with the person one JPGwith me deleted this extension, I'll callthis person image, person IMG. And it's gonnahave this heading one with a value four. Butbefore that we'll have a heading four withSusan Doe, Susan, do not save it. Now, theway the setup works is we're using positionabsolute. So that's why we can only see thelast one. Again, don't worry, of course, we'llfix that. And then right after the slidercontainer, so don't place it within the container,set up a button container. So take a lookat where I have my slider container whereit ends, there it is. And then I'll set upanother div with a class of btn container.And then within this container, I'll havetwo buttons. One is going to have class ofpre button, and the other one will be nextbutton. And here I can just probably add atype of button. And then like I said class,for the first one is going to be brief btn.And in here, I'll just have a text of preamount, of course, I'll copy and paste thesevalues around, where the second one, of coursewill be my next button. As far as the value,it's also going to be next. So that shouldbe our HTML setup. Awesome. Before we starttyping away JavaScript, I would want us tounderstand the general idea behind what we'regoing to do with the JavaScript. Because thatway, of course, it's going to be much moreeasier to once we need to implement the actuallogic. So the way the setup works is we havethe container. Now the learner has some kindof width, width and height. And it is positionedrelative, as you can see over here, and theneach and every slide. So there was a classof slide is position absolute. And that'swhy you can only see the last one. So forexample, if I would delete my last slide orcomment without whatever you'd want to do,you'll see that and now we see the slide numberthree, because all of them use this positionabsolute. So of course, the next slide coversthe previous one. And all of them have thiswidth and height of 100%. So let me navigateback to my HTML uncomment. This, and you knowwhat I will add here a div, because I thinkit's going to look a little bit better. Soplace the image, the Susan Doe, and all thatwithin the depth, because we're using heregrid. So I have display grid and place itemsin the center. So now it just looks a littlebit better. The way we'll set up everythingin JavaScript, we'll just use positioning,where at the moment, we have position absolutefor all the slides correct. And of course,now they're sitting one on top of each other.But what we will do is we will select ourelements, and now uncomment this but of course,again, we will do this using JavaScript, butI'm just showing you the manual setup. Sofor example, if you add for the first childto be left zero, so what is the left location,then for the second one, you'd add 102 103100, then of course, you would see the line.Now why you don't see the line right now isbecause in the container, we have this orangeglow hidden. So if I'll comment this out,you'll see in your project, a long line ofthese items. So what's happening right now,all of them are positioned absolute. Yeah,that is correct. But then the first one, asyou can see, has this left of zero, then thesecond one will be 100, then 200, and then300. And using JavaScript, we'll just checkwhat is the index of the actual item. Andthen we'll place either it's 100 203 100.So that way, of course, we don't need to dothis manually, because at the moment, I'mjust doing this manually in a CSS, but whatwe'll have is this container, there will alwaysbe displayed. And then we'll have these longline of whatever items we have. So at themoment, I have four, but I can place here55,000 doesn't really matter. And then ofcourse, as I will be clicking on buttons,then we will just shift these items. And theway we'll ship those items. So for this slide,we have transformed property, and we'll setit equal to A translate x. So that moves theitem in the x direction. Now one gotcha isthat negative will move it to the left, andthen positive value will move to the right.So now I'm selecting all the slides. And I'mjust gonna say you know what, more would 100%to the left. So in here I need to go witha negative value, and then 100%. Now whatdoes mean 100% so whatever is the width ofthe item, just shift 100% to the left. Andas you can see, once I do notice, all theitems shifted. And that's why right now we'reshowing in the container course the item numbertwo, and then of course we can increase theseroutes. So refile shift 200, then of course,I'm moving more to the left, then I go tothe end of the slideshow. And if we want tomove back, that's all we have to do, we justgo to 100. And then eventually we'll go tozero. Now, of course, the way our setup willbe, he is that overflow will be hidden. Sothat's why we'll only be able to see the item.So that's why once we navigate down, for example,if I want to move back to 00, and now I'mshowing slide number one. Now, if you'd wantto increase again, we are going negative value,that's something you actually need to remember.Now, of course, I'm showing second item. AndI can go to third, and on and on and on. Andthe reason why we have these nice transitions,as we're switching from one slide to anotherone is because on slide class, we have transitionproperty with these values. So I'm targetingall the properties. And the time that I haveright now is 0.1 in five seconds. So if you'llchange this to for example, two seconds, andyou'll scroll down and again manually forthe time being changed these values, for example,negative 300, you'll see that it takes twoseconds to switch from one slide to anotherone. Again, this is just to show you in manualsetup, of course, we'll do all of this usingJavaScript. But this should give you an agood idea of what we'll do. So that way, itshould help you to understand when we setup all the functionality, okay, and once weunderstand the general setup, course, it'stime to do our magic in the app js. And we'llstart by selecting three things, I would wantto select all my slides. So I'll use queryselector all for that. So const slides andnot is equal to document, then query selectorall that should give me my node list. AndI'm looking for my slides, then I would alsowant to target a next button. So for that,I have the variable of next btn. And thenof course, I need to target my class, my classname is next btn. And then I'll copy and pasteand just change these values around, whereinstead of Next I'll be looking for the previousone. And the same will work or here. Now onceI have my previous button, next button onthe slides, I'll start by iterating over theslides. And remember how we manually addedthis left. While now we'll do that using JavaScript.So depending on where the item is sitting,we'll move either 01 100 203 100. And of course,that will give us a good idea. Or we can addas many slides as we want because now we'reusing JavaScript, not manually setting thisup in this CSS. Now we have our nodelist.Awesome, and we already know that we can justiterate over it using forage, we have ourcallback function, within a callback function,we can access each and every item, or in thiscase, we do need to have this optional index.Because I don't want to check while we'rein the actual node list, this item is sitting,so I have my index. And then for the slide,I want to add this left property. So I needto target my style style property and thenwithin a star property, I have an option ofleft, so have dot and then once I have targetedmy left property, I would want to set up somekind of value. Now for this value, I wouldwant to set up a expression. So that's whyI will use the template string. In order toaccess that expression, we do need to usedollar sign and then curly braces. And thenin here, I'll grab my index, multiplied by100 and then add this percent. So again, we'redoing exactly the same like we had in themanual setup. Now the difference is that I'musing my index. So for the first item is goingto be zero, because my index is going to bezero, then for the second item, almost 100%than 200 300. Let me save it. And of course,I should see my first item. Now if you wantto see the whole list, just navigate up toyour slider container. And just remove thatoverflow hidden for the time being. Once youremove it again, you'll see a long list ofitems. And again, what's really cool aboutusing JavaScript is this fact that if I navigateto my HTML, and grab my slide, now let mecheck where it is one grands, because usuallyI have a tendency of making some kind of dumbmistake. So I have my slide, I'll change thisone to five. And you'll see that I can addas many items as I would want. And what I'llhave is these items in a list. Okay, so that'sthe cool thing about using JavaScript becauseyou don't have to run back to style CSS, essentiallyjust these manually. So you don't need tocount how many items you have. You're justset up three lines of code and you Good togo. Beautiful once we have slides in one line.Now of course, we would want to set up thefunctionality, where we can control whichslide is shown, and which ones are hidden.And we'll start with our first option, wherewe will just navigate either to the end ofthe slideshow, or back to the beginning ofthe slideshow. And we'll start by settingup some kind of counter. So let counter, thecounter will be zero at the very beginning,when I want to target two things, the buttons,next button and pre button to add event listener,I'm listening for a click event than I ammy function, of course, and within the callbackfunction, I'll just start by either increasingor decreasing the counter. So for next buttonout one increase, and then for the pre course,I will decrease. So in here, instead of nextbutton, I'm looking for my preferred button,and then counter also will decrease. Alright,we have our awesome setup. Now what? Well,I would want to set up a function that justgrabs the value of the counter and add theTranslate value to all the slides. Becauseremember, when we were adding this negative100, negative 200, we were essentially justmoving slides, either 100% or the left, or200, or 300. So that's how we were able tonavigate through our slideshow. So what Iwould want to do each and every time I increment100, iterate over my slides, and then addthis using JavaScript. So we did our firstsetup, where we placed them in a line. Nowwe'll do this line of CSS. So we have somekind of function, I'm going to name y andone curse. So run. For the time being, wewill leave out the logic where we either navigateto the end of the slideshow or beginning,we'll add that in a second. I'll just wouldwant to start by grabbing all my slides again,I have for each, then I'll have my function,my callback function, I'll access each andevery slide as a parameter off slide. Andthen I'll use my style property again. Sostyle. And then instead of left, I'm lookingfor trans form. And again, this is going tobe a template string, where I have my translatex and then parentheses, and then within theparentheses, I'll set it equal to negative,because I would want to move them to the left,of course, and then I have my expression.That's why my template string, and I'll justmultiply my counter. So whatever is goingto be the counter by the 100. So I'll saymultiply by 100. And just make sure you addhere, the percent. Now let's save it. Andlet's take a look at on a bigger screen. Soas you can see, once I press, nothing happens,okay, why nothing is happening with me seemy cursor, of course, I'm not invoking thecursor. So we will need to invoke it rightafter we increase or decrease the counter.So let me invoke it first in here, as wellas in my pre button. Let's save it. And nowlet's just get out on a bigger screen. OnceI click Check it out. Now of course, I'm sharingmy trends latex. As you can see, I'm justmoving. Now, of course, we still need to fixthe fact that we eventually just run out ofslides. But if you want to check it out yourdev tools, you'll nicely see all the elementsare getting this translate added to them.So in the pre check it out. Now, of course,we're just decreasing this value. So we startwith this zero, because our counter is zero,correct. As you can see, our counter is zero.Now of course, we just invoke it once we runit, but since we navigated back to the beginningwhere the counter was zero, that's where we'retranslating only 0%. So we start with thisone. And then once I click now my counteris one, and I multiply the one by 100. Andthen add to all the styles. So all the slidesjust move 100% to the left, then I add onemore time, and now all the slides move 200to the left. Now of course, we do need tofix the fact that eventually we just run outof slides. So what we can do, well, we'llstart with our first setup where we just eitherscroll or you can say circle back to the endof the slideshow, or beginning one. And theway we do that is first by adding some kindof comment since there's going to be two setups.Working with slides. That's our first option.And then I'm just going to say if the counteris equal to slide length, so in our case,that would be five since we have five slides.Then I'll set the counter equal to zero. Nowif the counter is less than one That meansthat odd want to navigate back to the endof the slideshow. In order to access that,now, first of all, I would want to set upsome kind of error statement. So if the counteris less than one, then I would want to setmy counter equal to slides, length minus one.Okay, because again, arrays are zero, based.So that's why if we would want to access thelast one, we would need to go with slide lengthminus one. Now, of course, I would want toalso hide the rest of the slides. That's whyI'll navigate back to my CSS, and also thisto overflow him. And now nicely see that wego one slide, second, third, fourth, fifth.So we're at the end of the slideshow. Thatis the case, we just nicely Navigate backon our counter is set back to zero. Now, ifI'm at the beginning of the slideshow, andI would want to see the end, I just pressprevious. And now I can see my previous slides.That would be our first setup, where we justcirculate around our slideshow. And once wehave our first setup, I want to show you thesecond one, where do we just hide or showthe brief and the next buttons. Now I'll leavethis one for your reference. So just commentout and out want to hide the Preview buttonright from the get go. So once the applicationloads, we will hide our pre button. And wecan do that by pre button. That is of courseour variable style display. And that is goingto be equal to none. Okay, we're at the bottomawesome. And then in here, we'll set up anotherset of if and else statements. Now out herea comment of working, we bought buttons, justso we know what we're doing. And we'll startwith our next button. So here, I'll say ifcounter is less than slides length minus one,that is of course the value for my last slide,then please show the Next button. So nextbutton style, then display, and it is equalto block. If counter is less than my lastslide value, then please show it. Otherwise,please hide the Next button. So go next buttonstyle display. And that is equal to none.So now you'll see that as you're clickingon next, once you get to the end of the slideshow,you just hide the Next button. So the userdoesn't even have the option of looking forthe slider doesn't exist, of course. And I'lldo the same thing for my prevx where I'm goingto say if counter. If counter is bigger thanzero, awesome, then please show the pre button.Otherwise I'd set it up in here pre button,display equal to block of course. Let's setup another else. And in this case, I'm goingto say else. And then of course, I'll hideit. So pre button style display to none. Soright from the get go, we hide our pre button.Awesome. And once we navigate to a secondslide, of course, our counter value is one,so it is bigger than zero then we show it.And then once we navigate back, again, wehide it because we have if the counter valueis not bigger than zero, and we just had ourpreview button. So now in this case, we cannavigate to the end of the slideshow, we hideour next button. Beautiful, and we can onlyNavigate back once we navigate to the beginningof the slideshow, we hide our pre button.So now we can only navigate to the next slide.So this is going to be our second setup. Hopefully,everyone enjoyed the project. And I hope tosee you in our next project.\n"