Skip to content

Commit 44e63dc

Browse files
NaeuCodeNaeuCode
committed
Adding Day 35
1 parent 496ea81 commit 44e63dc

File tree

6 files changed

+171
-0
lines changed

6 files changed

+171
-0
lines changed

‎Day #35 - Random Joke Generator/35-Screenshot.png

299 KB
Loading

‎Day #35 - Random Joke Generator/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Day #35
2+
3+
### Parallax Slider
4+
5+
In this tutorial ([Open in Youtube](https://youtu.be/reurfcC65_s)), I am gonna showing to you how to code a Random Joke Generator with javascript.
6+
7+
# Screenshot
8+
9+
Here we have project screenshot :
10+
11+
![screenshot](35-Screenshot.png)

‎Day #35 - Random Joke Generator/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
10+
/>
11+
<link rel="stylesheet" href="style.css" />
12+
<title>Day #35 - Random Joke Generator | NaeuCode</title>
13+
</head>
14+
<body>
15+
<div class="container">
16+
<h1 class="emoji">&#x1f601;</h1>
17+
<p class="joke"></p>
18+
19+
<div class="btns">
20+
<div class="refresh">
21+
<i class="fa-solid fa-arrow-right-rotate"></i>
22+
</div>
23+
24+
<div class="copy">
25+
<i class="fa-solid fa-copy"></i>
26+
<span>Copied!</span>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Day #35 - Random Joke Generator/script.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
3+
let joke = document.querySelector(".joke");
4+
let emoji = document.querySelector(".emoji");
5+
let getJokeBtn = document.querySelector(".refresh");
6+
let copyBtn = document.querySelector(".copy");
7+
let copyIcon = document.querySelector(".copy i");
8+
let copyText = document.querySelector(".copy span");
9+
10+
const url =
11+
"https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";
12+
13+
let getJoke = () => {
14+
joke.innerHTML = "loading...";
15+
fetch(url)
16+
.then((res) => res.json())
17+
.then((data) => {
18+
joke.innerHTML = data.joke;
19+
});
20+
getEmoji();
21+
};
22+
23+
let getEmoji = () => {
24+
let emojis = ["&#x1f600;", "&#x1f601;", "&#x1f606;", "&#x1f602;"];
25+
let randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
26+
emoji.innerHTML = randomEmoji;
27+
};
28+
29+
let copyJoke = () => {
30+
navigator.clipboard.writeText(joke.textContent);
31+
copyIcon.style.display = "none";
32+
copyText.style.display = "block";
33+
setTimeout(() => {
34+
copyIcon.style.display = "block";
35+
copyText.style.display = "none";
36+
}, 500);
37+
};
38+
39+
copyBtn.addEventListener("click", copyJoke);
40+
getJokeBtn.addEventListener("click", getJoke);
41+
getEmoji();
42+
getJoke();

‎Day #35 - Random Joke Generator/style.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
3+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
4+
5+
* {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
}
10+
11+
body {
12+
background: #013a33;
13+
font-family: "Roboto", sans-serif;
14+
}
15+
16+
.container {
17+
padding: 25px;
18+
width: 350px;
19+
background: #212020;
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
transform: translate(-50%, -50%);
24+
border-radius: 17px;
25+
}
26+
27+
.emoji {
28+
text-align: center;
29+
font-size: 70px;
30+
margin-top: 5px;
31+
text-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
32+
}
33+
34+
.joke {
35+
color: #fff;
36+
text-align: center;
37+
margin-top: 10px;
38+
font-size: 18px;
39+
}
40+
41+
.btns {
42+
height: 95px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
math-depth: 5px;
47+
}
48+
49+
.btns div {
50+
height: 55px;
51+
width: 55px;
52+
background: #000;
53+
color: #fff;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
border-radius: 100%;
58+
margin-left: 20px;
59+
cursor: pointer;
60+
margin-top: 10px;
61+
font-size: 18px;
62+
position: relative;
63+
left: -10px;
64+
}
65+
66+
.btns div:hover {
67+
background: #025a50;
68+
color: #000;
69+
transition: all 0.3s ease;
70+
}
71+
72+
.btns .copy span {
73+
position: absolute;
74+
color: #000;
75+
font-style: italic;
76+
font-size: 8px;
77+
display: none;
78+
transition: all 0.2s ease;
79+
}
80+
81+
::selection {
82+
background: #026b5f;
83+
color: #000;
84+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,4 @@ Here we have list of projects:
4545
32. BMI Calculator APP
4646
33. Simon Game App
4747
34. Parallax Slider
48+
35. Random Joke Generator

0 commit comments

Comments
 (0)