WEBVTT 1 00:00:01.400 --> 00:00:02.730 So in this section, 2 00:00:02.730 --> 00:00:05.490 we're gonna build yet another project. 3 00:00:05.490 --> 00:00:08.093 So let's start by taking a look at it. 4 00:00:09.600 --> 00:00:12.070 So over the last two sections, 5 00:00:12.070 --> 00:00:13.500 we built the application 6 00:00:13.500 --> 00:00:16.268 for a fictional bank called Bankist. 7 00:00:16.268 --> 00:00:18.380 Now in this section, 8 00:00:18.380 --> 00:00:22.260 we're gonna be building the kind of marketing website 9 00:00:22.260 --> 00:00:24.740 for the same fictional bank. 10 00:00:24.740 --> 00:00:27.157 So again, that's Bankist is here. 11 00:00:27.157 --> 00:00:30.290 And so let's take a look at it. 12 00:00:30.290 --> 00:00:31.280 Now, of course, 13 00:00:31.280 --> 00:00:35.260 all of this HTML and CSS that you see here is already 14 00:00:35.260 --> 00:00:37.909 provided for you in the starter files, 15 00:00:37.909 --> 00:00:40.860 but all the effects that you see here going on 16 00:00:40.860 --> 00:00:43.449 will be built by us throughout the section. 17 00:00:43.449 --> 00:00:47.070 So maybe you already saw this section here, 18 00:00:47.070 --> 00:00:49.524 fading in and moving a little bit, 19 00:00:49.524 --> 00:00:53.703 and also notice here what happens with these images. 20 00:00:55.680 --> 00:00:59.160 So it's basically lazy loading these images 21 00:00:59.160 --> 00:01:00.483 as we scroll to them. 22 00:01:02.780 --> 00:01:06.756 So here you saw also this section fading in, 23 00:01:06.756 --> 00:01:11.550 maybe you already also noticed that the menu bar 24 00:01:11.550 --> 00:01:14.070 has become sticky here at the top. 25 00:01:14.070 --> 00:01:16.520 And when we hover over each of these links, 26 00:01:16.520 --> 00:01:19.920 then all the other links and get great out. 27 00:01:19.920 --> 00:01:23.893 You'll see. And so all of that is done using JavaScript. 28 00:01:25.170 --> 00:01:28.958 And also here you get this nice popup window. 29 00:01:28.958 --> 00:01:31.520 And so again, that's JavaScript. 30 00:01:31.520 --> 00:01:36.520 Here we have this component, which is a tapped component, 31 00:01:36.540 --> 00:01:40.290 which is pretty common to see in modern user interfaces. 32 00:01:40.290 --> 00:01:43.133 And so you will learn how to do this as well. 33 00:01:43.976 --> 00:01:46.140 Then again, this section here, 34 00:01:46.140 --> 00:01:49.820 sliding in and here we have the coolest component 35 00:01:49.820 --> 00:01:52.743 of all of them, which is this slider. 36 00:01:52.743 --> 00:01:55.236 So as we click here, you see, 37 00:01:55.236 --> 00:01:59.674 basically we have these three slides with these three dots 38 00:01:59.674 --> 00:02:03.521 and we are circling through them as we click these arrows 39 00:02:03.521 --> 00:02:05.093 or even these dots. 40 00:02:06.400 --> 00:02:09.967 So these dots, they work just the same as the arrows. 41 00:02:09.967 --> 00:02:12.800 And I'm sure you have seen a slider like this. 42 00:02:12.800 --> 00:02:15.950 And so now you will learn one way of building 43 00:02:15.950 --> 00:02:17.492 a really cool slider. 44 00:02:17.492 --> 00:02:19.453 Yeah, just like this one. 45 00:02:20.620 --> 00:02:23.813 And here again, we will have the popup window. 46 00:02:25.260 --> 00:02:27.300 And of course, if we click here, 47 00:02:27.300 --> 00:02:31.300 then we get a smooth scrolling animation to that part 48 00:02:31.300 --> 00:02:36.300 of the page and the same here on this button now. Okay. 49 00:02:37.470 --> 00:02:40.090 So you'll see there are a lot of dynamic effects 50 00:02:40.090 --> 00:02:42.010 going on here on this page. 51 00:02:42.010 --> 00:02:44.774 And so I hope you're really excited for this project 52 00:02:44.774 --> 00:02:48.370 because you will learn how to do all of them. 53 00:02:48.370 --> 00:02:49.805 And these are for sure, 54 00:02:49.805 --> 00:02:53.169 some of the most important and commonly used effects 55 00:02:53.169 --> 00:02:56.110 that you will see on all websites. 56 00:02:56.110 --> 00:02:59.150 And so that's why I decided to include this project 57 00:02:59.150 --> 00:03:03.510 in the course so that you can learn how to do them yourself. 58 00:03:03.510 --> 00:03:07.270 I also tried to design a really nice and beautiful website, 59 00:03:07.270 --> 00:03:11.340 which looks like a real marketing page of a real company. 60 00:03:11.340 --> 00:03:13.543 And so if you include this in your portfolio, 61 00:03:13.543 --> 00:03:16.310 then I'm sure it will look really cool 62 00:03:16.310 --> 00:03:18.500 on your portfolio too. 63 00:03:18.500 --> 00:03:21.860 So I hope you liked this page, that you liked the effects 64 00:03:21.860 --> 00:03:23.330 that we're gonna implement, 65 00:03:23.330 --> 00:03:25.800 and that you're just as excited as I am 66 00:03:25.800 --> 00:03:28.113 to get started with this project. 67 00:03:29.350 --> 00:03:32.890 So anyway, please open up your starter files 68 00:03:32.890 --> 00:03:36.150 that I provided for this project. 69 00:03:36.150 --> 00:03:39.988 And so there you have this big HTML file 70 00:03:39.988 --> 00:03:42.764 that I will explain you as necessary, 71 00:03:42.764 --> 00:03:47.000 then this huge style sheet with hundreds of lines of code 72 00:03:47.000 --> 00:03:50.020 that I wrote just for this project. 73 00:03:50.020 --> 00:03:53.600 And then of course the script.js 74 00:03:53.600 --> 00:03:57.440 Now here, I already included the code for the modal window 75 00:03:58.480 --> 00:04:01.180 because this is actually exactly the code 76 00:04:01.180 --> 00:04:05.268 that we wrote before in one of the projects. Remember that? 77 00:04:05.268 --> 00:04:09.027 So this is exactly the same. And so if we start our project, 78 00:04:09.027 --> 00:04:12.451 it should actually already be working. 79 00:04:12.451 --> 00:04:17.451 So let's open up here our console live server. 80 00:04:20.490 --> 00:04:22.714 And so this is the page here. 81 00:04:22.714 --> 00:04:27.714 Now I'm seeing this page at, I think 75% now, 82 00:04:29.160 --> 00:04:33.930 because otherwise it looks really ugly, right? 83 00:04:33.930 --> 00:04:37.780 And at this point also nothing works yet as it did 84 00:04:37.780 --> 00:04:40.560 in the demo project because the JavaScript 85 00:04:40.560 --> 00:04:42.900 is simply not yet written. 86 00:04:42.900 --> 00:04:43.860 And so of course, 87 00:04:43.860 --> 00:04:48.860 nothing works here, and everything looks a little bit weird. 88 00:04:50.700 --> 00:04:53.143 So let's go back to 75%, 89 00:04:53.143 --> 00:04:58.010 but what should already be working is this popup. 90 00:04:58.010 --> 00:05:00.010 So does modal window. 91 00:05:00.010 --> 00:05:03.509 And again, that is because it is exactly the same code 92 00:05:03.509 --> 00:05:05.493 that we already wrote before. 93 00:05:06.697 --> 00:05:09.280 Now, there are just two small changes 94 00:05:09.280 --> 00:05:11.130 that I want to do here in this code 95 00:05:11.130 --> 00:05:13.740 A very quick before we get started, 96 00:05:13.740 --> 00:05:14.584 the first one is, 97 00:05:14.584 --> 00:05:18.060 watch what happens if we click this button here, 98 00:05:18.060 --> 00:05:19.223 like in this position. 99 00:05:21.250 --> 00:05:23.970 So you'll see that the page scroll to back to the top 100 00:05:23.970 --> 00:05:27.833 and that is because, well, let me show you here. 101 00:05:29.210 --> 00:05:32.520 So that's because this is actually now a link 102 00:05:32.520 --> 00:05:35.260 and not a button and on the link 103 00:05:35.260 --> 00:05:39.090 when we have this hash here as the hyperlink. 104 00:05:39.090 --> 00:05:43.770 So as HRF, then that will make the page jump to the top. 105 00:05:43.770 --> 00:05:45.740 So that's the default behavior. 106 00:05:45.740 --> 00:05:49.688 When we click a link that has this hyperlink here. 107 00:05:49.688 --> 00:05:51.870 And so if that is the default, 108 00:05:51.870 --> 00:05:56.670 we already know a way of preventing debt default, right? 109 00:05:56.670 --> 00:05:58.093 Do you remember how? 110 00:05:59.010 --> 00:06:02.580 Well, all we need here is in dysfunction, 111 00:06:02.580 --> 00:06:06.601 which is the one responsible for opening this model, 112 00:06:06.601 --> 00:06:09.240 is to get access to the event. 113 00:06:09.240 --> 00:06:13.240 And then on the event we call prevent default. 114 00:06:16.033 --> 00:06:18.928 So hopefully you remember that from earlier. 115 00:06:18.928 --> 00:06:23.928 So let's see again, and this time, the page didn't jump. 116 00:06:26.164 --> 00:06:27.500 So we fixed that. 117 00:06:27.500 --> 00:06:30.970 And now the second part that I want to quickly fix 118 00:06:30.970 --> 00:06:33.560 is getting rid of this old school 119 00:06:33.560 --> 00:06:35.760 for a loop that we have here, 120 00:06:35.760 --> 00:06:39.130 because now we know of a better way of doing this, 121 00:06:39.130 --> 00:06:41.678 which is the, for each loop. 122 00:06:41.678 --> 00:06:46.244 So we have this buttons open modal, which is a node list. 123 00:06:46.244 --> 00:06:47.654 And it's a node list 124 00:06:47.654 --> 00:06:52.654 because it's the result of querySelectorAll, all right. 125 00:06:52.671 --> 00:06:56.670 Now remember that a note list is not an array, 126 00:06:56.670 --> 00:07:00.387 but still it does have default for each method. 127 00:07:00.387 --> 00:07:04.330 So it doesn't have most of the methods that erase have, 128 00:07:04.330 --> 00:07:06.950 but for each is one of the methods 129 00:07:06.950 --> 00:07:09.540 that in node list has as well. 130 00:07:09.540 --> 00:07:12.200 And so let's use that now. 131 00:07:12.200 --> 00:07:16.363 So buttons open modal dot for each. 132 00:07:17.197 --> 00:07:19.900 And so remember that we did this loop here 133 00:07:19.900 --> 00:07:21.120 in the first place, 134 00:07:21.120 --> 00:07:23.580 because we wanted to add an event listener 135 00:07:23.580 --> 00:07:25.520 to each of the buttons. 136 00:07:25.520 --> 00:07:26.470 So in our case, 137 00:07:26.470 --> 00:07:30.173 that's this button here and also this one down here. 138 00:07:31.960 --> 00:07:33.150 So this one, 139 00:07:33.150 --> 00:07:35.600 well, for some reason it's not working right now, 140 00:07:36.575 --> 00:07:39.473 but let's first finish this. 141 00:07:40.540 --> 00:07:41.470 All right. 142 00:07:41.470 --> 00:07:43.630 So anyway, we want to attach 143 00:07:43.630 --> 00:07:45.723 an event listener to this button 144 00:07:45.723 --> 00:07:48.981 and to this one here at the same time. 145 00:07:48.981 --> 00:07:51.213 And so that's why we did this loop, 146 00:07:51.213 --> 00:07:53.485 but now we have a better way of doing it, 147 00:07:53.485 --> 00:07:56.760 which is by simply providing a callback function here, 148 00:07:56.760 --> 00:07:58.070 two for each. 149 00:07:58.070 --> 00:08:00.203 So each one will be a button. 150 00:08:01.220 --> 00:08:02.834 And then on that button, 151 00:08:02.834 --> 00:08:06.020 we will simply add an event listener. 152 00:08:06.020 --> 00:08:08.653 And so that's simply this part. 153 00:08:12.410 --> 00:08:15.290 And so now, this is exactly the same as this, 154 00:08:15.290 --> 00:08:17.373 but in a lot easier way. 155 00:08:18.420 --> 00:08:19.570 So let's give it a save 156 00:08:22.250 --> 00:08:25.513 and that works and let's check the other one as well. 157 00:08:26.990 --> 00:08:27.823 90. Yeah. 158 00:08:28.800 --> 00:08:30.870 So this one works as well. 159 00:08:30.870 --> 00:08:31.703 And so with this, 160 00:08:31.703 --> 00:08:35.652 our code is a little bit nicer and adapted to this page. 161 00:08:35.652 --> 00:08:39.547 All right. So we are ready to get started in the section 162 00:08:39.547 --> 00:08:42.470 and we will do that right in the next video, 163 00:08:42.470 --> 00:08:43.810 by learning a little bit more 164 00:08:43.810 --> 00:08:46.923 about how the DOM actually works behind the scenes.