joke.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">
<link rel="stylesheet" href="joke.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mulish:ital@1&display=swap" rel="stylesheet">
<title>Random Jokes</title>
</head>
<body>
<div class="container">
<div class="box">
<h1 id = "ele">Click to get new joke! </h1>
<button id="joke" class="joke" onclick="getNewJoke()"> Next Joke</button>
</div>
</div>
<script src="joke.js"></script>
</body>
</html>
joke.js
let btn = document.getElementById("btn");
let ele = document.querySelector('#ele')
const getNewJoke = async () => {
try {
let response = await fetch(`https://icanhazdadjoke.com/`, {
headers: {
Accept: "application/json"
}
})
let data = await response.json()
let HTML = `${data.joke}`
ele.innerHTML = HTML
}
catch (error) {
console.log(`the error is ${error}`);
}
}
joke.css:
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Mulish', sans-serif;
}
.container {
min-height: 100vh;
display: flex;
background-color: rgb(50, 50, 92);
align-items: center;
justify-content: center;
}
.box{
display: flex;
flex-direction: column;
border: 2px solid rgb(175, 166, 166);
margin: 40px;
padding: 30px 100px;
background-color: rgb(255, 255, 255);
}
#joke {
margin: 30px 20px 30px 20px;
padding: 10px 10px;
color: white;
border: 1px solid wheat;
border-radius: 20px;
font-size: medium;
background-color:rgb(50, 50, 92) ;
}
0 Comments