1
00:00:00,180 --> 00:00:00,730
Nice.

2
00:00:00,760 --> 00:00:07,490
And once we know what we're going to be building, then, of course, navigate back to the star project

3
00:00:07,980 --> 00:00:14,300
and Michael, I'm going to open up the entire terminal and I'm going to type Sheedy's show.

4
00:00:14,370 --> 00:00:21,840
How I want to navigate to a specific folder and folder that I'm looking for is a birthday reminder.

5
00:00:22,200 --> 00:00:23,970
And then, like I said, setup.

6
00:00:24,240 --> 00:00:30,570
And what's really cool interview code that I can just grab that folder and do the drag and drop again.

7
00:00:30,900 --> 00:00:33,120
So now I'm in the set up.

8
00:00:33,510 --> 00:00:34,050
Beautiful.

9
00:00:34,380 --> 00:00:42,450
And of course, once I'm here now, I would want to run NPM install to get all the dependencies and

10
00:00:42,450 --> 00:00:47,160
then all right away around 9:00 p.m. start to spin up the deficit.

11
00:00:47,700 --> 00:00:53,940
And of course, it's going to spring up here and my Web browser and I also have the bigger Web browser

12
00:00:53,940 --> 00:00:55,890
just in case if we would ever need it.

13
00:00:56,890 --> 00:01:01,900
And then I'm going to navigate to localhost 3000, which, of course, at the moment doesn't have anything

14
00:01:01,900 --> 00:01:02,350
in there.

15
00:01:02,800 --> 00:01:10,270
Now, one thing that I would want to showcase while the dependencies are being installed is that the

16
00:01:10,270 --> 00:01:16,620
idea from this project is coming from the site called UI Design Daily.

17
00:01:16,960 --> 00:01:20,620
And by the way, you read me, you can find the link.

18
00:01:20,860 --> 00:01:26,050
And what's really interesting, that it opened up in a bigger browser window, my local three thousand.

19
00:01:26,300 --> 00:01:28,540
Usually it does that on a smaller one.

20
00:01:28,840 --> 00:01:30,290
So let me just navigate here.

21
00:01:30,640 --> 00:01:34,960
Copy and paste and you'll notice that this is where I got the idea from.

22
00:01:35,770 --> 00:01:44,350
If you're interested in the site, it's a really cool site where the author is just sharing the design

23
00:01:44,350 --> 00:01:45,170
ideas.

24
00:01:45,730 --> 00:01:54,160
Now, as far as our project, like I said, all the files are already created for you as well as the

25
00:01:54,160 --> 00:01:56,430
imports and then, of course, plesiosaurs.

26
00:01:56,860 --> 00:02:02,650
Now, let me open up the localhost on a small browser window and of course, I can close my integrated

27
00:02:02,660 --> 00:02:03,130
terminal.

28
00:02:03,460 --> 00:02:07,660
And what you should see is a reminder project set up.

29
00:02:08,050 --> 00:02:13,660
If you don't see that one, of course, you need to make sure that you are in correct folder and that

30
00:02:13,660 --> 00:02:15,480
you're running the correct commands.

31
00:02:15,790 --> 00:02:24,820
Specifically, this project has data JS So this is going to be an array with all our people and each

32
00:02:24,820 --> 00:02:27,280
person is going to be represented by the object.

33
00:02:27,640 --> 00:02:27,910
Not now.

34
00:02:28,040 --> 00:02:28,870
Here we have the idea.

35
00:02:28,870 --> 00:02:31,780
We have the name age as well as the image.

36
00:02:32,110 --> 00:02:33,370
So that's going to be our list.

37
00:02:34,190 --> 00:02:40,960
Then we have the index where we import currently the app and then injected into our world.

38
00:02:41,260 --> 00:02:46,930
And then of course, I also have the list component where eventually I will display the list.

39
00:02:47,140 --> 00:02:53,800
And I know I already have mentioned this quite a few times, but all the components, so all the files

40
00:02:53,800 --> 00:02:59,380
that need the import, they are already provided just so we can avoid the repetition.

41
00:02:59,680 --> 00:03:05,430
And also as a result, we can add more functionality to our project.

42
00:03:05,680 --> 00:03:08,280
So let's get to work.

43
00:03:08,290 --> 00:03:16,480
And first, in the app Jass, I would just want to set up our static look so essentially no functionality.

44
00:03:16,480 --> 00:03:24,160
There's going to be no list or at least on display what actually implements and what components eventually

45
00:03:24,160 --> 00:03:25,920
will be part of our app.

46
00:03:26,260 --> 00:03:28,090
Not one quick side note.

47
00:03:28,090 --> 00:03:32,440
If you don't like the background color, just navigate in accessors.

48
00:03:32,710 --> 00:03:34,120
You'll find the Globalstar.

49
00:03:34,360 --> 00:03:38,710
So here we have some variables and you're looking for the body.

50
00:03:38,980 --> 00:03:41,770
And then notice I set it up as a variable.

51
00:03:42,010 --> 00:03:47,650
But if you want to change this around to some kind of different color, just change the value for the

52
00:03:47,650 --> 00:03:48,130
background.

53
00:03:48,310 --> 00:03:54,490
And then of course it is not going to be a pink background for our whole project.

54
00:03:54,760 --> 00:03:57,190
So back to our objets.

55
00:03:57,430 --> 00:04:04,720
And then in here, as far as are there moments, I'm going to go with mine and then in the main element,

56
00:04:04,900 --> 00:04:11,320
I'm going to place a section with a class of container than inside the container.

57
00:04:11,680 --> 00:04:17,080
There's going to be a hearing three which eventually will display, well, how big is our list?

58
00:04:17,380 --> 00:04:24,340
But for now, I will just have this manually where I'll say zero and I'll go with birth.

59
00:04:25,270 --> 00:04:33,010
Days and then today, OK, let's separate, we should have something like this on screen, and then

60
00:04:33,010 --> 00:04:40,180
of course, let's let's play our last component, which at the moment shouldn't have anything besides

61
00:04:40,180 --> 00:04:43,660
the list components or adding to with less component.

62
00:04:43,850 --> 00:04:46,230
And of course, it is already important in the app.

63
00:04:46,510 --> 00:04:54,100
So let me close out my component and then also I would want to push my button to clear my list.

64
00:04:54,310 --> 00:05:00,340
So we go here we button than we had right away a on click.

65
00:05:00,550 --> 00:05:04,890
But of course that unclick won't do anything, it's just going to have a console.

66
00:05:05,530 --> 00:05:07,390
So let's go here with one function.

67
00:05:08,650 --> 00:05:16,840
And let's write log on and you collect me, collect me, OK, beautiful, and then, of course, we

68
00:05:16,840 --> 00:05:18,640
need to remove the semicolon.

69
00:05:18,940 --> 00:05:21,310
And then as far as the text, well, it just right.

70
00:05:21,310 --> 00:05:22,150
Clear.

71
00:05:22,990 --> 00:05:29,140
So once we save, this is the look that we should see in a browser.

72
00:05:29,560 --> 00:05:37,240
And of course, we can proceed at iterate over our data as well as add functionality to clear our list.