-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (119 loc) · 4.59 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IconScout 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.picker {
padding: 2px;
display: block;
border: none;
border-bottom: 1px solid #ccc;
width: 80%;
height: 50px;
}
.box {
display: block;
/*background-color: red;*/
width: 120px;
height: 120px;
}
.box p {
margin-top: 50px;
font-size: 10px;
padding: 2px;
background-color: #fff;
color: #656565;
font-weight: bold;
}
</style>
</head>
<body>
<div class="w3-row w3-border">
<div class="w3-container w3-half">
<div class="w3-container">
<div class="w3-container w3-margin">
<h3>Pick Colors</h3>
</div>
<form class="w3-container" id="pickForm" onsubmit="event.preventDefault(); getShades();">
<P>
<label class="w3-margin">Select Background</label>
<input class="w3-input picker w3-margin" type="color" name="background" value="#cccccc">
</P>
<p>
<label class="w3-margin">Select Foreground</label>
<input class="w3-input picker w3-margin" type="color" name="foreground" value="#cccccc">
</p>
<p>
<label class="w3-margin">Shades in % <small> (Seperate by coma)</small></label>
<input class="w3-input picker w3-margin" placeholder="25,50,75" type="text" name="opacity">
</p>
<button type="submit" class="w3-margin w3-btn w3-blue w3-round">Get Shades</button>
<br />
<br />
</form>
</div>
</div>
<div class="w3-container w3-half">
<div class="w3-container w3-margin">
<h3>Output Shades</h3>
</div>
<div class="w3-row w3-center w3-padding" id="outputDiv">
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script>
function getShades() {
let myForm = document.getElementById("pickForm");
let background = myForm.background.value;
let foreground = myForm.foreground.value;
let opacity = (myForm.opacity.value).split(',');
if (!(background && foreground && myForm.opacity.value)) {
alert('Insert required fields')
return false
}
let output = [];
for (var i = 0; i < opacity.length; i++) {
if (opacity[i] && (Number(opacity[i]) >= 0)) {
opacity[i] = opacity[i] < 100 ? opacity[i] : 100;
let opacityValue = opacity[i] / 100;
output[opacity[i]] = MyShade.get(background, foreground, opacityValue);
}
}
console.log(output);
updateShade(output);
}
function updateShade(output) {
let container = document.getElementById("outputDiv");
//removing old child
let child = container.lastElementChild;
while (child) {
container.removeChild(child);
child = container.lastElementChild;
}
for (var i in output) {
let firstDiv = document.createElement("div");
firstDiv.className = 'w3-third w3-round w3-padding';
let boxDiv = document.createElement("div");
let codeDiv = document.createElement("div");
boxDiv.className = 'box w3-container w3-round';
codeDiv.className = 'w3-left w3-small';
boxDiv.style.backgroundColor = output[i][0];
let boxDivP = document.createElement("p");
let codeDivP = document.createElement("p");
boxDivP.className = 'w3-card w3-round';
boxDivP.appendChild(document.createTextNode(i+ '%'));
codeDivP.innerHTML = (output[i][0] + '<br />' + output[i][1]);
boxDiv.appendChild(boxDivP);
codeDiv.appendChild(codeDivP);
firstDiv.appendChild(boxDiv);
firstDiv.appendChild(codeDiv);
container.appendChild(firstDiv);
}
}
</script>
</body>
</html>