1 00:00:02,150 --> 00:00:04,910 Now, to practice more JavaScript 2 00:00:04,910 --> 00:00:09,430 and explore loops in more realistic examples, 3 00:00:09,430 --> 00:00:12,320 I attached another ZIP file, 4 00:00:12,320 --> 00:00:15,480 this loops-in-action ZIP file, 5 00:00:15,480 --> 00:00:18,040 which you can extract to get this folder 6 00:00:18,040 --> 00:00:22,890 with this HTML and this CSS file, which you see here. 7 00:00:22,890 --> 00:00:26,730 And these are the two files we will work on 8 00:00:26,730 --> 00:00:29,420 and a JavaScript file, which we will create 9 00:00:29,420 --> 00:00:31,320 over the next minutes. 10 00:00:31,320 --> 00:00:32,770 So we can ignore the other content 11 00:00:32,770 --> 00:00:34,680 of this project folder for now, 12 00:00:34,680 --> 00:00:36,733 that's what we will continue working on. 13 00:00:37,790 --> 00:00:41,510 So simply add this extracted loops-in-action folder 14 00:00:41,510 --> 00:00:43,610 to your overall project folder 15 00:00:43,610 --> 00:00:45,540 in which we've been working, 16 00:00:45,540 --> 00:00:47,480 and then as before, 17 00:00:47,480 --> 00:00:50,140 simply open the index.html file 18 00:00:50,140 --> 00:00:53,000 with that live server extension 19 00:00:53,000 --> 00:00:55,563 so that you see it on the screen. 20 00:00:56,420 --> 00:01:00,750 And that is the example I showed you a little bit earlier 21 00:01:00,750 --> 00:01:05,750 in this course already but without any functionality. 22 00:01:05,870 --> 00:01:08,340 Clicking these buttons doesn't do anything 23 00:01:08,340 --> 00:01:11,543 because that is exactly what we will work on. 24 00:01:12,520 --> 00:01:15,670 And therefore, let's now work on this together. 25 00:01:15,670 --> 00:01:18,420 And here in this first example, 26 00:01:18,420 --> 00:01:21,160 we wanna build a simple calculator 27 00:01:21,160 --> 00:01:23,380 where we can enter a number here, 28 00:01:23,380 --> 00:01:25,130 and when we click that button, 29 00:01:25,130 --> 00:01:30,040 we add up all the numbers leading up to this number, 30 00:01:30,040 --> 00:01:35,040 and output the overall sum here in this box. 31 00:01:35,490 --> 00:01:38,010 For this in this index.html file, 32 00:01:38,010 --> 00:01:40,140 in this loops-in-action folder, 33 00:01:40,140 --> 00:01:44,600 I got this paragraph with an id of calculated-sum, 34 00:01:44,600 --> 00:01:46,790 which currently has no content 35 00:01:46,790 --> 00:01:49,020 between the opening and closing tags 36 00:01:49,020 --> 00:01:50,770 because that will be the paragraph, 37 00:01:50,770 --> 00:01:52,800 which I later wanna target 38 00:01:52,800 --> 00:01:55,203 to output the result there. 39 00:01:56,160 --> 00:01:58,790 And of course, we also need to gain access 40 00:01:58,790 --> 00:02:01,170 to that input field here 41 00:02:01,170 --> 00:02:03,780 to read the value the user entered, 42 00:02:03,780 --> 00:02:06,300 and we then also need to add an event listener 43 00:02:06,300 --> 00:02:10,190 to this button to act upon a click 44 00:02:10,190 --> 00:02:13,523 and work with that entered input value. 45 00:02:14,460 --> 00:02:17,010 And therefore, that's what we'll implement now. 46 00:02:17,010 --> 00:02:21,987 For this, I'll add a loops-in-action.js file 47 00:02:22,940 --> 00:02:25,680 with dashes between these words 48 00:02:25,680 --> 00:02:29,500 since this is how we commonly name our files 49 00:02:29,500 --> 00:02:31,000 in web development. 50 00:02:31,000 --> 00:02:35,436 All lowercase with dashes between individual words. 51 00:02:35,436 --> 00:02:38,610 And, of course, I wanna include that file, 52 00:02:38,610 --> 00:02:40,380 I wanna link to that file 53 00:02:40,380 --> 00:02:43,150 from inside my index.html file, 54 00:02:43,150 --> 00:02:47,600 and therefore here, in the head section below the link, 55 00:02:47,600 --> 00:02:50,770 I will add script tags, 56 00:02:50,770 --> 00:02:53,870 and add the src attribute to point 57 00:02:53,870 --> 00:02:57,170 at this loops-in-action JavaScript file 58 00:02:57,170 --> 00:03:01,620 and very important, add this defer attribute 59 00:03:01,620 --> 00:03:04,960 to make sure that the script is only evaluated 60 00:03:04,960 --> 00:03:09,100 and executed once the entire page code has been parsed 61 00:03:09,100 --> 00:03:11,003 and loaded by the browser. 62 00:03:12,630 --> 00:03:15,410 Now we can save this index.html file 63 00:03:15,410 --> 00:03:19,143 and work on this loops-in-action.js file. 64 00:03:20,080 --> 00:03:22,060 And here to solve this first task, 65 00:03:22,060 --> 00:03:23,850 as I mentioned, we wanna get access 66 00:03:23,850 --> 00:03:26,220 to the button, to the input field 67 00:03:26,220 --> 00:03:27,980 and to this paragraph. 68 00:03:27,980 --> 00:03:30,750 These are the three elements we need to get access to 69 00:03:30,750 --> 00:03:32,310 to work with them. 70 00:03:32,310 --> 00:03:35,040 And then we'll need to act accordingly 71 00:03:35,040 --> 00:03:36,970 when the button is clicked. 72 00:03:36,970 --> 00:03:41,970 Therefore here, I'll start with the First Example 73 00:03:42,570 --> 00:03:45,220 where we sum our numbers. 74 00:03:45,220 --> 00:03:46,730 And I'm just adding the comment here 75 00:03:46,730 --> 00:03:51,060 so that this overall JavaScript file stays structured 76 00:03:51,060 --> 00:03:54,003 and is easy to understand. 77 00:03:54,960 --> 00:03:57,710 And then here, I'll first of all create a new constant 78 00:03:57,710 --> 00:03:59,710 in which I wanna store my button 79 00:03:59,710 --> 00:04:01,520 to which I wanna reach out 80 00:04:01,520 --> 00:04:05,190 because I'll need that button to add the event listener. 81 00:04:05,190 --> 00:04:08,820 And that could be the calculateSumButtonElement. 82 00:04:10,910 --> 00:04:11,810 The name is up to you 83 00:04:11,810 --> 00:04:14,290 but I think that is a good description 84 00:04:14,290 --> 00:04:17,430 of what we will store in this constant. 85 00:04:17,430 --> 00:04:20,560 And the question now is how do we get access 86 00:04:20,560 --> 00:04:22,060 to this button. 87 00:04:22,060 --> 00:04:24,350 It does not have an ID 88 00:04:24,350 --> 00:04:26,280 but, of course, we could add one, 89 00:04:26,280 --> 00:04:28,530 and that would be perfectly fine 90 00:04:28,530 --> 00:04:32,150 so that we can then select the button by ID. 91 00:04:32,150 --> 00:04:33,950 But we could also use querySelector. 92 00:04:35,260 --> 00:04:37,160 And you learned that querySelector, 93 00:04:37,160 --> 00:04:38,320 when we use it, 94 00:04:38,320 --> 00:04:42,130 actually selects the first matching element. 95 00:04:42,130 --> 00:04:44,830 So here I could select button like this 96 00:04:44,830 --> 00:04:48,140 and that would work because in the HTML file, 97 00:04:48,140 --> 00:04:51,863 this is the first button in the overall document. 98 00:04:52,750 --> 00:04:54,060 We got more buttons 99 00:04:54,060 --> 00:04:56,490 but they come after this button. 100 00:04:56,490 --> 00:05:00,143 So actually using querySelector button here would work. 101 00:05:01,700 --> 00:05:04,260 But we could also be a bit more specific 102 00:05:04,260 --> 00:05:05,780 in this querySelector, 103 00:05:05,780 --> 00:05:09,760 and there in this CSS query code, which we pass to it 104 00:05:09,760 --> 00:05:13,010 to make sure that even if we would add another button 105 00:05:13,010 --> 00:05:14,800 in front of it in the future, 106 00:05:14,800 --> 00:05:17,576 we still select this button correctly. 107 00:05:17,576 --> 00:05:20,440 And here we could utilize the fact 108 00:05:20,440 --> 00:05:23,730 that on this section that wraps the button, 109 00:05:23,730 --> 00:05:27,543 we got this id here, calculator. 110 00:05:28,410 --> 00:05:32,030 And I did mention that what we pass to querySelector, 111 00:05:32,030 --> 00:05:36,650 in the end should just be a valid CSS selector. 112 00:05:36,650 --> 00:05:38,090 So what we can do here 113 00:05:38,090 --> 00:05:43,090 is we can also select the ID, calculator, oops, calculator 114 00:05:43,270 --> 00:05:44,740 with the hash symbol. 115 00:05:44,740 --> 00:05:47,230 That's the CSS ID selector. 116 00:05:47,230 --> 00:05:50,760 And then a blank and then the button tag. 117 00:05:50,760 --> 00:05:53,570 And that means we wanna select the first button 118 00:05:53,570 --> 00:05:57,770 inside of an element with the ID calculator. 119 00:05:57,770 --> 00:05:59,840 And that's a more specific way 120 00:05:59,840 --> 00:06:02,380 of targeting exactly this button 121 00:06:02,380 --> 00:06:06,350 and now even if we would add another button here 122 00:06:06,350 --> 00:06:08,730 in front of that button, 123 00:06:08,730 --> 00:06:11,350 we would still select this button 124 00:06:11,350 --> 00:06:13,500 with this querySelector code 125 00:06:13,500 --> 00:06:18,500 because we have this extra selection criteria here 126 00:06:18,510 --> 00:06:21,760 of only taking a button that's inside an element 127 00:06:21,760 --> 00:06:24,470 with the calculator ID. 128 00:06:24,470 --> 00:06:26,730 This, of course, is not related to loops 129 00:06:26,730 --> 00:06:30,150 but this also is a general JavaScript practice 130 00:06:30,150 --> 00:06:33,883 and that's why I wanted to emphasize this as well. 131 00:06:34,720 --> 00:06:37,020 I'll get rid of this extra button here though. 132 00:06:38,130 --> 00:06:40,630 So now we've got access to that button, 133 00:06:40,630 --> 00:06:44,740 and here we can now use that calculateSumButtonElement 134 00:06:44,740 --> 00:06:46,660 to add an EventListener, 135 00:06:46,660 --> 00:06:49,000 and that should be a click event 136 00:06:49,000 --> 00:06:51,540 to which we wanna listen, of course. 137 00:06:51,540 --> 00:06:54,020 And we wanna add a function here, 138 00:06:54,020 --> 00:06:57,350 which we execute when that button is clicked. 139 00:06:57,350 --> 00:07:00,597 And that could be the calculateSum function. 140 00:07:03,460 --> 00:07:05,110 That would be one possible name 141 00:07:05,110 --> 00:07:07,500 because that's what this function will do 142 00:07:07,500 --> 00:07:11,880 and then here, we point at this function by its name. 143 00:07:11,880 --> 00:07:13,750 So no parentheses here. 144 00:07:13,750 --> 00:07:16,543 Instead just pointing at the function by name. 145 00:07:18,770 --> 00:07:21,610 So now here we've got this function 146 00:07:21,610 --> 00:07:23,240 and in this function, 147 00:07:23,240 --> 00:07:27,553 we now need to get access to this input value here. 148 00:07:28,640 --> 00:07:30,270 For this, we can get access 149 00:07:30,270 --> 00:07:32,890 to the input element here inside the function code 150 00:07:32,890 --> 00:07:34,543 and store it in a constant. 151 00:07:35,410 --> 00:07:38,080 And that could be the userNumberElement 152 00:07:39,870 --> 00:07:41,210 because this is the element 153 00:07:41,210 --> 00:07:43,540 that holds the user's number 154 00:07:43,540 --> 00:07:48,540 or userNumberInputElement to be even more precise. 155 00:07:49,270 --> 00:07:51,420 The naming, of course, is up to you though. 156 00:07:52,480 --> 00:07:55,300 And we could also create this constant outside 157 00:07:55,300 --> 00:07:56,340 of this function 158 00:07:56,340 --> 00:07:59,150 and that would also be perfectly fine. 159 00:07:59,150 --> 00:08:01,570 I'm just doing it here inside the function 160 00:08:01,570 --> 00:08:05,260 to also show you that this is a valid alternative 161 00:08:05,260 --> 00:08:08,470 because we will only use this constant inside 162 00:08:08,470 --> 00:08:09,800 of this function. 163 00:08:09,800 --> 00:08:13,450 And if we'd never use it anywhere outside of this function, 164 00:08:13,450 --> 00:08:15,570 there really isn't a strong reason 165 00:08:15,570 --> 00:08:19,540 for defining this constant outside of the function, 166 00:08:19,540 --> 00:08:22,790 though we can do it and it also wouldn't be a mistake. 167 00:08:22,790 --> 00:08:26,240 And here we can now select this input element 168 00:08:26,240 --> 00:08:29,808 by the id, which we have here, user-number, 169 00:08:29,808 --> 00:08:31,900 and therefore, we can use 170 00:08:31,900 --> 00:08:36,360 document.getElementById user-number like this. 171 00:08:36,360 --> 00:08:39,880 This allows us to get the enteredNumber 172 00:08:39,880 --> 00:08:42,850 and we can store this in an extra constant 173 00:08:42,850 --> 00:08:46,420 where we reach out to the userNumberInputElement 174 00:08:46,420 --> 00:08:50,210 and we learned that these InputElement objects 175 00:08:50,210 --> 00:08:53,467 in JavaScript have a value property, 176 00:08:53,467 --> 00:08:56,390 even though I'm not getting auto completion for it. 177 00:08:56,390 --> 00:08:59,060 I'm just getting nodeValue, which is the wrong one. 178 00:08:59,060 --> 00:09:00,760 But we will have a value here 179 00:09:00,760 --> 00:09:04,210 because this is an InputElement. 180 00:09:04,210 --> 00:09:06,110 The IDE just doesn't know it 181 00:09:06,110 --> 00:09:08,780 and that's why we don't get the auto completion. 182 00:09:08,780 --> 00:09:10,440 But we will have a value property, 183 00:09:10,440 --> 00:09:14,320 which holds the entered value the user chose. 184 00:09:14,320 --> 00:09:16,970 And that's our enteredNumber then. 185 00:09:16,970 --> 00:09:20,870 Now it's time to sum up all the values leading up 186 00:09:20,870 --> 00:09:22,050 to that number, 187 00:09:22,050 --> 00:09:26,823 and that is a task where we can utilize JavaScript loops. 188 00:09:27,670 --> 00:09:32,627 Here I wanna build my sumUpTo the number chosen 189 00:09:34,410 --> 00:09:36,090 by the user. 190 00:09:36,090 --> 00:09:38,180 And I start at zero here 191 00:09:38,180 --> 00:09:40,100 but then I wanna write a loop 192 00:09:40,100 --> 00:09:42,580 where we continue repeating code 193 00:09:42,580 --> 00:09:45,850 until we reached this entered number. 194 00:09:45,850 --> 00:09:47,360 And that's a place 195 00:09:47,360 --> 00:09:51,180 where we can utilize this regular for loop. 196 00:09:51,180 --> 00:09:53,710 So not for of and not for in 197 00:09:53,710 --> 00:09:55,313 but the regular for loop. 198 00:09:56,150 --> 00:09:57,280 And if you remember, 199 00:09:57,280 --> 00:10:01,230 we wrote such a loop by using the for keyword, 200 00:10:01,230 --> 00:10:05,470 then parentheses, we'll put some code into those soon, 201 00:10:05,470 --> 00:10:08,083 and then curly braces with the loop code. 202 00:10:09,070 --> 00:10:11,330 And here between those parentheses, 203 00:10:11,330 --> 00:10:13,330 I will create a helper variable 204 00:10:13,330 --> 00:10:16,110 to which we have access inside of the loop, 205 00:10:16,110 --> 00:10:19,600 which I will name i because that's kind of the convention, 206 00:10:19,600 --> 00:10:22,580 and here we can start at zero. 207 00:10:22,580 --> 00:10:24,620 Then we add a semicolon. 208 00:10:24,620 --> 00:10:28,670 We wanna keep looping as long as i is smaller 209 00:10:28,670 --> 00:10:33,170 or equal actually than the enteredNumber. 210 00:10:34,060 --> 00:10:36,800 So the number chosen by the user. 211 00:10:36,800 --> 00:10:38,380 And after every iteration, 212 00:10:38,380 --> 00:10:40,420 I wanna add one to i 213 00:10:41,460 --> 00:10:42,960 because if we do it like this, 214 00:10:42,960 --> 00:10:45,870 then i will be every number 215 00:10:45,870 --> 00:10:48,580 from zero up to that enteredNumber 216 00:10:48,580 --> 00:10:51,850 and it will change with every iteration. 217 00:10:51,850 --> 00:10:55,420 And we can then simply use sumUpToNumber, 218 00:10:55,420 --> 00:10:57,940 this variable, which is zero initially, 219 00:10:57,940 --> 00:11:00,950 and assign a new value to it, 220 00:11:00,950 --> 00:11:03,270 which is why this must be a variable 221 00:11:03,270 --> 00:11:05,390 and not a constant, 222 00:11:05,390 --> 00:11:07,290 and the new value, which we assigned 223 00:11:07,290 --> 00:11:09,270 should be the previous number, 224 00:11:09,270 --> 00:11:13,690 the previously stored sum plus i 225 00:11:13,690 --> 00:11:16,730 because i will be a different number in every iteration 226 00:11:16,730 --> 00:11:21,080 and it will be every number up to that enteredNumber. 227 00:11:21,080 --> 00:11:23,880 And because we have smaller or equal here 228 00:11:23,880 --> 00:11:25,300 as a loop condition, 229 00:11:25,300 --> 00:11:29,113 i will also be equal to that enteredNumber eventually. 230 00:11:30,020 --> 00:11:32,340 And therefore, once this loop completed 231 00:11:32,340 --> 00:11:36,350 and once code execution reaches the next line of code 232 00:11:36,350 --> 00:11:37,220 after this loop, 233 00:11:37,220 --> 00:11:40,500 sumUpToNumber will be the sum 234 00:11:40,500 --> 00:11:44,320 of all the numbers up to the enteredNumber, 235 00:11:44,320 --> 00:11:46,100 and now we just need to output it, 236 00:11:46,100 --> 00:11:49,680 and for this, we need to get access to this paragraph, 237 00:11:49,680 --> 00:11:54,000 and we do get access by using this id here, for example, 238 00:11:54,000 --> 00:11:55,940 which we have on this paragraph, 239 00:11:55,940 --> 00:11:59,200 and again, I'll just get access to that element right here 240 00:11:59,200 --> 00:12:02,020 in the function when we need access, 241 00:12:02,020 --> 00:12:06,080 and here I'll then get my outputResultElement. 242 00:12:08,340 --> 00:12:10,180 That could be a name. 243 00:12:10,180 --> 00:12:13,183 And here we can use document.getElementById. 244 00:12:14,520 --> 00:12:17,173 And get access to it like this. 245 00:12:19,017 --> 00:12:21,670 And then once we got access to this element, 246 00:12:21,670 --> 00:12:24,810 we can use this outputResultElement 247 00:12:24,810 --> 00:12:28,137 and set the textContent to sumUpToNumber. 248 00:12:30,740 --> 00:12:32,197 So to that number we derived here. 249 00:12:34,020 --> 00:12:36,570 Now, that will not be all that we have to do 250 00:12:36,570 --> 00:12:39,640 because if we have a look at styles.css, 251 00:12:39,640 --> 00:12:44,640 we can actually see that this calculated-sum element 252 00:12:45,740 --> 00:12:48,198 has display: none initially 253 00:12:48,198 --> 00:12:52,850 so that we don't see the empty result box initially 254 00:12:52,850 --> 00:12:55,530 and therefore, we'll have to change that as well 255 00:12:55,530 --> 00:12:58,180 and I'll quickly do that by just reaching out 256 00:12:58,180 --> 00:13:00,520 to style.display here 257 00:13:00,520 --> 00:13:03,140 and setting this to block, 258 00:13:03,140 --> 00:13:05,330 which ensures that this will be visible 259 00:13:05,330 --> 00:13:07,353 because it's no longer display: none. 260 00:13:09,380 --> 00:13:11,140 And with all of that done, 261 00:13:11,140 --> 00:13:14,760 we should have the finished code for this first example. 262 00:13:14,760 --> 00:13:16,100 If we reload this page 263 00:13:16,100 --> 00:13:18,510 and I enter five and click this button, 264 00:13:18,510 --> 00:13:21,410 then we should see 15 as a result. 265 00:13:21,410 --> 00:13:22,520 And that is correct 266 00:13:22,520 --> 00:13:25,560 because the sum of all the numbers up to five, 267 00:13:25,560 --> 00:13:29,570 including five is five plus four equals nine 268 00:13:29,570 --> 00:13:33,130 plus 3 equals 12 plus 2 equals 14 269 00:13:33,130 --> 00:13:36,120 plus 1 equals 15. 270 00:13:36,120 --> 00:13:37,990 And you can play around with that 271 00:13:37,990 --> 00:13:41,080 and calculate different numbers here 272 00:13:41,080 --> 00:13:44,860 and that is therefore, this task solved. 273 00:13:44,860 --> 00:13:49,100 That's this first task or this first exercise implemented 274 00:13:49,100 --> 00:13:52,613 with help of such a regular for loop.