1 00:00:00,510 --> 00:00:05,460 I always suggest that before you conclude your application, that you try it out and make sure you've 2 00:00:05,460 --> 00:00:07,980 got all of the functionality that you're expecting. 3 00:00:08,010 --> 00:00:09,930 So this is the application that we built out. 4 00:00:09,930 --> 00:00:15,630 And we can click on the Arrow Keys and you can see that they all get registered and registered within 5 00:00:15,630 --> 00:00:16,290 a sequence. 6 00:00:16,500 --> 00:00:18,960 So they press either space or enter. 7 00:00:19,260 --> 00:00:23,370 This element is going to run through the sequence and take the appropriate actions. 8 00:00:23,400 --> 00:00:24,780 We also have an option. 9 00:00:24,780 --> 00:00:30,180 If we've made a mistake here and we don't want something in our sequence, we can always remove it out 10 00:00:30,180 --> 00:00:30,930 of the sequence. 11 00:00:30,960 --> 00:00:32,130 So now let's try it out. 12 00:00:32,130 --> 00:00:38,760 And you can see that as the sequence is running, I also have an option to continuously add in items 13 00:00:38,760 --> 00:00:43,740 and this adds that into the array and it still makes them all functional where I can remove them out 14 00:00:43,740 --> 00:00:50,610 as well as it simply just runs whatever the next one is that's available in the array until the RE finally 15 00:00:50,610 --> 00:00:51,270 concludes. 16 00:00:51,390 --> 00:00:54,580 And then that's where it stops and stops executing. 17 00:00:54,630 --> 00:00:57,900 So we've got all the functionality that we set out to include. 18 00:00:57,930 --> 00:01:03,300 So let's go through and run through the code that we've used in order to build the application. 19 00:01:03,390 --> 00:01:10,250 Did this all in JavaScript because of course, the focus of this course and this section is JavaScript. 20 00:01:10,260 --> 00:01:15,920 So we'll really want to focus on getting familiar with JavaScript, updating styles, creating elements. 21 00:01:15,930 --> 00:01:21,510 And one of the first things that we did is so we've set up listening for Dom content loaded and then 22 00:01:21,510 --> 00:01:22,770 we created an element. 23 00:01:22,770 --> 00:01:28,410 And that's this box here that we are going to be using as our element that we're maneuvering in the 24 00:01:28,410 --> 00:01:30,270 upcoming parts of the course. 25 00:01:30,480 --> 00:01:34,460 And then we also apply a bunch of style properties to it. 26 00:01:34,470 --> 00:01:36,030 So we add some text to it. 27 00:01:36,060 --> 00:01:42,330 So there's some text by default inside of the box, as well as default positioning colors and a whole 28 00:01:42,330 --> 00:01:43,660 bunch of really cool things. 29 00:01:43,680 --> 00:01:49,200 So there was really here to highlight all the options that you have available to Earth and style, and 30 00:01:49,200 --> 00:01:51,900 there are just as many as you would expect with success. 31 00:01:52,030 --> 00:01:54,480 You can do it all in JavaScript, of course, if you want. 32 00:01:54,510 --> 00:01:59,670 And then lastly, we append the newly freshly created element to the page. 33 00:01:59,790 --> 00:02:05,340 And you can also go to inspect and you can see that when you inspect it, you've got all of the style 34 00:02:05,340 --> 00:02:07,410 properties have been added to that element. 35 00:02:07,420 --> 00:02:11,350 So they're all sitting there within the element and you can see all of the ones that were added. 36 00:02:11,370 --> 00:02:13,500 We also created another element. 37 00:02:13,530 --> 00:02:18,020 So this was the one where we could list out the functions that we want to run. 38 00:02:18,030 --> 00:02:20,070 So we simply created that and appended that. 39 00:02:20,100 --> 00:02:22,020 So there's just sitting as a blank div. 40 00:02:22,170 --> 00:02:23,940 There's nothing inside of it yet. 41 00:02:23,940 --> 00:02:29,190 And we do add in the visible part of the actions that are to be taken within this div. 42 00:02:29,280 --> 00:02:32,880 Next, we set up the ability to listen for a key down. 43 00:02:33,060 --> 00:02:38,150 So any key presses that are done within that document element body. 44 00:02:38,160 --> 00:02:41,510 So anywhere within the document when it's open, let's click down. 45 00:02:41,670 --> 00:02:43,110 We're listening for key presses. 46 00:02:43,260 --> 00:02:48,900 If you're off, focus on that, then it's obviously not going to be listening for key presses because 47 00:02:48,900 --> 00:02:51,660 it's only listening while you're active on the document. 48 00:02:51,660 --> 00:02:56,400 We prevent the default action of the key and then we get the key code of the key. 49 00:02:56,580 --> 00:03:00,870 So the key code is a number that's associated with every key from your keyboard. 50 00:03:00,870 --> 00:03:03,450 And then we look to see which Key got pressed. 51 00:03:03,600 --> 00:03:06,300 And specifically we're looking for the Arrow keys. 52 00:03:06,300 --> 00:03:13,280 Or when Cius pressed see is the colors 67 are is a random movement that when we press. 53 00:03:13,470 --> 00:03:14,620 So that's eighty two. 54 00:03:14,910 --> 00:03:18,960 So you can see that the background color is changing and this is just a random color. 55 00:03:19,170 --> 00:03:24,240 And this was a function that was introduced to show you how you can use math in order to generate a 56 00:03:24,240 --> 00:03:25,680 random hex string. 57 00:03:25,690 --> 00:03:27,780 And so we go through all the key combinations. 58 00:03:27,780 --> 00:03:34,770 And then lastly, we're listening for space or enter, which start the moving process and start invoking 59 00:03:34,770 --> 00:03:37,880 all of the pattern that we've set out for that element to move. 60 00:03:37,890 --> 00:03:42,330 And this is the moving function where we've got it self-contained. 61 00:03:42,330 --> 00:03:44,370 So we're getting that elements position. 62 00:03:44,490 --> 00:03:48,270 We're taking it out of the array that we built. 63 00:03:48,270 --> 00:03:51,960 So the fun list is the array with all the commands that have been added in. 64 00:03:51,960 --> 00:03:57,670 We're getting the elements are the ones that actually get placed within the array. 65 00:03:57,780 --> 00:04:02,820 So this is what we're removing and that's why we've got text content that we can pull back. 66 00:04:02,820 --> 00:04:07,320 And then we've added in a function at the end where we've changed it in where we're replacing all the 67 00:04:07,320 --> 00:04:12,810 plus signs, because as you can see, the elements going to contain the plus plus the command. 68 00:04:12,810 --> 00:04:14,310 And we don't want the plus sign. 69 00:04:14,430 --> 00:04:15,460 We want to remove it out. 70 00:04:15,480 --> 00:04:17,640 So that's where we've got that replace plus there. 71 00:04:17,640 --> 00:04:20,940 And then what we do is remove it from the visible part. 72 00:04:20,940 --> 00:04:23,850 So once it gets executer, it's about to be executed. 73 00:04:24,030 --> 00:04:25,740 We remove it from the visible part. 74 00:04:25,950 --> 00:04:33,120 We update the entire text of the element to have move and then whatever direction was presented here 75 00:04:33,120 --> 00:04:34,320 within that element. 76 00:04:34,480 --> 00:04:39,270 Then we look to see what the contents are and we take the appropriate action. 77 00:04:39,280 --> 00:04:45,210 So left, right, up or down, and then we move the element and adjust by just in the style properties. 78 00:04:45,210 --> 00:04:47,820 So the left or the top position accordingly. 79 00:04:48,030 --> 00:04:51,420 And we've got the original position within Curre. 80 00:04:51,600 --> 00:04:56,910 So if we take the current left and we take our current with, then this will move at the full block 81 00:04:56,910 --> 00:04:57,240 over. 82 00:04:57,250 --> 00:04:59,880 So whatever the width of the element is, we're going to move at. 83 00:04:59,960 --> 00:05:08,200 Over one set, we also have a condition, so if we've got time out, so this one will run mover again. 84 00:05:08,360 --> 00:05:12,920 And while fun less length is greater than zero, it's going to run this block of code. 85 00:05:13,050 --> 00:05:17,220 And when that runs out, then it's going to run this block of code and return the function. 86 00:05:17,240 --> 00:05:20,900 We've got the timeout set to 300 milliseconds. 87 00:05:21,080 --> 00:05:22,850 You can adjust that as needed. 88 00:05:22,970 --> 00:05:27,560 So this is just the time between the movements so you can actually see the movements taking place. 89 00:05:27,770 --> 00:05:31,880 Otherwise, if you didn't have this and you were just running mover, you wouldn't see anything. 90 00:05:32,060 --> 00:05:35,030 It would just move pretty much instantly as it ran through the code. 91 00:05:35,030 --> 00:05:36,270 So there would be no spacing. 92 00:05:36,320 --> 00:05:39,650 We also have our add fun function. 93 00:05:39,650 --> 00:05:45,950 So this is where depending on the key press, we're passing in a value and then we're using that value 94 00:05:46,130 --> 00:05:51,980 and we're creating an element to span and then we're updating the inner text with the value that was 95 00:05:51,980 --> 00:05:52,460 passed. 96 00:05:52,460 --> 00:05:55,730 And we're also adjusting some of the styling to the element. 97 00:05:55,730 --> 00:05:57,980 And then we're added in a few of our listeners. 98 00:05:58,160 --> 00:06:00,320 So we've got a mouse over and a mouse out. 99 00:06:00,470 --> 00:06:02,120 So that creates that hover effect. 100 00:06:02,120 --> 00:06:07,940 Whenever we're over it, the background goes red in the Texaco's white and whenever we leave it, then 101 00:06:07,940 --> 00:06:10,940 our background goes white and the text color goes black. 102 00:06:10,940 --> 00:06:13,920 So it goes back to what the original default color was. 103 00:06:13,940 --> 00:06:16,370 We also have our that listener. 104 00:06:16,380 --> 00:06:20,840 So we're listening for a click on each one of these elements, each one of these spans. 105 00:06:21,020 --> 00:06:28,400 So if it does get click, then we look for its index value within that array and we return back to the 106 00:06:28,400 --> 00:06:33,650 index value in the console so you can see what index value was being presented in the array. 107 00:06:33,680 --> 00:06:40,700 And then we take that index value and we splice that out of the array, returning back the item, the 108 00:06:40,700 --> 00:06:42,350 element that we're removing out. 109 00:06:42,560 --> 00:06:44,150 So that's within the temporal moves. 110 00:06:44,150 --> 00:06:45,220 So we see it there. 111 00:06:45,230 --> 00:06:49,970 And then lastly, we're taking my functionalist and doing a remove child on this. 112 00:06:49,970 --> 00:06:52,340 And this is that current element. 113 00:06:52,340 --> 00:06:58,520 So it could be it's the same as the Tempur move as well as it's the same as the spane. 114 00:06:58,700 --> 00:07:04,460 So you could use either one of those in order to remove it and select it from the my functionalist. 115 00:07:04,460 --> 00:07:08,960 And they're all going to work the same way because they're all referencing that same element on the 116 00:07:08,960 --> 00:07:09,330 page. 117 00:07:09,350 --> 00:07:13,970 Then lastly, what we're doing is we're appending the spane to the functionalist. 118 00:07:14,210 --> 00:07:17,300 So that's adding it, making it visible on the screen. 119 00:07:17,510 --> 00:07:22,360 And then we're adding it into the fun list and we're adding in that element that we created. 120 00:07:22,370 --> 00:07:24,500 So that's being referenced by spane. 121 00:07:24,500 --> 00:07:32,670 And so every time we update and we have any key presses, you can see that it's updating the the list 122 00:07:32,750 --> 00:07:36,010 array with all of the spans that are present on the page. 123 00:07:36,020 --> 00:07:40,760 And as you hover over them within Chrome, you're going to see that the light out light up because they're 124 00:07:40,760 --> 00:07:43,370 referencing those elements that are visible on the page. 125 00:07:43,400 --> 00:07:49,940 We also earlier we had another option to make the movement where we had to go left, go right, go up 126 00:07:49,940 --> 00:07:50,800 and go down. 127 00:07:50,990 --> 00:07:56,810 So from here, what we were using is the my block and we were getting the offset left or the offset 128 00:07:56,810 --> 00:08:04,130 top and doing the same thing as we're doing over here where we're updating its position, whereas here 129 00:08:04,130 --> 00:08:11,510 we're updating the style with the current top and current height and down here we're updating it and 130 00:08:11,510 --> 00:08:13,130 always subtracting 50. 131 00:08:13,130 --> 00:08:17,720 So the movement was slightly different in this case, but the fact is the same thing. 132 00:08:17,720 --> 00:08:22,730 So we still always have that option that we can go into our console and we can go right. 133 00:08:22,880 --> 00:08:25,140 And you can see that's going to move right 15. 134 00:08:25,250 --> 00:08:27,740 So there's a number of different ways to make the adjustment. 135 00:08:27,740 --> 00:08:29,930 And at the end of the day, you're doing the same thing. 136 00:08:29,930 --> 00:08:35,090 You're updating that element style properties and that's repositioning it and making it move on the 137 00:08:35,090 --> 00:08:35,420 screen. 138 00:08:35,420 --> 00:08:39,890 So you have a number of different ways that you can make the movement where you can use go right, go 139 00:08:39,890 --> 00:08:44,510 left, or you could execute the sequence of commands and that's going to execute those. 140 00:08:44,790 --> 00:08:47,480 So you had an opportunity to try the code out. 141 00:08:47,480 --> 00:08:52,100 And I do suggest that you try it out within your own editor if you have any questions or comments. 142 00:08:52,100 --> 00:08:56,060 I'm always happy to help clarify any of the content that's been presented in the course. 143 00:08:56,060 --> 00:09:02,120 And the objective really has been to practice and get more familiar javascript and updating and manipulating 144 00:09:02,120 --> 00:09:03,840 elements within the dawn. 145 00:09:04,040 --> 00:09:05,720 Thanks again for taking the course.