This project is a simple yet powerful image search engine developed using HTML, CSS, and JavaScript. It utilizes the Pixabay API to fetch images based on user input and preferences. Below are the key features and requirements of the project:
-
Search Functionality: Users can enter a search term and select a color preference for the images they want to discover.
-
Color Selection: Users can choose from a range of colors or opt for "Any color" to view images regardless of their color scheme.
-
Tag and Photographer Display: Each image displayed includes tags (as provided by Pixabay) and the name of the photographer.
-
Pagination: The search results are paginated, allowing users to navigate through multiple pages of results with the "Previous Page" and "Next Page" buttons.
-
Responsive Design: The interface is designed to be responsive, ensuring a seamless experience across various devices and screen sizes.
-
API Integration: The project integrates with the Pixabay API, requiring an API key for access. Users can obtain an API key by creating a Pixabay account.
-
Getting Started: Clone the repository or download the project files to your local machine.
-
Obtaining an API Key: To use the Pixabay API, you need to obtain an API key by signing up for a Pixabay account or linking your Google/Facebook account.
-
Setting Up the Environment: Ensure that you have a modern web browser installed (e.g., Google Chrome, Mozilla Firefox) and a text editor for viewing and editing the source code.
-
Launching the Application: Open the
index.htmlfile in your web browser to launch the image search engine. -
Searching for Images: Enter a search term and select a color preference from the dropdown menu. Click the "Search" button to retrieve images based on your criteria.
-
Navigating Through Results: Use the "Previous Page" and "Next Page" buttons to navigate through the paginated search results.
- HTML5, CSS3, and JavaScript are used for development.
- No external libraries or frameworks are utilized; the project relies solely on custom code.
- Semantic HTML and responsive design principles are followed for accessibility and compatibility across devices.
To use the Pixabay API, you need to obtain an API key. Visit the Pixabay website for documentation and instructions on obtaining your API key.
This project was created by Andreas Siggelin and Joakim Haglund Malm as part of an assignment for our Frontend development class. Feel free to contribute, provide feedback, or report issues via GitHub.
Note: Please ensure compliance with Pixabay's terms of service and usage policies when using the Pixabay API for fetching images.