# 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