Bootstrap

How to Create Cat Fact application Using Free Api

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

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

  • 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/[email protected]/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:

Download Full Source code from this Link

View full Source code of my app: