At the end of the last video I mentioned that we're going to introduce a new folder structure so we're
going to start there by creating the correct folders and files first.
So I'm going to go to sublime and I'm going to make my new file for each team.
Just going to be our main HTML file and I'm going to call it indexed.
H Tim L and I have a folder for it I'm just calling to do list project.
So index that HD M-L and then we'll add in our basic H-2 mail boilerplate and I'll call this to do list
and save.
And then we're going to go and make a few new directories.
And I'm just going to do that from finder so you can right click and do new folder.
You can do command shift and you can also do that from inside of sublime.
If you go into a file new file and you save it you can click new folder here however you go about creating
the new folder we're going to make a folder called assets and then inside of assets we're going to make
two folders one for J.S. and another one for us.
And then lastly instead of J.S. we're going to make another folder called lib.
So if I open this entire structure up inside of sublime by just dragging the whole project over like
this you can see that our structure is now to do this project and we have an index that h t m l and
then we have an assets directory instead of assets.
We have C Ss and we have javascript and instead of javascript we have a lib directory.
So we'll be putting our style sheet instead of the C S S directory and instead of J.S. we'll be putting
our own custom javascript where we write the jey query and inside of lib is where we're going to add
.
Query itself the actual J query file.
So we'll start there.
Let's go and make sure we have a query.
So I'm going to just go to Jay Querrey dot com and rather than doing a CDN because this is more of a
serious project we're going to download the most recent compressed version.
So that's right here compressed production 2.0 1.4.
And then I'm going to find that file and just add it into my assets.
J.S. lib just add that in like that and now I'm going to go link to that correct.
The inside of my supplier.
So in my HMO I need to add a script tag.
And the path to get there is assets slash J.S. slash lib slash Jay dashed to point one point for dolmen
.
Yes.
So let's do that now script type because javascript source equals assets slash J.S. slash lib slash
.
Jay query dash 2.1 point one point four men.
That's a yes long file name to get there but save this.
And let's just open it up in a browser to start.
So go find our index study each time I'll open it up.
We don't have anything to see.
But if I go here I type a query.
Things are working just fine.
I could also tested out by doing this selecting the body and that works as well.
So that means we're good to go.
Next up let's focus on getting our style sheet and our own custom javascript file included.
So we're going to make the style sheet first.
So let's make a new file and save that and I'll just call it styles that C-s us and I'm going to go
into my assets see SS and actually to be consistent let's do to Dewes does the SS.
So to do stuff C Ss inside of our assets C Ss directory and save and let's add something like body background
purple which we will absolutely get rid of.
But just to make sure that it's working and then we'll go over here and add in the linked tag and then
add the correct path which is assets slash C. SS slash to Dewes dot C Ss and we'll save and refresh
and you can see our style sheet is now connected properly.
The last thing we're going to do is get our own custom javascript file going.
So I'm going to make a new file and save it and we'll call this one to do Scott J.S. and that's where
we're going to write the actual code that will make our To Do List work.
So that should go inside of assets.
J.S. and that's it.
So we don't put it in lib because lib is where we're going to put external code and libraries like Jay
Querrey So we're just going to put it in J S and save our structure looks like this.
Assets CSSA we have to use instead of J.S..
We have a lib directory that has J query in it and we have our own to do.
J.S. instead of the G-S folder and votes go add a simple alert connected and save.
Now go back to our HQ mail and add in another script tag and this time we're going to add source equal
to assets slash J.S. slash to do yes and save.
And now let's see what happens when we refresh we get our connected alert.
OK so we have the folder structure set up correctly so we will be introducing another file that we need
to place once we talk about Funt.
Awesome which is a CSSA library.
It's basically a bunch of icons that we can include.
So we will be returning to this folder structure and adding to it in the future video.
For now that's all we need to do in the next video.
We'll focus on writing some code