1 00:00:00,180 --> 00:00:04,320 In this lesson, we're going to move a little bit away from the JavaScript, and I know the core focus 2 00:00:04,320 --> 00:00:09,210 of this course, of course, is JavaScript, but we do need to make some styling. 3 00:00:09,210 --> 00:00:13,590 And I am going to go through this rather quickly because I find that students, oftentimes, they want 4 00:00:13,590 --> 00:00:17,280 to apply their own styling to the various elements on the page. 5 00:00:17,580 --> 00:00:23,310 So we've got our start button and we've created a button class for that. 6 00:00:23,320 --> 00:00:24,510 So BTM class. 7 00:00:24,780 --> 00:00:27,520 So let's apply some styling and make this look like a button. 8 00:00:28,110 --> 00:00:31,590 So first, adding in a border and give it a grayish color. 9 00:00:31,590 --> 00:00:34,290 Also, the text align center padding. 10 00:00:34,290 --> 00:00:39,120 So most buttons, it's nice to have some padding on the buttons, make the font size a little bit bigger 11 00:00:39,360 --> 00:00:40,760 and update the cursor. 12 00:00:41,010 --> 00:00:46,350 I usually like to use the pointer for buttons so that the user, when they are coming over the button, 13 00:00:46,350 --> 00:00:50,500 that they do see that this is something that is clickable and they can interact with it. 14 00:00:51,000 --> 00:00:52,700 Also the background color. 15 00:00:53,010 --> 00:00:54,840 So let's make it a red background. 16 00:00:54,840 --> 00:00:58,760 So it really pops and stands out and updating the color to be white. 17 00:00:58,770 --> 00:01:03,540 So the text color is going to be white and you can see as you're designing and this is a feature within 18 00:01:03,540 --> 00:01:06,690 brackets that we can see the success is being applied. 19 00:01:07,080 --> 00:01:11,160 Also want to add in some interaction whenever they're hovering over the button. 20 00:01:11,490 --> 00:01:15,260 Let's add border shadow or box shadow effect. 21 00:01:15,600 --> 00:01:21,660 So this would give this box shadow effect whenever we're hovering over it and we can turn it red. 22 00:01:22,030 --> 00:01:24,510 So you can see just save that. 23 00:01:24,810 --> 00:01:28,410 And when we're hovering over it, it's got a little bit of an effect to it. 24 00:01:28,920 --> 00:01:30,530 Maybe we need to do a little bit more. 25 00:01:30,660 --> 00:01:36,810 So update these two three so you can see that it's it's looking like it's more interactive when we're 26 00:01:36,810 --> 00:01:40,830 hovering over it so you can change the size, whatever your personal preference is. 27 00:01:41,130 --> 00:01:43,710 Now let's position the button, the start button. 28 00:01:43,950 --> 00:01:46,170 So we did also give it a class of start. 29 00:01:46,530 --> 00:01:52,020 So adding in some styling to that start where we can position it on the page. 30 00:01:52,350 --> 00:01:58,890 So setting the position and I'm going to set the position to be absolute so that we can position exactly 31 00:01:58,890 --> 00:02:04,590 where we want to locate it and a width of the button get to use percentages because I can use percentages 32 00:02:04,590 --> 00:02:08,820 for the rest of the structure and margin because it's absolute. 33 00:02:08,820 --> 00:02:13,690 I'm got a position at twenty picks off the top and left using percentage. 34 00:02:14,070 --> 00:02:15,300 So 35 percent. 35 00:02:15,420 --> 00:02:22,020 So that will position it in the center because the width of it is 30 and left is 35. 36 00:02:22,020 --> 00:02:26,580 Right is also by default 35 and updating the Z index. 37 00:02:27,150 --> 00:02:30,190 So it stands out over the other elements on the page. 38 00:02:30,210 --> 00:02:34,980 So in case we have anything else, so the button is always going to be floating full center there and 39 00:02:34,980 --> 00:02:35,910 that's the start button. 40 00:02:36,150 --> 00:02:40,140 And we still haven't added it in any of the functionality and we're going to do that in the next case 41 00:02:40,350 --> 00:02:41,420 with JavaScript. 42 00:02:41,760 --> 00:02:45,370 So there's a few other elements that we created. 43 00:02:45,400 --> 00:02:46,830 We need to add some styling to it. 44 00:02:47,190 --> 00:02:49,580 So next one is the main game area. 45 00:02:49,980 --> 00:02:57,390 So I believe we called that game area and we can set this to a width of sixty percent and margin, I 46 00:02:57,390 --> 00:02:59,820 guess, at the margin to so it would center it. 47 00:03:00,000 --> 00:03:05,610 But we are going to be floating them to the left anyway and border for now so that we can see where 48 00:03:05,610 --> 00:03:07,560 the border of this particular boxes. 49 00:03:07,710 --> 00:03:12,420 Let's set the border of the box of the game area and then going back into the index. 50 00:03:12,420 --> 00:03:14,910 Just make sure that I've got all of the names proper. 51 00:03:15,240 --> 00:03:16,890 So that's that game area there. 52 00:03:16,890 --> 00:03:24,120 And with brackets you can press on a mock command and that will open up that particular element success. 53 00:03:24,750 --> 00:03:27,060 So that is connected and proper. 54 00:03:27,240 --> 00:03:35,190 Next, let's update the cell so the cells where the different columns that we want on the Web page and 55 00:03:35,190 --> 00:03:37,030 applying the float's to those. 56 00:03:37,030 --> 00:03:42,570 So we'll just float those and for all of them left so that we get them all aligned and showing up on 57 00:03:42,570 --> 00:03:43,050 the page. 58 00:03:43,260 --> 00:03:45,870 And we don't have any of the staling yet for the other ones. 59 00:03:45,870 --> 00:03:50,190 And you can see it's there's the game area, but we don't have any content in it. 60 00:03:50,430 --> 00:03:52,110 So it's very hard to see. 61 00:03:52,110 --> 00:03:55,650 But it is there there's also the columns that we had. 62 00:03:55,650 --> 00:03:58,110 So these were the different columns that we want it to set. 63 00:03:58,710 --> 00:04:04,350 So setting them with the men width and the Menwith on the column should be one hundred pics. 64 00:04:04,560 --> 00:04:10,230 So even though we're using percentages, we want to set a minimum width because for instance, we don't 65 00:04:10,230 --> 00:04:16,770 want to go less than a certain pixel width as that will ruin the look and the feel of the game. 66 00:04:17,010 --> 00:04:19,770 Next, setting up the border solid. 67 00:04:19,770 --> 00:04:24,990 And let's set a really light border for this one and we might remove those borders. 68 00:04:24,990 --> 00:04:29,880 So usually I like to add in the borders as I'm developing so I can actually see where it's located. 69 00:04:30,000 --> 00:04:32,490 And podding for this is going to be zero. 70 00:04:32,880 --> 00:04:40,050 Next, let's set up the site areas and this is going to be the different side values that we have. 71 00:04:40,200 --> 00:04:44,730 So you can see that we've got the cells and then column and column. 72 00:04:44,940 --> 00:04:48,120 So those are the two columns that we have for the game area. 73 00:04:48,240 --> 00:04:50,220 And we're also going to select the main. 74 00:04:50,430 --> 00:04:56,910 So the main is that center gameplay area where we've got all of the content that's going to be presented 75 00:04:56,910 --> 00:04:57,180 there. 76 00:04:57,210 --> 00:04:59,940 So we're going to set a mean height of. 77 00:05:00,070 --> 00:05:03,890 100 VHI, so that's the vertical height. 78 00:05:03,910 --> 00:05:10,570 So that's going to provide full vertical height of that game area and make it bigger so you can see 79 00:05:10,570 --> 00:05:11,790 where it's being contained. 80 00:05:11,980 --> 00:05:19,180 So nothing yet is contained within those cells and setting minimum width of 806. 81 00:05:20,520 --> 00:05:21,400 And safe. 82 00:05:21,660 --> 00:05:27,150 So now we've got all of our game areas are set up and you can also add background colors if you want 83 00:05:27,150 --> 00:05:27,630 as well. 84 00:05:28,440 --> 00:05:31,130 Next to that I want to do is set up these models. 85 00:05:31,130 --> 00:05:36,370 So we've got these models and these are the ways that we're planning to communicate with the users. 86 00:05:36,510 --> 00:05:40,120 So the first model is model one, and we're going to have two models. 87 00:05:40,120 --> 00:05:41,190 So do model two. 88 00:05:41,400 --> 00:05:45,960 So both of them via their class, selecting those elements. 89 00:05:45,990 --> 00:05:48,540 And initially, we're going to do a display none. 90 00:05:48,540 --> 00:05:55,770 But for now, we'll do a position fixed so that we can position them on the page itself and move the 91 00:05:55,770 --> 00:06:03,010 screen up slightly so they can see them as we're developing them and the background color using our 92 00:06:03,010 --> 00:06:03,610 RGB. 93 00:06:03,870 --> 00:06:05,870 So there's a default RGB. 94 00:06:06,090 --> 00:06:12,240 So if it's not one of the more modern browsers that takes the alpha value within RGB, then we're going 95 00:06:12,240 --> 00:06:14,520 to just set that to just block. 96 00:06:14,910 --> 00:06:25,080 And if we do have the option to do some alpha version so we can do A and provide zero point four for 97 00:06:25,080 --> 00:06:25,940 the GPA. 98 00:06:26,130 --> 00:06:28,680 So it's going to be the background of those models. 99 00:06:28,710 --> 00:06:35,490 And what is going to be 100 percent height is going to also be 100 percent. 100 00:06:35,580 --> 00:06:37,590 That should have one in front of that. 101 00:06:37,600 --> 00:06:38,500 So it's 100. 102 00:06:38,520 --> 00:06:47,910 So this will actually darken out that entire area that we can have for the model popup and left is zero, 103 00:06:48,000 --> 00:06:49,620 up is zero. 104 00:06:49,980 --> 00:06:53,240 So you can see it's appeared at showing up. 105 00:06:53,760 --> 00:06:57,030 So this is what happens whenever the model is visible. 106 00:06:57,150 --> 00:06:59,820 It's going to carry out the rest of the content on the screen. 107 00:06:59,820 --> 00:07:04,110 And that's what we want, because and then we're going to put the model content in kind of like a pop 108 00:07:04,110 --> 00:07:08,850 up just above the model and add in some padding on the top. 109 00:07:08,860 --> 00:07:10,270 So it's moved slightly down. 110 00:07:10,290 --> 00:07:12,760 And this is where the content of the model will start. 111 00:07:13,050 --> 00:07:18,960 So we're adding in that padding and using that index so that it goes on top of the other content so 112 00:07:18,960 --> 00:07:21,800 you can't click anything underneath it and safe. 113 00:07:22,100 --> 00:07:27,950 Now, we can do the model content, some model content, and let's have a background color for this 114 00:07:27,960 --> 00:07:33,170 so that to eat so that we can see that content margin is going to be auto. 115 00:07:33,180 --> 00:07:36,450 So it centers the content setting up minimum height. 116 00:07:36,600 --> 00:07:42,840 So even if there's no content inside, it's going to be at least that high, setting up some padding, 117 00:07:43,350 --> 00:07:47,320 the 30 picks of padding so that the text is slightly inside. 118 00:07:47,640 --> 00:07:55,230 Usually I like to use 50 percent of the available screen space and border radius so slightly round the 119 00:07:55,230 --> 00:07:58,380 borders of that popup window. 120 00:07:58,410 --> 00:08:03,720 So now we've got both of those pop up windows showing up because both of them, remember, had model 121 00:08:03,720 --> 00:08:04,260 content. 122 00:08:04,320 --> 00:08:08,850 The models are going to be useful, whether you're creating it within this game or one of the other 123 00:08:08,850 --> 00:08:13,180 projects, you'll always need a way to connect with your Web users. 124 00:08:13,470 --> 00:08:19,230 So this is always a good way with these pop up models and they look way better and more moderate than 125 00:08:19,230 --> 00:08:21,300 what you would see with the default alerts. 126 00:08:21,900 --> 00:08:25,360 So we also had the model body and model body, too. 127 00:08:25,380 --> 00:08:27,570 So this is the content area for the models. 128 00:08:27,780 --> 00:08:33,570 And it just so happens that within this project we do have both of those, that we do have two models. 129 00:08:33,780 --> 00:08:38,370 Oftentimes you can get away with just one model setting the font size. 130 00:08:38,520 --> 00:08:40,890 So this is where the model content is going to go. 131 00:08:40,920 --> 00:08:43,780 So we want this nice and readable for the users. 132 00:08:44,010 --> 00:08:46,860 And then lastly, we need to handle the different buttons. 133 00:08:47,130 --> 00:08:54,270 So we've got buttons for the various models and we've got one of the models underneath which has the 134 00:08:54,270 --> 00:08:55,290 little X there. 135 00:08:55,440 --> 00:08:59,400 So they're actually stacked one on top of the other because we've got both of them and they're both 136 00:08:59,400 --> 00:09:00,860 positioned in the same spot. 137 00:09:01,260 --> 00:09:08,030 So let's do the deal first and then we can hide the top model and fix up and finish up the bottom model. 138 00:09:08,430 --> 00:09:15,950 So doing the background color for the deal and a nice green color is probably ideal for our deal. 139 00:09:16,350 --> 00:09:18,000 And then we've also have the other one. 140 00:09:18,000 --> 00:09:19,400 That's no deal. 141 00:09:19,490 --> 00:09:25,670 So the no deal class and do a background color for the no deal and this one maybe should be red. 142 00:09:25,950 --> 00:09:27,920 So you can see that those are being presented. 143 00:09:28,170 --> 00:09:31,770 They were both they both shared a class called Offers. 144 00:09:32,160 --> 00:09:38,490 And so that means that within this class we can set default width and we can set some of these default 145 00:09:38,490 --> 00:09:39,060 parameters. 146 00:09:39,060 --> 00:09:43,410 How we want this to look so we can look like make them look like buttons, because this is something 147 00:09:43,410 --> 00:09:46,030 that we want the user to be able to click. 148 00:09:46,050 --> 00:09:52,590 So 50 picks for the heights and we'll do font size like we're turning them all rather large fonts. 149 00:09:52,590 --> 00:09:58,200 And this is something that you could revisit as well afterwards just to make sure that it is as you 150 00:09:58,200 --> 00:09:58,560 want. 151 00:09:58,830 --> 00:10:02,010 I'm going to do a display of inline blocks. 152 00:10:02,280 --> 00:10:05,730 So that makes a slight adjustment on the way it's being presented. 153 00:10:06,240 --> 00:10:08,970 Also the color of the font. 154 00:10:09,270 --> 00:10:13,530 So let's just turn this white and text align center. 155 00:10:13,530 --> 00:10:18,870 So text is center aligned, adding a little bit of padding so it's not sitting right on the edge. 156 00:10:19,260 --> 00:10:19,860 And then. 157 00:10:19,900 --> 00:10:24,440 Out in a little bit of margin, so do a three percent margin, so the margin is going to be dynamic 158 00:10:24,440 --> 00:10:25,720 because of with this dynamic. 159 00:10:25,960 --> 00:10:28,870 So this should roughly center the elements. 160 00:10:28,870 --> 00:10:31,880 And there's a number of different ways that you can center those elements. 161 00:10:32,020 --> 00:10:36,950 Let's do something so the user knows that this is something that can be interacted with. 162 00:10:37,180 --> 00:10:43,000 So setting a color for whenever we hover, so it's a little bit off white font weight. 163 00:10:43,270 --> 00:10:47,020 And you could really spend quite a bit of time on styling, of course. 164 00:10:47,020 --> 00:10:52,720 And I'm sure you probably have better ways to customize it and make it look better than what I'm doing. 165 00:10:52,730 --> 00:10:56,590 But again, this is just something that I want it to set up rather quickly. 166 00:10:57,040 --> 00:11:02,500 So we've got all of that taken care of and let's hide the model one. 167 00:11:03,110 --> 00:11:06,570 So take model one and apply display none. 168 00:11:07,060 --> 00:11:11,230 So that should hide or actually it should be model two that we're hiding because we want to see model 169 00:11:11,230 --> 00:11:11,460 one. 170 00:11:11,770 --> 00:11:13,780 So there we've got the close button. 171 00:11:14,020 --> 00:11:18,220 So on model one, we still need to handle the close button on it. 172 00:11:18,440 --> 00:11:25,180 So that was just with a class of clothes and we can adjust the color of that so it stands out slightly 173 00:11:25,180 --> 00:11:29,230 more and float it over to the right hand side of the page. 174 00:11:29,690 --> 00:11:33,700 It's typically the clothes is sitting on the right hand side and fought side. 175 00:11:33,710 --> 00:11:36,700 So we might want to make this a little bit bigger so it stands out. 176 00:11:36,970 --> 00:11:42,030 So maybe font size three and we can also do the font weight if we want. 177 00:11:42,340 --> 00:11:43,270 So font weight. 178 00:11:43,270 --> 00:11:49,540 And I'll just set this to board for now so that we've got a nice big X so the user knows exactly where 179 00:11:49,540 --> 00:11:56,890 to find this X and still on the clothes, let's set a hover function so the user knows that this is 180 00:11:56,890 --> 00:11:58,750 something that can be interacted with. 181 00:11:58,870 --> 00:12:07,560 Whenever they hover on it, it'll update the color of the font to be black and text decoration. 182 00:12:07,780 --> 00:12:14,130 We're sending the text decoration to one point, setting the cursor to a pointer so it gives us an option. 183 00:12:14,140 --> 00:12:19,510 We can see that it's more interactive now and also maybe I'll update this to be red. 184 00:12:19,930 --> 00:12:25,390 So whenever we hover over it, it'll go red so that we can close it and make this slightly smaller. 185 00:12:25,510 --> 00:12:27,490 So it's more in line with the size of the text. 186 00:12:27,760 --> 00:12:28,600 So it looks good. 187 00:12:28,600 --> 00:12:34,030 And now what we can do, instead of just hiding the one model, we're going to hide both models because 188 00:12:34,030 --> 00:12:37,860 we don't want either one of them showing until we're ready to interact with them. 189 00:12:37,870 --> 00:12:42,100 And this is where the JavaScript is going to come in, where we're going to make all of the JavaScript, 190 00:12:42,280 --> 00:12:45,630 create all of the functionality where we can have these models pop up. 191 00:12:45,640 --> 00:12:49,630 And also we're going to populate the game area, make the start button interactive. 192 00:12:49,840 --> 00:12:54,160 And this is the wrap up for most of the styling of the game. 193 00:12:54,280 --> 00:12:56,680 And we are going to have to make some tweaks, adjustments. 194 00:12:56,680 --> 00:13:01,120 So we are going to have to refer back to the siestas file a little bit in the later lessons. 195 00:13:01,270 --> 00:13:05,260 But for now, we've got a good start and we're ready to start making the interaction. 196 00:13:05,440 --> 00:13:10,210 And usually this is the way that I like to do it, where I like to style it first, create the interaction 197 00:13:10,210 --> 00:13:15,670 with JavaScript so I can see which elements I'm interacting with and how I want them to interact and 198 00:13:15,670 --> 00:13:21,010 then make some minor adjustments and tweaks, styling and then the back to the JavaScript to create 199 00:13:21,010 --> 00:13:21,690 a finished product. 200 00:13:21,700 --> 00:13:24,530 So try this out, add in some styling, make it look nice. 201 00:13:24,530 --> 00:13:26,620 You have to follow the exact styling that I did. 202 00:13:26,800 --> 00:13:31,690 So make sure that you do have the structure where you do have these interaction points and these visible 203 00:13:31,690 --> 00:13:33,160 points for the player.