Skip to content

Instantly share code, notes, and snippets.

@oze4

oze4/chucky#bootstrapped

Created February 27, 2019 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oze4/2988cd44431c53fe6ad06575cb3afa43 to your computer and use it in GitHub Desktop.
Save oze4/2988cd44431c53fe6ad06575cb3afa43 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
chucky#bootstrapped
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Chucky Norris</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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>
<div class='container' style='margin-top:40px'>
<div class="card">
<div class="card-body">
<h5 class='card-title'>Chucky Norris Jokes</h5>
<p class='card-text' id='joke-result'></p>
<button class='btn btn-primary' id='get-joke'>Click me for a Chuck Norris joke</button>
</div>
</div>
</div>
<script type='text/javascript'>
jQuery.fn.extend({
getJoke: function () {
jQuery.ajax('https://api.chucknorris.io/jokes/random', {
context: this,
method: "GET",
beforeSend: function () {
this.html('Loading...');
},
success: function (result) {
this.html('<strong>' + result['value'] + '</strong>');
},
error: function (err) {
let e =
'<div style="background-color:red;"><strong> Something went wrong! Chuck Norris is not pleased.. We encountered the following error:<p>' +
err.error + '</p></strong></div>'
this.html(e);
}
});
}
});
jQuery('#get-joke').on('click', function () {
jQuery('#joke-result').getJoke();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment