1 00:00:01,330 --> 00:00:05,090 Welcome to the first of three wonderful projects 2 00:00:05,090 --> 00:00:07,490 that we're gonna build in this section. 3 00:00:07,490 --> 00:00:09,853 And let's get started right away. 4 00:00:11,770 --> 00:00:13,540 And here I have a working demo 5 00:00:13,540 --> 00:00:15,580 of the project that we're gonna build 6 00:00:15,580 --> 00:00:17,810 over the next couple of videos. 7 00:00:17,810 --> 00:00:20,890 And this project is called Guess My Number! 8 00:00:20,890 --> 00:00:24,130 And I went with this kind of retro design 9 00:00:24,130 --> 00:00:27,210 like inspired by the old 80s game. 10 00:00:27,210 --> 00:00:29,440 Just to make it a bit more fun. 11 00:00:29,440 --> 00:00:30,980 So as the name says, 12 00:00:30,980 --> 00:00:32,160 the goal of this project 13 00:00:32,160 --> 00:00:34,730 is to simply guess a secret number 14 00:00:34,730 --> 00:00:37,940 which is between one and 20. 15 00:00:37,940 --> 00:00:41,300 So here in this input we can type a number. 16 00:00:41,300 --> 00:00:44,370 Let's say 10, then we click Check! 17 00:00:44,370 --> 00:00:47,350 And then here on the right side we get a message. 18 00:00:47,350 --> 00:00:48,800 In this case it says, 19 00:00:48,800 --> 00:00:50,720 that our guess was Too Low! 20 00:00:50,720 --> 00:00:54,530 Also we can see that we started with a Score of 20 21 00:00:54,530 --> 00:00:58,410 and now after one failed guess it decreased to 19. 22 00:00:58,410 --> 00:01:00,870 So basically after each guess that we fail, 23 00:01:00,870 --> 00:01:03,063 the score decreases by one. 24 00:01:04,580 --> 00:01:06,470 So let's try another one. 25 00:01:06,470 --> 00:01:10,250 It's still Too Low! and our Score decreased again. 26 00:01:10,250 --> 00:01:12,200 Let's try 18. 27 00:01:12,200 --> 00:01:13,500 And now it's too high. 28 00:01:13,500 --> 00:01:15,150 So we get this different message. 29 00:01:16,870 --> 00:01:18,600 And now it's correct. 30 00:01:18,600 --> 00:01:21,360 So you see that we get this Correct number! message. 31 00:01:21,360 --> 00:01:23,180 The screen turns green 32 00:01:23,180 --> 00:01:26,190 and also we now have the Highscore here of 17. 33 00:01:26,190 --> 00:01:28,350 So a Highscore is another feature 34 00:01:28,350 --> 00:01:30,600 of this small application. 35 00:01:30,600 --> 00:01:32,180 Then if you want to play again, 36 00:01:32,180 --> 00:01:34,250 we can simply click the Again! button 37 00:01:34,250 --> 00:01:37,243 and it all resets everything except for the Highscore. 38 00:01:38,080 --> 00:01:39,970 So the Highscore is kept 39 00:01:39,970 --> 00:01:42,490 and so if I'm quicker in this round, 40 00:01:42,490 --> 00:01:45,400 my Highscore will then become better. 41 00:01:45,400 --> 00:01:46,933 Let's start again at 10. 42 00:01:49,400 --> 00:01:50,990 So maybe I can do it faster. 43 00:01:50,990 --> 00:01:52,293 Well, I think I cannot. 44 00:01:53,340 --> 00:01:54,433 It's Too high! 45 00:01:59,550 --> 00:02:01,790 And so my Highscore stays the same 46 00:02:01,790 --> 00:02:02,893 as it was before. 47 00:02:03,890 --> 00:02:04,723 Okay. 48 00:02:04,723 --> 00:02:06,810 So with this I think you understood 49 00:02:06,810 --> 00:02:08,400 how this project works. 50 00:02:08,400 --> 00:02:10,880 So let's actually get to work. 51 00:02:10,880 --> 00:02:13,020 And as always grab your starter files 52 00:02:13,020 --> 00:02:15,110 from the GitHub repository. 53 00:02:15,110 --> 00:02:17,220 I already have mine here. 54 00:02:17,220 --> 00:02:20,113 And then let's open up this folder. 55 00:02:25,400 --> 00:02:27,773 So that's this one. 56 00:02:29,250 --> 00:02:31,350 And let's start by taking a look 57 00:02:31,350 --> 00:02:33,630 at the files that we have here. 58 00:02:33,630 --> 00:02:36,850 First up, we have the Prettier configuration. 59 00:02:36,850 --> 00:02:39,230 So exactly the one that we used 60 00:02:39,230 --> 00:02:41,990 in the Editor setup section. 61 00:02:41,990 --> 00:02:44,420 And from now on we will always use this configuration 62 00:02:44,420 --> 00:02:45,793 in every single project. 63 00:02:47,110 --> 00:02:49,590 Then we have an empty Script. 64 00:02:49,590 --> 00:02:51,950 We have the CSS Style, 65 00:02:51,950 --> 00:02:53,270 which you can take a look at 66 00:02:53,270 --> 00:02:57,010 if you're interested at the same for the HTML. 67 00:02:57,010 --> 00:02:59,440 Now the HTML will actually be important, 68 00:02:59,440 --> 00:03:02,320 because that's where we will find the class names 69 00:03:02,320 --> 00:03:03,893 of all of these Elements 70 00:03:03,893 --> 00:03:05,790 that we gonna have to select 71 00:03:05,790 --> 00:03:07,800 to make this project work. 72 00:03:07,800 --> 00:03:10,160 But more about that later. 73 00:03:10,160 --> 00:03:11,700 And... 74 00:03:11,700 --> 00:03:12,533 Yeah. 75 00:03:12,533 --> 00:03:14,450 Let's close up this sidebar 76 00:03:15,850 --> 00:03:18,040 and focus on those gripped here. 77 00:03:18,040 --> 00:03:19,410 So as you just saw, 78 00:03:19,410 --> 00:03:21,630 all of this interface here basically 79 00:03:21,630 --> 00:03:24,350 is implemented in HTML. 80 00:03:24,350 --> 00:03:29,190 So again, that is this document. 81 00:03:29,190 --> 00:03:30,023 Okay. 82 00:03:30,023 --> 00:03:31,590 And this whole HTML document 83 00:03:31,590 --> 00:03:35,290 is made up of smaller HTML Elements. 84 00:03:35,290 --> 00:03:36,550 For example, 85 00:03:36,550 --> 00:03:40,330 this message that we see here is in our HTML, 86 00:03:40,330 --> 00:03:43,990 this paragraph here with the message class. 87 00:03:43,990 --> 00:03:45,580 And so now in JavaScript, 88 00:03:45,580 --> 00:03:47,840 we can actually select this Element 89 00:03:47,840 --> 00:03:50,060 based on this class. 90 00:03:50,060 --> 00:03:53,590 So a little bit like we can select Elements in CSS. 91 00:03:53,590 --> 00:03:56,120 We can do the same in JavaScript. 92 00:03:56,120 --> 00:04:00,060 And if you're not at all familiar with HTML and CSS, 93 00:04:00,060 --> 00:04:03,620 then please watch the HTML and CSS crash course, 94 00:04:03,620 --> 00:04:06,120 that is in the previous section. 95 00:04:06,120 --> 00:04:08,460 Anyway, before we learn what the DOM 96 00:04:08,460 --> 00:04:11,020 and DOM Manipulation actually are, 97 00:04:11,020 --> 00:04:12,710 let's quickly learn an easy way 98 00:04:12,710 --> 00:04:16,363 of selecting an Element like this in JavaScript. 99 00:04:17,680 --> 00:04:18,930 And this is how it works. 100 00:04:20,200 --> 00:04:25,160 We write document.querySelector 101 00:04:25,160 --> 00:04:27,780 So this querySelector is basically 102 00:04:27,780 --> 00:04:31,010 a method that's available on the document object. 103 00:04:31,010 --> 00:04:33,440 And more about that later. 104 00:04:33,440 --> 00:04:34,560 Now into this method, 105 00:04:34,560 --> 00:04:37,010 we need to pass in a Selector. 106 00:04:37,010 --> 00:04:38,850 And again, this Selector 107 00:04:38,850 --> 00:04:40,770 is exactly the same Selector 108 00:04:40,770 --> 00:04:42,593 that we would use in CSS. 109 00:04:43,520 --> 00:04:45,000 So we pass in the string 110 00:04:45,000 --> 00:04:46,800 and we want to select the Element 111 00:04:46,800 --> 00:04:49,330 with the class name of message. 112 00:04:49,330 --> 00:04:51,661 And so we need to write a . 113 00:04:51,661 --> 00:04:54,120 and then message 114 00:04:54,120 --> 00:04:56,540 Again, this is exactly how we would select 115 00:04:56,540 --> 00:04:58,930 the same Element using CSS. 116 00:04:58,930 --> 00:05:00,200 Right? 117 00:05:00,200 --> 00:05:02,830 Now if it was an ID instead of a class, 118 00:05:02,830 --> 00:05:04,157 we would use the # 119 00:05:05,260 --> 00:05:06,093 Right? 120 00:05:06,093 --> 00:05:09,260 But in this case, it is really a class. 121 00:05:09,260 --> 00:05:10,360 And so let's use the . 122 00:05:11,250 --> 00:05:13,330 And now we can quickly take a look 123 00:05:13,330 --> 00:05:15,830 at the result of this selection here, 124 00:05:15,830 --> 00:05:17,420 using the Console. 125 00:05:17,420 --> 00:05:20,330 And remember that we set up the cl snippet 126 00:05:20,330 --> 00:05:23,000 in the Editor setup section. 127 00:05:23,000 --> 00:05:24,730 So I just write cl 128 00:05:24,730 --> 00:05:28,330 and then I get console.log automatically here. 129 00:05:28,330 --> 00:05:30,830 Now in case you skipped that section, 130 00:05:30,830 --> 00:05:34,040 you can always go back and see how I did that 131 00:05:34,040 --> 00:05:36,963 or you can just write console.log manually. 132 00:05:37,950 --> 00:05:39,470 So I give it a Save. 133 00:05:39,470 --> 00:05:41,090 And now I do another thing 134 00:05:41,090 --> 00:05:43,980 that we learned in the Editor setup section, 135 00:05:43,980 --> 00:05:45,800 which is to open up this project 136 00:05:45,800 --> 00:05:47,580 using the live-server. 137 00:05:47,580 --> 00:05:48,670 Right? 138 00:05:48,670 --> 00:05:51,160 So let's open up the Terminal here 139 00:05:51,160 --> 00:05:53,133 by clicking New Terminal. 140 00:05:54,510 --> 00:05:55,920 Okay. 141 00:05:55,920 --> 00:05:58,090 Let's clear it using Command + K. 142 00:05:58,090 --> 00:06:00,380 And again, we learned how to do all of these 143 00:06:00,380 --> 00:06:02,820 in the Editor setup section. 144 00:06:02,820 --> 00:06:03,800 So if you skipped that, 145 00:06:03,800 --> 00:06:06,940 then please go back and watch that one first. 146 00:06:06,940 --> 00:06:10,560 Anyway we see that we're already in the folder. 147 00:06:10,560 --> 00:06:13,490 So Guess-My-Number that's exactly the folder. 148 00:06:13,490 --> 00:06:18,490 And now all we need to do is to type live-server 149 00:06:18,840 --> 00:06:21,840 hit Enter and then it will open up 150 00:06:21,840 --> 00:06:24,323 a New Tab in our browser. 151 00:06:25,420 --> 00:06:26,710 So this is the demo here 152 00:06:26,710 --> 00:06:29,250 that I'm gonna keep on the right side. 153 00:06:29,250 --> 00:06:30,730 And then here on the left side, 154 00:06:30,730 --> 00:06:33,233 is the actual project that we are building. 155 00:06:34,170 --> 00:06:36,090 Of course nothing works yet, 156 00:06:36,090 --> 00:06:38,730 but let's just open up the Console. 157 00:06:38,730 --> 00:06:40,683 So Inspect Console. 158 00:06:41,680 --> 00:06:43,063 Give it some more space. 159 00:06:46,270 --> 00:06:48,810 And so indeed we actually already have 160 00:06:48,810 --> 00:06:51,270 the p Element here selected. 161 00:06:51,270 --> 00:06:52,890 So that's what we did here. 162 00:06:52,890 --> 00:06:56,100 So document.querySelector('.message') 163 00:06:56,100 --> 00:06:56,940 And so in the Console, 164 00:06:56,940 --> 00:06:59,980 we then get basically this entire Element. 165 00:06:59,980 --> 00:07:01,560 And as we hover over it, 166 00:07:01,560 --> 00:07:04,793 it actually even gets selected here on the page. 167 00:07:05,810 --> 00:07:06,643 Great. 168 00:07:06,643 --> 00:07:07,980 So this is the first, 169 00:07:07,980 --> 00:07:11,180 basically DOM manipulation that you did. 170 00:07:11,180 --> 00:07:12,770 Great job. 171 00:07:12,770 --> 00:07:14,680 Now this Element here itself 172 00:07:14,680 --> 00:07:16,920 is not really that useful. 173 00:07:16,920 --> 00:07:20,200 So instead let's actually get this text. 174 00:07:20,200 --> 00:07:21,733 So this Start guessing here. 175 00:07:23,120 --> 00:07:23,980 And we can do that. 176 00:07:23,980 --> 00:07:25,130 Simple enough. 177 00:07:25,130 --> 00:07:27,300 All we have to do is another . 178 00:07:27,300 --> 00:07:28,570 and then textContent 179 00:07:31,620 --> 00:07:35,480 So, this part here first select the Element. 180 00:07:35,480 --> 00:07:38,110 And so the result of this querySelector method 181 00:07:38,110 --> 00:07:39,810 is gonna be an Element. 182 00:07:39,810 --> 00:07:41,300 And then on that Element, 183 00:07:41,300 --> 00:07:44,060 we can read the textContent property. 184 00:07:44,060 --> 00:07:46,600 And so that's why we use another . here 185 00:07:46,600 --> 00:07:49,570 and remember when we have multiple . operators, 186 00:07:49,570 --> 00:07:51,870 they are executed from left to right. 187 00:07:51,870 --> 00:07:54,290 And so first, this operation here is done. 188 00:07:54,290 --> 00:07:56,920 Then these selected here 189 00:07:56,920 --> 00:08:00,040 basically will get replaced with the Element itself. 190 00:08:00,040 --> 00:08:01,470 And then on that Element, 191 00:08:01,470 --> 00:08:05,127 we can read the textContent property using another . 192 00:08:06,290 --> 00:08:07,870 So let's give it a Save. 193 00:08:07,870 --> 00:08:10,300 This will then reload automatically. 194 00:08:10,300 --> 00:08:13,790 And yes, now we get Start guessing... 195 00:08:13,790 --> 00:08:17,500 Which is really just a textContent of this Element. 196 00:08:17,500 --> 00:08:18,530 Great. 197 00:08:18,530 --> 00:08:19,900 So now we kind of know 198 00:08:19,900 --> 00:08:21,500 how to establish this connection 199 00:08:21,500 --> 00:08:24,800 between our code and the user interface. 200 00:08:24,800 --> 00:08:26,990 So in other words, the HTML document 201 00:08:26,990 --> 00:08:29,940 that's being displayed in the browser. 202 00:08:29,940 --> 00:08:33,070 So this was a quick introduction to the DOM 203 00:08:33,070 --> 00:08:35,210 and how to select an Element. 204 00:08:35,210 --> 00:08:37,300 But what is the DOM actually? 205 00:08:37,300 --> 00:08:39,150 And what is DOM Manipulation? 206 00:08:39,150 --> 00:08:41,970 Which is the big topic of this section. 207 00:08:41,970 --> 00:08:44,883 Well, let's find out in the next video.