dishamodi0910 · ananyag309 · Jun 11, 2024 · Jun 11, 2024
diff --git a/New_APIs/Cat API/Readme.md b/New_APIs/Cat API/Readme.md
@@ -0,0 +1,52 @@
+Sure! Here's a simple README for your Cat API project:
+
+---
+
+# Cat API
+
+## Description
+
+Cat API is a simple web application that allows users to generate random cat photos. It provides an easy-to-use interface for fetching adorable cat images on demand.
+
+## Features
+
+- Generates random cat photos with the click of a button.
+- Professional and visually appealing layout.
+- Responsive design for seamless viewing on various devices.
+
+## Technologies Used
+
+- HTML5
+- CSS3 (with Flexbox for layout)
+- JavaScript (for fetching cat photos asynchronously)
+
+## Usage
+
+1. Clone the repository to your local machine:
+
+    ```
+    git clone https://github.com/your-username/cat-api.git
+    ```
+
+2. Navigate to the project directory:
+
+    ```
+    cd cat-api
+    ```
+
+3. Open the `index.html` file in your web browser.
+
+4. Click on the "Generate Cat Photo" button to fetch a random cat photo from the API.
+
+## Credits
+
+- Cat photos provided by [Your Cat API](https://www.yourcatapi.com/).
+- Layout design inspired by professional web design principles.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+Feel free to customize this README with additional information about your project, such as installation instructions, troubleshooting tips, or future plans for development.
diff --git a/New_APIs/Cat API/index.html b/New_APIs/Cat API/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cat API Example</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Random Cat Image</h1>
+    <button id="fetchCat">Get a Cat Image</button>
+    <br> <br>
+    <div id="catImageContainer"></div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/New_APIs/Cat API/script.js b/New_APIs/Cat API/script.js
@@ -0,0 +1,15 @@
+document.getElementById('fetchCat').addEventListener('click', fetchCatImage);
+
+function fetchCatImage() {
+    fetch('https://api.thecatapi.com/v1/images/search', {
+        headers: {
+            'x-api-key': 'live_ce4pjoxHExOT6cXQMjajh6ILE7xlDZIc1BsaIAY1Gu01tYArMy64ngRdq2Eu0fAe'
+        }
+    })
+    .then(response => response.json())
+    .then(data => {
+        const catImageContainer = document.getElementById('catImageContainer');
+        catImageContainer.innerHTML = `<img src="${data[0].url}" alt="Random Cat Image">`;
+    })
+    .catch(error => console.error('Error fetching cat image:', error));
+}
diff --git a/New_APIs/Cat API/style.css b/New_APIs/Cat API/style.css
@@ -0,0 +1,43 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f2f2f2;
+}
+
+.container {
+    text-align: center;
+    padding: 40px;
+    border: 3px solid #333;
+    border-radius: 20px;
+    background-color: #fff;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    margin: 0;
+    margin-bottom: 20px; /* Add some space between heading and button */
+    margin-right: 40px;
+
+}
+
+button {
+    padding: 15px 30px;
+    font-size: 18px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    /* Add hover effect */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+button:hover {
+    background-color: #45a049;
+}