A modern, interactive GIF search application built with vanilla JavaScript and the Giphy API.

Open index.html in your browser to start searching for GIFs!

• Real-time GIF Search: Search for GIFs using keywords
• Responsive Design: Works on desktop and mobile devices
• Clean UI: Modern, user-friendly interface with custom styling
• Error Handling: Displays helpful error messages
• Auto-clear: Input field clears after successful searches

• HTML5: Semantic markup and structure
• CSS3: Custom styling and responsive design
• JavaScript (ES6+): Fetch API, DOM manipulation, event handling
• Giphy API: GIF data and images

• A Giphy Developer account from developers.giphy.com
• Modern web browser with JavaScript enabled

1. Clone or download this repository
2. Get your Giphy API key:
   • Visit developers.giphy.com
   • Create an account and get your API key from the dashboard
3. Configure your API key:
   • Copy config.example.js to config.js
   • Replace 'your_api_key_here' with your actual Giphy API key:

   const CONFIG = {
       GIPHY_API_KEY: 'your_actual_api_key_here',
       // ... other settings
   };

4. Open index.html in your web browser
5. Start searching for GIFs!

• The config.js file contains your API key and is excluded from version control
• Never commit your actual API key to a public repository
• Use config.example.js as a template for other developers

JavaScript_APIs/
├── index.html          # Main HTML file
├── styles.css          # Custom CSS styling
├── app.js             # JavaScript functionality
├── config.js          # API configuration (excluded from git)
├── config.example.js   # Configuration template
├── .gitignore         # Git ignore rules
└── README.md          # Project documentation

1. DOM Selection: JavaScript selects HTML elements (input, button, image, feedback)
2. Event Handling: Click event listener on the search button
3. API Request: Fetch API calls Giphy's translate endpoint with user's search term
4. Promise Chain: Handles response with .then() and .catch() methods
5. DOM Update: Updates image source and clears input on success, shows errors on failure

• ✅ DOM Manipulation: Element selection and content updates
• ✅ Fetch API: Modern JavaScript HTTP requests
• ✅ Promise Handling: Asynchronous JavaScript with proper error handling
• ✅ URL Construction: Dynamic API endpoint with query parameters
• ✅ User Experience: Input clearing, error messages, responsive design

This project uses the Giphy Translate API:

• Endpoint: https://api.giphy.com/v1/gifs/translate
• Parameters: api_key (your key) and s (search term)
• Response: JSON object containing GIF data and URLs

Custom CSS includes:

• Modern button styling with hover effects
• Responsive image container
• Error message styling
• Clean, centered layout

This project demonstrates:

• JavaScript Fetch API usage
• Promise-based asynchronous programming
• DOM manipulation and event handling
• API integration with external services
• Error handling and user feedback
• Modern CSS styling techniques

Feel free to fork this project and make improvements! Some ideas:

• Add loading spinners
• Implement search history
• Add favorite GIFs functionality
• Improve mobile responsiveness

This project is open source and available under the MIT License.