OK we'll come back in this video.
I want to introduce the project that we're going to build over the next few videos.
So we're going to make AJ Querrey based to do app but it's also going to have a pretty heavy focus on
CSSA and styling some animation some effects and overall it's going to be a pretty polished application
.
So I'll give you a quick demo of what it looks like and how it works.
So here is our To Do list.
The first thing I'll point out is that it's responsive.
So we can resize it but to do list is for Harry Potter in this case of fill that with some sample data
.
And as I hover over things you'll see I get this nice little delete button with the trash can icon.
And if I click on that it will delete the to do entirely or if I just click on the text I can check
it off if I want to keep it there.
Sometimes you know when making a to do list you cross things off but you might want to be able to go
back and uncheck them or keep them there so that you can see them again.
And some people just want to delete things entirely.
They don't care about seeing what they've already done.
So then you can click on the delete button.
Let's say that I killed Voldemort click on that button and it fades out and then it disappears.
And then I can also add in a new to do.
So let's add one here.
Go to Potions class and all I have to do is hit enter and we automatically get a new to do down here
.
I can check off or remove.
Also of note is the fact that this button here will hide the form.
If I just want to view my list I can click on that or I can click again and view the form and start
adding to deuce.
So that's a preview of the functionality.
Now I want to talk a bit about behind the scenes what we're going to talk about and some of the new
things that we're going to learn.
As I mentioned earlier this is a lot of Jay query and a lot of seeis us and in particular we're going
to talk about some of the common methods we already learned about like key press and on for events fade
out slide out fade toggle slide toggle all the different effects and then also selecting are going to
be doing a lot of selecting here as well.
And then wase SS We'll get more practice with the box model margin and padding and border.
We'll talk more about floating elements and we'll get more practice with font's.
And then there's also a whole host of new features new methods new properties for Jay queery and assess
both that I'm going to introduce through this video and the first one up here is that we're going to
be using a better folder structure in this application.
We're going to have Jay queery.
We're going to have our Each team will have to see assess but we'll also have another library called
fun awesome and we need a better way of keeping things organized rather than just having everything
in one folder together.
We're going to have some subdirectories in and break things out into different sections.
As far as J.A.G. goes we're going to introduce two new methods.
One is called pairings and another one is called append along with the pen and we're also going to talk
about how we create new elements and add them to the page and the last point.
Here is something called event delegation.
But then as far as CSSA goes we're going to use Fonte awesome to get some new icons in our application
so you can see we have the trashcan here and the plus sign here that's coming from a library called
fun.
Awesome.
We'll also talk about box shadow and other property called transition that we saw when we made the color
guessing game.
We're going to see how to use it in a slightly different way and then we're also going to look at CSSA
gradients which is how I made this background here.
So it's not actually an image CSSA is making this for me.
All right so there's a lot of fun stuff packed into here things that we're going to get more practice
with and some new things.
We're also going to throw in there so we'll get started in the next video.