forked from ncskier/myapp
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
67 lines (60 loc) · 1.68 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyApp</title>
<link rel="shortcut icon" type="image/png" href="https://raw.githubusercontent.com/tektoncd/dashboard/master/src/images/favicon.png" />
</head>
<body>
<button id="getCatImageButton" class="center" type="button">Click Me! 🐱</button>
<div id="catImageContainer">
<img id="catImage" class="center" alt="A random image of a cat." />
</div>
<p class="footnote">Images are from <a href="https://thecatapi.com/" rel="noopener noreferrer" target="_blank">TheCatAPI</a>.</p>
</body>
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
#getCatImageButton {
margin-top: 1em;
}
#catImageContainer {
margin-top: 1em;
}
#catImage {
max-height: 500px;
max-width: 100%;
display: block;
}
.footnote {
position: absolute;
left: 1em;
bottom: 1em;
color: gray;
}
</style>
<script>
document.getElementById('getCatImageButton').addEventListener('click', requestCatImage);
requestCatImage();
function requestCatImage() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
// Process the server response here.
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var response = JSON.parse(httpRequest.responseText);
document.getElementById('catImage').src = response[0].url;
} else {
alert('There was a problem with the request')
}
}
};
// Make request
httpRequest.open('GET', 'https://api.thecatapi.com/v1/images/search', true);
httpRequest.send();
}
</script>
</html>