-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (88 loc) · 3.3 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
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
const emojis = [
['👁', '🗨'], ['👩', '🔬'], ['🏄', '♀'], ['👩', '🔧'], ['🤾', '♂️'], ['👨', '❤️', '💋', '👨'],
['👨', '👩', '👦', '👦'], ['👨', '🎨'], ['👨', '🦰'],['👩','🏫'],['👨','🎤'],['👩','🚒']];
function copyToClipboard(elementId) {
var range = document.createRange();
range.selectNode(document.getElementById(elementId));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
}
function setEmojis(emojis) {
reset();
var emoji = document.getElementById("emoji");
for (var i = 0; i < emojis.length; i++) {
emoji.value = emojis[i];
add();
}
}
function add() {
var emojis = document.getElementById("emojis");
var result = document.getElementById("result");
var emoji = document.getElementById("emoji");
emojis.innerHTML += (emojis.innerHTML.length > 0 ? "+" : "") + emoji.value;
result.innerHTML += (result.innerHTML.length > 0 ? "‍" : "") + emoji.value;
emoji.value = '';
}
function reset() {
document.getElementById("emojis").innerHTML = "";
document.getElementById("result").innerHTML = "";
}
function init() {
var sequenceArray = [];
try {
sequenceArray = JSON.parse(decodeURI(location.hash.substring("#".length)));
} catch (e) {
sequenceArray = ['👩', '🔧'];
}
setEmojis(sequenceArray);
document.getElementById("emoji").focus();
}
window.onhashchange = init;
</script>
<style>
* {
font-family: arial;
}
div {
display: inline;
font-size: 100px;
}
input {
font-size: 100px;
}
.big {
font-size: 100px;
}
#emojis::after {
content: "=";
}
</style>
</head>
<body onload="init();">
<h1>Zero Width Joiner Emoji Fun</h1>
Copy & paste emoji by emoji here:<br/>
<input id="emoji" type="text" onkeyup="add();" size="1" /><br /><br/>
<div id="emojis"></div>
<div id="result"></div> <input type="button" value="Copy Emoji" onclick="copyToClipboard('result')" /><br />
<input type="button" value="Restart" onclick="reset();" /><br /><br/>
Examples:<br/>
<script type="text/javascript">
for (var i = 0; i < emojis.length; i++) {
var emojisArrayString = "[\"" + emojis[i].join("\",\"") + "\"]";
document.write('<a href="#' + encodeURI(emojisArrayString) + '">' + emojis[i].join("") + '</a> | ');
}
</script>
<br /><br />
Zero Width Joiner (ZWJ) <a href="https://en.wikipedia.org/wiki/Zero-width_joiner" target="_blank">Wikipedia</a><br />
Emoji ZWJ Sequences <a href="https://emojipedia.org/emoji-zwj-sequences/" target="_blank">Emojipedia</a><br /><br />
<input type="button" value="Copy Zero Width Joiner" onclick="copyToClipboard('zwj')" /><br />
<div id="zwj">‍</div>
</body>
</html>