1 00:00:01,590 --> 00:00:07,770 OK, ladies and gentlemen, now the interesting part is we need to find a solution when we click this 2 00:00:07,770 --> 00:00:08,360 button. 3 00:00:08,370 --> 00:00:15,910 Actually, this is a button, by the way, and when we click this button, I want to target. 4 00:00:15,910 --> 00:00:23,850 So I want to create add even Lisson or there and something to happen right now. 5 00:00:24,510 --> 00:00:34,710 And when it's clicked, I want this here to display some sort of our six images. 6 00:00:34,710 --> 00:00:34,940 Right. 7 00:00:34,950 --> 00:00:37,860 We have six dice images. 8 00:00:37,860 --> 00:00:45,000 One of the six images should be there in there like this dice one dice to those three until day six. 9 00:00:45,700 --> 00:00:50,010 Now, how we can do this, we can use for this purpose. 10 00:00:50,010 --> 00:00:52,590 We will use math random. 11 00:00:52,590 --> 00:00:54,960 We already have used math random before. 12 00:00:54,960 --> 00:00:58,940 Probably we're not going to use it in the future. 13 00:00:59,850 --> 00:01:09,690 So what I'm going to create here is that I'm going to attach event listner of the button when the button 14 00:01:09,690 --> 00:01:10,140 is click. 15 00:01:10,150 --> 00:01:14,040 So the name of the button is actually button and roll dice. 16 00:01:14,290 --> 00:01:16,380 Just going to copy this one in here. 17 00:01:16,380 --> 00:01:20,370 I'm going to say document dot, query selector. 18 00:01:22,110 --> 00:01:28,700 Am we going to select that one with dot button roll dice. 19 00:01:28,710 --> 00:01:37,380 And after that I just want to add event listener and I'm just going to say click here so I'll, I want 20 00:01:37,380 --> 00:01:40,860 some functionality here right now. 21 00:01:40,860 --> 00:01:42,630 Close this one in here. 22 00:01:44,670 --> 00:01:52,140 What I want first to happen, OK, I'm just going to create a variable called dice and this variable, 23 00:01:52,140 --> 00:01:54,990 as I told you, it will be math dot random. 24 00:01:54,990 --> 00:02:03,910 I hope you understand that with the random we can get a random number and I'm going to multiply by six. 25 00:02:03,960 --> 00:02:06,450 OK, now first things first. 26 00:02:06,450 --> 00:02:07,150 Let's check. 27 00:02:07,260 --> 00:02:08,890 This is going to work lot. 28 00:02:10,380 --> 00:02:11,070 It's working. 29 00:02:13,920 --> 00:02:15,630 Let's let's save it. 30 00:02:16,710 --> 00:02:25,080 So open the specked Elliman console and when you click here is it's working. 31 00:02:25,080 --> 00:02:26,660 So that is what we need to do. 32 00:02:27,240 --> 00:02:27,600 Right. 33 00:02:27,750 --> 00:02:29,550 So when we should go there. 34 00:02:29,670 --> 00:02:36,030 OK, now we know that at event listener click it's working. 35 00:02:36,840 --> 00:02:47,850 So one thing that I want to show you here is that this dice console like these dice, by the way, now 36 00:02:48,240 --> 00:02:52,530 these will produce a result, but not the result that we want. 37 00:02:52,980 --> 00:02:59,850 So five point five is going to give us two point three, one and zero. 38 00:02:59,850 --> 00:03:02,400 So two things I don't like here. 39 00:03:02,430 --> 00:03:08,850 The first is the first thing that it will never reach six. 40 00:03:08,850 --> 00:03:14,940 The second thing that I don't like is the second thing is I don't like is this is decimal number. 41 00:03:14,940 --> 00:03:22,040 And the third thing that I don't like is that it also includes zero and we don't have a dice zero. 42 00:03:22,050 --> 00:03:24,030 It starts from one, it goes to six. 43 00:03:24,420 --> 00:03:26,490 So we can escape this one. 44 00:03:27,540 --> 00:03:38,760 We can fix one of the problem, actually, two of the problems never to be zero and also never to always 45 00:03:38,760 --> 00:03:40,730 to get maximum one, two, six. 46 00:03:41,160 --> 00:03:42,780 This is very easily achievable. 47 00:03:42,780 --> 00:03:46,230 So I'm going to cut this one and I'm going to put it in brackets like this. 48 00:03:46,230 --> 00:03:48,420 I'm going to put it one only. 49 00:03:48,660 --> 00:03:49,080 Right. 50 00:03:49,710 --> 00:03:58,770 And now if I click here, still going to have decimal number, but I will never get zero and I should 51 00:03:58,770 --> 00:04:01,890 get number six as well. 52 00:04:01,890 --> 00:04:05,160 Right here it is six point eighty six point something. 53 00:04:05,190 --> 00:04:11,100 No, the other thing that we need to take here is to round this number. 54 00:04:11,100 --> 00:04:17,490 So for that reason, we're going to use, again, math that floor and we're going to round this buddy 55 00:04:17,490 --> 00:04:17,880 here. 56 00:04:18,960 --> 00:04:28,050 OK, so I expect here all of the numbers here it is to be here is six. 57 00:04:29,220 --> 00:04:32,850 So maybe I'm clicking too fast, but they're never going to be zero. 58 00:04:33,030 --> 00:04:36,120 They're never going to be decimal in the maximum. 59 00:04:36,120 --> 00:04:37,470 They will be six. 60 00:04:38,490 --> 00:04:40,530 That is pretty much what we need. 61 00:04:40,930 --> 00:04:50,400 OK, so we have these six so it can go from one to six in our images are going from one to six. 62 00:04:50,820 --> 00:04:53,790 So this should tell you something that we can use. 63 00:04:53,790 --> 00:04:57,150 This one we can concatenated. 64 00:04:57,150 --> 00:04:59,600 We know we. 65 00:05:00,320 --> 00:05:09,710 JavaScript, we can add sauce, we can add images in our HTML, so the first thing I'm going to say, 66 00:05:09,860 --> 00:05:19,910 OK, I'm going to create a variable called the dice and I want to be document that get the query selector. 67 00:05:19,910 --> 00:05:23,500 Sorry, and I want to select the dice. 68 00:05:24,290 --> 00:05:24,630 Right. 69 00:05:25,040 --> 00:05:27,260 Let me show you what I'm trying to select here. 70 00:05:28,430 --> 00:05:30,710 I'm trying to select target this class. 71 00:05:30,710 --> 00:05:31,010 Right. 72 00:05:31,310 --> 00:05:33,890 Because this class initially. 73 00:05:33,890 --> 00:05:34,430 Where was it? 74 00:05:34,690 --> 00:05:36,530 It is we set to display none. 75 00:05:36,980 --> 00:05:51,860 Now we can fix that one very simple dice going to set two style display to what we can set display to 76 00:05:51,860 --> 00:05:52,180 plot. 77 00:05:52,400 --> 00:05:54,460 We can even put it here in this line. 78 00:05:55,100 --> 00:05:55,450 Right. 79 00:05:55,820 --> 00:05:57,670 But I just wanted to put it like this. 80 00:05:57,680 --> 00:06:08,980 Now I'm just going to say set back the dice to be visible or to display block. 81 00:06:09,740 --> 00:06:12,230 So that will give you that optionality here. 82 00:06:12,770 --> 00:06:18,770 Just going to create like this, I'm going to say, OK, creating round no 83 00:06:21,500 --> 00:06:27,620 random number from one until six. 84 00:06:28,670 --> 00:06:31,390 That is what we need to do right here. 85 00:06:31,430 --> 00:06:38,450 You're getting the dice glass with the query we select. 86 00:06:38,490 --> 00:06:41,480 OK, now we have this one. 87 00:06:41,840 --> 00:06:47,840 And if I refresh it, it is the when I click on here, nothing will happen. 88 00:06:48,170 --> 00:06:58,910 But look what's happening because Display Block is going to show you here we did have these dice six. 89 00:06:58,910 --> 00:06:59,270 Right. 90 00:06:59,630 --> 00:07:03,350 And before we set the visible invisible sorry. 91 00:07:03,350 --> 00:07:05,910 Here, what was it. 92 00:07:06,500 --> 00:07:07,000 Right. 93 00:07:07,340 --> 00:07:10,430 And now when I click I said that to display block. 94 00:07:10,880 --> 00:07:17,660 But the second thing that I want to achieve is I don't want every time I click these dice six to appear. 95 00:07:17,690 --> 00:07:22,310 So what I can do, I'm just going to copy this one and I'm going to put it here and we're going to delete 96 00:07:22,310 --> 00:07:22,610 this one. 97 00:07:22,610 --> 00:07:31,850 But this is just to show you what we need to do now with the help of these days, I'm going to get SIRC 98 00:07:32,570 --> 00:07:36,310 source and I know it's like this. 99 00:07:36,320 --> 00:07:39,220 So what I'm what I can do, I'm just going to copy it until here. 100 00:07:39,470 --> 00:07:41,600 So in single quotes, right? 101 00:07:41,810 --> 00:07:48,620 We don't we just slash don't forget about the slash and I'm going to set Dash and I'm going to leave 102 00:07:48,620 --> 00:07:49,210 it like that. 103 00:07:49,460 --> 00:07:49,870 Why? 104 00:07:50,210 --> 00:07:54,890 Because we already checked that the dice comes along the dice. 105 00:07:54,890 --> 00:07:55,460 We already check. 106 00:07:55,470 --> 00:07:58,000 It's changing all the time when we click. 107 00:07:58,160 --> 00:08:11,960 So I just going to plus so I'm going to pen the dice plus and I need to pmg all of my images are have 108 00:08:11,990 --> 00:08:13,640 the extension that point. 109 00:08:13,850 --> 00:08:14,150 Right. 110 00:08:14,360 --> 00:08:19,850 So I, I know that never going to have something else and I'm trying to achieve this. 111 00:08:20,060 --> 00:08:25,730 I'm G dies so I'm through here so I only play around with the dice. 112 00:08:25,730 --> 00:08:26,210 No. 113 00:08:26,690 --> 00:08:27,050 Right. 114 00:08:27,140 --> 00:08:28,710 And everything else is the same. 115 00:08:29,190 --> 00:08:33,230 OK, before we do that I'm just going to Khandala. 116 00:08:35,060 --> 00:08:35,540 What. 117 00:08:35,540 --> 00:08:46,280 The dice just got control of this entire thing or I'm just going to put it here console like I'm going 118 00:08:46,280 --> 00:08:50,870 to put the entire thing in that should give me the entire, the entire path. 119 00:08:51,500 --> 00:08:52,750 So I'm going to refresh it. 120 00:08:53,240 --> 00:08:54,800 I didn't have to so here it is. 121 00:08:55,220 --> 00:08:59,960 I'm G Dice four because I'm coming this one. 122 00:09:02,060 --> 00:09:05,600 So I'm Jidi six because this was six. 123 00:09:05,990 --> 00:09:07,310 I'm Judaize three. 124 00:09:07,310 --> 00:09:08,750 And a look at what's happening here. 125 00:09:11,030 --> 00:09:18,290 Right, because three and this is three now how cool is this. 126 00:09:18,320 --> 00:09:26,120 So we don't need to love this one anymore because it's working and it's working because we said that 127 00:09:26,120 --> 00:09:28,310 this play back to block. 128 00:09:28,310 --> 00:09:28,670 Right. 129 00:09:29,160 --> 00:09:31,100 So that is what we today. 130 00:09:31,100 --> 00:09:32,000 What we did achieve. 131 00:09:32,000 --> 00:09:34,310 First we had that dice. 132 00:09:34,430 --> 00:09:41,000 So when we rolled it, the numbers generated at this at this instance is six. 133 00:09:41,840 --> 00:09:43,430 Just going to leave this one for now. 134 00:09:44,900 --> 00:09:46,370 So I'm just going to roll it. 135 00:09:46,520 --> 00:09:49,100 It's one it's going to roll it again. 136 00:09:49,100 --> 00:09:49,640 It's two. 137 00:09:49,670 --> 00:09:50,900 That's why it's happening here. 138 00:09:50,900 --> 00:09:55,310 Three, three, four, three. 139 00:09:56,150 --> 00:09:59,640 And it will give me a random number every time a. 140 00:09:59,780 --> 00:10:02,370 Do this dive, right? 141 00:10:02,380 --> 00:10:05,020 I do this rolling of the dice, so that is pretty much it. 142 00:10:05,330 --> 00:10:11,330 I hope you enjoyed so far because what we achieved now we just get the query selector and the event 143 00:10:11,330 --> 00:10:11,870 listener. 144 00:10:12,080 --> 00:10:21,020 When we click with a mouse, we just create a random number called dice, and that will go from zero 145 00:10:21,020 --> 00:10:22,790 to six initially to four. 146 00:10:23,240 --> 00:10:24,710 Yeah, to five initially. 147 00:10:25,010 --> 00:10:26,840 That's why we put extra one. 148 00:10:27,450 --> 00:10:34,460 I don't want zero to have it and that's why it's going to have from one to six, but it's going to be 149 00:10:34,460 --> 00:10:41,090 still decimal and we're going to use math, the floor function just to get rid of that decimal. 150 00:10:41,100 --> 00:10:43,280 It will make a good round number. 151 00:10:43,910 --> 00:10:44,930 That is pretty much it. 152 00:10:44,930 --> 00:10:45,680 With this. 153 00:10:45,680 --> 00:10:51,800 I'm selecting the dice, setting back to block and we don't need this anymore. 154 00:10:53,090 --> 00:10:58,070 And here we are sitting the source and we are loading that image right. 155 00:10:58,070 --> 00:11:07,490 Because we do have the images from one till six and they all start with dice, dash, dice, dash six 156 00:11:07,490 --> 00:11:09,390 days, dash three, dice, dash one. 157 00:11:09,710 --> 00:11:10,870 So how cool is this? 158 00:11:11,090 --> 00:11:14,690 Now our application is getting more powerful, more elegant. 159 00:11:14,990 --> 00:11:16,250 We can roll the dice. 160 00:11:16,250 --> 00:11:17,480 We can see this here. 161 00:11:18,260 --> 00:11:18,740 Right. 162 00:11:19,850 --> 00:11:21,170 And it's working. 163 00:11:21,410 --> 00:11:30,800 Next time we will probably play around with the players who who is the players and what we need to sit. 164 00:11:30,800 --> 00:11:34,750 Right, because we need to start calculating the result. 165 00:11:35,270 --> 00:11:42,170 This one, we need to start calculating how much this player have role and how much this player. 166 00:11:42,180 --> 00:11:43,550 So we have a lot of things to do. 167 00:11:43,880 --> 00:11:49,160 But this was the most important and we managed to roll the dice at this one. 168 00:11:49,160 --> 00:11:51,050 So the other button is not working. 169 00:11:51,050 --> 00:11:51,740 Don't worry about it. 170 00:11:52,190 --> 00:11:53,120 So thank you very much. 171 00:11:53,120 --> 00:11:55,310 I hope you enjoyed this one and I'll see you in the next one.