1 00:00:01,170 --> 00:00:05,340 So the DOM actually also includes CSS Styles. 2 00:00:05,340 --> 00:00:09,860 And so with DOM manipulation, we can also change Styles. 3 00:00:09,860 --> 00:00:11,653 So let's try that out now. 4 00:00:13,130 --> 00:00:16,630 And what I want to do here is to change the background 5 00:00:16,630 --> 00:00:19,910 of this entire page here to a green color. 6 00:00:19,910 --> 00:00:22,830 Whenever the player guesses the right number, 7 00:00:22,830 --> 00:00:25,360 so when the player wins the game. 8 00:00:25,360 --> 00:00:29,083 And we will also make this number here, wider then. 9 00:00:30,190 --> 00:00:32,040 So let me just demonstrate that here. 10 00:00:34,100 --> 00:00:36,283 So let's quickly win this game here. 11 00:00:38,440 --> 00:00:40,190 Seventeen. 12 00:00:40,190 --> 00:00:41,520 And so you see, 13 00:00:41,520 --> 00:00:43,490 we want this green background, 14 00:00:43,490 --> 00:00:46,780 and also this number here being wider. 15 00:00:46,780 --> 00:00:50,230 And for that, of course, we need to manipulate the Styles 16 00:00:50,230 --> 00:00:51,440 of this page. 17 00:00:51,440 --> 00:00:52,663 So the CSS. 18 00:00:55,050 --> 00:00:58,170 Okay, so that should happen here in this scenario, 19 00:00:58,170 --> 00:01:00,140 where the player wins the game. 20 00:01:00,140 --> 00:01:03,130 So where the guess is equal to the secret number 21 00:01:03,130 --> 00:01:05,510 and actually, let's add some comments here 22 00:01:05,510 --> 00:01:08,870 to make this code a little bit easier to understand. 23 00:01:08,870 --> 00:01:10,140 So this one, 24 00:01:10,140 --> 00:01:10,973 when 25 00:01:12,060 --> 00:01:13,133 player wins, 26 00:01:14,570 --> 00:01:15,710 this first one is 27 00:01:16,710 --> 00:01:18,440 when there is no 28 00:01:19,470 --> 00:01:20,303 input. 29 00:01:23,860 --> 00:01:25,240 This is when 30 00:01:25,240 --> 00:01:27,130 guess is 31 00:01:27,130 --> 00:01:28,130 too high. 32 00:01:33,116 --> 00:01:34,616 And this one here, 33 00:01:35,639 --> 00:01:37,200 this one guess is too 34 00:01:38,820 --> 00:01:39,653 low. 35 00:01:40,960 --> 00:01:44,990 So this now at least looks a little bit nicer. 36 00:01:44,990 --> 00:01:49,710 But anyway, let's now learn how to manipulate CSS Styles. 37 00:01:49,710 --> 00:01:53,500 So we want to manipulate the Style of this whole page. 38 00:01:53,500 --> 00:01:54,840 And so what we need to do 39 00:01:54,840 --> 00:01:57,963 is to select the whole body of this page first. 40 00:01:59,540 --> 00:02:03,490 Okay, so the body is basically this entire visible part 41 00:02:03,490 --> 00:02:04,563 of the website. 42 00:02:06,320 --> 00:02:09,083 So it's basically this whole element. 43 00:02:10,110 --> 00:02:11,600 Alright. 44 00:02:11,600 --> 00:02:15,060 So as always, we need to start by selecting the element 45 00:02:15,060 --> 00:02:16,543 that we want to manipulate. 46 00:02:17,550 --> 00:02:18,383 So 47 00:02:18,383 --> 00:02:20,283 Document Dot querySelector, 48 00:02:22,000 --> 00:02:23,460 and then the selector. 49 00:02:23,460 --> 00:02:26,800 And now it's just the body element so there's no Dot 50 00:02:26,800 --> 00:02:28,710 because that's for classes. 51 00:02:28,710 --> 00:02:31,860 It's just really the element name. 52 00:02:31,860 --> 00:02:33,580 And since there's only one body, 53 00:02:33,580 --> 00:02:35,690 it's going to work just fine. 54 00:02:35,690 --> 00:02:37,430 So here, we select the body. 55 00:02:37,430 --> 00:02:40,060 And now we want to change the CSS Style. 56 00:02:40,060 --> 00:02:43,500 So here, we need to write Style. 57 00:02:43,500 --> 00:02:44,980 So we access basically, 58 00:02:44,980 --> 00:02:47,950 the Style property of this element and then 59 00:02:47,950 --> 00:02:49,260 another Dot 60 00:02:49,260 --> 00:02:52,470 and then the name of the property that we want to change. 61 00:02:52,470 --> 00:02:55,043 And in this case, it is the background color. 62 00:02:56,290 --> 00:02:57,990 So background 63 00:02:57,990 --> 00:03:01,470 and in CSS, we write the background color like this 64 00:03:01,470 --> 00:03:03,370 background Dash 65 00:03:03,370 --> 00:03:04,290 color, 66 00:03:04,290 --> 00:03:05,220 right. 67 00:03:05,220 --> 00:03:07,930 However, in JavaScript that's not allowed. 68 00:03:07,930 --> 00:03:09,210 And so in JavaScript 69 00:03:09,210 --> 00:03:12,110 all these property names that have two words 70 00:03:12,110 --> 00:03:13,880 like background color 71 00:03:13,880 --> 00:03:16,620 will simply adopt the Camel case notation 72 00:03:16,620 --> 00:03:18,537 that I already explained you before, 73 00:03:18,537 --> 00:03:20,840 and that we've been using all the time. 74 00:03:20,840 --> 00:03:22,770 So instead of background Dash color 75 00:03:22,770 --> 00:03:24,930 it's going to be background 76 00:03:24,930 --> 00:03:26,340 uppercase C 77 00:03:26,340 --> 00:03:28,380 for color like this. 78 00:03:28,380 --> 00:03:31,530 And the same rule applies to all the other property names 79 00:03:31,530 --> 00:03:33,440 that have multiple words. 80 00:03:33,440 --> 00:03:35,770 So Style Dot background color, 81 00:03:35,770 --> 00:03:37,890 and now we set it to something. 82 00:03:37,890 --> 00:03:39,890 And let's get the actual color 83 00:03:39,890 --> 00:03:41,380 from or 84 00:03:41,380 --> 00:03:42,393 CSS. 85 00:03:43,900 --> 00:03:46,340 So you see that background color, 86 00:03:46,340 --> 00:03:48,920 here is the one that we're trying to define. 87 00:03:48,920 --> 00:03:52,480 And we will specify it to this color value. 88 00:03:52,480 --> 00:03:57,430 So this is a standard RBG value in hexadecimal. 89 00:03:57,430 --> 00:04:02,430 And so we set it equal to 10, we must write a string, 90 00:04:02,520 --> 00:04:05,320 and then the value we want to set it to. 91 00:04:05,320 --> 00:04:08,940 So just like before, to set anything on the DOM, 92 00:04:08,940 --> 00:04:11,280 we simply use the Equal sign. 93 00:04:11,280 --> 00:04:13,270 So we have all of this. 94 00:04:13,270 --> 00:04:16,830 So the background color property on the Style property, 95 00:04:16,830 --> 00:04:19,800 and we want to set it to this value, 96 00:04:19,800 --> 00:04:23,030 and so we set it equal to the value. 97 00:04:23,030 --> 00:04:23,950 Okay, 98 00:04:23,950 --> 00:04:25,410 so that's one part. 99 00:04:25,410 --> 00:04:28,480 And now let's also increase the width 100 00:04:28,480 --> 00:04:30,470 of this number here. 101 00:04:30,470 --> 00:04:31,400 Okay, 102 00:04:31,400 --> 00:04:35,070 that's important because I want to show you something there. 103 00:04:35,070 --> 00:04:37,483 So Document Dot querySelector. 104 00:04:39,320 --> 00:04:42,703 And that is the element with the class of number. 105 00:04:44,890 --> 00:04:45,840 And again, 106 00:04:45,840 --> 00:04:47,480 we want to change the Style. 107 00:04:47,480 --> 00:04:49,440 So Dot Style, 108 00:04:49,440 --> 00:04:50,273 Dot 109 00:04:50,273 --> 00:04:51,106 width, 110 00:04:51,960 --> 00:04:55,090 and then again we need to specify a string. 111 00:04:55,090 --> 00:04:57,680 So whenever we are manipulating a Style, 112 00:04:57,680 --> 00:05:00,670 we always need to specify a string . 113 00:05:00,670 --> 00:05:03,980 We cannot just write like a number like 30, 114 00:05:03,980 --> 00:05:05,460 it has to be a string. 115 00:05:05,460 --> 00:05:07,920 In India, we need a unit. 116 00:05:07,920 --> 00:05:12,920 And now I already closed the file so let's open it up again. 117 00:05:12,950 --> 00:05:15,450 And the number that I'm looking for 118 00:05:15,450 --> 00:05:17,310 currently has a width 119 00:05:17,310 --> 00:05:18,143 of 15 120 00:05:18,143 --> 00:05:19,430 REM. 121 00:05:19,430 --> 00:05:22,143 And now I want to double it. So 30 REM, 122 00:05:23,510 --> 00:05:24,850 so 123 00:05:24,850 --> 00:05:25,830 30. 124 00:05:25,830 --> 00:05:27,050 REM, 125 00:05:27,050 --> 00:05:30,270 and again it needs to be inside of a string. 126 00:05:30,270 --> 00:05:32,500 I cannot just write 30 REM, 127 00:05:32,500 --> 00:05:34,840 or 30. So just a number, 128 00:05:34,840 --> 00:05:36,110 that would not work, 129 00:05:36,110 --> 00:05:38,060 we have to specify a string, 130 00:05:38,060 --> 00:05:41,310 which in this case contains the number 131 00:05:41,310 --> 00:05:42,143 plus 132 00:05:42,143 --> 00:05:43,550 the unit. 133 00:05:43,550 --> 00:05:47,120 So the same would be for percentages or pixels, 134 00:05:47,120 --> 00:05:50,400 or whatever unit we used in CSS. 135 00:05:50,400 --> 00:05:52,280 Okay, give it a safe now. 136 00:05:52,280 --> 00:05:55,930 And now let's actually try the correct number right away. 137 00:05:55,930 --> 00:05:57,550 So 12. 138 00:05:57,550 --> 00:05:58,383 And 139 00:05:58,383 --> 00:05:59,216 yes, 140 00:05:59,216 --> 00:06:00,330 it worked. 141 00:06:00,330 --> 00:06:03,030 Let's actually get rid of the console here, 142 00:06:03,030 --> 00:06:05,120 then the page looks a bit nicer. 143 00:06:05,120 --> 00:06:06,570 And we can also by the way 144 00:06:06,570 --> 00:06:08,900 get rid of the terminal here 145 00:06:08,900 --> 00:06:10,700 in VS code 146 00:06:10,700 --> 00:06:13,570 because even if we close this panel here, 147 00:06:13,570 --> 00:06:15,920 this process will still keep running, 148 00:06:15,920 --> 00:06:18,480 the only way we stop this process from running 149 00:06:18,480 --> 00:06:21,550 is by hitting here this trash can, 150 00:06:21,550 --> 00:06:26,020 which will kill the terminal or by hitting Ctrl C. 151 00:06:26,020 --> 00:06:29,820 So let's close it because this takes up too much space. 152 00:06:29,820 --> 00:06:33,040 But now Yeah, so this worked just fine. 153 00:06:33,040 --> 00:06:37,070 Now these Styles are actually set as Inline Styles. 154 00:06:37,070 --> 00:06:38,830 So of course, we are not changing 155 00:06:38,830 --> 00:06:41,780 the CSS file or anything like that. 156 00:06:41,780 --> 00:06:43,750 And let me just show that to you. 157 00:06:43,750 --> 00:06:47,503 So actually, I will need back the Dev tools here. 158 00:06:48,620 --> 00:06:51,653 Make it a bit larger now just to show it to you. 159 00:06:52,610 --> 00:06:53,520 And 160 00:06:55,580 --> 00:06:57,880 so Indeed, it is an Inline Style. 161 00:06:57,880 --> 00:07:00,760 So a Style that is applied directly in 162 00:07:00,760 --> 00:07:03,570 the HTML using the Style attribute. 163 00:07:03,570 --> 00:07:06,770 And the same is going to be true for the body. 164 00:07:06,770 --> 00:07:07,980 Exactly. 165 00:07:07,980 --> 00:07:10,783 So we see here, this is the background color 166 00:07:10,783 --> 00:07:12,293 that we just applied. 167 00:07:13,540 --> 00:07:14,373 Alright. 168 00:07:17,170 --> 00:07:19,520 So of course not changing the CSS file 169 00:07:19,520 --> 00:07:21,540 or anything like that. 170 00:07:21,540 --> 00:07:22,610 Okay. 171 00:07:22,610 --> 00:07:23,800 And that's it actually, 172 00:07:23,800 --> 00:07:27,280 that's really the fundamentals of manipulating Styles 173 00:07:27,280 --> 00:07:28,710 in CSS 174 00:07:28,710 --> 00:07:30,380 The most important thing to remember 175 00:07:30,380 --> 00:07:33,170 is to use the Style property. 176 00:07:33,170 --> 00:07:36,810 And then on there is where we specify the CSS property. 177 00:07:36,810 --> 00:07:39,160 And we need to specify that property 178 00:07:39,160 --> 00:07:43,150 in the Camel case notation in case there is two words 179 00:07:43,150 --> 00:07:45,573 and then the value always needs to be a string. 180 00:07:46,510 --> 00:07:49,760 So that's all you need to know in order to change Styles 181 00:07:49,760 --> 00:07:51,710 like we just did here. 182 00:07:51,710 --> 00:07:52,700 Awesome. 183 00:07:52,700 --> 00:07:55,930 We're doing great progress in this project. 184 00:07:55,930 --> 00:07:58,430 And I hope that you're enjoying it so far. 185 00:07:58,430 --> 00:08:00,600 And that you find it a lot of fun 186 00:08:00,600 --> 00:08:04,760 to be able to manipulate a webpage like this. 187 00:08:04,760 --> 00:08:06,430 Anyway, in the next video, 188 00:08:06,430 --> 00:08:10,760 we will implement this reset button here basically 189 00:08:10,760 --> 00:08:13,210 where we can play the game again. 190 00:08:13,210 --> 00:08:15,303 And so I hope to see you there soon.