<!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">
      <img src="" alt="image" class="horizontal__cards-image" id="dogimg" />
      <h3 class="horizontal__cards-title">tata</h3>
      <h4 class="horizontal__cards-subtitle">tata tea</h4>
      <p class="horizontal__cards-paragraph">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi neque
        temporibus et cumque eligendi nihil tempora inventore sapiente
      </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/hashnode.css");
  const dogUrl = "https://zoo-animal-api.herokuapp.com/animals/rand";
      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() {
        const animaldata = await fetch(dogUrl);
        const data = await animaldata.json();
        console.log(data);
        dogimg.src = data.image_link;
        title.innerHTML = data.name;
        subtitle.innerHTML = data.active_time;
        paragraph.innerHTML = `<li> Diet : ${data.diet}</li>`;
      }
      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.