canibalism420
Silliness Specialist
LEVEL 1
300 XP
How to Create a Color Picker in HTML using jQuery
Introduction
In this tutorial we will create a How to Create Color Picker in HTML using jQuery. This tutorial purpose is to give you a way of change your background color dynamically. This will thoroughly take the basic parts of creating the color picker app with the help of jQuery . I will provide a sample program to show the actual coding of this tutorial. So Let's do the coding.
Before we get started:
First you have to download the jQuery plugin.
Here is the link for the jQuery that i used in this tutorial https://jquery.com/.
Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will only display the interface of the background and html forms. To create this simply copy and write it into your text editor, then save it as index.html.
Creating JavaScript Function
This is where the main function of the application is. This code will allow you to calibrate the color of the background dynamically. To do this just copy and write these block of codes inside the text editor and save it as script.js.
In the given code we first call the basic jQuery ready event to signal that the DOM of the page is now ready to be use. And then we bind all the textboxes using the jQuery method and use the change() function, this function can allow you to manipulate an element when a bind element has been change. To change the background color we just simply append the value of the textboxes into the css color value.
Output:
The How to Create Color Picker in HTML using jQuery source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Create Color Picker in HTML using jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
Introduction
In this tutorial we will create a How to Create Color Picker in HTML using jQuery. This tutorial purpose is to give you a way of change your background color dynamically. This will thoroughly take the basic parts of creating the color picker app with the help of jQuery . I will provide a sample program to show the actual coding of this tutorial. So Let's do the coding.
Before we get started:
First you have to download the jQuery plugin.
Here is the link for the jQuery that i used in this tutorial https://jquery.com/.
Lastly, this is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will only display the interface of the background and html forms. To create this simply copy and write it into your text editor, then save it as index.html.
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap.css"
/
>
- <meta
charset
=
"UTF-8"
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
/
>
- </
head
>
- <body
>
- <nav
class
=
"navbar navbar-default"
>
- <div
class
=
"container-fluid"
>
- <div
class
=
"navbar-header"
>
- <a
href
=
"https://sourcecodester.com"
class
=
"navbar-brand"
>
Sourcecodester</
a
>
- </
div
>
- </
div
>
- </
nav
>
- <div
class
=
"row"
>
- <div
class
=
"col-md-3"
></
div
>
- <div
class
=
"col-md-6 well"
>
- <h3
class
=
"text-primary"
>
How to Create Color Picker in HTML</
h3
>
- <hr
style
=
"border-top:1px dotted #000;"
/
>
- <div
class
=
"col-md-3"
>
- <div
class
=
"col-md-12"
>
- <div
class
=
"form-inline"
style
=
"text-align:center;"
>
- <label
>
R</
label
>
- <input
type
=
"number"
class
=
"form-control"
value
=
"0"
min
=
"0"
max
=
"255"
size
=
"4"
id
=
"txt_red"
/
>
- <label
>
G</
label
>
- <input
type
=
"number"
class
=
"form-control"
value
=
"0"
min
=
"0"
max
=
"255"
size
=
"4"
id
=
"txt_green"
/
>
- <label
>
B</
label
>
- <input
type
=
"number"
class
=
"form-control"
value
=
"0"
min
=
"0"
max
=
"255"
size
=
"4"
id
=
"txt_blue"
/
>
- </
div
>
- </
div
>
- </
div
>
- <div
class
=
"col-md-6"
>
- <div
class
=
"col-md-12"
style
=
"border:1px solid #000; height:250px; transition: background 100ms;"
id
=
"result"
></
div
>
- <br
style
=
"clear:both;"
/
>
- <br
/
>
- </
div
>
- </
div
>
- </
div
>
- </
body
>
- <script
src
=
"jquery-3.1.1.js"
></
script
>
- <script
src
=
"script.js"
></
script
>
- </
html
>
Creating JavaScript Function
This is where the main function of the application is. This code will allow you to calibrate the color of the background dynamically. To do this just copy and write these block of codes inside the text editor and save it as script.js.
- $(
document)
.ready
(
function
(
)
{
- $input_text =
$(
'input[type="number"]'
)
;
- $input_text.change
(
function
(
)
{
- $txt_red =
$(
'#txt_red'
)
.val
(
)
;
- $(
'#red'
)
.val
(
$txt_red)
;
- $txt_green =
$(
'#txt_green'
)
.val
(
)
;
- $(
'#green'
)
.val
(
$txt_green)
;
- $txt_blue =
$(
'#txt_blue'
)
.val
(
)
;
- $(
'#blue'
)
.val
(
$txt_blue)
;
- $(
'#result'
)
.css
(
'background'
,
'rgb('
+
$txt_red +
', '
+
$txt_green +
', '
+
$txt_blue +
')'
)
;
- $rgb =
'rgb('
+
$txt_red +
', '
+
$txt_green +
', '
+
$txt_blue +
')'
;
- $hex =
rgb2hex(
)
;
- $(
'#hex'
)
.val
(
$hex)
;
- }
)
;
- }
)
;
In the given code we first call the basic jQuery ready event to signal that the DOM of the page is now ready to be use. And then we bind all the textboxes using the jQuery method and use the change() function, this function can allow you to manipulate an element when a bind element has been change. To change the background color we just simply append the value of the textboxes into the css color value.
Output:
The How to Create Color Picker in HTML using jQuery source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Create Color Picker in HTML using jQuery. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
You must upgrade your account or reply in the thread to view hidden text.