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
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
- 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:
Download Full Source code from this Link
View full Source code of my app:
Its working , very nice article..
Nice web application niyander…
wow its working , very nice article ..
Very Nice article thanks for sharing