Bootstrap

How to Create Cat Fact application Using Free Api

November 30, 2021August 23, 2023 by Niyander

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

Also Learn about: Create Beautiful Love Calculator using JavaScript

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 Project 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">

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">

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>

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>

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); // 200
       console.log(response.statusText); // OK
    
       if (response.status === 200) {
           let data = await response.json();
           // handle data
        console.log(data);
        
        var nfact = data.fact; 
        document.getElementById("demo").innerHTML = nfact;
            var rand = Math.floor(Math.random() * 4) + 1;
                if(rand==1){
                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{
                document.getElementById("myImg").src = "images/pic2.png";
                }
       }
    }

    fetchText();
    setInterval(function(){ 
        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: