64 lines
2.2 KiB
Markdown
64 lines
2.2 KiB
Markdown
# red head
|
|
|
|
A responsive Reddit-like application with infinite scroll functionality that displays the latest Reddit articles.
|
|
|
|
## Features
|
|
|
|
- **Infinite Scroll**: Automatically loads more posts as you scroll down
|
|
- **Responsive Design**: Works well on both desktop and mobile devices
|
|
- **Image Preview**: Each post displays a picture frame with a placeholder image
|
|
- **Modern UI**: Clean, attractive interface with hover effects and smooth transitions
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
.
|
|
├── index.html # Main HTML structure
|
|
├── styles.css # Responsive styling
|
|
└── app.js # JavaScript logic for posts and infinite scroll
|
|
```
|
|
|
|
## How It Works
|
|
|
|
1. The application loads the first 10 Reddit posts when the page is initially loaded
|
|
2. As users scroll down, it automatically loads more posts (10 at a time)
|
|
3. Uses Intersection Observer API for efficient infinite scrolling
|
|
4. Falls back to manual scroll detection for older browsers
|
|
5. Each post displays:
|
|
- A title
|
|
- An image frame
|
|
- A link to the original Reddit post
|
|
|
|
## Implementation Details
|
|
|
|
- **Responsive Design**: Uses CSS Grid for adaptive layouts that work on mobile and desktop
|
|
- **Performance**: Lazy loading of images and efficient scroll handling
|
|
- **Mock Data**: Currently uses mock data for demonstration purposes (will be replaced with real API calls)
|
|
- **User Experience**: Loading indicators and smooth animations
|
|
|
|
## How to Use
|
|
|
|
1. Open `index.html` in a web browser
|
|
2. Scroll down to see more posts load automatically
|
|
3. Click on post titles to view them on Reddit
|
|
|
|
## Customization
|
|
|
|
To connect to a real Reddit API:
|
|
1. Replace the mock data in `app.js` with actual API calls
|
|
2. Update the `fetchRedditPosts()` and `fetchMorePosts()` functions to fetch from Reddit's API
|
|
3. Adjust styling in `styles.css` to match desired aesthetics
|
|
|
|
## Technologies Used
|
|
|
|
- HTML5
|
|
- CSS3 (Grid, Flexbox, Media Queries)
|
|
- JavaScript ES6+
|
|
- Intersection Observer API for efficient scrolling
|
|
|
|
## Responsive Design
|
|
|
|
The application is fully responsive and will adapt to:
|
|
- Desktop: Grid layout with 2-3 columns based on screen width
|
|
- Tablet: Reduced grid columns
|
|
- Mobile: Single column layout with appropriate spacing |