Back to Snippets

Dog/Cat API Snippet.

This code displays random dog and cat images using two public APIs with fetch requests. It includes buttons that let users load new images dynamically.
How to Use?
Use the buttons to fetch new images via fetch() from the Dog CEO API and The Cat API. The script handles API calls and image updates with plain JavaScript.
Credits
Inspired by beginner-friendly API projects showcasing dynamic content loading.

<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>

var BoxOpened = "";
var ImgOpened = "";
var Counter = 0;
var ImgFound = 0;

var Source = "#boxcard";

var ImgSource = [
  "http:
  "http:
  "http:
  "http:
  "http:
  "http:
  "http:
  "http:
  "http:
  "http:
];

function RandomFunction(MaxValue, MinValue) {
    return Math.round(Math.random() * (MaxValue - MinValue) + MinValue);
}

function ShuffleImages() {
  var ImgAll = $(Source).children();
  var ImgThis = $(Source + " div:first-child");
  var ImgArr = new Array();

  for (var i = 0; i < ImgAll.length; i++) {
    ImgArr[i] = $("#" + ImgThis.attr("id") + " img").attr("src");
    ImgThis = ImgThis.next();
  }

  ImgThis = $(Source + " div:first-child");

  for (var z = 0; z < ImgAll.length; z++) {
    var RandomNumber = RandomFunction(0, ImgArr.length - 1);

    $("#" + ImgThis.attr("id") + " img").attr("src", ImgArr[RandomNumber]);
    ImgArr.splice(RandomNumber, 1);
    ImgThis = ImgThis.next();
  }
}

function ResetGame() {
  ShuffleImages();
  $(Source + " div img").hide();
  $(Source + " div").css("visibility", "visible");
  Counter = 0;
  $("#success").remove();
  $("#counter").html("" + Counter);
  BoxOpened = "";
  ImgOpened = "";
  ImgFound = 0;
  return false;
}

function OpenCard() {
  var id = $(this).attr("id");

  if ($("#" + id + " img").is(":hidden")) {
    $(Source + " div").unbind("click", OpenCard);

    $("#" + id + " img").slideDown('fast');

    if (ImgOpened == "") {
      BoxOpened = id;
      ImgOpened = $("#" + id + " img").attr("src");
      setTimeout(function () {
        $(Source + " div").bind("click", OpenCard)
      }, 300);
    } else {
      CurrentOpened = $("#" + id + " img").attr("src");
      if (ImgOpened != CurrentOpened) {
        setTimeout(function () {
          $("#" + id + " img").slideUp('fast');
          $("#" + BoxOpened + " img").slideUp('fast');
          BoxOpened = "";
          ImgOpened = "";
        }, 400);
      } else {
        $("#" + id + " img").parent().css("visibility", "hidden");
        $("#" + BoxOpened + " img").parent().css("visibility", "hidden");
        ImgFound++;
        BoxOpened = "";
        ImgOpened = "";
      }
      setTimeout(function () {
        $(Source + " div").bind("click", OpenCard)
      }, 400);
    }
    Counter++;
    $("#counter").html("" + Counter);

    if (ImgFound == ImgSource.length) {
      $("#counter").prepend('<span id="success">You Found All Pictues With </span>');
    }
  }
}

$(function () {
  for (var y = 1; y < 3; y++) {
    $.each(ImgSource, function (i, val) {
      $(Source).append("<div id=card" + y + i + "><img src=" + val + " />");
    });
  }
  $(Source + " div").click(OpenCard);
  ShuffleImages();
});

$nomention
$onlyIf[$guildID!=;]
$allowUserMentions[]
$reply

$if[$message==]
Usage: !buy {item} {amount}

$else

$var[price1;$multi[1000;$message[2;amount]]]
$var[price2;$multi[5000;$message[2;amount]]]
$var[price3;$multi[10000;$message[2;amount]]]
$c[add more price variables as you add more items and the number inside multi is the actual price btw]

$if[$toLowercase[$message[1;item]==item1]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price1];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item 1(s).]
$color[#2F3136]

$setVar[item1;$sum[$getVar[item1;$authorID];$message[2;amount]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price1]];$authorID]

$elseif[$toLowercase[$message[1;item]==item2]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price2];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item2(s).]
$color[#2F3136]

$var[temp-item2;$multi[$message[2;amount];2]]
$c[The 2 at the end here is because this item gives a +2 multiplier]
$setVar[item2;$sum[$getVar[item2;$authorID];$var[temp-item2]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price2]];$authorID]

$elseif[$toLowercase[$message[1;item]==item3]]

$onlyIf[$getVar[clicker;$authorID]>=$var[price3];You don't have enough clicks to buy this item.]

$description[Successfully bought `$message[2;amount]` Item3(s).]
$color[#2F3136]

$var[temp-item3;$multi[$message[2;amount];3]]
$c[The 3 at the end here is because this item gives a +2 multiplier]
$setVar[item3;$sum[$getVar[item3;$authorID];$var[temp-item3]];$authorID]
$setVar[clicker;$sub[$getVar[clicker;$authorID];$var[price3]];$authorID]

$endif
$endif