JavaScript HTML web

Dog/Cat API Snippet.

Displays random dog and cat images using two public APIs with fetch(). Users can load new images dynamically with a button click no dependencies needed.

// how to use

Use the buttons to fetch new images from the Dog CEO API and The Cat API. Both are free with no auth required for basic usage.

// credits

Inspired by beginner-friendly API projects showcasing dynamic content loading with plain JavaScript.

<button id="getDog">Get Doggo 🐕</button>
<br><br>
<img id="dogImg" src="" width="300" />

<script>
  document.getElementById("getDog").onclick = async () => {
    const res  = await fetch("https://dog.ceo/api/breeds/image/random");
    const data = await res.json();
    document.getElementById("dogImg").src = data.message;
  };
</script>

<button id="getCat">Get Cat 🐈</button>
<br><br>
<img id="catImg" src="" width="300" />

<script>
  document.getElementById("getCat").onclick = async () => {
    const res  = await fetch("https://api.thecatapi.com/v1/images/search");
    const data = await res.json();
    document.getElementById("catImg").src = data[0].url;
  };
</script>

all snippets login/signup form