dishamodi0910 · thevijayshankersharma · Jun 6, 2024
diff --git a/Existing_API_Collection/Cat_Images_api/README.md b/Existing_API_Collection/Cat_Images_api/README.md
@@ -0,0 +1,35 @@
+# Cat Images API
+
+Welcome to the Cat Images API! This API fetches and displays random cat images using The Cat API. It provides a simple web page with buttons to fetch cat images using both ES6 and ES7 JavaScript syntax.
+
+## Features
+- **Fetch Cat Images:** Retrieve random cat images by clicking on the "Fetch (ES6)" or "Fetch (ES7)" buttons.
+- **Error Handling:** Robust error handling to ensure smooth image loading even in case of network errors.
+- **Loader Animation:** A loader animation appears while the image is being fetched, providing visual feedback to users.
+- **Responsive Design:** Designed with responsiveness in mind, ensuring a seamless experience across different devices and screen sizes.
+
+## Technologies Used
+- HTML
+- CSS (with flexbox for layout and keyframe animation for loader)
+- JavaScript (ES6 and ES7 syntax)
+- Fetch API for making HTTP requests
+
+## API Integration
+This application uses The Cat API (`https://api.thecatapi.com/v1/images/search`) to fetch random cat images.
+
+## Usage
+To use the Cat Images API:
+
+1. Open the `index.html` file in a web browser.
+2. Click on either "Fetch (ES6)" or "Fetch (ES7)" button to fetch and display a new random cat image.
+3. The loader animation will appear while the image is being fetched and disappear once the image is loaded.
+
+## Installation
+To set up the Cat Images API locally, follow these steps:
+
+1. Clone the repository.
+2. Navigate to the directory containing the `index.html` file.
+3. Open the `index.html` file in a web browser.
+
+## Screenshots
+![Cat Images API Screenshot](assets/image.png)
diff --git a/Existing_API_Collection/Cat_Images_api/assets/image.png b/Existing_API_Collection/Cat_Images_api/assets/image.png
diff --git a/Existing_API_Collection/Cat_Images_api/index.html b/Existing_API_Collection/Cat_Images_api/index.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <title>Cat images API</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="content">
+            <img src="https://purr.objects-us-east-1.dream.io/i/GQXOl.png" alt="cat">
+            <div class="loader"></div>
+        </div>
+        <div class="buttons">
+            <button class="button1">Fetch (ES6)</button>
+            <button class="button2">Fetch (ES7)</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Existing_API_Collection/Cat_Images_api/script.js b/Existing_API_Collection/Cat_Images_api/script.js
@@ -0,0 +1,66 @@
+const url = 'https://api.thecatapi.com/v1/images/search';
+let img = null;
+let loader = null;
+
+window.onload = () => {
+    img = document.querySelector('img');
+    loader = document.querySelector('.loader');
+    document.querySelector('.button1')
+        .addEventListener('click', clickHandlerES6);
+    document.querySelector('.button2')
+        .addEventListener('click', clickHandlerES7);
+    img.addEventListener('load', hideLoader);
+};
+
+function showLoader() {
+    img.classList.add('image--faded');
+    loader.classList.add('loader--visible');
+}
+
+function hideLoader() {
+    img.classList.remove('image--faded');
+    loader.classList.remove('loader--visible');
+}
+
+function timeout(timeoutMs) {
+    return new Promise(resolve => setTimeout(resolve, timeoutMs));
+}
+
+/* ------- ES6 ------- */
+
+function clickHandlerES6() {
+    showLoader();
+
+    fetchDataES6()
+        .then(data => {
+            img.src = data[0].url;
+        });
+}
+
+function fetchDataES6(timeoutMs = 1000) {
+    return fetch(url)
+        .then(response => response.json())
+        .catch(error => timeout(timeoutMs)
+            .then(res => fetchDataES6())
+        );
+}
+
+/* ------- ES7 ------- */
+
+async function clickHandlerES7() {
+    showLoader();
+
+    const data = await fetchDataES7();
+    img.src = data[0].url;
+}
+
+async function fetchDataES7(timeoutMs = 1000) {
+    try {
+        const response = await fetch(url);
+        return response.json();
+
+    } catch (e) {
+        await timeout(timeoutMs);
+        return fetchDataES7(timeoutMs);
+    }
+}
diff --git a/Existing_API_Collection/Cat_Images_api/style.css b/Existing_API_Collection/Cat_Images_api/style.css
@@ -0,0 +1,99 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #212121;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
+  }
+
+  .content {
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    max-height: 90vh;
+    width: 100vw;
+    position: relative;
+  }
+
+  img {
+    width: 100%;
+    object-fit: contain;
+    max-height: 90vh;
+    max-width: 100vw;
+    transition: opacity .4s;
+  }
+
+  .image--faded {
+    opacity: 0.3;
+  }
+
+  .loader {
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    top: 50%;
+    bottom: auto;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%) translateY(-50%);
+    transition: opacity .4s;
+    opacity: 0;
+  }
+
+  .loader:before {
+    content: '';
+    display: block;
+    box-sizing: border-box;
+    width: 60px;
+    height: 60px;
+    border: 6px solid #ECEFF1;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: 2s linear infinite loader-rotation;
+  }
+
+  .loader--visible {
+    opacity: 1;
+  }
+
+  @keyframes loader-rotation {
+    0%   { transform: rotate(0deg); }
+    25% { transform: rotate(360deg); }
+    75% { transform: rotate(720deg); }
+    100% { transform: rotate(1080deg); }
+  }
+
+  .buttons {
+    height: 10vh;
+    display: flex;
+  }
+
+  button {
+    width: 50%;
+    background-color: #37474F;
+    border: none;
+    color: #ECEFF1;
+    font-family: sans-serif;
+    font-size: 1rem;
+    line-height: 1;
+    outline: 1px solid #ECEFF1;
+    outline-offset: -5px;
+    transition: background-color .2s, outline-offset .2s;
+  }
+
+  button:active {
+    outline-offset: -1px;
+    background-color: #455A64;
+  }
+
+  @media (orientation: landscape) {
+    img {
+      height: 100%;
+    }
+  }
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -22,5 +22,6 @@
 |[JSON_Placeholder_API](./JSON_Plaeholder_API/)| this api is used to test basic crud operations on fake data posts |
 |[Gold Silver Price](./Gold,silver_price_API/)|This API helps you check realtime price of gold and silver for each categories |
 |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|
+| [Cat Images API](./Cat_Images_api/) | This API fetches and displays random cat images using The Cat API. It provides a simple web page with buttons to fetch cat images using both ES6 and ES7 JavaScript syntax. |
 |[Books API](./Books_API/)| The Google Books API allows developers to access a wealth of information about books, including their titles, authors, publishers, publication dates, and descriptions. |
 |[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|