In this video we're going to make a few improvements to this to do list.
So here is the new version that we're going to try and make it has a new command which is delete and
on top of that the list command has changed the way that it prints to use out.
So I'll show you what this looks like.
I'll refresh the page and I'll start by adding a new to do.
And let's add in kill Voldemort.
And this time it tells me kill Voldemort added to the list and then if I look at the list I get this
nice little printout where every item is on its own line.
What we used to have before is that it just printed the whole array on one line.
So now we get them on separate lines and then also I can delete one by typing delete and it asks me
for an index.
So let's say I want to delete kill Voldemort.
I accomplish that task.
I type the number one and it tells me to do is removed.
And I could verify that by typing list and I see now my list only has one item.
So that's what we're aiming for here.
Let's go ahead and get started by adding some of these features to our old version of the app.
The first thing I want to do is just demonstrate how our LIST command currently works.
So I'll add something new.
Just some random letters.
And now if I type a list it just prints the array all in one line.
So what I want to do instead is printed on separate lines like we had over here where we got this nice
asterisk dividers and then in between we have zero colon by new turtle one colon and so on for ever
to do that we have to accomplish that we can't just count about log all to do.
We're going to need to loop through the to do's and print out each one individually.
So we have a few choices.
We can use a for loop or a For Each loop.
I'm going to use for each because that's what I prefer.
But it's really just a matter of preference.
So to do stuff for each we give it this function and we'll just put to do in there.
Remember that just the name that we make up a placeholder and all we'll do is cancel that log to do
and then we'll get rid of this and save.
So we're going to loop through to do's just give it a name to do.
That's a placeholder for each individual to do.
And we just print out each to do refresh the page.
Let's add a new one.
Random letters again.
Now that's the list.
And now we have two lines.
So the next step is going to be adding in those numbers with a For Each loop.
We don't immediately have access to the index or the number that each item corresponds to.
We could do something a little bit hacky like this where we would do to Doo's that index of to do which
would take by new turtle plug it into to do this.
And then that would give us a number back.
So that's not an ideal solution.
What we can do is just add a second argument to our for each function I'll call it index can be called
anything of course maybe just I.
And that's going to refer to the index.
So the first one it's going to be the item to do and then this will be the index of that particular
to do.
So each time through we get both of them.
So for this first item to do will be by new turtle index will be zero for this item to do will be this
whole string of letters and I or index will be one.
So all we want to do is print that out.
So the format that I followed was the number the index colon that to do with the space between.
So that looks like this I plus.
And then we need our colon and our space plus the to do.
Let's go ahead and test this out.
So I'll refresh and I'll add in a new to do this time by Hogwarts textbooks.
OK.
Now all type list and I see I get both of my to use on separate lines each one with a number next to
it.
Awesome.
So the very last thing that I want to do is add those asterisks around the list like we have here.
So that's very simple.
All we need to do is a con. But log star star star.
I think I did 10.
It doesn't matter.
And I'm just going to copy that before.
And then after the foreach.
And that will give us what we want.
So I'll demonstrate that.
Go to our version refresh and type list and we get our little asterisks surrounding our list.
So the next piece of functionality here is going to be delete.
So I'm going to go back to my list what age to him how I'm going to add a new list item just as the
instructions here.
So delete and that will remove a specific to do.
So the way that it works is I first need to provide the index of what we're going to delete and then
we delete it.
So I'm going to add in an else if input equals equals equals delete.
We need to then ask for index of 2 to be deleted and then we need to delete that to do so that's our
steps here.
First to ask for the index.
It's pretty straightforward.
We'll just make a variable called index because prompt
enter index of to do to delete.
So that will give us the index like zero.
And then we need to use that index to remove that item from from the array.
And that's a little bit trickier.
We actually haven't talked about how to delete something from an array.
Aside from using POP and shift but those are only removed from the end of an array.
But the beginning.
What we want to do here is potentially remove from anywhere inside the array.
So there's another method called splice.
And so I'll show you how we use place.
We're going to write to use that splice and this will basically make a cut and remove a specific number
of elements out of an array.
So the first argument is where we want to make that cut.
So that's just going to be the index the user provided and then the second argument is how many items
you want to delete.
Following that index.
So we only want to delete one item.
So that's all we need to do.
Splice index one that will ask the user which to duty want to delete.
Give me a number.
Let's say the user types in three.
Then to start splice is going to find the item with index 3 and delete one item.
If we added this it would delete 10 items following that index.
So we only want one.
Let's go ahead and test this out in our browser.
I'm going to refresh and let's start by adding a few to do.
So the first one.
Do the dishes definitely need to do that right now.
Next one
do laundry.
I can probably wait a few more weeks before I do that.
And the last one here.
Eat dinner.
OK.
So let's list them out and we get this nice list here.
Still we have five new turtle So let's say I want to delete find new turtle either because I already
bought a new turtle or I had a change of heart and I realized that turtles are probably the worst pet
that you could ever own.
So let's delete that and you type delete.
Now it asks me for an index so that is index zero and it would be nice if we had a little feedback.
That said item deleted so we can add that next.
But to verify that it worked.
If we type list we see that our array has now changed.
Now we no longer have buy a new turtle and we just have do dishes do laundry and eat dinner so let's
quit and let's add in a little bit of feedback.
Let's start when you delete something we'll cancel that log to do let's say deleted to do and save that
and let's do the same thing for when you add it to do we'll do a concert log added to do just so that
we see what's happening.
And while I'm here I'm noticing that this loop is getting a little bit long so what we probably want
to do is break this out into separate functions.
So we're going to refactor this so functionally nothing is going to change about how it works.
It's just a matter of how the code is organized.
So here's how I would like it to work.
We have a separate function here.
I'm going to copy all of that and cut it out and our function will just be called List to do this and
that's all that we're going to put inside if this if input is equal to the list then we'll go down here
and define list to do's.
And we're just going to paste that code in and that's all.
Just like this.
I'm going to repeat the same thing.
So if the user inputs knew where to copy this code cut it out and we're just going to call a function
we're going to write code.
Add to do then I need to write my function had to do paste that code in indent this properly and save
one more.
If the user enters delete are going to add a new function called Delete to do so we're going to create
that down here function delete to do and paste that code in space it correctly and now we should be
good to go.
So you can see that we didn't really change the functionality at all but we cleaned this logic up a
lot.
So our loop is much shorter and easier to see what happens if the user enters list list the tidies if
the user enters new had to do for user enters delete delete that to do and then check and ask for input
again and repeat the whole process.
So let's just verify that it works.
Refresh the page.
What would we like to do.
Let's do list and we get our list.
Let's go ahead and add a new to do finish dishes.
Let's list again and we get our two to do listed.
Now if we remove one delete this time.
I did buy a turtle index 0.
I'm going to remove that.
I get my message deleted to do and let's go ahead and quit.
It tells me alright you quit.
That's all we are going to do for now.
There are a few things that I want to summarize.
The first of which is that we use a for each to list out the to do.
And we could pass in a second argument to be named anything.
And that refers to the index of every item that's passed in.
The other thing that we did is learned about splice and splice how we deleted a specific item from the
array.
It takes two arguments.
The position of the thing to be deleted and then a number of how many items to delete after that index
.
The last thing that I want to talk about here is that we refactored things into separate functions so
even though we didn't call these functions more than once we only wrote them one time.
It's more about organization and making our code simple and short inside of this logic heavy loop