Cat Image Fetcher

A simple web app that fetches random cat images from The Cat API using PHP, Vue.js, and Tailwind CSS. The app displays the images in a two-row layout, with an interactive feature to move the last image to the first position when clicked. It also includes a refresh button to dynamically load new images.

Features

• Fetches 5 random cat images from The Cat API.
• Displays images in a two-row layout:
  • First Row: 2 images centered.
  • Second Row: 3 images.
• Ensures all images are the same size.
• Interactive Feature: Clicking on the last image moves it to the first position.
• Refresh Button: Dynamically loads new images without reloading the page.
• Configurable: Easily adjustable settings for image count, layout, and API key management.

Requirements

Make sure you have the following installed on your system:

• PHP 8.0+
• A local server (e.g., php -S, XAMPP, MAMP)

Setup Instructions

1. Clone the repository:

   git clone https://github.com/your-username/cat-image-fetcher.git
   

2. Navigate to the project folder:

   cd catimages
   

3. Run the local server:

   php -S localhost:8000
   

4. Open the app in your browser:

   ```bash Go to http://localhost:8000

Configuration

You can adjust the following settings in the PHP config array:

$config = [
    'image_count' => 5, // Number of cat images to fetch
    'api_url' => "https://api.thecatapi.com/v1/images/search",
    'api_key' => 'API_KEY'
];

• image_count: Number of images to fetch.
• api_url: The Cat API endpoint.
• api_key: API key from The Cat API.

How to Use

• The app will display 5 random cat images on load.
• Click on the last image in the second row to move it to the first position.
• Click the "Refresh Cats" button to fetch new random images.