Random Jokes Generator javascript | Joke Generator html,css,javascript

 Random Jokes Generator javascript | Joke Generator html,css,javascript





Random Jokes Generator javascript | Joke Generator html,css,javascript



Welcome🎉 to Code With Random blog. In this blog, we learn that how we 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.

Random Jokes Generator javascript | Joke Generator html,css,javascript

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.

Random Jokes Generator javascript | Joke Generator html,css,javascript

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 javascriptHope you like Random Jokes Generator, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕



Random Jokes Generator javascript | Joke Generator html,css,javascript

Random Jokes Generator javascript | Joke Generator html,css,javascript



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 

Post a Comment

Previous Post Next Post