-
Notifications
You must be signed in to change notification settings - Fork 1
/
meme-viewer.html
100 lines (79 loc) · 3.37 KB
/
meme-viewer.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
<html>
<head>
<title>Hacker Shack github.io</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.3/purify.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/meme-viewer.css">
</head>
<body>
<h1>Hacker Shack Chatbot Meme Viewer</h1>
<h2>How to use the meme command</h2>
<p>Select a meme template from the available ones below and construct one with a chat message by using the following commands.</p>
<ul>
<li>MEME_NAME = Meme's name found below the image</li>
<li>TOP_TEXT = The text on the top of the meme</li>
<li>BOTTOM_TEXT = The text on the bottom of the meme</li>
</ul>
<h5>Display a meme url in chat</h5>
<p><code>!meme | MEME_NAME | TOP_TEXT | BOTTOM_TEXT</code></p>
<h5>Display a meme on the livestream video</h5>
<p><code>!sm | MEME_NAME | TOP_TEXT | BOTTOM_TEXT</code></p>
<h3>Example</h3>
<p><code>!sm | success kid | forgets great meme idea | remembers it again</code></p>
<img src="https://i.imgflip.com/33ex6h.jpg" class="example-meme"/>
<br/><br/>
<h2 style="text-align: center;">Available Memes</h2>
<hr/>
<div class="alert alert-danger" role="alert" style="display: none" id="error-alert">
<strong>Error: </strong><span id="error-span"></span>
</div>
<div class="loader" id="meme-loader">Loading...</div>
<div id="memes" class="row"/>
</body>
<script type="text/javascript">
var pageLoadStart = new Date();
function showError(msg) {
alert = document.getElementById("error-alert")
msgSpan = document.getElementById("error-span")
msgSpan.textContent = msg
alert.style.display = "block"
console.log(msg);
}
function showMemes(data, loadingStart, loadingEnd) {
var deltaSeconds = (loadingEnd.getTime() - loadingStart.getTime()) / 1000;
// Set load minimum to 2 seconds
var extraLoadingTime = deltaSeconds < 2000 ? 2000 - deltaSeconds : 0
setTimeout(function () {
html = ""
for (var meme of data.data.memes) {
html += `<div class="col-4"><div class="meme-container"><div class="meme-content"><img src="${meme.url}" class="meme-img"/></div></div><h3 class="meme-name">${meme.name}</h3></div>`
}
document.getElementById("meme-loader").style.display = "none"
document.getElementById("memes").innerHTML = DOMPurify.sanitize(html)
}, extraLoadingTime);
}
fetch("https://api.imgflip.com/get_memes")
.then(
function(response) {
if (response.status !== 200) {
showError('Looks like there was a problem. Status Code: ' +
response.status)
return;
}
response.json().then(function(data) {
if (!data.success) {
showError('API sent bad response')
return;
}
var finishedLoading = new Date();
showMemes(data, pageLoadStart, finishedLoading)
});
}
)
.catch(function(err) {
showError(`Fetch error: ${err}`)
});
</script>
</html>