index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promies</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
body{
    height: 100vh;
    background-color: #d1d8e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    overflow: hidden;

}
    .container{
         width: 800px;
        max-width: 100%;
        text-align: center;
        padding: 50px 20px;
        background-color: white;
        border-radius: 50px;
       box-shadow: 13px 13px 62px floralwhite;
    
    
}

    
    #jokes{
       /* line-height: 40%; */
        margin: 50px auto;
        max-width: 600px;
        /* font-size: 30px; */
        text-align: center;
        letter-spacing: 3px;
        text-transform: uppercase;
    }
    h3{
        color: blue;
     transform: translateY(-30px);
    }
    #jokeBtn{
        color: yellow;
        background-color: black;
         border-radius: 20px ; 
        border: none;
        outline: none;
        padding: 12px 20px;
        transform: translateY(30px);
        box-shadow: 1px 6px 10px black;
        cursor: pointer;


    
    }
    </style>
</head>

<body>
    <div class="container">
<h3>Best Jokes</h3>
        <div id="jokes"> loading...</div>
        <button id="jokeBtn">Next</button>
    </div>

    <script>
        const Jokes = document.getElementById('jokes');
        const Btn = document.querySelector('#jokeBtn');

let generate = ()=>{
    const setHeader = {
        headers :{
            accept :" application/JSON"
        }
    }
    fetch('https://icanhazdadjoke.com',setHeader)
    .then((res)=>res.json())
    .then((data)=>{
        jokes.innerHTML = data.joke;
    }).catch((Error)=>{
console.log("Error")
    })
}

 Btn.addEventListener('click',generate);
// generate();
    </script>


</body>

</html>