1 00:00:02,190 --> 00:00:04,480 Let's assume we made it past this if check 2 00:00:04,480 --> 00:00:06,913 so we do have a valid input. 3 00:00:07,790 --> 00:00:11,460 Now, of course, I wanna store that data somewhere, 4 00:00:11,460 --> 00:00:12,570 that entered player name, 5 00:00:12,570 --> 00:00:14,200 and I also wanted to show it here 6 00:00:14,200 --> 00:00:15,900 on the page, on the screen 7 00:00:15,900 --> 00:00:19,040 but, of course, I wanna update the correct player here 8 00:00:19,040 --> 00:00:20,400 because we've got two players, 9 00:00:20,400 --> 00:00:22,300 and, of course, I wanna update the one 10 00:00:22,300 --> 00:00:24,083 for which we clicked on edit. 11 00:00:24,970 --> 00:00:27,830 Now, we're using one and the same overlay 12 00:00:27,830 --> 00:00:30,510 and one and the same form submission function 13 00:00:30,510 --> 00:00:31,410 at the moment. 14 00:00:31,410 --> 00:00:34,360 How can we now differentiate between the two players 15 00:00:34,360 --> 00:00:37,003 and update different parts of the screen? 16 00:00:38,230 --> 00:00:40,760 With help of another new feature, 17 00:00:40,760 --> 00:00:43,300 which I'll show you in this section, 18 00:00:43,300 --> 00:00:46,700 which can be useful in scenarios like this. 19 00:00:46,700 --> 00:00:51,060 You can add extra data to your HTML elements, 20 00:00:51,060 --> 00:00:53,150 which are not visible on the page here 21 00:00:53,150 --> 00:00:55,330 but which you can use and read 22 00:00:55,330 --> 00:00:57,130 in your JavaScript code 23 00:00:57,130 --> 00:01:02,130 to then add extra information to certain elements. 24 00:01:02,350 --> 00:01:03,760 Sounds very abstract? 25 00:01:03,760 --> 00:01:06,180 Well, let me show you what I mean. 26 00:01:06,180 --> 00:01:07,830 In your HTML code, 27 00:01:07,830 --> 00:01:11,520 we've got these two buttons for the different players. 28 00:01:11,520 --> 00:01:14,120 Now, they do already have different IDs 29 00:01:14,120 --> 00:01:18,620 and we could try to parse the ID of the player-1 or 2 30 00:01:18,620 --> 00:01:19,906 from these IDs, 31 00:01:19,906 --> 00:01:22,560 but we can also add a brand new attribute, 32 00:01:22,560 --> 00:01:25,880 which you can add to any HTML element. 33 00:01:25,880 --> 00:01:28,460 And that's the data attribute. 34 00:01:28,460 --> 00:01:31,680 Now, the data attribute is a special attribute. 35 00:01:31,680 --> 00:01:34,040 It's not an attribute which you add just like this. 36 00:01:34,040 --> 00:01:36,560 Instead, it's always data- 37 00:01:36,560 --> 00:01:39,630 and then any identifier of your choice. 38 00:01:39,630 --> 00:01:41,090 And all the other attributes, 39 00:01:41,090 --> 00:01:42,310 which we added thus far, 40 00:01:42,310 --> 00:01:43,390 and all the other attributes, 41 00:01:43,390 --> 00:01:47,360 which we typically use are just one-word attributes. 42 00:01:47,360 --> 00:01:50,963 This consists of multiple words separated by dashes. 43 00:01:51,960 --> 00:01:54,130 Now, the first word is always data 44 00:01:54,130 --> 00:01:55,520 but then thereafter, as mentioned, 45 00:01:55,520 --> 00:01:57,800 you have any identifiers of your choice. 46 00:01:57,800 --> 00:01:59,577 For example, playerid. 47 00:02:02,330 --> 00:02:05,470 Now, then you assign a value, in this case, one 48 00:02:05,470 --> 00:02:06,906 and for the other button, 49 00:02:06,906 --> 00:02:11,906 I'll use two, like this. 50 00:02:12,570 --> 00:02:15,530 And you can read that data here 51 00:02:15,530 --> 00:02:19,560 with help of that key that you added after data- 52 00:02:19,560 --> 00:02:21,163 in your JavaScript code. 53 00:02:22,040 --> 00:02:23,340 Now, I'll reformat this here 54 00:02:23,340 --> 00:02:25,500 to make this a bit more readable 55 00:02:25,500 --> 00:02:29,450 but we still have data-playerid on the two buttons. 56 00:02:29,450 --> 00:02:31,970 Now, we can use this in our JavaScript code. 57 00:02:31,970 --> 00:02:36,404 When the modal is opened with help of openPlayerConfig, 58 00:02:36,404 --> 00:02:39,000 then we know that this button was clicked, 59 00:02:39,000 --> 00:02:41,423 either the first or the second edit button. 60 00:02:42,500 --> 00:02:44,390 Now, we can get access to the click button 61 00:02:44,390 --> 00:02:45,910 with help of that event object, 62 00:02:45,910 --> 00:02:47,900 as we saw before for the form. 63 00:02:47,900 --> 00:02:51,170 And as we learned before in the other course sections. 64 00:02:51,170 --> 00:02:53,180 Event.target gives us access 65 00:02:53,180 --> 00:02:55,530 to the element for which the event occurred, 66 00:02:55,530 --> 00:02:57,670 in this case, it gives us access to the button 67 00:02:57,670 --> 00:02:58,563 that was clicked. 68 00:02:59,660 --> 00:03:01,593 So here we have the clickedButton. 69 00:03:04,360 --> 00:03:06,520 However, I'm not interested in the clickedButton. 70 00:03:06,520 --> 00:03:09,240 Instead, I'm interested in the data which I added 71 00:03:09,240 --> 00:03:10,140 to the button 72 00:03:10,140 --> 00:03:12,190 because that will be different depending 73 00:03:12,190 --> 00:03:14,470 on which button was clicked. 74 00:03:14,470 --> 00:03:17,280 Here in config.js on event.target, 75 00:03:17,280 --> 00:03:19,170 so on the button that was clicked, 76 00:03:19,170 --> 00:03:21,490 we have a dataset property. 77 00:03:21,490 --> 00:03:25,120 And this property exists on every HTML element 78 00:03:25,120 --> 00:03:28,023 with which you interact in your JavaScript code. 79 00:03:29,140 --> 00:03:31,560 This is a object that will be populated 80 00:03:31,560 --> 00:03:35,990 with all the data attributes you added to your elements. 81 00:03:35,990 --> 00:03:39,520 And by the way, you can have multiple data- attributes 82 00:03:39,520 --> 00:03:41,563 on one and the same element. 83 00:03:42,780 --> 00:03:45,240 Now, the data- part will be ignored 84 00:03:45,240 --> 00:03:47,490 but the part thereafter will be added 85 00:03:47,490 --> 00:03:52,223 as a property to this object, to this dataset object. 86 00:03:53,450 --> 00:03:56,720 So here, since I added playerid on both buttons, 87 00:03:56,720 --> 00:04:01,720 we have a playerid property written like this. 88 00:04:03,370 --> 00:04:06,170 And you should use exactly the same notation 89 00:04:06,170 --> 00:04:08,363 as you used in your HTML code. 90 00:04:09,540 --> 00:04:11,210 If you have a dash here, 91 00:04:11,210 --> 00:04:14,690 if it's, for example, player-id for you, 92 00:04:14,690 --> 00:04:16,310 you could make that work 93 00:04:16,310 --> 00:04:20,240 but in that case, you have to access it like this, 94 00:04:20,240 --> 00:04:22,670 which is a different way of accessing properties 95 00:04:22,670 --> 00:04:25,390 on JavaScript objects, totally independent 96 00:04:25,390 --> 00:04:29,180 on whatever it's a dataset object or another object, 97 00:04:29,180 --> 00:04:33,320 which you can use if your property name uses a dash. 98 00:04:33,320 --> 00:04:36,680 Because a dash is not allowed with the dot notation, 99 00:04:36,680 --> 00:04:40,020 that's why you have this alternative square bracket notation 100 00:04:40,020 --> 00:04:41,843 for such property names. 101 00:04:43,190 --> 00:04:46,760 But here, I actually have playerid without a dash 102 00:04:46,760 --> 00:04:50,763 in playerid, and hence, I can just use the dot notation. 103 00:04:51,620 --> 00:04:54,990 And then I have the selectedPlayerId here, 104 00:04:54,990 --> 00:04:57,883 which is now a more fitting name for this constant. 105 00:04:59,250 --> 00:05:01,210 And that will now differ depending 106 00:05:01,210 --> 00:05:04,040 on which edit button was clicked. 107 00:05:04,040 --> 00:05:05,790 Now, why is that useful? 108 00:05:05,790 --> 00:05:07,960 Well, we can now store this information 109 00:05:07,960 --> 00:05:10,543 to know which player we're currently editing. 110 00:05:11,420 --> 00:05:13,120 And for this, in app.js, 111 00:05:13,120 --> 00:05:16,130 which is my main initialization file, 112 00:05:16,130 --> 00:05:19,350 I'll add a brand new variable at the very top, 113 00:05:19,350 --> 00:05:22,140 and now it's a variable created with let, 114 00:05:22,140 --> 00:05:23,390 not a constant 115 00:05:23,390 --> 00:05:26,880 because I plan on changing the value stored in there, 116 00:05:26,880 --> 00:05:28,877 which I'll name editedPlayer. 117 00:05:31,250 --> 00:05:34,230 And this initially let's say is zero 118 00:05:34,230 --> 00:05:38,180 but now I wanna set it to the ID that I set here. 119 00:05:38,180 --> 00:05:40,133 So either one or two. 120 00:05:41,184 --> 00:05:42,560 And therefore in config.js, 121 00:05:42,560 --> 00:05:46,760 now that selectedPlayerId was extracted here, 122 00:05:46,760 --> 00:05:50,760 I can set my editedPlayer, so this variable, 123 00:05:50,760 --> 00:05:52,670 which we just added in app.js 124 00:05:52,670 --> 00:05:54,790 equal to selectedPlayerId. 125 00:05:55,770 --> 00:05:57,650 Alternatively, we skip the step 126 00:05:57,650 --> 00:05:59,820 of creating that extra constant 127 00:05:59,820 --> 00:06:03,423 and we directly set editedPlayer like this. 128 00:06:04,600 --> 00:06:07,360 Here we don't have let or constant in front of this 129 00:06:07,360 --> 00:06:10,390 because I don't wanna create a new variable or constant 130 00:06:10,390 --> 00:06:11,223 of this name. 131 00:06:11,223 --> 00:06:13,230 Instead, I'm just overriding the variable 132 00:06:13,230 --> 00:06:16,053 that was defined here in app.js. 133 00:06:18,010 --> 00:06:20,913 And this will now either hold a value of one or two. 134 00:06:22,040 --> 00:06:23,480 Very important though, 135 00:06:23,480 --> 00:06:25,850 it will actually be a string, 136 00:06:25,850 --> 00:06:27,660 so it will be of type string 137 00:06:27,660 --> 00:06:29,400 even though this is a number 138 00:06:29,400 --> 00:06:32,300 but whatever you store in such a data attribute 139 00:06:32,300 --> 00:06:35,200 will be treated as a string value type, 140 00:06:35,200 --> 00:06:38,320 and I rather would work with a number here, 141 00:06:38,320 --> 00:06:41,100 so I'll add a plus in front of this 142 00:06:41,100 --> 00:06:43,240 so that this is converted to a number 143 00:06:44,120 --> 00:06:47,970 because plus one as a string 144 00:06:47,970 --> 00:06:50,220 will yield one as a number. 145 00:06:50,220 --> 00:06:53,133 So it's simply the value type that will be changed. 146 00:06:54,480 --> 00:06:58,030 And with that, we're storing the ID of the player, 147 00:06:58,030 --> 00:07:02,160 which we are editing in this editedPlayer variable. 148 00:07:02,160 --> 00:07:04,050 And we'll soon use this information 149 00:07:05,120 --> 00:07:07,540 because now in savePlayerConfig, 150 00:07:07,540 --> 00:07:10,730 I wanna update that player with that ID, 151 00:07:10,730 --> 00:07:15,730 both in my code, and also very important, on the screen. 152 00:07:15,870 --> 00:07:18,713 I wanna change this player name here. 153 00:07:19,860 --> 00:07:22,790 Now, how can we update what's shown on the screen here? 154 00:07:22,790 --> 00:07:26,143 How can we update these h3 elements here? 155 00:07:27,300 --> 00:07:30,380 Well, there will be different ways of achieving this 156 00:07:30,380 --> 00:07:34,810 but ultimately, we could get access to this ordered list, 157 00:07:34,810 --> 00:07:39,660 and then just get these list items as array elements. 158 00:07:39,660 --> 00:07:41,710 And then either update the first 159 00:07:41,710 --> 00:07:44,060 or the second array element based 160 00:07:44,060 --> 00:07:46,193 on which player was selected. 161 00:07:47,140 --> 00:07:50,690 Or we assign IDs here to the article 162 00:07:50,690 --> 00:07:54,750 and we use IDs like player-1-data 163 00:07:54,750 --> 00:07:58,710 and player-2-data, and that's what I'll do here. 164 00:07:58,710 --> 00:08:01,740 So I'll add IDs here to these articles 165 00:08:01,740 --> 00:08:04,713 with player-2-data and player-1-data. 166 00:08:05,820 --> 00:08:07,560 And then I can use these IDs 167 00:08:07,560 --> 00:08:09,890 to select the appropriate player 168 00:08:09,890 --> 00:08:12,353 and well, update the data. 169 00:08:14,250 --> 00:08:18,380 So in config.js, after this validation, 170 00:08:18,380 --> 00:08:22,540 so now that we know that we do have a valid player name, 171 00:08:22,540 --> 00:08:26,453 I will actually get my updatedPlayerDataElement 172 00:08:29,770 --> 00:08:33,043 and I get this with help of document.getElementById, 173 00:08:34,130 --> 00:08:36,690 and now I'll do something interesting. 174 00:08:36,690 --> 00:08:39,330 I'll add a string here 175 00:08:39,330 --> 00:08:42,840 and the ID, of course, is either player-1-data 176 00:08:42,840 --> 00:08:44,740 or player-2-data. 177 00:08:44,740 --> 00:08:48,430 And now I'll construct this string dynamically based 178 00:08:48,430 --> 00:08:51,700 on the editedPlayer that's stored in this variable, 179 00:08:51,700 --> 00:08:53,583 which is either one or two. 180 00:08:55,320 --> 00:08:58,403 So here I'll start with player- 181 00:08:59,620 --> 00:09:02,857 because either way, the ID starts with player-. 182 00:09:04,960 --> 00:09:06,950 But then I add one or two, 183 00:09:06,950 --> 00:09:10,260 so I concatenate with the plus symbol. 184 00:09:10,260 --> 00:09:12,210 We can use this on strings as well 185 00:09:12,210 --> 00:09:16,330 to combine multiple values into a longer string, 186 00:09:16,330 --> 00:09:18,340 and I'll add editedPlayer, 187 00:09:18,340 --> 00:09:20,840 which is one or two as a number 188 00:09:20,840 --> 00:09:22,070 but it will be converted 189 00:09:22,070 --> 00:09:25,540 to a string automatically by JavaScript. 190 00:09:25,540 --> 00:09:28,650 And then thereafter, I add -data 191 00:09:29,630 --> 00:09:33,080 because the full ID should be something like player-1-data 192 00:09:34,620 --> 00:09:35,483 or player-2-data. 193 00:09:38,050 --> 00:09:39,750 And now with that code here, 194 00:09:39,750 --> 00:09:42,730 we are constructing this ID dynamically 195 00:09:42,730 --> 00:09:43,990 and hence, we're selecting 196 00:09:43,990 --> 00:09:47,300 the correct player article dynamically based 197 00:09:47,300 --> 00:09:49,450 on the edited player ID 198 00:09:49,450 --> 00:09:52,780 that we set here in openPlayerConfig. 199 00:09:54,610 --> 00:09:58,990 And therefore, now we got hold of the correct player element 200 00:09:58,990 --> 00:10:02,870 and I know that I wanna update the h3 element in there, 201 00:10:02,870 --> 00:10:06,160 which is the second child element, 202 00:10:06,160 --> 00:10:08,950 and hence, to again practice DOM traversal, 203 00:10:08,950 --> 00:10:12,107 we can use the updatedPlayerDataElement 204 00:10:12,107 --> 00:10:14,712 and then the children property, 205 00:10:14,712 --> 00:10:16,810 which gives us an array 206 00:10:16,810 --> 00:10:20,050 of all the child elements we have in there. 207 00:10:20,050 --> 00:10:22,690 And we can get access to the second element with on 208 00:10:23,760 --> 00:10:27,560 since you learned that arrays start at index zero, 209 00:10:27,560 --> 00:10:31,240 hence one is the second element, not the first one. 210 00:10:31,240 --> 00:10:33,980 And the second child element in these articles 211 00:10:33,980 --> 00:10:37,193 is this h3 element, which we wanna update. 212 00:10:38,940 --> 00:10:40,680 So here in config.js, 213 00:10:40,680 --> 00:10:43,260 I'll now set the value of that element, 214 00:10:43,260 --> 00:10:45,890 the textContent equal to, 215 00:10:45,890 --> 00:10:49,490 and then that should be the name that was entered, 216 00:10:49,490 --> 00:10:52,513 so the enteredPlayername, like that. 217 00:10:53,770 --> 00:10:56,610 And with that, we're updating the enteredPlayername 218 00:10:56,610 --> 00:10:57,703 on the screen. 219 00:11:00,040 --> 00:11:02,830 Now, if I reload this and I set Max for player two, 220 00:11:02,830 --> 00:11:05,670 if I click Confirm, and cancel this, 221 00:11:05,670 --> 00:11:07,830 this was set to Max. 222 00:11:07,830 --> 00:11:11,250 And if I set player one to Manu and click Confirm, 223 00:11:11,250 --> 00:11:13,890 and close this, this was set to Manu. 224 00:11:15,490 --> 00:11:17,530 Now, of course, it should close automatically, 225 00:11:17,530 --> 00:11:19,030 and we'll do this in a second, 226 00:11:19,030 --> 00:11:20,550 but before we do that, 227 00:11:20,550 --> 00:11:24,620 I also wanna store the enteredPlayername internally 228 00:11:24,620 --> 00:11:28,940 in my JavaScript code, not just in the h3 element here 229 00:11:29,810 --> 00:11:32,040 because we'll also need the player name later 230 00:11:32,040 --> 00:11:33,930 once we've got a winner. 231 00:11:33,930 --> 00:11:37,940 And I then don't wanna reach out to this h3 element 232 00:11:37,940 --> 00:11:39,850 and get my value from there, 233 00:11:39,850 --> 00:11:42,230 even though we could do that as well. 234 00:11:42,230 --> 00:11:45,240 But it's cleaner and better if we store the player names 235 00:11:45,240 --> 00:11:47,270 in our JavaScript code as well 236 00:11:47,270 --> 00:11:50,700 so that we have essential data like that right in our code, 237 00:11:50,700 --> 00:11:54,173 and we don't need to get it from the HTML page later. 238 00:11:55,890 --> 00:11:57,280 Therefore, in app.js, 239 00:11:57,280 --> 00:12:02,190 I'll add more helper variables or constants. 240 00:12:02,190 --> 00:12:06,270 And here, I'll add a constant called players, 241 00:12:06,270 --> 00:12:08,190 which actually should be an array 242 00:12:08,190 --> 00:12:09,893 because we'll have two players. 243 00:12:10,810 --> 00:12:14,030 We could also create two separate variables or constants 244 00:12:14,030 --> 00:12:15,560 but grouping the data together 245 00:12:15,560 --> 00:12:17,600 into an array makes sense here. 246 00:12:17,600 --> 00:12:20,220 And I use an array instead of a standard object 247 00:12:20,220 --> 00:12:22,970 because I have multiple items of the same type 248 00:12:22,970 --> 00:12:24,973 with different detail data. 249 00:12:26,140 --> 00:12:29,400 To be precise, I wanna have two objects here in this array 250 00:12:29,400 --> 00:12:30,770 and we can write it like this 251 00:12:30,770 --> 00:12:34,290 across multiple lines to improve readability, 252 00:12:34,290 --> 00:12:36,850 separating the items with commas. 253 00:12:36,850 --> 00:12:40,950 And each object will have a name property, 254 00:12:40,950 --> 00:12:43,250 which is the player name, 255 00:12:43,250 --> 00:12:45,270 and a symbol property, 256 00:12:45,270 --> 00:12:48,133 which is the symbol associated with that player. 257 00:12:49,080 --> 00:12:51,770 Now, the symbol will be unchangeable. 258 00:12:51,770 --> 00:12:53,600 It's X for player one 259 00:12:54,450 --> 00:12:58,940 and for player two, it's this O. 260 00:12:58,940 --> 00:13:01,210 But, of course, the name has to be set. 261 00:13:01,210 --> 00:13:03,610 Initially it's empty and we have to ensure 262 00:13:03,610 --> 00:13:06,363 that it is set before the game starts. 263 00:13:07,650 --> 00:13:10,010 Now we have this players array 264 00:13:10,010 --> 00:13:12,110 and now I wanna update the players 265 00:13:12,110 --> 00:13:15,470 whenever a name was entered for them. 266 00:13:15,470 --> 00:13:17,840 We can update the data in this constant, 267 00:13:17,840 --> 00:13:19,450 even though it is a constant 268 00:13:19,450 --> 00:13:23,050 because I'll not assign a brand new overall array 269 00:13:23,050 --> 00:13:26,220 to players, instead I'll just edit existing elements 270 00:13:26,220 --> 00:13:27,860 inside of that array. 271 00:13:27,860 --> 00:13:29,380 And that is possible, 272 00:13:29,380 --> 00:13:32,900 though I'll take a closer look at why that is possible 273 00:13:32,900 --> 00:13:34,400 a little bit later in the course 274 00:13:34,400 --> 00:13:37,223 once we learned even more about JavaScript. 275 00:13:38,340 --> 00:13:41,180 So now here back in config.js, 276 00:13:41,180 --> 00:13:43,486 besides updating what we see on the screen, 277 00:13:43,486 --> 00:13:46,720 I'll reach out to this players constant, 278 00:13:46,720 --> 00:13:50,090 and now I wanna access one of the two elements. 279 00:13:50,090 --> 00:13:52,860 Since it's an array, we use the square bracket notation 280 00:13:52,860 --> 00:13:55,870 for that, and we can get hold of the first element 281 00:13:55,870 --> 00:13:58,973 by using zero, and the second element by using one. 282 00:14:00,310 --> 00:14:02,430 Now, to get access here, 283 00:14:02,430 --> 00:14:06,900 we could check if the editedPlayer, which is one or two, 284 00:14:06,900 --> 00:14:10,490 is equal to one, and if that's the case, 285 00:14:10,490 --> 00:14:14,610 we access players zero, so the first element, 286 00:14:14,610 --> 00:14:16,480 which is our first player, 287 00:14:16,480 --> 00:14:20,630 and else we access players one, 288 00:14:20,630 --> 00:14:25,180 and we then set different values for the names in there. 289 00:14:25,180 --> 00:14:29,540 So then we set name equal to enteredPlayername 290 00:14:29,540 --> 00:14:31,784 for the second element here. 291 00:14:31,784 --> 00:14:36,784 Otherwise, we do that for the first element, like this. 292 00:14:36,870 --> 00:14:38,190 This is how we could write this 293 00:14:38,190 --> 00:14:40,823 and check which player we are currently editing. 294 00:14:41,750 --> 00:14:45,030 This would work but if we think about this code, 295 00:14:45,030 --> 00:14:47,090 we can actually come up with a shorter, 296 00:14:47,090 --> 00:14:49,970 more concise solution. 297 00:14:49,970 --> 00:14:52,020 Instead of writing this if-else check, 298 00:14:52,020 --> 00:14:54,250 which might be a nice practice, 299 00:14:54,250 --> 00:14:56,230 we can also reach out to players 300 00:14:56,230 --> 00:15:00,650 and just calculate this index dynamically. 301 00:15:00,650 --> 00:15:05,030 Keep in mind that editedPlayer stores one or two as a number 302 00:15:05,030 --> 00:15:07,023 because I change it to a number here. 303 00:15:08,040 --> 00:15:10,670 The index which we need also is a number. 304 00:15:10,670 --> 00:15:13,810 The only difference is that this number for the index 305 00:15:13,810 --> 00:15:18,303 should start at zero whereas editedPlayer is one or two. 306 00:15:19,710 --> 00:15:24,320 But since the player with ID one has index zero, 307 00:15:24,320 --> 00:15:27,320 and the player with ID two has index one, 308 00:15:27,320 --> 00:15:31,830 we can just deduct one from the editedPlayer value 309 00:15:31,830 --> 00:15:34,370 and then access the correct index 310 00:15:34,370 --> 00:15:37,570 because for player one, this yields zero, 311 00:15:37,570 --> 00:15:40,490 and therefore, we access the first player in there. 312 00:15:40,490 --> 00:15:43,850 For player two, this yields one, 313 00:15:43,850 --> 00:15:47,023 and hence, we access the second player here in this array. 314 00:15:48,020 --> 00:15:50,140 And therefore, we can then just set the name 315 00:15:50,140 --> 00:15:52,850 of that player that we accessed here equal 316 00:15:52,850 --> 00:15:55,930 to enteredPlayername and that's a more concise way 317 00:15:55,930 --> 00:15:58,260 than writing this if-else statement, 318 00:15:58,260 --> 00:16:00,560 which you, of course, could do as well though. 319 00:16:02,460 --> 00:16:05,130 Okay, so now we got that 320 00:16:05,130 --> 00:16:08,600 and now we're also storing that player data internally. 321 00:16:08,600 --> 00:16:11,297 We won't see that if I try that here 322 00:16:11,297 --> 00:16:13,980 but we also don't get any error here. 323 00:16:13,980 --> 00:16:16,130 So it probably works. 324 00:16:16,130 --> 00:16:17,930 We'll see whether it works later 325 00:16:17,930 --> 00:16:19,773 once we need the player name. 326 00:16:21,260 --> 00:16:23,540 Now, before we work on the actual game logic 327 00:16:23,540 --> 00:16:25,330 and on starting that new game, 328 00:16:25,330 --> 00:16:28,370 let's make sure we close that modal automatically though 329 00:16:28,370 --> 00:16:30,470 when we click confirm. 330 00:16:30,470 --> 00:16:32,370 And that's fairly easy to achieve. 331 00:16:32,370 --> 00:16:33,970 All we've gotta do for that 332 00:16:33,970 --> 00:16:38,000 is at the end here of savePlayerConfig, 333 00:16:38,000 --> 00:16:40,360 if we did update our player data, 334 00:16:40,360 --> 00:16:44,200 we just have to call closePlayerConfig manually. 335 00:16:44,200 --> 00:16:46,263 So here we do add parentheses. 336 00:16:47,470 --> 00:16:51,620 We are executing this function here manually now. 337 00:16:51,620 --> 00:16:55,060 Before we just pointed at it here in app.js 338 00:16:55,060 --> 00:16:57,810 for our listeners, for our click listeners 339 00:16:57,810 --> 00:17:00,300 on the cancel button or the backdrop, 340 00:17:00,300 --> 00:17:04,020 now I wanna explicitly execute this function myself 341 00:17:04,020 --> 00:17:06,272 if we are done submitting that form. 342 00:17:07,170 --> 00:17:08,470 And that's a great example 343 00:17:08,470 --> 00:17:11,079 of when to call a function yourself 344 00:17:11,079 --> 00:17:14,270 versus when to hand it off to the browser. 345 00:17:14,270 --> 00:17:15,640 If you wanna listen to events, 346 00:17:15,640 --> 00:17:18,055 you wanna let the browser execute a function. 347 00:17:18,055 --> 00:17:20,660 Here we wanna do it ourselves though 348 00:17:20,660 --> 00:17:23,770 because we are done with some other operation, 349 00:17:23,770 --> 00:17:26,829 which itself was triggered upon an event though, 350 00:17:26,829 --> 00:17:28,010 the form submission, 351 00:17:28,010 --> 00:17:32,053 and therefore, this is how the circle closes so to say. 352 00:17:33,000 --> 00:17:35,590 And therefore, now we close the modal ourselves 353 00:17:35,590 --> 00:17:38,230 once we're done with validating and storing 354 00:17:38,230 --> 00:17:39,360 that entered data. 355 00:17:39,360 --> 00:17:43,110 And hence now if I enter Max here and click Confirm, 356 00:17:43,110 --> 00:17:45,880 this closes, we see the value here. 357 00:17:45,880 --> 00:17:49,190 And I can enter Manu here, 358 00:17:49,190 --> 00:17:50,543 and see this here. 359 00:17:51,870 --> 00:17:54,300 The last tweak I wanna perform 360 00:17:54,300 --> 00:17:57,100 is now that if I did enter Manu here, 361 00:17:57,100 --> 00:18:01,460 and I confirmed, that value stayed in there. 362 00:18:01,460 --> 00:18:03,870 If I enter Max here now for player one, 363 00:18:03,870 --> 00:18:05,610 and I then start editing player one, 364 00:18:05,610 --> 00:18:07,760 this starts with Max. 365 00:18:07,760 --> 00:18:10,690 The reason for that is we only reset that form 366 00:18:10,690 --> 00:18:12,720 if we click Cancel. 367 00:18:12,720 --> 00:18:14,423 Not if we click Confirm. 368 00:18:15,310 --> 00:18:18,070 By the way, also not if you click the backdrop. 369 00:18:18,070 --> 00:18:21,023 There we would also persist what was entered here. 370 00:18:21,920 --> 00:18:23,710 And therefore, as a last step, 371 00:18:23,710 --> 00:18:28,010 I will indeed also clear the entered value manually 372 00:18:28,010 --> 00:18:33,010 when we close that modal with closePlayerConfig 373 00:18:33,330 --> 00:18:35,830 by getting access to that input element 374 00:18:35,830 --> 00:18:38,460 and manually setting what's entered in there 375 00:18:38,460 --> 00:18:39,583 to an empty string. 376 00:18:41,420 --> 00:18:43,720 For this in closePlayerConfig, 377 00:18:43,720 --> 00:18:45,520 I wanna reach out to my formElement, 378 00:18:46,460 --> 00:18:48,950 so to the overall form, 379 00:18:48,950 --> 00:18:50,430 which we have in there, 380 00:18:50,430 --> 00:18:52,830 and there I wanna get access to that first input, 381 00:18:52,830 --> 00:18:54,133 which we find in there. 382 00:18:55,070 --> 00:18:57,800 Now, there are different ways of getting hold of that. 383 00:18:57,800 --> 00:19:00,123 And actually, using the ID might be best 384 00:19:00,123 --> 00:19:02,970 with document.getElementById 385 00:19:02,970 --> 00:19:05,780 but I wanna practice more DOM traversal, 386 00:19:05,780 --> 00:19:08,820 so I will use the formElement as a starting point, 387 00:19:08,820 --> 00:19:11,160 then dive into the firstElementChild 388 00:19:11,160 --> 00:19:13,270 and then into the lastElementChild, 389 00:19:13,270 --> 00:19:15,503 which will also yield me that input. 390 00:19:17,400 --> 00:19:18,390 So therefore here, I use 391 00:19:18,390 --> 00:19:21,860 formElement.firstElementChild.lastElementChild 392 00:19:22,781 --> 00:19:24,479 and that is then that input element 393 00:19:24,479 --> 00:19:27,620 where I will set the value property, 394 00:19:27,620 --> 00:19:31,540 not nodeValue but value, 395 00:19:31,540 --> 00:19:33,500 which exists on input elements 396 00:19:33,500 --> 00:19:35,710 when you use them in JavaScript 397 00:19:35,710 --> 00:19:37,340 and set this to an empty string 398 00:19:37,340 --> 00:19:39,343 to reset what's entered in there. 399 00:19:40,280 --> 00:19:43,360 Again, this is not necessarily the best way of doing it 400 00:19:43,360 --> 00:19:47,100 because if I start adding more elements, 401 00:19:47,100 --> 00:19:48,670 for example, after this input, 402 00:19:48,670 --> 00:19:50,220 if I have a paragraph there, 403 00:19:50,220 --> 00:19:52,720 then this way of selecting the input 404 00:19:52,720 --> 00:19:54,450 wouldn't be correct anymore 405 00:19:54,450 --> 00:19:58,070 because lastElementChild now would be the paragraph. 406 00:19:58,070 --> 00:20:00,410 But I'm not adding a paragraph here, 407 00:20:00,410 --> 00:20:02,089 and therefore, this is now simply again 408 00:20:02,089 --> 00:20:03,770 another nice practice 409 00:20:03,770 --> 00:20:07,743 of how you can dig into a DOM structure in JavaScript. 410 00:20:09,010 --> 00:20:10,090 You might, of course, 411 00:20:10,090 --> 00:20:12,750 use the playername for directly selecting the input 412 00:20:12,750 --> 00:20:15,030 in a more secure and shorter way. 413 00:20:15,030 --> 00:20:17,170 That would probably be the better way 414 00:20:17,170 --> 00:20:19,840 but again, I wanted to practice this here again, 415 00:20:19,840 --> 00:20:22,130 so that's how we'll do it here. 416 00:20:22,130 --> 00:20:24,400 And with that, we're manually setting the value 417 00:20:24,400 --> 00:20:27,470 that's entered in this input field to an empty string 418 00:20:27,470 --> 00:20:28,890 so that with that, 419 00:20:28,890 --> 00:20:31,470 if I set this to Max and confirm, 420 00:20:31,470 --> 00:20:34,900 this is still reset if I then open the other field, 421 00:20:34,900 --> 00:20:38,100 and if I, for example, enter something 422 00:20:38,100 --> 00:20:41,210 and click on the backdrop, we also clear this. 423 00:20:41,210 --> 00:20:43,153 So that's now better than before. 424 00:20:44,750 --> 00:20:48,280 And with that, we spent a lot of time on the configuration 425 00:20:48,280 --> 00:20:50,250 but we had a lot of key concepts here, 426 00:20:50,250 --> 00:20:52,870 a couple of new concepts as well. 427 00:20:52,870 --> 00:20:55,660 Now it is time to move on to the game though 428 00:20:55,660 --> 00:20:58,230 to make this Start New Game button work, 429 00:20:58,230 --> 00:20:59,970 and only show that game field 430 00:20:59,970 --> 00:21:02,090 if we did start a new game, 431 00:21:02,090 --> 00:21:03,370 and then it's, of course, 432 00:21:03,370 --> 00:21:05,710 time to register these clicks here, 433 00:21:05,710 --> 00:21:09,053 update the game board and check for a winner.