Tell-Me-a-Joke.github.io/index.html at main · CodingWithAmit-07/Tell-Me-a-Joke.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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="/Tell_me_joke.css" />
    <title>Tell Me A Joke (16+)</title>
    <style>
    body{
        background-color: rgb(219, 192, 160);
    }
      #res {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        border-radius: 5px;
        font-size: 40px;
        padding: 15px;
        margin: auto;
        background-color: aqua;
        width: 80%;
        text-align: center;
        position: relative;
        bottom: -300px;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
      }

      #res:hover
      {
        background-color: rgb(213, 33, 219);
      }

      #test {
       position: relative;
       top: 280px;
       display: flex;
       justify-content: center;
       align-items: center;
       margin: auto;
       text-align: center;
       font-size: 50px;
       font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
       background-color: rgb(255, 255, 5);
       border-radius: 10px;
       width: 40%;

      }
      #test:hover{
        background-color: rgb(255, 153, 0);
      }

      @media screen and (max-width:549px) {
        #test {
          font-size: 35px;
          width: 90%;
        }

        #res {
          font-size: larger;
          width: 90%;
        }
      }
    </style>
  </head>
  <body>
    <button id="test" onclick="jokefunc()">Tell Me A Jokes</button>
    <p id="res">Joke Here</p>

    <script>
      function jokefunc() {
        jokess = [
          `How do all the oceans say hello to each other? They wave!`,

          `What did one wall say to the other wall? Ill meet you at the corner!`,

          `What do you call a bear with no teeth? A gummy bear!`,

          `What do you call cheese that isnt yours? Nacho cheese!`,

          `Where do cows go for entertainment? To the moo-vies!`,

          `Knock, knock. Whos there? Cows go. Cows go who? No, cows go MOO!`,

          `What do you call a cow with no legs? Ground beef!`,

          `What do you call a cow with two legs? Lean meat!`,

          `What do you call a pig that knows karate? A pork chop!`,

          `Why are ghosts bad liars? Because you can see right through them!`,

          `What animal needs to wear a wig? A bald eagle!`,

          `What do you call a fly without wings? A walk!`,

          `Knock knock. Whos there? A little old lady? A little old lady who? I didnt know you could yodel!`,

          `Why do bees have sticky hair? Because they use honey combs!`,

          `What do you call an alligator in a vest? An investigator!`,

          `Why cant you give Elsa a balloon? Because she will let it go!`,

          `What do you get when you cross a snowman with a vampire Frostbite!`,

          `What has four wheels and flies? A garbage truck!`,

          `Why did the man run around his bed? Because he was trying to catch up on his sleep!`,

          `Why did the math book look so sad? Because it had so many problems!`,

          `Can a kangaroo jump higher than the Empire State Building? Of course!  The Empire State Building cant jump!`,

          `If April showers bring Mayflowers, what do Mayflowers bring?Pilgrims!`,

          `What do you call a sleeping bull? A bulldozer!`,

          `What did the zero say to the eight? Nice belt!`,

          `Why do sharks swim in saltwater? Because pepper water makes them sneeze!`,

          `Where do you find a dog with no legs? Right where you left him!`,

          `Where do fish keep their money? In the river bank!`,

          `Why did the gum cross the road? It was stuck to the chickens foot!`,

          `What is brown and sticky? A stick!`,

          `Why did the picture go to jail? It was framed!`,

          `How do you know if theres an elephant under your bed? Your head hits the ceiling!`,

          `Why are elephants so wrinkled? Because they take too long to iron!`,

          `How do you keep an elephant from charging? Take away her credit card!`,

          `Why did the elephant paint himself different colors? So he could hide in the crayon box!`,

          `How can you tell if an elephant has been in your refrigerator?By the footprints in the butter!`,

          `What is the difference between elephants and grapes? Grapes are purple.`,

          `What did Tarzan say when he saw the elephants coming? “Here come the elephants!”`,

          `What did Jane say when she saw the elephants coming? “Here come the grapes!” (She was colorblind.)`,

          `Why did the chicken cross the playground? To get to the other slide!`,

          `I lost some weight last month. But now it found me again.`,
        ];
        const random = Math.floor(Math.random() * jokess.length);
        document.getElementById("res").innerHTML = jokess[random];
      }


    </script>
  </body>
</html>