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
|
<!--
SPDX-FileCopyrightText: 2020 Ethel Morgan
SPDX-License-Identifier: MIT
-->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>moji</title>
<style>
:root {
--background-color: hsl(0, 0%, 100%);
--callout-color: hsl(0, 0%, 90%);
--foreground-color: hsl(0, 0%, 0%);
--link-color: hsl(0, 0%, 50%);
--link-hover-color: hsl(205, 69%, 50%);
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: hsl(0, 0%, 12%);
--callout-color: hsl(0, 0%, 24%);
--foreground-color: hsl(0, 0%, 82%);
--link-color: hsl(0, 0%, 65%);
--link-hover-color: hsl(259, 49%, 65%);
}
}
body {
background: var( --background-color );
color: var( --foreground-color );
}
@media screen and ( min-width: 40em ) {
body {
margin: 0 auto;
padding: 10% 0;
max-width: 30em;
}
}
table {
table-layout: fixed;
width: 100%;
text-align: center;
}
button {
background-color: var( --link-hover-color );
color: var( --background-color );
border-radius: 5px;
border: solid 3px var( --link-hover-color );
}
</style>
</head>
<body>
<main>
<table id='moji'>
<tr>
<td>ᓚᘏᗢ</td>
<td>cat</td>
</tr>
<tr>
<td>¯\_(ツ)_/¯</td>
<td>shruggie</td>
</tr>
<tr>
<td>(╯°□°）╯︵ ┻━┻</td>
<td>table flip</td>
</tr>
<tr>
<td>→</td>
<td>right arrow</td>
</tr>
<tr>
<td>←</td>
<td>left arrow</td>
</tr>
</table>
</main>
<script type='module'>
document.querySelectorAll('#moji tr').forEach( tr => {
const text = tr.firstElementChild.textContent;
const button = document.createElement( 'button' );
button.textContent = 'copy';
button.addEventListener( 'click' , e => {
if ( navigator.clipboard ) {
navigator.clipboard.writeText( text );
} else {
const setClipboardText = e => {
e.preventDefault();
e.clipboardData.setData( 'text/plain', text );
};
document.addEventListener( 'copy', setClipboardText );
document.execCommand( 'copy' );
document.removeEventListener( 'copy', setClipboardText );
}
} );
const td = document.createElement( 'td' );
td.appendChild( button );
tr.appendChild( td );
} );
</script>
</body>
</html>
|
