1 00:00:00,780 --> 00:00:07,740 All right guys so in this project we're going to continue on with the the UI that we used in the last 2 00:00:07,740 --> 00:00:09,900 section to explore the dorm. 3 00:00:09,900 --> 00:00:15,840 And we're going to make it an actual application where we can add task where we can list them we can 4 00:00:15,840 --> 00:00:21,660 filter through them delete them and also persist them to local storage so that they get saved they don't 5 00:00:21,660 --> 00:00:24,120 just disappear when we reload the page. 6 00:00:24,390 --> 00:00:24,690 All right. 7 00:00:24,690 --> 00:00:29,410 Now I want to start from absolute scratch I know we already had the UI but there's going to be a little 8 00:00:29,690 --> 00:00:31,970 of a few differences. 9 00:00:32,010 --> 00:00:38,810 So I wanted to just start from scratch with this project so let's create a folder called Task List. 10 00:00:39,270 --> 00:00:46,590 And inside there let's actually open it up with the code or whatever text editor you want and we're 11 00:00:46,590 --> 00:00:53,130 going to create our two files which are index start each DML and app dot. 12 00:00:54,210 --> 00:00:59,210 OK and in the index each team now we're going to create our UI. 13 00:00:59,250 --> 00:00:59,570 OK. 14 00:00:59,580 --> 00:01:01,990 So let's go ahead and add with Emett. 15 00:01:02,010 --> 00:01:10,890 We'll just add some basic head and body tags in the title here I'm just going to say task list and we 16 00:01:10,890 --> 00:01:17,940 want to include materialized so if you go to a materialized CSSA dot com to get started we want to grab 17 00:01:17,940 --> 00:01:24,590 the CSSA link right here and throw that right above the title. 18 00:01:24,720 --> 00:01:32,310 We also want the javascript to link here and we're going to throw that down the bottom right above the 19 00:01:32,790 --> 00:01:38,810 ending body tag now materialize also needs a query as a dependency. 20 00:01:38,910 --> 00:01:41,540 So we're going to search for Gigue queries CDN 21 00:01:44,170 --> 00:01:52,390 and we're going to grab or just grab version 3 uncompressed and grab the script and we'll put that. 22 00:01:52,390 --> 00:01:58,880 Make sure you put it above the materialize and then last external script we need is font Awesomes. 23 00:01:58,910 --> 00:02:00,250 I'm going to search for font. 24 00:02:00,250 --> 00:02:05,310 Awesome see the end this first link here. 25 00:02:05,460 --> 00:02:10,260 And let's just grab this link right here and put that. 26 00:02:10,630 --> 00:02:14,380 Let's put that right below materialize. 27 00:02:14,760 --> 00:02:16,300 All right so we'll save this. 28 00:02:16,330 --> 00:02:18,520 And let's open it with a live server. 29 00:02:19,770 --> 00:02:25,920 Or of course you could just open it from your file system and we just have a blank page. 30 00:02:26,200 --> 00:02:29,560 So let's go ahead and go into the body. 31 00:02:29,650 --> 00:02:34,660 Actually before I do that before I forget let's go down to the bottom here and put in our script tag 32 00:02:34,660 --> 00:02:41,110 for our app J.S. file that we seem to forget that. 33 00:02:41,140 --> 00:02:46,390 So now in the body we're going to have a container is going to be very very similar to what we've been 34 00:02:46,390 --> 00:02:47,370 doing. 35 00:02:47,530 --> 00:02:59,200 We've been working with we're going to have a row inside here we'll have a call class with an S 12 class. 36 00:02:59,200 --> 00:03:05,110 And inside here we'll have a div with the idea of Main in the class of card. 37 00:03:05,190 --> 00:03:05,500 OK. 38 00:03:05,510 --> 00:03:07,060 Card is going to give it a border. 39 00:03:07,080 --> 00:03:10,620 Give it some padding box shadow things like that. 40 00:03:10,750 --> 00:03:17,230 And then inside there we'll have a class called Card content inside the card content. 41 00:03:17,230 --> 00:03:23,950 We're going to have our title which is going to go in a span with the class of card dash title. 42 00:03:23,960 --> 00:03:27,930 And here we're going to just say Task List. 43 00:03:27,970 --> 00:03:32,500 All right so if I save that so far it's going to look like this. 44 00:03:32,500 --> 00:03:42,400 All right so now let's go under the span and let's put in another row excuse me another rogue class 45 00:03:43,060 --> 00:03:46,570 and inside the row we'll have our form. 46 00:03:46,810 --> 00:03:55,540 So the form is going to have an ID of task Dasch form no action. 47 00:03:55,540 --> 00:04:03,990 And then inside the form we just want one field which will be wrapped in a div with an input Dasch field 48 00:04:04,000 --> 00:04:08,660 class also a call and an S 12 class. 49 00:04:09,120 --> 00:04:13,240 OK and then in here we'll have an input type text. 50 00:04:13,440 --> 00:04:24,210 And let's give it a name we'll give it a name of task and an ID of task. 51 00:04:24,370 --> 00:04:27,300 All right and then under that we'll have the label 52 00:04:30,790 --> 00:04:43,500 so label for task and we'll just say Task Name or I should say new task. 53 00:04:43,970 --> 00:04:44,630 All right. 54 00:04:44,710 --> 00:04:52,720 And then under this div we're going to have the input which is going to be a submit value will say add 55 00:04:53,240 --> 00:04:58,110 task and then we'll give it a class of between. 56 00:04:58,110 --> 00:04:59,310 All right let's save that. 57 00:04:59,320 --> 00:05:00,740 And that's what it should look like. 58 00:05:02,470 --> 00:05:04,810 So now we want to go under. 59 00:05:05,200 --> 00:05:11,830 Let's see we're going to go under the card content which ends right here and we're going to have a class 60 00:05:12,220 --> 00:05:17,640 called Card dash action like that. 61 00:05:17,810 --> 00:05:28,620 And in this card action we're going to have an H 5 which we're going to give an ID of task to dash title. 62 00:05:28,910 --> 00:05:32,310 Sure if we need that but we'll just put it anyway. 63 00:05:32,770 --> 00:05:38,570 All right so we have our age 5 then we want to have a filter input. 64 00:05:38,680 --> 00:05:43,870 OK because what I want to do is I want to have our list of tasks and I want to be able to filter through 65 00:05:43,870 --> 00:05:44,600 them. 66 00:05:44,680 --> 00:05:50,800 So as we type that will filter through the list so what are we going to do is copy this div with the 67 00:05:50,800 --> 00:05:52,260 input. 68 00:05:52,450 --> 00:05:54,390 We don't actually need a form tag. 69 00:05:54,430 --> 00:05:55,410 We're not submitting it. 70 00:05:55,420 --> 00:06:00,600 It's going to be just a dynamic input but we're going to change the name to filter 71 00:06:03,130 --> 00:06:05,950 and we're going to change the ID to filter 72 00:06:08,760 --> 00:06:09,100 right. 73 00:06:09,120 --> 00:06:18,230 And then let's change this to filter and we'll say filter tasks. 74 00:06:18,840 --> 00:06:19,170 All right. 75 00:06:19,170 --> 00:06:28,080 And then underneath the div right here will be a UL and we're going to give the class of collection. 76 00:06:28,080 --> 00:06:32,430 So that's going to be where our list items will be put in dynamically. 77 00:06:32,430 --> 00:06:32,760 All right. 78 00:06:32,760 --> 00:06:35,440 And then under that we just want to clear tasks. 79 00:06:35,460 --> 00:06:37,400 Button which will actually be a link. 80 00:06:37,470 --> 00:06:43,550 So we'll do a tag with the class of clear Dasch tasks. 81 00:06:43,680 --> 00:06:51,720 Also a class of DTN and also a class of black which will make the button black OK and the ATF will just 82 00:06:51,720 --> 00:06:57,570 be a hash and then the text will just say clear tasks. 83 00:06:57,580 --> 00:07:01,210 I would save that and there we go. 84 00:07:01,230 --> 00:07:04,240 So that should do it for the UI. 85 00:07:04,350 --> 00:07:15,850 So now it's good our app Jay X-File and from here what I want to do first is define our UI variables. 86 00:07:16,320 --> 00:07:18,260 So define UI vars. 87 00:07:18,360 --> 00:07:27,300 So one will be the form I'm going to put it in a variable called form set it to document dot and let's 88 00:07:27,300 --> 00:07:30,400 use query selector. 89 00:07:30,930 --> 00:07:34,710 You can use it you can use get element Abidi if you want to. 90 00:07:34,980 --> 00:07:38,090 If you do use query selector make sure you put the hash in there. 91 00:07:38,370 --> 00:07:42,090 And that's called Task Form. 92 00:07:42,150 --> 00:07:47,430 We also want the task list which is going to be the UL. 93 00:07:47,700 --> 00:07:52,480 So document Daut query selector. 94 00:07:53,130 --> 00:08:00,110 Now that has a class of collections so we're going to say Daut collection. 95 00:08:00,320 --> 00:08:05,050 The next thing we want is the clear button say clear between 96 00:08:07,500 --> 00:08:09,130 these queries selector 97 00:08:11,870 --> 00:08:18,180 and that have a class of cleared dash tasks. 98 00:08:19,280 --> 00:08:21,760 And then let's grab the filter 99 00:08:27,780 --> 00:08:32,550 so that the query selector and that was an ID of filter. 100 00:08:33,150 --> 00:08:35,750 And then last one is going to be the task input 101 00:08:42,320 --> 00:08:48,280 so that all the queries selector and that was in the ID of task. 102 00:08:48,770 --> 00:08:51,590 OK so task input is this right here. 103 00:08:51,760 --> 00:08:58,290 Filter's this Claire button task list will be the UL and in the form and this form here. 104 00:08:58,460 --> 00:09:02,500 So those are the UI variables that we're going to need. 105 00:09:02,570 --> 00:09:08,660 Now we're going to need to submit on the on the form on the task form instead of just putting it in 106 00:09:08,660 --> 00:09:21,710 the global scope though I'm going to call a function to load all event listeners so will say load and 107 00:09:23,540 --> 00:09:24,320 listeners 108 00:09:30,430 --> 00:09:36,130 them will create that function. 109 00:09:37,060 --> 00:09:45,070 And inside here let's do the ad task form or add task event. 110 00:09:45,160 --> 00:09:49,690 So we're going to take that form variable we created and call an event listener. 111 00:09:50,050 --> 00:09:56,650 And in here we're going to say submit a call a function called add task 112 00:10:00,130 --> 00:10:02,680 case so to create that function. 113 00:10:06,120 --> 00:10:11,520 And now this will take in an event object here. 114 00:10:11,540 --> 00:10:19,340 Since it's an event handler and we want to make sure that we prevent the default from happening the 115 00:10:19,370 --> 00:10:27,140 default behavior which is a form submit and then and here let's make sure that there's actually a value 116 00:10:27,140 --> 00:10:27,430 here. 117 00:10:27,430 --> 00:10:30,130 So we'll put a quick if statement here. 118 00:10:30,560 --> 00:10:40,170 And let's say if task input Daut value is equal to nothing. 119 00:10:40,290 --> 00:10:48,230 OK so if nothing's entered then let's just do an alert and let's say I had a task. 120 00:10:48,230 --> 00:10:52,470 So if I go ahead and save and I try to click this we get out a task. 121 00:10:52,610 --> 00:10:56,060 If I put something in nothing happens. 122 00:10:56,150 --> 00:10:56,480 All right. 123 00:10:56,480 --> 00:11:02,340 Now what do we want to happen when we actually add a task we want to create a list item right. 124 00:11:02,390 --> 00:11:05,190 So we're going to have to create that from scratch. 125 00:11:05,240 --> 00:11:09,310 So let's say create ally element. 126 00:11:09,650 --> 00:11:21,340 So Konst ally and we'll set that to document Daut create element we want to create an ally element. 127 00:11:21,340 --> 00:11:32,270 All right then we want to add a class so I don't class name is going to equal collection item. 128 00:11:32,360 --> 00:11:38,350 OK we're doing that because in materialise if you want it to all the are you else to look good your 129 00:11:38,380 --> 00:11:44,510 UL should have a class of collection which it does and each list item should have a class of collection 130 00:11:44,540 --> 00:11:46,110 item. 131 00:11:46,130 --> 00:11:46,440 All right. 132 00:11:46,460 --> 00:11:48,990 Now we want to create the text node. 133 00:11:50,210 --> 00:12:02,360 Let's say create text node and append to the ally so we can do that by saying ally Daut of penned child 134 00:12:03,500 --> 00:12:10,810 and then to create a text no we say document Daut create text node. 135 00:12:11,090 --> 00:12:16,910 And and here we want whatever is passed into the input to be the text node so that would be task input 136 00:12:17,300 --> 00:12:19,670 Daut value. 137 00:12:20,610 --> 00:12:28,350 OK next thing we want to do is create a new link element because we're going to have that X link that 138 00:12:29,500 --> 00:12:32,620 that delete link that icon. 139 00:12:32,630 --> 00:12:46,280 So I'd say add or no say create new link element so will say Konst link equals document Daut create 140 00:12:46,310 --> 00:12:56,190 elements and we want to create in a tag then we want to add the class to that. 141 00:12:56,300 --> 00:13:03,350 So we'll say link dog class name equals and it's going to be delete 142 00:13:06,290 --> 00:13:15,980 delete item and also secondary content. 143 00:13:16,790 --> 00:13:23,720 OK because if you want something to the right of a list item in materialize it has to have the secondary 144 00:13:23,720 --> 00:13:25,900 content class. 145 00:13:25,940 --> 00:13:37,670 All right then we just want to add the icon HVM else so link got in or HDMI all the goals and that's 146 00:13:37,670 --> 00:13:39,760 going to be our eye tag. 147 00:13:40,280 --> 00:13:49,180 We're going to give it a class of FAA and FAA Dasch remove which is an X mark icon. 148 00:13:49,700 --> 00:13:52,640 Double quote should be read here. 149 00:13:52,660 --> 00:13:54,710 So that's the inner aged him now. 150 00:13:54,860 --> 00:14:05,390 Then we want to append the link to the ally and we can do that with Alwi dog pand child and pasand the 151 00:14:05,390 --> 00:14:06,600 link. 152 00:14:07,310 --> 00:14:07,910 OK. 153 00:14:08,240 --> 00:14:18,240 So then what we want to do is a pen the ally to the UL. 154 00:14:18,950 --> 00:14:19,320 All right. 155 00:14:19,340 --> 00:14:29,390 Because up to this point if we were to console log ally if we go on here and we say my task open up 156 00:14:29,390 --> 00:14:39,500 our console submit we get an ally class collection item inside we have the text node then we have the 157 00:14:39,500 --> 00:14:45,300 link inside the link we have our tag so everything is there everything is formatted. 158 00:14:45,440 --> 00:14:47,940 We just need to simply append it to the UL. 159 00:14:48,140 --> 00:14:58,060 So we're going to say task list because that's what we defined up here as well with the class of collection. 160 00:14:58,490 --> 00:15:04,070 And then we just want to do a append child lie. 161 00:15:04,710 --> 00:15:18,940 And then once we do that let's clear the input by simply saying task input Daut value equals nothing. 162 00:15:18,980 --> 00:15:19,760 And that should do it. 163 00:15:19,760 --> 00:15:26,360 So let's save let's go over here and let's say task 1 AD and there it is. 164 00:15:26,360 --> 00:15:29,060 Task One said task to 165 00:15:31,790 --> 00:15:33,160 task three. 166 00:15:33,170 --> 00:15:35,210 There we go very low. 167 00:15:35,210 --> 00:15:38,830 It's going to go away because it's not persisting it's just in the UI. 168 00:15:39,050 --> 00:15:41,490 But we can now add tasks. 169 00:15:41,510 --> 00:15:46,760 All right so in the next video what I want to do is make it so that we can click the delete button that's 170 00:15:46,760 --> 00:15:52,400 there so that we can delete tasks as well as filter through them and clear them.