Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,470 --> 00:00:03,482 So let's now render new workouts 2 2 00:00:03,482 --> 00:00:06,853 in the sidebar of our user interface. 3 3 00:00:08,610 --> 00:00:11,120 And so what I mean with rendering 4 4 00:00:11,120 --> 00:00:14,980 is to basically create a list item like this 5 5 00:00:14,980 --> 00:00:17,010 for each workout. 6 6 00:00:17,010 --> 00:00:18,160 All right? 7 7 00:00:18,160 --> 00:00:23,040 So each workout here contains this like short description, 8 8 00:00:23,040 --> 00:00:26,760 containing the type of the workout and then the date 9 9 00:00:26,760 --> 00:00:28,860 and actually that's also exactly 10 10 00:00:28,860 --> 00:00:30,823 what we get here in the popup. 11 11 00:00:31,770 --> 00:00:35,087 And then, of course, we have all the relevant data 12 12 00:00:35,087 --> 00:00:37,053 of the workout in case. 13 13 00:00:38,097 --> 00:00:40,100 And so let's now go back and do that 14 14 00:00:40,100 --> 00:00:43,503 and here we are still in the newWorkout method. 15 15 00:00:44,420 --> 00:00:48,560 And so down here is where we're gonna render the workout. 16 16 00:00:48,560 --> 00:00:50,670 However, just like before, 17 17 00:00:50,670 --> 00:00:53,870 we are actually gonna create a new method, 18 18 00:00:53,870 --> 00:00:56,250 which is gonna be called renderWorkout. 19 19 00:00:57,280 --> 00:01:00,143 And here I'm seeing that I forgot the underscore. 20 20 00:01:02,460 --> 00:01:03,403 Like this. 21 21 00:01:05,110 --> 00:01:07,407 And so now let's create renderWorkout 22 22 00:01:09,888 --> 00:01:12,455 and so this function will also take in an object 23 23 00:01:12,455 --> 00:01:14,053 of a workout. 24 24 00:01:14,990 --> 00:01:16,600 All right, and so here, 25 25 00:01:16,600 --> 00:01:19,853 all we have to do now is to call this method. 26 26 00:01:21,540 --> 00:01:26,370 So renderWorkout and then pass in the workout 27 27 00:01:26,370 --> 00:01:29,990 and so with this, we delegated this functionality 28 28 00:01:29,990 --> 00:01:34,100 to this method and so let's now start working on it. 29 29 00:01:34,100 --> 00:01:35,700 And so what we're gonna do here 30 30 00:01:35,700 --> 00:01:38,390 is basically some DOM manipulation. 31 31 00:01:38,390 --> 00:01:40,740 So we're gonna create some markup. 32 32 00:01:40,740 --> 00:01:42,780 So basically some HTML 33 33 00:01:42,780 --> 00:01:45,170 and then we will insert that into the DOM 34 34 00:01:45,170 --> 00:01:47,393 whenever there is a new workout. 35 35 00:01:49,940 --> 00:01:52,990 And so let's actually get the code right here 36 36 00:01:52,990 --> 00:01:57,740 from the HTML and I already have it here commented out. 37 37 00:01:57,740 --> 00:02:01,003 So let's actually go up a little bit more. 38 38 00:02:02,690 --> 00:02:06,040 So you see that we actually have a ul, 39 39 00:02:06,040 --> 00:02:10,020 which stands for unordered list called workout. 40 40 00:02:10,020 --> 00:02:12,993 Then in there, the first child is actually a form. 41 41 00:02:14,480 --> 00:02:16,310 Okay, and only after that, 42 42 00:02:16,310 --> 00:02:19,380 we then start adding these list items 43 43 00:02:19,380 --> 00:02:21,263 with the class of workout. 44 44 00:02:22,180 --> 00:02:25,800 Now, the first one here is a workout for running. 45 45 00:02:25,800 --> 00:02:29,253 And then the second one is a workout for cycling. 46 46 00:02:30,170 --> 00:02:31,460 All right? 47 47 00:02:31,460 --> 00:02:35,340 So let's basically take what both of them have in common, 48 48 00:02:35,340 --> 00:02:39,360 which is basically this first part here, 49 49 00:02:39,360 --> 00:02:41,460 which is the distance in kilometers 50 50 00:02:41,460 --> 00:02:43,400 and also the duration. 51 51 00:02:43,400 --> 00:02:45,080 So these are the same 52 52 00:02:45,080 --> 00:02:47,420 but then on running, here we have the pace 53 53 00:02:47,420 --> 00:02:49,260 in minutes per kilometer, 54 54 00:02:49,260 --> 00:02:51,480 while here, we have kilometers per hour, 55 55 00:02:51,480 --> 00:02:52,780 which is the speed 56 56 00:02:52,780 --> 00:02:56,010 and here, of course, we have the elevation gain, 57 57 00:02:56,010 --> 00:02:57,970 which has this emoji here, 58 58 00:02:57,970 --> 00:03:01,100 while here we have these steps per minute. 59 59 00:03:01,100 --> 00:03:04,350 And so let's start by taking the HTML here 60 60 00:03:04,350 --> 00:03:06,830 that is common to both workouts 61 61 00:03:06,830 --> 00:03:10,440 and then after that, we will implement this remaining part 62 62 00:03:10,440 --> 00:03:12,830 of both running and cycling. 63 63 00:03:12,830 --> 00:03:14,800 So I'm copying it 64 64 00:03:14,800 --> 00:03:19,097 and so then here, let's create const html 65 65 00:03:20,930 --> 00:03:22,180 and then as always, 66 66 00:03:22,180 --> 00:03:26,300 we are gonna use a template literal for this 67 67 00:03:26,300 --> 00:03:28,340 because they're really amazing, 68 68 00:03:28,340 --> 00:03:30,210 they're really actually perfect 69 69 00:03:30,210 --> 00:03:31,803 for doing this kind of stuff. 70 70 00:03:33,890 --> 00:03:34,723 Okay. 71 71 00:03:34,723 --> 00:03:38,070 So this indentation looks about right. 72 72 00:03:38,070 --> 00:03:40,210 Of course, it would work just the same 73 73 00:03:40,210 --> 00:03:43,610 as it was before but this then looks a bit nicer 74 74 00:03:43,610 --> 00:03:47,860 because it follows the natural structure of HTML. 75 75 00:03:47,860 --> 00:03:52,040 Okay, and now all we have to is to replace everything here 76 76 00:03:52,040 --> 00:03:53,930 with the real data. 77 77 00:03:53,930 --> 00:03:56,320 And let's start with the easy parts. 78 78 00:03:56,320 --> 00:03:59,980 So this one here is, of course, the distance. 79 79 00:03:59,980 --> 00:04:04,003 And so let's add workout.distance. 80 80 00:04:05,580 --> 00:04:08,663 And then down here, we have workout.duration. 81 81 00:04:12,080 --> 00:04:13,463 Dot duration. 82 82 00:04:15,570 --> 00:04:19,650 Then up here, we actually also have the id 83 83 00:04:19,650 --> 00:04:24,350 and so here we once again have this custom data attribute, 84 84 00:04:24,350 --> 00:04:27,240 which in this case, I called data-id. 85 85 00:04:27,240 --> 00:04:31,470 And remember that we use data properties like this one 86 86 00:04:31,470 --> 00:04:32,900 to usually build a bridge 87 87 00:04:32,900 --> 00:04:36,120 between the user interface and the data that we have 88 88 00:04:36,120 --> 00:04:37,590 in our application. 89 89 00:04:37,590 --> 00:04:39,480 And so in a future video, 90 90 00:04:39,480 --> 00:04:42,300 this one here will become very important. 91 91 00:04:42,300 --> 00:04:45,750 But for now, let's simply add the id here, 92 92 00:04:45,750 --> 00:04:50,750 just like before, so workout.id. 93 93 00:04:52,320 --> 00:04:56,540 Then next up, here we need to specify whether the workout 94 94 00:04:56,540 --> 00:04:59,500 is a running or a cycling workout 95 95 00:04:59,500 --> 00:05:01,283 because it's this class here 96 96 00:05:01,283 --> 00:05:04,710 that will then give the list item that green 97 97 00:05:04,710 --> 00:05:06,573 or that orange border. 98 98 00:05:07,610 --> 00:05:11,323 So remember, that is stored at workout.name. 99 99 00:05:12,970 --> 00:05:16,980 Then here, we have this emoji here, which is for running 100 100 00:05:16,980 --> 00:05:19,640 but for cycling, we have this other one. 101 101 00:05:19,640 --> 00:05:21,900 So this guy on the bicycle. 102 102 00:05:21,900 --> 00:05:24,410 And I hope that you can see these emojis 103 103 00:05:24,410 --> 00:05:27,920 just as well as I can here in the video 104 104 00:05:27,920 --> 00:05:30,710 because I know that, I think on some systems, 105 105 00:05:30,710 --> 00:05:32,500 this doesn't really work. 106 106 00:05:32,500 --> 00:05:35,400 But in that case, that's of course, no problem. 107 107 00:05:35,400 --> 00:05:39,350 It doesn't really matter if you can see the emoji or not. 108 108 00:05:39,350 --> 00:05:41,210 But anyway, what I'm gonna do here 109 109 00:05:41,210 --> 00:05:43,270 is to use the turnary operator 110 110 00:05:43,270 --> 00:05:46,410 to check whatever the runner here 111 111 00:05:46,410 --> 00:05:49,280 should be displayed or the cycler. 112 112 00:05:49,280 --> 00:05:51,040 So that's easy. 113 113 00:05:51,040 --> 00:05:54,370 Workout.name and then we just need to test 114 114 00:05:54,370 --> 00:05:55,653 if it is running. 115 115 00:05:57,550 --> 00:06:02,550 So if it is, then we want basically this to be the output 116 116 00:06:03,240 --> 00:06:06,770 and otherwise, this cycler. 117 117 00:06:06,770 --> 00:06:08,230 And here I need to close that 118 118 00:06:09,810 --> 00:06:11,523 and that's actually it. 119 119 00:06:12,670 --> 00:06:14,650 So one more time, the turnary operator 120 120 00:06:14,650 --> 00:06:16,921 is super important. 121 121 00:06:16,921 --> 00:06:19,690 So as you see, we are still using the fundamentals 122 122 00:06:19,690 --> 00:06:23,023 that we learned right in the very, very first section. 123 123 00:06:24,200 --> 00:06:26,830 So I said back then that they were important 124 124 00:06:26,830 --> 00:06:28,253 and indeed, they were. 125 125 00:06:29,970 --> 00:06:33,270 Now, finally, here we have basically this description 126 126 00:06:33,270 --> 00:06:34,610 of the workout. 127 127 00:06:34,610 --> 00:06:38,150 And it is composed of the workout.name essentially 128 128 00:06:38,150 --> 00:06:41,820 and then also the date but nicely formatted. 129 129 00:06:41,820 --> 00:06:44,990 And the way that we're gonna generate this description 130 130 00:06:44,990 --> 00:06:47,890 is by adding a new method on the workout, 131 131 00:06:47,890 --> 00:06:49,640 which will then create a description 132 132 00:06:49,640 --> 00:06:51,420 like this one immediately 133 133 00:06:51,420 --> 00:06:55,233 when the workout gets actually generated. 134 134 00:06:56,600 --> 00:06:57,920 Okay? 135 135 00:06:57,920 --> 00:07:01,250 So as I was just saying, here in the workout, 136 136 00:07:01,250 --> 00:07:03,503 I will create setDescription. 137 137 00:07:10,436 --> 00:07:12,720 And so this is where we now need this array 138 138 00:07:12,720 --> 00:07:14,060 that I gave you in the beginning 139 139 00:07:14,060 --> 00:07:15,053 with these months. 140 140 00:07:16,460 --> 00:07:19,040 So I didn't feel like writing it all out. 141 141 00:07:19,040 --> 00:07:20,790 And so here it is. 142 142 00:07:20,790 --> 00:07:23,750 And by the way, I have this comment here, 143 143 00:07:23,750 --> 00:07:25,610 which is something that we can use 144 144 00:07:25,610 --> 00:07:28,760 to tell Prettier, so that Prettier extension 145 145 00:07:28,760 --> 00:07:31,390 that we are using to format our code, 146 146 00:07:31,390 --> 00:07:34,320 so this comment here we can use whenever we want 147 147 00:07:34,320 --> 00:07:37,950 to tell prettier to ignore the next line. 148 148 00:07:37,950 --> 00:07:40,250 So let me see what happens if I take this out. 149 149 00:07:41,830 --> 00:07:45,480 So then you see I have everything here line by line 150 150 00:07:45,480 --> 00:07:46,803 and I don't like that. 151 151 00:07:47,880 --> 00:07:50,623 And so this is much nicer in this case. 152 152 00:07:51,650 --> 00:07:53,010 Okay. 153 153 00:07:53,010 --> 00:07:55,850 But anyway, let's now set the description. 154 154 00:07:55,850 --> 00:07:58,733 So this.description. 155 155 00:07:59,570 --> 00:08:02,220 So the description will be based on the name 156 156 00:08:02,220 --> 00:08:03,400 of the activity 157 157 00:08:04,310 --> 00:08:08,400 and actually, I don't mean name, I mean type here. 158 158 00:08:08,400 --> 00:08:10,980 And I believe that down there, 159 159 00:08:10,980 --> 00:08:13,033 I used name instead of type. 160 160 00:08:14,150 --> 00:08:16,230 So let's check that. 161 161 00:08:16,230 --> 00:08:18,920 And ja, for some reason, I used name. 162 162 00:08:18,920 --> 00:08:22,470 Hopefully, you didn't get too confused by that. 163 163 00:08:22,470 --> 00:08:27,140 So of course, that is workout.type and not .name. 164 164 00:08:27,140 --> 00:08:30,343 So it's the type that can be either running or cycling. 165 165 00:08:31,450 --> 00:08:32,290 All right? 166 166 00:08:32,290 --> 00:08:34,950 And so that's what we will use now here 167 167 00:08:34,950 --> 00:08:37,120 to create the description. 168 168 00:08:37,120 --> 00:08:39,410 So a new template literal 169 169 00:08:39,410 --> 00:08:40,590 and then here we actually want 170 170 00:08:40,590 --> 00:08:44,070 to make this type here uppercase. 171 171 00:08:44,070 --> 00:08:45,490 So the first letter 172 172 00:08:45,490 --> 00:08:50,490 and so we can take this.type, 173 173 00:08:50,690 --> 00:08:51,880 the first character 174 174 00:08:52,970 --> 00:08:54,320 and then toUppercase 175 175 00:08:55,922 --> 00:08:56,860 and so this is nothing new. 176 176 00:08:56,860 --> 00:08:58,823 We have done this many times before. 177 177 00:09:00,216 --> 00:09:02,630 And then simply the rest 178 178 00:09:04,150 --> 00:09:05,203 of this type. 179 179 00:09:06,870 --> 00:09:10,920 So slice starting from position one. 180 180 00:09:10,920 --> 00:09:15,570 So that is the type of the activity in uppercase on 181 181 00:09:17,420 --> 00:09:19,700 and so now we want basically the month 182 182 00:09:19,700 --> 00:09:20,973 and also the day. 183 183 00:09:22,210 --> 00:09:24,360 So we know already that we have the date 184 184 00:09:24,360 --> 00:09:27,930 of the workout in this.date 185 185 00:09:27,930 --> 00:09:32,930 and then we can use getMonth on that. 186 186 00:09:33,350 --> 00:09:36,270 And so remember that this will be here, 187 187 00:09:36,270 --> 00:09:39,090 a number between zero and 11. 188 188 00:09:39,090 --> 00:09:42,310 And so that's very nice for a zero-based array 189 189 00:09:42,310 --> 00:09:45,920 because we can now essentially use this number here 190 190 00:09:45,920 --> 00:09:50,430 to retrieve any value out of our month array. 191 191 00:09:50,430 --> 00:09:53,130 So if getMonth returns zero, 192 192 00:09:53,130 --> 00:09:56,420 then month at position zero is gonna be January 193 193 00:09:56,420 --> 00:09:59,363 and the same is, of course, true for all the other months. 194 194 00:10:01,000 --> 00:10:03,270 So this one here will give us the month 195 195 00:10:04,460 --> 00:10:07,530 and then all we need is the day. 196 196 00:10:07,530 --> 00:10:08,843 And so this.date.getDate. 197 197 00:10:16,050 --> 00:10:17,980 And that should be it. 198 198 00:10:17,980 --> 00:10:20,870 So now whenever a new object is created, 199 199 00:10:20,870 --> 00:10:25,015 then automatically the description should be set. 200 200 00:10:25,015 --> 00:10:26,958 And so here we now need to do, of course, 201 201 00:10:26,958 --> 00:10:28,625 this.setDescription. 202 202 00:10:32,388 --> 00:10:33,320 Now, right? 203 203 00:10:33,320 --> 00:10:35,540 And in fact, it should not be here 204 204 00:10:35,540 --> 00:10:40,540 but it should be down here in each of the child classes. 205 205 00:10:40,840 --> 00:10:43,760 So why is that you might be asking? 206 206 00:10:43,760 --> 00:10:46,030 Well, that's because that's the class 207 207 00:10:46,030 --> 00:10:50,170 that contains the type that we need for this calculation. 208 208 00:10:50,170 --> 00:10:51,140 Okay? 209 209 00:10:51,140 --> 00:10:53,173 So we need to cut that from here 210 210 00:10:53,173 --> 00:10:56,743 and actually calculate it in each of these. 211 211 00:10:58,330 --> 00:11:01,450 And of course, this will work perfectly fine 212 212 00:11:01,450 --> 00:11:03,230 because through the scope chain, 213 213 00:11:03,230 --> 00:11:06,080 this constructor method will get access 214 214 00:11:06,080 --> 00:11:09,350 to all the methods of the parent class. 215 215 00:11:09,350 --> 00:11:12,730 And so, of course, that includes this one here. 216 216 00:11:12,730 --> 00:11:15,740 And so then as the method is executed here, 217 217 00:11:15,740 --> 00:11:18,630 it will also get access to the type. 218 218 00:11:18,630 --> 00:11:22,780 And so this is the reason why we can use the type here, 219 219 00:11:22,780 --> 00:11:25,570 even though it is not defined in this class 220 220 00:11:25,570 --> 00:11:28,065 but only in the child class. 221 221 00:11:28,065 --> 00:11:30,950 So again, we could not call this method 222 222 00:11:30,950 --> 00:11:32,730 on a workout object 223 223 00:11:32,730 --> 00:11:35,120 because that doesn't have a type. 224 224 00:11:35,120 --> 00:11:36,890 But that's no problem anyway 225 225 00:11:36,890 --> 00:11:40,423 because we never actually create new workout objects. 226 226 00:11:42,250 --> 00:11:44,620 Now, all right, but with all that being said, 227 227 00:11:44,620 --> 00:11:46,651 let's now come back here 228 228 00:11:46,651 --> 00:11:48,433 and use this here. 229 229 00:11:51,020 --> 00:11:52,993 So workout.description. 230 230 00:11:54,630 --> 00:11:57,290 So that's the part that is common to both. 231 231 00:11:57,290 --> 00:12:00,290 Now let's get the rest of it. 232 232 00:12:00,290 --> 00:12:04,430 So all of this but this one is only for running. 233 233 00:12:04,430 --> 00:12:06,130 So let's copy it 234 234 00:12:06,130 --> 00:12:08,520 and now here after this part, 235 235 00:12:08,520 --> 00:12:11,680 or actually here, we can now say if 236 236 00:12:13,410 --> 00:12:16,080 workout.type 237 237 00:12:17,290 --> 00:12:20,880 equals running, 238 238 00:12:20,880 --> 00:12:23,853 then we want to add something to the HTML. 239 239 00:12:25,500 --> 00:12:30,500 So html plus equal and then this code right here. 240 240 00:12:32,800 --> 00:12:33,993 So give it a save. 241 241 00:12:34,997 --> 00:12:36,930 Then here let's fix the indentation 242 242 00:12:36,930 --> 00:12:38,603 or actually, it's good like this. 243 243 00:12:39,658 --> 00:12:41,103 Well, actually it isn't. 244 244 00:12:43,860 --> 00:12:45,840 So I'm just using multiple cursors 245 245 00:12:46,890 --> 00:12:50,130 and yeah, that's better. 246 246 00:12:50,130 --> 00:12:51,673 Just do the same thing here. 247 247 00:12:54,340 --> 00:12:55,200 Okay. 248 248 00:12:55,200 --> 00:12:57,680 And so now here, of course, we need to change it 249 249 00:12:57,680 --> 00:12:59,610 to a let variable 250 250 00:12:59,610 --> 00:13:01,360 because otherwise, we will not be able 251 251 00:13:01,360 --> 00:13:03,943 to add anything to that string. 252 252 00:13:07,060 --> 00:13:11,897 And so here, let's now write workout.pace 253 253 00:13:15,040 --> 00:13:16,173 and then down here, 254 254 00:13:17,390 --> 00:13:21,523 so that's workout.cadence. 255 255 00:13:23,610 --> 00:13:27,850 Now, this value here is actually calculated by JavaScript. 256 256 00:13:27,850 --> 00:13:30,200 And so the result of this calculation 257 257 00:13:30,200 --> 00:13:32,570 might be some very weird number 258 258 00:13:32,570 --> 00:13:35,773 and so let's simply round that to one decimal place. 259 259 00:13:37,260 --> 00:13:38,370 So toFixed 260 260 00:13:39,890 --> 00:13:42,470 and with just one decimal place. 261 261 00:13:42,470 --> 00:13:43,800 Okay. 262 262 00:13:43,800 --> 00:13:46,143 And now just copying this part. 263 263 00:13:51,690 --> 00:13:56,690 So if it's cycling, then we want to get just this part. 264 264 00:13:57,430 --> 00:13:59,430 So again, this is the common part. 265 265 00:13:59,430 --> 00:14:01,853 This is the one that is different. 266 266 00:14:06,210 --> 00:14:10,373 So again, add on to the already existing HTML string. 267 267 00:14:14,080 --> 00:14:17,390 And then each time the indentation is a bit different, 268 268 00:14:17,390 --> 00:14:19,653 don't have any idea why that is. 269 269 00:14:22,010 --> 00:14:23,563 But now it is correct. 270 270 00:14:24,910 --> 00:14:27,860 And here, this is probably the speed 271 271 00:14:33,110 --> 00:14:35,687 and then here it is the elevationGain 272 272 00:14:39,470 --> 00:14:42,840 so I guess that's just called elevation 273 273 00:14:42,840 --> 00:14:43,853 but I'm not sure. 274 274 00:14:46,520 --> 00:14:48,133 Let's just go back there. 275 275 00:14:51,420 --> 00:14:54,520 So yeah, it's called elevationGain here. 276 276 00:14:54,520 --> 00:14:56,710 We could have just called it elevation 277 277 00:14:56,710 --> 00:14:59,630 because that's how it's called in other parts 278 278 00:14:59,630 --> 00:15:01,060 of the application. 279 279 00:15:01,060 --> 00:15:04,153 But nevermind, let's just leave it like this for now. 280 280 00:15:04,990 --> 00:15:09,320 And here, this speed is also calculated by JavaScript. 281 281 00:15:09,320 --> 00:15:11,870 So let's round this one as well. 282 282 00:15:11,870 --> 00:15:14,990 And with this, we actually have the HTML generated. 283 283 00:15:14,990 --> 00:15:18,690 Now all we need to do is to insert that HTML 284 284 00:15:18,690 --> 00:15:20,550 into our DOM. 285 285 00:15:20,550 --> 00:15:24,493 So where will we inject this HTML? 286 286 00:15:25,340 --> 00:15:28,760 Well, let's take a look here at the parent element 287 287 00:15:28,760 --> 00:15:30,473 and that is workouts. 288 288 00:15:31,410 --> 00:15:33,180 However, as I mentioned before, 289 289 00:15:33,180 --> 00:15:35,690 the first child of the workouts 290 290 00:15:35,690 --> 00:15:37,680 is actually this form 291 291 00:15:37,680 --> 00:15:39,280 and only the second element 292 292 00:15:39,280 --> 00:15:42,460 should then become the first activity. 293 293 00:15:42,460 --> 00:15:45,630 And therefore, we cannot simply attach 294 294 00:15:45,630 --> 00:15:48,180 the new workout element 295 295 00:15:48,180 --> 00:15:50,120 to this ul element 296 296 00:15:50,120 --> 00:15:53,210 because we could either insert it as a first child 297 297 00:15:53,210 --> 00:15:54,840 or as a last child. 298 298 00:15:54,840 --> 00:15:57,620 But we don't want any of those options. 299 299 00:15:57,620 --> 00:16:02,220 So instead, we will insert it close to this form 300 300 00:16:02,220 --> 00:16:05,453 but basically insert it as a sibling element. 301 301 00:16:07,080 --> 00:16:08,270 All right? 302 302 00:16:08,270 --> 00:16:10,300 So again, I will take the form 303 303 00:16:10,300 --> 00:16:13,000 and then that is where I'm gonna call 304 304 00:16:13,000 --> 00:16:15,423 the insertAdjacentHTML method. 305 305 00:16:17,150 --> 00:16:18,490 So form.insertAdjacentHTML 306 306 00:16:21,940 --> 00:16:22,950 and then here, remember, 307 307 00:16:22,950 --> 00:16:25,600 I have to choose between four strings 308 308 00:16:25,600 --> 00:16:28,160 and so that's these four here. 309 309 00:16:28,160 --> 00:16:31,430 And so the one I'm gonna choose is afterend 310 310 00:16:31,430 --> 00:16:34,320 because this one will basically add the new element 311 311 00:16:34,320 --> 00:16:38,460 as a sibling element at the end of the form. 312 312 00:16:38,460 --> 00:16:41,930 So we discussed these strings before already. 313 313 00:16:41,930 --> 00:16:44,853 So you can always go back there if necessary. 314 314 00:16:46,960 --> 00:16:47,793 Okay. 315 315 00:16:49,040 --> 00:16:52,590 And with this, I think we should be complete. 316 316 00:16:52,590 --> 00:16:54,483 We already called it up here. 317 317 00:16:55,980 --> 00:16:56,930 Right? 318 318 00:16:56,930 --> 00:16:59,133 And so let's now actually try it. 319 319 00:17:00,640 --> 00:17:02,723 So let's just reload here manually. 320 320 00:17:06,907 --> 00:17:08,010 Okay. 321 321 00:17:08,010 --> 00:17:10,810 And now let's just add a simple running 322 322 00:17:13,410 --> 00:17:15,751 and now we get a problem. 323 323 00:17:15,751 --> 00:17:18,879 So toUppercase is not a function. 324 324 00:17:18,879 --> 00:17:21,249 And indeed, it isn't. 325 325 00:17:21,249 --> 00:17:25,166 So it has to be UpperCase with the C uppercase. 326 326 00:17:26,350 --> 00:17:27,733 So let's see now. 327 327 00:17:29,830 --> 00:17:31,830 And again, just putting any numbers here 328 328 00:17:32,750 --> 00:17:34,750 and there it is. 329 329 00:17:34,750 --> 00:17:38,170 So here is our very first workout rendered 330 330 00:17:38,170 --> 00:17:40,310 to the user interface. 331 331 00:17:40,310 --> 00:17:43,640 So that's beautiful, really cool. 332 332 00:17:43,640 --> 00:17:46,453 Let's now try this with cycling as well. 333 333 00:17:48,390 --> 00:17:50,760 And yeah, it does appear here 334 334 00:17:50,760 --> 00:17:53,610 and also it appears before the one 335 335 00:17:53,610 --> 00:17:55,620 that we had previously. 336 336 00:17:55,620 --> 00:17:59,630 And so that is the effect of choosing the afterend string 337 337 00:17:59,630 --> 00:18:03,190 in the insertAdjacentHTML method. 338 338 00:18:03,190 --> 00:18:05,670 All right, so that's amazing 339 339 00:18:05,670 --> 00:18:07,380 but what we need to do next 340 340 00:18:07,380 --> 00:18:09,820 is to then actually hide this form 341 341 00:18:09,820 --> 00:18:12,910 whenever a new input here happens. 342 342 00:18:12,910 --> 00:18:14,102 Right? 343 343 00:18:14,102 --> 00:18:17,113 And so let's go do that now. 344 344 00:18:18,940 --> 00:18:23,723 And so we need to go back here to our, well, where is that? 345 345 00:18:26,180 --> 00:18:27,990 Here in the new workout. 346 346 00:18:27,990 --> 00:18:30,620 So here we want to hide the form. 347 347 00:18:30,620 --> 00:18:32,900 And so let's create yet another method, 348 348 00:18:32,900 --> 00:18:35,003 which is gonna be called hide form. 349 349 00:18:36,260 --> 00:18:40,140 So I can already copy or actually cut this one here 350 350 00:18:40,140 --> 00:18:42,930 and call the method before I've written it. 351 351 00:18:42,930 --> 00:18:44,970 So that's no problem. 352 352 00:18:44,970 --> 00:18:48,963 So hideMap will be the name of this method. 353 353 00:18:50,180 --> 00:18:53,020 And now let's actually create that. 354 354 00:18:53,020 --> 00:18:55,370 And of course, it's not hideMap, it's hideForm. 355 355 00:18:58,060 --> 00:19:01,273 So let's do it here right after showForm. 356 356 00:19:02,390 --> 00:19:04,710 So that makes sense, right. 357 357 00:19:04,710 --> 00:19:06,013 So hideForm. 358 358 00:19:08,960 --> 00:19:10,960 So the first thing that we need to do 359 359 00:19:10,960 --> 00:19:12,830 is to empty the inputs 360 360 00:19:16,410 --> 00:19:20,123 and then we need to add this hidden class back on. 361 361 00:19:23,950 --> 00:19:26,730 Now, right, so that's add 362 362 00:19:26,730 --> 00:19:28,303 but as we will see in a second, 363 363 00:19:28,303 --> 00:19:31,070 this is not yet gonna be enough. 364 364 00:19:31,070 --> 00:19:33,403 But let's actually see what I mean here. 365 365 00:19:37,760 --> 00:19:39,490 So did you see this animation here 366 366 00:19:39,490 --> 00:19:41,063 that happened in the beginning? 367 367 00:19:42,130 --> 00:19:45,163 Well, we will need to undo that here in a second. 368 368 00:19:47,220 --> 00:19:48,850 So you see that this one here, 369 369 00:19:48,850 --> 00:19:51,453 basically did slide up a little bit. 370 370 00:19:52,497 --> 00:19:53,330 All right? 371 371 00:19:53,330 --> 00:19:54,860 But that's not what we want. 372 372 00:19:54,860 --> 00:19:56,980 So here in this version of the app, 373 373 00:19:56,980 --> 00:19:58,233 let's see what happens. 374 374 00:19:59,310 --> 00:20:03,020 So as the form appears, everything slides down here. 375 375 00:20:03,020 --> 00:20:05,733 And now watch what happens as I hit Enter. 376 376 00:20:07,650 --> 00:20:08,930 So you saw that? 377 377 00:20:08,930 --> 00:20:11,670 Basically it looked as if that form 378 378 00:20:11,670 --> 00:20:14,820 was replaced with this new activity here. 379 379 00:20:14,820 --> 00:20:16,280 And so to do that, 380 380 00:20:16,280 --> 00:20:21,240 it's not enough to simply add back the hidden class here 381 381 00:20:21,240 --> 00:20:23,923 because that will then also trigger the animation. 382 382 00:20:24,790 --> 00:20:29,620 So instead, we need to hide the form immediately first. 383 383 00:20:29,620 --> 00:20:33,100 So form.style.display. 384 384 00:20:35,790 --> 00:20:40,700 So we immediately need to set the display to none. 385 385 00:20:40,700 --> 00:20:43,450 But then we will actually have to put it back 386 386 00:20:43,450 --> 00:20:45,563 after the animation had finished. 387 387 00:20:46,940 --> 00:20:48,330 So let's take a look here 388 388 00:20:48,330 --> 00:20:50,570 at the form style actually 389 389 00:20:50,570 --> 00:20:52,070 so I can show you what I mean. 390 390 00:20:55,020 --> 00:20:56,320 Okay. 391 391 00:20:56,320 --> 00:20:58,590 So this is the transition that I mean 392 392 00:20:58,590 --> 00:21:00,870 and it is because of this one 393 393 00:21:00,870 --> 00:21:04,990 that the hidden class has that animation of sliding. 394 394 00:21:04,990 --> 00:21:08,273 So that's this transform here, all right? 395 395 00:21:09,440 --> 00:21:13,120 So this animations happens over one second. 396 396 00:21:13,120 --> 00:21:16,913 And the original value of the display property is grid. 397 397 00:21:18,030 --> 00:21:19,480 And so what we will do now 398 398 00:21:19,480 --> 00:21:23,200 is to basically after one second set this display 399 399 00:21:23,200 --> 00:21:24,443 back to grid. 400 400 00:21:25,740 --> 00:21:28,250 So that's kind of a dirty trick here 401 401 00:21:28,250 --> 00:21:30,563 but in order to build the layout like this, 402 402 00:21:30,563 --> 00:21:32,670 this is what we have to do. 403 403 00:21:32,670 --> 00:21:34,577 And it's also a good time 404 404 00:21:34,577 --> 00:21:37,723 to bring back or setTimeout function. 405 405 00:21:39,320 --> 00:21:42,490 And remember that all that setTimeout does 406 406 00:21:42,490 --> 00:21:44,780 is to call a certain callback function 407 407 00:21:44,780 --> 00:21:46,323 after a certain time. 408 408 00:21:48,760 --> 00:21:50,650 So let's use a simple arrow function here 409 409 00:21:50,650 --> 00:21:52,670 to make it really simple. 410 410 00:21:52,670 --> 00:21:57,670 So form.style.display 411 411 00:21:57,670 --> 00:22:01,440 should be set to grid. 412 412 00:22:01,440 --> 00:22:04,690 And this should happen after one second. 413 413 00:22:04,690 --> 00:22:06,960 So 1,000 milliseconds 414 414 00:22:06,960 --> 00:22:10,137 and so yeah, let's see now. 415 415 00:22:15,540 --> 00:22:17,040 All right, so again you saw 416 416 00:22:17,040 --> 00:22:19,370 that animation happening there 417 417 00:22:19,370 --> 00:22:22,080 but now let's see if we get our desired result 418 418 00:22:23,260 --> 00:22:25,623 and yes, there it is. 419 419 00:22:26,480 --> 00:22:29,650 So indeed, we did now immediately hide the form 420 420 00:22:29,650 --> 00:22:31,390 and then after one second, 421 421 00:22:31,390 --> 00:22:34,710 we brought back the original display property. 422 422 00:22:34,710 --> 00:22:37,030 And so all that's really left to do 423 423 00:22:37,030 --> 00:22:39,580 is to basically add the same description 424 424 00:22:39,580 --> 00:22:40,880 that we have here 425 425 00:22:40,880 --> 00:22:41,753 to this popup. 426 426 00:22:42,810 --> 00:22:45,160 And we will also add a nice emoji, 427 427 00:22:45,160 --> 00:22:48,410 so this running guy for running 428 428 00:22:48,410 --> 00:22:52,633 and then cycling, as you see here, for the cycling workouts. 429 429 00:22:54,260 --> 00:22:58,373 Okay, and this code we can actually get from here. 430 430 00:22:59,800 --> 00:23:03,023 So from renderWorkout, we already have this. 431 431 00:23:06,090 --> 00:23:07,683 So where is the marker? 432 432 00:23:09,600 --> 00:23:11,120 Ah, here it is. 433 433 00:23:11,120 --> 00:23:13,200 So here is where we set the content 434 434 00:23:14,250 --> 00:23:16,663 and so again, a template literal. 435 435 00:23:19,910 --> 00:23:22,950 All right, so this is how we set the emoji 436 436 00:23:22,950 --> 00:23:25,730 and then all we need now is the description 437 437 00:23:25,730 --> 00:23:26,563 of the workout. 438 438 00:23:30,187 --> 00:23:33,713 .description and that should be it. 439 439 00:23:38,790 --> 00:23:41,620 All right, so that works beautifully 440 440 00:23:41,620 --> 00:23:43,493 and now just for cycling, 441 441 00:23:46,430 --> 00:23:47,713 and yes. 442 442 00:23:49,270 --> 00:23:50,880 So here's the cycling emoji, 443 443 00:23:50,880 --> 00:23:52,350 here's the description 444 444 00:23:52,350 --> 00:23:56,940 and so this now works exactly as it does in our demo. 445 445 00:23:56,940 --> 00:23:59,620 Great, so we are almost finished actually 446 446 00:23:59,620 --> 00:24:00,863 with our application. 447 447 00:24:02,040 --> 00:24:05,120 So let's take a look at our flowchart here. 448 448 00:24:05,120 --> 00:24:06,810 And so what we're missing now 449 449 00:24:06,810 --> 00:24:09,940 is to move the map to the workout location 450 450 00:24:09,940 --> 00:24:12,490 whenever we click on one of the workouts 451 451 00:24:12,490 --> 00:24:14,070 that we just created. 452 452 00:24:14,070 --> 00:24:16,963 And so that's gonna be the topic of the next video. 37478