index.html

<!DOCTYPE html>
<html lang="en">
<head>

<title>Chuck Norris Jokes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="unholy-core.css">
  <link rel="stylesheet" href="unholy-utility.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <style>
   body{padding: 2%;}

  * > .fa-spin-show,
  *:hover > .fa-spin-hidden,
  *:focus > .fa-spin-hidden {
    display: none;
  }
  *:focus > .fa-spin-show,
  *:hover > .fa-spin-show {
    display: inline-block;
  }
  .tooltip {
  position: relative;
  display: inline-block;
}
  </style>
</head>

<body onload="getChuck()">

    <div class="container">

      <div class="row">
        <div class="box-medium">
          
          <a onclick="getChuck()" class="tooltip">
            <i style="font-size:48px;" class="fa fa-refresh fa-spin-hidden" alt="click to refresh"></i>
            <i style="font-size:48px;color: var(--unholy-main);" class="fa fa-refresh fa-spin fa-spin-show" alt="click to refresh"></i>
          </a>
          <h1 id="joke"> 
        </div>
        <div class="box-medium">
            <div class="wrapper">
                <img id="chuckImg" class="curved shadow" src="" alt="photo of Chuck Norris">
            </div>
        </div>
    </div>

</body>
</html>

<script>
function getChuck()
{
    getJoke();
    getImage();
}

function getJoke()
{
   fetch('https://api.icndb.com/jokes/random?exclude=[explicit]')
  .then(response => response.json())
  .then(json => document.getElementById("joke").innerHTML = json["value"]["joke"])
}

function getImage()
{
    document.getElementById("chuckImg").src = "images/".concat(Math.floor(Math.random() * 5) + 1 ).concat(".jpg");
}
</script>
