ALERT: This is my next project on javascript. For any queries join our telegram group!
HTML and Js part
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joke.css">
<title>Random joke generator</title>
</head>
<body>
<div class="container">
<a class="github-corner" href="https://github.com/vkassingh" title="Fork me on GitHub" target="_blank">
<svg width="80" height="80" viewbox="0 0 250 250">
<title>Follow Vikas on GitHub</title>
<path d="M0 0h250v250" />
<path class="octo-arm" d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="white" style="transform-origin:130px 110px;" />
<path class="octo-body" d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="white" />
</svg>
</a>
<h1>Randome Joke 😆 generator</h1>
<div class= "joke_area" ><strong>joke will appear here!</strong></div><br>
<div class="button">
<button class= "btn new_joke_btn">New joke</button>
<a href="" class="btn tweet-btn" target="_blank" rel="noopener noreferrer">Tweet!!</a></div>
<script src="joke.js">
//select elements
//api requests
//funtion newjoke
// .joke-text
const jokearea = document.querySelector('.joke_area');
// .new-joke-btn
const newjokebutton = document.querySelector('.new_joke_btn');
const tweetBtn = document.querySelector('.tweet-btn');
newjokebutton.addEventListener('click', getjoke);
// immediately call getJoke()
getjoke();
function getjoke(){
//make an api request
fetch('https://icanhazdadjoke.com/',{
headers: {
'Accept': 'application/json'
}
}).then(function(response){
return response.json();
} ).then (function(data)
{
const joke= data.joke;
joke_area.innerText= joke;
/* make the tweetBtn(.tweet-btn link) work by setting href */
// create tweet link with joke
const tweetLink = `https://twitter.com/share?text=${joke}`;
// set the href
tweetBtn.setAttribute('href', tweetLink);
}).catch(function(error) {
// if some error occured
jokeText.innerText = 'Oops! Some error happened :(';
// removes the old href from .tweet-btn if found any
tweetBtn.removeAttribute('href');
// console log the error
console.log(error);
});
}
</script>
</body>
</html>
CSS Part
h1{
text-align: center;
color: black;
}
.tweet-btn {
background-color: white;
color: black;
border: black;
}
body {
background-color: black;
font-family: sans-serif;
text-align: center;
}
.container {
height: 600px;
width: 600px;
padding: 100px 100px 100px 100px; /* top-right bottom-left */
background-color: pink;
align-content: center;
margin-right: auto;
margin-left: auto;
}
.joke_area {
margin-bottom: 30px;
font-family: monospace;
}
github-corner:hover .octo-arm{
animation:octocat-wave .56s;
}
@keyframes octocat-wave{
0%, 100%{
transform:rotate(0);
}
20%, 60%{
transform:rotate(-20deg);
}
40%, 80%{
transform:rotate(10deg);
}
}
.github-corner {
animation:octocat-wave .56s;
position: absolute;
left: 948px;
top:12px;
}
Result:
