1
00:00:02,310 --> 00:00:08,310
So now that we collected all these inputs here, I want to store them.

2
00:00:08,310 --> 00:00:13,420
So we'll add a new constant, movies and there will be an empty array initially

3
00:00:13,520 --> 00:00:19,080
and I want to add objects to that array where each object represents a movie, that will not on its own

4
00:00:19,080 --> 00:00:24,390
make it visible on the screen but you often in the applications you build also want to manage your

5
00:00:24,390 --> 00:00:29,820
data here in Javascript and not just as HTML elements on the screen so you also can work with them

6
00:00:29,820 --> 00:00:34,530
here in Javascript and not always need to select elements on the DOM and work with that because that

7
00:00:34,530 --> 00:00:41,440
is not great for performance and also means that you need to write unnecessary code. So here, after checking

8
00:00:41,440 --> 00:00:47,320
the inputs, I want to add an element to movies and that will be my new movie which is a Javascript object

9
00:00:47,320 --> 00:00:47,660
here

10
00:00:47,680 --> 00:00:54,040
and in this Javascript object, I want to have let's say the title and there, I'll use the title value.

11
00:00:54,070 --> 00:01:00,280
I want to have the image and that will be the imageUrl value and I want to add the rating and

12
00:01:00,280 --> 00:01:06,070
that will be the rating value. Of course, which key names you pick here - title, image, rating, that is totally

13
00:01:06,070 --> 00:01:07,400
up to you.

14
00:01:07,420 --> 00:01:13,090
Well and now we can reach out to the movies array we just added and push the new movie onto that array, that

15
00:01:13,090 --> 00:01:15,310
will add it there.

16
00:01:15,480 --> 00:01:19,510
Now we can console log movies here to see whether that worked

17
00:01:19,710 --> 00:01:29,920
and now I also want to close my modal and therefore we can of course call toggleMovieModal here.

18
00:01:29,940 --> 00:01:38,070
Now with that saved, if we go back, reload here and now try this out and add this awesome movie, Javascript

19
00:01:38,430 --> 00:01:45,950
The Complete Guide here, some image, later I will add a real URL here,

20
00:01:45,950 --> 00:01:49,910
right now we don't have a place to show the image anyway so doesn't matter

21
00:01:50,000 --> 00:01:54,890
and then here, a rating of five and I click add, indeed here we see an array, the modal also closed and

22
00:01:54,890 --> 00:01:57,800
there we got this object with the data we entered.

23
00:01:57,800 --> 00:02:03,050
Now a problem we'll have is that if I open this again, our old input is still there, the same by the way

24
00:02:03,200 --> 00:02:08,830
if we enter something and then we decide to cancel, what we entered is still there.

25
00:02:08,840 --> 00:02:15,030
So typically when we cancel and also when we succeed, we want to clear the inputs and that is therefore

26
00:02:15,030 --> 00:02:17,430
something I also want to implement here.

27
00:02:17,750 --> 00:02:28,160
I'll add a new function, clear inputs or clear movie inputs and in this function, I just want to use

28
00:02:28,160 --> 00:02:30,020
my inputs here,

29
00:02:30,140 --> 00:02:35,230
so the elements stored in the user inputs constant and clear the value.

30
00:02:35,420 --> 00:02:41,720
Now for that, we can say user inputs zero value equal to an empty string, that simply sets the value back

31
00:02:41,720 --> 00:02:44,460
to an empty string and that's exactly what I want

32
00:02:44,690 --> 00:02:54,740
or a more dynamic solution, we add a for loop and go through all the user inputs of user inputs,

33
00:02:55,070 --> 00:03:00,560
so we loop through all these user input elements and then for each of those, we say user input value

34
00:03:00,680 --> 00:03:06,650
equal to an empty string, that also works of course because user inputs is an array or an array-like

35
00:03:06,740 --> 00:03:10,610
object, a node list full of input elements,

36
00:03:10,610 --> 00:03:14,840
here we then loop through all input elements and we set this to be empty.

37
00:03:14,840 --> 00:03:19,930
So now we can use this here in the cancel movie handler, there I want to call clear movie input and

38
00:03:19,960 --> 00:03:26,340
in the add movie handler, there after toggling this, I also want to call clear movie input. Now with that,

39
00:03:26,340 --> 00:03:31,740
if we save that and reload, if we enter something there and we click cancel and I add this again or click

40
00:03:31,740 --> 00:03:44,330
this again, this is gone and if I try it again, Javascript The Complete Guide, some image, so if

41
00:03:44,370 --> 00:03:49,370
try adding this again, then if I click this again it's also gone.

42
00:03:49,370 --> 00:03:54,930
So now clearing works, storing it here in memory works in case you would want to work with it there.

43
00:03:54,950 --> 00:03:58,580
Now of course, it would also be nice to output it here on the screen.