1 00:00:02,210 --> 00:00:04,740 So, let's dive into these tasks. 2 00:00:04,740 --> 00:00:08,020 And the very first thing, which I did not mention, 3 00:00:08,020 --> 00:00:10,160 but which you have to do, of course, 4 00:00:10,160 --> 00:00:13,870 is that I will include this exercise.js file 5 00:00:13,870 --> 00:00:15,896 into index.html, 6 00:00:15,896 --> 00:00:18,720 otherwise the code won't execute. 7 00:00:18,720 --> 00:00:21,650 And I deliberately did not mention this. 8 00:00:21,650 --> 00:00:23,280 You may be stumbled across this, 9 00:00:23,280 --> 00:00:25,980 but it is something you always have to keep in mind 10 00:00:25,980 --> 00:00:27,190 as a developer. 11 00:00:27,190 --> 00:00:28,840 You should make sure 12 00:00:28,840 --> 00:00:32,009 that if you will use some external file, 13 00:00:32,009 --> 00:00:34,660 no matter if it's CSS or JavaScript, 14 00:00:34,660 --> 00:00:36,940 you have to import it. 15 00:00:36,940 --> 00:00:41,143 You have to link to it from inside your HTML file. 16 00:00:42,000 --> 00:00:43,750 And for JavaScript, we do that 17 00:00:43,750 --> 00:00:47,430 by adding the script opening and closing tags here, 18 00:00:47,430 --> 00:00:48,263 as you learned. 19 00:00:48,263 --> 00:00:51,910 And then on the opening tag, we add the source attribute 20 00:00:51,910 --> 00:00:56,070 and we point at this JavaScript file that should be added, 21 00:00:56,070 --> 00:00:57,623 that should be executed. 22 00:00:58,720 --> 00:01:02,330 And very important here, we have to add defer 23 00:01:02,330 --> 00:01:06,480 to make sure that this script only executes 24 00:01:06,480 --> 00:01:10,790 once the entire content here was parsed. 25 00:01:10,790 --> 00:01:13,010 Without defer, it would execute 26 00:01:13,010 --> 00:01:15,760 right when the browser parses this line. 27 00:01:15,760 --> 00:01:16,770 And that's of course, 28 00:01:16,770 --> 00:01:19,450 before the content down here was parsed 29 00:01:19,450 --> 00:01:22,810 and therefore when we would try to reach out to a button 30 00:01:22,810 --> 00:01:24,360 to add an event listener, 31 00:01:24,360 --> 00:01:26,940 that button wouldn't be parsed yet, 32 00:01:26,940 --> 00:01:28,870 and hence this code would fail. 33 00:01:28,870 --> 00:01:31,920 So defer is important here. 34 00:01:31,920 --> 00:01:36,630 And once that is done, we can finally dive into these tasks. 35 00:01:36,630 --> 00:01:40,100 And of course, I'll start with task number one. 36 00:01:40,100 --> 00:01:43,500 Now here I should select and store these two buttons 37 00:01:43,500 --> 00:01:46,720 and we should select them with different approaches. 38 00:01:46,720 --> 00:01:49,400 So I will start by creating a variable here. 39 00:01:49,400 --> 00:01:52,210 And actually I will create a constant here 40 00:01:52,210 --> 00:01:56,330 because I will never reassign these button variables. 41 00:01:56,330 --> 00:02:00,122 I will never overwrite the values stored in these variables 42 00:02:00,122 --> 00:02:05,122 with different values, with different HTML elements. 43 00:02:05,770 --> 00:02:07,020 That won't happen, 44 00:02:07,020 --> 00:02:09,669 and therefore I can directly mark my buttons here 45 00:02:09,669 --> 00:02:12,240 as constants which will never change 46 00:02:12,240 --> 00:02:14,490 and which should never change. 47 00:02:14,490 --> 00:02:15,580 And keep in mind, 48 00:02:15,580 --> 00:02:18,450 with that I'm always talking about the variable 49 00:02:18,450 --> 00:02:21,090 and the button element as a whole. 50 00:02:21,090 --> 00:02:22,500 It's absolutely fine 51 00:02:22,500 --> 00:02:25,330 if we then change the content of the button, 52 00:02:25,330 --> 00:02:28,863 if we change a property of it, or anything like that. 53 00:02:30,410 --> 00:02:32,410 So here we now need names, 54 00:02:32,410 --> 00:02:35,440 and I'll name the first button "firstButton," 55 00:02:35,440 --> 00:02:38,260 or "firstButtonElement". 56 00:02:38,260 --> 00:02:39,390 Name is up to you. 57 00:02:39,390 --> 00:02:43,440 It should just describe what's stored in this variable. 58 00:02:43,440 --> 00:02:45,280 And then I will select it 59 00:02:45,280 --> 00:02:48,260 with help of the document variable, 60 00:02:48,260 --> 00:02:50,490 this document object, which it is. 61 00:02:50,490 --> 00:02:52,830 Which gives us a variety of ways 62 00:02:52,830 --> 00:02:54,773 of getting access to the DOM. 63 00:02:56,070 --> 00:02:59,560 And here I should not use the ID. 64 00:02:59,560 --> 00:03:02,260 Hence we need to get access to the button differently. 65 00:03:02,260 --> 00:03:04,020 And one way of getting access here 66 00:03:04,020 --> 00:03:07,390 would be to use the querySelector(). 67 00:03:07,390 --> 00:03:10,160 And we could, for example, select by tag, 68 00:03:10,160 --> 00:03:12,593 and select button like this. 69 00:03:13,920 --> 00:03:15,030 Now keep in mind, 70 00:03:15,030 --> 00:03:19,730 querySelector() will return the first matching element. 71 00:03:19,730 --> 00:03:22,920 So it will look for the first button it finds on the page, 72 00:03:22,920 --> 00:03:26,670 in this case, with this querySelector() value. 73 00:03:26,670 --> 00:03:30,130 And that is of course, this first button here. 74 00:03:30,130 --> 00:03:32,300 And since that is what I'm looking for, 75 00:03:32,300 --> 00:03:34,130 this is a perfectly fine approach 76 00:03:34,130 --> 00:03:36,333 of getting access to this button. 77 00:03:37,990 --> 00:03:42,530 Now we also have a second button, the "secondButtonElement", 78 00:03:42,530 --> 00:03:45,120 whoops, without a space. 79 00:03:45,120 --> 00:03:48,390 And here we can and we showed you as an ID, 80 00:03:48,390 --> 00:03:50,500 and therefore now I'll, first of all, 81 00:03:50,500 --> 00:03:53,533 add an ID to this button here. 82 00:03:54,460 --> 00:03:59,140 And I'll name this button "change-bg-btn", 83 00:04:02,130 --> 00:04:04,360 for change background button. 84 00:04:04,360 --> 00:04:06,803 Of course, the ID is totally up to you. 85 00:04:08,410 --> 00:04:11,510 Now we can use this ID to select this button though. 86 00:04:11,510 --> 00:04:14,630 And there are two main ways of doing that, 87 00:04:14,630 --> 00:04:17,320 we can use the querySelector() again, 88 00:04:17,320 --> 00:04:20,220 and then select by ID like this, 89 00:04:20,220 --> 00:04:22,150 by adding a hash symbol here. 90 00:04:22,150 --> 00:04:23,523 Because keep in mind, 91 00:04:23,523 --> 00:04:27,540 querySelector() wants a CSS selector as a value. 92 00:04:27,540 --> 00:04:32,083 And that is how you would select an element by ID in CSS. 93 00:04:33,320 --> 00:04:35,990 But if the idea is what you're looking for, 94 00:04:35,990 --> 00:04:39,770 it's even easier if you use "getElementById" instead, 95 00:04:39,770 --> 00:04:44,120 and you just pass the ID name as a parameter value. 96 00:04:44,120 --> 00:04:46,563 Now without the # symbol. 97 00:04:47,600 --> 00:04:50,220 And that will give us access to this button as well. 98 00:04:50,220 --> 00:04:53,430 And now both buttons are stored in variables, 99 00:04:53,430 --> 00:04:55,500 or constants to be precise. 100 00:04:55,500 --> 00:04:58,223 And hence task number one is solved. 101 00:04:59,770 --> 00:05:03,900 In task number two, we should now addEventListeners. 102 00:05:03,900 --> 00:05:05,620 And for this, of course, 103 00:05:05,620 --> 00:05:10,240 we can reach out to our firstButtonElement variable, 104 00:05:10,240 --> 00:05:13,700 and call the addEventListener() method on it. 105 00:05:13,700 --> 00:05:17,390 That's how we do add an event listener to any element, 106 00:05:17,390 --> 00:05:19,093 including buttons, of course. 107 00:05:20,120 --> 00:05:22,860 And now you learned that addEventListener() 108 00:05:22,860 --> 00:05:25,670 wants two parameter values. 109 00:05:25,670 --> 00:05:28,470 The first value is the event you want to listen to. 110 00:05:28,470 --> 00:05:31,820 The second value is a pointer at the function 111 00:05:31,820 --> 00:05:35,113 that should be executed once that event occurs. 112 00:05:36,410 --> 00:05:39,910 Now the event we should listen to here, is a click event. 113 00:05:39,910 --> 00:05:43,167 And hence as a string, we pass in 'click.' 114 00:05:45,160 --> 00:05:49,420 The second parameter value, separated by a comma, 115 00:05:49,420 --> 00:05:51,680 is the function that should be executed. 116 00:05:51,680 --> 00:05:54,330 And for that I'll add a new function here 117 00:05:54,330 --> 00:05:58,253 and that's the "firstButtonClicked" function, 118 00:06:00,007 --> 00:06:03,970 or better describing what it does, 119 00:06:03,970 --> 00:06:07,350 it could be the "removeParagraph()" function. 120 00:06:10,170 --> 00:06:11,520 Now removeParagraph() 121 00:06:11,520 --> 00:06:14,623 because that's what this first button will eventually do. 122 00:06:16,120 --> 00:06:18,830 Now, before I add the actual function code, 123 00:06:18,830 --> 00:06:21,230 I'll add another function first, 124 00:06:21,230 --> 00:06:22,523 and that will be the function 125 00:06:22,523 --> 00:06:25,830 that will be added to the second button. 126 00:06:25,830 --> 00:06:28,757 And that should eventually change the background color, 127 00:06:28,757 --> 00:06:33,163 so I will name the function "changeBackgroundColor." 128 00:06:36,820 --> 00:06:40,310 And now let's connect this removeParagraph() function 129 00:06:40,310 --> 00:06:41,940 to this event listener. 130 00:06:41,940 --> 00:06:43,440 And for this, as I mentioned, 131 00:06:43,440 --> 00:06:46,680 we just point at this function. 132 00:06:46,680 --> 00:06:48,570 Very, very important here. 133 00:06:48,570 --> 00:06:50,770 Don't add parentheses, 134 00:06:50,770 --> 00:06:53,230 otherwise this would be executed immediately 135 00:06:53,230 --> 00:06:55,580 when this line of code here is parsed, 136 00:06:55,580 --> 00:06:57,420 and that's not what we want. 137 00:06:57,420 --> 00:06:59,500 Instead, we just wanna tell the browser 138 00:06:59,500 --> 00:07:02,460 which functions should eventually be executed, 139 00:07:02,460 --> 00:07:04,310 once that event occurs. 140 00:07:04,310 --> 00:07:07,170 And therefore we just give the event listener 141 00:07:07,170 --> 00:07:08,810 the name of the function, 142 00:07:08,810 --> 00:07:13,113 so that it can be executed on our behalf in the future. 143 00:07:14,750 --> 00:07:17,090 And we should, of course, also add an event listener 144 00:07:17,090 --> 00:07:20,117 to the secondButtonElement with addEventListener(), 145 00:07:20,990 --> 00:07:23,090 and then here the 'click' event. 146 00:07:23,090 --> 00:07:26,390 And then we point at the changeBackgroundColor function 147 00:07:26,390 --> 00:07:27,253 like this. 148 00:07:28,870 --> 00:07:31,920 Now these functions should do something. 149 00:07:31,920 --> 00:07:34,300 They should "console.dir()" the clicked buttons, 150 00:07:34,300 --> 00:07:36,960 but in different ways. 151 00:07:36,960 --> 00:07:40,090 The first function for the first button 152 00:07:40,090 --> 00:07:41,940 should "console.dir()" the button 153 00:07:41,940 --> 00:07:45,203 by using this button variable here, this constant. 154 00:07:46,080 --> 00:07:49,920 The second function attached to the second button 155 00:07:49,920 --> 00:07:54,243 on the other hand, should not use the respective variable. 156 00:07:55,550 --> 00:07:58,380 Now let's start with the first function. 157 00:07:58,380 --> 00:08:02,660 We can "console.dir(firstButtonElement) like this. 158 00:08:02,660 --> 00:08:05,023 And that's then this task solved. 159 00:08:05,970 --> 00:08:09,800 For the second function we also want to console.dir() 160 00:08:09,800 --> 00:08:12,950 but now we're not allowed to use the variable. 161 00:08:12,950 --> 00:08:15,110 And hence we need to get access to the button 162 00:08:15,110 --> 00:08:16,440 in a different way. 163 00:08:16,440 --> 00:08:17,403 But how? 164 00:08:18,330 --> 00:08:21,460 Well, you learned that there is this event object, 165 00:08:21,460 --> 00:08:24,960 which you get automatically as a first parameter value 166 00:08:24,960 --> 00:08:28,010 to those functions which you do connect 167 00:08:28,010 --> 00:08:29,210 with addEventListener(). 168 00:08:30,520 --> 00:08:34,350 And this event object, as you learned, describes the event. 169 00:08:34,350 --> 00:08:35,760 And it especially, 170 00:08:35,760 --> 00:08:39,830 also gives you access to the element that cost the event, 171 00:08:39,830 --> 00:08:42,447 with help of "event.target." 172 00:08:43,400 --> 00:08:46,754 And since we added the event listener to a button, 173 00:08:46,754 --> 00:08:51,370 the element that cost the event, of course, is the button. 174 00:08:51,370 --> 00:08:56,370 So outputting "event.target" here will output the button. 175 00:08:56,390 --> 00:09:00,113 And that's then the second task solved. 176 00:09:01,140 --> 00:09:05,840 Now let's see whether it works by saving all the files, 177 00:09:05,840 --> 00:09:09,730 and then, back on the page, we can open the developer tools. 178 00:09:09,730 --> 00:09:13,760 And if I click the first button, I output this button. 179 00:09:13,760 --> 00:09:16,700 If I click the second button, I output this button, 180 00:09:16,700 --> 00:09:20,680 which also has the ID, which is my second button. 181 00:09:20,680 --> 00:09:25,580 So that is both working here and we did successfully solve 182 00:09:25,580 --> 00:09:27,283 these first two tasks. 183 00:09:29,260 --> 00:09:31,210 Now in task number three, 184 00:09:31,210 --> 00:09:33,710 we now also want to select the paragraphs 185 00:09:33,710 --> 00:09:38,710 because we need them in our button function stair. 186 00:09:39,130 --> 00:09:44,040 And since we'll need access to them in our button functions, 187 00:09:44,040 --> 00:09:47,110 I will actually not add my code here, 188 00:09:47,110 --> 00:09:49,130 or at least not like this. 189 00:09:49,130 --> 00:09:52,200 But instead, I'll copy this code from up here 190 00:09:53,950 --> 00:09:58,950 and copy that, and comment it out with that shortcut. 191 00:09:58,970 --> 00:10:02,203 This toggle line comment shortcut here. 192 00:10:03,880 --> 00:10:05,923 And then re-add it here, 193 00:10:07,400 --> 00:10:12,240 below task three, or actually below task four, 194 00:10:12,240 --> 00:10:15,250 because that's where we then will need to adjust 195 00:10:15,250 --> 00:10:19,570 that code in these functions to use the paragraphs we select 196 00:10:19,570 --> 00:10:21,113 and store in task three. 197 00:10:22,490 --> 00:10:24,070 So now in task three, 198 00:10:24,070 --> 00:10:27,310 I wanna select and store the paragraphs, 199 00:10:27,310 --> 00:10:30,190 and we should also select them in different ways 200 00:10:30,190 --> 00:10:31,643 as described here. 201 00:10:32,600 --> 00:10:36,470 So I'll have my firstParagraphElement here, 202 00:10:36,470 --> 00:10:39,810 and we should select this one as well as the second one, 203 00:10:39,810 --> 00:10:42,630 by drilling into the DOM. 204 00:10:42,630 --> 00:10:46,010 And to select this first paragraph here, 205 00:10:46,010 --> 00:10:49,120 what we, of course, could do is, 206 00:10:49,120 --> 00:10:52,690 we could dive into document body 207 00:10:52,690 --> 00:10:56,030 to dive into the body element of our document. 208 00:10:56,030 --> 00:10:58,650 So now we would be on this level here. 209 00:10:58,650 --> 00:11:01,510 And then this first paragraph in this section here 210 00:11:01,510 --> 00:11:05,890 can be accessed by also diving into this section, 211 00:11:05,890 --> 00:11:10,890 and then taking the second child element off that section. 212 00:11:11,200 --> 00:11:13,210 And the section itself, on the other hand 213 00:11:13,210 --> 00:11:17,020 is the third child element of body. 214 00:11:17,020 --> 00:11:18,450 So what we could do here 215 00:11:18,450 --> 00:11:23,450 is we could access document.body.children[2]. 216 00:11:23,460 --> 00:11:26,900 This gives us access to the third child of body, 217 00:11:26,900 --> 00:11:30,320 which as I just explained, is this section. 218 00:11:30,320 --> 00:11:33,780 And then we need the access to the second child of section 219 00:11:33,780 --> 00:11:37,640 by accessing children[1] on section. 220 00:11:37,640 --> 00:11:40,040 Since if the index starts at zero, 221 00:11:40,040 --> 00:11:43,940 children[1] will be the second child of this child, 222 00:11:43,940 --> 00:11:45,090 which is the section, 223 00:11:45,090 --> 00:11:47,763 and the second child of that is the paragraph. 224 00:11:49,250 --> 00:11:51,270 And then we can quickly validate this, 225 00:11:51,270 --> 00:11:55,020 by console.dirring the first paragraph. 226 00:11:55,020 --> 00:11:57,360 Or actually just console.logging it, 227 00:11:57,360 --> 00:12:00,790 so that we get this convenience output in the DevTools, 228 00:12:00,790 --> 00:12:04,363 where I can hover over it to have it marked on the left. 229 00:12:05,270 --> 00:12:06,693 And that's looking good. 230 00:12:08,000 --> 00:12:11,290 Now we should also select this third paragraph. 231 00:12:11,290 --> 00:12:13,920 And for this, we can, of course, 232 00:12:13,920 --> 00:12:18,920 copy this and create the second, or actually in this case, 233 00:12:20,640 --> 00:12:22,803 the thirdParagraphElement, I guess. 234 00:12:23,760 --> 00:12:27,580 And access the section of the body, as before. 235 00:12:27,580 --> 00:12:29,880 But then this third paragraph 236 00:12:29,880 --> 00:12:33,353 is actually the fourth child here. 237 00:12:36,180 --> 00:12:38,790 And now that fourth child, of course, 238 00:12:38,790 --> 00:12:42,610 has an index of three, since the index starts at zero, 239 00:12:42,610 --> 00:12:46,090 and then we can output this third paragraph element 240 00:12:46,090 --> 00:12:47,910 with console log. 241 00:12:47,910 --> 00:12:49,410 And if we do that and save, 242 00:12:49,410 --> 00:12:51,963 then this is also looking good. 243 00:12:52,990 --> 00:12:54,920 Now that's one way of selecting it. 244 00:12:54,920 --> 00:12:59,360 There would also be other ways of selecting this. 245 00:12:59,360 --> 00:13:02,330 For example, just to get creative, 246 00:13:02,330 --> 00:13:05,150 I'll comment this out and copy it. 247 00:13:05,150 --> 00:13:10,150 We could also build up on the firstParagraphElement 248 00:13:10,220 --> 00:13:13,897 and then access the nextElementSibling, 249 00:13:15,010 --> 00:13:19,030 which you learned is next HTML element sibling. 250 00:13:19,030 --> 00:13:21,560 So that would be the second paragraph, 251 00:13:21,560 --> 00:13:24,270 and then access the next element sibling of that, 252 00:13:24,270 --> 00:13:27,230 which would be that third paragraph. 253 00:13:27,230 --> 00:13:29,603 So that's also something we could do. 254 00:13:30,530 --> 00:13:33,080 And I'm just doing this so that you get comfortable 255 00:13:33,080 --> 00:13:37,300 with exploring this nested DOM structure. 256 00:13:37,300 --> 00:13:39,040 Of course, in reality, 257 00:13:39,040 --> 00:13:42,090 you would always go for these utility methods 258 00:13:42,090 --> 00:13:44,460 for selecting elements. 259 00:13:44,460 --> 00:13:46,840 But it is super important to understand 260 00:13:46,840 --> 00:13:49,630 the structure of these DOM objects, 261 00:13:49,630 --> 00:13:51,730 and how they are related with each other. 262 00:13:51,730 --> 00:13:55,023 And therefore, this is a good practice here. 263 00:13:56,070 --> 00:13:58,630 Now, if I save this approach, 264 00:13:58,630 --> 00:14:00,380 this is still the correct paragraph 265 00:14:00,380 --> 00:14:01,993 that's being selected here. 266 00:14:03,740 --> 00:14:07,410 And now that these paragraphs were selected and stored, 267 00:14:07,410 --> 00:14:10,130 we can move on to task number four, 268 00:14:10,130 --> 00:14:13,680 where I already re-added those event listeners 269 00:14:13,680 --> 00:14:15,420 and those functions, 270 00:14:15,420 --> 00:14:18,143 to implement the functionality described here. 271 00:14:19,000 --> 00:14:20,350 And for that we, first of all, 272 00:14:20,350 --> 00:14:24,680 wanna ensure that this removeParagraph function here, 273 00:14:24,680 --> 00:14:27,393 removes that third paragraph. 274 00:14:28,450 --> 00:14:31,160 And then for that, instead of console.dirring it, 275 00:14:31,160 --> 00:14:34,180 I'll use my thirdParagraphElement. 276 00:14:34,180 --> 00:14:36,800 And then you learned that we can easily remove it 277 00:14:36,800 --> 00:14:38,763 by calling remove on it. 278 00:14:39,730 --> 00:14:42,090 And that's all, that's all we got to do. 279 00:14:42,090 --> 00:14:45,000 This will remove this element from the DOM 280 00:14:45,000 --> 00:14:47,340 and therefore from the page. 281 00:14:47,340 --> 00:14:50,960 If we save this and go back, 282 00:14:50,960 --> 00:14:53,150 if I click remove paragraph, 283 00:14:53,150 --> 00:14:55,360 you'll see that paragraph was removed. 284 00:14:55,360 --> 00:14:56,730 If I hover over it again, 285 00:14:56,730 --> 00:15:00,260 it's not marked on the left because it's gone. 286 00:15:00,260 --> 00:15:02,833 The other paragraph is, of course, still there. 287 00:15:04,710 --> 00:15:07,770 So that's this first part of task number four. 288 00:15:07,770 --> 00:15:09,490 The second part is that, 289 00:15:09,490 --> 00:15:11,520 we should change the background color 290 00:15:11,520 --> 00:15:14,000 of the first paragraph to blue. 291 00:15:14,000 --> 00:15:15,360 And for this, we can reach out 292 00:15:15,360 --> 00:15:18,270 to the firstParagraphElement, 293 00:15:18,270 --> 00:15:21,890 and then you learned that one way of changing the styling 294 00:15:21,890 --> 00:15:25,673 is to use the style property on an element. 295 00:15:26,710 --> 00:15:30,640 And this style property then gives us a broad variety 296 00:15:30,640 --> 00:15:33,970 of styles that we can change. 297 00:15:33,970 --> 00:15:36,810 For example, we can change the background color 298 00:15:36,810 --> 00:15:40,260 by accessing background color like this, 299 00:15:40,260 --> 00:15:42,810 and I'm not getting all the completion here, by the way, 300 00:15:42,810 --> 00:15:45,110 still, this is correct code, 301 00:15:45,110 --> 00:15:48,530 style and then background color, 302 00:15:48,530 --> 00:15:51,090 and we can change this to blue. 303 00:15:51,090 --> 00:15:53,670 So using this blue shortcut identifier 304 00:15:53,670 --> 00:15:57,260 or of course you mix your own blue color, 305 00:15:57,260 --> 00:16:00,470 you use a hex code, whatever you want, 306 00:16:00,470 --> 00:16:03,163 all just go with that shortcut here. 307 00:16:04,530 --> 00:16:06,660 And with that, if you save this, 308 00:16:06,660 --> 00:16:08,800 if you click that second button, 309 00:16:08,800 --> 00:16:12,380 indeed this background color changes to blue. 310 00:16:12,380 --> 00:16:14,600 And if we inspect this paragraph, 311 00:16:14,600 --> 00:16:17,170 we can see that this inline style, 312 00:16:17,170 --> 00:16:21,653 so this style attribute with the CSS code was added. 313 00:16:23,220 --> 00:16:27,420 And this is this task, number four solved. 314 00:16:27,420 --> 00:16:31,360 In task number five, you should again make that blue, 315 00:16:31,360 --> 00:16:35,470 but now not with blue set as a style 316 00:16:35,470 --> 00:16:37,210 as a background color style, 317 00:16:37,210 --> 00:16:40,083 but instead by adding a CSS class. 318 00:16:41,030 --> 00:16:44,060 And for this we first of all, have to add a class. 319 00:16:44,060 --> 00:16:47,993 So install CSS, we can add a new class, 320 00:16:49,087 --> 00:16:52,280 "blue-bg" could be the name, 321 00:16:52,280 --> 00:16:57,160 and give just a background color CSS property. 322 00:16:57,160 --> 00:17:01,070 Now written like this, all lowercase with a dash, 323 00:17:01,070 --> 00:17:03,370 since this is no longer JavaScript, 324 00:17:03,370 --> 00:17:05,893 but CSS code in a CSS file. 325 00:17:07,250 --> 00:17:10,140 And then here again we can choose blue 326 00:17:10,140 --> 00:17:12,000 or maybe actually, I'll just choose 327 00:17:12,000 --> 00:17:14,973 a slightly different blue tone, whatever you want. 328 00:17:16,000 --> 00:17:21,000 And now the goal is to add this "blue-bg" class here, 329 00:17:21,045 --> 00:17:24,113 to this paragraph whenever this button is clicked. 330 00:17:25,220 --> 00:17:27,720 For that I'll comment out the previous approach 331 00:17:27,720 --> 00:17:30,420 of setting the style property. 332 00:17:30,420 --> 00:17:33,640 And instead here on firstParagraphElement, 333 00:17:33,640 --> 00:17:37,710 we can either set className to this class 334 00:17:37,710 --> 00:17:40,507 which we added to "blue-bg", 335 00:17:42,210 --> 00:17:45,050 so to that class I defined here. 336 00:17:45,050 --> 00:17:50,050 And if I save that, and I then click this button here, 337 00:17:50,090 --> 00:17:52,923 you see that background color gets added. 338 00:17:53,910 --> 00:17:55,550 Or alternatively, 339 00:17:55,550 --> 00:17:58,930 to not overwrite the entire list of classes 340 00:17:58,930 --> 00:18:00,950 that might've been added before, 341 00:18:00,950 --> 00:18:05,130 we can also use this classList object 342 00:18:05,130 --> 00:18:07,290 and call the add() method, 343 00:18:07,290 --> 00:18:10,623 to add our "blue-bg" class like that. 344 00:18:11,580 --> 00:18:13,044 And now again, if I save that, 345 00:18:13,044 --> 00:18:16,973 clicking that button adds that blue background color. 346 00:18:18,150 --> 00:18:21,653 And this is now also, the fifth task solved. 347 00:18:23,010 --> 00:18:25,300 Now I hope this all makes sense. 348 00:18:25,300 --> 00:18:26,950 I hope this is all clear now. 349 00:18:26,950 --> 00:18:31,950 If it's not, definitely revisit the lectures in this section 350 00:18:32,300 --> 00:18:34,890 where I do explain those concepts. 351 00:18:34,890 --> 00:18:36,140 But if it is clear, 352 00:18:36,140 --> 00:18:37,590 then we're ready to move on 353 00:18:37,590 --> 00:18:39,883 and dive into control structures.