Jonas: So in this section,
we're gonna build yet another project.
So let's start by taking a look at it.
So over the last two sections,
we built the application
for a fictional bank called Bankist.
Now in this section,
we're gonna be building the kind of marketing website
for the same fictional bank.
So again, that's Bankist is here.
And so let's take a look at it.
Now, of course,
all of this HTML and CSS that you see here is already
provided for you in the starter files,
but all the effects that you see here going on
will be built by us throughout the section.
So maybe you already saw this section here,
fading in and moving a little bit,
and also notice here what happens with these images.
So it's basically lazy loading these images
as we scroll to them.
So here you saw also this section fading in,
maybe you already also noticed that the menu bar
has become sticky here at the top.
And when we hover over each of these links,
then all the other links and get great out.
You'll see. And so all of that is done using JavaScript.
And also here you get this nice popup window.
And so again, that's JavaScript.
Here we have this component, which is a tapped component,
which is pretty common to see in modern user interfaces.
And so you will learn how to do this as well.
Then again, this section here,
sliding in and here we have the coolest component
of all of them, which is this slider.
So as we click here, you see,
basically we have these three slides with these three dots
and we are circling through them as we click these arrows
or even these dots.
So these dots, they work just the same as the arrows.
And I'm sure you have seen a slider like this.
And so now you will learn one way of building
a really cool slider.
Yeah, just like this one.
And here again, we will have the popup window.
And of course, if we click here,
then we get a smooth scrolling animation to that part
of the page and the same here on this button now. Okay.
So you'll see there are a lot of dynamic effects
going on here on this page.
And so I hope you're really excited for this project
because you will learn how to do all of them.
And these are for sure,
some of the most important and commonly used effects
that you will see on all websites.
And so that's why I decided to include this project
in the course so that you can learn how to do them yourself.
I also tried to design a really nice and beautiful website,
which looks like a real marketing page of a real company.
And so if you include this in your portfolio,
then I'm sure it will look really cool
on your portfolio too.
So I hope you liked this page, that you liked the effects
that we're gonna implement,
and that you're just as excited as I am
to get started with this project.
So anyway, please open up your starter files
that I provided for this project.
And so there you have this big HTML file
that I will explain you as necessary,
then this huge style sheet with hundreds of lines of code
that I wrote just for this project.
And then of course the script.js
Now here, I already included the code for the modal window
because this is actually exactly the code
that we wrote before in one of the projects. Remember that?
So this is exactly the same. And so if we start our project,
it should actually already be working.
So let's open up here our console live server.
And so this is the page here.
Now I'm seeing this page at, I think 75% now,
because otherwise it looks really ugly, right?
And at this point also nothing works yet as it did
in the demo project because the JavaScript
is simply not yet written.
And so of course,
nothing works here, and everything looks a little bit weird.
So let's go back to 75%,
but what should already be working is this popup.
So does modal window.
And again, that is because it is exactly the same code
that we already wrote before.
Now, there are just two small changes
that I want to do here in this code
A very quick before we get started,
the first one is,
watch what happens if we click this button here,
like in this position.
So you'll see that the page scroll to back to the top
and that is because, well, let me show you here.
So that's because this is actually now a link
and not a button and on the link
when we have this hash here as the hyperlink.
So as HRF, then that will make the page jump to the top.
So that's the default behavior.
When we click a link that has this hyperlink here.
And so if that is the default,
we already know a way of preventing debt default, right?
Do you remember how?
Well, all we need here is in dysfunction,
which is the one responsible for opening this model,
is to get access to the event.
And then on the event we call prevent default.
So hopefully you remember that from earlier.
So let's see again, and this time, the page didn't jump.
So we fixed that.
And now the second part that I want to quickly fix
is getting rid of this old school
for a loop that we have here,
because now we know of a better way of doing this,
which is the, for each loop.
So we have this buttons open modal, which is a node list.
And it's a node list
because it's the result of querySelectorAll, all right.
Now remember that a note list is not an array,
but still it does have default for each method.
So it doesn't have most of the methods that erase have,
but for each is one of the methods
that in node list has as well.
And so let's use that now.
So buttons open modal dot for each.
And so remember that we did this loop here
in the first place,
because we wanted to add an event listener
to each of the buttons.
So in our case,
that's this button here and also this one down here.
So this one,
well, for some reason it's not working right now,
but let's first finish this.
All right.
So anyway, we want to attach
an event listener to this button
and to this one here at the same time.
And so that's why we did this loop,
but now we have a better way of doing it,
which is by simply providing a callback function here,
two for each.
So each one will be a button.
And then on that button,
we will simply add an event listener.
And so that's simply this part.
And so now, this is exactly the same as this,
but in a lot easier way.
So let's give it a save
and that works and let's check the other one as well.
90. Yeah.
So this one works as well.
And so with this,
our code is a little bit nicer and adapted to this page.
All right. So we are ready to get started in the section
and we will do that right in the next video,
by learning a little bit more
about how the DOM actually works behind the scenes.