-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
77 lines (75 loc) · 2.32 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<script>
var hex_keys = {
"0000":"0","0001":"1","0010":"2","0011":"3","0100":"4","0101":"5","0110":"6",
"0111":"7","1000":"8","1001":"9","1010":"A","1011":"B","1100":"C","1101":"D",
"1110":"E","1111":"F"
}
var hex_groups;
var extra;
function wordHex() {
clear()
// console.log(document.getElementsByName("input").value);
var word = document.getElementById("input").value;
// console.log(word);
// console.log("Hello World");
var binary = "";
for (letter in word) {
var b_letter = word[letter].charCodeAt(0).toString(2);
while (b_letter.length < 8){
b_letter = "0" + b_letter;
}
binary += b_letter
// console.log(b_letter);
}
// console.log(binary);
hex_groups = binary.match(/.{1,4}/g)
// console.log(hex_groups);
var hex = "";
for (group in hex_groups) {
hex += hex_keys[hex_groups[group]];
}
// console.log(hex);
hex_groups = hex.match(/.{1,6}/g);
console.log(hex_groups)
paint();
}
function paint(){
var width = document.getElementById('color-container').clientWidth;
var height = document.getElementById('color-container').offsetHeight;
console.log(height);
var element_size = width / hex_groups.length
for (color in hex_groups) {
var name = 'test' + color;
var div = document.createElement("div")
div.setAttribute('id',name)
div.style.float = "left";
div.style.width = element_size+"px";
div.style.height = height+"px";
if (hex_groups[color].length == 6)
div.style.background = "#" + hex_groups[color];
else
div.innerHTML = "<h1 style='margin: 0; position: absolute; top: 50%; left: 50%;'>+"+hex_groups[color]+"</h1>";
document.getElementById('color-container').appendChild(div)
console.log(element_size);
}
}
function clear(){
const myNode = document.getElementById("color-container");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
}
</script>
<title>Wordhex test</title>
</head>
<body>
<p>Enter a word</p>
<input type="text" id="input" value="">
<button type="button" name="button" onclick="wordHex()">Click me</button>
<div id="color-container" style="margin-left:100px; margin-right:100px; width: auto; height: 500px">
</div>
</body>
</html>