Webpage Playground

A modern inventory management demo app featuring multiple pages for browsing, searching, and scanning barcodes. Built with vanilla HTML, CSS, and JavaScript.

Overview

Webpage Playground is a lightweight, responsive web application for managing and tracking inventory across multiple storage locations (Pantry, Fridge, Freezer). The app includes:

• Dynamic Navigation — Easy page switching with a responsive navbar
• Inventory Demo — Display items using reusable item components
• Advanced Search — Filter inventory by name, location, quantity range, and expiry date
• Barcode Scanner — Scan barcodes for inventory management (keyboard and hardware scanner support)
• Data Visualization — Pie chart showing inventory distribution
• Responsive Design — Works on desktop, tablet, and mobile devices

Project Structure

Pages

• index.html — Homepage with item component demo and inventory pie chart
• search.html — Search and filter inventory by name, location, quantity, and expiry date
• barcode.html — Barcode scanner with console logging for testing
• pantry.html — Pantry inventory container
• fridge.html — Fridge inventory container
• freezer.html — Freezer inventory container

Core Modules

• navbar.js — Dynamic navigation bar system loaded by all pages
• main.css — Global styles and responsive design
• item-component.js — Reusable ES6 module for displaying inventory items in a grid
• search.js — Search and filtering logic with 20 sample inventory items including expiry dates
• barcode-scanner.js — Barcode capture and console logging module
• piechart.js — Inventory distribution pie chart visualization

Documentation

• ITEM_COMPONENT.md — Detailed documentation for the item component factory
• README.md — This file

Features Overview

🏠 Homepage (index.html)

The landing page showcasing the project with:

• Interactive item component grid (3 sample items)
• Inventory breakdown pie chart showing distribution across storage locations
• Responsive grid layout that adapts to screen size

Sample Data:

• Pantry: 104 items
• Fridge: 30 items
• Freezer: 87 items

🔍 Search Page (search.html)

Advanced inventory search and filtering interface.

Features:

• Search by item name (case-insensitive)
• Filter by storage location (All, Pantry, Fridge, Freezer)
• Filter by quantity range (min/max values)
• NEW: Filter by expiry date range (start date and end date)
• Real-time result display with item cards
• Visual expiry status indicators (Fresh, Expiring Soon, Expired)
• Reset button to clear all filters
• Keyboard support (press Enter to search)
• Date range validation (start date ≤ end date)

Expiry Date Features:

• Each inventory item includes an expiry date
• Visual badges show expiry status:
  • 🟢 Fresh — Items expiring in more than 7 days
  • 🟠 Expiring Soon — Items expiring within 7 days
  • 🔴 Expired — Items past expiry date
• Formatted expiry dates displayed on item cards
• Filter by start and end date to find items expiring in a specific timeframe

Sample Usage:

Search for items expiring between March 15 and April 15
Results show all items with expiry dates in that range
Items display formatted dates and expiry status badges

Available Items (20 total across all locations):

• Pantry: Pasta (120 days), Rice (180 days), Cereal (60 days), Flour (150 days), Sugar (200 days), Salt (365 days), Olive Oil (90 days), Canned Beans (EXPIRED -10 days)
• Fridge: Milk (5 days), Cheese (30 days), Greek Yogurt (7 days), Eggs (21 days), Butter (45 days), Chicken Salad (EXPIRED -2 days)
• Freezer: Ice Cream (90 days), Frozen Vegetables (180 days), Chicken Breast (120 days), Ground Beef (150 days), Pizza (200 days), Ice (365 days)

📱 Barcode Scanner (barcode.html)

Barcode capture interface with console logging for testing.

Features:

• Keyboard input simulation (type barcode + press Enter)
• Hardware barcode scanner device support (ready for integration)
• Paste support (Ctrl/Cmd+V)
• Console logging with formatted output including:
  • Timestamp (HH:MM:SS.mmm format)
  • Barcode value
  • Input type detection (keyboard, hardware-scanner, keyboard-paste)
  • Metadata for debugging
• Auto-focus input field after each scan
• Visual status indicator
• Helper instructions and "Open Console" button

Console Output Format:

[Barcode Scanned] 14:07:32.456 | Barcode: 5901234123457 | Input: keyboard

Testing Instructions:

1. Navigate to the Barcode Scanner page via navbar
2. Type a barcode value or use a barcode scanner device
3. Press Enter to complete the scan
4. Press F12 to open Developer Tools
5. Switch to the Console tab to view scanned barcodes with metadata

📦 Storage Location Pages

• pantry.html — Pantry inventory (expandable for displaying specific items)
• fridge.html — Fridge inventory
• freezer.html — Freezer inventory

These pages are currently placeholder containers ready for future development (e.g., displaying items specific to each location).

Quick Start

The project is a static site. For best results, serve it over HTTP (ES module imports can be blocked when opened via the file:// protocol in some browsers).

Python 3 (Recommended)

# From the project root
python -m http.server 8000

# Then open http://localhost:8000 in your browser

Alternative Options

• VS Code Live Server Extension — Right-click index.html → "Open with Live Server"
• Node.js http-server — npx http-server
• Any static file server

Usage

Navigation

The navbar appears at the top of every page and provides links to:

• Homepage — Main demo page with pie chart
• Search — Advanced inventory search and filtering with expiry date support
• Barcode Scanner — Barcode capture interface (testing via console)
• Pantry, Fridge, Freezer — Individual storage location pages

Using the Search Page

1. Open the Search page from the navbar
2. Enter search criteria:
   • Item name (optional)
   • Storage location (optional, defaults to "All")
   • Quantity range (optional, defaults to 0-999)
   • Expiry date range (optional) — Leave blank to ignore
3. Click "Search" or press Enter
4. Results display as item cards using the item component with expiry status badges
5. Click "Reset" to clear all filters

Expiry Date Search Examples:

• Find items expiring soon: Set start date to today, end date to 7 days from today
• Find expired items: Set start date to 100 days ago, end date to today
• Find fresh items: Set start date to tomorrow, end date to 90 days from today

Using the Barcode Scanner

1. Open the Barcode Scanner page from the navbar
2. Click in the input field (auto-focused)
3. Enter a barcode:
   • Type manually and press Enter
   • Scan with a barcode scanner device
   • Paste a value (Ctrl/Cmd+V)
4. Press F12 to open Developer Tools Console
5. View scanned barcodes in the Console tab with timestamp and metadata

The Item Component

The item-component is a reusable UI building block used throughout the app. See ITEM_COMPONENT.md for detailed documentation on using it in your own pages.

Quick Example:

<script type="module">
  import createItemComponent from './item-component.js';
  
  const item = createItemComponent({
    imgSrc: 'https://picsum.photos/seed/1/200/200',
    imgAlt: 'Milk',
    text1: 'Milk',
    text2: 'Fridge — 1 carton',
    text3: 'Expires Mar 15, 2026'
  });
  
  document.getElementById('container').appendChild(item);
</script>

Customizing and Extending

Adding New Items to Search

Edit search.js and add items to the inventoryData array:

export const inventoryData = [
  { 
    id: 21, 
    name: 'Coffee', 
    location: 'Pantry', 
    quantity: 2, 
    unit: 'bags', 
    expiryDate: '2026-06-15',
    img: 'https://picsum.photos/seed/coffee/200/200' 
  },
  // ... more items
];

Date Format: Use ISO 8601 format (YYYY-MM-DD) for expiry dates.

Styling

• Override styles in main.css for global changes
• Page-specific styles are included in <style> tags within each HTML file
• The item component injects responsive grid CSS automatically
• Expiry badge styles can be customized via .expiry-fresh, .expiry-soon, .expiry-expired classes

Creating New Pages

1. Create a new .html file following the template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>Page Title</title>
</head>
<body>
  <div id="navbar-placeholder"></div>
  <div id="page-content">
    <h2>Page Title</h2>
    <!-- Your content here -->
  </div>
  <script src="navbar.js"></script>
</body>
</html>

2. Update navbar.js to add a link to your new page:

<li><a href="yourpage.html" data-route="yourpage.html">Your Page</a></li>

Converting to Production

• Replace placeholder images with real inventory photos
• Implement backend storage (currently using static data)
• Add user authentication
• Integrate with real barcode/UPC database
• Consider a frontend framework (React, Vue, etc.) for scale
• Add unit/integration tests
• Set up CI/CD pipeline
• Implement database for persistent storage and expiry date tracking

Contributing

Contributions are welcome! Suggested improvements:

• Add unit and visual tests
• Replace placeholder images with real inventory photos
• Implement barcode scanner backend integration (save to database)
• Add user accounts and authentication
• Implement item editing/deletion on storage pages
• Add barcode/UPC lookup for real products
• Convert item-component to custom element (<item-component>)
• Add more detailed inventory tracking (expiration dates calculations, locations within rooms, batch numbers, etc.)
• Add email/notification alerts for items expiring soon
• Implement CSV import/export for inventory

License

Use as you like; no license file is included by default.