1 00:00:01,110 --> 00:00:06,690 Hey, since you did so well on the earlier challenge, I've got another challenge for you and this challenge 2 00:00:06,690 --> 00:00:07,980 is going to be a little bit easier. 3 00:00:08,070 --> 00:00:15,460 But we're using Amarth random as well as string values, string manipulation within this exercise. 4 00:00:15,660 --> 00:00:18,510 So the objective is to select a random color. 5 00:00:18,660 --> 00:00:22,440 So using both random and the color is going to be a hex value. 6 00:00:22,440 --> 00:00:31,200 So Hexis base 16 C could have all the digits all the way up to zero to nine as well as ABCDE PEF. 7 00:00:31,410 --> 00:00:37,480 And if you're familiar with hex colors in the Internet, those are with a hash and then they've got 8 00:00:37,740 --> 00:00:45,330 six characters and we're going to generate this randomly using Amarth random and then substring to select 9 00:00:45,330 --> 00:00:45,780 the color. 10 00:00:46,230 --> 00:00:47,010 So let's try this. 11 00:00:47,400 --> 00:00:50,540 So pause the video here and I'll walk you through the solution. 12 00:00:50,940 --> 00:00:53,190 And this is going to be a really useful function. 13 00:00:53,370 --> 00:00:55,830 Now you're going to use all the time, especially gendering around. 14 00:00:56,430 --> 00:00:58,250 This is going to be surprisingly simple. 15 00:00:58,260 --> 00:01:02,030 So at first we'll work through the math part in the console. 16 00:01:02,370 --> 00:01:08,880 So using math random and we saw it math random does is it returns this number zero decimal and a whole 17 00:01:08,880 --> 00:01:10,200 bunch of digits. 18 00:01:10,200 --> 00:01:15,840 After that we can convert it to string and that's going to turn it into a string. 19 00:01:15,840 --> 00:01:22,980 So we see that we got the quotes around that and we could also use substring and do a negative six and 20 00:01:22,980 --> 00:01:26,670 that will return back six characters from the end. 21 00:01:26,700 --> 00:01:28,590 So this is a substring negative six. 22 00:01:28,770 --> 00:01:31,590 So this will always produce a random value. 23 00:01:31,590 --> 00:01:37,740 So random six character number and turning it into a string and we have to convert it to string in order 24 00:01:37,740 --> 00:01:39,810 to utilize the string method. 25 00:01:39,820 --> 00:01:43,650 So there isn't anything in number that we can get a substring. 26 00:01:43,660 --> 00:01:48,300 So that's what we're converting it and divert string into hex format. 27 00:01:48,570 --> 00:01:54,210 We can use base 16, so that's going to convert it into XML format. 28 00:01:54,210 --> 00:02:00,390 And as you can see now, we're returning back a hex value that's got six characters. 29 00:02:00,510 --> 00:02:05,300 And this is actually exactly what we need in order to generate a random number. 30 00:02:05,850 --> 00:02:07,910 So let's create a random color. 31 00:02:08,310 --> 00:02:11,210 So let's create our function for random color. 32 00:02:11,220 --> 00:02:18,660 We don't need to pass in any parameters and we can just create a temporary variable to hold this formula. 33 00:02:19,410 --> 00:02:22,380 And then we're returning back, whatever the value of that is. 34 00:02:22,620 --> 00:02:24,330 And we don't actually need a variable. 35 00:02:24,330 --> 00:02:27,420 We could just go directly to even shorten it even more. 36 00:02:27,570 --> 00:02:29,540 We can return back that value. 37 00:02:30,120 --> 00:02:32,820 So when we refresh and let me clear that. 38 00:02:33,060 --> 00:02:36,960 So now if I do a random color, there is something missing. 39 00:02:36,960 --> 00:02:40,350 For those of you that work with colors, what's missing? 40 00:02:40,350 --> 00:02:41,340 We're missing the hash. 41 00:02:41,340 --> 00:02:44,910 And this is easy to add in because, of course, this is a string. 42 00:02:45,090 --> 00:02:48,330 So all we have to do is add the hash, concatenate it to the result. 43 00:02:48,720 --> 00:02:54,990 And when we refresh and we put the random color again, you can see that the random color is being output 44 00:02:54,990 --> 00:02:55,290 there. 45 00:02:55,710 --> 00:03:01,140 So now next thing we want to do is update the color of the background randomly, of course. 46 00:03:01,410 --> 00:03:03,910 And we can also even tie it to a button if we want to. 47 00:03:03,930 --> 00:03:05,910 So we've got that button on the screen. 48 00:03:06,180 --> 00:03:15,300 So using documents and query selector, selecting the button element and adding an event listener, 49 00:03:15,690 --> 00:03:16,800 you don't have to do it this way. 50 00:03:16,920 --> 00:03:18,870 You could just simply generate the random color. 51 00:03:19,710 --> 00:03:21,380 And we've got an anonymous function. 52 00:03:21,960 --> 00:03:28,200 So whenever this button is going to get clicked, we're going to use the document body, apply a style 53 00:03:28,200 --> 00:03:31,290 to it, and the style is for the background color. 54 00:03:31,320 --> 00:03:36,080 And this value is going to be whatever gets returned back from random color function. 55 00:03:37,410 --> 00:03:38,340 So refresh. 56 00:03:38,340 --> 00:03:43,830 And now whenever we click the button, we can generate a random background color that's going to get 57 00:03:43,830 --> 00:03:46,080 applied to the elements, to the body. 58 00:03:46,230 --> 00:03:48,450 You can see that that number is always going to be changing. 59 00:03:48,900 --> 00:03:55,980 And the reason are going to be is because whenever we're passing that hex into the dorm, then the DOM 60 00:03:55,980 --> 00:04:01,380 is translating into RGB and then updating the color, the style property color. 61 00:04:02,130 --> 00:04:05,640 So that's where we're getting all of that random background color being generated. 62 00:04:05,700 --> 00:04:06,270 So try to.