Original subtitles

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.