<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- header -->
    <header class="header">
      <div class="header-logo">TextLogo</div>
      <nav class="nav">
        <ol class="header__list">
          <li class="header__list-item">Home</li>
          <li class="header__list-item">About</li>
          <li class="header__list-item">Contact</li>
        </ol>
      </nav>
    </header>

    <!-- cards -->

    <div class="horizontal__cards">
      
      <h3 class="horizontal__cards-title">CAT FACTS</h3>
      <h4 class="horizontal__cards-subtitle">CAT FACTS LENGTH</h4>
      <p class="horizontal__cards-paragraph">
      Click on the Button to get cat facts & length of each fact
      </p>

      <button class="horizontal__cards-btn" id="dogbtn">Click me</button>
    </div>
    <!-- footer -->

    <footer class="footer">
      <ol class="footer__list">
        <li class="footer__list-item">Linkedin</li>
        <li class="footer__list-item">Twitter</li>
        <li class="footer__list-item">Github</li>
      </ol>
    </footer>

  
  </body>
</html>

@import url("https://hashnodeblogchallenge.netlify.app/index.css");


const dogUrl = "https://catfact.ninja/fact";
const dogbtn = document.querySelector("#dogbtn");
const dogimg = document.querySelector("#dogimg");
const title = document.querySelector(".horizontal__cards-title");
const subtitle = document.querySelector(".horizontal__cards-subtitle");
const paragraph = document.querySelector(".horizontal__cards-paragraph");

async function getdogdata() {
  try {
    const animaldata = await fetch(dogUrl);
    const data = await animaldata.json();
    console.log(data);
    
    if (data) {
       paragraph.innerHTML = "Here is a fun fact about cats!";
      title.innerHTML = data.fact;      // Set the fact in title
      subtitle.innerHTML = `Length: ${data.length}`;  // Set the length in subtitle
     
    } else {
      paragraph.innerHTML = "No data found.";
    }
  } catch (error) {
    console.error("Error fetching data:", error);
    alert('API SERVER DOWN')
    paragraph.innerHTML = "Failed to fetch data. Try again later.";
  }
}

dogbtn.addEventListener("click", getdogdata);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.