Skip to content

Commit 7718fc5

Browse files
committed
the internet needs rainbow text
1 parent 1cae4d2 commit 7718fc5

File tree

3 files changed

+77
-0
lines changed

3 files changed

+77
-0
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
*.swp
2+
.editorconfig

examples/rainbowize.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<title>Rainbows are great</title>
4+
<script type="text/javascript" src="../rainbow.js"></script>
5+
<script type="text/javascript">
6+
window.addEventListener('load', function() {
7+
makeRainbow();
8+
});
9+
</script>
10+
</head>
11+
<body style="background: #454545">
12+
<div style="margin: 60px auto; text-align: center">
13+
<h1>COVID-19 status update</h1>
14+
Everything is going to be alright
15+
</div>
16+
</body>

rainbow.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
function color_from_hue(hue) {
2+
var h = hue / 60;
3+
var c = 255;
4+
var x = (1 - Math.abs(h % 2 - 1)) * 255;
5+
var color;
6+
7+
var i = Math.floor(h);
8+
if (i == 0) color = rgb_to_hex(c, x, 0);
9+
else if (i == 1) color = rgb_to_hex(x, c, 0);
10+
else if (i == 2) color = rgb_to_hex(0, c, x);
11+
else if (i == 3) color = rgb_to_hex(0, x, c);
12+
else if (i == 4) color = rgb_to_hex(x, 0, c);
13+
else color = rgb_to_hex(c, 0, x);
14+
15+
return color;
16+
}
17+
18+
function rgb_to_hex(red, green, blue) {
19+
var h = ((red << 16) | (green << 8) | (blue)).toString(16);
20+
while (h.length < 6) h = '0' + h;
21+
return '#' + h;
22+
}
23+
24+
function rainbowize(text) {
25+
let hue = 0;
26+
let step = 0;
27+
28+
if (text.length > 0) {
29+
step = 360 / (text.length);
30+
}
31+
32+
let rainbowtext = document.createElement('span');
33+
for (let i = 0; i < text.length; i++) {
34+
if (text.charAt(i) === '\n') {
35+
continue;
36+
}
37+
const child = document.createElement('span');
38+
child.setAttribute('style', `color: ${color_from_hue(hue)}`);
39+
child.innerText = text.charAt(i);
40+
rainbowtext.appendChild(child);
41+
hue += step;
42+
}
43+
44+
return rainbowtext;
45+
}
46+
47+
function makeRainbow() {
48+
let n = null;
49+
const nodes = [];
50+
let walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
51+
while (n = walk.nextNode()) {
52+
nodes.push(n);
53+
}
54+
55+
for (let j = 0; j < nodes.length; j++) {
56+
const parent = nodes[j].parentNode
57+
parent.removeChild(nodes[j])
58+
parent.appendChild(rainbowize(nodes[j].textContent));
59+
}
60+
}

0 commit comments

Comments
 (0)