├── README.md
├── css
└── style.css
├── index.html
└── script
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | #Random Dad Jokes Generator
2 |
3 | In this project I used icanhazdadjoke API to fetch random dad jokes and
4 | showed it in the frontend.
5 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, sans-serif;
3 | display: flex;
4 | justify-content: center;
5 | align-items: center;
6 | height: 100vh;
7 | background-color: #f0f0f0;
8 | margin: 0;
9 | flex-direction: column;
10 | }
11 |
12 | .container {
13 | text-align: center;
14 | }
15 |
16 | h1 {
17 | color: #333;
18 | margin-bottom: 20px;
19 | }
20 |
21 | #mainBox {
22 | margin: 20px 0;
23 | padding: 20px;
24 | width: 80%;
25 | max-width: 500px;
26 | min-height: 100px;
27 | background-color: #fff;
28 | border: 2px solid #ccc;
29 | border-radius: 10px;
30 | display: flex;
31 | justify-content: center;
32 | align-items: center;
33 | font-size: 1.2em;
34 | color: #555;
35 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
36 | }
37 |
38 | #button {
39 | border-radius: 5px;
40 | color: white;
41 | font-size: large;
42 | text-align: center;
43 | background-color: #007bff;
44 | height: 50px;
45 | width: 150px;
46 | cursor: pointer;
47 | border: none;
48 | transition: background-color 0.3s;
49 | }
50 |
51 | #button:hover {
52 | background-color: #0056b3;
53 | }
54 |
55 | @media (max-width: 768px) {
56 | body {
57 | flex-direction: column;
58 | }
59 | .container {
60 | text-align: center;
61 | }
62 |
63 | #mainBox {
64 | margin-left: 18px;
65 | width: 80%;
66 | padding: 10px;
67 | }
68 |
69 | #button {
70 | width: 120px;
71 | }
72 | }
73 | h1 {
74 | font-size: 1.5em;
75 | }
76 |
77 | #button {
78 | height: 40px;
79 | width: 100px;
80 | font-size: medium;
81 | }
82 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Joke Generator
7 |
8 |
9 |
10 |
11 |
Click to Generate random DAD Jokes 😂
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/script/index.js:
--------------------------------------------------------------------------------
1 | let box = document.getElementById("mainBox");
2 | let btn = document.getElementById("button");
3 |
4 | btn.addEventListener("click", () => {
5 | getData();
6 | });
7 | async function getData() {
8 | let response = await fetch("https://icanhazdadjoke.com/", {
9 | headers: {
10 | Accept: "application/json",
11 | },
12 | });
13 | let data = await response.json();
14 | box.style.fontSize = "20px";
15 | box.innerText = data.joke;
16 | }
17 |
--------------------------------------------------------------------------------