WEBVTT

00:00.000 --> 00:04.880
hello friends welcome to coding session today in
this tutorial we will be looking at a library

00:04.880 --> 00:10.880
called as random color so it is an open source
library for generating some random colors

00:10.880 --> 00:16.880
in javascript so this is the github link of this
library so in order to include this library

00:16.880 --> 00:25.200
you will need jquery so i have already included
the cdn for jquery and also if you go to google

00:25.200 --> 00:34.320
here just type here random color cdn so the
first text which comes in you can see that

00:34.320 --> 00:41.040
so just copy there is a cdn of that also so
various cdns are also there you can just take

00:41.040 --> 00:51.360
this cdn win.js just copy this and paste it
above your after your jquery is imported so

00:51.360 --> 00:58.400
just paste it here after this is my script.js
so in order to generate a random color with

00:58.400 --> 01:05.360
the help of this library let me create a new
variable of color and the function is very

01:05.360 --> 01:13.840
simple random color that's it so this will
generate a hash code for the color so i can

01:13.920 --> 01:21.440
just change the body first of all
let me just print it in the console

01:25.040 --> 01:32.240
so if i open developer tools you can see that
it has been rated in three decimal random color

01:32.240 --> 01:45.600
so if i refresh this you will see it is changing here so now if i want to
set the background color of the body so document.body.style.background

01:45.600 --> 01:55.840
is equal to color so now you can see that
the color has changed here green violet so

01:55.840 --> 02:03.680
whenever i refresh the page it will change
the color you can see that and also it can

02:03.680 --> 02:10.080
paste some options so it can return if you
want to provide some options custom options

02:10.080 --> 02:18.000
so there is a count option which lets you return
10 colors so if i control lock it will return an

02:18.000 --> 02:30.480
array so you can see that 10 colors are returned
so you can pass as much number as you want let

02:30.480 --> 02:40.320
me pass 100 so you will see that it will return
100 hexadecimal codes so based upon that if you

02:40.320 --> 02:51.519
refresh as this is an array you need to be using
a for each group so for each array is color and

02:51.519 --> 02:59.120
let me take an index variable also called as color and
just you have to write the document.body.style.background

03:00.799 --> 03:08.000
is equal to color that's it so now you can
refresh the page and then you can see that

03:08.000 --> 03:16.480
these 100 colors will be applied to the body
as well apart from this you have some more

03:16.480 --> 03:22.560
options in order to create some specific colors
you can see that this is a view option you can

03:23.520 --> 03:28.240
view is equal to green so it will be
generating the green related colors

03:32.080 --> 03:44.320
green is not defined so you need to put it in the single quote so
you can see that it will return the green related colors which is

03:44.960 --> 03:49.440
just with the help of this property you can
just provide any color let's suppose red

03:50.079 --> 04:00.079
reflective so you can see that red head related color there are
based upon that there are various options you can also use RGB

04:01.040 --> 04:10.400
you can change the luminosity property
as well so let me provide this as bright

04:12.320 --> 04:24.880
and the format let me provide this in RGB so now you can see that
the colors are returning in a red green blue format you can see that

04:26.719 --> 04:31.120
these are all bright colors so
in this way you can generate

04:31.120 --> 04:34.480
some random colors using this
library called as random color