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, and quantity range
• 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, and quantity
• 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
• 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)
• Real-time result display with item cards
• Reset button to clear all filters
• Keyboard support (press Enter to search)

Sample Usage:

Search for "milk" in the Fridge with quantity >= 1
Results displayed using item-component for consistency

Available Items (20 total across all locations):

• Pantry: Pasta, Rice, Cereal, Flour, Sugar, Salt, Olive Oil, Canned Beans
• Fridge: Milk, Cheese, Greek Yogurt, Eggs, Butter, Chicken Salad
• Freezer: Ice Cream, Frozen Vegetables, Chicken Breast, Ground Beef, Pizza, Ice

📱 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
• 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)
3. Click "Search" or press Enter
4. Results display as item cards using the item component
5. Click "Reset" to clear all filters

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 in 5 days'
  });
  
  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', img: 'https://picsum.photos/seed/coffee/200/200' },
  // ... more items
];

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

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
• Consider a frontend framework (React, Vue, etc.) for scale
• Add unit/integration tests
• Set up CI/CD pipeline

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, locations within rooms, etc.)

License

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