This project implements an Instagram-like application using JavaScript, HTML, and CSS. It fetches images from the Pixabay API and displays them in a visually appealing format, including a user interface for stories and posts.
- Infinite scrolling to load more posts
- Display user stories with profile pictures
- Show post details including images, likes, and comments
- Dynamic updating of the current time in the UI
- Smooth hide/show of the main menu on scroll
- HTML
- CSS
- JavaScript
- Pixabay API
To run this project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/emilRacz21/instagram-javascript.git cd instagram-javascript
-
Open the index.html file in your web browser. This will display the application
-
Use your API Key:
let urlPhoto = `https://pixabay.com/api/?key=YOUR_API_KEY&image_type=photo&orientation=horizontal&q=NATURE&page=${this.page}`;
-
Replace the API key in the apiPost method of the Instagram class with your own Pixabay API key for the application to fetch images.
The main class Instagram is responsible for:
- Initializing the application
- Fetching data from the Pixabay API
- Managing user interface updates based on user interactions (scrolling)
- Displaying posts and stories dynamically
Contributions are welcome! If you have suggestions for improvements or find a bug, please open an issue or submit a pull request.
This project is licensed under the MIT License.