Bootstrap

How to Create Cat Fact application Using Free Api

November 30, 2021December 21, 2022 by Niyander

Hello friends in this article i am gone to share How to Create Cat Fact application Using Free Api with you..

Visit This Link to See Demo

https://starkverma111.github.io/cat-fact/

To Build This Type of application You Need Some Basic knowledge just Like

HTML
CSS,
JavaScript

Free Cat Fact Api link– Copy this link

https://catfact.ninja/fact

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;