Source code:
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="front">
<h1>Tell me a joke!</h1>
<h3>Now , Refresh to get more jokes</h3>
<label id='joke'>hello</label>
</section>
<script src="script.js"></script>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover
page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
html, body {
height: 100%;
width: 100%;
text-align: center;
background-color: rgb(182, 123, 238);
}
#joke{
border: 2px ;
border-color: aqua;
contact: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color:rgb(5, 5, 46);
letter-spacing: 1px;
}
#front{
border:4px;
border-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
Javascript:
let num =Math.floor(Math.random() * 11)
let a=[`
What’s red and smells like blue paint?
Red paint!`,`What did the buffalo say when his kid went to college? Bison`,`
If April showers bring May flowers, what do May flowers bring? Pilgrims`,`
I tried to catch fog yesterday Mist`,`
What do you call a hippie's wife? Mississippi`,`
Two peanuts were walking down the street One was a-salted`,`
How can you tell it’s a dogwood tree? By the bark`,`
`]
document.getElementById("joke").innerHTML= a[num]
Output:
Conclusion:
Hope you like this "random jokes" game.
In this post, we learned how to create a random jokes by using html,css and javascript.
