Sarimoko/Neko
Sarimoko
/
Neko
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 'www/index.html'

This commit is contained in:
Sarimoko 2022-02-24 07:20:53 +00:00
parent 841bf73fd2
commit 0321128f73
1 changed files with 75 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
www/index.html
View File

@ -1 +1,75 @@
The Neko <!doctype html>
<html>
<head>
<title>The Neko | Sarimoko's Cats</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
}
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
img {
height: 300px;
}
#fact {
margin: auto;
width: 60%;
text-align: center;
font-family: "Short Stack";
font-size: 20px;
}
#getFact {
padding: 10px;
border: unset;
background-color: pink;
font-weight: bold;
font-size: 20px;
border-radius: 15px;
font-family: "Short Stack";
cursor: pointer;
box-shadow: 0 0 15px rgba(0,0,0,0.25);
}
</style>
<body>
<div class="container">
<img src="http://38.media.tumblr.com/7cd9bc975faff277ea468ff3b213109f/tumblr_nray62QYpe1twzjm8o1_500.gif" alt="">
<div id="steve">
<h2 id="fact"></h2>
</div>
<button id="getFact">GET FACT</button>
</div>
</body>
<script>
document.getElementById("getFact").addEventListener("click", cat);
function cat() {
fetch("https://catfact.ninja/fact")
.then((res) => res.json())
.then((data) => {
document.getElementById("fact").innerHTML = data.fact;
});
}
</script>
</html>