1
00:00:02,190 --> 00:00:05,830
Now outputting movies on the screen involves two parts,

2
00:00:05,880 --> 00:00:13,480
for one I want to update the UI and for example remove this box here whenever we have movies,

3
00:00:13,560 --> 00:00:18,930
in addition of course, I want to add movie elements to this unordered list which I have here at the bottom.

4
00:00:19,560 --> 00:00:26,370
So I will need to select this section here and dynamically remove it from the DOM or simply hide it

5
00:00:26,370 --> 00:00:29,880
if we have movies and then add the movie here.

6
00:00:29,910 --> 00:00:33,020
So for that, there are different ways of doing this,

7
00:00:33,030 --> 00:00:38,220
as always I will add a new function here, let's say at

8
00:00:39,780 --> 00:00:43,790
the very top but it's really up to you where you add this and you could name it

9
00:00:43,800 --> 00:00:48,180
update UI because in the end that's what this function will be there for

10
00:00:48,180 --> 00:00:54,150
and here I want to check the length of the movies array and if it's longer than zero, so if it's not

11
00:00:54,150 --> 00:01:00,690
empty, then I want to get rid of this section otherwise I want to add this section again. So we'll need

12
00:01:00,690 --> 00:01:01,850
access to that section,

13
00:01:01,860 --> 00:01:06,060
conveniently it has an ID by which we could select it. So therefore in app.js,

14
00:01:06,150 --> 00:01:08,420
we can add a new constant here,

15
00:01:11,060 --> 00:01:19,640
entry text section or whatever you want to name it and use document get element by ID and use that

16
00:01:19,640 --> 00:01:22,640
ID here to get access to the entire section

17
00:01:22,640 --> 00:01:25,790
and then here I'll add a check and check if movies length

18
00:01:29,080 --> 00:01:35,090
is equal to zero, so if it's empty, then I want to show it,

19
00:01:35,110 --> 00:01:44,380
else we can go to the entry text section here and add a style where we set display to none for example.

20
00:01:44,380 --> 00:01:48,820
I have no CSS class which I could toggle here, so we can use good old inline styles to set this

21
00:01:48,820 --> 00:01:49,720
to none,

22
00:01:49,720 --> 00:01:55,540
if the length of the movies is zero, then I want to set this to block. Now update UI should be executed

23
00:01:55,540 --> 00:01:56,820
whenever we added a movie,

24
00:01:57,760 --> 00:02:00,810
so here I will call update UI

25
00:02:01,060 --> 00:02:07,060
and that alone should already have the effect that if I quickly add some input here and I click add,

26
00:02:07,150 --> 00:02:08,450
this box is gone.

27
00:02:08,470 --> 00:02:14,500
It's not technically gone if we have a look at the elements, we see at the bottom in main,

28
00:02:14,590 --> 00:02:20,380
it's still there in the DOM but I added this inline style. So that's working,

29
00:02:20,380 --> 00:02:25,520
now let's also make sure we add the movie element to the screen so that we can see a list of movies

30
00:02:25,630 --> 00:02:33,710
and for that, I'll add yet another new function which I'll name add new movie element or render new movie

31
00:02:33,770 --> 00:02:38,240
element to make it really clear that this will be a function that impacts the DOM and what we see on

32
00:02:38,240 --> 00:02:40,050
the screen, name is up to you

33
00:02:40,070 --> 00:02:44,060
and now to this function I expect to get some inputs,

34
00:02:44,060 --> 00:02:52,880
my movie object for example or the individual parts I need, for example the title, the imageUrl

35
00:02:52,970 --> 00:03:01,770
and the rating and then with that, we can render this new element here because now with that, here we

36
00:03:01,770 --> 00:03:08,640
can create a new element, new movie element and here I'll name this element to make it really clear that

37
00:03:08,640 --> 00:03:16,170
here I hold that new movie element and create it with the help of document create element and then

38
00:03:16,250 --> 00:03:18,440
li because I'm going to inject it,

39
00:03:18,450 --> 00:03:23,850
I'm going to insert it in an unordered list and semantically, you should have list items, li elements in

40
00:03:23,850 --> 00:03:25,230
such lists.

41
00:03:25,230 --> 00:03:27,840
So that creates an empty list item in the end.

42
00:03:27,840 --> 00:03:34,740
Now on this list item, new movie element, we can add a class and I can do this with class name because

43
00:03:34,740 --> 00:03:36,570
I don't want to toggle it or anything like that,

44
00:03:36,570 --> 00:03:42,750
I just want to add hardcoded class names here and that's movie-element class which you'll find

45
00:03:42,750 --> 00:03:44,960
in app.css, here

46
00:03:44,970 --> 00:03:50,850
this class will basically style these elements in the list. So I add this here to the movie element, to the

47
00:03:50,850 --> 00:03:56,850
new movie element and now new movie element of course also should have some content inside of it, not

48
00:03:56,850 --> 00:04:01,660
just a list item of some text but actually with some structured HTML content

49
00:04:01,830 --> 00:04:07,020
and that will be content with which I don't need to interact, where I don't need to assign specific classes

50
00:04:07,020 --> 00:04:13,320
that change dynamically, so we can just use innerHTML to set the HTML content of that newly created

51
00:04:13,320 --> 00:04:16,460
element. That by the way is something we haven't done before,

52
00:04:16,590 --> 00:04:22,860
we certainly created elements but we haven't created an element to then change its innerHTML content

53
00:04:22,980 --> 00:04:24,380
but of course that's possible,

54
00:04:24,420 --> 00:04:26,320
it's a regular DOM object in the end,

55
00:04:26,370 --> 00:04:30,630
so of course you can also change and analyze and do whatever you want,

56
00:04:30,690 --> 00:04:32,870
its innerHTML content.

57
00:04:33,060 --> 00:04:37,440
So here, I'll set this to a string and I'll use back ticks so that I can actually use a multiline string

58
00:04:37,440 --> 00:04:43,570
here, simply for readability because it allows me to write HTML which is easier to read

59
00:04:43,710 --> 00:04:52,850
and now here inside of that movie, I will add actual content where I have a div and now that's why I

60
00:04:52,850 --> 00:04:58,610
use back ticks, I can write it like this which is easier to read, a div which should have a class or actually

61
00:04:59,180 --> 00:05:05,900
a class of movie-element__image, that simply is a class defined in app.css

62
00:05:06,600 --> 00:05:12,320
and in there, I want to have an image element which has a source where

63
00:05:12,320 --> 00:05:16,910
and now another advantage of the back ticks, where we can inject the value dynamically which of course

64
00:05:16,910 --> 00:05:24,620
should be our imageUrl and also an alt text for accessibility where we use the title as an alt text

65
00:05:24,620 --> 00:05:31,420
let's say, we don't need to assign any class here. I also want to have a sibling div to that first div

66
00:05:31,990 --> 00:05:34,050
which will also get a class,

67
00:05:34,120 --> 00:05:40,850
this gets a class of movie-element__info, make sure you never forget a closing

68
00:05:40,850 --> 00:05:46,470
quote here because that will be HTML code which was parsed in the end hence it should be valid HTML

69
00:05:46,520 --> 00:05:55,010
code and in that div here, we can add a h2 tag, opening and closing of course where I then inject the

70
00:05:55,250 --> 00:06:02,880
title, so I'm using the parameters I'm getting here and then also a paragraph, opening and closing,

71
00:06:02,890 --> 00:06:11,710
no CSS classes need to be attached, where I set rating and then slash 5 stars so that it shows as rating

72
00:06:11,770 --> 00:06:14,120
of a maximum of five stars.

73
00:06:14,200 --> 00:06:21,170
So that's the innerHTML of the movie element and now we can get access to that list here, to the

74
00:06:21,220 --> 00:06:26,800
unordered list which conveniently also has an ID which makes selecting it quite easy and then add

75
00:06:26,800 --> 00:06:28,310
that element.

76
00:06:28,360 --> 00:06:34,030
Now for this, we can again register or select this list up there but actually I'll only need it here in

77
00:06:34,030 --> 00:06:35,440
render movie element,

78
00:06:35,440 --> 00:06:42,370
so here I can get my list root or however you want to call it and I get it with document get element

79
00:06:42,370 --> 00:06:48,300
by ID and select the movie list here in this place and now this constant which I can use in this function

80
00:06:48,300 --> 00:06:55,450
since it's a local constant to this function can be used to then append or append child depending on

81
00:06:55,450 --> 00:06:59,150
the browser support you need the new movie element.

82
00:06:59,200 --> 00:07:03,040
So this now adds the new movie element to our list of movies.

83
00:07:06,140 --> 00:07:11,420
If we now do that, we just need to make sure that this gets called when we add a new movie,

84
00:07:11,420 --> 00:07:19,060
so here in add movie handler, I want to call render new movie element and I need to forward my data

85
00:07:19,370 --> 00:07:26,720
which I get from new movie, I want to forward the title, I want to forward the image and I also want to

86
00:07:26,720 --> 00:07:31,250
forward the rating of course to that render movie element function.

87
00:07:31,250 --> 00:07:39,600
So with that, make sure to reload the page and then let's add a new movie, Javascript The Complete Guide.

88
00:07:39,680 --> 00:07:42,610
Now I picked an image in Google image search for Javascript,

89
00:07:42,710 --> 00:07:45,500
give it a rating, click add and here it is,

90
00:07:45,530 --> 00:07:52,640
here is our new element added to the list and of course we can add another element, another movie and

91
00:07:52,760 --> 00:07:54,290
I'll just use the same image,

92
00:07:54,290 --> 00:07:56,240
of course you could use a different image,

93
00:07:56,360 --> 00:08:01,660
give it a rating of four and this now also looks quite decent here.

94
00:08:01,670 --> 00:08:03,680
So now we render these elements,

95
00:08:03,680 --> 00:08:04,820
we show them in the list,

96
00:08:04,820 --> 00:08:09,230
we also manage them here in our array which we don't really need for anything else but just so that

97
00:08:09,250 --> 00:08:15,540
we also have it here, doesn't hurt to manage this in other projects you might need, this Javascript data.

98
00:08:15,590 --> 00:08:21,710
Now of course, I also want to make sure that we actually can remove elements by clicking on them.