JavaScript Template - Feature Documentation

Overview

This HTML template provides a complete single-page application with modern JavaScript functionality, integrated logging, and responsive design. All JavaScript logic is centralized in main.js for maintainability and clean separation of concerns.

🚀 Quick Start

1. Open client/pages/index.html in a web browser
2. Or serve via local server: python -m http.server 8000
3. Navigate to: http://localhost:8000/client/pages/index.html

📁 Project Structure

Javascript-template/
├── main.js                          # Main application logic
├── client/
│   ├── pages/
│   │   └── index.html               # HTML template
│   └── css/
│       └── base.css                 # Styling
└── server/
    └── scripts/
        └── simple-logger.js         # Logging utility

🎯 Core Features

1. Theme System

• Light/Dark Mode Toggle: Click 🌙/☀️ buttons in header or settings modal
• Persistent Theme: Maintains theme state during session
• Smooth Transitions: CSS-based theme switching with animations
• Dual Controls: Theme toggle available in both header and settings modal

// Theme is controlled via data-theme attribute
document.documentElement.setAttribute("data-theme", currentTheme);

2. Single-Page Navigation

• Tab-Based Navigation: Home, About, Projects, Contact pages
• Active State Management: Visual indication of current page
• Smooth Page Transitions: Content switching without page reload
• URL Fragment Support: Smooth scrolling to anchor sections

// Navigation handled via data-page attributes
const pageId = button.getAttribute("data-page");
showPage(pageId);

3. Modal Dialog System

• Settings Modal: Configurable application settings
• Outside Click Dismiss: Click outside modal to close
• ESC Key Support: Close with escape key
• Theme Controls: Duplicate theme toggle in modal
• Log Level Configuration: Runtime logging level adjustment

4. Progress Bar System

• Visual Progress Feedback: Animated progress bar in footer
• Smooth Animation: 50-step progression with realistic variations
• Auto-Reset: Automatically resets after completion
• Logging Integration: Progress events logged with timestamps

// Progress simulation with realistic animation
const totalSteps = 50;
const variation = (Math.random() - 0.5) * 1; // ±0.5% variation

5. Integrated Logging System

• 5-Level Logging: ERROR, WARN, INFO, DEBUG, DEV
• Browser Console Output: Formatted, colored log messages
• Structured Data: JSON-formatted log context
• Runtime Level Control: Adjust logging verbosity via settings
• Timestamp Precision: Millisecond-accurate timestamps

Log Levels:

• NONE: No logging
• LOW: Errors only
• MED: Errors + Warnings
• HIGH: Errors + Warnings + Info + Debug (default)
• DEV: Everything including development messages

// Logger initialization
const logger = new SimpleLogger({
    appName: "HTMLTemplate",
    level: "HIGH",
    compactMode: true,
    showProcessId: false,
    enableFileLogging: false
});

6. Responsive Event Handling

• Window Resize Detection: Debounced resize event logging
• Smooth Scrolling: Enhanced anchor link behavior
• Click Event Management: Proper event delegation
• Keyboard Support: Modal ESC key handling

7. Interactive Demo Functions

• Test Logging: Demonstrates all log levels with sample data
• Progress Simulation: Shows realistic progress bar animation
• Theme Testing: Instant theme switching validation
• Navigation Testing: Page switching functionality

🔧 Technical Implementation

JavaScript Architecture

• Modular Design: Separated concerns with clear function boundaries
• Event-Driven: Uses event listeners for all user interactions
• State Management: Simple state tracking for theme and navigation
• Error Handling: Graceful degradation for missing elements

Performance Features

• Debounced Events: Window resize events debounced to 250ms
• Efficient Animations: RequestAnimationFrame-style progress updates
• Memory Management: Proper interval cleanup and event removal
• Lazy Loading: Events attached after DOM ready

Browser Compatibility

• Modern JavaScript: ES6+ features (arrow functions, const/let)
• DOM APIs: Uses standard DOM manipulation methods
• CSS Integration: Leverages CSS custom properties for theming
• Console Integration: Works with all major browser dev tools

🛠 Customization Guide

Adding New Pages

1. Create page content div with page-content class
2. Add navigation button with data-page attribute
3. Update showPage() function if needed

<div id="newPage" class="page-content" style="display: none">
    <h1>New Page</h1>
    <!-- Page content -->
</div>

Modifying Log Levels

// Change default logging level
logger.setLevel('DEV'); // Shows everything

// Add custom log messages
logger.info("Custom event", { userId: 123, action: "custom" });

Theme Customization

Modify CSS custom properties in base.css:

:root {
    --primary-color: #your-color;
    --background: #your-background;
}

Adding New Interactive Elements

// Follow the existing pattern
const newButton = document.getElementById("newButton");
newButton.addEventListener("click", () => {
    logger.info("New button clicked");
    // Your functionality here
});

🧪 Testing Features

Manual Testing Checklist

• Theme toggle works (header and modal)
• All navigation tabs switch content
• Settings modal opens/closes
• Progress bar animation completes
• Log messages appear in console
• Smooth scrolling to anchors works
• Window resize events logged

Console Commands

Test features directly in browser console:

// Test logging
testLogging();

// Test progress
simulateProgress();

// Change theme programmatically
toggleTheme();

// Check current log level
logger.getLevel();

📊 Performance Notes

• Lightweight: ~15KB total JavaScript (including logger)
• Fast Load: No external dependencies
• Responsive: Smooth 60fps animations
• Memory Efficient: Proper cleanup of intervals and timeouts

🔍 Debugging Tips

1. Check Console: All interactions are logged
2. Network Tab: Verify all files load (no 404s)
3. Elements Tab: Inspect theme attribute changes
4. Sources Tab: Set breakpoints in main.js for debugging

🚀 Production Considerations

• Minification: Consider minifying main.js for production
• CDN: Host static assets on CDN if needed
• Caching: Implement proper cache headers
• Error Tracking: Add error boundary handling
• Analytics: Integrate usage tracking if required

📝 File Dependencies

• Required: simple-logger.js (logging functionality)
• Required: base.css (styling and theme variables)
• Optional: Favicon for complete branding

This template provides a solid foundation for building modern web applications with proper logging, theming, and user interaction patterns.