Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:01,500 --> 00:00:07,590 Hello, guys, and welcome to this project and this one, we are going to build a counter up and this 2 00:00:07,590 --> 00:00:08,460 is pretty basic. 3 00:00:08,760 --> 00:00:15,510 I know that most of you already probably know how to build stuff like this, but it's easy or seemingly 4 00:00:15,510 --> 00:00:21,890 simple projects like these actually in this course to help begin as a key to help them, you know, 5 00:00:22,200 --> 00:00:25,540 you know, shopping up before they start getting into complex projects. 6 00:00:25,570 --> 00:00:30,170 OK, so if this project is one or the other, oh, this is too simple for me. 7 00:00:30,180 --> 00:00:31,110 Well, no problems. 8 00:00:31,110 --> 00:00:35,440 You can actually just skip to the next one until you find something that is challenging. 9 00:00:35,470 --> 00:00:42,450 OK, and I'm pretty sure you would OK, if you are in the class of beginner slash intermediate. 10 00:00:42,900 --> 00:00:43,280 All right. 11 00:00:43,290 --> 00:00:45,570 So let's get started with this countertop. 12 00:00:45,640 --> 00:00:48,540 So basically how it works is it's just a simple concept. 13 00:00:48,540 --> 00:00:54,720 I put a number if you click on the add, it will increase that number by one so you can increase it 14 00:00:54,720 --> 00:00:55,820 as much as you want. 15 00:00:56,310 --> 00:01:01,070 If you click on subtract, it will reduce the number and you can actually see. 16 00:01:01,950 --> 00:01:03,060 Let me keep producing. 17 00:01:03,540 --> 00:01:08,850 So there are some things to note when you reduce and it gets to a negative number. 18 00:01:09,110 --> 00:01:13,350 OK, the color becomes this red. 19 00:01:13,410 --> 00:01:14,910 OK, it's actually orange. 20 00:01:14,910 --> 00:01:15,300 Red. 21 00:01:15,450 --> 00:01:22,550 OK, if you increase and it gets to a whole number, it becomes yellow. 22 00:01:22,770 --> 00:01:28,860 And then when you reset, it goes to zero and at the point of zero the number becomes white. 23 00:01:28,890 --> 00:01:32,650 OK, so that's just the simple logic that we're going to add to the project. 24 00:01:32,670 --> 00:01:32,910 All right. 25 00:01:32,910 --> 00:01:34,050 So let's get started. 26 00:01:36,250 --> 00:01:45,930 I'll get rid of the yellow world and I will just create a D with a class of container and inside it 27 00:01:46,050 --> 00:01:49,140 create another Div with a class of counter def. 28 00:01:51,430 --> 00:01:56,740 OK, and then let's add each one so each one will see. 29 00:02:00,040 --> 00:02:00,260 OK. 30 00:02:01,090 --> 00:02:07,870 And then below the Hitchon, we are going to add a span that will have a class of count. 31 00:02:10,850 --> 00:02:17,840 And well, for now, I'll just put there so we can actually see where we are, Stylianides, then we're 32 00:02:17,840 --> 00:02:22,100 going to separate these guys from the buttons with the horizontal rule. 33 00:02:23,350 --> 00:02:28,630 OK, so now what we need is a different class of buttons, plural. 34 00:02:29,150 --> 00:02:31,770 And inside is the we are going to place three buttons. 35 00:02:31,790 --> 00:02:33,950 OK, so I'll see button. 36 00:02:38,370 --> 00:02:44,330 Those are just the S or maybe I'll just say subtracts, because that's going to be the first one. 37 00:02:45,120 --> 00:02:53,040 And I would inside of this voting rights, I would add if want or some icon. 38 00:02:53,070 --> 00:02:55,800 OK, so it's icon. 39 00:02:56,280 --> 00:02:57,870 So it's I contorts. 40 00:02:58,470 --> 00:03:02,760 I think it's this is then the name of the icon. 41 00:03:02,790 --> 00:03:03,000 So. 42 00:03:03,100 --> 00:03:11,100 So the first one is f a hyphen arrow down I think like that. 43 00:03:11,730 --> 00:03:14,510 And then I just add the text on the bottom. 44 00:03:14,520 --> 00:03:16,490 So subtract. 45 00:03:16,760 --> 00:03:22,560 OK, so basically what we are going to do is we are going to duplicate this three times, two times. 46 00:03:22,560 --> 00:03:25,440 So and they are just changing components. 47 00:03:25,440 --> 00:03:26,460 So this is going to be. 48 00:03:28,050 --> 00:03:28,930 He said. 49 00:03:33,780 --> 00:03:34,530 What am I doing? 50 00:03:35,040 --> 00:03:39,480 So we said, and this is going to the icon is going to be Spiner. 51 00:03:39,820 --> 00:03:49,650 OK, so if a hyphen Spiner then this is also going to see said, then the last one is going to be he's 52 00:03:49,710 --> 00:03:54,420 going to have a class of add and this is going to be our opening. 53 00:03:55,830 --> 00:03:58,500 And of course it takes on the buttons consciously at. 54 00:03:58,680 --> 00:04:03,960 OK, so that's as far as it is for the makeup, for the makeup. 55 00:04:04,350 --> 00:04:07,980 So what we're going to do next is let me just show you what we've done so far. 56 00:04:14,280 --> 00:04:17,340 All right, so this is what we have been able to achieve. 57 00:04:17,650 --> 00:04:22,690 OK, all right, so let's add some cases to make it look a little bit better. 58 00:04:23,480 --> 00:04:23,780 OK. 59 00:04:25,220 --> 00:04:31,910 So first off, you know, we have our template, right, I'm going to add some more properties to the 60 00:04:31,910 --> 00:04:32,760 container here. 61 00:04:33,230 --> 00:04:39,500 So, for example, I will see a display and I see Fleck's. 62 00:04:42,200 --> 00:04:55,480 Then I would say Justified Content Analysis Center and then I line items also is also going to be center. 63 00:04:56,390 --> 00:05:00,900 OK, if you see that right, it's going to center in the middle. 64 00:05:00,910 --> 00:05:07,100 But if you wanted to center it vertically, you need to give it the heights to heights of one hundred 65 00:05:07,100 --> 00:05:08,840 percent of the viewport heights. 66 00:05:09,290 --> 00:05:10,240 And it's the center. 67 00:05:10,250 --> 00:05:13,580 It's both vertical and horizontal. 68 00:05:13,760 --> 00:05:14,100 OK. 69 00:05:14,870 --> 00:05:15,250 All right. 70 00:05:15,260 --> 00:05:17,830 So next, let's add some stores to the counter. 71 00:05:17,870 --> 00:05:21,380 You can't do. 72 00:05:25,130 --> 00:05:31,160 And basically, what we want to do is let's just give it a week and I'm just going to give it a bit 73 00:05:31,160 --> 00:05:42,400 of 40 and then let's give it keyboarder, one kicks so solid white. 74 00:05:44,060 --> 00:05:46,190 OK, I think maybe we should use grey. 75 00:05:46,880 --> 00:05:47,780 So grey. 76 00:05:49,950 --> 00:05:51,210 Let's give you some padding. 77 00:05:54,630 --> 00:05:55,500 Yeah, so funny. 78 00:05:57,050 --> 00:06:03,620 And let's just do one room, then we're going to give it some background in background. 79 00:06:03,630 --> 00:06:04,100 Hello? 80 00:06:06,240 --> 00:06:12,960 Let's use our light blue if we see that now you see that we now have a background. 81 00:06:12,990 --> 00:06:21,900 Okay, then we are going to set the color from this car that is known to whites and that just make everything 82 00:06:21,900 --> 00:06:24,080 inside the contact, the white. 83 00:06:24,090 --> 00:06:30,210 So it was the first time, right, since most of the laser takes Alina to the center. 84 00:06:30,910 --> 00:06:37,950 And of course, don't forget about a radios that was said to five pixels, looking at some curves around 85 00:06:37,950 --> 00:06:38,350 this guy. 86 00:06:38,460 --> 00:06:46,140 So now the elements inside of the teeth are going to target them and give them some margin on the bottom. 87 00:06:46,140 --> 00:06:48,300 So discount that, right. 88 00:06:48,340 --> 00:06:50,550 If I go to index to show you something. 89 00:06:50,550 --> 00:06:50,910 Right. 90 00:06:50,910 --> 00:06:55,650 Because this is a contact right inside the country. 91 00:06:55,650 --> 00:06:57,000 We have this huge one. 92 00:06:57,240 --> 00:07:00,340 We have this span, and then we have to deal with the class of voting. 93 00:07:00,660 --> 00:07:05,080 These are the direct children of the county. 94 00:07:05,520 --> 00:07:12,210 So if I want to target them right, what I would do is I would come down here, I will see you then. 95 00:07:12,210 --> 00:07:15,810 I would say target all the elements inside. 96 00:07:15,840 --> 00:07:17,520 OK, that's a direct children. 97 00:07:17,740 --> 00:07:25,450 OK, now our density margin for the bottom and I would just do to remain unsafe. 98 00:07:26,340 --> 00:07:27,680 So you see they spaced out. 99 00:07:28,170 --> 00:07:28,560 All right. 100 00:07:28,570 --> 00:07:30,920 So next discounts looks very small. 101 00:07:30,930 --> 00:07:42,510 So I would just come down and target counts and I'll give you the font size, not font expectancy of 102 00:07:42,510 --> 00:07:46,580 four hours, if that's OK. 103 00:07:46,620 --> 00:07:47,640 So it looks better. 104 00:07:48,210 --> 00:07:50,180 OK, next list, I get the buttons. 105 00:07:50,700 --> 00:07:55,480 So remember that buttons that inside it deal with the class of buttons. 106 00:07:55,500 --> 00:07:59,610 OK, so I'll take it out and then I'll target each button. 107 00:08:00,300 --> 00:08:10,560 OK, first let's add some padding I'm going to put in of one room, then let's add some margin on the 108 00:08:10,560 --> 00:08:11,340 top and bottom. 109 00:08:11,340 --> 00:08:14,070 Let's do zero on the left and right. 110 00:08:14,070 --> 00:08:16,770 I'll do one room as well to space out the bottom. 111 00:08:17,530 --> 00:08:18,450 So this should be one. 112 00:08:19,470 --> 00:08:22,450 See that wall then? 113 00:08:23,330 --> 00:08:34,410 Well, there's different size of one point firing unless the color of whites, but the color of the 114 00:08:34,410 --> 00:08:36,360 text inside the bottom is going to be white. 115 00:08:36,510 --> 00:08:38,530 Now, we're not seeing anything very well. 116 00:08:38,910 --> 00:08:43,860 So what that means is that, OK, you know what? 117 00:08:43,860 --> 00:08:46,980 I'm going to just comment that out. 118 00:08:46,980 --> 00:08:50,760 Right, because we are going to say different backgrounds for the buttons. 119 00:08:50,800 --> 00:08:57,180 OK, so so let's set the border of each button on this. 120 00:08:57,180 --> 00:09:08,810 Also set out to learn then, let's say the border radius to see. 121 00:09:09,520 --> 00:09:11,430 OK, so it looks a little bit better. 122 00:09:12,720 --> 00:09:14,280 What is one more thing? 123 00:09:14,490 --> 00:09:19,740 And that is the fact that we cannot actually see the icons that are supposed to be inside the buttons. 124 00:09:20,730 --> 00:09:21,660 So. 125 00:09:22,680 --> 00:09:27,420 Anyway, let me I think I should just finish styling the buttons then oh, then do with the icons. 126 00:09:27,460 --> 00:09:31,950 OK, so basically what we do is we just target individual boards. 127 00:09:31,950 --> 00:09:38,280 And so the first one out is that we see in, uh, sorry button. 128 00:09:40,410 --> 00:09:47,820 Then let's subtract first the one with the class or subtract rather we're going to set the background 129 00:09:47,820 --> 00:09:50,730 color of orange red. 130 00:09:52,770 --> 00:09:55,860 OK, if you see that the first button would take that color. 131 00:09:56,340 --> 00:10:03,580 So basically what I do is to duplicate these two times and I would see I'll make the second one. 132 00:10:04,470 --> 00:10:06,120 This is going to be six. 133 00:10:07,410 --> 00:10:12,600 We're going to make the background color to white. 134 00:10:14,960 --> 00:10:15,460 OK. 135 00:10:16,900 --> 00:10:17,560 Then. 136 00:10:19,170 --> 00:10:23,310 Let me see if this situation is where it's right there. 137 00:10:23,360 --> 00:10:26,880 We are going to assess the college itself or the text to. 138 00:10:27,900 --> 00:10:33,880 OK, so I would come here and see color and also the text. 139 00:10:35,820 --> 00:10:38,040 I think I have a black, so black. 140 00:10:39,360 --> 00:10:49,260 So for the last one is going to be add to add our city colors and green can see that on Wollar. 141 00:10:49,770 --> 00:10:57,450 So here we can then come here and comment out this color white and you see we have it here like this 142 00:10:58,050 --> 00:11:03,450 then I think, I think we should set the font with what is text. 143 00:11:03,450 --> 00:11:08,250 So I see from tweets and also two to seven hundred. 144 00:11:09,590 --> 00:11:10,970 OK, so it looks better. 145 00:11:11,780 --> 00:11:15,920 All right, so now the only thing left is to take a look at our. 146 00:11:17,890 --> 00:11:22,570 I can't say they are not displaying on this page, so let me come to my concern. 147 00:11:22,590 --> 00:11:23,500 Let's look at them. 148 00:11:26,440 --> 00:11:32,200 All right, so the first one is the if it is if it are done. 149 00:11:34,290 --> 00:11:38,910 OK, I don't actually see a reason why this should not show on the page. 150 00:11:43,550 --> 00:11:45,350 Don't talk this series on why. 151 00:11:50,030 --> 00:11:51,350 If is. 152 00:11:54,600 --> 00:11:59,430 You know what, let me refresh this one and see if it's my network that's even the issue. 153 00:11:59,940 --> 00:12:02,940 OK, so apparently it's not my network, it's in the code itself. 154 00:12:03,580 --> 00:12:05,750 So let's take a look at it one more time. 155 00:12:07,320 --> 00:12:07,940 Um. 156 00:12:15,570 --> 00:12:18,270 And this is this front, awesome kids. 157 00:12:22,240 --> 00:12:28,420 OK, so I think my Internets had some issues before, OK, so now everything works. 158 00:12:28,450 --> 00:12:36,400 Now, of course, the button, let me set a course of pointer, so let me see cursor so that when you 159 00:12:36,400 --> 00:12:38,530 move on the button, it looks like it's clickable. 160 00:12:39,430 --> 00:12:39,690 OK. 161 00:12:40,300 --> 00:12:40,680 All right. 162 00:12:40,690 --> 00:12:43,470 So now we're done with the stimulants. 163 00:12:43,760 --> 00:12:48,200 As for the button and subsequent predict, we are going to use this skeleton. 164 00:12:48,220 --> 00:12:53,510 OK, so now what we're going to do is in the next video, we're going to write JavaScript for this project. 165 00:12:53,530 --> 00:12:53,850 All right. 166 00:12:53,860 --> 00:12:54,520 See you there. 15642