apna-college · prathmesh-git · Mar 14, 2025 · Mar 14, 2025
diff --git a/Random Cat Facts/README.md b/Random Cat Facts/README.md
@@ -0,0 +1,2 @@
+Catfacts
+This calls an api to generate random cat facts and images
diff --git a/Random Cat Facts/app.js b/Random Cat Facts/app.js
@@ -0,0 +1,41 @@
+let btn = document.querySelector("#btn");
+let randomImg = "https://api.thecatapi.com/v1/images/search";
+let randomFact = "https://catfact.ninja/fact";
+
+async function getImage(){
+    try{
+        let res = await axios.get(randomImg);
+        return res.data[0].url;
+
+
+    }catch(err){
+        console.log("Error - ", err);
+    }
+}
+
+async function getFact(){
+    try{
+        let res = await axios.get(randomFact);
+        return res.data.fact;
+    }
+    catch(err){
+        console.log("Error - ", err);      
+    }
+}
+
+btn.addEventListener("click", async ()=>{
+    let imgLink = await getImage();
+    let img = document.querySelector("#cats-img");
+    img.setAttribute("src", imgLink)
+
+    let factLink = await getFact();
+    let p = document.querySelector("#results");
+    p.innerText = factLink;
+
+    if (btn.innerText === "Get Fact") {
+        btn.innerText = "Another One";
+    }
+
+})
+
+
diff --git a/Random Cat Facts/bg-image.jpg b/Random Cat Facts/bg-image.jpg
diff --git a/Random Cat Facts/index.html b/Random Cat Facts/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat Facts</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="background">
+
+    </div>
+    <h1>Random Cat Facts</h1>
+
+    <div>
+        <div class="img-container"><img class="img-thumbnail" id="cats-img"></div>
+        <p id="results"></p><br>
+
+        <button id="btn">Get Fact</button>
+    </div>
+
+
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Random Cat Facts/styles.css b/Random Cat Facts/styles.css
@@ -0,0 +1,53 @@
+*{
+    font-family: "Montserrat", sans-serif;
+}
+
+body{
+    text-align: center;
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(bg-image.jpg) no-repeat center/cover;
+    opacity: 1; /* Adjust opacity */
+    z-index: -1;
+}
+
+h1{
+    margin-top: 60px;
+    color: #B35A72;
+}
+
+p{
+    margin-top: 30px;
+    color: #000000;
+    font-size: 1.1rem;
+    font-weight: 500;
+    background-color: #FFF5E1;  /* Soft Cream */
+    padding: 10px;  /* Adds space inside the paragraph */
+    border-radius: 8px;  /* Rounds the corners */
+    display: inline-block; /* Ensures background wraps around text */
+
+}
+
+#btn{
+    margin-top: 30px;
+    background-color: #F9C5C5;
+    cursor: pointer;
+    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+#cats-img{
+    height: 200px;
+    width: 200px;
+    border: 1.5px solid #C1A8A0;
+    border-radius: 1.5px;
+}
+
+#btn:hover{
+   transform: scale(1.04);
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Catfacts
		This calls an api to generate random cat facts and images