Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="box">

    
<div id="joke"></div>
</div>
<img id="father" src="https://cdn4.iconfinder.com/data/icons/family-cartoon/512/g10484-512.png"></img>

<img id="foolther" src="data:image/png;base64,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"> </img>


<div  id="button" onclick="loadjoke()" data-hover="Listen to me ^_^">I have a joke </div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Notable&display=swap');

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: system-ui;
  font-size: 125%;
  background-image:url("https://www.photoshopsc.com/upimg/allimgs/080524/0413030.jpg");
  background-repeat:repeat;
  
}
#joke {
  padding: 40px;
  font-family: 'Notable', sans-serif;
  font-size:20px;
  text-align:center;
  justify-content:cennter;
  
}

#button{
  font-size:30px;
  color:#FFF;
  padding:20px;
  background-color:#F00;
  margin:10px;
  border: 3px solid red;
  border-radius:33px;
  text-shadow:5px 5px 10px blue;
  
}

#button:hover{
  background-color:gray;
  border-color:gray;
  border-radius:50%;
  transition:0.3s linear;
  
}

#button:hover:after{
  content: attr(data-hover)
}




#box{
  display:none;
  background:white;
  padding:12px;
  margin:0px;
  border:7px solid #000;
  border-radius:3px;
  border-type:inset;
  position:relative;
  left:30px;
  
}

#father{
  position :absolute;
  top : 100px;
  left: 40px;
  z-index:999;
}

#foolther{
  display:none;
  position :absolute;
  top : 200px;
  left: 150px;
  z-index:999;
}
              
            
!

JS

              
                function loadjoke(){
const query = `
  query { 
    joke {
      joke
      permalink
    }
  }
`;

fetch(`https://icanhazdadjoke.com/graphql?query=${query}`)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    const { joke } = data.data.joke;
    document.querySelector("#joke").innerHTML = `
      <div>${joke}</div>
    `;
  });

  
  document.getElementById("box").style.display="block";
  document.getElementById("father").style.display="none";
  document.getElementById("foolther").style.display="block";
}



              
            
!
999px

Console