Cat API example

This demo calls The Cat API via APIEase and displays a random cat image.

• Demo: https://apiease-demo.myshopify.com/pages/auth-api (password eacoht)
• Endpoint: https://api.thecatapi.com/v1/images/search

JavaScript

function callApi() {
  const queryParamsCaller = new URLSearchParams({
    requestId: '72277ed0-db24-11ed-b56c-119d120a4914',
  });

  fetch('/apps/apiease/integration/caller/call?' + queryParamsCaller, {
    headers: { 'ngrok-skip-browser-warning': 'any' },
  })
    .then((response) => response.json())
    .then((jsonResponse) => {
      document.getElementById('catApiResponseImage').src = jsonResponse.data[0].url;
    });
}

HTML

<div id="demoHtml">
  <div id="catApiDemo">
    <div style="display: flex; align-items: center;">
      <p>The Cat API returns random images of cats.</p>
      <button onclick="callApi()">Get</button>
    </div>
    <div class="response-box">
      APIEase Response:<br>
      <img id="catApiResponseImage">
    </div>
  </div>
 </div>

CSS

#demoHtml * {
  font-family: 'Helvetica Neue', sans-serif;
}
#demoHtml button {
  padding: 8px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.response-box {
  position: relative;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #e6ecff;
  margin-top: 10px;
}