1 00:00:00,600 --> 00:00:06,330 OK in this video we're going to use what we've learned so far about javascript arrays to build a very 2 00:00:06,330 --> 00:00:07,790 simple to do list. 3 00:00:08,160 --> 00:00:13,290 And of course we haven't learned about having our javascript interact with our Jim Clancy is us. 4 00:00:13,350 --> 00:00:18,770 So this to do list app is all going to be based around prompts and alert and constantly logs. 5 00:00:18,960 --> 00:00:24,210 But very soon we'll be learning about dominant mutation which is how we get our javascript to add age 6 00:00:24,210 --> 00:00:29,400 to Moul elements or remove them or change them or add the SS and at that point we'll actually make a 7 00:00:29,400 --> 00:00:33,080 nice looking to do list where it's not just Konst but logs. 8 00:00:33,150 --> 00:00:34,620 So here's how it's going to work. 9 00:00:34,620 --> 00:00:38,480 When I refresh the page it asks me what would I like to do. 10 00:00:38,700 --> 00:00:43,870 And you can see on the left I have three choices I can type a new phone add a new to do. 11 00:00:43,920 --> 00:00:47,990 I can type list to view all to or type quit to quit. 12 00:00:48,030 --> 00:00:50,780 So let's try typing list to start. 13 00:00:51,440 --> 00:00:56,190 And it prints me all the to do's which is just an empty array for now. 14 00:00:56,190 --> 00:00:57,640 So let's add a new one. 15 00:00:57,750 --> 00:01:03,870 Notice that it asks me again I didn't have to reload all type new and now it says enter a new to do 16 00:01:03,870 --> 00:01:04,340 . 17 00:01:04,560 --> 00:01:07,200 So I'm going to walk rusty. 18 00:01:07,350 --> 00:01:11,010 Hit enter and now it asks me what would you like to do. 19 00:01:11,220 --> 00:01:16,320 So I will list and I can see that walk resti has been added to my To Do list. 20 00:01:16,650 --> 00:01:17,830 Let's add one more. 21 00:01:17,850 --> 00:01:27,790 So new this one will be feed resti and the list and I now have both items in that array. 22 00:01:27,810 --> 00:01:32,180 So now to end this cycle I'll take it I don't get prompted again. 23 00:01:32,430 --> 00:01:33,720 So that's our goal here. 24 00:01:34,020 --> 00:01:37,980 Let's go ahead and open up sublime and create the necessary files. 25 00:01:38,700 --> 00:01:39,870 So I have a list. 26 00:01:39,990 --> 00:01:45,280 HMO going to add my boilerplate to do list. 27 00:01:45,960 --> 00:01:55,350 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 28 00:01:55,350 --> 00:01:57,440 then a few allies. 29 00:01:58,770 --> 00:02:08,580 The first one just so that we remember that commands add a to do and then we're going to have list 30 00:02:11,490 --> 00:02:15,170 lists all to do's. 31 00:02:15,210 --> 00:02:21,590 And then lastly quit which is just to quit. 32 00:02:22,060 --> 00:02:23,220 Save this. 33 00:02:23,250 --> 00:02:27,140 Now let's link in our javascript file which we still need to create. 34 00:02:27,690 --> 00:02:31,600 And I'm going to call that list. 35 00:02:31,640 --> 00:02:38,420 Jay Yes and then I'm going to create that file and save it list that J.S.. 36 00:02:39,540 --> 00:02:44,640 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 37 00:02:45,630 --> 00:02:50,420 connected just to double check that everything worked correctly. 38 00:02:50,430 --> 00:02:54,670 Now let's go open this up in our browser. 39 00:02:55,030 --> 00:02:57,860 Here's a little to do list and we get connected. 40 00:02:58,110 --> 00:02:59,050 Awesome. 41 00:02:59,700 --> 00:03:01,860 Just going to increase the font a little bit here. 42 00:03:01,860 --> 00:03:04,050 Now let's talk about our logic. 43 00:03:04,050 --> 00:03:08,500 So what we're going to do is use an array to model our To Do list. 44 00:03:08,550 --> 00:03:10,010 So we're going to need an. 45 00:03:10,020 --> 00:03:13,440 I'm going to call it to do's and it will start as empty. 46 00:03:14,490 --> 00:03:18,930 And then the next thing we need to do is ask the user for input. 47 00:03:19,110 --> 00:03:26,020 So we'll just call that input var input equals prompt. 48 00:03:26,460 --> 00:03:30,030 What would you like to do. 49 00:03:31,470 --> 00:03:37,000 And then the next step is to just check what input is if input is LIST. 50 00:03:37,020 --> 00:03:41,660 We're going to do one thing if input is new we're going to do something else. 51 00:03:41,700 --> 00:03:50,310 So let's try that if input and let's start by just checking if it's equal to list. 52 00:03:50,700 --> 00:03:58,050 If that's the case we're just going to cancel don't log all to do just like that. 53 00:03:58,860 --> 00:04:08,910 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 54 00:04:08,910 --> 00:04:11,040 if this works. 55 00:04:11,040 --> 00:04:13,120 So to check if it works will refresh. 56 00:04:13,320 --> 00:04:19,510 And all we need to do is type list and we should see our array that says buy new turtle. 57 00:04:19,650 --> 00:04:25,530 However if we type something else anything else we don't see anything because our code only runs if 58 00:04:25,530 --> 00:04:27,680 input is equal to list. 59 00:04:28,500 --> 00:04:29,780 So there's that. 60 00:04:29,820 --> 00:04:33,170 The next step is to add another condition. 61 00:04:33,200 --> 00:04:33,730 Let's just do. 62 00:04:33,720 --> 00:04:37,740 Else if input equals new. 63 00:04:38,400 --> 00:04:46,260 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 64 00:04:46,260 --> 00:04:48,080 to do's array. 65 00:04:48,960 --> 00:04:55,200 So to ask for the new to do we just use prompt for our new to do equals prompt. 66 00:04:56,370 --> 00:05:03,340 Enter new to do and then to add it to the Dewes array we have a lot of options. 67 00:05:03,360 --> 00:05:05,860 I'm going to add it to the end of the array. 68 00:05:05,970 --> 00:05:10,680 So all used to use up push new to do. 69 00:05:10,680 --> 00:05:13,670 So that's all that we need to do here to make this work. 70 00:05:13,680 --> 00:05:20,940 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 71 00:05:20,940 --> 00:05:29,300 enter a new to do let's do WOC new turtle and if I hit Enter I'm done. 72 00:05:29,700 --> 00:05:32,220 I actually don't have a way of checking if it worked. 73 00:05:32,550 --> 00:05:38,850 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 74 00:05:38,850 --> 00:05:42,470 a way of using the list command to print them out. 75 00:05:42,780 --> 00:05:47,390 And that's because right now we're just asking one time what would you like to do. 76 00:05:47,430 --> 00:05:49,990 So the next step is to get this to repeat. 77 00:05:50,130 --> 00:05:55,210 We wanted to keep asking over and over and over until the user types quit. 78 00:05:55,230 --> 00:05:58,750 So hopefully that screams out to you that we should be using a loop. 79 00:05:58,860 --> 00:06:02,200 We want to do something over and over until the condition is true. 80 00:06:02,640 --> 00:06:08,070 So the loop that we want to write is going to be a while loop and the condition is going to be while 81 00:06:08,130 --> 00:06:12,570 input is not equal to quit. 82 00:06:12,780 --> 00:06:17,720 So when it's anything else besides quit we're going to run this code. 83 00:06:18,420 --> 00:06:20,760 And then afterwards I'll come to that blog. 84 00:06:21,070 --> 00:06:27,470 OK you quit the app so that we just see some feedback. 85 00:06:27,630 --> 00:06:31,370 So we'll only see this line once this is done. 86 00:06:31,620 --> 00:06:39,120 So that means the user has typed quick and then inside of here at the bottom we're going to ask again 87 00:06:39,240 --> 00:06:40,420 for new input. 88 00:06:40,690 --> 00:06:45,600 And at the top we're going to handle input. 89 00:06:45,600 --> 00:06:51,540 So we're going to start by asking the user for input one time and then I'm going to move this code into 90 00:06:51,540 --> 00:06:52,020 the loop 91 00:06:55,290 --> 00:06:57,860 just like this. 92 00:06:58,020 --> 00:07:03,950 So I'm going to ask them one time what would you like to do is input equal to quit. 93 00:07:04,050 --> 00:07:05,760 Hopefully they don't quit right away. 94 00:07:05,820 --> 00:07:08,810 But if they do we just get OK you quit. 95 00:07:09,030 --> 00:07:13,850 But if they don't type quit we're going to check to day type list did they type new. 96 00:07:14,280 --> 00:07:22,140 And then the very last thing is that we need to ask again for new input so to ask again for new input 97 00:07:22,140 --> 00:07:22,170 . 98 00:07:22,170 --> 00:07:28,040 All that we need to do is copy this line down just like that. 99 00:07:28,110 --> 00:07:30,440 So I'm going to make this a little bit bigger. 100 00:07:31,590 --> 00:07:38,130 So here we're asking for input again and that will start to loop over and all check is input equal to 101 00:07:38,130 --> 00:07:39,310 quit this time. 102 00:07:39,600 --> 00:07:41,180 Yes then we're done. 103 00:07:41,580 --> 00:07:42,990 So let's try that out. 104 00:07:43,230 --> 00:07:46,590 Going to refresh the page what would you like to do. 105 00:07:47,010 --> 00:07:55,220 Let's do new hires are new to do feed new turtle What would you like to do. 106 00:07:55,260 --> 00:07:57,430 It asked me again first. 107 00:07:57,870 --> 00:08:00,930 So now I have those two to do's inside my to do list. 108 00:08:00,990 --> 00:08:04,810 Now let's try quitting and we get OK. 109 00:08:04,830 --> 00:08:05,800 You quit the app. 110 00:08:06,090 --> 00:08:10,160 So I typed quit this condition suddenly it was true and then we're done. 111 00:08:10,380 --> 00:08:14,760 So let's just form this little bit better and then things properly. 112 00:08:15,150 --> 00:08:17,500 So that's it for our basic to do list for now. 113 00:08:17,700 --> 00:08:22,320 Shortly we're going to add some extra features and some other commands but we need to learn a few new 114 00:08:22,320 --> 00:08:24,140 things about arrays before we can do that.