OK in this video we're going to use what we've learned so far about javascript arrays to build a very
simple to do list.
And of course we haven't learned about having our javascript interact with our Jim Clancy is us.
So this to do list app is all going to be based around prompts and alert and constantly logs.
But very soon we'll be learning about dominant mutation which is how we get our javascript to add age
to Moul elements or remove them or change them or add the SS and at that point we'll actually make a
nice looking to do list where it's not just Konst but logs.
So here's how it's going to work.
When I refresh the page it asks me what would I like to do.
And you can see on the left I have three choices I can type a new phone add a new to do.
I can type list to view all to or type quit to quit.
So let's try typing list to start.
And it prints me all the to do's which is just an empty array for now.
So let's add a new one.
Notice that it asks me again I didn't have to reload all type new and now it says enter a new to do
.
So I'm going to walk rusty.
Hit enter and now it asks me what would you like to do.
So I will list and I can see that walk resti has been added to my To Do list.
Let's add one more.
So new this one will be feed resti and the list and I now have both items in that array.
So now to end this cycle I'll take it I don't get prompted again.
So that's our goal here.
Let's go ahead and open up sublime and create the necessary files.
So I have a list.
HMO going to add my boilerplate to do list.
And then inside of here I'm going to go ahead and add in just an H1 to make it clear to do list and
then a few allies.
The first one just so that we remember that commands add a to do and then we're going to have list
lists all to do's.
And then lastly quit which is just to quit.
Save this.
Now let's link in our javascript file which we still need to create.
And I'm going to call that list.
Jay Yes and then I'm going to create that file and save it list that J.S..
And of course like I always like to do I'm going to start by just let's do a console that log this time
connected just to double check that everything worked correctly.
Now let's go open this up in our browser.
Here's a little to do list and we get connected.
Awesome.
Just going to increase the font a little bit here.
Now let's talk about our logic.
So what we're going to do is use an array to model our To Do list.
So we're going to need an.
I'm going to call it to do's and it will start as empty.
And then the next thing we need to do is ask the user for input.
So we'll just call that input var input equals prompt.
What would you like to do.
And then the next step is to just check what input is if input is LIST.
We're going to do one thing if input is new we're going to do something else.
So let's try that if input and let's start by just checking if it's equal to list.
If that's the case we're just going to cancel don't log all to do just like that.
Let's go ahead and add in some to do here and let's add one here by new turtle save and let's check
if this works.
So to check if it works will refresh.
And all we need to do is type list and we should see our array that says buy new turtle.
However if we type something else anything else we don't see anything because our code only runs if
input is equal to list.
So there's that.
The next step is to add another condition.
Let's just do.
Else if input equals new.
And if that's the case we're going to want to ask the user for a new to do ask for new to do add two
to do's array.
So to ask for the new to do we just use prompt for our new to do equals prompt.
Enter new to do and then to add it to the Dewes array we have a lot of options.
I'm going to add it to the end of the array.
So all used to use up push new to do.
So that's all that we need to do here to make this work.
The only issue is that if I run this right now and I try an had a new to do typing new it asks me to
enter a new to do let's do WOC new turtle and if I hit Enter I'm done.
I actually don't have a way of checking if it worked.
I could go over here and type in the console and I can verify OK both of them are here but I don't have
a way of using the list command to print them out.
And that's because right now we're just asking one time what would you like to do.
So the next step is to get this to repeat.
We wanted to keep asking over and over and over until the user types quit.
So hopefully that screams out to you that we should be using a loop.
We want to do something over and over until the condition is true.
So the loop that we want to write is going to be a while loop and the condition is going to be while
input is not equal to quit.
So when it's anything else besides quit we're going to run this code.
And then afterwards I'll come to that blog.
OK you quit the app so that we just see some feedback.
So we'll only see this line once this is done.
So that means the user has typed quick and then inside of here at the bottom we're going to ask again
for new input.
And at the top we're going to handle input.
So we're going to start by asking the user for input one time and then I'm going to move this code into
the loop
just like this.
So I'm going to ask them one time what would you like to do is input equal to quit.
Hopefully they don't quit right away.
But if they do we just get OK you quit.
But if they don't type quit we're going to check to day type list did they type new.
And then the very last thing is that we need to ask again for new input so to ask again for new input
.
All that we need to do is copy this line down just like that.
So I'm going to make this a little bit bigger.
So here we're asking for input again and that will start to loop over and all check is input equal to
quit this time.
Yes then we're done.
So let's try that out.
Going to refresh the page what would you like to do.
Let's do new hires are new to do feed new turtle What would you like to do.
It asked me again first.
So now I have those two to do's inside my to do list.
Now let's try quitting and we get OK.
You quit the app.
So I typed quit this condition suddenly it was true and then we're done.
So let's just form this little bit better and then things properly.
So that's it for our basic to do list for now.
Shortly we're going to add some extra features and some other commands but we need to learn a few new
things about arrays before we can do that.