Skip to content

Instantly share code, notes, and snippets.

@paragchirde

paragchirde/Random joke Api

Created June 25, 2020 07:15
Show Gist options
  • Save paragchirde/a9d26f066d29395c81939c29757d04e3 to your computer and use it in GitHub Desktop.
Save paragchirde/a9d26f066d29395c81939c29757d04e3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Random joke Api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>random joke</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style>
body {}
.box {
background: #4776E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8E54E9, #4776E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 10px;
width: auto;
height: auto;
padding: 20px;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 59% 76%, 0% 75%);
}
.btn-gradient {
background: #4776E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #8E54E9, #4776E6);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
}
.newFont {
font-family: 'Lobster', cursive;
font-size: 30px;
}
.demoFont {
font-weight: 900;
}
</style>
</head>
<body>
<div class="container">
<div class="mt-5">
<p class="text-center demoFont text-secondary">Random Joke of the day</p>
<center>
<button class="btn btn-gradient btn-sm mb-4" onclick="randomJoke()">Grab a new joke</button><br>
<div id="joke" class="box d-inline-block justify-content-center p-5 shadow-lg">
<div class="m-4" style="padding-bottom: 20px;;">
<div id="loading" style="color: #fff;display: none;">Getting a new Joke....</div>
<div>
<img src="https://avatars.dicebear.com/api/bottts/TEST.svg
" alt="" srcset="" style="width: 40px; height:40px; background:#fff;padding:2px; border-radius:50%;">
<p class="text-center text-white" id="setup"></p>
<p class="text-center newFont text-white" id="punchline"></p>
<span class="badge badge-warning" id="type"></span>
</div>
</div>
</div><br>
</center>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
var jokeArray = []
// randomJoke();
document.addEventListener('DOMContentLoaded', () => {
randomJoke()
})
function randomJoke() {
clearOldJoke();
document.getElementById("loading").style.display = 'block';
fetch('https://official-joke-api.appspot.com/random_joke')
.then(response => response.json())
.then(joke => {
console.log(joke)
jokeArray = joke
document.getElementById("loading").style.display = 'none';
document.getElementById('setup').innerHTML = jokeArray.setup
document.getElementById('punchline').innerHTML = jokeArray.punchline
document.getElementById('type').innerHTML = jokeArray.type
})
}
function clearOldJoke() {
document.getElementById('setup').innerHTML = ''
document.getElementById('punchline').innerHTML = ''
document.getElementById('type').innerHTML = ''
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment