Build 15 JavaScript Projects - Vanilla JavaScript Course

Build 15 JavaScript Projects - Vanilla JavaScript Course

SUBTITLE'S INFO:

Language: English

Type: Human

Number of phrases: 5005

Number of words: 86946

Number of symbols: 379912

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles prepared by human
00:00
Hello, everyone, and welcome to 15 basic vanilla JavaScript project video, where we will sharpen our JavaScript skills by building cool project. Since there are quite a few projects, I'm just going to show you how you can navigate to a website where you can find all the project. So that way you can explore all of them yourself on on your own time. So if you'd want to see all the projects that we're going to build in 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 then in the latest project, look forward to JavaScript project. Nine in here, just click on the Home icon. And you'll navigate to a website where you can see all the project pan if you want to see how the project is gonna look like just 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. If we would want to see I don't know menu project, this is going to be another one where we will
01:01
be filtering on the menu items. And we'll take a look at our cut them dynamically. And hopefully you get the gist few quick notes. Before we begin. All the projects are part of my JavaScript course, which consists of JavaScript tutorial, and many more cool projects. And as far as the project since our main goal is to practice JavaScript, all the CSS is already created for you. And you just need to add few classes in your HTML. One thing that I would want to mention is that during the project, we will not use arrow functions, and few other possible IR six syntax options, simply because these projects were built as a practice for the course Dom module. And at that point, and of course, we simply have not covered ear six yet, obviously, course does contain extensive ear six module, where we cover ear six syntax and build more interesting project using ear six. Now if you're extremely
02:01
sad that we don't use arrow functions in this project, well, you can just replace all the regular functions with your own arrow functions. It is as simple as that. Lastly, in order to follow along with the project, you will need a starter project. And you can get it by visiting John's milka.com. So if you'll navigate 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 a starter files and a source code. Now for this particular project, both of them lead to same exact GitHub repo. So if you click over here, you will navigate to my GitHub repo. And from there, either clone or download the starter project, and you will be good to go. Since the setup for all the projects will be exactly the same might as well save us some time and show the project set apart only once. So you will have to navigate to my Git repository, and then choose the clone or download option. And then once you do, you'll have access to
03:06
the folder. And then once you crack open the folder, you'll have all the projects in there. Now for each and every project, you'll have two folders, you'll have the final folder, where you'll have finished application. And then also you'll have a setup folder. And then at the beginning of every project, I'm just going to grab my setup folder, and add it to my text editor, Mark. So sorry, my setup folder, just drag and drop, this is going to be the first project. The same I'll do for the next one on next one on next one. So as we're starting with the project, you just need to look for that particular project, and just grab the circle. And then the final folder is for your reference. So for example, if you would want to see all the lorem ipsum is gonna look like I'm just gonna open for now, another browser window, work so and then I'm looking for final. And then I'm just opening index HTML. So this is going to be a finished project, just in case you need to reference
04:11
it. 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 exactly the same, where I have the text editor on the left hand side, and then the browser on the right hand side. And then I'm using my extension in order to open up my file. So as you can see, right now, in the right hand side, I have my current project. So this is going to be my setup for all the projects. Whatever project we'll be building, I'll just open up my setup folder in a text editor and set it side by side with a browser window. Now there's one more thing that I would like to cover because I see that way Too many times, and now on is the fact that even though you have access to a final project, it doesn't mean that you can just copy and paste the code. Unexpected, everything will work. Now,
05:12
let me show you what I mean by that. For example, I'm working on a first project. And for some reason, I came up with my own class for the button. So say class, I'll call this special btn. And I'll call this also special button. Then, of course, since I'm following along with the video, something doesn't work, because you came up with your own class. So what I see people doing is, of course, looking forward to final project, man opening up the address, or grabbing all the code, and then copying, pasting work. So so for example, we already have something in the address, I'm just going to delete it, copy and paste, and the code still won't work. And then of course, if I check the developer tools, I can see that I'm having here. So this will not work. Of course, you can use the final project as a reference as a reference our setup the project. But if the code works, the final project code
06:17
works. That means that you have some kind of error. And oftentimes, what I see is that people just look at my code, they copy and paste it and they say, listen, your code doesn't work. Well, the reason why your code doesn't work, because of course, you're setting up your own HTML. And of course, that's why you will get an errors. So yes, of course, use the final project for your reference. So you can see how I set up the project. But if the project works on your local machine, that means that it's not my code runs bad. It's actually your setup, because you missed out some kind of class some kind of ID, some kind of HTML element, or along those lines. Okay. And once we have looked at our setup, I guess we can start working on our project, the first project we'll build will be the color flipper. And essentially, the idea is following, we're going to have a button. As I'm clicking the button, notice, we'll change the background color of our body, and also will display what
07:19
color we're using. And we'll have two setups, we'll have a simple one, we'll just use specific amount of colors. So it's going to be fixed array with fixed amount of items. And then we'll have the second set of the hex color setup will generate hex colors on the fly. And in this case, we have infinite amount of options. Now, of course, when I say infinite, what I'm talking about here, is we're just generating the hex color on the fly. So as you can see, this is not a set amount of items, every time we click on a button will generate a 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 effectively what I'm doing right now in the index HTML, we're building out the simple setup. And then once we're done with the simple setup, then of course, we'll work on our x one. So in the index HTML, first out want to create a navbar, because I'll use for both of the pages. So we'll navigate between the project. And
08:23
that's where we need our navbar. So I'm going to go here with a nav and you're not now it will not have any kind of class or the div within the nav will have this nav center. And this div effectively is just a parent for 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 of color flipper. And again, you can name it whatever you'd like. And then I'll have a on our list with a class of nav links like so, not set up on our links will have a list item, each list item will point to a page. Of course, in our case, we don't have that many pages will have index HTML. and the value will be simple, or you can call home, whatever you would want. And I'll copy and paste this with me open this up. I don't know why I collapse that the second list item will be my next one. So change this around hex. And then also
09:27
the value will be hex. And again, I'm just pointing to the hex HTML they already have in my project. So I have the hex HTML and we'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 then within the main element, there is going to be a div with a class of container. And then we'll have two things. We'll have our title. So this is where it will display more Color we're using, and then we'll have a button. And I'll start with a button even though it's going to be their last. And for the button, we'll add two classes btn class, and btn hero class. And then we'll also add a ID, because I 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, click me. And then like I said, above the button, I'll have my Heading Two, with a text of background color, background color, then a colon, and
10:34
then I will set up a span. For this brand, I'll have some kind of class. And again, in this case, I'll use that class, also for my JavaScript, so I'll need it for my CSS, and also for my JavaScript. And then within the span, I'm just going to set up the current background color, which is the gray one. And of course, since I was setting up the project, I know that the value for my gray color is F one, f five, and F eight. Let's save it, we have our basic setup. And now we can start working on our JavaScript. Perfect once we have set up our index HTML. Next, we'll bravely navigate to address and set up our logic. And then at the moment, we can see that in the app js, we have the colors array with four values. And effectively, they just represent what kind of colors we'll have, whether that is going to be green, which is a simple color rally, then allow another one, the red one,
11:35
and then RGBA, just so we can see for sure that it will work with any color values, whether that's a actually named color, or RGBA. And we'll also have the hex one. And I guess I'll start by targeting two things, the button, so I'll name is btn. And then the second one will be my color. Now for my button, I will use document that get element by ID. And then since for my button, I have the ID of btn. And of course, Aria as a value. And the second one will be my color span. So have the concept of when color is equal to document. More in this case, I'll use the query selector on the class for my color was color. So use this one. Okay, good. Now, let's set up the event listener for click events. So I'm going to have my btn event listener, and then I'll be 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,
12:38
and then within the function body, and this is where I would want to set up my logic. So each and every time I'm going to click on a button, I'll change the background color for my body. And that is actually going to be our first task, how are we going to target the body. Now since we know that the body is the property on the document object, in order to show me that, I'm just going to console log it, the document body, and then if we check 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 would want to use this style property, more specifically, background color property, and change that value. And of course, I'll start doing that just by manually accessing my items from the array. So in this case, I'm going to go with const is an array random number. And I'm just going to set it equal to number two. Now I would want the comments were, our goal is to get a number. So let's write here comment
13:41
get a random number between between zero, and three. So why are we having three, one because we know that arrays are zero next day, correct. So this is going to be our first item on model will have the index of zero. So if I would need to select it, I will do something along the lines of colors, and then I'll be selecting zero. So that's how I can get 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 number between zero and three. Okay, it's good to know our goals. But for the time being, we'll just have it as a hard coded value of two. And then like I said, we'll use our document object, then we'll look for the body, then style property, not styles style, and then more specifically, the background color, this value in the properties. And of course, you can see that Visual Studio code is giving
14:43
me nice suggestions. And for the time being, we'll set it up to a colors so of course that is my array, and I'll use my random number. So use my hard coded value of t and then also our want to select my color and why I'm selecting that Hello, because I would want to change the value here as well. So we want to display, which is actually the background color, for my by property for that is text content. And again, we'll do the same thing colors. And then we'll have a random number. Let's save it. And then of course, the moment, I'll click on my button, you'll see that I'll access my third item, because of course, I'm using the 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 we can actually make this more interesting, where we'll get a random number from our array. Well, I guess we could start by setting up some kind of function available, generate a number between zero and three. And I'll
15:49
call this function get random number. So I'm just going to go here with a function keyword, then get a random number. Now, I will not accept any parameters. But I will return from my function, a math random method, I will invoke it. And then of course, within my callback, I would want to display it somewhere. So I'm just going to go here with get random number. That is, of course, my function. I'm just invoking my get random function. And then since I would want to show you what kind of values we'll be getting, I'll go with console log right underneath my random number. And I'll just check, what is the value I'm getting. So random number, that's what I would want to console log. And of course, the moment I'll click, you'll notice that at the moment, I'm not getting anything, because I'm getting this weird 0.57. And whatever all these values after the dot, and what is happening with
16:49
a math random, we are getting numbers unique numbers from zero all the way to one, but it's never going to be one. So it's always going to be between zero and 0.999999. Something. And okay. But as you can see, doesn't really do much good. Since Of course, there is no item with this type of index. So again, we're looking for numbers between zero and three. And one thing that we could do is make it interesting, I don't multiply with the length of our colors. So what is that going to give me? Well, that is going to give me numbers between zero point something, and three point something. because keep in mind, our length is four, of course, correct, we have 1234 items at the moment, of course, if you will add more items, you will have bigger length, at the moment, our length is four. So we're just multiplying the random number we're getting by four. And then since I said that, we'll
17:52
be getting these random numbers between zero and one, we'll have a result between zero and then three point something, but it's never going to be four, because our value is never going to be one. And I'll close that out. by just saying that I would want to multiply that by colors. And then length, which again, in our case, is for an hour, see if we click few times that we're essentially generating these numbers. Notice, like I said, it's going to be from zero point something all the way up to three, point something. Now, of course, in our case, it doesn't get there, I can keep on clicking. And yes, there is 3.06. Now how we can fix this right now? Well, the solution would be using another method that is on a math object, and that is a floor one. So what floor is doing, it is going to round down to a closest integer. But again, it's going to round always down. So even though technically,
18:53
as far as math, if we have 1.59, they should round up to two. With a math more will always round to a nearest integer, which in our case is going to be one. For example, if we'll have 0.98, we'll round down to a zero. And what will happen, we'll get our numbers between zero and three. And the way we'll set that up, we'll have our math floor. And then we'll pass the value that we're getting when we multiply math random with our colors. So I'll place it in the parentheses, I will save it. And you'll notice the moment I click the values too. So of course, now I'm accessing my third item. Then if I'm going to click one more time, then of course I'm going to be getting the value one, which represents the color of red, I can click one more time. In this case, of course, I'm accessing the item with a an extra zero, which is migraine. And as you can see our functionality works. And eventually we'll get to all our values. And of course we're done with the first part of our project.
19:57
Now let me test it out on a small screen. Let's see how it's gonna look like notice again, we are selecting all their items, and everything works exactly like we expected. Awesome work once we're done with our simple setup. Now, why don't we spice things up and actually work on hex color, we're effectively what it will do is you never done or click on a button, we will generate a random hex color. Now, of course, the moment as you can see, nothing is happening. But if I check out the complete project, the hex color one will notice that as I'm clicking, I'm generating a unique color using the hex value. And just a warning, some of the functionality will be exactly the same, we'll still select our button will still select the spine will still generate a random number. But the difference is going to be how we will set up the core. In this case, we will not use some fixed values is going to be generated on the fly. Now in order to speed things up, if you'll check
20:58
it out the hex HTML, you'll notice that I already created the setup for you. Again, this just saves us time of repeating the same HTML. Now you'll notice also that the color is the same, the btn ID is the same. The only difference is that we will use the hex js. So in the index HTML, we were using the address of ads where we set up our basic setup. But then in this case, in the hex HTML, we're pointing to x j, s, we're all set up our functionality to pick a hex color. And again, the reason why I set up the HTML already for you. So you don't have to retype the same thing like we did for the simple one. So I'll close my sidebar, I don't think I need the app JS or index HTML. Like I said, there's going to be a little bit of repetition, but not too much. And I'll start by again, selecting my button. And if you'd want, you can copy and paste from the objects. That's up to you.
21:59
But I'm just going to retype it. So I'm going to go with document, get element by ID. Again, I'm looking forward the same button, copy and paste. And now of course, I'm going to be looking for the color. So I'm going to go color. Now this is not going to be get element by ID, even though maybe we could have practice. And we could have renamed it but 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 browser window, what am I seeing. So now I'm going to have my hex project. And then I'm going to add a event listener for a button. So btn event listener will be listening for our click event. And then we'll have our callback function. So function here. And then we'll do the same thing with a random number. But the setup is going to be a little bit different. Now how we can generate a random hex color. And why would want that. So the way we work with hex colors is following. We're hex color consists
23:00
of 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 represent 10 1112 1314, and 15. And again, a typical example of the hex color would be something like this. This is my favorite orange color. And as you see, I'm starting with an F, which would be 15. And then I'm getting 15025. And this is exactly what we'll do, where we'll set up a loop that will generate this hex color on the fly. And then of course, again, we'll target the body, change the color for the background of the body, and then also add the value within the color span. And within the function body, let's start creating a hex value. And I'll start by setting it equal to ash that because like I said, at the end of the day, in order to get that x value, we must have this hashtag. So that needs to come first. And then we need the six routers.
24:03
And then of course, we will get those routers from our array. But at the very beginning, we just need to have some kind of variable that holds the hashtag. Okay, that's awesome. And then we would want to set up a loop that around six times. Now why needs to run six times, we're gonna, we'll have six values over here. So for each and every time we'll run that loop, I'll get a random value from my array, and just add to my hex color variable. That's why I was using her let, because if I would have used cons, well, I would get an error. Now we can set up a loop we go for loop, and then syntax would be for when we have parentheses, what would be our starting point, we'll start with a zero, so I is going to be equal to zero AM, we need to actually have your semicolon My apologies, where we would want to stop the loop while before i is equal to six. So I'm just going to say or We're on the loop until i is less than six, which is gonna mean that he will run
25:05
from 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 by one. And then within our actual loop, I'm gonna have my hex color, and old want to add that particular number. Now, again, we'll start by just hard coding, and how it will look like, I'm going to go hex color. And then I'm going to say that each and every iteration, I'm just going to add a value from my array. Again, I'm not going to be getting a random number, we will hard code for the time being, but at least I will be able to show you that we will get six of them. So of course, my array name is hex, and I'll start with my first item. That's why I'll set it equal to the index of zero, then we would want to target both things, again, the body as well as the text content. So in this case, I'm gonna go color text content is equal to my hex color, like so. And then also, I want to do the same thing for my body. So
26:08
I'm going to document body, and then we have a style. And then background color, background color, will be equal to my hex color. Now, what's the setup, it should be all black Once I press on a button. And of course, I can see that I'm getting my background color. And the value here is hashtag. And then six zeros, which is awesome. Now just means that I am getting six items from my array, or there is an issue that, of course, I'm not getting random items, I'm just getting all of them as a item on one, we would need to set up a function that would generate a random number. And then of course, I would get a random item from my array. Now also something to keep in mind that we must have this plus equals two. Because if you have just equals, you'll see that effectively, we're just overriding this in each and every iteration. So if you have Click me, you'll see that on the right
27:10
hand side, I just have the zero, because that is the last thing that we're adding in our loop. 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 this plus equals two, because that way, you're generating a string of ad will consist of the hashtag, six values from our hex array. And just to show that, of course, we're getting different items, I'm just gonna go with for example, I don't know 123, and then maybe this one, the index of 10. And then let's see what we have. So this is going to be a and we can try 11, maybe, see, okay, that is going to be B. And as you can see, our color is changing. But of course, we're still getting all six values exactly the same. We already know what we need to do, we need to set up a function. And we already actually have all the functionality, the only difference is going to be what is going to be the length that we use, is there going to be from the
28:13
colors, right? Or is it going to be from hex. So I'm going to set up my get random number array function again. And then within a function body, again, we will return math lore, we already know the drill, we will round down. And of course, we'll have our math num will invoke it. And in this case, like I said, the difference is going to be that we'll multiply this by the length of the hex array, not the cores array. Because again, what I would want is this random number multiplied by the length of my array, which is just going to make sure that I'm getting routers between zero, and then the last index in my array, just like we had before, so not colors. some reason I was speaking about colors, so I kept on typing. But in fact, we'll go with hex, and then again, and again. In this case, the length of course, is different. Now I'm going to be exactly like we had with colors, where
29:16
we had four items. So the length was four, or since I have more items, I have a bigger link. Let's save it. And now you'll see that each and every time, we will click on a button, we will spin up our little loop and then within the loop will generate that random number. Now at the moment, I still haven't access that number. So where I have the hex and then I'm accessing the item from an array, I just need to invoke my function. I need to say get around a number. I will invoke it and you'll see that the moment will click will start generating random hex colors. And that's how we can set it up. northmead just stood out on a bigger screen. Notice previously it wasn't working Now, of course, as you see, as I'm clicking, I'm changing the background color for my body, and I'm generating on the fly some kind of hex value. And then of course, I'm having it in two places. In my span, I'm displaying what kind of color it is. And also for the body, the background color value is
30:20
equal to the hex value that I'm generating from my function. Awesome work. And next, we have our counter project, where we'll build a counter, so I can increase the count, I can decrease the count, and I can set it back to zero. If it's above zero, then it's going to be green. If it's below, it's going to be red. And of course, if it's zero, then it's just going to be black. If you open up the setup files, you'll see that currently, this is what will happen. And of course, I'll navigate back to my project. And we'll start with index HTML. So instead of this awesome remote one, we'll place a main element within the main element, we'll have our container, and then within the container, we'll start with a header one. And we'll just type counter, let's save it and see what we'll have. So I have my counter value, Okay, good, then we'll have a span. So right after heading one web span with an ID of span, and we'll hard coded to be zero. And also, I'll have
31:28
another 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 three buttons, all of them will be exactly the same. But of course, just the classes will be a little bit different. So have btn. So that is going to be my generic button class. And more specifically, one is going to be decrease that's for the first one. And as far as the value, we also right decrease, that is, of course, going to be my first button. And you know what, it's not actually span, my apologies, it is value. So sorry about that. So the actual ID is value, not a span. And I'll copy and paste my button. And then of course, like I said, all of them will have this generic button class, but each of them will have this specific class, which we'll use in the JavaScript. So the first one has decreased class, the second one has the reset class, and the third
32:29
one will have increase. Now, of course, I still need to change these two hours. So I'm gonna go here increase. For the second one, I'll reset, we'll save it. Now we have three buttons, of course, we can click all day long, and nothing is gonna happen. But we do have the HTML. So now of course, we just need to work on our JavaScript. And in order to set up my logic, I'll navigate to App j s. And first, I'll start by setting up some kind of count value. So have a variable, that variable will you let someone say count, and that will be equal to zero. So that effectively will be marked out. And you know what, I will also set up right away a comments, we're also set, initial, and then count, that's going to be more common. And then also, I'd want to select two things out, select the value certain want to select the value span. And also I'd want to select all the buttons. Now when we're looking at the buttons, what would be our choices, technically, you can say, all right,
33:34
we could select them one by one, where I'm saying query selector. And then I'm just grabbing the class of decrease class of recent and class I've increased. And technically that is possible. But we also need to keep in mind and for all of them, we would need to set up pretty much same event listener, just a different value. So maybe a better option would be using query selector all where I could select all the buttons that just have this generic btn class. And then we'll set up a for each method, because it's going to be array like, so we can use for each on that, and then we'll loop over them. And then we're just 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 and you get the drift. So in the app, j S, R will select your things. And in fact, they'll land the comments here. I'll say select value buttons. And I'll start with my value. That's the easy one, we'll go with value. Then we'll use the
34:38
query selector. So query selector, and we're looking for the hashtag value. Why? Because that is the ID value. So since the ID name is valued, that's why I'm using hashtag and then value. Now, I will use the query selector also in this case, I'll write const btn. So that means buttons and we'll go document, and then query selector all. And now I would like to select all the buttons that has this class of button. And if we want to console log, what we'll get back, you'll see that we'll have this funny note list. And just to showcase that, I'll open up my dev tools. And you'll see that in the console, we'll have the Nautilus. So knowledge is a tricky one, where it is array like. So there's some methods that you can perform on the node list. For example, for each, this is going to be our case. And then there's some methods array methods that you cannot run on unordered list.
35:39
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 worry about the fact that for each, we can run on our list. So we're good to go. And, of course, you can see that I have first button, second button, and the third button. So I would like to run my for each method. So let's say buttons for each. And we already know that in the for each, we pass in a callback function, we arrived here function, and then this function is called against each and every item. In my list, my what's called in this callback function, I can access each and every item using parameter. So for example, I can name this parameter item, and money for console, log it, you'll see that we're accessing each and every button. So check it out. Now, of course, I have all my three buttons. Now since it is parameter, of course, I can call it whatever I would like. So maybe I can even call this orange, my functionality will still
36:45
work, orange and orange. As you can see, the amount of buttons that are having a console log did not change. Now I'm going to be a bit more conservative, I'm not going to call this orange burrito or banana, I'm just gonna go with a button. And now I want this event listener to all the buttons. So again, instead of selecting those buttons, one by one, using the specific classes that they have, we selected all of them using the button class. And now as I'm looping over my list, then I would want to add those event listeners. So I'm going to go btn add event listener, and I'm still going to be listening for my clicker. And so I'm going to say here, click, and we will need to again pass the callback function. So I'm going to go my function. And in this case, I'll right away access my event object. Why? Because I would want to check which button I'm clicking, because now I have a list. So I will use my event object to actually check, which is the button that the user clicked
37:49
on. And we already know that on the event object, we have the current target, as always, we will console log it. And we can just say event, current target numbers is gonna spit back effectively, which button I clicked on. And more specifically, I could get the colossal list from the actual button. So you're not a callback function, we're accessing the event object, event object has a property of current target. And now more specifically, I'm looking for the class worst. So all the classes have this element has an hour if I'm going to click on 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 element has. So this one has btn reset, as well as btn. increase. And I can actually assign this to some kind of variable. So instead of console log, I'm going to go with const. And I'm going to call this styles is equal to my class list.
38:52
So each and every time I want to click on a button, I will save in my variable, which are the classes of this element has. And now I could set up a if statement where I could say if on line styles, course that is my variable that I'm going to say contains. Now what this means is that I could say if the variable contains specific class, that means that I'm clicking on reset, or decrease or increase button. And I'll start with decrease when I say if Stiles contains and then I'm going to look for my decrease. So effectively, I'm looking for this decrease class. And if that is the case, then of course, I would want to decrease my count. So I'm going to go here, count, minus minus, so I'm decreasing the count by one. Now we'll still set up some else if and else. But for the time being let's just use the value better we have, because we already have selected the value and legends
39:53
replace the text content with our account. So what I'll do here is I'm going to say value text content. So the variable that holds the value my span, and I'm changed the text content in 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 decrease as well. So as I'm clicking, notice, I'm decreasing the value. Again, I selected, all the buttons are 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 object and getting the current target and a class list. So getting me the classes that the item that I'm clicking on has, so one is going to have button, decrease button, reset button, add increase. And if the item I clicked on has the class of decrease, that means that there is decrease button. So we'll just decrease the count. And of course, we can do the same
40:56
things for rest of them. In here, I'll say else 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 doing with increase or just gone count, plus, plus, again, so my girl on and off, we go to the last one, which is an odd one, out here, I'm cheating a little bit. Since I know that I only have three buttons. I mean, I checked already for decrease a check for increase. So I'm already assuming that my last option is recent credit, if you would want to be more diligent, of course, you can just say, if and style contains. But in this case, I am cheating a little bit what I'm saying you're not, if I'm not decreasing, if I'm not increasing IRA know that I'm just resetting the value, and my value will be equal to zero. So as always, let's start up with Oh, then we can reset. And of course, we can decrease. And
41:57
in order to make things a little bit more interesting, we're also going to change the colors for our value. And we'll take a look at how we can rewrite this using only the if statements. So instead of if else if and else, then we'll go if, if count? What I'm doing is I'm saying what is the value for my variable? Because in here, I already performed the operation, where are either increased or decreased, because in this case, increased and then set to zero. And now I'm saying, Okay, what is the value, if the value is bigger than zero, then I would want to change the color for my span. And my span is in the value variable. And then we have the style property. And then within the style property, we have access to a color. And since the count is bigger than zero, might as well set it equal to green. Now, of course, the moment I click on this, now we'll get my green color. And
42:59
then I just need to keep on typing these gifts console 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 grabbing my span, I have style property. And in the style property, I have a property by the name of color. If it's less than zero, what I would want to do set it equal to red. And last one is the 01. So in this case, I could say if and then count is equal to zero, then I'll just use my black color. So again, value, so the span style, color, and I'll use the hex color. So I'll go with quotation marks hashtag, and then 222. So that's the black color, and save it. And you know, in order to test it out, I'll navigate to a bigger screen, I think it's gonna be a little bit more interesting. So I can increase, of course, I'm choosing the color, I can decrease, I'm choosing the value as well as the color. And
43:59
of course, we can reset. So congrats on finishing the counter project. Awesome. Up next, we have the reuse project, where we'll have reviews, and we'll use JavaScript to loop over those reviews. Back and forth, will also set up a random review. And as a side note, this around review will be a challenge. Since we have already covered random number and all that at the end of the project, I'll tell you what I would want you to do. And then of course, I'll show you my solution, but this is going to give you an option to try to find a solution for yourself. At the moment, if I'm looking at Mr. Course The only thing I have is the heading one we have review project. So I'm going to head back to my project. I don't want the one anymore. We will set up main tags here. And as always, we're just starting off with HTML. And then we'll have the section with a class of container. So container and then within the container We'll start with a title. So out here comment online,
45:04
there's going to be a div with a class of title. And then within a title, we'll have two things, we'll have a Heading Two, with whatever text you would want market that will be reviewed. And then also I'll place the underline. And let's save it. And now of course, we have my our reviews, and then I have my underline as well. And after that, I would want to set up the actual review. So let's see where the dividends right here, we'll have the comment with a value of review. And then you know what, I think I'm going to scroll down 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 by placing the image container. So there's going to 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'll have the person want jpg. So that's the image you're looking for. Now, of course, later, we'll use our data from the JavaScript. But for the time being, while we're still setting up the HTML, we'll just use a local image.
46:08
So say, Here, I'm looking for person want jpg, and then I would want to add the ID for my image. So in this case, I'm going to say the ID will be person IMG, let's say, right, and we should have our card, at least some part of the card online, we should also see the image, Okay, awesome. of the rod will have 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 have a 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 the job, I think I'm gonna go with an info. So paragraph with an ID of info. And then here, I'm gonna go with 20 words, and also read.
47:09
So that should work for the card. And now I would want to add, of course, my buttons. So I'll go first with a next one, previous one. So where I have the article, still, within the article, I will set up my previous next buttons, so prevx max buttons. And in this case, I'm gonna go with div button container. And then within this container, I have my two buttons, one with a class of Preview button, and the other one with a next button. And in there, I'll place my Font Awesome icons, which also by the way, you have access to so we have a folder, where we have the Font Awesome icons. So let's start with a button, the class will be prevx btn. And then within a button, we'll have a Fs, fa Chevron show Chevron icon will have left. So that's the value Chevron left unanswered. That's the button. And now copy and paste, the only thing that I would need to change the class. So
48:15
instead of left, we'll have the right one. And then if you want to do a challenge with me later, then I would suggest setting up the button right away. So again, if you don't want the button, then you can just ignore it. So right after this div, I'm just gonna say a random button. And I'll have a button with a class of random button BTL. And then as far as the text surprised me, we'll save it, we have our HTML. So of course, now we can 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. And in order to do that, we'll have to navigate to App j s. And once we arrive here, we'll see that we'll have the array. And then within our array, we'll have items. And each item represents a specific person. So we have your name, we have the idea as a side note that
49:18
will not use this was just mimic a more like real world response. Then we also have the job. So that of course would represent whatever we have right underneath the name. Then we'll have the image, which I'm just hosting on a cloud Nori, just for easier access. And then also we have the text. And before we continue our want to address the elephant in the room. Yes, normally you would get this type of data using Ajax requests, so it would be somewhere else. And then you would just perform a HTTP request. Why we're setting up data locally. Well, it's very simple. We haven't covered what is Ajax and how to set up HTTP request routes, why? For the time being, we will use a local data. And again, it is an array array of objects here. And each object represents different person with different name with different job with different image, as well as different text. And we have
50:21
total four items. That's why as we'll be navigating back and forth, we will have four items. And what I would want to do first is get all the items that I would want from the index HTML, what am I talking about, odd want to access the image odd want to access the author, job info, since we'll change these values dynamically. And as you can see, we have all of them with IDs. And also I'd want to target my previous and next buttons, as well as the random one. Again, we'll do it at the very end as far as the random button as far as the challenge. But I would want to selected right away sure in the app, j S will start with a bunch of get element by ID, as well as three query selectors. So we're going to have a comment here. Let's write select items, we're going to 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,
51:25
now copy and paste four times. And once we have copied and pasted, now I would want to change these routers around. But as a quick side note, ESL co ops this reviews array, because in my opinion, it takes up too much space, and you have your reference in your own objects file. Like I said, the second one will be author. So I want to change this around. So you know what I'll use in this case, 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 two cursors to change these values. So the second one will be author, then the third one will be JOB, JOB. And the fourth one will be info, we're going to cursors. And we'll have our info. Let's save it. And now let's select all of our three buttons. In this case, I'm not going to use a for each. So I'm not going to set up query selector all, I'm just going
52:27
to select them one by one using query selector. So we're going to go with const, then prevx vivianna 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'll have my random one. So random. And then as far as the variables, we'll have the Next button, I'm gonna have a random one as well. And then I'll start by setting up some kind of value. So I'm going to set up a value of zero, which will represent my first item in the array. Again, because the arrays are zero index based, that is going to be my first item. So have the comment of set, starting item. And I'll give it a value of current item. But of course, you can name it whatever you'd want, as long as you remember that value as we're setting up functionality. So current
53:28
item will be equal to zero. And the first thing that I would want to do is once my document loads, display the first item, or whatever item you have here as far as the value. And remember, the options you have are 0123, because we have four items in the array, and that is going to be my initial value. Because again, at the moment, everything is hard coded. So what I would want to do, once my document loads, then I would want to access whatever item from the array. So whatever number you have, I have zero, so I'll be selecting the first item. And then all the variables that I have the image, author, job and info will all replace those routers. So let's start very simply. And we can do that by using DOM content loaded. So that's the event that I'm going to be listening for. So in here, I'll have a load initial item. And we would want to add that event listener on the window object.
54:31
So go with window, add event listener. And then again, the event name is DOM content loaded. And we'll start very simply by just console logging, just to see what happens. So my function, my callback function, will have here console log with a text of shake, break. And you'll see the moment my document loads all my shaking back and essentially This DOM content loaded event fires when the initial HTML document has been completely loaded, and parsed. Okay, so we have our shaken bake in the console. Awesome. What's next? Well, now I'd want to access my first item on how I can do about, Well, technically, I could just access it using reviews array, right? Because we have reviews, and then I can have my square brackets, and then pass in my current item. But I think it's going to be a little bit faster if I assign it to a variable. So I'm going to go here const
55:35
random, 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 make sure 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. I only have items, we have indexes of 012 and three. And now of course, I'm accessing my first time. Now why I think it's cool to assign it to a variable. Well, let's see, if I have, for example, image and the image, I know that I have the source property amount for the source property, I'll just set it equal to my image. Why am I setting equal to an image, because now I assigned my item, my variable to my first item. And then of course, in my first item, I have the image property, which gets me the image. So let's see, in the next hour, I'm sorry, nothing Linux, let me actually
56:35
go opposite. See, that's what happens if it's not 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 current item, sorry, not this one, current item, and then I can look for the image. But I just find it easier if we have four instances, to use item instead of reviews and then current item, and then get whatever property I would want from the object. That's the only reason why I'm just assigning this to my item. And you'll notice the moment I save it, since my first item, this image, of course, now I have this image, once my document loads, if all treasures rally around to for example one, then of course, I'll have a different image if I change this material, and now I'm accessing the third item in my array, and you get an idea, this is going to be my number four. Now you fall go with number four, the actual number four, you'll see that we'll
57:39
get an error in the console. That's why we can still see the image. Because we have hard coded one in the console, I have the actual error, why I have the error, because it says well 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 trying to 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 reason why we're getting this error. Again, I'll go back to my 01. And I would want to target the rest of them. Now when I say the rest of them, what do I mean, when I have the author, I have the job. And I have the info. So one by one, we'll have the author. And we'll go with text content. That's the property we're looking for. Since I don't want to add any kind of HTML, I just want to add a text. And in here, we'll have item dot name, and save it. 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 adding
58:44
here. And a lot of job and text content will do that too. And this is going to be equal to my item job again the property in my item object. And then last one will be my info, and then text content. And that is equal to item and then dot text. And of course all these four values are now applied once the document loads. Okay, awesome. And now I guess we can start working on this functionality, where Once I press, I'll change the item. So if I'm currently targeting zero, I'll be just changing this value around. And then of course, access different items in my array. So if I go to next, and of course, our Christmas number. So now x is not the first item in my array, and then the second one, and you get an idea. Now before I do that, I would like to refactor my code. Because even though the initial setup looked Okay, imagine if we will be increasing or decreasing the number.
59:49
What do you think we'll do? We'll each and every time I have to do something like this is Walker, because we'll have to not only get the item, but we'll also have to change the values. So what better if we would add a function that does that for us. So that way, we don't need to set this up in our click events, because we'll set up to click events for proven button. And also as a sign up for random as well, I'm giving you already hint, what we'll do. And I don't want to copy and paste the same code in all three of my event listeners, I might as well set this up as a function. And then I can just reuse that function. How's that function going to look like? Well, we'll see in a second. So I'm going to go first with a comment of show person based on item here. And then I'm just going to have a function, then the function name will 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 this
01:00:49
number, a person. Again, you can name this number, you can name this item, whatever you'd want. It's just a parameter. And not all have the same logic. So cut it out from my DOM content here, and copy and paste. However, of course, I'm not going to be looking for the current item, I'm going to be looking for whatever is passed in here. So I'm just going to say here, person. And this is exactly what I'm pressing, I'm going to say here, person would say that, now I have my awesome function. 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 just gonna say current item. Again, the functionality will not change. Or now we can reuse this function. So based on when we would want to call it return a social person, and non passing current item, traversing, pass in current item, not technically, you could access current items and the way it is, but since I wanted to practice on how we can pass in some arguments
01:01:54
and actually use those arguments, that's why I set up here as a parameter, again, technically, if you really wanted to, and I'll show you that at the end, we can just access the current item, since it is global anyway. But again, matters as a side note. So now let's set up those two event listeners. We have one for the pre, one for next. So have comment, I guess here, we'll say show next person. And you know what, let me scroll down. So we have more, I'll have my next btn. And then I'll have have event listener. So it will be listening for to click around. So once we click on next button, and then of course, we'll have our function. So our callback function. And then within a function body, I'll just increase current 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 would
01:02:57
serve it at the moment, you can see all right, so cannot read property. addEventListener have no. Okay, what is happening? Well, I don't have this button. So I would need to check what is happening with my button, why I'm not accessing my button. And I'm going to 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. Let me save it. Now I have next button. And now of course, we're selecting correctly. And I'm just showing you about that. Yes, mistakes happen. That's part of being a developer. Once in a while, we make a mistake. And of course, when we're talking about me, probably more than once in a while. But anyway, that's a different topic. So we have a show person, right now I'm calling an RLC. That each and every time we'll click will access different person. So we're gonna click OK, now notice, I'm accessing the third item, and I'm getting my fourth one. Now, what do you think is gonna happen? When my current item is going to be bigger than three? And we already looked at
01:04:04
it, we'll get an error. Correct. So once I click on it, notice, I'm getting my big, fat error. Why? Because, again, we cannot access the item doesn't exist. So if the current items for then of course I cannot access, what would be the fix? The fix would be very simple. Where I'm going to say if I'm not, I'm going to check my current item, if the value is bigger than a reviews, and now we're looking for interesting thing. We're not looking just for the one because let's think about it. What is the reviews like? That would be for correct, since I have four items. And what I'm saying here is if the current item is bigger four, well, if it is bigger than four, I'll still have my error. Because bigger four means that my animals still be at least four. If the items for our Have no item in reviews that reflect that index for. So what I need to say here not only reviews length,
01:05:07
when also I need to add minus one, which will mean that that reflects the actual last item in my array. So if that is the case, I'm just going to set my current item equal to zero. So I'm going to say if I add my last item in the array, then the current item is zero, show start from scratch again, see, we keep on clicking, once we get last item, we'll start from scratch. And of course, we'll have to do the same thing with a free one. So in this case, in order to speed this up, we can just copy and paste alternatives to pre button. Hopefully, I have selected correctly this button. So I have my pre button. And now I know I also hear a comment, I say show previous person. So brief person. Now in this case, I don't want to do plus plus, I want to do minus minus, because we'll be showing the previous person, or again, at one point, we'll get an error, because our value will be less
01:06:12
than zero. And again, there's no items that have 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 current item, current item is less than the zero, sorry, if it's less than zero, then is just going to be current item is equal to again, reviews length, so whatever is length, length, in our case will be four, minus one. So now my valuable three, which is equal to my last item, we'll save it. And now I can navigate both ways I can go up. And once I reach my last person, I'll start from scratch. And the same works backwards. So if I go back again, once I get to my first item, if I'm less than zero, then I just set it equal to the last one. And I'll start from the back of the array. Now just to showcase that technically, if we didn't want, we didn't have to pass here to person, I could just remove this person.
01:07:16
And then we can directly access our current item. I just thought it would be an awesome practice, if we're passing in as an argument. So now of course each and every time or I'm calling the current item, and just delete it because I'm not passing anymore as a primer. So there's no point for me to set it up as a primer. Because again, current item is a global variable. So I can access it from my show person. And then each and every time where I'm running the show person. Well, I'll display the correct info anyway. So this way, and also the late last year, either way, are you have the functionality, it will work again. So we're still clicking, and we're still accessing the items. Now the last thing is the challenge. We already have used the random number quite a few times correct. So here's what I would want you to do. We have our button, random button. Let me just double check that I have the class. Yes, I do. Everything is fine. So I'm selecting my button. Odd wants you
01:08:19
to add eventlistener to our button. And then once the user clicks the button on wants you to get a random item from my reviews array. Again, we have the button random button, the event listener listening for click events. And then in the functional body. Remember how we set up a random number, how we use a railing to get a specific number in the range of our array. And then of course, use the show person once you have accessed that particular item. So pause the video and resume once you're done, just so you can see what is my solution? How did you do? hopefully everything went fine. And this is my solution. So right after a pre button, I'll go with a comment of sharanam Burson show random person. Remember, we had our random button. So I'm going to add event listener, I'm going to
01:09:20
be listening for click events. And here are my function. So I'm gonna have my callback function within a function body, I'm just gonna have to access the random number that is from my array. So I'm going to have to create a random number that reflects the numbers that are possible in my array. So I would have numbers between zero and three, because I have four items, so my possibilities would be 012 m three m, od one assign it to mark or a number. So since I would want to get the random number, I'm using the current item We're gonna have to assign my current item to that around a number. And again, we have covered already random number. So this should feel like home, where we have the current item. And I'm just saying what is going to be valid for my current item, we use the math floor, since we would want to round it down to a closest lowest integer, then we'll use
01:10:21
math, and then a random, this is going to generate that random number. And then again, we'll multiply by the reviews like, Why, because the range should be between zero, and three. So those are my possible numbers, 012, and three, because those are my indexes. And then of course, once I have this particular item, if you want, you can test it out with console logging, like so. So can just say, current item. And then right off the bat, we can just call our show person. So call here show Burson. And you'll see in a console, all my random numbers. So for example, this is zero. And then of course, I'm also displaying that item. So this is my first item that I have the first one, or I'm sorry, more correctly, this is the second one. And then again, I'm getting my 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 array work, so back and forth. And also we can get
01:11:27
a random person from our array. Awesome. And next we have navbar toggle project, where we'll have a navbar. So this is how it's gonna look on a bigger screen. And then once we make the screen smaller, then of course, we would want to toggle goings. So I wouldn't want to display them right away only once we click on a button, then we will display the links. As always, we will start with our HTML. And at the moment, if you're looking at the oil, that's the only thing you can see is the heading one with a text of navbar project. And I'll start by creating a nav. So of course, I will delete my heading one, my awesome heading one. And then within a now 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 out all the links, the actual HTML is already provided. So I'm going to go here with an error comment. And then of course, I'll have my actual div with a class with no header.
01:12:34
And then in here, I'll place the image with a class of logo. And first we need to find our logo. So the file name is logo, SVG, and class. Like I said, the class name was logo. and here we can just write as alternative, also a logo. Now the second thing that will have always in our header is going to be our toggle button. So we're going to go here with the button, and then the class will be now toggle, 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 have created a header, now I want to set up my links. Now since I wouldn't want us to waste our time and type them up manually, I did provide them in resources. So open up the sidebar, then I'll look for utils. txt. And then in here, you'll find the links. Again, it's just a straight up HTML. That's why I will not type it out altogether. I will copy
01:13:35
that. 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 as well social media icons. Now, of course, there's a little bit of CSS already. That's why you kind of see social icons, but you can definitely see the links. So that's going to be a look on the smaller screen. And then once we get to the bigger screen, of course, we'll have our full blown up bar mod maker set out, I have the current project. As you can see, this is going to be the navbar on a bigger screen. But then once we get to the smaller screen, 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 will toggle the links. Now before we start typing away our code, a functionality in the JavaScript, I think it's extremely important for us to understand the general concept on how the toggle will work. And we'll start by getting the height for our links. And again, we're talking about two things. Effectively, we're
01:14:37
talking about the links class, that's what we're interested in. That's what will toggle the height for our links for our links around the pages. And then of course, we'll do that once we click on the nav button. So those are the two things that we will look in the JavaScript so target them, we'll assign them to a variable. And then of course, we'll set up a add event listener To the button. But what will happen? Technically, we can actually do manually. So I'll show you first the manual example without clicking the button. And then of course, we'll set up all the JavaScript. And like I said, we're looking for two things we're looking for now button. And the links, in order to have our setup will need to know what is the height for the links when they're open. And I think the easiest is to do it on a bigger screen. So let me inspect the element. And you'll see that if I'm looking for my links, I have the height of 160, which effectively is then RPMs. So that's already
01:15:38
a good start, then, by default, how would one Hi, darlings, and only once I add a specific class, 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 moment has this height zero or four hidden, and then transition is equal to transition. And then another class show Lynx has the height often harems. Now why this height is an arms, because my height over here once the legs are open, is 160 pixels, which is 10. REM. So that answers this question. And then like I said, I want to hide links by default. And the way I can do that is by adding height equal to zero, then also org wants to set up overflow hidden, because otherwise, you'll see that even if I have the height of zero, I will still be able to see the links and do not think it's gonna be easier if I just uncomment that. And now as you can see, if I just have the
01:16:39
height of zero, you'll see that I can still see the links. That's why we're adding this overflow hidden. Okay, good. And then why we're adding in this transition, because I would want to change from height zero to 16 RPMs to happen over time. So if I'll check it out the finished project, you'll see how this change is happening all the time, not instantly. That's why I added this transition. And of course, I already have some kind of value in the CSS variable. And then the only thing we'll do is we will toggle this show links 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 our toggle functionality. So let me show you a manual setup. And then of course, we'll do the same thing using Java. Again, remember, the class name is show links. And we'll just manually add it to a links and then remove it. So I'll navigate to my developer tools.
01:17:42
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 this transition. And now what I would want to do is just manually add this class. So notice I 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 already there. And if we remote, then of course, my class disappears. And this is exactly what it will do using JavaScript will target the button, then once we click the button will check whether to show links class is already on the on our list. If it is, then we'll remove it. If it's not, then of course, we'll add it and now we will be able to toggle our links. Beautiful once we understand general concept behind the toggle functionality. Now it's time to implement it. So I'll head back to my project. And I'm looking for a j s. And then in the app j s, you'll find some comments. And of course, our will explain what they mean in a second. But we'll start by targeting
01:18:48
two things, we will target our nav toggle, as well as links and I'll sign them to some kind of variables, some toggle. Emaar will be equal to document. And since I have a class there, I think I'm going to go with query selector, and the class I'm looking for is toggle. Then we'll copy and paste, and I'm looking 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 kind of event listener, as I'm clicking on a button. So that's our next job. I'm going to go with nav toggle, then add event listener. I'll be listening for click events. And then we'll have our callback function. So our function, and then within the function body, we'll start by console logging the class list. Now what is a class list property? It returns or shows or gets, however you want to call it, all the classes that the element has none our
01:19:51
case, which element are we looking for? We're looking for links so I wouldn't want to know what classes links has And we read that we just go with links. So that is, of course, our element. And then I'm looking forward to class list. And of course, I'll open up the dev tools, since it's very important to see what is happening here. So console. And then once I click notice, I have the list of classes that the links I currently have. No, of course, the only class that's there is links class, because we haven't added the show links. Okay, that's awesome. But then what are our next steps? Well, what happens is not only we have a class list, but then we also have methods we have contains, that is going to check whether specific classes there, and then we can have a class. So that wouldn't be add method, then, of course, we can remove it, I won't be removed method. And then we have the most beautiful one, the toggle one. Now we'll do a long way, just
01:20:54
because I would want you to understand how everything works. And then of course, at the very end, we'll just use a one liner using the toggle. And we'll start simply by looking at the contents. So what happens once we run the contains with some kind of random class, so copy and paste. So in this case, I'm not looking for the links, or I will leave this for your reference. So comment this out. And then I'll say links class list. And then like I said, the method name is contains. And then within the contains, we're passing in, what class are we checking for. So in our case, I'm just going to go with some kind of random class, which definitely is not there. So what I would want to see is what is going to be the response. And then once I run it, once I click on it, notice, I get the response on false. So what that means is that this random class is not on the works, which we already knew, because the only classes there is of course, the links. Now, if I'll copy and paste, and if I'm going to add here links class, I should get true, correct, because
01:21:57
that's the class that should be already on my unordered list. Once I click course, my next response is true. So knowing this, we could set up a statement correct. So I can say if links class list contains, and then of course, the class that I'm looking for, is show links, not the links. If the class is already there, then I would want to remove it correct, because we're toggling. But if the show links class is not already added to my lens, then of course, I would want to add it. Again, I will come besought just working hard for your own reference. But I'm going to go with if then links. When I go to class list, and we're looking for compaines method, I'm going to pass in show links. If that is the 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'm going to go with links, then classless abandon method name is remove. And then again, I need
01:23:01
to pass in show links class. Now what happens if my response is false, because at the moment, of course, I'm setting on functionality based on the fact that this is true. So if the show links is already there, then of course, I'm removing. But if it's not true, if it is false, so if the class is not there, then I'm just gonna say else. And now I would want to add someone to go with links, when class list the ad, and then we'll pass in show links class analysis there, our functionality will work. 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 of course, more about how we can toggle our links. Now, like I promise, of course, there is a one liner, and not one liner is a toggle method, which just takes a class. So I was looking for a class again, and I'll show links. And if the class is there, then of course it removes
01:24:03
it. 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 war is going to be links classless, then toggle, just make sure that you pass in the correct class, in our case, show links, and you'll see how our functionality will still work. So I'm going to comment out my previous code, and you'll still see that everything works as expected. So as I'm clicking, I can still toggle my links. Now just to show you that he 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 the class. Now one more gotcha that I would like mention, is the fact of what is happening on a bigger screen. Sorry, see, I'm setting up here the media query. So once we get to
01:25:04
the bigger screen, or mode, the toggle button, and then I showed the links, as well as the actual social media icons. Now, it is important when you're setting up that media query that for the links, you have to add this height order. Now, let me show you what happens if you don't do it. So I'll comment this out. And you'll see that right now once I get to the bigger screen, I have this weird height for my links. Now, why do you think this is happening? Well, I can tell you right away, it is happening because we added, of course, the show links. So what was the height four shillings, my head, of course, was 10 arms or 160 pixels. And that's why these weights are going to be so massive. And not only that, if, for example, I removed those links. So if I make sure that I click on a button, and then I'll hide the links, you fall get to a bigger screen, you won't see the links at all. And why is that happening, because in this case, we have of course, the height of zero, and then overflow hidden. So that's why it is important once you get to a bigger
01:26:06
screen. Once you set up your media query, make sure you add height of auto to the lungs. Once you do, regardless whether the links were shown or hidden, they will appear on a bigger screen. And that's how we can set up toggle functionality using JavaScript. Beautiful Up next, we have a sidebar project, where we'll have the sidebar and we'll use JavaScript 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 will show you that on a smaller screen, sidebar or span or percent. So all across the screen, then on a bigger screen is just going to have a fixed width. And also we'll add some links as well as social media icons. But again, I already prepared some code for you. So not have to spend countless hours typing out HTML, but we will have to start with HTML. And once I navigate to my sort of project, I can see
01:27:07
that the only thing I have is a sidebar project. And of course, we would need to add some items here. And I'll start with a close button. So there's going to be a button. And that button will have a class of sidebar, toggle, class sidebar, a man a hyphen, toggle, and then within this button will go with FA s fa, and then bars. That is the class name. So now of course I have my clothes. And then once I have the button, I will set up my sidebar. So here I'll have a side, that is the name of the element, the class will be sidebar. And then within your side, we'll just set up a header. And we talked about header, we have the image. So that's our logo, as well as 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 highlight it because it represents a proper sidebar. But I don't think that it is important for
01:28:09
us to type out the HTML, so the code is already prepared, we only need to set up a header. So go here with sidebar error. And then within this div, I'm going to add first an image. So IMG. For source, we'll use logo, SVG, I do want to add a class here, class will be logo. And right after that, I would want to have a button, my close button. So let's write button, one class, close btn, close btn. And within this button, we'll go with Fs fa, n times. Let's save it. And now I can see the sidebar. Don't worry about the fact that you cannot see the closed button that is on purpose. And we'll fix that in a second. Now after the header, like I said, I would want to add the links, but I wouldn't want to type them out. In order to speed things up. If you'll notice the files, you'll see utils. txt, and
01:29:12
in here you'll have the links. So again, it is just a unordered list. Each list item represents a page that we don't have, or we do have length, for example, to index HTML, about HTML and all that. And the same goes for social media accounts, where we have on our list list items. And then each item is just a link to a social media account. Again, it's just a straight up HTML. So I thought we could save a little bit of time, skip the typing, and also everything on copyright. And then in the index HTML, I will look for the end of the header. So make sure that you copy and paste in the sidebar, but right off the ED sidebar, paste and you should see here two links As well as social media icons. Now, of course, I can close my sidebar, and we can figure out how to add functionality using JavaScript. Before we start typing away our JavaScript functionality in the objects, I think it would be very crucial
01:30:15
that we understand our setup. And the word will work if we look at the styles, CSS, and if we navigate down. And last thing you'll see here is the class of sidebar. So that is my sidebar, I'm using here position fixed, I'm placing it on top left corner, and width and height is 100. That's why it's taking up the space online. Once we get to a bigger screen, 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 the sidebar, how I can do that, I could use the transform property and set it equal to a value of translate minus 100. So what this will do, it will push the sidebar left 100% of its own width. So what it means it will disappear from the page. So the moment you will on commented, you'll see that our sidebar disappears. Now,
01:31:17
in order to show the sidebar, again, will this transform and translate our in this case, the Translate will be zero, what that means is, it's just going to go back to its default position, which was exactly what we saw a second ago. And we'll add that in a show sidebar class. And what we'll do with JavaScript, we'll just gonna toggle this class. So if this class will be added to our sidebar, then of course, we will show the sidebar if the class won't be there. And then of course, we'll go back to default, which is translate minus 100%, which means that the sidebar has been removed from the page. And there's no better way than doing it manually. Because this will give us a clear understanding what we're doing with JavaScript. So navigate to a bigger screen. I'll look for a current project notice, my sidebar is gone. But then if I open 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.
01:32:23
So I'm looking for my sidebar. Of course, at the moment, our sidebar has this class of sidebar. But what is the class that shows the sidebar? Why is this one, the transform translate, the name of it is show sidebar. Now, as a side note, by the way, you can also toggle it here in a dev tools like this. But since in JavaScript, we will add and remove the class. I'll type it out here. Notice where I have the sidebar, I'll just say show sidebar class. So that's the class we'll add later with JavaScript. Once the class is there, check it out, we can see our sidebar. Now, if I remove that class, of course, sidebar won't be there. So it's going to be a little bit of mix. We have already CSS prepared. But I'm just showing you that effectively, this is the only thing we're doing will add or remove the class. That's how our functionality will work. Excellent. Once we have covered what is our goal, let's proceed your objects and start tapping away. And I'll start by
01:33:25
selecting three things. I would like to select my sidebar toggle, I would like to select my actual sidebar, as well as the close button. So those are the three things that are want to select in my address. And I'll start with my toggle button. So toggle btn. And in this case, again when we use the query selector. So our query selector and the class is a sidebar toggle. Now, I do need to add, of course, my dot sidebar, toggle. And I'll copy and paste two more terms. And the next one is the close button. So this is going to be close button. 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'll have our sidebar, we'll save it. And then I would want to add event listener to my toggle
01:34:28
button. And I would like listen for click events. So we're going to go toggle button, then add event listener when listening for click events. And then we'll have our function, our callback function. And then within the callback function, like I said, we'll just check whether the sidebar which we have of course 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 just so we all are on the same page. I'll start by console logging the class list on the sidebar. So right here sidebar and class list, just so we can see what classes will have. So I'll open up the dev tools, we'll click on a toggle on our console, we should see only one router. So that's the only class that currently our sidebar has. And then we have two options, we can go the long way, or we can use the
01:35:32
toggle. Now, since I would want to torture you a little bit, I'll write the long way first, and then we'll do the short way also. So we'll say if sidebar, so if sidebar, and then we have the class list property, of course. And then we have the contents. And using the contains, I can just say, if the sidebar has the show sidebar class, then of course, I would want to remove it. But if it doesn't have the class, all one on it. So I'm here I will say sidebar, then class list. And then I'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 class am I talking about? Of course, I'm talking about show sidebar class. And I'll set up also the else. What does that mean? It means that the sidebar does not have the class. So if I'm hitting the house, that means that sidebar doesn't have to show sidebar class. So just add it. So say sidebar, class list
01:36:36
and add. And of course, the class that I'm talking about is show sidebar, we'll save it, I'll navigate to a bigger screen is going to be easier to see. And you can see that as I'm clicking. Of course, I'm doing exactly what we did previously, when we were manually controlling it. Now we're just checking in the sidebar, how's the class? Awesome, we'll remove it. If it doesn't, then we're just adding the class. But we can save ourselves quite a bit of code, considering the fact that there is a method called toggle. So I'll leave this for your reference. So that is still going to be there. But a much faster way is writing sidebar, then class list, toggle. And now I just need to say which class I would want to toggle on again, in our case data show sidebar, we'll save it. And now again, I'll check on a bigger screen because it is much more easier, since the sidebar is not covering my button. And of course, still the functionality works. Or I was able to do it
01:37:42
in one line, where previously, I believe I had five, that would be a little bit faster way where we can use our toggle, and then just pass whichever class we would want, which in our case, of course, is show sidebar. And then of course I would want to work on my close button as well. So open up my sidebar. Now I need to target my close button. So go with close btn add event listener will listen again for the click events, we'll have our function or a callback function. And then within the function body, we'll just say that we will remove the class. That's the only thing that the close button needs to do. Because at this point, we already have added that show sidebar, if we can click on the close button, that means sidebar is open. And that means we just need to remove the class. So what color Am I looking for of this one sidebar class was the demo. And I'll speed things up by just copying pasting. We'll save it. Again, let's open up the sidebar, then close
01:38:45
it and we're good to go. So as you can see, we have our functionality, we can see our sidebar, we can hide our sidebar, and we're good to go. Again, the main thing is to set up the CSS where you hide the sidebar by default. And then you're just toggling the class that has that value of transform, translate, zero. Great. And up next we have the model project, where if I open up the project, you'll see that we'll have some kind of background image in the center, there's going to be some content, or some kind of banner, of course, in our case, is just going to be a title of our project. And then we'll have a button. And the moment we click the button. Notice we'll get a modal with a nice overlay. And then some modal content, which in our case, again, is just going to be a one sentence. And of course we'll have an option of closing the modal. Once I click the modal notice modal is gone. And we'll start with our HTML. So head back to my setup project, and then probably make this site
01:39:49
a little bit smaller. And I don't want the orange one. In fact, we will set up our hero first. And we're talking about hero we talk about a massive background image and then so kind of content innocent. That's why we're referring to as a hero. So go with hero and have hero. And then within hero, we'll go with a header with a class of hero. Of course CSS is already added, so we don't need to worry about it, I was I will go with a banner. And then with your banner will place a penguin with a text of modal and then project as well as 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 going to be the generic button class, we're just going to add some styling, and then also have a modal btn, of course will utilize in our JavaScript, as far as the text our right open model, also read our should, my hero awesome. And I would want to set up a model. Now this project is going to be a little bit different, because I'm going to give you a challenge in the beginning of the next video. That's why as we're typing out the model, you won't be able to model. And again, that is done on purpose, because I would want you to start next video with a little bit of challenge. So don't worry, as long as your classes are exactly as mine, everything will work. But at the moment, as you're typing everything out, nothing will change on the screen. So in this case, what are we looking for is model. So we'll have a common model, then I'll have a modal overlay class. So div with a class of modal overlay mark so and then within this div, we'll have a modal container. So we're looking forward to class of modal container. And then within this container, we'll have two things, a array and a button. So pretty much the same setup, when we're in this case, of course, when we're talking about is the close button. So if I open up the model, notice will have some kind of content. And that is going to be a heading three, and then the close button. But again, at the moment, as you will be typing this out, you won't see anything, because the CSS is already added where it hides the model, okay, so don't worry about it, just keep on typing away, and make
01:40:49
sure that the class names match though. Otherwise, if they won't match, then of course, you will not be able to follow along. So I'm going to go with having three modal content. And then I'll have my close button out here a class of close or class, close and btn. And then within a button, I'll place my Font Awesome icon, the classes are going to be high F, A, F A times. And once I save as I keep on repeating, 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 had for the sidebar and nav bar, I would want to give you a challenge where I want you to try to create the project yourself. Now, don't worry, I'll still give you a guidelines and all that. But instead of giving you a general concept, like I was doing for the sidebar, and for navbar, I want you to try doing the project yourself. And we will work if we had to style CSS, you'll see the modal overlay class. Again, the class is modal overlay. Now we're using position fixed, we're placing on top of rest of the content. But then like I already previously mentioned, I already added CSS that will hide the model. That's why at the moment, we cannot see the model. Now if you comment out these two lines, and of course, you will be able to see the model. Now the class that shows the model, like in a previous project is called Open model. Again, remember with the sidebar and then with an app, but for both of them, we had a class that was just toggling the sidebar, or dinajpur. So the same works over here, where the model is hidden by default. And then we're using this open model class to toggle the model. So here's what I would want you to do head to objects, and then you'll see the comments. And as you can see, these are the steps that I would want you to take, I would want you to select model button, model Overlay and close button. So what are those three things? Well, if we check out HTML, I can see the model button, I can see the mall overlay. And of course, I can also see the clothes but then once you have selected them, I would want you to add a event listener to model button and the close button. So both buttons, add event listener. And of course you'll be listening for the click event. And then when the user clicks the modal button, I would want you to add open model class to a modal overlay. But then when the user clicks the close button Then of course, I would want you to remove the open model class from the model more like. Now, of course, I will show you my solution in the upcoming video. And also, if you would like to take a peek of how the final project looks like, of course, you can head to final directory, but I would really want you to at least try doing it yourself. Because you'll notice as you're struggling with things, you'll learn way more than just watching me type out everything in front of you. Alright, hopefully, you're able to complete
01:41:23
the project on your own. And here goes my solution. So I'll start by targeting three things modal button, modal overlay, as well as the close button. So go with const modal btn is equal to document dot query selector. And then the class that I'm looking for is modal, bt, not particularly original, but he will do its job. And then I'll copy and paste two times. And then of course, I would want to change these values. So for the second one, I'll have a variable of modal. And then the third one will be my close button. So close btn. And, of course, I do need to change these classes around to and then the model has the class of modal overlay. So let me delete the button part and just add modal overlay. And then of course, for the close button, class is close btn. And then like I 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 do the same thing for my closed one. So let me copy and paste. The only difference is that of course, I'm going to be adding this to my close button. So have both of the event listeners. And then once I click on a modal button, I would want that open modal class to 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 model class has the visibility of visible and then z index of 10. That's why when we have this class, we'll be able to see the model. And then once we remove the class, again, model will be hidden. That's the whole setup for our model. I already have selected my model. So our model, then remember, we have a property with a value of class list. And since I would want to add it, I'm going to run method. And then the class name, but I'm looking for is open model. That's the class. And I'll copy and 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 then the moment I press on the button, of course I can see my model. And then I also have the close button. So of course I can I hit the button. Now if you'd like to test it out on a bigger screen, of course, we can navigate that. And that is my current project, I click on opening the model, I have some kind of content, and then I can close it. Now if you don't want to test it out, of course, you can have to index HTML and just add more stuff within the model. So it's more than just a simple heading three. Well, that should do it for a project. Hopefully, you're able to solve the challenge. And I'll see you in next project. Awesome work. And up next, we have questions project, where we can imagine that in 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 the user wants to see the answers, of course, he or she needs to click on the plus icon,
01:41:57
and we can see our answer. Now a few cool things that we will learn during this project is how we can close arrest of the items. Once we open the second one. And honest once I open up the second one that only this one stays open, and the previous ones closed. And also this project will have two solutions. Were in one solution will traverse the DOM will navigate up and down the DOM tree. And the second option will be selecting elements from within the element. And I completely understand that this sounds like gibberish right now. Don't worry, once we get there, you understand completely what I mean. But as always, we do need to start with our index HTML. Effectively, we do need to add our HTML. And of course, I don't want questions project heading one, which is in my setup. I'll delete it. I think I'll close the sidebar for time being as well. Just so I have a little bit more real estate. And then what I'm looking for here is a section with a class of questions. So section class of questions. Trans math question questions. And then I'll start by having some kind of title. So let me add here maybe a comment first. So title, and then div with a class of title. Then with a title, I'm going to place a Heading Two, with a text of general portions. And then right after the title, I'll have my section center. So let me out again common of questions morash, trans. Mark, so and then the div with the class of question center or, you know, no section center, sorry, not question section, section center. And then within this there will have three articles, which each of them will present a single question. So I'm going to go here with the common single question. And I'll copy and paste unless it's just my preference, when I'm copying, pasting something to have the opening comment and the closing one, because that way, I know that I just need to grab both of them. And I'm good to go. And then like I said, He will be an article, and it will have a class of question. And then within this article, we'll have two things, we'll have the title. So again, depending on 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. But in order to set everything up, of course, we'll have two buttons here, we're gonna have a 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 general idea is like this, where we have the paragraph and the button. So I'm going to go here with a paragraph with some kind of text. Now you can come up with your own text, but I'm just going to go with the you accept all major credit cards, question mark. On line a right after the paragraph, like I said, we'll have a button. And then for the button, we'll have a type of button just to stay consistent. And then class is important. Now one as question btn. And then like I said, within this button,
01:42:30
we'll have two things. We'll have two icons, one plus and one minus. Now both of them are placed within these bounds. And both of them will have some kind of unique class. So for the span, one will have a class and the value will be plus icon, plus hyphen icon. And then within this panel, have my Font Awesome, where all have classes of fA r and then fa, hyphen plus, sorry, plus here, and then hyphen, square, square number that is going to be my plus icon. Okay, good. Once I say that should be my look. And you know what? I think I missed out on there. So my apologies, instead of just placing it willy nilly, you know what, within the question, I'll have to have one more class. So I'll have here question. And then hyphen title. My apologies. I should have added it in the beginning. But I guess I'll have to do it right now. So let me move it up. I'll have question title. And this case, I think I'm going to add your comment as well of question title. And then within this div will place the paragraph and then the button with two spans at the moment, we have one but don't worry, we'll fix that in a second. So I have my first panel. Awesome. And then I'll have a second one. Now for this guy, though, the class will be minus icon. So that's the class on span. And then for the Font Awesome. I'll have fA r. and then fa, fa plus our I'm sorry, minus i guess, minus square, or exoteric. And now I have two buttons. Now, don't worry, we still need to do some general setup. So at the annual not only one, as we're clicking but for the time being or after. So that should do it for our title. Let me see where my title ends. All right over here. And then I'll have my question text. So question, text. And of course, there's going to be corresponding div as well, with a class of question text. And then within the question text, I'm just gonna have a paragraph with, I don't know, 20 words. 30 words. It's really up to you. I'll save it. Okay, awesome. And now I'm just gonna copy and paste. Now I'm not going to go really crazy. I'm just going to have three questions. Just remember, functionality will work regardless. So if you want to have 20 questions here, feel free to do it. But in my opinion, you probably don't want to watch me, Hawaii add 20 questions. So I'm just going to add two more. So like I said, I'll select everything, starting with a 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 change some values around and I'll take a look at the text. So the You support organic ingredients? Or I'm sorry, do you use organic ingredients? I guess I was reading both questions at the same time. That also happens sometimes. So in this case, I'm looking for my third question. And I just want to change the text. That's all we have to do. So again, we don't need to treasure any classes or anything like that. We just have to have a different text here.
01:43:03
And I'll do the same thing for my second question. Just so I can speed up a little bit. Let me get my text, I'll scroll up. That should do it. We'll have our second text as well. And now I have all the questions, I can see all the answers and all that. And now of course, we can proceed and start setting up our functionality in JavaScript. Before we start typing away our functionality. Like in some of the previous projects, I want you to understand general concepts first. So essentially, how it will work without JavaScript. And then once we start out in JavaScript, we already have general idea of what do we need to accomplish? So if we had two styles, CSS, keep on scrolling. In a bottom, you'll see bunch of classes that have been commented out. And what we would want to do is hide this question text by default. So the moment page loads, I'm hiring this question text. And only once we click on a button, then we'll display that. And the way we'll do that is we have a question. Text class, of course, that's why we have equal to display on by default, so the text will be hidden. And then again, we'll introduce a class by the name of show text. Now, once this show text has been added to a question, the question text class will have a value of display block. What does that mean? That means that question will be visible, as far as the icons, by default are high the minus icon. That's why we'll have minus icon display none. But then again, class will be added by the value of show text. And then once that class is added, then minus icon will be displayed, and plus icon will disappear. So we need to uncomment this. And we'll right away, see that text is gone. Minus icon is gone. And then again, we can do the manual setup. Where will this class show text manually, just so we can see how everything works? Now, I'm not going to a final project, even though technically I could. But I'm just going to go to the project where we're currently working. We'll crack open my dev tools. I'm looking for the question. And, again, you can add it to any questions. But of course, I'll do it 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 show text. And you'll see the moment I run it, I have two things happening. I have the minus icon instead of the plus one. And then I can see the text. And then of course, a moment I'll remove this class, what do you think will happen? Well, it's just going to go back to the default. And again, effectively, this is what we'll do with JavaScript will dynamically add this class. And then the moment we click one more time, then of course, we'll reward we'll just be toggling, like we did for the sidebar for the navbar as well as for the modal. But there's going to be some more interesting things here. Because again, we have multiple items. So now we'll take a look at how we can make sure that we close one of them if
01:43:36
we 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 two possible options. One will be traversing the DOM, and you'll see what that means in a second. And the second one will be using selectors inside the element. And I would want to start with traversing the DOM option. So open up the sidebar, I'm looking for my objects. And as you can see, I have two comments. So we'll type out first traversing the DOM. And then we'll comment this out, just so we can have it for our own reference. And then we'll use the second option using selectors inside the element. And I would want to start by selecting all the buttons. Now buttons are my looking for looking forward to question but so what I would want to do is I would want to select three question buttons. And then once I have selected them, our loop over them, and then I'll click event listener, and then I'll just make 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 buttons and again, we just need to come up with some kind of variable markers that is going to be btn s so mediums and then document then query selector, but I do need to add all because there's going to be multiple of them. And the class name is question btn. So once I have selected all the buttons, awesome, then I would want to loop over them, because I would want to add that event listener to each and every button. So I'm gonna go with bt and s. And then for each online, remember, we had a callback function. And then within this callback function as a brahmer, we could access 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 the way, since it is a parameter, I just need to add it here. So I will name this button, but you can name this orange. And then I'll say, button, event listener, listen for click events. And then we have another callback function. So in this case, I would like to access the event object. So I'm going to go here 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, and then current target. Let's save it. I'll open up the console, just so you can see that there is no black magic. And once I click Check it out, of course, this is my button. And I can clearly see that, as I'm hovering notice, it tells me that this is the button that I just clicked. So if I'm going to click on a second one, of course, this will reference the second month. So now what I would want to do, well, I would want to traverse the DOM, which is a fancy way of just moving up and down the DOM tree. If you would like to know more, we can just add to our bigger browser window. And then notice, of course, I have my question, right? And then I have the question title. So what I would want to do? Well, once I click on a button, I would want to check
01:44:10
who is the parent? Now direct parent? Is the question title, correct? Because I have a question title, and then the button is sitting within title. But what I'm looking for is this question. So that is going to be the parent of the parent. So the moment I click on a button, I know that I have clicked on one of the buttons. And then I'm just gonna say, Get me the parent, and more specifically parent of the parent. So once you get that parent, 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 I have current artists, and legends this parent element. Now once we click, what do you think is gonna happen? Am I gonna see the current target, which would be the button where I'm going to have the title? And you can probably tell already, by the way, I'm asking the question that probably the answer style, so click here, notice, is this a button or title. And this right away tells me which actual title is. So since I clicked on a second button, of course, right now I'm referencing the second pile, I'm not referencing the third, I'm not referencing the one, I'm referencing exact same title, where the buttons if we put two and two together, sorry, if we have event, that is, of course, our event object, and we have current target, which is our button. When we have a parent, which is a title. What do you think we would need to add here in order to access our question? Since question is the one that's looking for that show class, the show text class? What do you think we would need to add? And I can give your hand or we just need to repeat the same thing. We just go with the parent element. And now you'll notice something really, really cool. If I click here, not only I'm referencing the button, and the title, but I can also right away access the actual question. And that is it. That's all we actually need. Because again, remember, once we have access to that parent, what do we have to do? We already know, class list, toggle, and then show text. So each and every time I'm going to click on a button, I'll just toggle, I'll either add, or all remove show text class, from the article. And I think I'll assign it to some kind of variable just sorts a little bit more interesting, and a little bit more structurally sound. So I'm going to go with const question. So this will reference of course, the question, let me delete the parentheses. And the only thing out here is question classless toggle the property and method that we have covered before. So question. Now of course, I'm referencing the parent for the button and I'm clicking on an classlist class list and remember the property name or I'm sorry, I guess more properly, the method name was toggle. And what class I 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,
01:44:43
I'm not going to close it, just so you can see 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 class of short text. And rest of the magic is done already 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 same thing for us to them, like so I can just open up 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 started looking for the parent elements. And of course, we're going to look for children, we can look for siblings, and all that is just in this case, it was very convenient for us to find a parent. And we use parent element twice. So first, we got the title, then we got the actual question. And once we got that specific question, that's it, we were good to go. We'll just toggle and method show text. And our project is complete. Okay, we were able to find solution by traversing the DOM. So that would be one option. And then, of course, I'll comment this out, just so we can have it for our own reference. But now use another option, where we can use selectors inside the element. And this is going to be the case where it just makes way more sense for me to show you with an example. Now in this case, I'm not looking for two buttons. What I would like to do is select questions. So those articles, so those bad boys that are looking for that show 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 with document that query selector all and remember the class was question, single question, question. Okay, I have all my questions. And if you want, you can console log in, you'll see that you'll have a list of three articles. Now, I would want to loop over them. So I want to call my for each. So go here with a questions. Then for each remember, again, we had our callback function, so I go with my function. And then as a primer, I can access each and every item in my array. And just to make things a little bit more interesting, I'll try out the orange. And we'll also console log the orange, just so we can see that we have our articles, and beautiful. We do have the articles. Good. What's next? Well, here's the kicker. Same way how we use document and then query selector or query selector, or get element by ID, I can also add this query selector to my element. So once I have access to that one specific item in my loop, I can also use query selector all or query or whatever get on my body. Now, you're probably wondering, okay, how does that help me? Well, that helps us because we can select that specific button. So for example, I'm looping over. And for
01:45:16
each and every article, I can select that specific button, and you'll see why it's so useful in our use case. Now, I would want to get a little bit more serious, though. And I'll reference this as a question. Now again, technically, I can name it, whatever I would want, but I think is just going to give you a better representation, if I'll have a more meaningful name here. So I'm going to go back here to a question. Now leave this console log for you. Just again, you would want to test it out. And then I would want to select a button from within the each and every question. And how it will work, I'm going to go to cons and then btn. Now in this case, we're not typing document, because you'll notice that it will type out here document, I'll be selecting, again, all the buttons. So for each and every time I'll be looping over, I'm just gonna be selecting all three buttons. That's not what I would want. I'm not going here with the document. I'm going here with a question. Now what that does is just limits where we're looking for. So now I'm just looking either in the first one or second one or third one. So I'm going to go here with query selector. Again, the method name has not changed query selector, and I'm still looking forward to same class. A class is question btn. Now again, let's console log. Let's see what we'll have what buttons and we should have three buttons. And all three buttons. Reference exactly what we have an items. Notice, as I'm hovering over them in my dev tools. Right away I can see in a browser, which document I actually have selected. Okay, good. Now, what does that give us? Well, that gives us an option of adding a event listener to our button. And then again, once we'll click on a button, then our question will toggle it. Now let's see how that will work. So I have my button. Again, I'll comment on my console, log on live it for your reference. And then I'll say btn. So again, I'm just talking about each and every button in my question. So I'm going to go with btn. The event listener, I'll be listening for click events. And I'll go for my callback function. And then within the fallback function, I'm just going to be a question. Now why am I saying this question? Because that is the name of my parameter. So this question references my article. And then the button references, the actual button that is within the article. And again, the unique thing here was that we use question not a document. So I'm not just flying around the document and looking for that button. I'm saying, Hey, listen. Now I'm within that question, because that is, of course, my loop. So that is my iteration. For example, first one, second one, or a third one, in my case, and in my iteration, I'm saying, 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 have
01:45:49
access to that button, I'm just say, Alright, I would like to add eventlistener. And then I'm just gonna say, all right, so that specific question, that specific iteration of that article? Well, I'll just talk about. So once I click on a button, that is within the article, I'll, again, toggle the class on the actual parent. And the question, which is that article in my iteration, so here, I'll say class list. And you guessed it, again, toggle. And then we're looking for show text class, we'll save it. And I can, of course, open it, I can close it, I can open it, and I can close it. And one last thing that I would want to add is the functionality that if, for example, I have my first one open, and if I click on any of the other ones, I'll close my first one. So close all the other ones that are open. And I'll open the one that I clicked the button on. Alright, how do we do that? So within the eventlistener, I would like to select all the questions again. So before question, class list toggle, I would want select all the questions now I already have selected them. So I have access to them. So the only thing I need to do is just reference them. I'm just gonna say question matters, my list. And then again, all right, a for each. That is my loop. And in this case, I'm going to say function. Again, that is my callback function. And again, I do need to reference each and every item as a parameter. Now, since I don't want to repeat the same length, instead of question, I'm just gonna call this item, just again, understand, it is the same thing. Those are the same articles. Only in this case, I'm referencing them as items instead of the questions. And here I'll have the functionality where if the item. So if the article does not match the article, where I'm clicking the button, then just close the actual article, meaning remove the show text class. And again, if you want, you can just console log, and you'll see again, that those are our three articles. There's nothing really specific order, I do it here. And notice. Now this just shows me all my three articles, or in this case, since I clicked on a second one. This also lets me know that the second one is the one that is already open, because it has the show text class. And the way I'll send that functionality is by using the if statement, where I'm going to say if the item. So if the article in this setup, does not match the actual article, where I'm clicking the button, then remove that tax. That's why you will see that the moment I for example, click on the third one, while it's not going to match the article. So the articles aren't going to be same. And that's why I'll close the text by removing the show text class from the second one. So in this case, I'm just gonna say if the item does not match the question, then we'll write item. So that particular article, class list, remove a man we're looking for show text class. That's all we have to
01:46:22
do. So now what happens if I click for example, on my first item, of course, I can see my text. But then now once I'll click on a second one, what do you think is gonna happen? So I'll click on the second one, and then I'll loop over my quote Now, is the second article equal to my first one? No, it's not. And of course, once I click on that button, in my second question, I will have my loop. And then since the first item does not match the article, where I click the button on one button, of course, or remove the actual text, so check it out, I click, I will close out the text here. And here, even though on the third one, of course, it wasn't open to begin with. And then 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 project using two approaches. One was by traversing the DOM, parent element, notice something you should probably remember a property, it is very, very useful. And then of course, we also have a very, very nifty option, where I can select elements already within some kind of selection. So I don't have to each and every time Look around the whole document. So if I already have selected some kind of specific item, I can look within that item, I can say, question and use, again, the method query selector, or I don't know get element by ID, this is very, very nifty. Because again, you can select specific items, you don't have to select all the buttons or order articles, you can select very, very specific things within that selection. Awesome work. And welcome to our next project, the menu items project, where we'll take a look at how we can display products or any kind of items dynamically. So once the page loads, we'll use JavaScript to populate our page. And also, we'll set up some filtering options. Now why I really, really like this project, because displaying items using JavaScript, or maybe even with react and view and Angular is going to be your bread and butter. Now granted, most likely, you will do that by getting that data somewhere externally, whether it is a database, whether that is a third party API, or that sort of thing. But in our case, of course, data will be local, because we haven't covered those Ajax requests. But that doesn't mean that what we learn is going to be useless. In fact, the only difference is that once you get that data externally, well, you just add a few lines of code, you get the data, but then still everything that we'll do in this project, you'd have to repeat anyway. So don't dismiss it just because data is local. That is our setup, the rest of the things that we'll learn in this video are going to be very, very useful because like I already said, this will be your bread and butter, getting some kind of item, and then using JavaScript to iterate over those items, then decide what you'd want to display on a screen, what kind of functionality
01:46:55
you 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 add this dynamically, this HTML syntax. So I'll show you why I always like to set up my HTML first, see how my project will look like and only then dynamically added in JavaScript because it's going to be much more easier, we just need to copy and paste few lines of code. And we'll be good to go. So we head back to our setup. And then of course, at the moment, the only thing I have is my brave and proud and awesome hitting one with the text of my new project. So of course, we would want to change that around and we'll go with a section, the class will be menu. I'll close the sidebar. So I have more real estate on have a title class here. So title class, Oh, you know what a comment as well. So comment title, then my div. And then within a div, I'll have the heading two. And I'm gonna have the text of our menu. Very beautiful. And then on the line, just some fancy CSS. And of course, when I say fancy, I'm being sarcastic. And then I have my footer buttons. So right after the title, let's see where it ends. Let's add a comment for filter button, which at the moment, we're not gonna have them but still have the comments of filter buttons. Okay, awesome. And then we'll have our menu items. So another common here, and we'll say menu items. Then I'm going to add a div with a class of Section center again, so section center, and essentially, this div is just responsible for my column layout. And then I would want to select that single item And that's going to be the code that will later grab 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 I said, Now I'm creating that one single item. So we'll not worry about the buttons at the moment. But we care about this one item. So at the moment, we'll just structure one, we'll do a little bit of copy and paste, just so we can see that our column layout works. And then Mike already said probably 50,000 times, we'll just grab that code that we have for that item added to our JavaScript. And as always, I do like to have the comments here. So single item, just because I think it gives a little bit of structure. So I'll go here and off single item. And then it will be an article. And it will have a class of single item or not no sorry, menu item, or a single item menu item. And then within this article, I'll have the image. Now at the moment, I'm just looking for the item that is in my root folder. So I'm not looking at the images. Later on, we'll also take a look at the images folder. But at the moment, I'm just looking for the menu item. So this guy over here. So I look over in my files, and I'm looking for the menu item, okay, beautiful. And then
01:47:28
I'll add here, the class of photo class will be photo. And then as far as the alternative will just write menu item, not say what we'll have. I said, awesome. And then I'll have a div that will have the info. So have the photo. That was one part of my item. And then the second part will be disinfo. And since I needed for my layout, I'll place this in a dev. So I'm going to go here with a class of item info. And then within there, we'll have a drink for water milk. And of course, you can write whatever you want. But just to have a little bit more real world scenario, I'm just going to go with a real text. So buttermilk pancakes, we'll have a heading for I'll add here a class right away, and the class will be price. And then I'm going to have $1 sign of $15. Let's save it. Okay, I do have my text beautiful. And then I'll place this actually in the header. So let me go with the header. Let me select both of them both things here and place it in the header. And then right off the header, I'll have my paragraph. And the text over here is going to be item text, or that is going to be the clause, the text will be whatever you'd want. In this case, I'm going to go with 20 words, but the class will be item text. Let's add here item text. Now let's save it. And just to double check that my column layout works, I'm going to take my item, and then copy and paste a few times. Now we don't need to change the values or anything like that, I just want to see whether on a bigger screen, we'll have to come while and I do, which is awesome. So now this case, I can press Command Z, and go back to that one single item. So once I said I have all the HTML that I currently lead, and we can start setting up our functionality in the JavaScript, okay, so let's add the logic where the moment the page will load, and will dynamically populate our menu with items. So if we had two objects, we'll see a menu array. And then in the menu array, we'll have a bunch of objects. Now each object represents that one single item, again, we'll have a property of ID, which as a side note, will not use. This is just to mimic a real world response. And we'll have title, and then of course, we'll have some kind of value, there's going to be a category, because we'll use it for filtering, we'll have some kind of price, some kind of image. Now this is a tricky one, where again, since we're not getting this from external API, if you ever would want to use that menu array somewhere else, just make sure that you 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 just means that this code will be located in the index HTML, and not just a references about images array. So if you'll try to run this code without those images, well, those images won't show up, or even if the images are going to be there, but the path is going to be different.
01:48:01
For example, you'll mess images somewhere in a different folder. Again, the functionality will not work because this specifically references the images folder, as they are In the road, and then we have some kind of description that is going to be displayed here in the bottom. And yes, like I mentioned before, Normally, you would get this data externally, you'd set up some kind of Ajax request over here, and you would get the data. Now once you get the data, again, everything is going to be exactly the same. Like we will, right in this video, there's going to be no difference, you will get the data. And then you'll iterate over the data, you'll decide what you would want to display, what kind of functionality and 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 set up data request, get that there. And we'll be good to go. But like I previously already mentioned, we haven't covered Ajax. And I think it is crucial that you understand the basics of how to display items on a screen because it will, it will be your bread and butter as you're working with JavaScript. So I have my menu. For the time being, I'll collapse it. I will reference it once in a while, just when I would want to show some properties or maybe some vouchers and all that. And just always remember that you have it in your own app js. So if you ever need to take a look at it, just open it up. And you can take a look at the specific information you're looking for. And I'll start by selecting the section center. Now, why am I selecting the section center? Because remember that DOM content loaded and was one of the events that we already used in the previous project where I had window, add event listener. So it was listening for that DOM content loaded. So when my page loads, and then I had a callback function. 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 populate these items, or I need to place those items somewhere correct. So if I'm checking out my index HTML, which is the parent, for all my items, are all my single items. Well, that is a section center. That's where we'll need to start by targeting the section center. So I'm going to go here, we can't section center. Again, you can call this variable however you want, I just went a long way. And then the document, then you get the query selector, since that seems to be my favorite one. And then section center. Awesome. I selected my parent. Now, remember, we had DOM content loaded. So when our page loads, we would want to do something. So I'm going to go here with window, then add event listener. And then I would want to listen for that DOM content loaded event. So I have my parentheses. Okay, I have my quotation marks. And I'm listening for DOM content, and then loaded. And then of course, in here, I'll have my callback function. Now within a callback function will start very, very simply, by just console logging
01:48:35
shake back, just so we can see that everything works. We'll head to my console, I already have 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 our menu array. What would be the plan? Well, we could set up a map method, correct. So I have my items. Now, I would want to iterate over 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 just let's think about it. So we have our HTML, right. So we have our article and everything. And then in each of these elements without emerge, whether that's heading four or whatever, I just have some kind of data. This at the moment just points to some specific image. This one just says buttermilk pancakes, but I have that data already in my items. So I would just need to come up with some kind of way where I can iterate over those items. And then I can just add some HTML, and then place this data in that HTML. Again, my terminology is dress them up in HTML. But of course, that is not official or anything like that. Now, the way it will work, as First of all, I will collapse this, and we'll use our map method. And we'll assign it to some kind of variable because that wouldn't make sense. Since we're creating new array with a map. We might as well do that. So let now I purposely using a lot and you'll see in a second why. And again, we need to come up with some kind of name. I'm going to go with the Display menu here. And then I'll use my menu array. And like I said, we'll use map method. Now the way map method works Here's just like with filter, we could access each and every item in the parameter, as long as it is a parameter. So in this case, I'm just gonna call this item. Now what's really cool that with map, we can modify our array. And just showcase let's just start very simply by returning the same item. So I'm just going to go here item. Now as you would want, you can also console log item, if you don't believe me, but you'll access each and every item. And then in here, I'll just console log and display Display menu, like so. And then let's see. So notice I have all these items, I have nine of them. So for each and every iteration, I can see my item with all the IDS with all the categories, prices, and all that. So all the properties are there. And then in the bottom, of course, I have the same array. So in this case, I didn't do anything, I just looked over it iterated, and then said, okay, just return the same item. Okay, that's an easy part. Now, let's make it a little bit more interesting. Where What if I would want to access for example, I don't know title property. But then what's really cool that with map, I can customize, or you can say you can modify the new data structure that you'll have to know, in order to make it a little bit more interesting. Instead of returning the item. Why don't we try this one out? Why don't we say you know what, I'll return a
01:49:09
template string. And remember, within template string, we could just write HTML. And then I'm gonna say, Hello, hello, world. And then we'll close out the heading one. Now, what do you think is going to be in the Display menu? 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 a bunch of HelloWorld. So I have hello world. Hello, world. So again, same amount of items that I had in the menu. In this case, I modified what 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 when I'm using the template string, what I can do, I can place a variable in there. And since I can access each and every item, we already saw that in a console log. What do you think I can do over here can delete hello world, I can use the dollar sign. And I can access my variable. Now mine is my variable name. So this is my object, the item? What is the property for my title? Item, dot and then title. That's it. Now what do you see here on the right hand side, I have heading one with buttermilk pancakes, I have a second 1/3 one. And again, all the way till the end of my array. And all the titles are unique. So a lot of them have been added mark so and then the actual values are referencing exactly what I have my re don't believe me, you can double check. And you'll see that the titles are exactly the same as the values in my title property. Okay, good. Now, well, remember, we were setting up the index HTML. And this was the whole point. This was why we went through all the hassle to set up all the HTML because I'm not going to be returning to heading one. I'm going to return everything that I have in my single item, just grab the whole article, head back to App j s. And then instead of having one, copy and paste your article, so now you're returning the article. And now let's think about it, what do we need to do? So right now, of course, I'm returning the hard coded article. But we already saw with a heading one example, that of course, we can make this dynamic, correct. So how do we make this dynamic? We start accessing the variables, we start accessing the properties in object. And we'll start with our image, of course. So instead of hard coding this menu item, I will go with my dollar sign, of course, I'm accessing my variable. And then the property name is item. img. So that's where I have my image. As far as the class, I will keep the class of course, but then as far as the alternative, I'm just going to go with a title actually. So I am title just like I had in one than I think for what do you think I'll place here? Yes, you're correct. We'll look for that title. So the same one, for realtor price. Well, the property name 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.
01:49:43
So I'll delete my hardcore adoption. Then again, I'll use my variable here, and we'll go with item and then description like so. We'll save it and now of course, I can see that I'm Getting these items. And what do you 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 in my selection center. And I can do that by using join method. So since this is an array, we're getting back the array, the Display menu, we have an option of running the join method, which just joins it in one string. Now, let's see how it's gonna look like. I'm going to go here with this play menu. So since I'm using what course I can override it, and I'll just say, Alright, yeah, Display menu will stay the same. But I'll run Display menu join. And then we need to have here empty quotation marks. Now there's multiple values that you can add here. But the reason why we're adding here empty parentheses, is because of then we won't have these annoying commas in between. So let's save it and you'll see that we will have a one giant string. Now if you want, add that, you'll see that in between them, you will have those commas. So if we find we have article here, and then notice in between articles, you have this column. So what will happen, that will be the item that will be displayed, and you don't want that. So you for sure want those quotation marks here, the empty ones. That way, you won't have those commas in between those articles. So now we have that big, giant string. And what do we do now? Now we just add it as our data. So the word will look like, we'll go with section center. So remember, that was our parent, of course, then we go with inner HTML. And then we just pass it here, we say Display menu. Because this is the data that we're getting back, we looped over our array, we return new syrup, we actually added here a string with HTML syntax, we dynamically populated that, at the very end, we joined all of them together. And then we're just placing it in the section Center, which is the parent, then we're using inner HTML property. And we're just setting it equal to our Display menu. And you'll see that the moment you navigate to a bigger screen, Wallah, we have all the items, and they reference exactly what we have in the array. Again, this is going to be your bread and butter, you will have some kind of items, we will have to iterate over items, you will have to decide what you'd want to return. So what kind of info as you saw with heading one, we can return whatever we would want. In our case, we had specific HTML, then we join everything together, and then just placed it in the parent element. And then we use the innerHTML. And then just assign this to whatever we got back. Once we run join method on our array, that's going to be something that you'll do very, very often, as you're working with JavaScript, we're at work, we're done with our initial setup course, in order to set up filtering.
01:50:17
If we wouldn't want to repeat ourselves, it would be better if I would place all this functionality in a function. And then as a parameter in a function, I'll pass in the array. And again, it will make way more sense as we set up the filtering. At the moment, you would be like, Okay, why is this guy refactoring the code again, again, in order to set up filtering, it will just make sense if we set up this functionality in a function, because that 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 menu items, maybe that wouldn't be a nicer name for my function. So I'm going to go here with function, then Display menu items, Mark. So that is my function. And then like I said, this item will be looking for the array. So this function will be looking for some kind of array. Now in this case, we'll still use our menu one. But since it is Brahma, I'm going to call this menu items. That's going to be my parameter. And as an argument, yes, initially, we will still pass our menu. But as we start filtering, you'll see why it's so convenient for us to have it as a function. And now what I would want is just grab everything that we have within a function body, within a 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 change right now is instead of iterating over the menu, there is of course, our array, I would want to iterate over the array that will pass in the function. So half your menu, items array. And now of course, Sam od one still everything to work, I'll call my function. I'll call Display menu items function. And like I said, initially, yes, I'll still pass in my menu array. So what happens is I have my menu items array. That is, of course, my parameter. And as an argument, I'm passing in the menu, and you'll see that our functionality will still work. So everything will still stay the same, the differences, now when we'll set up filtering is just going to be much more easier, because we will have our function. And then depending on situation, we will call our function. And we won't have to retype this is just going to be a faster setup. And as I said, I have been adding some references for you. For example, if you check out basic dx dy, you'll see the previous code. So just in case, as you're factoring with me, and something doesn't work. Remember that in basic txt, you'll have access to the code you have in the beginning of the video. So that way, you can just make sure that you don't make some kind of bug. Or if you make a bug, then you can find where is your actual error. But that should do it for this video, we now have our functionality in the actual function, we're ready to start adding our filtering options to our project. Once we're going to display our items, once we have a refactor our code a bit where our functionality is
01:50:50
in function. Now let's start working on filtering. And as always, we'll have to start with index HTML. So where we add filter buttons comment will add here a div with a class of btn. painter. And then within this container, for the time being, we'll place four buttons. Now, why do we need four buttons, because we have four categories, we'll have category for all. So that's when we'll display all the items. And then we'll have for breakfast, lunch, as well as the shifts. So we'll navigate back, and we'll set up those four buttons. So I'm going to go here with a button. But then I also want to of course, select that model. So in order to do that, I'll have to add some kind of class. And the class, we're all of them will be filter, bt and not the button. And you know what, I'll also add a type here, and I'm just gonna say button, and I'll just add a text. So I'm gonna say all that's going to be my first button. And of course, like I said, I don't want to copy and paste, one, two, and three, now the class will stay the same, 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. And again, they're just referencing the categories that 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 three categories that I'm using. And the last one will 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 that in the next video. Okay, so how do we set up the functionality so that when we click on buttons, we display specific items, whether that is the ones that are for a breakfast, or lunch or shakes. So essentially, the items that have the category of breakfast, lunch, or shirts, or we just display all the items. And you guessed that we would need to head back to App A j s. And I'll start by selecting my filter buttons. Now for the time being, I'm going to close my menu, I don't think I need it. And first, our selected section center. 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 is equal to my document. query selector all since again, I'll have a list. And then the class name is filter btn. Once I have selected my buttons, then right after the window, the event listener, I will just listen for the actual event on buttons. Of course, I'll iterate over them, but then I'll attach a event listener for each and every button. Now of course, you can place it here at the very end. It's really up to you, but I'll place it in between. So right after the first event listener, where we are just loading all our items. So let's say load items. And then I'll say filter, filter items. And then in here, I have my list. I have my filter buttons. And now I want to iterate over it. So we already know
01:51:23
that we have filter buttons we can run from For each, and then we have our callback function. We're referencing each and every button as a parameter. So I'm just gonna say here btn. And then for all four buttons, I would like to add the event listener, I'll be listening for click event. And then this is going to be interesting. Well, we will understand how the data set properly works. So I have my function, I'll still look for my event object, beautiful. And then within the function body, I'll console log, something really cool. And that will be our data set. So I'm going to go with console log. And then I'm looking for 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'll look for a property that we haven't covered yet. And that is a data set. Now, please keep in mind data set property is not unique to a buttons, but we're just using in this case, so you can have this, there's all sorts, of course, all the other elements as well. Now, the way data set property works is that on the element, we can add the attribute with a data prefix. So for example, for my button that has the text, Vol. I could right here data. So that is my prefix, then we have the hyphen, and then whatever name we would want. So if you want to name this category, you can name this category. Since our want to have a short name, I will go with ID. But again, that is your preference. You can name it whatever you'd want. In my case, I'm going to call this ID. But what's important is to have this data and then hyphen in front. So once you have this, then you'll be able to access the new JavaScript, using data set property is at the moment, you'll see that we'll have nothing there. So go with data ID, and then our need to set it up to some kind of value. Now, since I'll be using my categories, I need to reference also. So in this case, I'm going to say all. Now this is of course, just because I have the text for my button as well. But then for the rest of them for rest of the buttons, I'll have to reference to that specific category. Now just to showcase what we'll get back. If you click on All button. Notice, you get this object and then within the object, you have this ID. So like I said, if you'll call this, I don't know Banana, banana, you'll see in the object also banana, once you click, again, that is the property name. That's why I keep saying that. This is up to you, however you want to call it in my case, I just call this ID, what's important is to have the data and then hyphen. And then in JavaScript, you can access this specific value using data set property, data set property will return that object. And then you can already probably guess that if you would want to be a bit more specific, you would go with a data set. So that references the object within the property name is ID. And that way, once I click Check it out, now I have undefined. Why am I undefined
01:51:57
because of course, I didn't save it. And it was 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 a value. So knowing this, I can just copy and add to each and every button. So we'll have one for the breakfast. I'll have one for the lunch. And you know, in this case, I'll zoom out because thing is going to be easier for you to see. And then last one will be shakes. And I just need to change as well. Like I said, 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 here also would reference the category, but it's not gonna break anything. But they for sure needs to match the categories that we have here within the menu. If they won't match, then again, functionality will not work. So let me zoom back in. And then I'll change one by one. So my second one, and I'll call this breakfast, breakfast, hopefully the name is exactly the same. Third one, we'll have lunch. And then third one, we'll have shakes. Okay, awesome. And now in the objects, of course, I can close my menu. And then as I'm going to be clicking on a button, you'll notice that awesome getting those IDs, okay, beautiful. Now, well, once I have that ID, I will assign it to some kind of variable. So I'm going to go here const, and I'll call this category. And of course that will be equal to my current target data set, and then Id great. And now I want to use a filter method. So here's what I'll do. Remember, we have our function. We have Display menu items. Now what is this function looking for? It is looking forward to your right. And I already know that I can use a filter array, where I can filter out what items are going to be left in the new array. So I could filter out array, depending on what is the value for my category. So let me format this properly. And now I'll create a new array. So I'm going to say const. Menu category, and then that will be equal to my menu. So my main array, the one that I have up here, and then I'll use filter method. Again, we have the callback function, each and every item is represented in a parameter. So I'm going to call this a menu item. And if I won't set up any kind of condition, of course, you'll see that our returning all the items so far right here, return menu item, so there's no condition, if you'd want to console 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 all deny items. So of course, we need to make things a bit more interesting, where now I would want to return only if the menu item has the category that is equal to whatever I have in here. As a side note, if you'd want to console log even more, so menu item, and then category, you'll see that for each and every item, of course you have this category. So now the job is very simple. I just want
01:52:30
to return if the item matches whatever I have in a category. So what is going to be in the category. That is of course going to be the data ID that I placed there in a button, which I'll access using data set. And then when I access it, I'll assign it to category. And then I'll say okay, in the menu item category matches to the category variable, beautiful return on item. If not, then I don't want it. So console log, let's say that one for your reference. And like I said, we'll set up our if so menu, item, category Eve that matches my variable value, then of course, I would want to return menu item. And I of course, already that text. So I'll just say right here. And then instead of just console logging, we can right away display. And we need to be careful, though, because we'll use also all correct. My first button. This all that was the value for the ID. Now if I'll use my filter, do you think I'll get something back if I use all? And the answer is no. Because of course there is no category there with a valuable, they either have lunch or breakfast or shake. So we need to set up another 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 go with if category, if that is the case, if the category is equal to all. So that would be all button. And I'll need to sign this to a string, then, or want to call my Display menu items. So that's going to be my function. So that's why we were setting up the function because I did not want to repeat this functionality. I was the whole point of why we refactor our code. So now if the categories all then I will call my Display menu items with my menu array. This is important menu array. That's the one that we're using. However, if the category is something else, so if it is breakfast, lunch, or shakes, then we'll run the Display menu items. That is of course my function. And then since the function is looking for the 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 will navigate to a bigger screen. And we'll see that once you press on all course you will display all of them. And once you read in breakfast, you'll have breakfast lunch. And then again, the biggest thing over here is the data set. So you have this data, and then hyphen, then whatever value you want, or you remember that will show up in the data set object. And you just need to come up with some kind of values here. So in our case, it was all breakfast, lunch and checks. And then in the objects, we use current target. But of course, we can assign this data set to other elements as well if we would want. So data set property, then we're looking more specifically to ID, because that's how I named it, Senator category, used filter, filter out the items that have the same exact matching category. And then at the end, we'll just check if the category resolved and I would want to display all the items if the category
01:53:04
was there. So whether it's breakfast, lunch or shakes, then we'll use our filtered out array, and then we just call Display menu items. Then pass in the array, great work on setting up our items dynamically, as well as 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 hard coded our buttons correct. And then each button was referencing the category. But then what happens if these various changes for the categories? What do we do then? Do we run to index HTML each and every time and then change this value. Or it would make sense if we would set this up dynamically. And I'll give you an example. For example, in the address, remember, we have a menu. And then what if I would add one more item, and this is going to be a steak dinner. So what I'll do, I'll copy and paste, I'll change the ID. Again, not that we'll use 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 new category, and that will be dinner. Now, as far as the price, usually steak is quite expensive. So I'm going to go with 3999. And for the majority have the image with a value of 10. And description, of course can stay whatever it is. Now I'll navigate back to my bigger browser window. And I'll see that, of course, I have the steak dinner, because items are being added dynamically when the button is not there. So of course, as I'm filtering, the only way I can see my steak dinner is if 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 this is again, something that we need to remember that normally we'll do this with some kind of external API, where at the moment, of course, I know all my categories. So that's why it's so easy for me to but the moment when someone will start changing the data, we need to make sure that our data is dynamic, where our check all the categories. And then depending on those categories, I'll filter those items. So for example, once I added a new category, it should show up over here. And then once I click, then I'll display my steak dinner. And we'll do that in a multiple steps, don't worry, we will not do that right away. And I'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 hardest part, because we'll have to do a little bit of JavaScript magic in there. And then once we 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 with our dynamic item setup. But then we incorporate JavaScript. And at the very end, we just need to make sure that once we actually set up
01:53:37
the buttons, only, then we select them. And again, this is something that I'll cover where once we add our buttons dynamically, this will not work, we won't be able to access them, we'll have to move this code in a different place. Like I said, we'll do this step by step. So don't worry. I'll start by simply commenting 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't delete them. Because similarly, like we have 40 items, we will grab this code, since I don't want to write it from scratch. And as a 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 is done. As you can see, we don't have the buttons. So we'll have to dynamically and we'll start doing that in our app j s. Let's navigate to App j s. And then I'm going to look for my event listener, the DOM content loaded one. And then right after I display the items, I'll start setting up the functionality. As I sign out at the end, we will set up a function, same how we have Display menu items, we'll have one for the buttons. And then of course, we'll just copy and paste everything within that function, and then just invoke the function. But since I don't want to confuse you right off the bat, at the moment, I'll just write my code here. And then we'll refactor our application a bit. I also want to let you know that since we'll be adding some changes to our JavaScript. We already have the previous code over here. So if you check out a naive txt, you'll find all the code that we have at this point. So if you make some kind of bug or something like that, you can always reference this file, which is exactly what we have covered. Only since we'll be adding some changes, starting with this video. Like I said, the first thing that I would want is get only unique categories. And it will be the hardest part. And we'll just start very simply by running a map method. So what I would want is display the categories. So we're going to go with const, then categories, and that will be equal to my menu. And then I'll run my method. Because this is what I would want to do, I would want to iterate over my menu array, and then return only the categories. Remember, each and every item has that property of categories. So I'd want to store this in the categories array, since I know that map returns a new array. So I have my callback function, I'll have my item, I'm not going to be very creative with my parameter. And I'm just going to say that as we're iterating over my array, I would like to return item, and category. And as always, I do prefer console logging everything, just so we can see that we're all on the same page. And if we'll check the console, you'll see that I have array of 10 items. Now why do I have 10 items, because I have 10 categories. So everything works really well. But like
01:54:10
I said, I would want to get unique ones, Matt is very important. Because otherwise he will display my buttons right now e-file actually iterate over these categories and return my buttons. When I'll have 10 buttons, and I don't want them buttons. I only want buttons for unique categories. So how do we set this one up? Well, instead of map we'll have to use urges. And as a side note, with arrival of air six, there is a easier way how we can do that. But again, since we haven't covered ear six yet, we'll use orange juice. And I also think that it's very useful that we'll practice with the juice, because reduce is a very, very powerful method. And the sooner you'll get comfortable with it, the better is going to be now I'm not going to comment out this code. In fact, I will delete it, since there's already quite a few comments here. And we'll just around the herders, so I'll have my reduce method. And then the same as for the map and filter, we need to pass in a callback function, or the difference with reduce is that we have two parameters in our callback function. And also, we need to come up with some kind of initial value. And most likely, if you have been looking at examples, you probably saw something like this where they were returning initial value, because most examples online are how you use reduce, to sum up some kind of values. But reduce can do way, way more than that. In our case, instead of returning some kind of number, we will return our array. And we'll have one item in there. And the value will be a string of all. So why am I placing here to string of all because I also have this button that references all the items. That is of course not my category. So that's something that I would want to add manually. That's why I'm returning an array. And then within that array, I have this string of all. And once I have this syrup, then I have two parameters in my orders. Now they are referenced as accumulator and current. But as always, it is a primer, so you can call it whatever you'd want. So in my case, I'll call this values. So that references this array that I'm returning, and then actual item references each and every item because again, with the reduce, we're still iterating over Alright, so we'll still iterate over each item in my menu array. Since I'm running menu and reduce. And here's my setup, we always always when we use reduce, need to return the values. So that's going to be our total. So on each and every iteration, we need to return the values Otherwise, this functionality will not work. And here's what I'll do, if you'd want again, you can console log, just to see that you'll get the item. But since we have console log quite a few times, I'll skip that. But I would want to check whether the item category. So that is the property with the value is already in my array. So I can write here The if statement. And I can say not. So values. So that of course
01:54:43
is 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 want to actually add an item. So I'm gonna say values, push and don't worry once we write out the code I'll cover in greater detail what we're doing but item category, not save it. So here's what is happening. First of all, we can see in a console that I'm getting all my unique categories. I have all I have breakfast, lunch shakes and dinner and as you can see I'm not repeating them. But what is happening here in the function body is where 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 the items 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 item category is already in my array, which of course is going to be case, for example, for breakfast, lunch tricks and dinner, then just skip, just return the array. So that's how we can get our unique categories using reduce, again, with ESX, there is a shorter way, we can write a one liner, but I thought this would be a great practice for us to use a reduce, where again, we iterate all the items, we have two parameters, in this case, one for total, and one for each item, we are returning array 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 item is already Nuray, then just return the array and 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 that you have in the item category. Like I previously mentioned, getting these unique categories was definitely the hardest part. And I can promise that starting from this point, it's going to be smooth sailing, since we'll be repeating a lot of the same stuff that we already covered. And we'll start by actually adding these categories as our buttons. And it's going to be very similar to what we did with a menu items where again, remember, we had some kind of array. And then we just iterated over the array and grabbed HTML, and dynamically plug the routers. And we just need to come up with some kind of name for whatever we will be returning. So in this case, I will delete my console log. And I'll just come up with some kind of variable name. And that will be category buttons, or category btn. So buttons, and I'll use my categories array, I'll use my map method, we have our callback function. And in this case, I'll reference each and every item as a category. And then instead of returning some random string, I would want to wrap my value my category value in the HTML. And of course, since on one Return
01:55:16
button, I'll just use one of the HTML for the button. So grab one of the buttons, it doesn't really matter which one because we'll replace these values and just added in my JavaScript. So instead of I'm sorry, like this, I need to set up of course, the template string, copy and paste. And now I'm returning the button. And what am I looking for as far as the value? Well, since each and every item represents the category, wouldn't make sense that if we dynamically place it, where we have the date ID, as well as the value. So let's try it out. Instead of breakfast, hard coded breakfast, I'm going to go with my category. And then I'm going to do the same thing for a value here. So I have here, again, the dollar sign, and then we'll have the category. Now of course, once I have set up my buttons, that is only the start, I would need to set this up as a string, because we still have each and every value in our array. And remember, we need to use join method for that. But then we have multiple ways, we can either do it the wrong way where we have Display menu, and then I just reassign it to Display menu join. But in this case, I purposely use cons. So we cannot do it this way. So we cannot reassign. What we can do is by adding the join here, so your journal at the end. So essentially, I will just change my methods are actually saved. And you'll see that again, in category button, we'll have our string. So in this case, I will console log category buttons here, and you'll see that we'll have our giant awesome string that contains all our buttons. And now of course, I would want to target my container. So my button container, and I want to add a class of btn container and just using our HTML to add my string. So then I'll have my dynamic buttons. So go back where I have the selections on we're gonna go right off their sexual container because assignment we'll have to move this one. So I'm skipping a little bit ahead, but they We'll be sitting somewhere else the filter buttons brought in here, I would like to target like I said, my container, the class was btn container. So go with container, or will be my value. And then I'm using document, query selector. And then let me just double check the class. There's button container because I 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. So right after I've set up my buttons, I'll use my container, since we just selected it, of course. And then like I said, the property name will be innerHTML is equal to my category buttons. We'll save it. And voila, now we have our awesome buttons. Of course, at the moment, as I'm clicking, notice, nothing is happening. Now why nothing is happening? Well, let's think about it. So I added the buttons, but then manually selecting the buttons over here. So what do you think is happening? Do
01:55:49
we get any buttons when we make the selection with filter buttons, because the difference right now is that we're adding these buttons dynamically. It's not like previously, where we added in the HTML. So when the JavaScript loaded, it was like, Okay, get me the buttons. And here we go. These are the buttons. Now what happens since we're adding them dynamically, when JavaScript tries to get those buttons, we'll get back undefined. So I can just console log in for your reference. So filter buttons, and you'll see that even though these buttons still have the filter button class, because we're adding them dynamically, we have no access to it, our node list is empty. So there's no way for us to access them, and then add that filter medians. Now how we can fix that? Well, the fix is simple, where we will need to select these models, once they have been added to our DOM. So once we dynamically add them to our DOM, then we can target them by selecting them. And adding also these event listener for each and every button. So we iterate over the buttons, and then we add the event listener. So what we need to do is just move this filter buttons, and I'll do it my console log. And let me move this line down. Let's keep on moving, keep on moving. And then right after we have added them in the container, then I will select them. And now of course we'll have access to them. And of course, we can also iterate over them. And we're adding this event listener. So let me keep on scrolling, I'll cut everything out. Like I said, For the time being I'll place everything within my event, the DOM content loaded, but then we'll set up of course, a function because it just makes a little more sense. So let me say just so I can show you that functionality will work. So as you can see, now I'm selecting the items, and I'm getting the unique items. The reason why this works, because now I'm selecting the buttons, after we have added them dynamically to our DOM, not before, not right away running and selecting because they're not in the HTML, they have been added dynamically. That's why we can only access them once actually, they have been added to the DOM. And if you want to keep on practicing, remember, you could also use a more specific setup where we're looking for the container. Now again, that is a side note. In this case, it doesn't really change anything. But just for practice. Remember, we didn't have to use always document, we can also use a more specific selection, if we have selected that element already. And I guess the last thing that I would want is to set up a function display. And I guess I'll call this I don't know, Display menu buttons. And I'll just invoke that function in my event listener because I think the code is going to be a little bit cleaner. So go with function. Around display, not menu items will have buttons, so have menu modules. Now this function will not pass any kind of parameters.
01:56:22
So it's not going to be accepting any kind of arguments. But what I would want is everything starting from the categories all the way till the end. And I'm just guess I just do need to be careful. Because I probably don't want to delete some unnecessary parentheses or the actual curly braces. So let's see, let's say Eric, I don't have any errors. Awesome. And now I just need to copy and paste where I have my menu buttons. So of course once I save it, now I should see my buttons, but I do need to invoke that function. So how The Display menu buttons, again, we're still looking for the categories, we're still adding HTML to our categories. That's how we can see the buttons. And at the very end, we're adding categories to our HTML. And only then, and I know I said this 20,000 times, but it is very, very important. It will save you a lot of time debugging, where you know that if you add something dynamically, you can only access it once it has been added already to 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 just iterate over them, and then check what is the category and then only return the items that match that category. And like I said, the last thing that I would want is just to run my function. So Display menu, buttons. And in this case, we're not passing any kind of argument. And we're good to go. And now we have our categories. So if I head back to my project, I can see that I have breakfast and lunch shakes, as well as dinner. And if I want to see all of them, I just click on all again, very, very important project, because it will be your bread and butter. Hopefully you were able to follow along. And I hope to see you in a next project. Awesome work. Next we have the video project, where we'll add video in the HTML. But then since we'll have a white text, we'll have to add some kind of darker overlay. So once we add the overlay will not be able to access the controls the video controls. And that's why we'll have to use the JavaScript to add the play and pause. And also during this project, we'll take a look at how we can add a preloader. Actually, in order to show you clear on navigate network on make sure that I have a slower speed. And you'll see that while the video is loading will have a preloader. As a side note, it's not unique to a video. So effectively, you can add the preload to any project. Once you'll know how. The only reason why I added to the video because videos are usually large assets. So it just made sense to add the preloader to this particular project. And just in case anyone is wondering, no, I have no idea what is this guy's problem, why he thinks it's okay to run barefoot in the desert. Hopefully he's okay. And with that out of the way, we're gonna start working on our project. Okay, and we'll kick things off by setting up our HTML. So navigate to a set of folder, I'm
01:56:55
looking for index HTML, I might as well keep the heading one with the text and video project, because that is the same heading one with the same text that we'll use later on. And in here, I'll just place a comment for the header, because eventually there's also going to be a preloader. So go with my header element. And within the header element, I'll place my video element. So go with video element, instead of placing the source in the attributes, I'm just gonna go for the source tag. And then I'll have my source. And as far as the video is obviously available in the route. So if you look for the files, you'll see a video mp4. Now we do need to add here a Type and Type will be video forward slash pampy for Let's save it, and then I would want to add few classes here or more specifically a few attributes and one class. So I'll go with class. The class name will be video container, just because I would want to add a little bit of CSS. And also, like I said, we'll have few attributes here. So I'm going to go with controls, muted. autoplay loop, that should do it. So once I save it, you'll notice that we'll have access to controls. So the user can control the video, video will be muted by default. And the moment it loads, it will start playing. That's where we'll have the autoplay 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. This is what we should see. Now I wouldn't want to place my heading one with video project because at the moment text is here in the bottom. So just make sure to place the heading one after the video. So let me move it up. Let's save it and we should see our heading one. Now at the moment we don't see it. And the reason for that is because we will need to navigate to a styles and where you see the video container, we will need to add some kind of xenex because at the moment if I'm placing my text right now, like so it is not going to work. So I need to navigate the styles and then for the video container. So that's the class that we added to a video element will add a z index of negative two So now of course, we can see our text. So that should be our basic setup, we have the video, awesome. And also we have our heading one, right smack in the middle. Now once we add our heading one, everything works really well. But there is an issue, because my video is really bright. And also my heading color, the white color is bright. So it's somewhat hard to see my heading 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 would want my text to be white. And instead, I would want 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'll
01:57:28
look for the end of my seriousness. And here you'll see a style that is commented out. And essentially what it does here just as an overlay to our image. So now as I'm looking at 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 adding our CSS as we're adding our overlay, as we were adding our z index, at the moment, we cannot access the controls anymore. So essentially, you might as well can just remove them, because there's no way for the user to access those controls, and basically control the video. So that's why I removed the controls attribute altogether. And what I would want is to set up a button that will allow me to control the video. So if I will press pause, and of course, we'll pause the video, you will press play. 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'll head back to my index HTML. And then right after the heading one, I'll place my button here or a comment or video switch. And we'll go with a button. Now I do want to add a class, and the class will be switch button. So class switch btn. And then in here, we'll have three things, I'm going to add a span with text of play. And then I'm going to copy and paste. So one to the second one, and I'll have a text of pause. And the third one, I'm going to 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 course nothing is happening, I can click all day long, and nothing will change. But we will set that up in a next video. And we already know that in order to add some kind of functionality, we would need to navigate to App js. At the moment we have there some comments, don't worry, I will cover them a little bit later. But I would want to start by selecting two things. 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 class of switch btn. And the video one has the video container class. So those are a few things that I want to select in order to set up my button. And I'm going to go with variable btn. Then I'll use document query selector. Again, the class name was switch btn might as well copy and paste. And then in here, I'll say video. And the class that I'm looking for is video hyphen container. Once I have this set up when our event listener for my button. So btn event listener mambi. listening for click events, we have our callback function. And then within a callback function, I would want to check whether the button has the class of slide. Now why am I checking for that class. So first of all, let me find the class class name was slide. And the way the button is set up, I have my button, I have my two spans. And then that third span is this blue container that is going to be moving to the left or to the right. And the way I'll move it is
01:58:01
using the slide class. So for example, if the 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 left hand side. And again, I'm just moving it using CSS. And that's why we'll head back you have Jess and like I said, we'll check if the button has the class of slide and I'll go with my NOT operator. So say btn class list. Again, I'm checking for all the classes. And I'm saying whether my button contains the slide class. But then of course, since I have my NOT operator, what I'm saying is, if the button does not, does not have the slide class, then of course, I would want to hide it. So go with btn, class list, class list, and then we'll go with add function, and nine year old pass slide. So if the button does not have the slide class, then we'll add or will also have an option for us. And in here, I'm going to go with btn class list and non remove. Now why am I adding this functionality in this case, because in my error statement, I'm checking whether the button does not have the slide class. If it doesn't, then I'm adding or in this case, else, of course, means that it already has the class or slide. That's why we are removing our right remove slide class. And at the moment, we'll be able to click on a button, and you'll see our container moves left and right. However, we're still not controlling the actual video. And in order to control the video, we'll have to access our variable that is going to be our video variable. And the method we're looking for is pause. And of course, I do need to invoke it here as well. And then we also have a method of play. So go with video, and play. So let's go what is happening. Again, I'm selecting my button, adding a event listener will click event. And then I'm just checking. If the button does not have the slide class, then of course, I would want to pause it Why? Because if you notice, this is my option, I have my span with a text of pause. So once I'll click on my button, you'll notice how my container will move to the right hand side. And I'll also pause my video. So that's the method name. If you want to pause the video, you have a pause method. And then if you'd want to play the video, then you have the play method. Now if I click on my button, notice my container moves to the right. So that's why I'm covering right now the pause option, and I also paused my video. Now if I want to play the button, then I just need to click on my button. And of course, I'll be able to play my video. That's the setup, I can click on my button, notice how I'm pausing and playing the video. And I'm doing that again by checking the class. If the class is there, then I would want to remove it. If it's not there, then I would want to add the reason why I did not use the toggle, because I also wanted to add a video functionality.
01:58:34
So I wanted to add these two methods, one for pausing the video. And the second one for playing the video. Once we have our video controls in place, next, I would want to add some kind of preloader. So while the video loads will display a nice looking GIF, and we'll have to start with HTML. So head back to my index HTML. And above the header, I'll add my preloader. As a side note, since we're using position fixed for our preloader, technically, you can place it anywhere in your HTML. But in my case, I'll just place it at the start. So we'll have here pre loader, that is going to be my comment, man, it's just going to be a div with a class of pre loader. And then within this div, I'll place my image. Now the image is located again with the rest of the 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 have set up the pre loader, I can save it and you'll see our pre order. Again, like I said, we're using position fix product. That's why we'll have to add some JavaScript in order to hide the pre order. Now since we have covered this quite a few times, I'm not going to show you the manual setup. And we'll directly head to App j s. And in here, you'll have two comments, you'll have one for DOM content loaded and the second one for the load event. Because what will happen is we will hide the preloader once the load event fires. So remember, previously, we used a window and we add an event listener for DOM content loaded. So once the page loads, then we did something we have some kind of callback function. And of course in there we'll place the functionality. So in this case, we'll do exactly the same or we'll use a loader, not a DOM content loaded, and the difference would be the poor Dom on the loaded. It wires were an initial HTML document has been completely loaded and parsed without waiting for style sheets, images, sub frames, to finish Loading, heard the load event is fired when the whole page has loaded, including all dependent resources such as style sheets, and images. So that's why we'll use a load event. So once everything loads, then I would want to hide my preloader. As always, we'll just do it simply by adding the class. So I'll look where my pre loader, where is my pre loader, pre loader, and you'll see that it has position fixed, like I said, and the visibility is, by default visible, the next nine or 99. But then we'll do the opposite of what we have been doing in a previous project, where by default, we show the pre order, and then only once the whole page loads, then we'll add our class of hide pre loader, effectively, our pre roll or will disappear. So let's navigate back to App j s. And then we can do it right after we have set up our event listener for the button. First, I'll target my preloader. Here a comment pre loader. And I'll go with const, pre loader, variable and document query selector. Again, I'm looking for the preload
01:59:07
across pre loader class. And I would want to 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. And like I said, the same thing, we have our callback function. And what I would want to do in the callback function, simply target my preloader and just add that class of hide preloader. So I would want to hide the preloader once the page loads completely, so go with my pre loader, event class list. And then we'll just add a hide pre loader. Let's save it and you'll see that the moment our page loads, then of course, we'll hire the pre loader, and then the video will be displayed. And in order to make things a little bit more interesting, I'll head back to my bigger screen, I'll open up the dev tools. And in here, I'll slow down my network speed. So I'll make this a little bit bigger. And look for slow 3g, just so we can see our preloader will refresh. And you'll see that while our page is loading will nicely display our pre order. But then the moment our page load is complete, then of course, the pre order is gone. And we have our awesome video. I should do it for this project. Hopefully you enjoyed. And hopefully I'll see you in the next project. Alright, and next we have the scroll project. And before we take a look at the actual project, I just want to warn you that this project will be a little bit tedious. So there's going to be few gotchas. So I would suggest paying attention as you're coding along. Now from my part, I will split up everything in small chunks, so we're not going to jam everything in one video. But from your port, I would suggest, if you don't understand something, rewatch the video, or if that doesn't help then utilize the external resources. So for example, if you don't understand the property that I'm talking about, just search for the property yourself, take a look what it does, and then try to understand how to implement in our project. The main idea about this project is to see how we're going to work with a scroll event. So for example, as we start scrolling, notice how to dynamically add the class to nav bar. So previously, our navbar was static. Among the moment, we start scrolling, and the moment we pass some certain pixel size, then of course, we'll have our navbar, which will be fixed. So we'll take a look at that. Then we'll also set up smooth scroll. So once I click notice how we scroll smoothly to that particular section, whether that is about moderniser services, or whether that is going to be now also as a side note, there's going to be more HTML than typical in our project, because I wanted to make it a more realistic scenario where we have more stuff in our project. Now as you can see, I didn't add any items in the actual sections. But I wanted to showcase that of course, your project normally would have more sections, then we'll also set up a date. So for example here in the footer,
01:59:40
you can see that we have the year. Now we will not hard code this year, we'll take a look at how we can use JavaScript in order to set that date dynamically. And we will also set up a back to top button. So once we click notice how we're nicely scroll back to the top and then as we start scrolling only once we reach certain pixel size again, very We have our button. So it will not go past that pixel size, then we won't see the button. But then as we start scrolling notice, again, at certain pixel size, we will have our button. Now, there's also going to be two setups, because on a small screen, we'll take a look at how we can set up the length hold, this is going to be a dynamic setup. And since I would want to show you with actual example, you'll see once we start working on because remember, previously, we kind of already did this kind of project where we had a toggle port number, however, this is going to be a little bit different, where it's going to be dynamically reading, what is the size of the number. And again, it's just gonna make more sense, once we get to that actual part. And then for example, if we scroll to services, again, we navigate nicely to the services. And the reason why the project is going to be a bit tedious is because we have multiple setups, we have one set up for the big screen, we have one set up if the number is fixed or not. And then we also have a setup for a small screen. So again, just be patient, try to follow along without falling asleep. And I have no doubt that together we will complete the project. Like I mentioned in the previous project, there's going to be more HTML than typical in this project, especially the first video I would want to spend on setting up our HTML. Now since it's not our first project, I feel quite confident that we can just add all the HTML first, and then one by one, we can start adding functionality in our app js. Now start by getting rid of this heading one, and instead we'll place your error. So we'll have here a header comment. And then of course, a header element. Now close the sidebar just to have more real estate in here. And as far as the ad, I'm gonna go with home. And don't worry, of course, I will cover why we'll use quite a few IDs in this project. Just wait. And we'll get there in no time. And then I would want out here a navbar. And then as far as the nav will have a nav element. And then I'm going to add again, the ID. And the ID in this case will be nav. Now once I have my ID, awesome, then I would want to place a div with the class of nav center. Now within the nav center class, there's going to be a hair. My hair is my logo, as well as the toggle button. That's what we'll place in there. So let's add comment header here. And it's going to be a div with a class of nav header, some header. And then within this div, like I said image, and the value for the image is logo, SVG. And we'll just type logo as far as the alternative. And then let's
02:00:14
also add here class. So for the image, we'll add a class of logo. And also side by side, we will set up right away our button. So right where I have the image. After that, I'll have my button. And we'll have a class of nav, toggle, nav hyphen toggle. And here we'll place a Font Awesome icon. So I FA s and fa, and then hyphen, wash. So now of course, we're setting up our toggle icon. Good. And right after my header div, I would want to place my links. Now the difference is going to be that in the index HTML, we will have a container for the links. So please make sure that you have them because this is going to be something different than a previous project. And of course, I will explain why we're adding this. So we'll have a div with a class of links container. And then within this links container, we will place our unordered list. Now since I don't want you to waste your time on typing on the HTML, if you had to use HTML, you'll find the on our list that I'd want to add to my index HTML. So right within links container, copy and paste, and you have here on our list with a class of links, and then each and every item will be of course lists that are in there, we'll have our link. And the difference is going to be that it's not going to navigate to a page is going to navigate around the page. And then for all of them will have this class of scroll. So it's important that you don't delete anything here. I'm not sure do it forward and more. Then right after NAB, but still within the header. Again, the header is extremely important. We'll have our banner. So I'm going to go here banner, and we'll have a div with a class of banner. And we'll have another container. So just a container, so not a lynx container, like we had before. Just a simple container. on in here. Let's write 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 then I would want to set up a link that will also scroll 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 scroll project. And the reason why I'm setting this link, because I want to showcase that you're not limited to set up a smooth scroll only in your nav. So for example, here, if I click notice, again, we will smooth scroll to that particular section. However, I can also add here 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 to doors. So that was the whole idea behind this one. So right after the paragraph, we're going to have a link. And again, the href will be specific, where it's going to be hashtag and then doors online in here, I'll have class, the class will be scroll link, so the same as in my number. And then just for styling, I'm going to have btn and btn. White, and as far as the text, and we're going to go
02:00:47
with explore doors, we'll save it, I have my link beautiful. And then like I said, since that would want to set up a more realistic scenario, we'll just add some sections with some title, just so we can nicely scroll around our project. And the way it's going to look like we'll have about and then in here, we'll have a section. Now what is important that we have the ID with and about, the way it's going to work is that we'll have some kind of section with an ID. And then where we have the link, once we click, we will read that value. So we'll know which section we're talking about. And then we smooth scroll to that particular section. Now what's important is that you have the name is exactly the same. So you can call it of course, however you want. But if you'd call this hashtag, Bobby Lee, and also make sure that if you're adding the section, that also the ID value matches that. So in my case, since my link has hashtag, and then about, that's why I'm adding ID to my about section with a value of about a month since I would want to add a little bit of styling, and more specifically a pattern. So I'm going to add here a section class. Now within a section, like I said, there's not going to be too many things, we'll just have a title. And then title will have a link to with the text of our and add a little bit of styling with the span. And then we're just going to say us. And as you can see, it wasn't actually our is about because I was reading already next section. So it is about us. Now I also want to quickly mention that I purposely added no padding in here, because it is very crucial for us to see that we're navigating exactly to the edge of the section. And you'll see a couple of gotchas that we'll have to solve. But again, I did this on purpose. It wasn't like I forgot how to add padding on top, just in case you're wondering, you never know. Node wants to copy more section. So selected one, two. And now I just need to change these routers around. So I will select right now my comment as well as my ID. And we'll delete it in here. All right services. Okay, that's good. And then as far as the text is going to be our services, okay. And then in here, we'll go with tours. So again, we select both of them will write tours online, as far as the text within heading two will just write featured tours. And lastly, I would want to set up the footer as well as the scroll button. So can we can scroll back to the top right after 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 structure where we can nicely scroll around our project. So our footer, I think I'm going to add a class of section just working to get a little bit of padding here. So right here, footer, and class section. And then within footer, I will have my paragraph. I'll start by setting up the copyright will use a special HTML character.
02:01:20
So I'm getting my ampersand and then I'm going to write copy. And then we'll write backroads back roads, travel tours company. I will Heart Gold right now my date. But then of course, we will use JavaScript in order to see how we can set it up dynamically. So for the time being, I'm just gonna write warning 20 online. We will have Here a class, and the value will date. And then right off in dishpan, we'll set up another sentence. So let's write all rights reserved, Mark. So And lastly, we will add 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 the button and then going over the same old stuff, we already have covered quite a few times where we add something, and by default to hide it, and then of course, we just add that class. So what I'm trying to say, of course, once we covered the button, I'll show you where you can find this in CSS. But just don't get discouraged that as you're adding the button, you won't be able to see the button. So in here, I'll have another comment, it will just say back to top button or link, or you would want to call it and it will be a link. Now I do want to add some classes here. So go with class, scroll hyphen, link, and then top link. So that is also another specific class. And then as far as the href. Muslims, I would want to scroll back to the top. And the ID from my header is home. What do you think is going to be my intro? Yep, of course it is going to be home. So I'm going to have down to my address, I'll look for home. And then in here, I'll have hashtag and then home. So that's my trip. And then within this link will place a Font Awesome icon, and the values will be FA s and then FA arrow, I don't know. Let's see how that will 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 up our functionality in JavaScript. Beautiful. And we'll start by setting up our date dynamically using JavaScript more specifically here. Because of course, it is okay to hard code the value if you want. But then what are you going to do on January 1, are you're just going to look for all your projects and then update the current year, or you much rather would set that up dynamically. And then just forget about it. Because that always will display that actual current year. And I think the second option is a bit more nicer. Because we all have some other things to do on January the first. So we'll start by looking in the app j s. But one thing that I think I messed up in a previous video is that I have here a class of date. And I actually want it to have the ID. Now it is not a big deal. If you want to keep the class, just remember to use the query selector. But in my case, I'm going to go with ID of day. Again, not a biggest deal. But I just like to stay consistent how I made the project. So where I have the app j s, notice we have quite a few comments
02:01:54
and the war. Of course, I talked about them once we get there. But we'll start by setting up the date. So that's our first task. And in here, I'll just have some kind of variable. And it will be a date, because why not. And then like I said, I'll use get element by ID. If you want to keep the clouds Just remember to use the query selector. I'm looking for the date. And then I'm going to go with date in HTML, and I will be equal to our date object. Remember, we covered global objects and one of them was date. So in this case, I'm going to go with new date, then I will invoke it. And right away on that object, I have a method with a name of get full year. So this is exactly what I'll use. I'll use this get full year. And you will notice that even after we remove this 2020 technically, we should have everything empty, you'll see that I nicely still have my 2020. And this way again, I don't have to be a madman on January 1. And I don't have to update all my project manually. So I set up my date. And I'm good to go. Alright, and Next, we'll take a look at how we can toggle on once again, this is going to be a little bit different setup, because we'll calculate that height dynamically. Like I promised, I'll talk about it in more detail once we actually get there. So we'll navigate back to App j s. And you notice where you have the comments for close links, Mrs. Will and we'll start by selecting three things. So not to things like we had in a previous project where in order to toggle, but in this case, we're looking for three things. I'm looking for links compare, ran, I also want to get the links. Of course I also need that toggle. So those are the three things that I would want to select. And I'll start by setting up some kind of variable and I guess for the button, I'm going to go with and toggle using to 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. And we'll change these values around. The second one will be quite long variable name, what I 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 you want, just make sure that you remember the actual name. And then as far as the class word is guy, it is a links container. So links container. So that's the div where all the links certain. And I think in this case, I can just make this one smaller. So I can still see everything in one one. As far as the third thing, that will be my links. So on here, all right links. And then the class name is links. And we'll start very simply by repeating how we created the previous project. So we already know that we can just add a event listener. So now I've toggle add event listener, we're listening for a click event, we'll have our callback function. And then within the callback function, well, we should have some kind of class in CSS correct. So if I check
02:02:27
out right now, my CSS and I don't know why I'm going to index HTML for needs now CSS, if I'll find my navbar navbar, you'll see that by default, the links, the links container will be hidden, we'll have our links container, then height set to zero, or flow is again hidden. 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, of course, at the end, I'll show you what is the downside of this approach. Or more specifically, maybe when we'll have some downsides. I mean, you can use this approach, there's nothing wrong with this approach, you just need to know that there's going to be some specific setups, where this is not going to work. So again, we hide our links container, that's why we cannot see the links. And then we have our show links class, like we did in a previous project, I'm just gonna grab, of course, my Linux container, Linux container, because that's the one that's hidden out here, a class list. And then we'll just toggle, I'll say toggle. And then the class that I'm looking for 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 me show you the downside of this approach. Again, there's nothing wrong with this type of setup, you just need to be aware of the situations where you will have the issues. So I'll navigate right now to Microsoft Project. And now why do we have here this 200 on a small screen? So if I open this up, why do you think I'm adding this class of show links, and then the height is 200. And if you remember the previous project, it is simply because if I inspect, I will know that for my links, the height is 200. Now in this case, it shows like 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 add it in our CSS. However, what do you think happens if, for example, in the index HTML, in this case, and actually do need the index HTML, I'm sorry, not the utils index, I would add another link, or out remove the link, for example, I add another link. Okay. And I'll see on the right hand side that more functionality still works. But I'm definitely missing here a link. And I can clearly see that if I click on the links, you'll notice that Yeah, one is missing. So one is somewhere here, and I cannot see why I cannot see it. Because in my CSS, and for some reason, it's closing all the time, with me open up. So the more open, this height is hardcoded. Again, awesome setup. But we always need to make sure that this is going to be exactly the height. And there's going to be cases where this will be dynamic, this value will be changing. Yeah, for the links, you're probably the king of the castle. So you will be the one who's setting up the links. So of course, you will
02:03:00
be the one who's controlling the height and all that. But again, there's going to be some dynamic set up once in a while where you're not going to be able just to add that height manually and just forget about it. Okay, you might run into specific issues. For example, in this case, what if these links are changing? What if one time you have four and then the second time you have five or maybe in one case you will have three. So in that case, of course, I will delete it. Now you can see that I will have my height, but then I have the space. Again, not the best scenario. So of course in the next video, we'll take a look Learn how we can do this dynamically. Again, I'll repeat this for 55th time. But you can use this approach. There's nothing wrong with this approach. But just keep in mind that there's going to be some situations where you will have to calculate the site dynamically. And we're adding this manually in a CSS and just adding this class will simply not work. Wonderful. Once I have spent half an hour talking about the setup that I will not use in this particular project, I'm just going to comment out for your reference. So you always know that you can still use this if you are not using any kind of dynamic data. And then we'll take a look at how we can actually calculate the height and toggle the actual height. So the height of my links, not the hard 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 can see it as a method, it just returns the size of an element, and its position relative to a viewport. As always, it is going to be much more faster. If we'll start using this particular method. And I'll come up with some kind of variable. And in this case, again, I'm going to go with the long one. And you'll see in a second why. Because there is going to be another variable that is very, very familiar, or I'm sorry, similar to this one. And I would just want you to see clearly which one is which. So in here, I'm going to go with container, and then height. And this is going to be equal to a Linux container. So remember, we had that div, where all the links were sitting on the one that we were talking about in this class. Well, in this case, I'm going to go with links, container, and then I'll use that method. So get bounding on this client right. Now, in order to actually not make any kind of pronoun session errors, I think I'm just gonna say good bounding, I think there's gonna be a little bit more faster. So I'm gonna here invoke my method, of course. And now let's console log it what we have here. So I'm going to go with log and then container, right? Let's see, of course, I would like to open up my console. And then in the console, I should have some kind of value. Now the interesting part is that I'm getting the object triggered. That is awesome. But we're also noticing that we're getting this height of zero. Now, why are we getting this height
02:03:34
of zero? Well, by default, we set this equal to zero. So of course, this is going to be my value. So I'm getting this height of zero. Okay, these two match. Now why I have this height of zero, because of course, by default, I want to hide these links. So that's why I have this links container wrapping around my links, because by default, I want to two item. However, you're probably wondering, okay, why you are telling on this, because I just want to let you know that we purposely use this div to wrap our legs. So we still get the height, not this height, not the height of zero, I'm just showing you where you would get an error. If, for example, you will have this wrapping div, and you will just use your links and then set them to height zero. So there's no way for you to access, what is the actual height on the links. So what is the height that you're looking for? Because if you're just going to be looking for an element where you set it equal to height to zero, it's not going to work. So yes, we use a parent container, we set it equal to height to 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? Because I did not change the height for my links. And I think it's going to be easier for you to understand if I just delete my container height. 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 go with links and height. Like I said, pretty similar variables. That's why I wanted to have a longer name just so you can see waters what and then we go with links. And then again, we go with this, get bounding whatever method names or get, let me get my get bounding client and whatever method name. And in this case, again, I'm looking here for height. Now of course, since it is an object, I can just access the height if I want. So I don't need to go with the full object and then get that property. I can just add here dot and then of course I will get right away my height. Now once I have both of them knowledge, check it out. What is the link site? So container height, we already saw that it was zero. For what if we go with links? Alright, let's see. If we click them. Can we have some kind of value? Now what is the value? value is 150? Why the value is 150? Because I have three links. So in order to show that, I'm going to copy and paste two more times, and now we should have larger value, what do you think is the value right now? It is 251. Why? Because I have a five links, I'm calculating this height automatically. Again, I'm going to navigate to a bigger screen just chokers. So we're getting this value, because this will be zero by default, this is zero, you can see it here. It has some kind of width, but the height is zero. And we cannot set it 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, horror for the parent, we have to have this height
02:04:08
zero, because I want to hide them. Okay, that was the whole point of the setup. So once we have both of these routers, beautiful, I will get rid of this console log. And now I will set up a if statement. So I still needed my container height. Remember I mentioned that. And in this case, I'm going to say if container height is equal to zero. Now what does that mean? Well, that means the default set of correct. So if the container height is equal to zero, then I would want to dynamically add height to my container. So again, we're still adding height to container because it is zero, however, we'll use this link site. And the way it will work will look for our links container. And then we can just look for our style property. And then not sorry, not this one. And then on the style property, we have the property of heart. So this is going to be my head. And I'll just set it dynamically using template string equal to my variable. Now what variable I'm looking for, I'm looking for the actual link site, again, not the container height, that will be zero. But in this case, I'm looking for links height. And then I would just want to add these pixels here. So I'm going to go with pixels. Now, what is the other situation? Well, the other situation wouldn't be if the links are already open, correct. So in this case, we just need to go with else. And then we go with links container. And then again, style, and then height. And probably I could have just copied and pasted. And I'll set this equal to zero. And you'll see how nicely once I opened this up exactly what I'm looking for. Because this will be dynamic. This will depend on those links. And of course, I'll show you by deleting few links as well. And then 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 actual container will go back to zero. So that's going to be our setup. Now there's one gotcha that I want to show you. And that we'll have to deal with. Once we get to the bigger screen. You'll notice that in our case, everything looks very beautiful, hard, the reason why it looks beautiful, because in style CSS, I'll look for my media query, and you'll see this links container. So again, there is the container for my links, has this height of honor. Now notice what happens if you comment this out. So we'll go back. First of all, I kind of see the links, where I can't see the 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'll see that my height is very, very big for my legs. Why? Because I open up the toggle. Because the way it works, you can see here in the actual developer tools. And by the way, let me make this bigger, you'll see that we are actually adding inline styles. So that's how it works here. When we're using JavaScript. This is in line, if you remember from HTML
02:04:41
and CSS, inline was stronger than our actual external CSS stylesheet. So that's why whatever we type over here, will just override that's why in CSS, I needed to add this height auto. So that way, it will always be auto not zero or whatever the value for I just need to uncomment. And what's important is to have this important flag, because again, this will be inline CSS. And as always, we'll just want to showcase that we can add or remove links if we want to. Sorry if I'll go back to four items. You'll see that my head still be awesome. So still on my services, the site note I don't know what happened here. Should have been here tours. So let me go with tours. Probably messed it up in a previous setup. Um, let's see. Yep, we have our tours beautiful. Then if I would want to actually copy and paste let's see One more tour. And as you can see, now I can dynamically add, remove and do whatever I want. And I'll always always have my exact height that I'm looking for that. So that's how we can set it up using this property. So again, we are setting up three things, we have the container, we have the actual length, we have the toggle, then we're using this get bounding client rect. So that's going to give us an object, what we're looking for is 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's how we will hide our links. And then of course, if the height is zero, then we'll add a height for the children, which in our case is length. And then if it is reopened, if we have toggled on, then of course, we would want to hide them. So we set it back equal to zero, but we just need to remember that in a CSS, we need to override that. Otherwise, since we're using inline CSS, this is going to be more powerful. And that's going to be a dynamic setup for toggling the links. Next up, we have fixed navbar. And back to top scroll button. 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, as I keep on scrolling navbar will always stay there. And the same will work with a backdoor button, where it will only show up once we scroll past a certain point. But then once we go about that point, and as you can see, we cannot see our scroll button. The way I'll set that up is by using scroll and so we have our window object, then we can add a random listener. And I'll be listening for a scrolling scroll event. And then again, we have our callback function. And the property that I'm going to be looking for is going to be page y offset. And as always, we'll start by simply console logging. And we'll write this as window. And then page y offset. That's the property we're looking for. And as a side note, if you're interested in page y offset, it is a read only window property that returns the number of pixels document has been scrolled
02:05:14
vertically. And of course, we can just double check that by opening up the console. And you'll see that in the beginning I'll have zero. How's that keep on scrolling? Notice these values keep on getting bigger. So that means that first I'm scrolling down. And in here, I'll simply say that if this value is bigger than the height of my navbar, what are we gonna do, we'll add a specific class to our number, the class I'm looking for is the fixed navbar. If we scroll up a bit, we'll see that we'll have our fixed nav position fixed top left with a little bit different background, where at the moment, as you can see, on a bigger screen, it is transparent. So I have my transparent background. But then within this position fixed the fixed nav class on our background of white, and then a little bit off shadow. That's what we will add some back in the app JS or the one start by targeting both the navbar as well as back the top link. So for the navbar. I'll have here a variable of course, and I'll use my ID. So I'm going to have document, get element by Id get element by ID, and I'm looking forward in it. And then a second, remember, we have button all the way at the bottom. And I'm just going to call this top link. And that will be equal to the document. And I'm sorry, this should be a equal sign. So document, then a query selector, and I'm looking for top link. So link had the class of Taplin. So once I have selected both of these things, then I would want to get the height for my number. And we already know how to do that we can use our get bounding client rect. So we'll have two variables. One will be scroll height. So let's have your const and scroll height work. So that will be equal to our window. And then page y offset. Beautiful. And then in here we'll have a nap. Alright, so I'm just going to have const height, and then height should be equal to A nav bar, then get bounding, get bounding client rect. And then I'm right away looking for my height. I'm just going to set up a if statement, where if scroll height is bigger than a knapheide then I would want to add that class. Now what Class am I talking about? Well, the class name was fixed now. So we're going navbar, one class list, then we'll add, and we'll have here fixed nav bar is the class name. And then of course, we also have the else correct. So how else navbar class list, remote. And then in this case, again, the class name is exactly the same. So fixed. Now, let's save it, navigate to a bigger screen, just so we can see it better. And you'll see that the moment on scroll past the height of the navbar, I will get my fix number. So of course, it is sitting right here. And the same thing will be for my button, back to top scroll button. So as I keep on scrolling, I just need to come up with some kind of value. Now I went with 500. Of course, you can change that value, however you want. And in order to show and hide our link, our back top link, you'll see that we have our show link class.
02:05:48
So again, this is going to be scenario where link is hidden by default. That's the reason why 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 already have covered in a previous project. And then in order to show the link, we'll toggle this class show link class. And we just need to decide what is going to be the point in the document where I would want to show my back to top link. And we'll set up another if statement. And in this case, I'm going to say if scroll height is bigger than for example 500. Again, that is arbitrary number, you can add whatever you'd want. In that case, I'll have my top link. 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 wonder more correct. So I'm going to go with else. top link again, class list. And then we'll remove the class we're removing is the show link class, an RLC. First we start scrolling. Notice once we get past the size of the number course I get my fixed number. And of course, I can toggle my navbar as well. But once I keep on scrolling and then reach 500 pixels, then of course, I'll display my backdrop. As a quick side note of the links, the actual scrolling will work already. Okay. Now, of course, in this case, I'm showing the complete project. But yes, it will still work. Okay, that's something you need to keep in mind where it will work. But there is some additional functionality that we would need to add. So at this point, we can see that we're scrolling to a sections, but we're actually missing them. Okay. Now, why is this working by default right away? Well, there's two things. First, in the actual HTML, or I'm sorry, CSS, I added a code for that. So the reason why we can navigate around the page because that is a default HTML setup, where once you click on a link, you will navigate to that particular section. Again, this is not a sorcery, that won't happen. Now, the reason why it's happening smoothly right away is because in HTML, I added this scroll behavior smooth. So if I comment this out, you'll notice that yes, we can navigate around our page. But notice this is not happening smoothly. So as I keep on clicking, check it out. Yes, I do navigate to those particular sections, that is not happening smoothly. So in this case, in HTML, you would need to add this scroll behavior smoothly. However, in our case, we do need to add even more functionality in our JavaScript. And we'll do that in next video. Why? Because like I just mentioned, we are missing our sections, we can clearly see that I scroll past the for example, about section, all the same word services. As you can see, I cannot see my services. So we will need to fix that, again, using JavaScript, when that would be our setup, if we would want these classes dynamically based on where we are in the document. And again, the functionality is following
02:06:21
where we're checking for the page y offset. Now of course, the first we will need to set up a eventlistener for scroll event, and that would be on window, then we're looking for our page y offset, like I just told you, and then I'm just saying what is the height for that bar. Okay, once I'm past the height, I'm good to go. Then I'll add my fixed math class. Now once I'm below that number, then of course, I will remove the class. As far as back to top, we just simply say the scroll height must be bigger than some kind of value, whether that's 500 word that's 100, whether that's 1000 or that is up to you, and then we just add the show link, where again, we just display that link. And then on the else, we just remove the link and our final job is to set up a site smooth scrolling, or a precise, smooth scrolling. So for example, I might never notice, once I navigate to about on exactly where the about section starts saying for services, the tours, and you get the point. And of course, I can navigate all the way back to the top, I can also do the same thing with my button, it's going to do the same thing, regardless of the screen size. So I can also do it over here, where one side click, we will hide the number, so hide or links, but it will still navigate to that specific section. So for example, that could be tours. And of course, we can navigate back. Because like I said, even though we technically do already have the small scroll, because of the CSS that I added, the problem is that we are missing our sections. So notice, I can clearly see the scrolling past the sections. And it's even worse on a small screen where for example, notice I'm navigating to the doors, and I don't know where I'm even at. Now, at the moment, what do we have an address pretty much nothing, right, so we just have the comment for the smooth scroll. Remember, when we were setting our links, I purposely added to all of them, this scroller class, and that includes this guy as well, this link that is in my banner. And now we'd want to target them, of course, in the app j s. And or just iterate over them using for each and to each link will add a event listener and or listen to a click event. So let's start doing that. So const scroll links. So scroll looks 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, a scroll link class. And then I'll have my node list. Okay, beautiful. And of course, I can access it by X variable. So right here for each. Now, I'm iterating over, I do have my callback 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. And then we'll have our callback function. And the first thing that I would want to do in my callback function is actually prevent this default behavior. Or at the moment, as you
02:06:55
can 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 access my event object. And I'll right here prevent default. And now you will notice that once you click on a link will not navigate anywhere, or you will be sitting, right exactly in the same place. And this is exactly what we want, at least in the beginning. So here we will write a comment will say prevent, and default. Now what are our next steps, I would want to use event current target. So that is going to give me my link. And I would want to get my attribute. Now, what attribute am I talking about? Well, in the index HTML, I can see that each and every link will have this href. And then hashtag afterwards. So I'm looking for this value, because I'll use this value to find that section dynamically. So in the objects, right after prevent default, I'll go with a common animal right here, navigate to specific, specific spot, okay, beautiful. And I'll start by getting the ID, so have my ID variable, and that will be equal to E. And remember, current target was the link we're clicking on. And then we have a method of get attribute. Now what is get attribute going to give me? Well, that is just going to get me the actual attribute. And the attribute that I'm looking for is the href. So in this case, I'm saying get attribute. And then I need to be specific, which attribute am I talking about. And I would like to get the href. And as always, it is the best case scenario to actually console log it, just so we all are on the same page. So let me open up my toggle. 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 get the gist. Now why do I need this value? Because I'll use document get element by ID, just like we haven't been doing before. Remember when we're selecting the navbar. For example, we use document get element by ID, and we pass in the ID. So this is exactly what I'll do right now. where of course that href will arrive Friends, my section, the ID on this section, I'll just want to get this ID and pass it into document get element by ID with this specific ID. Now the way I can access it, is by using slice. And I'm just gonna say one. Now, if we scroll up, you'll see that slice, extract a section of a string without modifying the original string. And why am I passing here, this one, because I'm just saying, you know what, start from the index of one. So skip that hashtag. That's why, if we console log in right now, you'll see that I'm just getting the about I'm not getting this hashtag about, I'm just getting the boat. And of course, I can select that element. If I just set up some kind of variable in my case element, then I'll use document, get element by ID. And this is where I'm passing this ad. So whether that's about services,
02:07:28
and tours and tours, so within the ad, let's pass in our ad, and now have our element. Now we're halfway there, we have the element. Awesome. Now, we want to get the position of that element, whether it is a tour section, whether that is a services or whether that is about and I couldn't get that value. If I use offset up again, let's scroll up, we have offset our property in number representing the top position of the element in pixels. So let's try it out. I'll have some kind of variable. And in this case, I'm going to call this position. Now I'm going to be setting this up with lead. And you'll see in a second why. And also this up to a element. So that is the element that I'm dynamically selecting, depending on which link I'm clicking on. And then like I said, offset up. So we'll go with offset top. And this should give us a value for the top of that section. Now that value will be a little bit off. And we'll cover that in next video. So don't worry, we still have ways to go. But this should give us at least an idea where there's actual element is. And as always, we can console log if you want. So we're going to go here with position. And you'll see for example, that once I click on the about, I'll have 838 pixels. For the doors, I'm going to have 1600 45. Again, these numbers will be different and will change because 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 those coordinates Exactly. But for the time being out, still want to scroll somewhere correct. So I have my position. And in order to scroll to that position, I can use window and then scroll to again, the method name is scroll to. And then within this method, we pass in the object in the object, we have coordinates and 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 just going to use this position. So within the window, scroll would just say where we would want to scroll to where window Scroll to and then left zero and then for example, top 100. So then, of course we would scroll 100 pixels from the top. Now just to showcase that it will work I'm going to go with about and notice how we scrolled 100 pixels. Now, of course, I would want to use my position. So that is going to give me the value where I would want to scroll to again, it's not going to be precise, because we have a little bit more complicated setup. But I can just add here position. And you'll see that it is going to be somewhat correct. But we'll have to do some modifications are the last thing that I would want to add in this video. Before we start calculating the height and length, I would just want to close my links on a smaller screen. Again, I don't really care about the bigger screen, because my links are in one line anyway. But
02:08:01
on a smaller screen, don't you think it looks better. He For example, when we scrolled up and down, we would close our little toggle nav bar, because otherwise we just keep on scrolling. And notice we're all the time we'll have these links open. I don't think it is the best user experience. So right after we have our window scroll to remember in order to close our links, we just needed to target the links container. We already have access to it because of course up here I have selected it correct. So links container and what do we need to do out here was style and then height and we'll just set it equal to zero. And now you'll see again, we will not scroll to a specific place. We will have to fix that the next video but We will close our little toggle nav bar on a smaller screen. So beautiful. In the next video, we'll start calculating our heights. And then we'll finally be able to scroll to that particular section smoothly. And we'll scroll to the exact beginning position of that section. Alright, let's finally fix our smooth scroll. And we'll start by setting up again the heart. So we'll be interested in the neighborhood, we'll be interested in the container height. So that is, of course going to be the container for our links, we'll be looking for the fixed class, whether we have added to a number or not. And then we're also going to have to change this position a 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 crew late the heights. So we're going to right here, right, and we'll start by getting denied by 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 to minor bar, again, I already have selected, then I'll use again, there's get bounding client rect, that has my method. And I'm looking forward to height. Okay, good. Now, I'd also want 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 understand which one is which we have our links container, then we have again, our get bounding client direct. Again, we're looking for height. As a side note, if you want to select them somewhere globally, of course, you can do that. In my case, since this is the last time where we're actually getting them in this project, a miners will do the whole setup here. And once I have both heights for the knife, as well as for the container, then I'll set up another variable, which will hold the value, whether the navbar has a class of fixed nav or not. So I've const fixed now there is my variable name, and the nav bar again, and I'm looking for the class list and contains, and again, this is going to be either true or false. So if the nav bar has the fixed class, then of course, this
02:08:34
will be true. If not, then it will be false. And once we have all these three values plus our position, now, I would want to start by fixing up the position. So what exactly I'm going to be fixing? Well, you see, as we're scrolling, the first thing, you'll notice that once we get to that particular section, the reason why I'm not at the exact position where the section starts, is because my nav bar covers it correct. So what I would want to do is, instead of setting it to element and then off the top, which is just going to 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. And you'll notice that if the restricts again, this is important nav needs to be fixed, we will nicely navigate to that particular section, Mark. So why, because we just remove that value of the non part. So we have offset up that is the exact location of the section correct, but then we subtract the nav right. And once we subtract the nav height, then of course, we just move a little bit up. So if we would be here, then of course, this would be the value for this section. But since I'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 we subtract the value for the number. That's the easiest step. Okay, then I would want to deal with a fact that if my number is not fixed, if my number is fixed, the values will change. And I'll simply show you that by console logging the position, work so position, and you'll see that if the nav bar is fixed, in a console, you'll have one value for the section. And then if the nav bar is not fixed, and of course you will have a different value. So at the moment nav bar is not fixed. I click on the boat and you'll see 443 so that is my route. Now if I navigate to services, and at the moment of course, my nav is already fixed and then I navigate back, check it out, we have a difference. So in one case it was 443 and then in next case it was 360. So I will need to fix it, where I will need to check that if of course the navbar is not fixed, then I would need to have a different value. Now first of all, why is this happening? Well, you see, once the navbar is fixed, we're taking out of the normal flow. So originally here, we have one value, and that would be the height of our navbar. But then once we removed that height, even though technically, our initial value was correct, since we removed a navbar, from our normal flow, now this value does 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 you navigate your about, you actually scroll pass, because the moment the number goes to fixed, then we take it out the normal flow. So now of course, this value is not exactly where we want to be, the actual value is this one is 360. And as you can see, it is smaller, more it is smaller, because we take out the height of the novel out of the normal flow,
02:09:08
where with a navbar, the location for about, for example, was 443. Once we take out the navbar, which we do with position fix, then the value is 360. So it is actually less. So what I will want to do is check if the navbar has that class of quick snap. And then we would want even subtract more value from the position. So the way it will look like I'll have my if statement. And in here, I'll say if natrix. Again, it is going to be our nav, or I'm sorry, the NOT operator. And I'm going to say if fixed nav is equal to false. Now what does that mean? That means if the navbar is in a static position, it is not fixed. We haven't scrolled past the height of the number. If that is the case, I'll set my position. That's why I use the keyword of luck. And I'll say whatever I have my current vowel, whatever it is over here, and we'll subtract even more than now fight. Again, why we're doing that, because when we made the calculations at this point, we're still calculating the height of the number. But in our setup, we already started scrolling. So of course, we removed that number from the normal flow. And now we need to actually change that value. That's why once we add our code, notice, even when we are sitting nicely at the top of document, so our nav bar is not fixed, we can still nicely navigate to the actual section. Now as a side note, you know what in the index HTML, I already showed 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 this particular link, because we're still using the value, we're calculating the height for a number, nothing here is hard coded. Our setup will still work. So if all now get back, notice we're still navigating services towards an all that now the problem is going to be on a smaller screen. This is one more thing that it would mean to fix. Because if we're all the way on top, we click on a boat, we're not going to be exactly where it would want to be Why? Because we're also here calculating the height for the container. That's why in our code in app js, we will still looking for this code as well. So let me set up one more if statement, where I'm going to see if nav height is bigger than 82. Now what am I talking about with 82? Well, that's just going to be a setup for the actual top of the navbar. So that is the case, if it is bigger than 82. What that means is that I have already opened up my links, and if the nav height is bigger than 82, then I would want to set my position equal to position and then plus the container height. And of course, container height will be whatever I have the links there. So I'll save it will try out on a bigger screen. Now let me see what I have. So at the moment, I have the home, of course we navigate home, I open up my links, then I navigate to about and of course I navigate there, I close my links, and I'm exactly where I want it to be. Now in this case, of course, I would like to also
02:09:42
look for services, and we navigate to our services, we can try out on a bigger screen. In this case, we don't need to worry about the height being bigger than 92. Because this is not the case where we're toggling the length. Of course, in this case, we can just simply do whatever we're doing before. Again, the gotcha there is that we're just calculating for the height. So we're just checking if the nav height is bigger than 82. That means that I have these links involved. And that's why I would need to add that value to my element. Because if you remember, in the beginning when we were subtracting that value, this is exactly what we're doing right now. So what I'm saying here is position is equal to element of the top. And now right? Now, what do you think is the nav height right now, and I can tell you right away that this is going to be a sum of the top of our number with our container with our lungs. That's why once we actually subtract, and if we don't add this code, you'll see that we'll navigate way more higher than we should be. So click on About and notice, I should be way lower. Now, why am I a lot lower, because we subtract the nav height. And that is, of course, are going to be our big one, that is going to be the total of our top of our navbar with our container height. So that's why in this case, if I check, and I can see that nav height is bigger than any two, then I just add this value of the container height, because I subtracted way more to begin with. So navigate again to a bigger screen. And we can just clearly see that if I navigate for example to about everything works, services still works. And then we can also navigate back to the top. So this was our project. Hopefully you guys enjoyed the project. And I'll hope to see you in our next project. Beautiful. And next we have the tabs project, we'll have a boat section, and in there, there's going to be some 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 have different info displayed. So for example, these would be our goals, then we have history, and then the vision. Now as always, we'll start with a fresh new project. So instead of you find index HTML, and here, we would need to add the HTML first. Now start by setting up the section. So go over here and our section, then within a section, I'm going to start with a title. So div with a class of title. And then with the div, we're going to have a heading two with a text of about. So that's going to be my section on a paragraph with I don't know, 10 words, I think that should do it. Beautiful. And then after that, I'm going to set up my center. So right off my title, 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 make sure that we have a certain width for our section. And then there will have two columns,
02:10:15
so have two articles. So article number one and two. Now, if you'd want, you can add here comments, but there's not much in there. So I'll just leave it with all comments, I'm going to have a image, and I'm going to be looking for my hero one. on mine. As far as the alternative, we're just gonna say about picture, I'm sorry, I should have my picture. Awesome. Within the second article, I'll place my container. So the way it will be, is going to have my article, and then I'll have my buttons. So this is going to be my button container. And then in here, I'll have my content. So at the moment, of course, once you click, you notice only one content. But in general, there's going to be three divs, each of them will have the content. Of course, once we have JavaScript dynamically, we will show only one column, and then hide the rest of them. And we'll start with setting up our buttons. The container. So in this case, I'm gonna add here a class off article, or I'm sorry about a class about for some reason, I was looking at the article. And that's why I said that the class name is also article but the class name is about, then I'm going to add my button container painter. And then it's going to be a deal with the same class. So button container. And then within this div, I'll have three buttons. So button, all of them will have a class, the class will be tab btn. But then one of them will have the class of active, and you'll see how it will work in a second. But then I also want to add data ID. Remember we already covered this particular setup, where we have a data set in the JavaScript. So that's how we were able to access it, then in the HTML right away, set up my data attribute. So I'm going to go with data hyphen. Again, you can name it, whatever you want. But since I like short names, 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 to be history. Now I don't want to copy and paste two more terms, and then class will stay. So that will be still tab btn. But then these values Of course, we'll change. So instead of history, the second one will be vision. So let me set up two selectors or two cursors more properly. And I'm going to go with vision. And I'm going to do the same thing for this guy as well. So instead of history, it is going to be goals. And instead of goal should be goals. So now set up my goals. Awesome, beautiful. And you're not, I will add here the class. My apologies for the first article, also add about IMG, and you'll see just a little margin propping up some other CSS. And then as you can see, these are my buttons. Okay, beautiful. Now, the way it will work is we'll have this active class that will just showcase which button has been clicked, like so. And then of course, for content will also use this active one B class are active
02:10:48
to show or hide the content. So the content that will have the active class will display, whatever is the content, and then the rest of them who don't have that course, we will hide that particular content. Now, we will do it dynamically with JavaScript, but for the time being, we'll just art coding. And you know what, in this case, I think I can make it even smaller, just so I can see a little bit more here. And once I have my buttons, awesome, I'll set up my content. So a article with a class of about common. So let me make sure that I'm right outside the article. And here is the article with a class of about, about content. And I'm like I said, there will be three items in here, and comments. And so copy and paste. So single item, copy and paste, let's add here and up single item, and have single item. And in here, I would want to have a div with a class of content. And again, eventually we'll add a class of active or not, for the time being, why don't we add class of active for all of them. And then eventually, we'll just remove that class, because otherwise we won't be able to see what we're adding. And then we would want also add the ID. Now these IDs, need to match whatever you have here as a value. So if for the button here, add a value of history. Also, the ID should be history. So of course, for time being, I'm gonna have the ID and I will be 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 the goals. So that of course, will be my Dev, beautiful. And then within a dev, I'm just gonna have a drink for with a text of history. So let's go with history. We'll say it, that should be my first item. And as you can see, it is displayed awesome. And then also out want to add rest of the text in here. So let's say we have our single item. And I'll copy and paste. So now I have three of them. And then eventually we'll add a little bit more content in here. So for time I, I have the active active active, don't worry, we'll delete it actual later. But then First, I would want to change these values here. Like I said, they would need to match whatever have 40 IDs. So if I had history, vision and goals, same thing should be here. So the second one will be my vision. And the third one will be goals. So let's fix them, like so. And then also we can do the same thing for values. What's right over here, vision, vision, I also add goals. Now technically, you can add whatever you'd want over here as far as the paragraph. But if you'll check it out the finished project, you'll notice that I added some different HTML, just so it's a little bit more interesting. For example, in here, you will have a longer paragraph and then some kind of ordered list and all that. Then in here you have a different text. And in order to set that up, if you'll check out the files, you'll see the utils HTML. And then in here, as you can see, are just prepared for you a paragraph that you would need to
02:11:22
add again, technically, you don't have to do it, if you want to, you can just write Lorem and then add whatever text you want. But I just thought that would be cool, if we would actually add them different, because that way we would be for sure able to see how we're switching the content. So in this case, I'm going to copy and paste and I'll place it where I have history. So copy and paste I have my history. Now of course don't worry, we will be displaying all of them. But then the moment we'll remove that class of active then we'll be able to see only one item And I'm looking for my vision, of course, vision where you are, here you go. Let's keep on scrolling right after our heading, copy and paste. And the third one, we have also goals or not, of course, I missed out on my unordered list. So let me head back to index HTML, I'm looking for my vision, right off the paragraph. Again, just to spice things up, I'm just gonna have this unordered list. And then last one is goals. So again, let me copy and paste my paragraph, right after the goals, I should have something like that. And then like I said, I would want to remove this class of active from all of them would just leave it on the first one. Okay? Because again, this class of active will be the one that's responsible of hiding or showing the content. So let me delete from the second one, I believe that was vision, and then also from the goals. So as we're going to change this class of active, that will show or hide the actual content. Now, you'll notice one thing that is missing a lot is a little bit of CSS. So what I would need is to grab my article about content, and place it within the about. So my article that is my about, but then also would want to grab my about content, because within the section Senator, I should have only two articles, the first one with about image in the second one with about. So let me grab my about content. And if you want, you can of course collapse it, that's going to be faster, then I'll cut it out. And then I would want to copy and paste right after my button container. So notice where I have the button container. I'll copy and 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 take place, navigate to a bottom of CSS. And you'll notice that once we have a class of active background will be white. And for the content, the display will be set to block. That's why for example, if I will remove the class of active from the first one, and attach it to a second one. So we're have the classes, you'll see that now of course, I'm displaying division. Now, I didn't change the button. That's why the button still says history. But as you can see, as far as the content, I have the vision. So let me remove from the second one. I'll leave it with the first one because of course that is my button. So let me go back to my single item. And then just add here, my class are active. And now we can have two
02:11:56
JavaScript dysfunctionality where the moment I will click on the tab, and of course, I'll display a different content. Alright, let's make our project a bit more dynamic. And we'll start in the objects by selecting three things on one select my about, so let's look for our article that has the class of about, then I would want to target all my buttons. And I can see that all the buttons have the class of btn. So that's what I'm going to be targeting. And then also, I would want to get all my articles, since all my articles has the class of content. That's how I also will target all my articles. So 30 things about buttons and articles. Let's come up with some names. And I think I'm going to go with btn. So I guess I'll go with document then query selector all since it's going to be a node list. And in here, we'll type tab btn matters, of course class, that all the buttons that I would want to target my about. And I'll name it about document, then query selector. Now the class is of course about so just about class. And then last, like I said, I would want to target articles. So I'm going to go with const articles. And we're looking for document and query selector all and then the class that is on all the articles is content. And once we have selected all three of them, now on want to do something interesting, where I would want to attach a event listener, the click event, to a about, so not the buttons, not the articles, but the about and just to showcase one more time about is the parent container. And we will use the target the event target to actually check it out what we are clicking on and you'll see that of course in a second. So again, not the buttons, not the articles, but the about. So I'm going to write about then add event listener. be listening for click events. So so click, of course, I'll have my callback function. In a callback function, I can access my event object. That's why I'm typing in here, the E parameter, and then out want to see what is my actual target. As always, we can just simply console log. So console. log and 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 the content, 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 that I clicked on a paragraph. So if I'm going to click on the top order, you'll see that I'm actually clicking on the article. Now if I'm going to click on buttons, then of course, it will display that I clicked on a button. Knowing that what do you think is unique about the buttons? What is unique about the buttons regarding the articles, or the paragraphs? And what's unique about the buttons that we have this data ID remember, data ID, we could access using data set. So here's what I could do. I could say, you know what, get me that data set ID. And then if it actually
02:12:29
exists, if it's not on the phone, then I know that I'm clicking on our buttons, and just showcase that I could say, okay, he target, of course means whatever I'm clicking on, on that data set, remember that return the object. And since I've named my one data ID, or the property I'm looking for is the ad resave it and now you'll see that if I click here, of course, it's going to be on the phone. Why? Because paragraph or the article does not have this data set ID or data ID attribute which I can access with data set ID however buttons do. So if I click on here, and notice, I nicely get back my value. So whatever I had there as the value for my date ID, that is, of course displayed in the console. Beautiful. So now what I can do is have some kind of variable, I'm going to name mine wine ID, you name it whatever you'd want. And I'll still do the same thing, event target data, set, and then ID. And here, I can just set up a simple if statement. Where if Id exists. So if it's not undefined, then I'll want to do something. If it's undefined, then I'm not going to do anything. And basically what I'm doing is I'm just responding if I'm clicking on a buttons, because if I'll be clicking on an article, of course, nothing will happen because it doesn't have this data ID attribute. So it's going to come back as undefined. So you're all set up our logic. And I'll start by removing the class of active from all the buttons. Why, because once I click on particular button, I will add this actual class of active. But before I do that, I would want to remove it, how I can access all the buttons? Well, we already have the variable, correct, because we use query selector all and we selected all 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 variable of course, then we'll set up a for each. Remember, we had a callback function, each and every button, we could access using the parameter. And of course, since I'm accessing the button right now I can just say, class list, then remove. And I want to remove the active class scenario. See, if I click on a button, I'll remove that class of active from all of them. Again, why I know that I clicked on a button because it has the data set the property that I'm looking for. Awesome. What's next? Well, now I would want to add that class of active to a button that I clicked on. So how can I access the button that I clicked on? I'm on target. That's the item that I'm clicking on. So I'm just going to go with E target class list. Add class of active. And now you'll see as I'm clicking on a button, are removing the class of active from all the buttons right from the get go, and then adding to a button that I clicked on. And of course, now I would want 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, remove
02:13:02
Class of active from all the contents, because I would want to hide the rest of them, same like we did with buttons. And then I'll use that ID. Notice the value that I got back from data set ID to target my specific content. Because remember, all condoms had the ID. and the value matched exactly what I had here for date, right? So we'll use get element by ID, or grab this actual content, and then display 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, then I wouldn't want to do that, since buttons only have the actual data set, or data or the attribute. And then let's add comments here, hide our articles, or I guess, basically hide all the articles. And then we'll display the one that actually has the matching ID. So again, we have the articles, we do a for each, then we have a callback function. And we can access each and every article with a parameter. And I'll name my one article, an article, class list, same spiel, class list, and move on what class I would like to remove active class, that's all I would want 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 can get it? Well, I can use document get element by ID correct. So I'm going to set up some kind 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, this one, because remember that return either goals, vision, or history. So pass here the ad awesome. I have access to my element. And what do I need 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 active class. Let's save it. And now you'll see that the moment you click on your target vision, of course, annual display division, you'll click on the goals course you'll target goals. So this is a awesome project where we can practice on event target. So not the current target. But the event target. And what event target gets back is whatever you clicked on, it just using the fact that we have this event bubbling, where if we set up an event listener on a parent, even as we're going to be clicking on a children, the actual event will bubble up. And we'll be able to access the item that we clicked on using event target. If you want to check it out on a bigger screen Be my guest. And I'm noticing right away that I have a missing class. So for some reason, in this project in the index HTML, I decided to skip your classes. That a reason why you don't have any padding there on the top, because we should have here a section class. And I'm looking for the section class. So once I add, you'll see that we will have our parent monitor back to the JavaScript, if I have history, or some display history, vision or goals.
02:13:35
I can click all day long. And as long as you have the data set that is matching the ID, every time you'll click on a button, you will display the matching content. Hopefully you guys enjoyed the project. And I hope to see you in the next project. Awesome. And our next project is countdown timer. Again, we imagine some kind of giveaway whether or not is an older iPhone, or subscriber or whatever you would like. And then of course, we have some kind of date. So that is going to be date when the deal ends. And we'll set up a countdown timer, which counts correctly, what is the remaining time and we will start with our index HTML, we navigate to our setup folder. I'll close the sidebar for time being and we'll start by placing in this section. We don't want to have one. We want a section with a class of section and center class. Now within this section, I'll place my image first. So let me have my image comments. Then we'll have the article. And then for the article we right away we'll add a class of gift man hyphen IMG within the article place our image the actual Last year's gift, as far as the alternative, I don't know, say gift, gift picture, picture. And once we save it, of course, we'll see our image. And then of course, we'll have another article, where we'll have all the info. This is where we'll have the heading, we'll have our actual time, some kind of around and paragraph, and the container for our countdown timer. And we'll place it right after the first article, we'll have the info, comment, info comment. And in here again, the article now the class will be a little bit different. We have a class of gift, man hyphen info. And then within this article, start by setting up heading three. And whatever text you'd want, in my case, it's going to be old iPhone giveaway. And right after the hearing three, I'm going to place a heading for with a class of giveaway. So this is eventually we'll we'll set up our deadline. But for the time being, we'll just talk code. Now I do want to add the class because we will target in the JavaScript. So give away, man as far as the values, I'll say give away and on and on, again, whatever that you'd want. Because eventually, it will be set up dynamically from JavaScript. For timing, we're just hard coding. So I'm just going to be spitballing here 24, April 2020. I don't know 8am. Sorry, 100. am, okay, good runner will have some kind of paragraph, again with some kind of random 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 going to go with 30. A little bit more text looks a little bit nicer. And after that, we'll set 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 days we'll have hours, minutes and seconds, and all of them are going to be divs on its own. And then within there is going to be some
02:14:08
more info. So for all of them, we'll have to do a little bit of work. Within a deadline, I'll start with days. So let's add here comment of days, then div. And for div, we don't need any kind of class, I'm just going to have a div. But within a div, I'm going to have a heading for with a class of days, and these classes will change. So for hours, we'll have hours, minutes and seconds. And again, we'll start by hard coding, for example 34. And then right after the heading four, we're going to go with the spam. So txt, technically, you can write wherever you'd want, just make sure you have the same classes over here. Now let me see where my dividends. And I'm going to add your comment and have item for example, because the rest of the values will change. And I'm going to copy and paste. And instead of days, this will be hours. And you know what, I'm missing something. And what I'm missing is one more div over here. I apologize. We have deadline, and format. So I'll take my div with my heading four and spine and place 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 deadline for month. And then within that div, we have another div with a heading for a span. So now 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 not going to be days. The second one will be hours. So change that, then we have minutes and 40 minutes, we're just gonna write a short way. So mins, like so. And of course, we also need to change these values around. So hours. mins means and last one is the seconds. So I'll select my comment, class, text value, and rule right here seconds. Now once we are done, of course now we can start setting up our JavaScript. And with our HTML out of the way, of course, we can bravely navigate to App j s. In there you'll find two arrays, one for months and second one for DVDs. At the moment we don't care about them. So of course, I'll just collapse them more the moment we'll need them, of course, I'll explain why we have them in there. And what is going to be the use case. And we'll start by selecting three things. I'm looking forward to deadline. So they will the class of deadline. And I would also want to get the giveaway where I have the heading for because, of course, we'll place this dynamically, we will not hard code or date. And then also would want to get all the heading fours. And heading fours I'm talking about are the hours, minutes, and then days and seconds. So let's start by selecting all three things. So const, I guess I'll give the same variable name, so give away. And that will be equal to document that query selector. And then I'm looking for my class of giveaway. giveaway. And also would want to select my deadlines are const. The line that is equal to document are going
02:14:41
to query selector, we're looking for deadline. And then last, I would want to select my heading force. Now, of course, we have multiple options of all we can do that, for example, you could select them one by one, correct. I could say well give me an hour's give me today's Give me the minutes, give me two seconds. Yeah, definitely, you can do that. You can also maybe add here a class, for example, I don't know item, and then add the same class to all of them, and then just select that item. But just to show you how powerful is the query selector, I could also do it something like that, where I have const, then I'll name this items, because I'm just lazy to come up with some kind of meaningful name. So document as an query selector. And then in here, all right, deadline, deadline hyphen format. Now what is that is that is of course, the div, the parent div. And then I can just say, you know what grabbed me during for that is within that div, and result will be exactly the same. If you're console log items, you'll see in a console, that the result will be exactly the same, where we will have a node list, of course of the items. Now I didn't use all that's why I have this issue. My apologies, I should have used node list, I'm sorry, the query selector of all. And that's, of course, when I get my node list. So now I have my head and force, again, could we have added here a class of course, we could add, for example, item class to all of them. And we could have selected that item class. Again, using query selector all could we have, I don't know, used a query selector for each and every item, for example, days, hours and minutes. Yes. But the reason why I'm showing you that is because I would want you to know that query selector is very powerful. I can write whatever CSS selector we would want over here. And also later, I'm just going to show you a shortcut where we will loop over these items, and then add these routers. So instead of selecting them one by one, and then adding the values one by one, I'm just going to loop over my node list. And then using the index, I'll just add my routers. And the routers I'm talking about are of course, the days, hours, minutes and seconds. And of course, we haven't calculated these Valerie's Yep. But don't worry, we will get there in a second. And once we have all our three selections, now I want to start working on a date. So I would want to show dynamically using JavaScript when my giveaway will end. And I'll start by setting up new date. Now, of course, if you would want to just get a current date here is somewhat simple, where we need to come up with some kind of variable future date. And that will be equal to a new date. And you'll see that once we console log it our future date, future date in the console, we will see a current date. So this is just going to give me a string of current date. Now, of course, it is a far cry of what I'm looking for, because I would want to show what is the weekday, what is the actual date,
02:15:15
and all that. So how we would fix that? Well, we will need to start by actually adding the values in the date. So if we would want to have a current date, then we just start new, and then date. But if I would want to have some kind of specific date, then I would just need to have these values in the date. Now the word will work is for time being I'll just cancel or I'm sorry, comment out the future date. And then if you'd want to have some kind of specific date, you just need to add them as well years and you'd start with a year so I'm going to right here 2020 then you're looking for a month. Now one gotcha with 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. So if I would want to display may of 22nd, or something like that, then the value for the month is going to be four, not five, because again, the array is zero index base. So we're going to go here with four. So now I'm looking forward to May, then what date I would want, I don't know, I'm gonna go with 24. And then we go with ours. So as you can see here, in a suggestion, we have right away we have the year, then we have the month, then we have the 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 my date, and I'm looking for the hour. Now as far as the hour, the values are from zero to 24. So for example, if you'd want five o'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 some kind of value, 40 hours of value, I'm gonna go with 11. And then 30, were my minutes. And as far as the seconds, I'm just gonna go with zero. So set up like this. And you'll see that once we console log, the future date, course, this is going to be Sunday, May 24 2020. And then we have the actual time 1130. So like I said, if I'm going to go here with 17. And this is going to be a five o'clock in the afternoon. So that's something you need to remember that when we talk about months, they are zero next base. So instead of normal month, like you would have, for example, for me to be five, it is going to be four. And as far as the actual clock is zero to 24. So five o'clock in the afternoon is going to be 17 or nine o'clock in the actual evening is going to be 21. So those are the gotchas that you need to remember. And now of course, we would need to start extracting these values, because eventually I would want to set up some kind of logic, where I'll place them within my heading for, I will start with the simple ones. I'll start with year, hours and minutes. Because months, the actual days, the weekdays are a little bit tricky. So I cannot just grab this value correct and just place it in the heading for that wouldn't work. So I would need to extract them one by one. And like I said, I'll start with a
02:15:49
simplest ones. And those are going to be years, hours and minutes. So just go const, then year, and then future date, and get full year. Now I'm not going to right away, type it in the console, I might as well right away, set up my functionality, where I'm updating that in the HTML, the actual value that I'm looking for, is this guy is the giveaway, I already have selected it. So I'm just gonna say give away, then text content. Remember that was the property that controlled text content, I'll set it equal to a template string, I'm going to right give away and on. And then there's going to be multiple selections. And like I said, we'll start with a simplest ones. And I'll start with a year, because that's the one that I just selected. And you'll see that once I run it I should see in hiring for giveaway ends on 2020. Awesome. So this was easy. If I wanted to access the full year, the only thing I needed to run was get full year. So this is going to return from that date again for year. Now that could be a current date, or that could be our future date. That doesn't really matter. As long as you get full year, you'll get the actual year. Now, we also covered that when we were working with our scroll project. Remember, when we placed 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. Now since I would want to keep you up to date, I'm still going to use my onto my blog. And I apologize that I keep on removing and then adding some reason I thought I would need it. But actually, I think it will serve us well. So I have our year awesome. And then like I said, we're looking forward to more easy things. Because months and the weekdays are a little bit hotter, until more easy things are hours and minutes. So we're gonna go here hours, again, some kind of variable, whatever you'd want, future date, and then the function you're looking for is get ours, we invoke it. Of course, I want to place it right after my year. So of course the one that I'm looking for is this one. This is the format the route one giveaway runs on Monday 1/4 may 2020, and then whatever is my actual time. So in my case it was 1130 so That's why I would want to look for minutes right now. So our sorry, were already went ahead with minutes where I'm still looking for my hours, then I don't have my colon. And then of course, I'll add my minutes. And minutes are also going to be easy. Where instead of hours, we'll write minutes. And then the function that 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, minutes here, and then we'll add AM. So once I save it, check it out. worse now I have my five o'clock in the afternoon. And I'm writing this out I am so of course, I don't need to send this back to elementary, I'm not sure
02:16:22
do it. Now I have the year, the hours and minutes. So those weren't easy ones. So what are 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 in a string we saw May, there's no way for us to access it, what we will access is this array of months. Now what we will access actually, is going to be numbers from zero to lm. So let me show you, I'll go with left month, because I'll change this around. So let's month, and that will be equal to future date. I don't know why I added here a.so have a get month. And once we run out, notice, we will get a value from zero to 11. In this case, we're getting four. So like I said, since arrays are zero in next base in our array, we're getting zero to 11 array. And then since May 4 is the fifth value. And that's why the index is for. So this is where the array A month come into play, where you would need to set up this month's array. And you're going to either write it as full name, ie January, or for example, you can also write here, john, it's up to you. But you need this type of array where you can access that value. So for example, if I'm getting here for and of course, I would access here me. Now if my month would be different, then of course, the actual value from my array also would be different. So let's test it out. I'm going to go with my month array month array. And I'm looking for the actual month. So let me get my value month. And you'll see that of course I have the May. Okay, so again, we cannot access this main from JavaScript, we're accessing this number. And that number represents the month. Again, the gotcha is that it is not exactly like we would normally think of months, where main would be first one. In fact, it is your next base. So that's why we're getting this value for now, if I'll turn this around, and if I'm going to say 11, 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 equal to months month. Again, we can write it however we want. But since I already use let purposely just to show you multiple ways. I'm going to go with months. I'm not I'm looking forward a month, now save it. And I would want to place it before my year, of course. So where are the year, another variable on mine and euro a month. And I'll say that, of course, I have June, June 2020. Because June is the six 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 I would want to work with a days because I would want 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 and
02:16:55
then day, that's going to be interesting one, where if we would want to have get date, then of course we'll see the actual date. So maybe let's start with this one. And we're going to write Khan's date is equal to future get date work. So we will invoke that if I would want to display that on do it before the month. So let me right date. And that of course will give me the date. Now in this case it does complain the future as I should have used date, my apologies. Now of course I'm using the 24th. Why? Because that is my current data. If I'm going to have here 26 then of course I will have 26 allowed 28 minutes course I'll have 28. And I'm going to go back to I don't know, maybe 25 Macerich. And then of course, this is going to be devalued. So date is still one of those easy ones, where we just need to get a date. Now again, in my case, I'm setting this date manually in here, when I'm setting up new date, normally, probably you will just have a new date, which is the current date, and then you will just access this value of getting the date. And last one is our weekday. So how we can get that one? Well, we will need to get get day. And again, this is going to be a value zero to six, because the weekdays are seven of them. And then as you can see, they are of course zero next base. For example, Sunday is going to be zero, Monday, Tuesday, Wednesday, Thursday, Friday. So right after the date, if I go with get day. So let me write this as const. weekday is equal to a future date, get date or not date now was the easy one I just gave you a day. But if you look for a day, you'll see in a console that I will have a response of week, they, like I said, this is just going to give you a value from zero to six, because there's seven week days, so of course it is zero next base. So that should mean that it is a Saturday. Awesome. And of course, again, I can use my array that I already set up, where if I want to access that value course I just need to say weekdays and then whatever index i have. And in this case, I'm not going to override that, like I did with a month. Or I can just simply say, week days, and axes that value. Certainly here I'll have my square brackets, and then within the square brackets, I'll just place a future date, and then get the course that will return me the value, whether that's 0123456. And then I'll use my array, my weekdays are right to access that particular day. And then once I have the value right before the date on my weekday, week, then we'll out here comma, and of course there is now we have the future date. Now, like I said, You're not limited to accessing these values, only when you're setting up some kind of specific date. If you'd want to see that for the current date, just remove these routers, save it. And then of course, you'll see that it is Friday 24th April 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.
02:17:29
But we'll work on it a little bit later, as we're working with these routers. So let me go back to my specific date, the one we'll use as our deadline, I guess I'm gonna go with, I don't know 24 sounds good enough, because that is still in the future, because currently, we have a pro 24. So again, just remember, when you're setting up new date, you have two options. You either just get a current date, and you can get it by just running new date, without any kind of values in their arguments. Or you have multiple ways we can add arguments and this is one of them, where you can just go one by one, you'll start with year, you'll start with a month, just remember that it is zero and next base. When you have actual date, then you have hours and you have minutes, seconds and milliseconds. And then you'll get this value back, you'll get this awesome string. And then in order to access specific things, you need to start running the functions for the year hours and minutes. It is as straightforward as it gets. You just have whatever variable name, then get full year get hours and minutes, you grab those values, then for a month, you'll get a number from zero to 11. And you'd need to of course, set up some kind of array with months if you would want to actually display some kind of text value. And then the same works for the days where you get a zero to six. And then you just need to choose which day it actually is. Now date technically is still a simple one where you just have a variable again, and get date. So this is going to spit back what is the actual date. So those are the basics of working with a date object in JavaScript. Awesome once we can display when is going to be the end of our giveaway. Next, of course, I would want to set up my countdown timer, where I'll correctly show how many days are left hours, minutes and seconds. And I'll start by getting rid of this console log of future date. The way it will work will To use milli seconds. So what happens if you get this future date, you also have an option of using milliseconds, so get milliseconds for our future date, and then we'll get milliseconds of our current date. And then we'll have to subtract them. Now that is going to give us a value the difference in between dates. And then we'll have to calculate, how many days are there, hours, minutes, and seconds. And since I'm a big fan of console logs, right after setting up our text content for the giveaway, we'll have some kind of comment here. 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 be equal to my future date. So whatever variable I have over here, and then the function you're looking for, is get time. Now, once you invoke it, you'll see that you'll have a large number in a console. Now, don't worry, we'll discuss them, we'll discuss how we get this large, awesome number. But what we need to know that
02:18:02
we will need to have these routers, we will need one for the future date, and then one for the current date. And then we will subtract them. That's the way our confined, there's difference, because of course, this is going to be in the future. And this is just going to show how many days we have left hours and minutes. In order to set up that functionality, I would want to create a function. So I'm going to write here function and the actual function name will be get Remaining Remaining time. And then I'll invoke the function where I'm sorry, I'll actually set up my function body. And I will invoke the function right after that. So let's say get a remaining time. And then within the function body, I would need to get the current date and also get time. So get the current date in milliseconds, R will work, I'm going to go with some kind of variable. today. For example, I'll type your new date, our will invoke it, and I'll right away, call my get time function. And again in the console, we'll see that today also has some kind of value in these milliseconds. So right here today, and of course in the console, we'll see another value. Now, of course, our first value, the future time will be bigger. That's the whole set of Porter functionality. Because, of course, once the current time is bigger than our future one wilden. There's really no countdown because we already past our future date. And like I said, the way the functionality will work, we'll take our future time, and then subtract these routes. Because as you can see, right now, we're not dealing with may 5 or whatever, we're just dealing with numbers. So we can subtract these routers, because the first one is bigger one than the second one, and then we'll have some kind of difference. And then we'll just have to calculate, well, how many days we have in that difference, and all that. So I guess we can just remove both of these things, the console logs, let's set up our math operation, where I'm going to have some kind of variable now I will just set it up as E because I need to use it in quite a few places. And I just think it just speeds up our typing surgery is going to be T and that will be equal to a future time minus the today. So minus today. And once we set that up again in the console, we'll have a value now for this value will be smaller than 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 see in one second, we have 1000 milliseconds. So one second is equal to 1000 milliseconds, then we already know that one minute is equal to a 60 seconds correct. Now, what is one hour 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 day is equal to 24 hours. I'm sorry, not two hours, 24 hours. And the whole point here is that this value is in these milliseconds. So we would need to set up some kind of functionality
02:18:36
where one by one we get actual values. So how many days are in this large number of milliseconds, how many hours, how many minutes, and how many seconds? The only thing you're going to need to remember that one millisecond 1000 milliseconds within one minute, we have six seconds, within one hour, we have 16 minutes. And within one day, we have 24 hours. So we'll start by actually calculating how many milliseconds are in one day. Because that's what I'm interested in e-file know that value of how many milliseconds are in one day, then of course, I can just divide it correct. So this is going to be my total value. So I'm kind of a large value in milliseconds. So once I divide that by how many milliseconds I have in a day, that is going to give me the value of how many days are indeed correct, sir, in here, why don't we add a comment? And I'm going to say values in milliseconds. And we'll start with the days. So one day, how many milliseconds it has, so one day, and that should be equal to 24? Because the day has 24 hours? Now, how many minutes? Does one hour have? 60? Correct. So we will need to multiply this by 60. Okay, good. Now, we also would need to multiply this by another 60. Why? Because one minute, the 60 seconds, correct. So go here with 60. Because remember, we always always looking forward is milliseconds value. And then once I have multiplied 24, by 60, and then by 60, because one minute has 60 seconds, then I would want to multiply this by 1001. Because one second 1000 milliseconds, now this is gonna give me a value of how many milliseconds are in one day. So once that console log, of course, this is going to be my value. So this is going to be the value of how many milliseconds are in one day. And this is not going to change. So as you see right now, our actual T is changing all the time. If you're console log, notice how it's gonna actually get smaller. Why? Because of course, the current time is catching up to a future date. But this one will always do the same. Why? Because regardless of the day, one day, we'll have 24 hours, one hour, 16 minutes, one minute, watch 60 seconds, and then one second, we'll have 1000 milliseconds. So these things won't change. In the same way, I would want to set up course, the milliseconds in one hour, and then also in one minute, because we will use these routers who might as well set them up. So one hour, is equal to 16 minutes, multiplied by 60. Because one minute has 60 seconds, and then we'll multiply this by 1000. Now this is going to give me a value of how many milliseconds are in our. And if I want to check how many milliseconds are in one minute, we're just going to go with one minute is equal to 60 minutes, of course, my minutes, multiply by 1000. So I'm going to go here 1000, because one second 1000 milliseconds, let's say beautiful. And now we can start finally calculating Well, how many days, hours, minutes and seconds we'll have. And we'll start with our days or days, so some kind of variable, and that
02:19:10
will be equal to t. So that, of course, is my difference. So what is the difference between the current time and the future time, and we'll divide that by one day. Again, remember, this value is in milliseconds. That's why I want my milliseconds, well, I don't want to divided by 24 hours. Since this value is in milliseconds, I also want to actually divide it by the mini seconds router. And you'll see that if we console log days, that will have a number. So one day, Okay, that makes sense, because I'm looking forward to April 25. 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 seconds that will calculate later, what I care about is only the actual round value. And which one is that matters, of course, this guy. Now just to showcase that our functionality works, file changes to 26. You'll see that of course right now I have two days. So two point something something days. Now what I'm looking for is this only two value, because I don't care about this point something something because those are the hours, minutes and seconds that we will calculate later. So what I can do is I can just use days and reassign it to 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 after the comma. Let's say okay, I have my days. And of course once I have the value for the days, now I would want to calculate the same thing for My hours order is going to be a gotcha. And let's start working on that. And of course, you'll see what I'm talking about. So I'm going to set up hours. So let ours is equal to a tee. And then we'll have divided by one hour, correct. Because that's the value we should be looking for our will see something interesting, where once I console log the hours 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 now let's think about it. If we are already displaying days, do you think it makes sense that we are having all these hours, the 48 hours, or we would want to display two days because now it would be two full days in 48 hours, and then whatever hours are left, so I would want to get this remainder, and then divide that remainder with that one hour, instead of dividing the whole value. And the way we can get a remainder in JavaScript is following where I have console log. I'm just gonna place here a different code, summer, say eight, modules three. Now what will happen here is we'll get the remainder. So check how many full values we can place in eight, nine will be too. So we can place one, three, and then the second three, and then whatever is left over. That's the value we have. And of course, you can check it out. If for example, you
02:19:43
have nine, I don't know. Two. So if I multiply four 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 use our T modulus one day. So that is going to give me the leftover, after I have checked how many full days are in there. So instead of one hour, instead of dividing by one hour, I will set this up as modules D. Because I wouldn't want get all the hours that I have in my difference, I would want to get only the ones that are left over. So t modules and then one day, so get me the value that is left over, and then divide that by one hour. And of course, if I just console log, I'll see that my hours is this value. So something like 0.8 something something. Now what that tells me though, is that there's not too many hours in there, at least currently, because I still have two full days. But what I would want to do is use the math floor, because I would want to even round it down more. Now just to show the actual situation where we would use that, why don't we increase this number to maybe 15. And then of course, from here, I'll just remove the ATM, because that's not gonna work. Now, as you can see, I have four full hours correct. So I have some kind of day value that is leftover. So I have two full days, and then four hours. So this is left after we use t, then modules one day. So this is where we check how many full days we have in there. And then we divide the remainder by one hour. However, again, I don't want this actual value after the.so, you do the same thing where we have math floor. And we will pass in the our math operation. So let me run this one. And now of course, I'll have four. And the same thing I would want to do for two minutes and 40 seconds. Now the only difference is going to be what I'm passing as a values, because for two seconds, I would want to check how many hours are full there. And then for two seconds. Odd want to have the 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 the hours. So again, I want to check how many full hours are in there. And not only what is left, then I would want to use that one hour, or I'm sorry, the one minute, I can get that one minute by dividing of lon minute. And you're probably thinking okay, in this case, I didn't care about the full hour. So why am I passing in here? The full hour? Or you know what, sorry, not hours, one hour. So one hour, why am I passing this one hour? Because it's just much easier? Because in this case, I don't care if this gets me back 48 I really don't. What I'm looking for is this remainder. So just say whatever the time difference module is the one hour so see how many minutes are left. Okay, the same all we had here with days. I said in order to get the hour Just get me today's first, and then whatever is left, I'll just divide that
02:20:17
by one hour. And of course, we will need to do the same thing with a second hour, we'll have to change these values, seconds here, then instead of one hour, we're looking for one minute. And then we're dividing this by 1000. Why? Because one second 1000 milliseconds. So this is, of course, going to give us the values for days, hours, minutes, and seconds. Now, we can either place them directly, where are we headed over here, or we can do a little bit of formatting. And I'll start by setting up actually my array. So let me set up set values array. And then since I was using the setup, where I was actually selecting them with a query selector, all in my value in my arrays value, I will just place days, hours, minutes and seconds. So I'm going to go here with const, then values, and that is equal to days. So my first value, then hours, then minutes, and then seconds. So whatever I got back, I'm just placing in this array, I would want to iterate over my items. Of course, items are arrived here on top, and then use the index. And just place these values inside here. So the word will look like, we'll have items for each items for each. Now there is a function, of course that we can pass in as a callback function. And, within a function, I am looking for two things, I'm looking for the item, but optionally, I can also access the index correct. So that is going to give me the index of the item in my array. And in here, I can just say item, since I can access each and every item, days, hours, minutes and seconds. And then I'll say, inner HTML is equal to A values, and then index. So here's what 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 setup I have here in this array. Again, could you have selected them one by one, and then actually assign them to these routes is, of course, when in my case, I just wanted to speed it up. So I selected all of them, I showed you how you can nicely work with query selector. And now I'm just iterating over that array, and then using innerHTML. And then I'm just grabbing. So since the days will have the same index as days in my values array, I can just say values, and then index, then the hours will be same minutes will be same, and seconds will be same. So of course, once we save it, you'll notice that I left two days, four hours, 42 minutes, and then 49 seconds. Now, of course, the moment our refresh, notice how the seconds are going down, we have to refresh. And now we have 36. Now there's one thing that I would want to add, if the values are less than 10, I would want to add the zeros in front of it. And the way I'll set that up is by coming up with a function. And I'll name this format. And I'll pass in the parameter of item. And we'll have just a simple if statement. So if item value is less than 10, then I would want to return item and set it 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 than
02:20:51
10. If the value is bigger than 10, then just return my item instead of passing in values, and an index will first pass or format function within the format function or pass this values of index. So of course, we'll get the same days, hours, minutes and seconds, we'll just run it through this function. Once we run through the function, if the value will be less than zero, or I'm sorry, less than 10, then we'll add this zero. I'll save it and you'll see that I have 0.2 days 0.4 hours. And as you can see, the seconds again, will be all the time going down. Okay, now of course it is annoying for us to refresh. And we would want to set up some kind of functionality where this is all the time changing. And we can do that by setting up the interval. Now one thing that I would want to do right away is assign it to a variable because a little bit later, we'll add here functionality in our get remaining time function where if, of course the time expires are would want to have some kind of different So, above the get remaining time, I'm going to have the countdown. So count down, and now will be equal to a variable select countdown. And that is equal to mark set interval. Remember, set interval needed two things, he needed the callback function. And also we needed to say, Well, how often we'll call this function. So first, we'll start with our get remaining time. It is, of course, the function we will want to call. And the second one is how often I would want to call it, I would want to call it every second. That's why right over here, 1000, which is, of course, one second. So those are my milliseconds in one second. And since I would want to quote every second, that while right here, there's 1000. And as you can see, right now, on the screen, we're displaying how many seconds are left, now we have in the console, this console log that I would want to remove. So I don't want to show that T. Let's save it. And then of course, our functionality still works. So as you can see, we are having our countdown, where, for example, if we change these routers around, if I'll say here, I don't know, maybe April 24. And let's save it. Now you'll see that I 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? Because this is the same exact date that I have right now. So since I said future date, equal to my current date, that's why I have only four hours left. So if I'm going to go here, and say for example, 1130 course, which you'll see that I have only 36 minutes left on a file, just say that my deadline will be 1030. And of course, I'll have these errors, why have the errors because already we passed our deadline. So how do we fix that you see what happens when we have our set interval, we're getting back a value, and we have another function. And that is clearing the interval, that always is important that we invoke our get remaining time after set interval, because
02:21:25
I want to have an access to my condom. Okay, so within get remaining time all the way in the bottom, I'm going to say if t if t is less than zero, so when t is going to be less than zero, or the current time is bigger than our future time. Correct. This is our case right now. And I'll say clear interval again, that is the function that we have accessed from JavaScript. And then we'll just pass in our counter variable. Again, it is important that you invoke your get remaining time after you 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 one of the things that I selected all the way in the beginning. That was my deadline, the actual article with a class deadline. And then in here, I'll say innerHTML and Lancer to some kind of template string. And I'll have some kind of heading for maybe. So heading for. I'll add here a class of expired class and expired. And I'll close out my heading for. So let's close it out. And then as far as the value, all right, sorry, this giveaway. This giveaway has expired as export. Let's save it. And then of course now I'll have sorry, this giveaway has expired. Why? Because my t, e is less than zero, because my current time is bigger than my future one, because I was looking forward to 1030. And I can see that I have time 56. So again, my future time should be in the future. Now let me head on up and fix that. So half here, 26, and 1130, something like that. Let's save it. And now of course, I can see that I have two days, I have zero hours. But don't worry, this will change. Of course, once you have one day, then you will start having some kind of hours value as well. And then 32 minutes, and 50 whatever counting down seconds. So that is how we can set our countdown. Again, the biggest deal probably is this one, where you would need to count how many milliseconds you have in one day, one hour, one minute. And then you need to use this modulus operator, where you're just counting. Well, how many hours are left? How many minutes are left? How many seconds are left, okay. So that's why I use modules you say okay, well Is my remainder, and only then you divide that remainder. And then 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, I just iterated over my items that are coming from HTML. And then I use the index. And since I knew that the values of the same index for today's hours, minutes and seconds, so the indexes are the same for these routers as my Nautilus, then I just said, You know what, grabbed the index, and then just add it into item. And then since I wanted to format it, I just added zero. And then all the way at the bottom, we invoked our set interval. And of course, we pass in our get remaining time. And then we are running it every second. Now since Eventually, the deal will expire. That's why also within get remaining time, I clear
02:21:59
that interval once the value is less than zero. 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 you want to see that in action, let me see what is the actual time so 24, then 58. So half here, 24. Nine, I'm looking for, I believe, what is what 1058. So let's do it here 10 and 58. And we'll say whether it has Okay, it has already expired. So why don't we do 59? Because it also has expired. All right, so why don't we do 11 and learn on zero. Let's see. And now I can see that I have 40 seconds left. So now you'll see in action, all the actual counter expires, or more precisely, probably how the countdown expires, because the value for the future time will be less than we have actually today for the current time. And once that is true events that are displaying the counter, which wouldn't make sense, we'll just gonna have a heading for with sorry, but the actual deal has expired. So let me keep on scrolling down. And I'll see of course that eventually I'll have this heading for with this value. So once that is the case, of course right now I am sorry, this giveaway has expired. Now I know this was already a big project. But the one last thing that I would want to add is this functionality where each and every time we'll start the application, we will check for the current time. And we'll just add 10 days today. So once we add these 10 days, that's why always the counter will work. So even though we do have the functionality where once the time expires, then of course we showcase the hearing for with our text, or since we would want to show that application works that our control works, we will always want to have some kind of time in the future. And the way we do that, we'll first navigate back to my setup to the objects. And I will add here again this am in my text, okay, good. And then I also have to change my future date. Because as you can see, right now, I'm just hard coding this value. So I would need to have some kind of setup, where this will always check the current date, and then add these 10 days. And the way we can do that is by setting up another variable. So let temp date is equal to a new date a man let me get the year. Let me get a month. And let me also get the date. So here are like let temp here is equal to a temp date. And we're Of course looking for get full year. So let's invoke this function, then another one will be 10 month. So let time month is equal to temp date. Get month, once give that Okay, let's invoke it also. Lastly, we are looking forward to today. So let temp pay now is equal to a temp date. Get right now as far as the month, I don't care if it's a number of hours, because we'll pass it over here. Okay, so we will not actually need this array. We will right away this into our setup when we're setting up a new date. Now I'll comment this out just so you can have it for your reference. But now I will set up that date in the future, always 10
02:22:33
days 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 still would want to call this future date because Course. 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 me start with a year. And I'll have my temp month, month. And as far as them date, since I would want to set up 10 days from now, I'm just gonna go with damp DAY PLUS, then mark so And don't worry, JavaScript will automatically calculate. So for example, if it's end of the month, it will add necessary days and it will display the next month. And then as far as the time, I'm going to go back to 1130. Zero. Okay, let's save it. And now you'll see that I'm still setting up time in a future core. I'm grabbing these values I'm checking Okay, what is the current year right now? Okay. It is, I don't know. 2020? Or it is 2022. Okay, good. So set up future date. Also, in that year, okay, check what is the current month, so that way, always check what is the current year, and then have these 10 days. So that's why how my counter will always work. Because each and every time someone will open up the application, I'll check what is the current date, and then just add the standards to that. And that's how we can set up our application, which we can check it out on a bigger screen, and we can see that our counter is working. Now I know that this was a big project, I understand that. But unfortunately, that's how it is when you work with dates. Hopefully, everyone enjoyed the project. And I 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, that is a dummy text that we can display. If for example, we don't have the content. And as far as the inspiration for the project, that would be hipster ipsum, where instead of just getting the Latin text, we can get a nice hipster text. If you'd want to navigate to the project to the hipster, ipsum project and of course, just go to hip some.co. So for example, in here, we can go and decide how many paragraphs we would want. Think I'm going to go with five beer me. And you'll notice that I'm getting a Lorem text, so a dummy text, but is just using a bunch of hipster words. So in our project is going to be somewhat similar, where we are going to navigate to our project, and we have a heading off tired of boring lorem ipsum, then we can pick how many paragraphs we would want. If we don't pick any paragraph, then we'll get some random ones like so. So I can keep on clicking. And I'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 generate and then of course, we'll get eight paragraphs of text. Now in here, I got some lorem ipsum, from other generators as well. So this should
02:23:06
be an interesting project, where we'll practice of how to work with forms in JavaScript, as well as how to get random numbers, something that we have covered before. And also, what is the gotcha, when you're working with a number input with HTML, and how you can access that value in the JavaScript. As always, we will start with our index HTML. So we have to set up our structure first, back to a subfolder. In here we have the heading one. That's not we would want. And then of course, let's set up our structure. I'll start with a section and we'll have a class of Section center. Within a class, we're going to have a heading three with our text. And my case, I'll type it out. Tired of boring lorem ipsum? Question mark. After that, we'll have our form someone I have a form element with a class of loram form. And it's going to give me an action now not submitted to the server. So I really don't care about the action. And then within the form, I'm gonna have a label. Now the ID that I'll add for my input will be about that's why I'm typing in the amount, or I'm sorry, I said about the ID will be a month. So almost the same, but not really. So the ID will be a month. And then as far as the text, we'll write paragraphs, and then colon, I will set up my input. And it's not going to be a text one, it will be a number one, because I would want to show you the gotcha that you should be aware of when you're working with inputs and the JavaScript. Now as far as the name unless it equal to your mount even though we won't submit it to a server miners will have the name, Id will be also amount, amount and then right after the ID on the Going to go with a placeholder of that will be equal to five. So just showcase some kind of number value online right after our input, I'll set up my Submit button. So it will be a button with a type of Submit. And as far as the text, I'm just gonna write generate. And then we just need to add here a class of button. So class btn. Now, right outside the form, but then still, within section, I'd like to place a article with a class of Lorem text. And this is where we will display our text. So for the time being is just going to be an empty article. But eventually, we will place our content in there. So article, class of Lorem, text, and we have our HTML. So we have the structure. Again, we can submit form all day long, nothing is happening. Once we have the JavaScript, then of course, we only have the functionality. As far as the JavaScript, we already know the drill, we need to navigate to App j s. And you'll see there a array. And then each and every item in the array represents a paragraph. So it is a array of nine items. And each item is just a paragraph. That's why you'll see a giant text, then comma, Max giant text and you get the gist. Like I said, total will have nine paragraphs. So of course, once we'll set up the logic, then we'll just fetch either
02:23:39
one or two random, or all online articles, or paragraphs from our text array. And we'll start by selecting three things are want to select the form, the amount, that is, of course, my input. And then also the result, which is an article that will be used to display our paragraphs, one by one form, then for the form, I guess, I'm going to go with query selector. 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 we might as well can practice with an ID. So get element by ID, document, get element by ID, and the ID value was a mob. So just type your amount. And then last only want to target my 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's the class. Once I have selected, all these three things are want to listen for the event. But I'm not going to be listening for a click around on the listening for a submit event. Number two, I will this event to a form. So we are form, then we go with ADD event listener. And then like I said, the event name is sub met. And we are here a common event our callback function. And again, we'll be looking for our event object. And what you'll notice with the forms is that they have a default behavior. And that is to submit to a server. Now why that 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 open up my console, you will see that you won't see that Hello. So you'll see it for a split second. And then it's gone. Because the default behavior for the forum is to submit it to a server. And we would want to prevent that. Now since we already have access to a event object, I can simply say e prevent default, so that will prevent a default behavior. Now, of course, once I click on submission, I can clearly see my Hello. So that was the first challenge that we needed to tackle, we needed to prevent the default behavior of the form. Awesome. next one will be another doozy. Another one will be the value that we're getting back from the input. Because even though our type is number, you'll see something very, very interesting in a console. Now, first, I guess, let's decide how we can access the actual value. And since we have target already amount there is ID for my input, or my number input, I could use the value one. The way it's going to look like is I'm going to have const value that is my variable. And in here, I'll just type, amount and value. Now of course, if I don't type anything in, you'll see that there's something in a console, but that something is actually going to be an empty string. And as a side note, at the moment, you won't see anything because I didn't console log it. Now let's see. As you can see something is there, but VAT is just a empty value. But for example, if I add some kind of number,
02:24:12
of course, the number is the only thing that I can add, because I already have the input with a type of number. But notice something interesting in the console. And that's something interesting is the fact that this value is black. Now, you might be saying, okay, what's the big deal that it is black? Well, since the color of my number is black, it is actually a string. Now, if you don't believe me, you can just type your type of value. And once you generate that, you'll see that it is a string. Even if you add here a number, for example, 20, generate that, and you still get back the string. So even though your initial thought would be that, if you have type of number, since you can only enter the number, that the value that you're going to be getting back 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 aware of. Now how we can fix that, well, we can use parse integer, and we'll just write here parse int, that is our function. Now we don't need to import it, it is right away available. And within the parse int, we will just pass the Amount value. And you'll see right now that wants to enter for example, my time, I'll be able to generate, and now my value is number. And now of course, if you'll just console, log it, the value, you'll see that it is a color of blue, let me generate, for example, again, then the color is different. Now I know that you might be saying, okay, what's the big deal with these values with the color values, trust me once in a while, when you'll be debugging something, you might remember the fact that the strings are going to be black, so the color will be black, but then the numbers will have a blue color. So that's just gonna save you once in a while debugging where you'll be like, Okay, you know what, I'm looking for a number, but I'm actually getting the string. Now, once I have my awesome number value, now what? Well, now I would want to set up my if statement, because we need to understand that we have a couple of options. So what are the options that we can 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 in I meant, like we just saw, for example, if I console log value, you'll see that that is my empty value. So of course, we would need to check that. For some reason I didn't save there. Let me generate one more time. And as you can see, right now, I'm getting back, 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. And let me write some comments here. Empty value, we also have an option of adding a number that is less than zero. So that's not what we want. So right here, negative one will present my negative values, then also I can
02:24:45
write more than nine, correct. So more than nine. Again, that's not something that I would want. And so I have only nine paragraphs, so say bigger than nine. So why don't we set up a if statement where if I have either of these three, then I'll just display one paragraph. Now eventually, we'll set it up as a random paragraph. But we'll start by just displaying the first paragraph. So if this is the case, if the user doesn't enter how many paragraphs or tries to enter less than zero, or bigger than nine, in all three cases, we'll just say, you know what, here's one paragraph. So I can just say if, and then I'll set up my or statements. So we'll say is not a number, and that is a function. Now what happens with this, not a number function, either returns either that is true, or that is false. And I'll set up my if statement. And then of course, we'll just console log it. The actual function name is this one is an A, not a number, and then I just pass in the value. And as you saw it, last, I have here a string, then of course, it says, not a number. So if I'll have my function is not a number, and pass in the value. Of course, that will be true. So have another or, and here I'll say if the value is less than zero, and the last one if the value is bigger than nine. So if all these three things are true, or more specifically, if any of these three things are true, then of course, I would want to do something and that something is just displaying my one paragraph again, in a second we'll set it up as a random one, but for the time being is just is going to be my first paragraph. Now I can access it, I can target my article, the result one, then I can just go for innerHTML. And this is going to be the case where I'm not going to 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 add here a class, a class of result, because I have a little bit of CSS. And I'll also close out my paragraph. And then within a paragraph, like I said, on one axis, my first item, so I know that within a template string, if I want access to variable, I just need to have the dollar sign and then curly brace. And then I'm looking for a text array. And then I'm just looking for the first item. So you'll see that, for example, if the user doesn't pass any kind of value, by the way, like I promised, I'll console log also is not a number, and passing value. And you'll see that this is true. So that's why I'm saying, if this is true, then of course, get the first paragraph is generate. And of course, we have the first paragraph. And this is equal to true. So that will 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 numbers false, because it is a number, not a empty string. However, I do have it in my condition, where I say if the value is equal to a zero,
02:25:18
or I'm sorry, less than zero, and then of course, display my first paragraph from my text array. And then of course, I can do the same thing for the bigger than nine. So let me move up. Let's, for example, say 10. And then again, I will get my first one. All right. Now, why don't we make this a little bit more interesting, where I will set up my random value. Now since we have done that already quite a few times, I'm just gonna go with a random number, we'll use math floor right away, so we actually around a down and then math, random to generate a random number. And then remember, we had the array, and I'll just multiply it by the length of array. And then instead of accessing the first paragraph in 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 random paragraph here. And if I have the empty string, for I have negative, same thing, I'm gonna have a random paragraph. And if I have, I don't know, 20, I also have a random paragraph. Okay, now what happens if the user actually enters 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 will set up a temporary array, I'll say, let temp txt and I'll use my slice. So when we're using slice, we have the beginning and the end. So we'll make a copy of our array. And for example, we'll start with zero. And then and with the first item, then, of course, our new array will just contain that one item. But as always, it is much more easier for me to show you. Now the array that I'm looking for is the text array. And then like I said, we're using slice. And then as you can see in suggestions, we have the start, and then the end. Now what am I going to use as my end, that will be my value. So start with zero, that means that I'll start with my first item. And then I'll use my value. Now what value I'm talking about this one. So of course now I'm saying if the numbers are between one, and nine. And if that is the case, then I'll just get a copy of my array. If your console log it, you'll see that depending on what is the value, that is going to be also your new array. So type text. And for example, if I add here too, you'll see that I'll have array of two items, because it starts with zero, and then it ends with index of two. 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 to grab 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 set up some kind of functionality, where if I'm getting this new array, based on whatever value the user enters, I just need to iterate over that array. The tamp techs are And then arrived these paragraphs in the actual paragraph tag. So let me delete my temp text, then I'll
02:25:51
set it equal to a new term text array. So temp text, I'll use my map. So temp text map. So now we're iterating over an array. Now we can access Of course, each and every paragraph that we have in our parameter. And I'm just going to call this item because I'm too lazy to write a paragraph. And then I'll just want to wrap the paragraph, the string that I have here in the actual paragraph tags, so I'm just gonna say here return. And then of course, I have my template string, since I would want to access the variable, I don't have my paragraph. And out again, the class of results, same thing. And as a side note, probably we could have just copied and pasted. But let's do it this way, the result is and I'll close out my paragraph. And then for each and every item that I have in the array, I would want to do so that's why I'll grab that item. And then 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 right now is wrapped in a paragraph, whatever the value is going to be, whether that is going to be one, whether it's going to be five, six, or whatever. So let me look for my temp text. And in this case, I'm passing the value of six, just so you can see that we can have bigger vouchers as well. Of course, now this is my array. And each and every paragraph, the string is wrapped in the actual paragraph. Now remember, the only thing we really needed to do was to use the join method. So you get one giant one. So are your join, I'll have my empty string. So that's how I'm going to avoid, as always comments that I would have in between. And then I already have the result, of course. So result innerHTML is equal to my temp. That's it. That's all we have to do. Um, before we start testing it out, I would want to add one more thing in my if condition, because as you can see, I'm testing for empty value, or negative for the bigger than zero, how we might as well add zero, otherwise, user can enter zero, and we'll display nothing. So we might as well say here that 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 our values. For example, I can add here four, and I'll have my four paragraphs. If I add nine, you can probably already guess that I will have nine paragraphs. If we have negative one, then it will generate one, it will add zero, same thing around them paragraph, we can try it with 20. Course same thing. And if 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. Hopefully everyone enjoyed the project. And I'll see you in the next project. Awesome. Up next we have grocery board. And before we take a look at the application, let me go over why I included this particular application in our project. So as you can see is just a glorified to do list where we can add the items we can add, add them, we can delete them. And we can remove all of them from the
02:26:25
list. And of course, we'll also use local storage. So that way, once we refresh the application, the info still stays. Now why did I add this particular application in our project since to do lists are experiencing quite a bit of backlash, and some of it is deserved. And some of it, at least in my opinion, is unnecessary. I view to do list as a tool as a tool to learn a language or a framework. Because everyone who bashes to do lists still cannot point to me a better simple application that will allow you to create, read, update, and delete. With that being said, should you include a to do list in your portfolio? No, because they don't showcase the fact that you are an expert in a particular language or a framework, but they are a very useful tool while you're learning that's why I included in the project. Now that is of course my opinion. If you have a different opinion and just by looking at a to do list, you are very unhappy than probably you should move along to a next project. But I just gave you my explanation why I find to be useful and why are included in 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. So if I'll add some kind of item, and then of course, I'll add it to my list. Now, if we won't add any kind of value, we will have a nice alert. And it will say, Please enter the value. So let's go with eggs, then we can 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 edit the item, we can delete the item, or we can clear the list. So as far as deleting an item, we're just removing item from the list. And then since we're using local storage, then once we refresh notice, we still get all the info that we had right now. So each and every time the actual user will come back to the application, it will be saved in a local storage. So right away display what items were added to the list. And if we would want to remove all the items, of course, we can just clear the items. But then what's really cool about this app, we went to great lengths to set up a edit, and not only simple edit, but in fact, once you edit the item, it will stay in the same position. And it sounds simpler than it is. But trust me, we'll have to write a little bit of code to get that. And also once we click on Edit, notice how the value changes for my Submit. And for example, our write this as a second item. And you'll notice once I click on that it I have value changed. So I did not add value to the list, I just changed the value. And now where I had my item I have right now, second item. Beautiful, that's going to be our project. Let's start working on it. All right. Since it is our, I believe 14th project, you're probably not surprised, we need to start working in a set of folder. And we'll start with our HTML. So in the index HTML instead of folder, we will get rid of our awesome heading one. And I'll start by placing a section with a class
02:26:59
of Section center. Now within this section, we'll place two things, we'll have a form and a list. So let's start with your comments form. And then worst, as far as the form of a form. Now we don't need any action. So here our class instead, on the class is grocery form, within a form, we'll start by placing the alert, once out here class of alert. And then 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 three we grocery. But that is of course the name of my application, then we'll have some kind of form control. Form control here. So div with 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're naming it differently, please just keep the reference of what is the actual name. And I'll have some kind of placeholder with example of 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's add our Submit button as well. So I'm going to go with button and type and submit. And I'll just add a class here with Submit button. And as far as the text, you can do whatever you'd want. But I think I'm gonna go with Submit. And then again, in order to speed up our JavaScript, I will set up my HTML right now. So that way later, once I need to have this dynamically, my item, I can just simply copy and paste my HTML. So I'll have my list beautiful. The list will consist of grocery container. That is, of course, the div with the class we grocery container, and grocery list. So that is important because there's going to be a clear button as well. So within this container, we'll have two things. We'll have our grocery list, and then the clear button. So why don't we add this clear button first, because that way, we will avoid some unnecessary mistakes. So we're going to have here button is just going to be a simple button with a type of, you guessed it button, and out here a class of clear, clear button. Text also we'll be clear items, and then still within the container. On top of the button, we'll have our list. So we're gonna go with a class of grocery list for my div. And then within there, we'll just place one item, but one item that will later add dynamically and item will consist of article, class will be grocery item. And within this article, I'll have two things I'll have my button container, and a title. So paragraph with a class of title. And let's just right here item. And then like I said, second one will be my button container. So div with a class of button container. And in there, I'll have two buttons, one button and one delete button. So again, same spiel type. But first one will be edit. So class edit btn. And I'll place my Font Awesome. The value we're looking for is FA edit. So fa, S, fa, edit. And I'll just copy and paste
02:27:32
this 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 see my awesome list. Now that is fine. That is by design, because if we check out the style CSS, we'll see something interesting, where let me navigate to my container. So I have section center, all that is good. But what I'm looking for is this grocery container. And as you can see, by default, it will be hidden. If I comment this course now I'll see my item. Again, that is done on purpose, because once we add the item only then we will display. That's why if you don't comment this out, but of course, you won't be able to see the list. Now since I want to keep it that way, I will uncomment my visibility hidden. And now of course, I can see my items, which is exactly what I wanted. So we're done with our index HTML. And we can proceed to JavaScript 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 to navigate to App j s. And our first order of business is going to be a little bit boring. But we might as well get out of the way. So we can focus on more interesting stuff. And that is selecting items one by one, I'll select all the elements that I would want. And I'll start with my alert one. And for that, I'll use my query selector. And then the class for my alert is alert. Right? It has done around let's copy and paste two times or not normally, one time, my apologies one time, and this one will be form. And of course, the class form, my form is grocery form, grocery hyphen form, then I'm looking for my item for my grocery item, and that one has the ad. So I'll just call this grocery. And what I'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 is grocery. And then we have a few more query selectors, 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. Once copy and paste three more times. Next one is the container. Now what is the container that is my grocery container, where I have the list on the clear button. So class in this case is grocery container. After we have the list. That of course is this one, a div with a class of grocery list. And I'm just going to name it simply list. So list and let's delete also, the class of Submit button, we're looking for grocery money first. And last one will be my Clear button to clear btn. And then the class name is clear button, clear button. And I would want to set up also some variables that we'll use later on. So right after the Edit option comment on set up three variables. One will be edit element. So let's edit element by one for the time being will be undefined. I'm also going to
02:28:06
set up a flag so edit flag. And of course, since we're not going to edit right from the get go, we're only going to edit once we click on the Edit button. That's why it will be false by default. So red flag is false by default. And then the last one will be edit ID. And we'll use this ID in order to get a specific item in the list. So right edit, edit added ID will be just equal to an empty string. So we are set up and of course now we can start doing more interesting things. We'll start by setting up event listeners. And the first event will be listening to will be Submit. And that will be on our form. So right where we have a comment for event listeners on just add here submit form, submit, form. And then since the form has the variable of form, I'll just add event listener. And I'll be listening for submit event. And just to spice things up as a function of the callback function, I'll use it as a reference. So instead of writing it here, function, and then whatever callback function we have, we'll just change things around. Because we know that we can use our callback functions. And we can just reference them. So for example, I could set up all my functions in here, and then reference them in my event listener. And I know that I'll call this one add my item mark. So and now I just need to come up with a function. So my function Add Item. And I do need to have my rental object. And the reason why I would need to have my event object. Because remember, by default, when you submitted the form, while the form was trying to submit these values to a server, and that's something that we wouldn't want. So if you're safe, and there, he will save your address. And if you'll type in some kind of value, or even if you wouldn't type in the value, once you're submit, we're trying to submit a form. And that's not what we would want. So instead, I would want to go with event that is, of course available to me, because I have the parameter of a man, I would want to set up prevent default, that prevents that default behavior. And once that is done, then I would want to access the value for the value that is 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. How can I access that value, I can use value property. So we'll just console log, grocery, and then value, you'll see that whatever we type out, so for example, item in console, we should have access to it. So let me open up my dev tools. And of course, there is my item. Now, of course, I can submit it, for example, without any kind of value. And then I'm just gonna have the empty string. So that's the first thing, I'm going to have my value, so I'm going to be always grabbing my value, and I'll assign it to a value variable. And I'm going to call this grocery value. Why? Because groceries Of course, my input. And then in
02:28:39
order to access the value, I'm just need to use the value property. And now I sign it to my variable. Now also when we will set up our items. And before we even add them to our list, I want to have some kind of unique IDs. Now, this is not going to be a serious approach. Just because this is a practice project, we're just going to do a little cheating, where I will have my ID. And then in order to get my unique ID, I'm just going to use a new date, then invoke it, then remember when we use get time when we got back, although it was that time in milliseconds, right. So that was the number. And I'm just gonna convert it to a string. And if you're wondering why we're converting all of this to a string, because later when we access this particular ID, it's going to come back as a string. So we might as well set it up as a string. So for the time being, if we would want to see what we have in console, once we'll submit the form, you'll see some kind of values. So this is just going to be some kind of unique number. Again, you're not going to do that on a more serious project. In this case, just because we would want to get that unique ID and I don't want to include any kind of external libraries or anything like that. And I don't want to calculate what is the number and an incremented and all that, we'll just do a little bit of cheating, where we use new date, and get time to get that in milliseconds. And right away, turn it into a string. So we have these two things we have whatever value 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 have three options will have an option off just adding the item to the list. So if we're not editing, so if the Edit is false, then we'll have another option where we are earning. So everything will be true. And the third one if the user hasn't added any kind of values. So in here, let's set up our if there is going to be some condition, okay, then there's going to be if else Or else if another condition over here. And then lastly, we're have our else so have these three conditions. And the first 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 what we'll do right now. And then eventually, I'm going to show you a shortcut. So in here, I can say if the value is not equal to an empty string. And so I need to use my hand operator, I'm not editing. So a red flag is equal 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 exactly what I'll do. Now, another option I can have is, if unnecessary not is one too many. Just need one. Another way i can do is if my value is not empty, that is, again, something that I would need to have. But I am editing. So of course, again, I can write them on where I can say, value is not equal to an empty string. And edit flag is equal to true. So here, I can just say, is equal to true. And
02:29:13
like I mentioned, yes, I will show you a shortcut. And of course, in here, I also would need to set up and so if both of these conditions are true, then there's going to be some kind of 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 empty value, then the second one is running. So console log editing. And as a sign on, we won't be able to see anything, because we haven't set up event listener to our Edit button. And then the first one is add an item to the value, or I'm sorry, to the list. So right here add item to the list. And I'll see something interesting, where if we have, of course, some kind of value, then we're going to have either on the first two, so either will be editing, or not editing. And as you can see, the only difference is going to be the value for our edit flag. But then if it's going to be empty value, well, for the time being, we'll just have a empty value in the console. So if I'll try to submit it, check it out. Now I have empty value. And of course, I can submit all day long. And this is what I will get back. Now, if there's going to be some kind of value even one letter. Now of course, I can see that I have add item to a list. Why? Because my value is not equal to zero. And then of course, edit flag is false. And again, error flag will be false by default, it'll only set to true once we actually click on that Edit button. And like I promised, I also wouldn't want to cover how we can shorten this up. And we can do that because every value in JavaScript is either true or false. Now what happens with a truth value in the condition it will evaluate to true or false, of course will evaluate to false. So for example, we are getting the value for our input. And essentially we're getting a string, the difference is either we're getting an empty string, which is a fuzzy, so it evaluates to false. Or we're getting some kind of string value, which evaluates to true, because empty string is of course, falsie value. So for example, I can just set up some dummy if statement. And I can just say if value. And in this case, I'm just gonna have console log that I don't know, value is truly value is true. And I believe that's how you spell it, truly. So let's save it. And now you'll see that once you type something in, you'll submit, it will say value is terrific. Now, of course, in this case, if you have a knot operator, so what you're checking here, if the value is not true, if it's false, then of course this will be false. So in here, just have the empty string, and I'll see that value is false. So again, we're just using the fact that each and every item in JavaScript will be either true or false. An empty string is palsy. So for example, if you place it over here, and the value will be empty, you won't see anything in the console. Because it is positive. So this one won't evaluate
02:29:46
to true. Now why I showed you the NOT operator, because we'll use it for our error flag. So how we can shorten this up, notice where we have the Well, I don't need to check it for two empty string, I can just say, listen if the value is true, so if the value will be equal to an empty string, then we know that that is a falsie value correct. So in the condition it will evaluate to false. So that means is that once I hit my F, then of course, I'm not going to follow up with my code, because it's not going to meet the condition. It's not going to be true. And as far as their flag instead of setting is equal to false, I can just use the NOT operator, where I can say if edit flag is not true. So for the value I'm checking if it is true, then for the Edit flag, I'm saying if it's not true, now what it is by default, it is false. Correct. So of course, this condition will be met. Unless, unless, of course, we change it to true. So the same way we can shorten this one up, we're, again, I'm still looking, whether there's some kind of value, because even when I'm editing, I still want to have something as a string, because there's no point for me to edit something, or just leave it as an empty value. And then as far as the Edit flag, I can just say if it is true, so if there's some kind of value in input, and if the Edit flag is true, if both of these conditions are met, then of course, we're proceeding with our code if the value is there, but the added flag is false, this is essentially what we're saying, then, of course, we would want to add it to a list. So that's how we can shorten up our if conditions. Okay, we have shorten up our if statements. So one by one can start working on our condition. And we'll start with the simplest one. And now one is or else one, because we just simply need to handle the fact when the user doesn't enter any kind of value. And we'll just start simply by displaying on our alert. So within the house, I'm just gonna target my alert element. Since it is in the alert variable, I can just simply say alert, and then text content. So some kind of value, or just right over here content, and I will be equal to whatever we would want. So it's a for the time being here empty value. And don't worry in a second, we will set up a proper function, and just want to showcase that this stuff will work, even though our function, and then I would want to add some kind of class. Now what class I'm looking for in a style CSS, if you'll search for class, we have alert. And then we have either danger. What do we have success, that's what we have. So one is going to be the red background and red text. And then the other one, of course, is going to be green color with a green background. So within the app dress, just because of course, it is going to be a danger, or you know, user hasn't entered the value, well might as well add that class of danger. So in here, I can just say alert
02:30:19
than class list. Mark zero, let me close the sidebar here. class list online, I want to add, 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, without adding the value, check it out, we'll have our empty value up there on the top. But the thing is, I would want to use it in multiple devices, if you remember when I was showing you the project. For example, once we delete the item, once we clear down the list, once we I don't know edit and all that, I would still want to work with my alert. So instead of doing this manually each and every time we need to do that, it would be a better way if we would set up a function. So right below our 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 function will take two arguments, a text, show whatever we would want to actually show and the second one is the action. No action just means what is going to be the color, are we going to use this alert danger, or we're going to use alert success. So it is going to be red text, or is there going to be green text. Now, the way we set that up is we still use both of these values. However, I'll cut them out, because of course, I will run my function here. And then instead of setting this up to some kind of hard coded value of empty value, of course, this will be equal to my text. So whatever I place here as the argument, and the second one will be action, and for the action, I'll have two choices, danger or success. So instead of adding this clause this way, I can use template string, and then I can just say alert, and then whatever is going to be my action. So whatever is going to 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 enter value. And then like I said, either success or danger. So I'm going to go here with a danger because I would want my text to be read. We'll save it and then Once the user tries to submit the form without entering the 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't want that alert to be there all the time. And we can do that by running set timeout function. So right below, where are we setting up our alert and all that, we'll have another comment, remove alert, and then I'll use my set timeout. And remember, set timeout was looking for two things. It was looking for a callback function, so one function will run. And then the second one was in Hong Kong, so my callback function in Hong Kong, I would need to invoke it. And since it is, again, in the milli seconds, you've heard one, one second, I will need to write 1000. And then what I would want to do within my callback function, most simple, I'm just going to grab both of these things. Again, copy and paste,
02:30:53
text content should be set to an empty string. And then I would want to remove the same class that I just added, show whatever class I added, I'll just remove it, then, of course, we can try it out, try to submit within the router, and within one second, our alert is gone. Again, why we went through all this hassle of setting up the function, because we will repeat. For example, once we'll add the item will display that there was a success, we added the list with an E for example, the user tries to delete, then, of course, we'll display it. And hopefully you get the gist. So since I'm repeating the same functionality, I might as well set up a nice function that just does that for me. Okay, and once we have tackled the easiest scenario, where user doesn't enter 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's some kind of value, and the Edit flag is false. So if that is the case, of course, we would want to add that item to a list. And we'll start very simply, by creating some kind of new element. Now what element I'm creating, oh, I just need to check what I have in the index HTML. So I had my list. And then I had an article with a class of grocery item. So this is what I want to create. So if there's some kind of value, if I'm not editing, then I would want to create an item. So I'm going to go with some kind of variable name, I'm going to call this element that is document, then create a moment. So we're going with this function, and then what we would want to create what kind of element Well, since in the index HTML, I have my article, until I'll create the article. So I'm going to go here are they. And then there's two things that I would want to add, I would want to add a class, since all my articles have this grocery item class. And I would also want to set up that unique ID as a data set. So we'll start with class, because that's the simplest one. So I'm just gonna say add class on in here. All right, a element, element, and then class list, add, the class is grocery item, that's the class that I would want to add. And the second thing is that ID and again, we'll use this ID in order to edit. And I'll use my data set to add the URL. Remember, if the index HTML had data, and then whatever some 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 going to first create my attribute, so I'm going to call this lead and you're not, we'll say, add ID. So let's create a variable const attribute is equal to document, then we are creating a attribute, create attribute on fly. And then I'm going to call my attribute data hyphen ID. So what's important is to have this data. And then since I would want to access as a ID property, I'm just gonna say hyphen data ID. So again, everything that we did before just the difference was that we were manually
02:31:26
setting this up in the next HTML. Now I'm doing 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 access that value. And then I do need to set up my value. So attribute value, and that is going to be equal to my unique ID, the one that I'm just creating here. And then of course, once that is done, I would want to add it to my home. And so in here, I'm going to right element, the set attribute node, that is important that is the method name, and then I'm just adding this attribute. And then once this is done, I would want to add my HTML. So in here, I'll go with element, the inner HTML, and I'll set this equal to a template string Now in this case, we do need to be careful though, because you don't want to grab the