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 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 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 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 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, 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 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 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 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 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 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, 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, 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 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 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 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 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 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, 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. 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 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. 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 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. 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 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 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 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 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 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 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 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 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, 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 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. 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 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 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. 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 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 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 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 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 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, 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. 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. 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 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 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 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, 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 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 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. 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 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 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 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 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. 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 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 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 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 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, 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 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. 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 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 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 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 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. 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 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 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 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 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. 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 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 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 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 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 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 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 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 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 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 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 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 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, 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. 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 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 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 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 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 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 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 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 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 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, 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, 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. 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 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 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, 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 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 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 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 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 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. 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 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 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. 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. 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 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 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 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 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 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 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 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 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 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 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. 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 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 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 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. 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 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, 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 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 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. 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 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 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 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 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 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 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 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. 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 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 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, 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 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 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, 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 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, 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 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 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 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 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 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. 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 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 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, 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 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 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 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. 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 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 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 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 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 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 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 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 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 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 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 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, 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 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, 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 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 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 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 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 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 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 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 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 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, 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 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 article. Okay, because we already set up the
article, what you want is everything within the article.
So cut it out, and then again,
leave this article where it is in the index HTML. And we might as well come deleted, because
we'll add the rest of them dynamically anyway, just make sure that you grab everything within
the article, not the article itself. Because we already said, the article up here, with
an ID, the ID, with the classes and all that. Okay, just make sure you follow the same setup.
So I'll get rid of my article, because the rest of them will be dynamically Anyway, I'll
save my index HTML, and then in the app, js, or copy and paste, whatever I had within the
article in my template string. And now of course, I would want to change this hard coded
value to whatever I'm getting from my form.
So this is going to be equal to value. But
of course, we're not done. So now we set up the Omen, but we would need to add it to our
list. Correct, because this was just per step of setting up the item. So in here, when we
add a comment, append, child, and that will be equal to my container, or I'm sorry, not
container list. Correct. Because we were selecting our list that I don't want to still there.
And we selected here, when we were setting up our variables. I want to use append child,
list, append, child, and now I want to add my element. So let's type here element, okay,
we're adding it to the list, we're still not done, we would still want to display the alert.
So display alert.
Now what I would want to display, I would want to say item added to
the list item added to the list. And then what is going to be the color thing that should
be success. So that's one we're adding. And then also I would want to show my container.
Remember, in style CSS, I said that we're hiding the container, our I have the class
here, show container where visibility is visible. So now what will happen in the app js, if
this is success, if we have added this to a list, but of course, I would want to show
my container. I'll just say here, comments show container. And I have my container variable.
I already selected my container, class list and then add on I would want to add show con
painter. Let's see what we'll have again, the user will try to submit them developers,
please enter row.
Okay, good. And then we go with item. And of course, now I have my
item, my alert. And I have my awesome two buttons as well. Beautiful. Now there's two
more functions that will add over here. But for the time being, we'll just set up placeholders.
Why am I doing that? Because I think it's easier if we have them as placeholders because
then we don't need to scramble around our app j s and try to find it because of course,
we'll be adding more code.
So might as well add them as placeholders because that way
I won't forget once we get there. Okay, now what are these functions add to local storage,
and the function name will be exactly the same add to local storage again, for the time
being is just going to be a placeholder. And in here, we'll pass two arguments ID and value.
And then another thing will be set back to default. So set back to default, the function
and will be exactly the same. So set back to default, let's invoke both of them.
And
now of course, let's just set up some kind of placeholder because otherwise, we'll get
big fat errors. Soon here, I'll say set back to default, as far as the local storage is
going to be my function. And function name was add to local storage is going to be looking
for two things, ID and the value. For the time being can just say log added to local
local storage, the default one will be somewhat the same, where again, we'll have our function.
And we'll just console log something. So say set back to default.
And this is going to
be a function. It's not going to take any kind of arguments. And we'll have a console
log set back to default. Again, we're just setting up placeholders because in my opinion,
just going to be a little bit easier. Instead of hustling around our document, once we would
need to add those functions because then we need to find a specific place and then it
just introduces more Possible bugs. And I guess that should do it for adding an item
to the list. Again, we just go with some kind of item. exalt here, and we can see that we're
adding them to the list. And in this case, we're going to add milk. We can also add,
I don't know, sugar, and all that. So we're adding them to our list. But as you can see
in the console, we can see it added to local storage and Doctor default, and all that.
So this is something that we will fix later on.
Okay, and once we have our setup for adding
the item, why don't we right away fix the set back to default situation, where at the
moment, we're just invoking the function, and we have the console log. But what we would
want to do instead, well, as you can see, as we're adding items each and every time
we do it, we still have the old value in here, right. So if I would want to add another item,
I need to delete it and all that. So as far as setting back to default, we'll just make
sure that things go back to our initial setup, I can tell you right away that in this particular
case, when we invoke Sam back to default, you'll be wondering, okay, why we're doing
all these things. Since at this point, we only would need to clear this value. And we
will clear this value, but we'll add our initial or I'm sorry, we'll add some additional things,
why we're adding them right now.
Because this function will be called multiple times, in
those times, we would want those other things as well. Okay, that's why I'm just telling
you that initially, we would be only looking for clearing the value. But since I already
have the function, and since I'm going to call it multiple places, I might as well set
up the whole function. And then when we call this function later, it will do its job. So
as far as clearing, I'll devalue, I'm just going to go with Grocery, and then value and
that will be equal to an empty string.
And then I'm going to add those values that at
the moment will not make sense. So in here, I'm going to say Edit flag is equal to false.
Okay, good. And then I would want to add edit, Id set it equal to an empty string. And last
one will be Submit button. text content, text content is equal to submit. And again, at
this point, it looks like an overkill, because the only one we're really looking for is the
first one grocery value is equal to an empty string. That's why when I add for example,
your milk notice, before adding the next item, I have empty vouchers in here, because I'm
just saying you know what grocery value, you should be empty string. And only when the
user starts typing it out, then it's going to show I cannot hear sugar. And of course,
it's going to be the same thing where everything is wiped clean. These ones Yes, at the moment,
a flag is already equal to false, edit ID is already empty string and submit text content
is already submit the letter once we will call this function in different scenarios,
they will come in really handy.
Alright, and once we can add items list, I think the simplest
one will be removing all items. So still within functions. So still within functions and not
within local storage, I'll just place my delete items or clear list whatever you would want
to call it function. Now, of course, I would want to set it up to my Clear button. So we
will need to start by setting up event listener correct. So we have one for form submission.
And next one will be for clearing out the values.
So clear items, I'll use my Clear
button is the last election that I have clear button, clear button, then add event listener
will just be listening for click events. And then the function name will be clear items.
Again, just to spice things up, of course, we can write our callback function right here.
But since we have done that quite a few times, we might as well, there's some different setups
as well. So I'll place my one before send back the default. But of course, it's up to
you, as long as you don't set it in a local storage because otherwise, it's just going
to be confusing. So once right here, the function name, clear items, clear item status, my function
as a function, clear items, I'm not gonna pass any kind of arguments. First of all want
to select all the items.
So once I click on my Clear button, I would want to select my
items. Now which items am I talking about? Well, the ones that have this grocery item.
Now of course, I cannot show it in the index HTML anymore. We're just adding this dynamically.
So remember, when we are creating these articles, we're adding this grocery item. So now once
I click on the clear items list, I would want to get all of them So, let's scroll down clear
items will use some kind of variable items, he is document, then query selector all, since
just gonna spit be back the list, and then the class name is grocery item.
Now I'm not
going to console log it because again, we have done that quite a few times. And in here,
I will just want to check if the length of this node list is bigger than zero, then since
I would want to clear out the whole list, I'm just gonna iterate over them. And then
I'll use my list variable, the parent container, and then remove that item from the list. So
if items length, so if the node list has any kind of line, that means what that means that
I have added items, correct.
And then if there is the case, then iterate over those items.
So for each and since I can access each and every item, in my callback function, I just
need to come up with some kind of parameter. In my case, that is going to be the item.
And then I'll use list. So there is the parent again, that is grocery list. And it has a
method of remove child. So since in each iteration, I can access that child will just pass it
here. I'll say list, remove item, list, remove child, and then I'm just passing in that item.
Now, we're not Dumbo. Because even though we can remove all their items and all that,
what else we would want to do? Well, we would want to of course, set some things around
here, where for example, if we remove items from the list, I would also want to hide the
container.
Now how is that going to look like? Well, we would need to remove that class of
show container. So now it's this route, I'm going to go with item, then I don't know I'm
going to go with item number two, a lot, both of them to the list. And once I clear day
items, notice, I still have my clear items button. And that's not what I would want.
That's why we'll go over here with container class list. And then remember, previously,
we added the class and now we're just removing the class. What is the class name it is show
container, we just remove this class. Okay, awesome. Now also would probably want to display
the alert, not we just cleared out the list.
Remember, we have functions that then the
value will be empty list. And then I would want to set it up as a danger. Now if you
want, you can set it up as success going is just the preference of what kind of color
you would want to set up. Let's see, again, item, an item number two, they're not clearly
items. And then I have my alert, awesome. But I also hide my container. So I don't see
my clear List button anymore. And then order want to do two more things, I don't want to
set back to default. And then I would want to also remove the whole list from my local
storage. Now going to local storage at the moment will not make sense. So that's why
we'll come into salt. I'm going to say local storage, then the method name will be remove
item and I'm going to be looking for a list. Again, don't worry. Once we get to the local
storage, I'll cover this in detail.
But for the time being just add this one liner, and
then we'll use our set back to default. So back to default. And you're probably wondering,
okay, why we're sitting in this case back to default, I'm going to show you with a finished
project. So what I would want is, for example, add one item, I don't remember to whatever
three. So once we click on the Edit, notice how I'm changing this value over here in the
button. But there's also some things that I'm doing behind the scenes.
Now what I don't
want is, for example, if the user starts deleting other items, this still stays as edit, or
if I'm clearing all the items. That's why we're setting back everything to default.
Again, at this point in time, you're like, Okay, this is an overkill, but it's not going
to later once we add this edit functionality, this will make sense where we sitting back
everything to a default.
So that should be our clear items functionality. Again, we select
all the items we added dynamically, we take a look. If the length is bigger than zero,
what that means is that there's at least one item. Okay, if it's that case, then of course,
we just iterate over them. I can select each and every element. And then I use list the
parent on the parent we have removed child method, and I just pass the same item in here.
Good. Now once that is done, then of course I would want to remove my class. I don't want
to hide one I'm sorry, show the container anymore. r1 display some kind of alert, set
back to default and eventually we'll also removed from the local storage. Perfect we
can add item we can clear the list So I guess it would only make sense. If we would start
deleting with edit, and delete buttons, or before we can set up anything as far as functionality,
we also need to understand when we'll have access to them.
So let me show you what I
mean. I'll navigate back to our project, and your initial thought would be following, where
if we scroll up, I can notice that I'm adding one button for editing, and a second one for
deleting. And then one has the Edit btn class. And the second one is delete button class.
So you're probably thinking longer, okay, where am I event listeners, I'm just gonna
set up one for editing and the other one for deleting.
And I'm just going to show you with
one because essentially, it will fail. And I'm going to go over why. So we can just probably
say, here, const, delete btn is equal to document, then we can use maybe query selector doesn't
really matter. And then we're just gonna say delete the Li btn. That's the clause that
I'm targeting, are gonna double check. Otherwise, you'll think that it doesn't work because
I have some kind of bug. And let's console log it. Because of course, we can only add
that event listener if that thing exists, correct. And once you arrive, you'll see that
it's not. Why do you think this is no? And the short answer is because we're adding them
dynamically. So what happens once we have our app, if I add this item, initially, when
it loads, we have no access to these two guys. None. So you cannot just set it up. Okay,
there's a delete button. And then I would want to add event listener, like you did,
for example, with clear button on the forum.
Why we're able to do it because Clear button
is right here, of course, initially wants more app gerris loads, or can simply target
all my things. But in this case, it won't work. I have no access to delete, or edit
button. Now I have two options. Either, we can use the fact that there is such thing
as event bubbling. So for example, I could set up a event listener on my parent. And
the parent container, in our case could be probably grocery list, right? So if the user
clicks on list, land will check either if it's a Edit button or delete button. And then
of course, it will do something either edit the item, or delete item.
But since we have
covered already bubbling, I think it's going to be a little bit more interesting, where
we take a look at the setup where we target those buttons with selectors when, and this
is very important when we have access to them. Now to show you when we actually have access
to them, let me first of all get rid of this gibberish. So there's no event listener. Okay,
how are you deleted? Awesome. Let me keep on scrolling down. And now notice something
interesting, where I added the element, okay, good.
But then when I have access to it, when
I actually created the element, correct. And remember, we could use a non document, and
then query selector and then look for an edit button. In fact, I can just use that element.
Correct. So what I could do over here, in the if where I have value added flag is true.
So once I'm adding this item, this is where we have access to those buttons. So this is
where we can set up those event listeners. And then of course, we can just sum these
functions in here, where we have all the functions. So for example, here, I could have edit function,
then copy and paste, and I can just have delete, I believe it will work on Delete first, but
you get the point. I'll have these two functions. But I'll target both of them when I have access
to them, not when the upload. But when I actually have access to them. Or again, the other option
you have is setting up a event listener on a grocery list, and then check for those targets
and then do it that way.
If you would want to have a challenge, you can probably once
you're done building the app This way, you can maybe try it out the other way, where
we're using the event problem. Now in my case, I will target both of these elements when
I have access to them and only use my element. So I'll start by setting up some kind of variable.
It's going to be delete btn. And then again, instead of document, I'm using element, alright,
and query selector, and now I'm looking for my delete button. Okay, and of course, in
this case, class needs to match. Otherwise it's not gonna make sense on target The same
way my added one.
So copy and paste. And I'll just name this edit. So Edit button. And here
is going to be Edit button class. And now I want to set up my two event listeners, click
event listeners for Edit button, and the actual Edit button. So I'm going to go with delete
button, then add event listener, add, I'm sorry, not this one, add event listener. And
then I'm going to be listening for click event. And as far as the callback function, again,
we can write the functionality in here, but it is getting already quite busy. So just
say that there is going to be a delete item function, or copy and paste. In this case,
I'm looking for a red button, a ribbon, and then the function name will also be added.
So we do need to of course, set up some kind of placeholders at least. So let's scroll
down, we have our delete function, I'm gonna have function, and then delete, delete item
function. And in this case, for time being, we just have it as a simple function, and
in the console, log and resume, say item deleted.
And I'll do the same thing for my added one,
just so we can see that we have access to both of them. So this case, this is going
to be added item. And I'll say, not item added edit item, edit item. Now, once we have both
of these things, let me add some kind of item, what I'm looking for is some kind of console
log. Now I can see that I'm editing data, in this case on deleting data. So yes, in
the following videos, we will set up the functionality. But trust me, if you don't have this initial
one, where you actually have access to them, anything that you do later on just wouldn't
make sense anyway.
Because whatever you would write in your actual function, you wouldn't
be able to call it that callback function, because you will have no access at the very
start two buttons to edit, and delete. Because we're adding them dynamically. We're not in
the index HTML, when our app JS loads, okay, we have access to both of the buttons. Now,
we just need to set up functionality in delete item, added item. And I think I'm gonna start
with delete item, because it's just gonna be a little bit simpler. Now what I am looking
for is though the event object, so that's why I'll pass here as a parameter, because
I would want to access the parent container. So what I would want to do is, once I click
on my button, my delete button, I would want to get my parent compare. Now what is the
parent container, in this case, what I need to think about it, we have a section center,
then we have our container.
And then of course, I have my list. And then in here I have my
grocery item correct. Now I have my button container. This is where my buttons are sitting.
But once I click on Delete button, I wouldn't want to access the button container, I would
want to access the grocery item. Why? Because I already have reference to grocery list.
So again, I can use my remove chop, the one that we use previously, when we cleared out
the list. In this case, I will we will use remove child with specific item. So our parent,
so I'll click on a button. I'll look not for my parents, my direct parent, but actually
for my grocery item. And then once I'll have access to that element, I'll just remove it
from my grocery list. So that's why I need Of course, my event object. And I'm just going
to have some kind of element variable that is going to be equal to event than current
target. Current target why I'm using current target, because this is already set up on
a button.
So I don't want to actually by mistake, select for example Font Awesome icon, I want
the button. Because if it's Font Awesome icon, then, of course, the path is a little bit
different because the actual button is the parent. So something to keep in mind. There's
cases where you'd want to use target, where you're actually seeing what you're clicking
on. But then in this case, you want the current target because the path is very specific.
So I'm going to go to current targeting. So I'm clicking on a button, I already know that
and then parent element. And since I would want to get the grocery item, I need to go
to levels up.
So this is going to give him my button container. But I want actually parent
element as far as my grocery items. So once I have selected my element, then like I said
I would want to use list, remove, child and then I'm going to use my element So we're
going to go here with element. And you'll see how nicely we're moving this item. So
I'm going to add item.
And then of course, once I click, I removed from the list. Now
what other things I would want to do, though, because yeah, removing the item from the list
is awesome. But I also would want to hide the container. So in this case, I would want
to check, well, how big is my list, because if I have other items, then I wouldn't want
to hide lists. But in my case, for example, since I had only one item, if that is the
case, then of course, I would want to clear the list, I can do that by removing the show
container class. So here, I'll say if list children, and then length is equal to zero,
then of course, what I would want, well, I would want container, class list, remove,
and then we'll go with show container.
So show container should be removed. Let's try
it out again. item nine, this is my item. And once I click, notice, my list also disappears.
Beautiful, then we would want to go with display alert. So display alert. And then I'm just
gonna say item removed. Removed work. So we'll add here, danger, okay. Again, that's your
preference, whatever color you would want. And I'll set it back to default, again, why
we're doing that as far as deleting the item, because I don't want user to start editing,
and then deleting items, and then I'll still have those edit setups.
Okay, that's why we're
just going back to default. So again, the function name was set back to default. Awesome,
that's done. And then lastly, I would want to also remove it from local storage. But
this is where I'll use my IDs. So again, I'll have my common here. Remove from local storage,
Okay, awesome. And then I have my function, of course, now, we haven't created a function,
but it's going to be there eventually remove from local storage, and then we'll pass in
the ad. Now we don't have the ID Don't worry, we'll set it up in a second.
So I have my
ID, I'll comment this out. But down below, where I have local storage, I will set up
this function. So function, and again, the name will be removed from local storage, we'll
pass in the ad. And then I don't think I'm gonna have the console log, because probably
our console is going to get quite busy. So might as well comment, as well. But then there's
going to be this function. Now, where are we going to get this ID? Well, remember, we
have the data set correct. As we're adding the item, you'll see in a console, that orange
or not console elements.
Notice if I check out my section center, my show container,
my grocery list item, notice how item has this data ID. So that's the one we're adding
dynamically. And now I would want to access it. Okay, so let's move up where we have the
Delete item functionality. And since I have access to the element, when I use parent element
and parent element, I can also access the same ID. So I can just go with const ID is
equal to my element, then remember, the property name was data set. And since I named my one
ID, I go with.id. If you name this banana, or Bugs Bunny, then of course, use the same
value.
So I'm going to get my ID. And now within the local storage, removed from local
storage, I will pass this ID again, we will get eventually local storage, don't worry,
I'll cover this in more detail. But yes, there will be a function removed from local storage.
And we'll use this ID that we're accessing. With data set ID. Again, we have current target.
So that is our delete button. Correct. That's why we're using current target, because we
have the Font Awesome. And that might be a little bit confusing. So since we are setting
up event listener on a button, I'm grabbing the actual button. And then I have parent
element parent element. So that's how I access my element, I get my ID, I removed from the
list from the parent, I also remove show container.
If there are no more items on the list, or
display alert, I said back to default because I don't want us to start editing and then
removing items. If the case is that the user is adding and removing an item, I will set
it back to default. And then eventually I'll just remove from local storage. Alright, and
once we have delete item out of the way. Next we'll focus on Edit item. Now when it comes
to edit item, it's going to be a two step process.
Because not only we would want to
set up the functionality in here, we will also need to handle it when we're submitting
the form because remember, we were checking whether we're submitting the form or we are
editing it We'll start the same way like we had in the Delete item. And we're just gonna
copy and paste the first line. So what I'm trying to access here is the grocery item.
So this is going to be exactly the same. Now, there's also a small bug in here, it should
be element, not whatever I had in there. So of course, if I would have that bug, I wouldn't
be able to pass in the ad that would be on the phone and, or functionality will eventually
break. So just make sure that you have here element, and data set, and then ID. Now once
we have the element, now I'd want to set up those edit items. So remember, we had added
element red flag and edit ID.
So this is finally the time when we'll change these values around.
So we're going to navigate back to our edit item, and I'm one by one, we'll apply these
values. So we'll start by set edit item, this is going to be my edit element. So that's
the first thing. And I'll set it equal to event, current target. So the button onclick
event parent element, and now I'm looking for a sibling. So why am I looking for two
siblings, because I'm gonna have my item here. And you'll see in a console problem make this
one a little bit bigger. We're looking for our item. Yep, that is true. And I don't know
why I'm looking for should be looking in here, I look in a grocery list, I have my item.
And I'm looking forward to startle.
Now remember, the parent container will give me this button
container. Correct. So parent element is the button compare. But then I'm looking for this
title. That's the value that I would like to access. And, as we're traversing DOM, are
gonna just say previous, previous years work. So that element, and then sibling, sibling.
So that's gonna give me that title. So once I have that title, I can start setting up
the values. And in here, I'm just gonna say set form, value, set form value. And this
is going to be equal to my grocery value, because remember, we have the grocery. And
then we also have the value. So instead of cleaning it, instead of setting it equal to
A empty string, I'll set it equal to the editor element. And then in our HTML innerHTML. Again,
this is just going to give me this name, whatever it is, whether that is the eggs, or whether
that is milk, or whether that is an item. Now again, of course, it's going to give me
that specific value for that specific item. So I'm going to have milk, and I'm going to
have beer, you will see the moment I click on the item.
Question here, I have the beer.
Why? Because I go to the parent. That is my button container. And then I'm looking for
my title. So this is going to give me that title. And then I just use my input, it has
the value property. And instead of grabbing that property, in this case, we're setting
that property, we say grocery of value, and this is going to be equal to our edit element
in our HTML, then, of course, since I'm editing, what I would want, I would want to set edit
flag equal to true, correct.
So we're going to go here with edit flag, and then we're
setting it equal to true. And then the last one will be edit ID, someone wrote with edit
ID and that one is equal to my element. And again, I will just want to access that data
set. Because for both of them, of course, there is going to be the unique value. So
I'm going to go here with data set. And then the ad is that as of course, my attribute
name. And lastly, I would want to change the value in my Submit.
Because now at this point,
I'm editing, I'm not just going to be submitting, I'm going to be in fact editing. So in here,
we'll say submit text, and then content is equal to read. So let's save it, we will test
it out. And then of course, we'll head up and fix our Submit. Because at the moment,
we just have the OS or df. So we're not handling right now, our edit functionality, we're going
to let's start with milk, and beer. So again, if I add it, notice I have my milk, I have
my edit, all those values have been set.
Now I just need to handle it when I'm submitting
my form. So I'm going to scroll up, of course, my first condition is if the value is true,
and then also if the error flag is false. So that's when we're adding it to the list.
Now the second one is if the Values true. And the Edit flag is false. Because one thing
we need to keep in mind, it will delete it and try to actually submit will still have
this please enter value.
So hit this else. And this is exactly where what we would want.
Because remember, I don't want the user to click on edit, and then get the value and
then just delete it. Okay? And then say, Okay, now there's no, no, that's not what I would
want. So it's good that if the value is empty, and we'll still have our display alert, please
enter value and all that, but we're not going to be submitting it to a list.
And we're also
not going to be changing our value. Alright. But what we would want to change though, okay,
good question. And what I would want to do is grab my value, and assign it to my edit
element. Remember, in here, I had my edit element, correct. And I assigned it to my
specific paragraph. And then I had my grocery value, and I assign it to add an element and
innerHTML. So I grabbed whatever I had in that paragraph, and assign it to my form.
Now I would want to do the opposite, where instead of assigning to the form, since the
value, of course will be changed. Since we're editing something, now I would want to grab
that value, and set it back equal to my paragraph. And since I assigned it to my edit element,
the Edit element is of course, up here in the top. When I'm actually submitting my form,
I can say, You know what? The Edit element.
So remember, that was our variable, edit element
has an innerHTML is now equal to the value, where am I getting the value? Right here,
grocery value. So again, first, we assigned it to innerHTML on our assigning it back.
So we're kind of reversing right now. So edit element innerHTML, that is equal to our value.
Awesome, then I would want to run my display alert. And I'm just gonna say value valued,
changed, like so. And then it's going to be a success, we'll have a green color. And then
there's going to be two more things, we would want to edit local storage, and also set back
to default. So we're going to go and set back to default. Again, why am I doing that, because
I would want to edit a next time as well. So now when I'll run my set back to default,
remember, this one was grocery value equal to an empty string, edit flag equal to false,
that ID is actually equal to an empty one.
And then we'll have submit text content is
equal to submit, because at the moment, we have actually added and of course, we would
want to do that. Now there's one gotcha, though, because above set back to default, I would
still want to edit the item in the local storage as well. So make sure that set back to default
is actually the last one. In here we'll have a function. And we'll call this edit local
storage, edit local storage. Again, at the moment, we don't have that function, but we
will have in a second edit local storage. And then there's going to be two things, I
would want to grab that edit ID. So I don't want the new ID, I don't want the one that
we're creating from scratch. I want this guy the Edit ID. And remember, within the Edit
event handler, we were assigning this to a value that we're getting back from the item,
the item have data set ID. And then of course, this was assigned to edit ID. So now we're
passing in down to our local storage.
And the second one will be the new value. So of
course, this is going to be the new one where the user has changed that value. Now let me
navigate down. And this case, I'll set up my function. Now this one, of course will
be for my edit. So I'm going to go with edit local storage is going to be looking for two
things, the ID and also the value. So let's set this up. And now we'll be able to edit.
So for example, if I right item here and item number two, and then I don't know eggs. And
if I want to change my first item to something meaningful, are going to click on it. Now
I have my item I'm editing. So now I grabbed my title assigned to my input, or two I have
the value.
And now of course once I'll change it to for example, I don't know milk, right?
Once I'll click on Edit, now assign it back. Check it out. Now I sign it and of course,
I have the milk. And as you can see, since we're keeping the reference of which item
it is, that's why we're not changing the order. So if I'm wearing the first time I'm adding
the first item. And the reason why we're all the time setting back the defaults, because
this is the behavior that I want where, for example, if I'm editing this item, if the
user decides that you know what, at this point, I'll delete the eggs or clear the items, I'll
set it back to default, because I don't want that edit to be lingering. Because as you
can see, once we press edit, we actually assign these guys some kind of values. And I don't
want to keep on holding on to those values.
If the user decides to delete something, then
these will be set back to default as well. So that way, if there's some kind of editing
going on, we'll have to start from scratch, instead of just making a big mess with some
old values, new values, and all that. So that should do it for our functionality. And of
course, now we just need to focus on how we set up a local storage, where the moment we
refresh the application, we still have access to the items we have in our list.
Alright,
our functionality is working. Now, of course, we would want to work with our local storage,
where each and every time we do something with our list, we will update our local storage.
And then once the user comes back to the application, we have all the values. And the reason why
we can do that is because when we work with JavaScript, of course, we work with the browser.
And one of the API's that browser has is the local storage API. If you'd like to check
it out, just navigate to our developer tools, we're looking for application. And in here,
we'll have a local storage. And essentially, what we're doing here is we're saving information
as key value pairs. Now methods we will need to remember as far as local storage. As a
side note, we have access by default local storage.
So again, there's no external library
or anything like that, we just need to run our methods. And the methods we have is set
item, get item, remove item. And one thing we need to remember though, is we need to
save those values as strings. So that's a little bit of gotcha. But the way we would
work with a local storage is we would write a local storage, local storage. And then like
I said, if we want to set item, we will go with set item, then whatever name, so I'm
going to use the name of a list. But of course, we can use whatever we would want. So for
example, I can say here, orange. But then if I would want to say for example, save array,
I would need to save it as a string. And for that, we would use JSON, and then stringify
method. And at the moment, I'm just going to pass in value only. But of course, later,
you'll see how we're accessing some kind of array.
But in here, I could say I don't know,
array of item. And item number two. So of course, once I'll save it, I'll see that in
my local storage, I have my orange, and I have the item. So item and item number two.
Now again, the gotcha is that we need to use the stringify array, otherwise, this functionality
will end.
Now if I would want to get those values, I could just say I don't know, let,
or whatever cons doesn't really matter. Oranges is equal to local storage, then get item.
And then in this case, we would need to use this JSON parse. So I'll use my get item.
Now what is the item name, it is orange. But then this whole thing, we will need to set
up a JSON parse, parse, parse, and here, we'll pass in the local storage. Now I know that
we already covered this when we talked about the DOM during the tutorial part, but it's
always to have it as a refresher. So once I'll save it, you'll see that if I try to
access my oranges, I should have my list. So oranges. Great. So now I have item one,
and item number two.
So now I have the array. Now again, if you won't use the JSON stringify
and JSON parse, then you'll have a big fat mess, because again, we need to store them
as strings. And if we would want to remove the item from local storage, again, we would
run all local storage, then remove item. And then whatever is the item name.
So local storage,
and then remove item. And then we just need to say water is the item name. In our case,
that is orange. Let's do that. And now we can see that in application course we don't
have the local storage. So essentially, this is what we'll do in the apple local storage
removed from local storage and local storage. Now why our setup is going to be a little
bit complicated because of course, we're not going to store oranges in there. We'll have
to store it as a object. So it's going to be a array with objects, and each animal and
the ID and then the value and then if we would want to remove one, then we would need to
access the ID all kinds of good stuff. But this is going to be a general setup where
we have set item, then we have get item, and then remove item. But we just need to use
the stringer for it when we want to save it.
And parse once we want to get that value back,
because of course, we will need to turn it back into array from the string. Beautiful
once we have jog our memory. As far as local storage goes. Now let's start working on our
functions. And I'll start with the first one, add to local storage. Now, I guess I'm going
to leave this for your reference. So I'm just going to comment this out, just in case you
would want to use it later on. And then as far as our local storage, here's what we'll
do. While we're running this one, well, let's double check, we're gonna head up, and I can
see it if the value is there, and I'm not editing. And of course, all the way to the
bottom, I'm running my add to level storage, I get this unique ID, so the same one that
I passed into the item.
And then I also have the value, so whatever is displayed on the
screen. So those are the two things that I'm passing into my local storage. And like I
said, I wouldn't want to store oranges in there, I would want to store actually array
with items. So I'll start by setting up some kind of item. And I'm going to call this grocery
but doesn't really matter what you call it. And that is going to be equal to my ID, or
I'm sorry, to my object. And yes, in the object, I'll have my ID is equal to ID, and a value
will be equal to value. Now one thing that, of course, we haven't covered e6. But essentially,
with the a six, we have a little bit of shorthand, where if this value has the same variable
name as your property, you can just shortcut it.
Now again, what I'm saying here is, there's
going to be a property of ID, and that ID is of course, value of my parameter over here,
the one that I'm passing in the same will work here, where I have the property with
a name of value, and that one is equal to my value parameter. And if both of the match,
shortcut is following, or I can just remove the second one. And now I have my object,
the ID, and property value. And of course, whatever I'll pass it in here. And this is
going to be the case where I would like to console log in, because I think it's just
going to give us a good understanding.
So if all right here, eggs, and if all right
in the console, I'll have my ID. So that is the value that is coming from the parameter.
Remember, that was the second thing. And then also, as far as the value, we have the x.
So again, this is just an iOS six thing where we can just shorten our syntax a little bit.
But essentially, it's the same thing. Id is equal to ID, and then the value is equal to
value, you both have the match. If this variable name that you're passing in, has the same
name as your property name, you have a shorthand, my friend. So we can just save the typing
a little bit. All right, we have the grocery now what? Well, now I'd want to get those
items from the local storage, because eventually they're going to be there. Now you're probably
right away saying okay, but they're not there at the moment.
And yeah, you're right. But
we would need to still set up some kind of logic where initially they wouldn't be there.
But eventually, we would also need to check whether they're there or not. Now, we can
do that. We're going to set up some kind of items. Now this is going to be my array. And
then in this case, of course, I would need to get that item right now how we were able
to get the item we use get item function. So on here, I'll say local storage, then get
item. But then Am I going to get the item or no? Is there item with the name of list.
And I can clearly see that in my application. Everything is empty. My local storage, there
is no items. So what am I going to get back in here? Well, let's see. items. And we'll
have a big fat undefined. We're going to go with eggs. And yes, there is no, so there
is no item in there. Okay, that's good news. Now, we could set up a ternary operator, where
I'm going to say you know what, if there is an item, good, assign it to my variable.
If
there is no item, if there's no list, then just set this up as a empty array. Okay. Now,
of course, we can write an if statement here if we would want. But we can also do it, like
I just said, with a ternary operator. Now the way that will look like is following where
I have local storage get item. Now again, either this is just gonna say yeah, that value
is there. Or we're gonna get back No. Now if we're gonna get back know that if you remember
ternary operator, we're just gonna set this up as a empty array. Or if there is actually
that value there. If the list is already there, then we'll have the actual value. Now remember,
though, when we were using the get item, we needed to use this JSON parse. So this is
just checking whether the item exists or not. If it does, then get me that item and use
the JSON parser. If it doesn't, set my items equal to my empty array.
Now, again, let's
run JSON. parse, and now have our local storage, get item, and then the name will be list.
Because I know that I will set this up as a list. Now, if the name would be different
than Of course, I would name it differently. But I know that eventually here at the end
of this local storage, I'll set it up as list. Okay, so now I have two options, either I'm
going to get this as a array of lists, which at the moment, I don't have it, or a empty
array.
And I know that in this point, I have the empty array, okay. And now, I would want
to add this grocery, to my items, whatever it is, I mean, I know that this is right now
an empty array, but eventually, it's not going to be in theory, there's going to be some
items in there. So we'll just say items, we're gonna push we're adding, and then I'm adding
grocery. And now once I have my items ready to go, I just want to use my set method. And
if you remember, one thing with local storage was the fact that if there is already some
kind of value, and if we're sending another one, we are essentially overriding that.
But
we don't care about it. Because each and every time we'll add our item, we will get back
our old list. So essentially, yes, we will override that whatever value has been there.
But we need to remember that, of course, this is going to be the actual latest value. So
we really don't care. Now I have my items. Awesome. It is going to be some Carnival,
right. And then like I said, we'll have our local storage set item. And I'll name this
list. And now say JSON stringify. And I'm passing in the items. So now if the item wasn't
there, we were definitely setting this up. If the item was already there, then of course,
we'll get back that item. And we can clearly see that it will console log our items. And
you'll see that the first time when we add our item, the items will just be an empty
array. Because this guy, this JSON parser will be equal to that know, that we already
covered.
But the second time, once we already have some kind of item, this JSON parse the
one that we're actually checking the local storage get item, that one won't be anymore,
no. Okay, so that's where we'll grab our JSON parse, and pass in the get item. So get our
list, pass it through the parser. And then the items will be already the array. Okay,
and of course, we will need to test it out. So if our pass here, the eggs will see that
first time, our value for the items will be this empty array. Why? Because local storage
does not have the item by the name of the list. But the next time, since we're setting
it up over here, local storage set item list and then stringify the items, then we'll have
our array with values.
So let me run it, I'm adding the eggs, like I said, in the beginning,
I have the empty array. Because I had a ternary operator, I'm checking for the item of list,
that item does not exist, we just evaluate to an empty, alright, then the second time
course, there's going to be already some kind of item. So just grab that item, we use JSON
parsing, then whatever is in the item, we grab it, we assign it to the items. And now
we'll add to our array. So if I add over here, milk, milk, you will see that now I have array
of two items, the eggs and the milk. Alright, and once we have add to local storage out
of the way, of course, now I'd want to focus on remove from local storage and edit local
storage.
Now one thing though, is that for both of these functions, I would want to access
whatever I have in local storage, I wouldn't want to copy and paste this code because what
if I want to change something so it would make more sense, if we would have a function
that just takes care of that. So here I'll have another function get local storage.
Now
we don't pass any kind of parameters, but I will return my result. So I'll just grab
this local storage code, like so copy and paste. And I'm just going to say, well return
from local storage, whatever you get, even there's gonna be a list returned my list.
If not, then just return a list empty array. And I'll just use my function here. I'll say
get local storage and I'll invoke And you'll see that the functionality does not change,
we still have in our local storage, our items. So if I open up the application on the smaller
browser window, you'll see that I still have my values. So that didn't change can refresh
all day long and will still have those values. So now let's start working on removed from
local storage. And I'll start by looking where we are calling it on, I believe we called
it when we were deleting the item.
Remember, we were accessing the parent, and then on
the parent, we have the ID. Correct. So once we had the idea, of course, we can pass it
into our remove local storage. Now, as far as remove local storage goes in here, we'll
have the same thing, we'll have our items. So I'm going to call this let items is equal
to get local storage, again, either all have the empty array, or I'll have the array that
is in my local storage. And at this point, of course, I already have my array, because
it is there. So my items will be equal to this array of two items that I currently have
in there. And then since I already have the array, well, then I will just need to do something
with that array. Now I purposely use let, because I'm going to use my filter method.
And I'm just gonna say items is equal to items filter.
So now iterate over this array, the
one that I'm getting back. And then I'm just going to call my callback function, I can
access each item as a parameter. So we'll call this item. And then I'm just going to
say like this if item ID, because that's one of the properties that I have within the item
that is coming back from local storage does not match the ID, but I'm passing in when
I'm deleting the item, then of course, return your item. So what I'm doing here is I'm just
filtering out the values that don't match this ID.
And that's why the one that actually
matches to whatever I'm passing in here. Well, that one will be removed from local storage.
So in here, I'm just going to say return item. And then at the very end, I would need to
still set those new routers. So this is going to be the case where I'm going to get a little
bit lazy. I'm just going to copy and paste I'm going to say local storage. So that item,
list stringify items, again, yes, we are overriding these values. So I grab whatever happened
there. Then I assigned it to items, I filtered those items, my callback function, I can access
each and every item. And then this is already the local storage item. And then on that item,
we have the ID property. And as a side note, if you want to see what you're getting back,
just add a console log here.
Because we have done already quite a few console logs. That's
why I'm skipping right now. But if you're still not what we're accessing, we have of
course here are items from local storage. And then of course, once I removed that item,
I'll just set it in the local storage. Now in this case, I'll have no beer. Of course,
I have my items here, because I already had something in there I had eggs, milk, and then
the last one is beer. So in theory, I kind of delete these two. So I'll need to clean
out my storage eventually, because I have no access to them in sense of UI, because
as you can see, they're not there. But what I'm trying to say here is that we could delete
the beer. And you know, I don't think we need to console log it here.
So I have my items.
Awesome. Now I added another extra beer. Me sure I don't know what's on something like
that. If you'll check the application course you will have more items. And you know what,
this is going to be the use case where I would want to go to bigger screen, I see my items
on my application. And as you can see you have the eggs, milk, beer and onion are keep
on adding those items. Now, I have only access to the iron. So click on deleting the item.
Now check it out. If you'll notice in your local storage, you don't have the icon anymore.
Again, yes, we will remove all the items, of course. So it makes sense. Once we're done
setting up everything, but at the moment we had the audience. And then we'll just remove
the area. And because we deleted using our delete button, we had access to the ID. We
access items from our local storage. We are on filter. And then we set the new items.
And then of course send it over to our local storage.
Now we have two more we have edit
local storage. But then also remember we had a remove item. So why don't we focus on that
one. So if I'm going to head on omp I should find clear items and remember, we had local
storage remove item and now you can see why we're using it because we have access to the
local or storage, and the method name is remove
item. And what item I would want to remove. Well, that is a list. And now you can see
why we added this piece of code. So we access local storage, we have our method, and we
would want to remove this key value pair, the one that has the name of a list.
So in
order to test it out, I'll add some Coronavirus in here, maybe item number two. Now as you
can see, it was added to my items. So these are all my items. But now once I save my app,
j s, and of course now this is not going to work, I need to add one more, maybe item number
three. Now again, this was added to our list.
But then once we will click on clearing the
items, you will see how we use our local storage, remove item, I will just remove all your items.
So now we don't have that list anymore. So now again, this is going to be the case where
the first time we're adding those items, what do you think is gonna happen? Well, this get
local storage will just return me mine array. Correct? Because get item will be no. So we
won't use this guy anymore. And now we'll use of course, our empty array. And we'll
pretty much do everything from scratch. So while we're still on the subject, of course,
let's deal with our edit local storage set up is going to be very, very familiar, we'll
have our items get a local storage.
So again, we either get our items or we get an empty
array. And since I'm passing in here, two values, ID and value. And as a side note,
if we had up we can see where we call it. So we had our edit item. Okay, that was one
thing. But then we actually called our edit local storage, when we were submitting with
edit flag off true. So when we're not just submitting, but when we're actually editing.
Remember, we had edit local storage, we accessed our ID, so not this guy, not the ID that we're
creating. But the Edit ID, we passed that one, as well as the new value. So what is
the new value. So now what I would want to do is get that item from the list, the one
that is sitting in my local storage, and just update the value. So I do need that Id in
order to access that item.
But I'll change it into my routers. So in here, I know I'm
going to be getting back my array. And again, I can use one of the array methods. So items
is equal to items, we know that map will return a new array, just like filter. So we're going
to have your items map, then again, our callback function item. And then if the item ID, again,
matches to the ID that I'm passing in, then I'll just change the value.
So in here, I'll
say item ID is equal to an ID that I'm passing in the item value is equal to the value that
I passed in. And then I would want to return the item, return the item. So what happens
as I'm iterating over my items, if the item ID does not match, we'll just return the item
the way it is. Now if the ID will match, then I'll set the old value equal to a new value.
Let's see it in action. And you know what, there's one thing missing, still need to set
the item.
Let me paste localstorage time. So now let's try it out again, we'll have
our item. Okay, as you can see, I'm adding my item in my local storage, I have the OD
Amanda value of item. So now of course, once I edit, I have my item, okay. And then I'll
change it to eggs, you will see that in local storage, also this value will be changed to
eggs. So again, we get our items from local storage, we iterate over, if the ID matches
the ID that I'm passing in, awesome. we'll assign it to a value. If it doesn't, we'll
just return the item. And then again, we override the new value in our local storage. So local
storage set item, and then list of course, and JSON stringify. Alright, and the last
thing that I want to do is once we refresh, I would want to grab my items from the local
storage and actually display them. That way.
When the user comes back to the application,
we still preserve all the items that we just added because at the moment we're doing a
lot of functionality. We are moving from the local storage, we're editing and local storage
and all that we can clean out the local storage, but we're not faking the use of the fact that
of course we can access local storage, once the app loads and then just display all the
items have been added to the local storage. Now in order to set that up, we'll have to
head on up to our event server, we have the event listeners. And now set up one for DOM
content loaded. So say load load items. Now, we'll set up on a window. So say your window,
then add event listener will be listening for the DOM content.
So DOM content loaded
around. And then once that happens, we'll just set up items. So this is going to be
my callback function, set up items, career, that's my function. Let's save it. Now we
will navigate down. And notice here, I have set up items. So this is exactly what I'll
call my function, I'll say set up items. And I'll start by getting those items from local
storage. And remember, the function that did that was get local storage, again, let items
is equal to get local storage. So in here, I would want to check if the items have some
kind of length, that means that course there are some items, so I want to display them.
So all right, if and then items, dot length is bigger than zero, well, what I want to
do, I want to iterate over them, and create those new items.
Now, if we remember, when
we were checking for the form submission, we were creating already decided. So it would
make sense, if we would set up a function. So we would get this code, pass it into the
function, and then call it into places. We'll call it when we're submitting form. And the
second time is, as I'm iterating over my items, then I'll call my for each. And then for each
and every item, I will call that function. So the function name will be create a list
item, function, create list item, it's going to be looking forward to arguments ID and
the value. Let's pass it here. And now like I said, I would want to copy and paste that
code. So in this case, I will cut it out. And I'm looking for element. So that's going
to be the beginning of my code. And then I would want to end it over here. Now I still
want to include the element selectors, because even though I'm getting them from the local
storage, I still want the functionality correct, where if I click on Edit, or delete, it still
works.
So just cut out everything up to despoiler. Then navigate down, copy and paste. This is
my function. This is what the function is doing. And now we just need to add these values
in here, where notice, since I'm adding here iD iD value they match. So my argument matches
to whatever I have in the attribute. And the same goes for the value. Now in this case,
as I'm iterating over those items, I would want to call of course my function. So items.
So if the items length is bigger than zero, then I'll run items. For each. I'm looking
for my callback function, function, magazine each and every item. And then these values,
of course, are coming from the local storage. Now what does that mean? Well, that means
that in the item, I have two properties, I have the ad, and I have the value. So now
I can call my create list item. And I'm looking for two things correct. I'm looking for the
ID, and then the value. So do the same thing, passing here, the item ID first property.
And the second one was item dot value.
So we call them. And the last thing that I would
want to do within this function is show the container. So once I run it, then I'll just
say container, class list, add, remember the class was show. cron, Dana. Now, of course,
since we cut out the previous code, I still need to create a list item, once I submit
my form. Now in this case, it's not going to change much.
Because again, I'll say create
list item. And I'll pass in ID and value, again, where I'm getting the value here, where
I'm getting the ad right here. And then it was pretty much the same code. So the only
thing again, is that we're just passing the ID and value into attribute, as well as the
actual value. We'll save it and you'll see that we'll get called from our console. Now
something is missing. And it says your item is not defined 151 Well, let's see. So I have
item for each of the functions. And of course, I'm saying here Item should be items, my apologies.
Let's run one more time. And I have my eggs that are coming from the local storage. And
now I will navigate to a bigger screen. And we'll just as we have the eggs, awesome.
We'll
add your beer. Now I can see that I had a beer if I refresh. Yep, there it is. We are
going running our function iterating over and we have all the routers, if I want to
delete them, of course, I'm removing them from the UI, as well as the local storage,
I can clearly see that. Then I'll add one more time, eggs, mail, mail on in on em work.
So let's add this guy. And then once I have all these values, well, of course, I can delete
them one by one. Let's remove an item. Of course, that is going to be my item item number
two. And then if I want to edit instead of item, let's call this eggs. So now I have
my eggs. And if I would want to edit this to a milk is going to become milk. So that's
how we can set up our application. Hopefully everyone enjoyed the project. And I hope to
see your next project.
Awesome. Up next, we have simple slider built with a JavaScript.
So later in the course once we cover some other topics, we will build a more complicated
one mob, this is just going to give you an idea of how to set up a simple slider with
a JavaScript. So the setup will be following where we'll have two options, we'll have one
option, we'll work with the buttons. So hide buttons at certain points. So for example
pre button will be hidden in the beginning of the slideshow, then the next button will
be hidden at the end of their slideshow. So in this case, as you can see, I can only Navigate
back and forth. Because once I get to the end of the slideshow, I hide my next button.
And then once I get to the beginning of the slideshow, course I hide my pre button. And
the other setup we'll take a look at is the one where we'll just circle back to the end
of the slideshow, or the beginning one.
Now the way it will work is once we get to the
end of the slideshow, notice how we circulate back to the start. But then once we are at
the beginning of the slideshow, and we want to take a look at the last one. And of course
we just circulate back to the end of the slideshow. Now everything else stays the same, we can
still Navigate back and forth. Just the difference is once we get to the beginning of the slideshow,
or the end of the slideshow, where instead of showing and hiding the buttons, we'll just
circle back either to the beginning of the slideshow, or the end of the slideshow. Excellent.
And we'll start with our HTML. So again, I'm in setup folder. And instead of my awesome
heading one will create a slide container.
So div with a class of slide container. And
then I'll place my slides. And this is something you need to keep in mind where slides are
the important ones. So there's with a class of slide, everything else is optional. Whatever
you want to place in there, you're the boss. But slides are the ones that will set up our
slider, or you can call carousel wherever you would want. So I'm going to start with
my first one. And as a side note, I was purposely trying to spice them up. So effectively set
them up in a different way. So they're all the same, because that way you can understand
that pretty much you can place whatever you'd want. Within the slides, what's important
is to have that div with a class of slide. And I'll start with the first one, we're all
have the image with a heading one. As far as the image I'm looking for IMG number one
on here, a class of slide IMG and then right after that, I'll have my heading one with
a value of one.
Let's save it. And of course, I can see my slide. Awesome. Then, actually
I'm missing here the class name it is not slide it is slide or container. Okay, so now
of course, everything looks much better. And I would want to set up three more slides.
But then like I said, since the setup is almost the same, just the difference what we're placing
within, I can just copy and paste 123. And now I just want to change these values around
where this is going to be a heading one with a value of two, then three, and then four.
So now I have four slides, but since all of them are not going to be exactly the same
for the second one, just delete the image, so I'm just gonna be gone. For the third one.
We'll also actually hide the image so we will delete the image. And then for the fourth
one, the setup will be the different image. So I'm going to go with the person one JPG
with me deleted this extension, I'll call this person image, person IMG.
And it's gonna
have this heading one with a value four. But before that we'll have a heading four with
Susan Doe, Susan, do not save it. Now, the way the setup works is we're using position
absolute. So that's why we can only see the last one. Again, don't worry, of course, we'll
fix that. And then right after the slider container, so don't place it within the container,
set up a button container. So take a look at where I have my slider container where
it ends, there it is. And then I'll set up another div with a class of btn container.
And then within this container, I'll have two buttons. One is going to have class of
pre button, and the other one will be next button.
And here I can just probably add a
type of button. And then like I said class, for the first one is going to be brief btn.
And in here, I'll just have a text of pre amount, of course, I'll copy and paste these
values around, where the second one, of course will be my next button. As far as the value,
it's also going to be next. So that should be our HTML setup. Awesome. Before we start
typing away JavaScript, I would want us to understand the general idea behind what we're
going to do with the JavaScript. Because that way, of course, it's going to be much more
easier to once we need to implement the actual logic. So the way the setup works is we have
the container. Now the learner has some kind of width, width and height. And it is positioned
relative, as you can see over here, and then each and every slide.
So there was a class
of slide is position absolute. And that's why you can only see the last one. So for
example, if I would delete my last slide or comment without whatever you'd want to do,
you'll see that and now we see the slide number three, because all of them use this position
absolute. So of course, the next slide covers the previous one. And all of them have this
width and height of 100%. So let me navigate back to my HTML uncomment.
This, and you know
what I will add here a div, because I think it's going to look a little bit better. So
place the image, the Susan Doe, and all that within the depth, because we're using here
grid. So I have display grid and place items in the center. So now it just looks a little
bit better. The way we'll set up everything in JavaScript, we'll just use positioning,
where at the moment, we have position absolute for all the slides correct. And of course,
now they're sitting one on top of each other. But what we will do is we will select our
elements, and now uncomment this but of course, again, we will do this using JavaScript, but
I'm just showing you the manual setup.
So for example, if you add for the first child
to be left zero, so what is the left location, then for the second one, you'd add 102 103
100, then of course, you would see the line. Now why you don't see the line right now is
because in the container, we have this orange glow hidden. So if I'll comment this out,
you'll see in your project, a long line of these items. So what's happening right now,
all of them are positioned absolute. Yeah, that is correct. But then the first one, as
you can see, has this left of zero, then the second one will be 100, then 200, and then
300. And using JavaScript, we'll just check what is the index of the actual item. And
then we'll place either it's 100 203 100. So that way, of course, we don't need to do
this manually, because at the moment, I'm just doing this manually in a CSS, but what
we'll have is this container, there will always be displayed.
And then we'll have these long
line of whatever items we have. So at the moment, I have four, but I can place here
55,000 doesn't really matter. And then of course, as I will be clicking on buttons,
then we will just shift these items. And the way we'll ship those items. So for this slide,
we have transformed property, and we'll set it equal to A translate x. So that moves the
item in the x direction. Now one gotcha is that negative will move it to the left, and
then positive value will move to the right. So now I'm selecting all the slides. And I'm
just gonna say you know what, more would 100% to the left. So in here I need to go with
a negative value, and then 100%. Now what does mean 100% so whatever is the width of
the item, just shift 100% to the left. And as you can see, once I do notice, all the
items shifted. And that's why right now we're showing in the container course the item number
two, and then of course we can increase these routes.
So refile shift 200, then of course,
I'm moving more to the left, then I go to the end of the slideshow. And if we want to
move back, that's all we have to do, we just go to 100. And then eventually we'll go to
zero. Now, of course, the way our setup will be, he is that overflow will be hidden. So
that's why we'll only be able to see the item.
So that's why once we navigate down, for example,
if I want to move back to 00, and now I'm showing slide number one. Now, if you'd want
to increase again, we are going negative value, that's something you actually need to remember.
Now, of course, I'm showing second item. And I can go to third, and on and on and on. And
the reason why we have these nice transitions, as we're switching from one slide to another
one is because on slide class, we have transition property with these values.
So I'm targeting
all the properties. And the time that I have right now is 0.1 in five seconds. So if you'll
change this to for example, two seconds, and you'll scroll down and again manually for
the time being changed these values, for example, negative 300, you'll see that it takes two
seconds to switch from one slide to another one. Again, this is just to show you in manual
setup, of course, we'll do all of this using JavaScript. But this should give you an a
good idea of what we'll do. So that way, it should help you to understand when we set
up all the functionality, okay, and once we understand the general setup, course, it's
time to do our magic in the app js. And we'll start by selecting three things, I would want
to select all my slides. So I'll use query selector all for that. So const slides and
not is equal to document, then query selector all that should give me my node list. And
I'm looking for my slides, then I would also want to target a next button.
So for that,
I have the variable of next btn. And then of course, I need to target my class, my class
name is next btn. And then I'll copy and paste and just change these values around, where
instead of Next I'll be looking for the previous one. And the same will work or here. Now once
I have my previous button, next button on the slides, I'll start by iterating over the
slides. And remember how we manually added this left. While now we'll do that using JavaScript.
So depending on where the item is sitting, we'll move either 01 100 203 100. And of course,
that will give us a good idea. Or we can add as many slides as we want because now we're
using JavaScript, not manually setting this up in this CSS. Now we have our nodelist.
Awesome, and we already know that we can just iterate over it using forage, we have our
callback function, within a callback function, we can access each and every item, or in this
case, we do need to have this optional index.
Because I don't want to check while we're
in the actual node list, this item is sitting, so I have my index. And then for the slide,
I want to add this left property. So I need to target my style style property and then
within a star property, I have an option of left, so have dot and then once I have targeted
my left property, I would want to set up some kind of value. Now for this value, I would
want to set up a expression. So that's why I will use the template string. In order to
access that expression, we do need to use dollar sign and then curly braces.
And then
in here, I'll grab my index, multiplied by 100 and then add this percent. So again, we're
doing exactly the same like we had in the manual setup. Now the difference is that I'm
using my index. So for the first item is going to be zero, because my index is going to be
zero, then for the second item, almost 100% than 200 300. Let me save it. And of course,
I should see my first item. Now if you want to see the whole list, just navigate up to
your slider container.
And just remove that overflow hidden for the time being. Once you
remove it again, you'll see a long list of items. And again, what's really cool about
using JavaScript is this fact that if I navigate to my HTML, and grab my slide, now let me
check where it is one grands, because usually I have a tendency of making some kind of dumb
mistake. So I have my slide, I'll change this one to five. And you'll see that I can add
as many items as I would want. And what I'll have is these items in a list. Okay, so that's
the cool thing about using JavaScript because you don't have to run back to style CSS, essentially
just these manually.
So you don't need to count how many items you have. You're just
set up three lines of code and you Good to go. Beautiful once we have slides in one line.
Now of course, we would want to set up the functionality, where we can control which
slide is shown, and which ones are hidden. And we'll start with our first option, where
we will just navigate either to the end of the slideshow, or back to the beginning of
the slideshow. And we'll start by setting up some kind of counter. So let counter, the
counter will be zero at the very beginning, when I want to target two things, the buttons,
next button and pre button to add event listener, I'm listening for a click event than I am
my function, of course, and within the callback function, I'll just start by either increasing
or decreasing the counter.
So for next button out one increase, and then for the pre course,
I will decrease. So in here, instead of next button, I'm looking for my preferred button,
and then counter also will decrease. Alright, we have our awesome setup. Now what? Well,
I would want to set up a function that just grabs the value of the counter and add the
Translate value to all the slides.
Because remember, when we were adding this negative
100, negative 200, we were essentially just moving slides, either 100% or the left, or
200, or 300. So that's how we were able to navigate through our slideshow. So what I
would want to do each and every time I increment 100, iterate over my slides, and then add
this using JavaScript. So we did our first setup, where we placed them in a line. Now
we'll do this line of CSS. So we have some kind of function, I'm going to name y and
one curse. So run. For the time being, we will leave out the logic where we either navigate
to the end of the slideshow or beginning, we'll add that in a second. I'll just would
want to start by grabbing all my slides again, I have for each, then I'll have my function,
my callback function, I'll access each and every slide as a parameter off slide.
And
then I'll use my style property again. So style. And then instead of left, I'm looking
for trans form. And again, this is going to be a template string, where I have my translate
x and then parentheses, and then within the parentheses, I'll set it equal to negative,
because I would want to move them to the left, of course, and then I have my expression.
That's why my template string, and I'll just multiply my counter.
So whatever is going
to be the counter by the 100. So I'll say multiply by 100. And just make sure you add
here, the percent. Now let's save it. And let's take a look at on a bigger screen. So
as you can see, once I press, nothing happens, okay, why nothing is happening with me see
my cursor, of course, I'm not invoking the cursor. So we will need to invoke it right
after we increase or decrease the counter. So let me invoke it first in here, as well
as in my pre button. Let's save it. And now let's just get out on a bigger screen. Once
I click Check it out. Now of course, I'm sharing my trends latex. As you can see, I'm just
moving. Now, of course, we still need to fix the fact that we eventually just run out of
slides. But if you want to check it out your dev tools, you'll nicely see all the elements
are getting this translate added to them. So in the pre check it out.
Now, of course,
we're just decreasing this value. So we start with this zero, because our counter is zero,
correct. As you can see, our counter is zero. Now of course, we just invoke it once we run
it, but since we navigated back to the beginning where the counter was zero, that's where we're
translating only 0%. So we start with this one. And then once I click now my counter
is one, and I multiply the one by 100. And then add to all the styles. So all the slides
just move 100% to the left, then I add one more time, and now all the slides move 200
to the left. Now of course, we do need to fix the fact that eventually we just run out
of slides. So what we can do, well, we'll start with our first setup where we just either
scroll or you can say circle back to the end of the slideshow, or beginning one. And the
way we do that is first by adding some kind of comment since there's going to be two setups.
Working with slides. That's our first option.
And then I'm just going to say if the counter
is equal to slide length, so in our case, that would be five since we have five slides.
Then I'll set the counter equal to zero. Now if the counter is less than one That means
that odd want to navigate back to the end of the slideshow. In order to access that,
now, first of all, I would want to set up some kind of error statement. So if the counter
is less than one, then I would want to set my counter equal to slides, length minus one.
Okay, because again, arrays are zero, based.
So that's why if we would want to access the
last one, we would need to go with slide length minus one. Now, of course, I would want to
also hide the rest of the slides. That's why I'll navigate back to my CSS, and also this
to overflow him. And now nicely see that we go one slide, second, third, fourth, fifth.
So we're at the end of the slideshow. That is the case, we just nicely Navigate back
on our counter is set back to zero. Now, if I'm at the beginning of the slideshow, and
I would want to see the end, I just press previous. And now I can see my previous slides.
That would be our first setup, where we just circulate around our slideshow. And once we
have our first setup, I want to show you the second one, where do we just hide or show
the brief and the next buttons. Now I'll leave this one for your reference.
So just comment
out and out want to hide the Preview button right from the get go. So once the application
loads, we will hide our pre button. And we can do that by pre button. That is of course
our variable style display. And that is going to be equal to none. Okay, we're at the bottom
awesome. And then in here, we'll set up another set of if and else statements. Now out here
a comment of working, we bought buttons, just so we know what we're doing. And we'll start
with our next button. So here, I'll say if counter is less than slides length minus one,
that is of course the value for my last slide, then please show the Next button.
So next
button style, then display, and it is equal to block. If counter is less than my last
slide value, then please show it. Otherwise, please hide the Next button. So go next button
style display. And that is equal to none. So now you'll see that as you're clicking
on next, once you get to the end of the slideshow, you just hide the Next button. So the user
doesn't even have the option of looking for the slider doesn't exist, of course. And I'll
do the same thing for my prevx where I'm going to say if counter. If counter is bigger than
zero, awesome, then please show the pre button. Otherwise I'd set it up in here pre button,
display equal to block of course. Let's set up another else. And in this case, I'm going
to say else. And then of course, I'll hide it.
So pre button style display to none. So
right from the get go, we hide our pre button. Awesome. And once we navigate to a second
slide, of course, our counter value is one, so it is bigger than zero then we show it.
And then once we navigate back, again, we hide it because we have if the counter value
is not bigger than zero, and we just had our preview button. So now in this case, we can
navigate to the end of the slideshow, we hide our next button. Beautiful, and we can only
Navigate back once we navigate to the beginning of the slideshow, we hide our pre button.
So now we can only navigate to the next slide.
So this is going to be our second setup. Hopefully,
everyone enjoyed the project. And I hope to see you in our next project..