Bootstrap

How to Create Cat Fact application Using Free Api

Hello friends in this article i am gone to share How to Create Cat Fact application Using Free Api with you..
How to Create Cat Fact application Using Free Api
Visit This Link to See Demo 
To Build This Type of application You Need Some Basic knowledge just Like 
  1. HTML
  2. CSS,
  3. JavaScript
 
Free Cat Fact Api link– Copy this link
 
Follow My Steps to Create beautiful application like that

 

 

Step 1) First Create basic Html Template like that
<!DOCTYPE html>
<html>
    <head>
    <title>Page Title</title>
</head>
<body>
    <h1>Cat Fact </h1>
     <p>This is a paragraph.</p>
</body>
</html>
 
 
Step 2) Use Some Basic CDN links to Make Page More attractive
in This i Use 2 CDN links
  • Bootstrap 5
  • Google Fonts
 

Copy this CDN links and Put on Head tag. / Bootstrap 5

 

<!-- Bootstrap CSS -->     
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
—————————————————————————————————————————————-</span >
 

Copy this CDN links and Put on Head tag. / Google Fonts

<!-- Google Fonts CSS --> 
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap" rel="stylesheet"> 

Now Our Html Page Look Cool

Step 3) Replace all the Code inside body from this Code..
In This Code i Created a Simple Card..
<div class="container shadow mt-5 p-2 rounded bg-white border">
<div class="d-flex justify-content-between">
<div class="">
<p class="mt-3 ms-3 datep" id="date">Date</p>
</div>
<div class=""> 
<button type="button" class="btn btn-primary btn-sm m-2 p-2 shadow-sm" onclick="fetchText()"> Refresh </button> 
</div>
</div>
<h1 class="text-center mb-3">Cat Facts</h1>
<div class="d-flex justify-content-between p-4">
<div class="p-0 ms-1"> <img id="myImg" src="https://static.wikia.nocookie.net/p__/images/0/06/1618209642054.png/revision/latest/scale-to-width-down/350?cb=20210412064150&path-prefix=protagonist"/> </div>
<div class="p-0 ms-3">
<p id="demo" class="b"> </p>
</div>
</div>
</div>
<p id="error"> </p>

Now Our Html Page Look Cool
Step 4) Add This Css Code Head Tag.
This Code make our card more attractive.
<style>* {
font-family: 'Comfortaa', cursive;
}

body {
background-color: #A2D2FF;
}

.container {
width: 650px;
}

img {
width: 200px;
}

.datep {
background-color: #97f7ada3;
padding: 5px;
font-size: 12px;
border-radius: 4px;
}

</style>
Now Add JavaScript to do Some Cool Stuff.
Step 5) Add This JavaScript Code in bottom of the HTML Page.
  • In This JavaScript i make a connection with api using async  function , when i click on Refresh button it always get back some response , then i store in a variable and show on Html Page.
<script>

   // Fetch api module 

   async function fetchText() {

      let response = await fetch('https://catfact.ninja/fact');

      console.log(response.status); // 

      console.log(response.statusText); // 

      if (response.status === 200) {

          let data = await response.json();

          // handle data

console.log(data);

 

    var nfact = data.fact; </span > 

document.getElementById("demo").innerHTML = nfact;

    var rand = Math.floor(Math.random() * 4) + 1;

 if(rand==1){

 </span >document.getElementById("myImg").src = "images/pic1.png";

    }

    else if(rand==2){

 document.getElementById("myImg").src = "images/pic2.png";

    }

    else if(rand==3){

document.getElementById("myImg").src = "images/pic3.png";

    }

    else if(rand==4){

document.getElementById("myImg").src = "images/pic4.png";

    }else{

 </span >document.getElementById("myImg").src = "images/pic2.png";

    }

 

      }

   }

   fetchText();

   setInterval(function(){

 </span >fetchText();

   }, 25000); 

   // Date Module  

   var today = new Date();

   var dd = today.getDate();

   var mm = today.getMonth()+1; 

   var yyyy = today.getFullYear();

   if(dd<10) 

   {

      dd='0'+dd;

   } 

   today = dd+'-'+mm+'-'+yyyy;

   console.log(today);

document.getElementById("date").innerHTML = today;
 
</script>
Now our Application is Ready. Refresh your Html Page and you will Get New fact Every Time & you can also change cat fact using refresh button.
Follow me For this type of Cool Stuff.
 
 
IMPORTANT LINKS
See Demo App go to this Link:
Download Full Source code from this Link