Welcome back.
So now that we have the folder structure set up and we have our files created We're going to spend some
time in this video creating the actual team structure.
So the elements that we need for our To Do list.
Let's begin by taking a look at the final version that we are working towards throughout the course
of this unit.
So here's the final to do list.
And the big elements that we have here we have a heading right here.
You have a button here some sort of element.
We have a text input here input type equals text and then this is a well and each one of these is an
ally in that UL.
And then each button right here is a span that we're showing and hiding and changing the with on.
And we also need some sort of element to contain everything and we'll just use a device to do that.
So we need a div inside that div we'll make an H-1 a text input a UL with a bunch of allies and then
some span's in there as well.
So we'll start by just writing out some aged him l no real C Ss and just to let you know the way that
we're going to go about this is by creating a ugly to do list that functions and then going back and
adding in the C S.
So I want to get to the meat of this which is the J query and the logic of making new to do's and deleting
them and then we'll go back and add some of the pretty stuff at the end.
OK.
So let's start with the HD.
I'm going to make a div and let's give it an ID container and we're going to put everything inside of
that div and then instead of that div will have an H1 and it will just say to do list and then we'll
have a text input.
So input type equals text.
And let's just see how that's shaping up.
I'm going to get rid of the purple background for now and let's go over here.
And I'm also going to get rid of this alert.
So let's do that now.
There we go.
OK.
So we have our input we have our text for the H-1.
I guess we should make it to dasht do list.
And then the next thing we'll do is add the UL.
So let's make those changes to Dasch do list.
And after that we'll add in our UL and each to do is lie inside of there.
And let's start by adding in three or four starter Tutu's.
So I'll have go to Potions class
new robes and we'll also add visit Hagrid.
All right.
So we have three to do this in our list.
Very unremarkable list so far but we have our H-1 our text input and our three allies inside of it.
Well now let's go ahead and add in a delete button and we're not going to have this trash can delete
button with all the styling to start that will come afterwards.
We're going to just have a simpler button and it's actually not even going to be a button.
It's just going to look like this.
So the letter X that we can click on and if we click on that X it will delete that to do.
And that's just how we'll start out rather than just having the letter be part of the lie though I'm
going to use a span so span with a letter X.
So let's copy that down.
We have three spand.
Each one has a letter X there refresh.
Nothing looks different.
But now we can select that span separately and we'll be adding a quick listener.
So when we click on that span we want to delete this to do or this whole lie.
OK.
So that's all the basic markup we need.
Let's do a tiny tiny bit of styling.
The first thing we'll do is center this div So the div is ID container.
Let's go in here and select that in our CSSA file select the tidy container and let's give it a nice
background Gray just to start and see what we get.
You can see the div goes all the way across.
Let's go ahead and add in a with so that it doesn't go all the way across.
And then we'll try and center it in the middle of the screen so the width will do is three hundred and
sixty six.
And if we save that it's just the same width that I have with the final version.
So 360 pixels and then the next thing we want to do of course is center that.
And the easiest way is to use that margin trick.
So we set the margin on top and bottom to be zero and the left and right to be Ahto.
And if we refresh now we have a nice center to do list.
So that's all the time out and assess that we can do to start here.
We'll add in some things as we need them.
And then once we get the basic functionality down we'll focus on making this pretty and getting the
right you know the animations and the effects the fades and the slides and making things just look and
feel a lot nicer.
OK so in the next video we're going to start writing some inquiry