app.js

// Simple JavaScript for interactive features
let clickCount = 0;
let currentBackgroundIndex = 0;

// Background color variations
const backgroundClasses = ['', 'bg-variant-1', 'bg-variant-2', 'bg-variant-3', 'bg-variant-4'];

// Function to change background color
function changeBackgroundColor() {
    // Increment click counter
    clickCount++;
    document.getElementById('clickCounter').textContent = `Clicks: ${clickCount}`;
    
    // Remove current background class
    document.body.className = '';
    
    // Cycle through background variations
    currentBackgroundIndex = (currentBackgroundIndex + 1) % backgroundClasses.length;
    
    // Apply new background class
    if (backgroundClasses[currentBackgroundIndex]) {
        document.body.classList.add(backgroundClasses[currentBackgroundIndex]);
    }
    
    // Add a fun animation effect
    document.getElementById('colorButton').style.transform = 'scale(0.95)';
    setTimeout(() => {
        document.getElementById('colorButton').style.transform = '';
    }, 150);
}

// Welcome message when page loads
document.addEventListener('DOMContentLoaded', function() {
    console.log('🎉 Welcome to your first web app!');
    console.log('💡 Tip: Open the browser developer tools (F12) to see this message and experiment with the console!');
    
    // Add some console styling for fun
    console.log('%c🚀 Ready for development!', 'color: #667eea; font-size: 16px; font-weight: bold;');
    
    // Show a brief welcome animation
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease-in';
    
    setTimeout(() => {
        document.body.style.opacity = '1';
    }, 100);
});

// Fun keyboard shortcut (press 'c' to change colors)
document.addEventListener('keydown', function(event) {
    if (event.key.toLowerCase() === 'c') {
        changeBackgroundColor();
    }
});

// Display current time (updates every second)
function updateTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    
    // Create time display if it doesn't exist
    if (!document.getElementById('currentTime')) {
        const timeDisplay = document.createElement('div');
        timeDisplay.id = 'currentTime';
        timeDisplay.style.cssText = `
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #4a5568;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        `;
        document.body.appendChild(timeDisplay);
    }
    
    document.getElementById('currentTime').textContent = `Current time: ${timeString}`;
}

// Update time every second
setInterval(updateTime, 1000);
updateTime(); // Initial call