1 00:00:00,150 --> 00:00:01,260 Hey, welcome back. 2 00:00:01,290 --> 00:00:05,730 This is a challenge that's going to wrap up all of the stuff that we've learned in the earlier lessons. 3 00:00:05,940 --> 00:00:11,670 So the objective of this challenge is to add items to an existing list, or you can create a brand new 4 00:00:11,670 --> 00:00:18,390 list and have the ability to click the items in order to add a straight through to those list items 5 00:00:18,660 --> 00:00:22,560 so you can add them dynamically as well as have some existing ones. 6 00:00:22,830 --> 00:00:26,940 Also create an input that can add new items to the list. 7 00:00:27,180 --> 00:00:33,560 And then also within the list items added an X in order to remove the items from the list. 8 00:00:33,840 --> 00:00:40,860 So using the class of red, this can be the one that gets added in whenever it gets clicked, adds the 9 00:00:40,860 --> 00:00:44,640 class of red to it, which will show the strikethrough. 10 00:00:44,670 --> 00:00:45,330 What color? 11 00:00:45,330 --> 00:00:47,790 Red also update the background color. 12 00:00:48,030 --> 00:00:54,270 And when there's an X and if the X gets clicked, then you need to remove that element from the list 13 00:00:54,510 --> 00:00:56,580 from the visible area as well. 14 00:00:56,880 --> 00:01:03,070 With the input, you can select the contents from the input and also listen for the enter key. 15 00:01:03,100 --> 00:01:06,260 So no need for a button in order to add items to the list. 16 00:01:06,480 --> 00:01:12,030 All we're going to do is listen for the entire key, which was key code number 13, and that's going 17 00:01:12,030 --> 00:01:18,810 to invoke the function to make a new item and making new item using create element, creating a list 18 00:01:18,810 --> 00:01:23,510 item, adding it to the unordered list with the content that's contained within the text area. 19 00:01:23,850 --> 00:01:25,770 So I know that was quite a bit of instructions. 20 00:01:25,920 --> 00:01:27,300 You can go out and try this. 21 00:01:27,510 --> 00:01:34,590 I'll show you the solution code and also walk you through as we create this little mini application 22 00:01:34,710 --> 00:01:35,520 and I'll walk you through. 23 00:01:35,520 --> 00:01:38,280 The solution coming up was fairly complex. 24 00:01:38,280 --> 00:01:43,680 So I did want to show you a quick example of what we want to create in this challenge. 25 00:01:43,920 --> 00:01:47,280 So we have a default list, bananas, milk, bread. 26 00:01:47,520 --> 00:01:52,490 When we click the items, we get a strikethrough and that's adding in the class of red. 27 00:01:52,710 --> 00:01:58,020 We also get this option of an X, so that gives us the ability to remove the item from the list. 28 00:01:58,200 --> 00:02:03,480 If we remove something that we want to add in or if we want something new that we want to add in, we 29 00:02:03,480 --> 00:02:07,890 can always add in as many items as we want into the list and clicking these. 30 00:02:07,890 --> 00:02:09,380 They're all going to function the same way. 31 00:02:09,480 --> 00:02:14,760 And when you click them again, it's all it's doing is toggling that class of red on and off of that 32 00:02:14,760 --> 00:02:15,210 element. 33 00:02:15,390 --> 00:02:19,500 So go ahead, pause the video, try it out and walk you through the solution. 34 00:02:19,500 --> 00:02:22,860 First of all, make sure that you do have an updated index file. 35 00:02:22,860 --> 00:02:25,530 You can use an unordered list as long as you've got an input. 36 00:02:25,680 --> 00:02:29,910 We've given this input a name of new item as well as updated the style. 37 00:02:30,090 --> 00:02:33,450 So once you're done that, you're ready to move on to the JavaScript. 38 00:02:33,690 --> 00:02:36,270 So first we want to do is select the input. 39 00:02:36,630 --> 00:02:43,200 We can call it input, select selecting the documents and query selector. 40 00:02:43,950 --> 00:02:46,080 So we're only selecting that one element. 41 00:02:46,320 --> 00:02:49,230 And the element that we're selecting is in input. 42 00:02:49,530 --> 00:02:52,260 So making sure that that input has a name. 43 00:02:53,850 --> 00:03:00,510 Of new item and I'm going to single coat because I've already used the double coat and double and refresh. 44 00:03:02,130 --> 00:03:06,830 And we'll make sure that we did select the element properly, so we do have the proper element selected, 45 00:03:07,230 --> 00:03:07,800 so that's good. 46 00:03:07,810 --> 00:03:10,110 And we could also use input because we only have the one. 47 00:03:10,350 --> 00:03:13,920 But of course, we want to make this ability to extend on it. 48 00:03:15,120 --> 00:03:18,540 This is our main list, so we need to select that element. 49 00:03:18,720 --> 00:03:22,710 This is where we're going to be adding the new elements, the new content to the list. 50 00:03:23,040 --> 00:03:28,710 So using the query selector and we only have the one unordered list, so we don't have to be that specific 51 00:03:28,710 --> 00:03:29,040 with it. 52 00:03:29,280 --> 00:03:33,880 And again, refresh and just make sure that we do have the right elements. 53 00:03:33,900 --> 00:03:35,150 We do have the unordered list. 54 00:03:35,310 --> 00:03:37,800 There are some existing items in the list as well. 55 00:03:39,280 --> 00:03:49,150 So let's first go through that list, so creating a list, all list items and using document, because 56 00:03:49,150 --> 00:03:52,690 we do need to add the same functionality to the existing ones. 57 00:03:53,080 --> 00:03:55,020 So we've got all of the list items. 58 00:03:55,330 --> 00:04:02,260 So we want to loop through all of them selecting out any of the elements that have list that are list 59 00:04:02,260 --> 00:04:02,650 items. 60 00:04:03,970 --> 00:04:12,550 And let's add our loop, where we're looping through X equals zero, and while X is less than all list 61 00:04:12,570 --> 00:04:21,420 items length and then incrementing X, and then as we loop through, we can do all list items X. 62 00:04:22,570 --> 00:04:24,670 An odd event listener to that. 63 00:04:25,720 --> 00:04:31,780 And that we're going to listen for is a click and if it's clicked, that we're going to invoke a function 64 00:04:32,320 --> 00:04:33,640 and we'll create that function now. 65 00:04:33,640 --> 00:04:40,540 So that one is just called my this one is going to toggle the class of the element and let's set up 66 00:04:40,540 --> 00:04:46,990 a variable where we're going to have this class list and we're going to toggle it. 67 00:04:47,110 --> 00:04:49,080 So toggling the class of red. 68 00:04:49,090 --> 00:04:50,150 So see what that looks like. 69 00:04:50,410 --> 00:04:53,150 So now when I click it, we see we get that strikethrough. 70 00:04:53,230 --> 00:04:58,140 So all it's really doing is adding in the class and removing it as I'm clicking and toggling. 71 00:04:58,330 --> 00:05:01,470 I also want to have the ability to remove these elements. 72 00:05:01,480 --> 00:05:04,840 So I want to add in an option there to add a new one. 73 00:05:04,990 --> 00:05:08,620 And we can do that by adding in another element in there. 74 00:05:08,620 --> 00:05:09,700 So that can be. 75 00:05:11,350 --> 00:05:16,550 So if it's toggled to read, they don't want to add in the option to remove it. 76 00:05:17,230 --> 00:05:19,330 So let's let's create a span. 77 00:05:20,080 --> 00:05:24,430 This is a document create element and the element that we're creating as a spam. 78 00:05:24,580 --> 00:05:30,700 So within the span, there's going to be an X and clicking on that X is going to allow the user to remove 79 00:05:30,700 --> 00:05:31,390 this element. 80 00:05:32,530 --> 00:05:34,690 And we could just make it an uppercase X. 81 00:05:35,110 --> 00:05:38,940 And on the spane itself, this is where we're adding another event listener. 82 00:05:38,960 --> 00:05:43,900 So we're gonna have two different event listeners and this one is going to be listening for the click 83 00:05:43,900 --> 00:05:44,320 as well. 84 00:05:44,500 --> 00:05:51,250 And when it gets clicked, we'll just do an anonymous function within the listener and we're going to 85 00:05:51,280 --> 00:05:55,050 use this elements and then we're going to navigate up to the parent. 86 00:05:55,840 --> 00:06:02,620 You can also do this remove, but I usually find that navigate up to the parent and then removing the 87 00:06:02,620 --> 00:06:08,050 parent is the way to navigating up to the parent and removing the parent is the way to go. 88 00:06:08,350 --> 00:06:13,300 Because, of course, this is a span that's going to be contained within the parent and the parent is 89 00:06:13,300 --> 00:06:13,930 the list item. 90 00:06:13,930 --> 00:06:16,870 So we want to move up to the list item and do the removal. 91 00:06:16,870 --> 00:06:20,700 And that's why we've got this parent element and we're doing the remove. 92 00:06:21,010 --> 00:06:25,900 And then lastly, we're taking this and we're spending a child to it. 93 00:06:26,020 --> 00:06:31,000 And the child that we're spending is the span that we just created. 94 00:06:31,330 --> 00:06:34,500 And this isn't actually care sector, it's create element. 95 00:06:34,510 --> 00:06:35,460 So it was my mistake. 96 00:06:35,710 --> 00:06:40,150 So that one should be create element because we are creating an element, not selecting an existing 97 00:06:40,150 --> 00:06:40,360 one. 98 00:06:40,390 --> 00:06:41,380 So that's the difference there. 99 00:06:41,380 --> 00:06:42,790 So make sure you make that correction. 100 00:06:43,980 --> 00:06:45,190 And I do apologize. 101 00:06:45,330 --> 00:06:46,170 Let's try that out. 102 00:06:47,340 --> 00:06:53,100 So now whenever we click it, we get this X and when I click the X, it removes the element and also 103 00:06:53,100 --> 00:06:56,110 maybe let's add in a little bit of space there as well. 104 00:06:56,850 --> 00:07:03,420 So, again, whenever we click it and we can always toggle off that click and we've got the Xs there 105 00:07:03,660 --> 00:07:10,170 and we should also check to see if it does contain a span and if it does contain the span, then we're 106 00:07:10,170 --> 00:07:15,570 not going to add another one in as we're toggling and we want to remove it out as well. 107 00:07:15,870 --> 00:07:23,280 So we can do that if temp is true, because remember, we're getting returned back a boolean value. 108 00:07:23,670 --> 00:07:26,670 So that means that either it's true or false. 109 00:07:26,850 --> 00:07:35,060 And if it's false, then we're going to do get elements by tag name and selecting the element spane. 110 00:07:35,070 --> 00:07:40,650 So if it does exist, then we're going to select any spane that's contained within the element and then 111 00:07:40,650 --> 00:07:41,220 remove it. 112 00:07:42,790 --> 00:07:43,810 So see what that looks like. 113 00:07:44,520 --> 00:07:50,280 So we have our X and then when we unclick the X disappears and then the X still has that functionality 114 00:07:50,280 --> 00:07:50,670 that we need. 115 00:07:50,700 --> 00:07:56,250 So now that we've deleted everything from our list, we need a way to add new items into the list other 116 00:07:56,250 --> 00:07:57,600 than refresh the page. 117 00:07:57,600 --> 00:07:58,790 So I show you how to do that. 118 00:07:58,830 --> 00:08:00,870 That's going to come up in the next lesson.