so i guess at this point the only thing to do is just to make this look
a little better just space this button and things like that so i'll go back to this
and basically we'll just do some margins right so if i just go back in here and we'll do margin
let's actually just search spacing or something there it is see margin top
okay pl should be padding left m t should be margin top it's like top bottom left right
so what i'll do i'll just space this button a little bit so i'll take that div
where the button is right in here and add a class
and for that we'll do mb margin bottom and was there a dash in there or no
yes so we'll do dash some number four so let's save this and see what it looks like
good i probably want to space all of this from the edge of the sidebar
so for that usually there is some sort of like container class let's see
yeah see containers so we'll take the whole thing and put it inside of this div
container so i'm just gonna copy this go back and take this whole thing right after the body
paste this take all of this html i got tab it in and close that div right here
save it and that should hopefully make this look a little better see spacing from the sides i'm
really zoomed in here so the actual size is actually this now i'm not sure if we want to
do five we probably want to do more so i'll go back here and do instead of five we'll do
10 maybe and see this is like steps so i assume that's this c5 and 10. so instead we can change
this to maybe well maybe we can do 5 10 20 and 50. let's see if we can do multiple like that
save this and finally let's just change this text hello world
this is this h1
so that's probably going to be too large
or maybe not depending on how you look at it maybe i'll just center both of these
and keep them the same size as they are so i'll just go to this h1 and do class
text dash align i assume that's what it should be called oh not text line text center
there it is some spacing from the top of that h1 so i'll just do empty two
let's also center this button in here and i think i did this last time with flex
so let's see so it's d flex for the main one and what's the centering
it's this one the third one so
justify center right here copy this go back to this and this div for the button
well we don't need two class attributes so i'll just do this save it go back and reload
let's just add a bunch of worksheets
reload
see now we got 10 because that's the default maybe 10 is too much i don't know see we got
five we got 20 we got different options and finally if we want to delete all of this mass
and just keep this first one i'm just going to highlight all of them uncheck this hit delete
and it says you're about to delete 21 worksheets yeah that's exactly what i'm trying to do
good they're all gone you could take this and add some additional things when you add worksheets
maybe have a button to click and reload this without having to do this
but i think this video has been already too long so adding that would be nice and maybe doing some
sort of waiting thing so right now see when i highlight all these hit delete and hit delete
right here having something that tells me that we're deleting would be nice to have
let's just quickly take a look
progress apparently see like this
so let's just copy this go back and we'll add it someplace in here maybe
below delete button or above just go in here and right below that delete button
we'll do a div to hold all of that
close it and then i'm gonna paste their code in here i'm gonna give this an id
i'm gonna call it loader
or wait let's just go back and reload so this point hopefully that should just show that thing
i thought i had two of them
just shows one for some reason i don't really care that much to troubleshoot that so i'll just
keep it as is so it's a loading thing that's good enough so basically i want this to show
up as we're deleting the worksheets and then disappear when everything is done so we should
be able to do that so by default let's just hide it let's just see what a class is for hiding
maybe search display
visibility
visible no visible so let's just do this no visible
so if i just take this and put that class on this
that should not show up
here even though it's there so now when i delete i want to actually display that thing
so what i'm going to do i'm going to store a reference to that weight
div right here and we'll do that by taking our
global here and we'll do it at the point where we'll load the whole thing so i'll just do
this weight equals two and we'll do our document get element by id and the id is gonna be weight so
what i wanna do with this when we hit delete so the actual delete is gonna happen when we
actually click on this delete button and it's gonna run this delete sheets so when it starts
running that delete sheets which is basically this thing right in here i want to first unhide
that thing so that's going to be this element so on that element we should have the class list and
from that list we should be able to remove that class that was no visible right there now what
this should do it should basically display that at some point we're going to need to also hide that
when this is done so first let's see if it shows up i'm gonna need a few worksheets here
it does and it deletes but now it's to stay here forever now we want to make sure this disappears
so for that i'll just go back and it should happen basically when so after we run this delete
worksheets function and delete all the worksheets then what we do will run this load worksheet names
which is basically this one that basically loads all of those so
after it loads and reloads everything right in here we want to just add
that no visible class to this so maybe we also want to do this initially when the thing loads
so maybe if you have a lot of worksheets this loading worksheets could take a long
time too so we'll remove in here too so let's see what happens i'm going to save this go back
reload this thing see it's loading now it loaded good now we're gonna take this this
this delete those and there we have it and that should be it
thanks for watching please subscribe and i'll see in the next video