# Product Catalog Web Application

A modern, responsive web application that dynamically displays products from text files stored in a local folder structure.

## Project Structure

```
/
├── index.html              # Main HTML page with embedded CSS and JavaScript
├── products/               # Folder containing product text files
│   ├── file1.txt          # Product 1: Wireless Bluetooth Headphones
│   ├── file2.txt          # Product 2: Organic Coffee Beans
│   ├── file3.txt          # Product 3: Smart Fitness Watch
│   └── file4.txt          # Product 4: Ergonomic Office Chair
└── README.md              # This documentation file
```

## Features

✅ **Dynamic Product Loading**: Automatically reads and displays products from text files in the `/products/` folder
✅ **Responsive Design**: Mobile-friendly grid layout that adapts to different screen sizes
✅ **Modern UI/UX**: Clean, card-based design with hover effects and smooth transitions
✅ **Error Handling**: Graceful handling of missing files, network errors, and invalid data
✅ **Category Display**: Shows product categories with styled badges
✅ **External Links**: Direct links to official product websites
✅ **Image Support**: Displays product images from URLs with fallback for missing images

## Product File Format

Each product text file should follow this format:

```
title: Product Name
img: https://example.com/image.jpg
description: Product description text here
category: Product Category
url: https://official-website.com
```

**Required fields:**
- `title`: Product name
- `description`: Product description

**Optional fields:**
- `img`: URL to product image
- `category`: Product category for filtering/display
- `url`: Official website URL

## Current Product Catalog

The application currently includes 4 sample products:

1. **Wireless Bluetooth Headphones** (Electronics)
2. **Organic Coffee Beans** (Food & Beverage)
3. **Smart Fitness Watch** (Wearables)
4. **Ergonomic Office Chair** (Furniture)

## Technical Implementation

### Frontend Technologies
- **HTML5**: Semantic structure and modern elements
- **CSS3**: Grid layout, flexbox, transitions, and responsive design
- **Vanilla JavaScript**: ES6+ classes, async/await, fetch API
- **No external dependencies**: Self-contained application

### Key JavaScript Features
- **ProductCatalog Class**: Main application controller
- **Dynamic File Loading**: Automatically discovers and loads `.txt` files
- **Content Parsing**: Parses structured text files into JavaScript objects
- **Error Resilience**: Continues loading other products if individual files fail
- **Responsive Rendering**: Adapts layout based on screen size

### CSS Features
- **CSS Grid**: Responsive product grid with auto-fill
- **Hover Effects**: Smooth transitions and elevation changes
- **Mobile-First**: Responsive breakpoints for mobile devices
- **Modern Styling**: Box shadows, rounded corners, and color schemes

## Usage Instructions

### Adding New Products

1. Create a new `.txt` file in the `/products/` folder
2. Follow the product file format shown above
3. Refresh the web page to load the new product

### Customizing the Display

- **Styling**: Modify the CSS in the `<style>` section of `index.html`
- **Layout**: Adjust the grid settings in the `.products-grid` CSS class
- **Colors**: Change the color scheme in the CSS custom properties

### File Naming

Product files can be named anything (e.g., `file1.txt`, `product-name.txt`, `item-001.txt`). The application will automatically discover and load all `.txt` files in the products folder.

## Browser Compatibility

- ✅ Chrome 60+
- ✅ Firefox 55+
- ✅ Safari 11+
- ✅ Edge 79+
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

## Deployment

To deploy your website and make it live, please go to the **Publish tab** where you can publish your project with one click. The Publish tab will handle all deployment processes automatically and provide you with the live website URL.

## Future Enhancements

Potential features for future development:
- [ ] Product search functionality
- [ ] Category filtering and sorting
- [ ] Product detail modal/popup
- [ ] Shopping cart integration
- [ ] Product comparison tool
- [ ] Customer reviews and ratings
- [ ] Admin panel for product management
- [ ] Multi-language support
- [ ] Dark mode theme
- [ ] Product recommendation engine

## Notes

- The application uses the Fetch API to load local text files
- Image URLs should be publicly accessible for proper display
- The current implementation tries to load files named `file1.txt` through `file4.txt`
- Error handling ensures the application continues working even if individual product files are missing or malformed