Welcome back, guys.
Welcome to the first lecture of this project, and this is an important lecture for the people that
want to learn.
If you don't want to learn about how this project is done, how this project we're going to start,
and if you do want to skip it, you can skip it because it's going to be simple.
HTML says something like that so you will know how this project is working.
Now you're going to have to do for two starting folder, I mean two folders.
The first one will be Berney starter and the second one will be the final the finished version that
we are going to do, we are going to complete in the last lecture.
So what I suggest is to open the Vaskov or whatever text editor you do have and open that starter folder.
Right now in this starter folder, I'm going to have successful a Sears's folder, IMG, J.S., SAS.
Now this Sears's folder.
I do have some comments here.
I just want you to read it right.
And this is the main Sears's folder.
IMAG all the images here in this folder are from on splash.
I'm very thankful for this guys here and I'm seeing things there.
Right.
Let's move on.
Geass, you're going to have to files at the edges here.
We're going to put our code here in Berney that JS in the burning edges.
I'm giving this code and I'm not going to create this code together with you.
It's going to be given.
Why?
Because this is not something difficult.
You will see how it's going to be done here.
And that's pretty much easy to understand in here.
I just want to start from somewhere.
I don't want to start from scratch.
Now, the SAS folder, you don't have to touch it because here it's compiled into Cyesis.
Right.
But if you want to do some changes here, I'm just going to show you you need to install a live server
plugin.
So if I click it here now, it will create a bunch of files here.
Right.
That is happening in my place.
That is how it's configured right now.
One more thing that I want to show you.
This is the HTML file that I have in.
I use the live server.
And please, if you do have this fiasco, please install that plugin right now.
This is the this is the starter folder that we are going to work on.
So I'm just going to show you that if you change something here, for example, I'm going to comment
this one.
This is the main container, actually, and I'm going to change the color to whatever green.
Right.
I just want green.
Maybe in the other application we use green.
And here is now it's green.
This is how powerful it is.
I don't have to refresh.
The live server is doing that for me.
Right.
So.
I'm just going to go back, I'm going to save it.
Success having here, and that's pretty much it.
Now, I'm going to stop watching.
I don't need to change, do any more changes.
And I don't need these files.
I just need to he says, why, because in this man says this is just importing the styles from here,
that's it.
You don't need to worry about anymore.
Now, it's good to have to look in this house.
I've done this.
Yes.
And if you don't understand, says you can take my other courses, which it will be of your great help
about styling.
You will learn about lot of styling because that's what I'm doing in there in that project.
So ultimately be a Laravel Cyesis and SACE so you can take that course.
Now this is the style Cyesis and this is the sash, so you can compare and see how things is done because
here it's going to be a little bit different.
No, I'm done with that.
So I use that live server already explained to you.
You really know I do have the main container contains everything.
I do have this date panel that's pretty much battle on top.
I do have this button here.
Don't worry about the button.
It's not there anymore.
I mean, it's not there now.
I do have the graph.
The graph is actually what's happening.
This part contains this two thousand three hundred calories remaining and this graph here now.
Now, don't worry about how I'm doing this, because later we are just going to change one.
I'm going to show you in the first lectures we're going to change one part here and that will actually
create that spinning when we have the cut, when we adding the calories now remaining two thousand three
hundred, that's pretty much it.
So take note of these notes here and comments now.
The main panel result is actually this sport here.
So if you go inspect it, you can actually go here.
And this is the main panel for the food.
This is main battle for the for the bar together.
So that's for the food.
That's for the exercise.
How cool is this?
No, I do have one more panel here.
I want to show you two and this is the button that I'm telling you.
It's for that one.
OK, so one more thing.
For example, if this icons here, they are not working.
The reason they are not working, probably in future, they can be changed by a font.
Awesome.
That's why here I did include my script here, mine for an awesome kid and you can download font.
Awesome.
Maybe in the future they're going to change the way they do.
So you can download seedling for the fun.
Awesome and put it here.
I don't want to put sidedly because at the moment they do have some kind of errors or warnings.
So when I do the cons a lot.
Right.
So I'm just going to show you when I do, the console is going to have more than this.
They're going to have warnings and that's not cool.
I don't want them to be displayed here.
That is why.
But if you want to be a developer or to have to start working in some some more serious stuff, you
need to learn how to get this one awesome for yourself, because in future, they can change it before.
I'm just going to show you to where it is.
It is before was F.A.A. every time circle.
Now it's free ah free time circle so they can change the way they do things.
Right.
And in future it might not working.
So if it's not working, please find a way how you can use your own icons.
I mean you can grab it under your name or if it works for you, just delete this one, put a clear link
and that's it.
You're done.
This is under my name.
And that is why I'm just saying to you that you can do it in your name if you want.
No, the food slider is closed at the moment.
You're just going to open it here.
Here it is.
So this is one simple image that we are loading here.
I have the food container.
I'm glad that I'm smiling there and inside.
I have this food container with the idea of zero.
Now we're going to learn that this idea zero next idea and it's ending here.
So, for example, if I want to do another one, I can copy this one.
I can put it here.
So I'm going to have two right there in the same same name, same because I just copy and paste it,
then the Z and that's pretty much it.
Now, that idea should be one here and you will understand why those ideas will be important.
The same goes this for when we click, food is going to list all the foods that we add it.
And this is the lead button, right?
This is actually that button here we.
The lead item in Effy Times circle.
How cool is this?
No, the other one shoe form closed is this button here.
I'm just going to show you this one one click it here is going to open up this floor.
And in this form, I do have select option.
I do have the description that I do have.
What else?
Just wait.
I need to close that one here to get I do have the calories and I do have the quantities.
Right.
There is all inputs in there inside a form.
Why do that inform?
There is no action.
They don't go anywhere.
Why I do this because maybe in future you're going to use this project for BHP or whatever programming
language and you want to take some action here, right?
We don't want to do everything to through JavaScript.
And that's why that is why I include this form here.
Right.
So saving this one and it's going to put the calories here.
You can put the quantity here, calories description and you're going to go there.
Now, it's not going to work here because it's form.
See what's happening on top.
And the last panel is this exercise panel, and it's pretty much a copy of the food panel.
Right?
Where is that one?
Here it is.
Exercise Spanel, let me just find the other one here is a calorie burn.
This is the exercise.
Right.
So it's pretty much copy of the food battle, food sliders.
So we do have these three buttons here in the work, actually, by I'm just going to save this one.
They're working here that's burning.
So one is it closing?
One, it's opening.
And that's pretty much it.
I toggle here in adding classes.
I remove classes in some of the instances and that's pretty much it.
This is close lids for this.
So, for example, when you have open up, if you click it again, it will close automatically.
But if you do it here, it will close everything.
It will close it even if this one is open, this one and this one.
That is my logic.
If something is messed up in the code, at least that will kick in and it will close everything.
So that's pretty much eat of these projec walk through.
So I hope you like this one.
So this is the first election was too boring, but I needed to get out of my chest.
I need to explain to you why I use this font.
Awesome.
And why it can be changing the future.
And you need to take care of the icons you need to search.
These icons have been changed or the writings here in my class, if they call it a little bit different,
because maybe I'll not have time to update this lecture, but you can do it with your own search.
So that's pretty much it.
This is the entire structure.
We have one, two, three, four folders in one file.
Inside these folders, we do have files, but from next lecture, we are going to work only in that
dodgiest.
And I didn't just told you, we are linking those two project to files here in the bottom below the
bottom.
Right.
So thank you very much.
And I will see you in the next.