Random Jokes Generator

Random Jokes Generator Javascript | Joke Generator Html Css Javascript

by

Random Jokes Generator Javascript | Joke Generator Html Css Javascript

Welcome to Code With Random blog. In this blog, we learn that how to create Random Jokes Generator. We use HTML & CSS and javascript for this Random Jokes Generator. Hope you enjoy our blog so let’s start with a basic HTML structure for Random Jokes Generator.

HTML code for Random Jokes Generator 

 <body>  
  <section>  
   <h1 class="title">Random Dad Jokes Generator</h1>  
   <div class="container">  
    <div class="joke">  
     <p></p>  
    </div>  
    <button>Get a Dad Joke</button>  
   </div>
There is all HTML code for the Random Jokes Generator. Now, you can see output without CSS, then we write CSS for our Random Jokes Generator.

 

CSS for Random Jokes Generator 

 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap");  
 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 html {  
  font-family: "Montserrat";  
  font-size: 10px;  
 }  
 body {  
  background-color: rgb(37, 38, 39);  
  color: white;  
 }  
 section {  
  min-height: 100vh;  
  width: 100%;  
  padding: 100px 0;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .title {  
  position: absolute;  
  top: 50px;  
  font-size: 3rem;  
  font-weight: 700;  
  text-align: center;  
 }  
 .container {  
  width: 90%;  
  max-width: 500px;  
  margin: 0 auto;  
  background-color: rgb(51, 55, 59);  
  border-radius: 8px;  
  padding: 3rem;  
  display: flex;  
  flex-direction: column;  
 }  
 .container p {  
  font-size: 2rem;  
  font-weight: 300;  
  line-height: 3rem;  
  text-align: justify;  
 }  
 button {  
  margin-top: 40px;  
  width: fit-content;  
  padding: 2rem;  
  font-size: 2rem;  
  background-color: rgb(25, 28, 29);  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
  align-self: flex-end;  
 }

Now we have completed our CSS section,  Here is our updated output CSS.

 

Now add javascript for the Random Jokes Generator!
Javascript for Random Jokes Generator

 const button = document.querySelector(".container button");  
 const jokeDiv = document.querySelector(".container .joke p");  
 document.addEventListener("DOMContentLoaded", getJock);  
 button.addEventListener("click", getJock);  
 async function getJock() {  
  const jokeData = await fetch("https://icanhazdadjoke.com/", {  
   headers: {  
    Accept: "application/json"  
   }  
  });  
  const jokeObj = await jokeData.json();  
  jokeDiv.innerHTML = jokeObj.joke;  
  console.log(jokeData);  
 }

Now we have completed our javascript section,  Here is our updated output with javascript. Hope you like Random Jokes Generator, you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

In this post, we learn how to create a Random Jokes Generator using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

0 thoughts on “Random Jokes Generator Javascript | Joke Generator Html Css Javascript”

Leave a Comment