1
00:00:02,490 --> 00:00:08,460
So now that we had a thorough look at all the core building blocks or all the basics that you need to

2
00:00:08,460 --> 00:00:14,870
know in order to work with the DOM, work with this HTML page from inside your Javascript code,

3
00:00:14,880 --> 00:00:21,780
I also want to apply some of these things in a more realistic project because thus far in this module,

4
00:00:21,780 --> 00:00:27,240
we always played around in the console which is great to quickly get a feeling for what you can select

5
00:00:27,240 --> 00:00:29,640
and which way and how you can work with things

6
00:00:29,670 --> 00:00:36,120
but now let's take the things we learned and put them into the context of a more realistic project.

7
00:00:36,390 --> 00:00:41,950
And for this, attached you find some starting files, an index.html file and an assets folder,

8
00:00:41,970 --> 00:00:47,130
that's what you get when you extract the attached file, you get some basic styles in there, get an empty

9
00:00:47,130 --> 00:00:50,880
app.js file because now, there is no vendor.js file,

10
00:00:50,880 --> 00:00:57,420
now we'll write all the Javascript logic, also for communicating with the web page on our own and then

11
00:00:57,420 --> 00:01:03,810
we get this index.html file here with a basic HTML skeleton that in the end leads to this page

12
00:01:04,260 --> 00:01:09,810
and here, we're going to build a very simple application where we can click add movie, currently nothing

13
00:01:09,810 --> 00:01:16,590
happens there, we'll of course change that and when we click this, a modal, so an overlay should open up

14
00:01:16,890 --> 00:01:20,180
where we can enter the title of our favorite movie,

15
00:01:20,370 --> 00:01:26,940
add an image and also give it a rating and then we'll display a list of the movies here instead of

16
00:01:26,940 --> 00:01:34,950
this box which we currently see and we'll also be able to click on these items, so click on the movies

17
00:01:35,400 --> 00:01:40,060
and then remove them if we want to get rid of them after we added them,

18
00:01:40,080 --> 00:01:46,800
so a lot of interaction going on. We'll also dynamically create and remove elements, we'll have to connect

19
00:01:46,800 --> 00:01:52,720
to a lot of elements on the page, so there will be plenty of opportunities to apply what we learned.

20
00:01:53,070 --> 00:01:57,810
So with that, let's not lose any time and dive right into it, just one more word,

21
00:01:58,050 --> 00:02:04,860
if you feel like it, of course you can always pause in this or in the next lectures and try out some

22
00:02:04,860 --> 00:02:11,070
of the next steps on your own or when I start with a certain step, pause and try that step on your own.

23
00:02:11,070 --> 00:02:13,890
It's not a must do but it might be a nice practice.