-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (76 loc) · 4.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<title> JColor | Free JavaScript Color Picker </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type='text/css' href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<h1 > Jcolor </h1>
<h2> A Free Vanilla Javascript Color Picker </h2>
<button >
<a class="innerbtn" href="https://github.com/Hkataya/JColor" >
view on github
</a>
</button>
<nav>
<a href="#overview" > Overview</a>
<a href="#examples" > Examples</a>
<a href="#download" > Download</a>
</nav>
</div>
<div class="wrapper">
<div class="overview" id="overview" >
<h1> Overview </h1>
<p> Jcolor is a simple vanilla JavaScript color plugin with no dependencies. Simply download the jcolor.js file, include the script in your project, and you're good to go! </p>
</div>
<div class="syntax">
<h1>Syntax</h1>
<h2>color(arg1, arg2, arg3, arg4);</h2>
<ul>
<li> arg1: html element to trigger color picker and to color by default </li>
<li> (optional) arg2: html element to color </li>
<li> (optional) arg3: array of custom colors to be used (hex values) </li>
<li> (optional) arg4: callback function to retrieve the color code </li>
</ul>
</div>
<div class="examples" id="examples">
<h1>Basic Usage</h1>
<div class="example">
<button onclick="color(this)" > Click Me </button>
<div class="script">
<script src="https://gist.github.com/Hkataya/5fc1cd9c2d353e37d59ae1566c4cfba6.js"></script>
</div>
</div>
<h1> Picking Color for a specific element </h1>
<div class="example">
<div id="division"> this is a simple div tag </div>
<button onclick="color(this, document.getElementById('division'))" > Click Me </button>
<div class="script"><script src="https://gist.github.com/Hkataya/7b7282e0dcde8d5ff65661ceae8f85ca.js"></script> </div>
</div>
<h1> Add your own set of colors </h1>
<div class="example">
<button onclick="color(this,this, ['0496FF', 'FFBC42', 'D81159', '8F2D56', '006BA6', '04E762'])" > Click Me </button>
<div class="script"> <script src="https://gist.github.com/Hkataya/9e0a8553be870036537d996be3e41e57.js"></script></div>
</div>
<h1> Retrieve the value of the color selected </h1>
<div class="example">
<h4 > Color Code: </h4>
<h3 id="colorCode"> no color selected </h3>
<button onclick="color(this,this, undefined , function(code){document.getElementById('colorCode').innerHTML=code;
} )" > Click Me </button>
<div class="script"><script src="https://gist.github.com/Hkataya/7fc13cc58fb9662ee7cad3f6b339cb1a.js"></script></div>
</div>
</div>
<div class="download" id="download" >
<button class="btn"><a href="jcolor.js" download> <i class="fa fa-download"></i>Download </a></button>
</div>
</div>
<div class="footer">
<h1> Jcolor@2019 </h1>
</div>
<script src="jcolor.js"> </script>
</body>
</html>