uh Hello friends welcome to this video
so in this video we'll looking at how to
build out this color code finder kind of
application where you have a Color
Picker and you can select any color from
this Color Picker and then you will get
this hexa decimal code value and the RGB
value so many of times you need to have
find out your favorite color you can use
this Color Picker and then as you change
select your color these values will
change accordingly and and from your
Color Picker you can pick your favorite
color and depending upon that you can
get the hexad decimal value you can
simply click these buttons to copy the
hexad decimal value to copy to clipboard
similar to RGB value red green red green
blue Alpha value so all these values you
can I will show you how to build this uh
tool right in the browser itself we are
using bootstrap for user interface and
plain JavaScript for the logic of this
application so all the source code will
be given in the description of this
video so let's start building this
application
so so what I will do I will simply
delete everything and start from
scratch so I just included the CDN of
bootstrap right in my brows uh in this
application in the HTML file just you
include that and now you can actually
bake the
interface you can actually use the
container class of
bootstrap inside card we can use the
card
class padding and Shadow
classes inside this you'll have a simple
heading which will simply say color code
finder it will be actually be giving an
class to it of text Center font size FS
3
FW is
font weight and it will be bold margin
bottom
four so after that we will be
giving having a simple form where we'll
be allowing the user to Simply select
the color so input type here will be
color we'll be giving an ID to it of
Color Picker so here the user will
select their favorite color we'll
giveing a bootstrap class of form
control
and it should be required and the value
default value will be black color which
is hex decimal code is 6
Z like
this so if you refresh your application
it will look something like this you'll
see that now the user can pick their
favorite color by default black color is
selected we also Al have the second
class here it's
a color input that's why we have the
second bootstrap class form control
color so it will just align it properly
you can see
that so we have the card class MX
Auto so after that uh we will also be
showing a live preview of the color as
well which is selected by the
user and for that we'll be giving a
class to it of color
preview margin bottom
four and we will be giving a background
color to
it or black by
default so inside this we will actually
have a
label giving a bootstrap class of form
label and we will have this
uh okay this is in the different way uh
this is
only this is different thing this is not
the part of this div just make sure you
go outside of this div we have another
div which have the class of margin
bottom four we have a
label we have a class of form
labels and this will be the hexa decimal
value of the
color and we'll be showing this all
these values in the text area we will
give it an ID to this text area which
will be hex
value we'll be giving a class of it of
form
control and it will only be read
only the user can't change the
value the value will be simply this one
by default black
color read
only so you have this text area black
color would be there so
after this text area we will be having
a button of copy to clipboard so that
the user
can copy this value very
easily and
uh be having this BTN BTN primary margin
top
two so similarly we'll be copying this
so one more time and secondly you'll be
having another one this time will be RGB
value RGB value giving an
ID and we'll be saying copy
RGB we will have two buttons out there
if you see
that so now you'll be writing the
JavaScript code
in a separate file so we have the
script.js
file so first of all we will get access
to all the things in the Dom so for that
we'll be using get element by
ID so Color Picker color preview
so all these elements we have given
these IDs so we're just targeting them
XX
value so we have got all the references
now we can actually bind a
event handler to the Color Picker event
field you can add event list now so when
the color changes we will execute this
function update color so we need to
Define this function update
color you can simply say hi so what
should happen if I change this you will
see that as I CH as the value changes in
this input
field this function will execute so
right right here in this update color
function what we need to do we now need
to update the color of the
preview whatever is the Color Picker
value you can get this value like
this and then color Pi color preview
style do background
color we need to make sure whatever is
the color
selected and decimal value value is
actual color and RGB
value dot
value and here we need to convert the
hexa decimal value which is
coming for this we need to write a
function hexa decimal to
RGB and we'll be passing this value
which is coming of this color
value so if you see now uh if you
changes you will see that the color
preview value will reflect whatever
color that we and also the hexadecimal
as
well so whatever color that we are
choosing so you will see the hexadecimal
value has been changing and also the
preview as well now we need the RGB
value we need to convert this
hexadecimal value which is coming to
RGB so how we can do
that so we need to define a function for
that which is uh take the hexadecimal
value and as a
argument and for converting this we have
to write some
formula let me introduce three variables
r g and B so we'll be initializing all
these three variables to zero and you'll
simply say if the
hexadecimal length is uh 4
characters then in that case we need to
process it so we need to extract the r r
content for that we'll be using the
parent
function
hex this is actually the formula that we
are
using the base is 16 for hexadecimal if
you all know it is 16 correctors so
similarly we can use the same formula to
get the second value in RGB
the base is again 16 and similarly for b
as
well so after we got R RGB values now we
can just write the scenario if the
length is equal to 7 because
in hexad decimal you can even write like
this this also same is the same or and
this also is the
same so both these lengths are it comes
out to be four and this comes out to be
seven so we need to write scenarios for
both the situations so we this is for
four and this is for
seven and once again the same formula
will be there
so let me paste the formula right here
so this will be the formula right here
for
that and at last we just need to return
the RGB
value we have a function
inside
RGB and here we can
actually let me paste
it so you can see that we
are simply returning this RGB value from
this function
so if you refresh the application now if
you change it now you will see that as
you are changing the value you are
getting hexa decimal and RGB value as
you are changing it the values are keep
on changing so you can select your
favorite color right
here so now for these copy to clipboard
we can simply
bind you can simply write a function uh
you can Define this function which is
copy to
clipboard can give it an ID as an
argument and
uh first of all you need to get the
reference of the text area so whatever
we are passing it in this function as a
ID
so we need to select everything using
the select
function and then we need to execute the
copy
command and then we need to Simply alert
the
user copy to clipboard
that's all so now we need to actually
call this function in the
HTML so we need to Simply bind this uh
to both these buttons copy buttons so we
can sit on click listener so when we
click this button we will call this
function copy to
clipboard and here you'll be
passing the ID which which
is RGB value whatever ID that you have
given to your input field you can see we
are passing this
value and similarly this
one this will be
for hex value
so if you test this application once
again uh just select your favorite color
and you will see you can copy the RGB
hexadecimal values so in this way you
can make this color code finder web app
in the browser using
JavaScript and apart from that you can
check out my website free mediat
tools.com where you have various
thousands of thousands of free tools
available so you can visit this website
I update tools on regular basis and
thank you very much for watching this
video please hit that like button
subscribe the channel and I will be
seeing you in the next one