The next thing we'll tackle is the background on the body.
And this actually isn't a background image though if we found one that looked like this that would work
just fine.
But but it's actually a gradient that CSX is adding for me.
So in essence we can write linear gradients and rather than writing them on our own from scratch I'm
going to show you a great resource that has some nice pre-done color gradients that we can work with
that we can update and edit on our own.
So it's called gradients dot com.
And then it has a bunch of different gradients we can use arrow keys to see some of them.
So I just went through until I found one that I liked.
So let's say I wanted to use this all that we need to do is click on get CSSA code or hit the enter
key and then copy this code to a clipboard and then we'll select the body.
So body and paste that in.
So it's really just one line but there are all the different browser prefixes.
So for Internet Explorer for Firefox for Chrome for opera all these different prefixes.
But what it does.
We're setting the background to linear gradient and we're picking two colors and different percentages
of those colors and also the angle.
So let me show you what it looks like now if we refresh ours.
We have this nice gradient.
So we can keep playing around there.
You can check out a few more and feel free to use your own.
The one that I decided on is called Bora-Bora right here.
So we'll just copy that copy to clipboard and replace this code.
All of this here with that new gradient which again is just another linear gradient that someone else
wrote two colors different percentages of each.
And we'll save.
And go check it out now.
And there we go.
So we're getting closer.
The next big thing that we need to work on are the icons.
So we have a plus icon appear.
And what this does is it shows and hides the form and then we have the trash can.
I can see that we also need to include those icons are part of a library called font.
Awesome.
So go to font awesome and just google for the Web site is Fonte awesome.
I get her I.
And all that it is is a collection of a bunch of icons.
So let me show you if we look under icons there's a huge list of all the different icons we can use
so you can see there.
So we need to include this library inside of our application so we can either go to download it right
there and click on download or we could also do a font.
Awesome CDN and just use one of these CDN as well.
Either one would work.
So for variety sake since they already downloaded Jay query I will use the CD and here copy that link
.
Then I'll go to my index page Timo and I need to add a link tag because it is CSSA file so it's not
actually a javascript file or a font but it's a C Ss file and I'll save and what that does is it actually
gives me a bunch of classes that are pre-built and pre-made that I can then add to elements so I'll
show you a few examples.
If you wanted to use say the battery empty or battery threequarters all we need to know is that the
class is called f a dash battery dash 3 dash courters So we need to add one just copy the code here
somewhere into our application.
Let's put it in the H-1.
It's an eye tag which stands for icon and we give it a class and we don't have to put anything in here
.
We leave that empty and this stands Rifan awesome.
And then this is the name of the icon and will save refresh and we now have that battery icon rather
than the three quarter battery icon.
We want the plus sign and the garbage can so we'll go over here and inside the H-1 will keep the icon
and keep the f a class but we want F.A. dash plus and feel free to use your own icon.
If you go on to find awesome and you find another one that you like because we could also use one of
the like a pencil looking icon or a pencil and paper and if I were fresh and now have the plus sign
which went into style and move over to the right and all we need to do for that is select it first so
we'll select dog.
F a dash plus and will floated right just like that and refresh and it's now over on the right site
.
Now let's tackle the garbage cans and we're not going to deal with the animation just yet.
We're just going to get the garbage can to show up at all instead of an X.
So let's go back and on our spand we're actually going to get rid of the X's and inside the span we're
going to add another e-tag and the e-TAG is going to have a class of FAA and the name of the garbage
can icon is FAA Dasch trash let's copy that over to the other span's and this is only for the existing
to use when the page loads but we get three garbage cans for the new ones.
We're still dealing with the ex.
So then we want to go over here to our Javascript.
And when we pen new one we don't want to append a span with X.
You want to append an icon and we need to make sure our quotes don't interfere.
So if we use single quotes there and save and now we should have a trash can icon inside of the span
.
So let's add a few new ones.
There we go.
And I can still click because they're still inside of a span.
So it's an icon element instead of a span.
So I click event still work.
Now let's work on this simple animation and this is all done with C assess the spans here are actually
hidden when the page loads.
They have a wealth of zero.
And then when I hover we're actually increasing the width to 40 pixels and then we're making it animated
using the transition property.
So let's go attempt some of that.
Open up our CSSA file and the first thing we'll do is style spans so span and we're going to give them
a background color that red color which is e 7 4 C 3 C and will refresh.
And now we have that red background around it.
Next thing we'll do is give them a height of 40 pixels which doesn't seem to do much yet but once we
add in a few more properties you'll notice a difference.
Let's add a margin to the right of 20 pixels and go back.
Now that gives us the space that we wanted here.
Next let's give them text align Center
which is just a very slight difference on the spans here.
The icons inside an important one is to make the icon too white so color white.
All right.
So I'm going to show you how to get them to look like this first without the animation so that they're
always there.
And then we'll get them to animate so that they're hidden until we hover.
So we're getting close but we need these to take up more space vertically and horizontally.
So I'm going to add in a with a 40 pixels that eventually we're going to set to zero and to set display
two in line Block.
And I refresh now.
And that looks just right.
So the next thing is to do the animation.
And the way that that works we're actually going to set the width to be zero.
So all of these spans have with a zero until I hover over an ally and then we increase that with to
be 40 on that span.
So let's do that now.
I'm going to set with zero and then when we hover over an ally and not just the span but when we hover
over an ally
we want to select the span that's inside of an ally that's being hovered over.
Then we're going to set with to be 40 pixels just like that.
And let's go back to our own version and refresh.
You can see that the spans are now gone.
And when I hover over and fly the span appears and the button works.
So the next feature is getting it to animate so that it doesn't just appear instantly and to do that
we'll just use the transition property.
So on the span we're going to add transition zero point two seconds and we'll make it linear which just
refers to the easing which means that it will move at a constant speed.
And there we go.
We have our nice animation.
There is one small item that does bother me here which is that the icon still shows even when the span
is zero pixels wide.
So it's really hard to see but watch the icon here.
It's still there even when I'm not hovering over it.
So what we'll do is just set the opacity on the span to be zero and then set it to be one when we hover
.
So opacity zero and then opacity 1.0 when we hover.
And that should take care of it.
So now we can't see the icons.
There it is and then it disappears and it fades out as well because the transition property is affecting
everything.
So let's make it 2.2 seconds and I'll show you.
Notice how it fades in and then fades out.
So that's a very slow version.
And we'll just do 0.2.
There is one small annoying thing that we have left which is if you look really closely here or increase
the size there is a small gap between the input and then this list the UL.
But the gap goes away when I focus there now flush.
And then when I am not focused it comes back.
So to fix that we're going to add a small border that's invisible actually it's going to have a color
just a small border of R.G. be 0 0 0 0 0 0 which we'll just take up the same space as our border does
when we're focused.
So we'll go back and like the input which we have here and give it a border of three pixel solid R-Ga.
zero zero zero zero.
So that will end up giving us an invisible border.
But notice here I'll refresh right now that little gap goes away.
So now not only is the border flush when we have it focused but there's also a border that it helps
us make it flush that we don't actually see