Nice.
And once we know what we're going to be building, then, of course, navigate back to the star project
and Michael, I'm going to open up the entire terminal and I'm going to type Sheedy's show.
How I want to navigate to a specific folder and folder that I'm looking for is a birthday reminder.
And then, like I said, setup.
And what's really cool interview code that I can just grab that folder and do the drag and drop again.
So now I'm in the set up.
Beautiful.
And of course, once I'm here now, I would want to run NPM install to get all the dependencies and
then all right away around 9:00 p.m. start to spin up the deficit.
And of course, it's going to spring up here and my Web browser and I also have the bigger Web browser
just in case if we would ever need it.
And then I'm going to navigate to localhost 3000, which, of course, at the moment doesn't have anything
in there.
Now, one thing that I would want to showcase while the dependencies are being installed is that the
idea from this project is coming from the site called UI Design Daily.
And by the way, you read me, you can find the link.
And what's really interesting, that it opened up in a bigger browser window, my local three thousand.
Usually it does that on a smaller one.
So let me just navigate here.
Copy and paste and you'll notice that this is where I got the idea from.
If you're interested in the site, it's a really cool site where the author is just sharing the design
ideas.
Now, as far as our project, like I said, all the files are already created for you as well as the
imports and then, of course, plesiosaurs.
Now, let me open up the localhost on a small browser window and of course, I can close my integrated
terminal.
And what you should see is a reminder project set up.
If you don't see that one, of course, you need to make sure that you are in correct folder and that
you're running the correct commands.
Specifically, this project has data JS So this is going to be an array with all our people and each
person is going to be represented by the object.
Not now.
Here we have the idea.
We have the name age as well as the image.
So that's going to be our list.
Then we have the index where we import currently the app and then injected into our world.
And then of course, I also have the list component where eventually I will display the list.
And I know I already have mentioned this quite a few times, but all the components, so all the files
that need the import, they are already provided just so we can avoid the repetition.
And also as a result, we can add more functionality to our project.
So let's get to work.
And first, in the app Jass, I would just want to set up our static look so essentially no functionality.
There's going to be no list or at least on display what actually implements and what components eventually
will be part of our app.
Not one quick side note.
If you don't like the background color, just navigate in accessors.
You'll find the Globalstar.
So here we have some variables and you're looking for the body.
And then notice I set it up as a variable.
But if you want to change this around to some kind of different color, just change the value for the
background.
And then of course it is not going to be a pink background for our whole project.
So back to our objets.
And then in here, as far as are there moments, I'm going to go with mine and then in the main element,
I'm going to place a section with a class of container than inside the container.
There's going to be a hearing three which eventually will display, well, how big is our list?
But for now, I will just have this manually where I'll say zero and I'll go with birth.
Days and then today, OK, let's separate, we should have something like this on screen, and then
of course, let's let's play our last component, which at the moment shouldn't have anything besides
the list components or adding to with less component.
And of course, it is already important in the app.
So let me close out my component and then also I would want to push my button to clear my list.
So we go here we button than we had right away a on click.
But of course that unclick won't do anything, it's just going to have a console.
So let's go here with one function.
And let's write log on and you collect me, collect me, OK, beautiful, and then, of course, we
need to remove the semicolon.
And then as far as the text, well, it just right.
Clear.
So once we save, this is the look that we should see in a browser.
And of course, we can proceed at iterate over our data as well as add functionality to clear our list.