@ssit-hub/mvp-generate-template/templates/js-esbuild-express-hbs/public/js/app.js

A beautiful CLI tool to quickly generate MVP project templates with modern frameworks and best practices

// TypeScript + ESBuild Express App - Frontend JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Add smooth scrolling to all links
    const links = document.querySelectorAll('a[href^="#"]');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // Add loading animation to buttons
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function() {
            if (!this.classList.contains('loading')) {
                this.classList.add('loading');
                setTimeout(() => {
                    this.classList.remove('loading');
                }, 2000);
            }
        });
    });

    // Add hover effects to cards
    const cards = document.querySelectorAll('.user-card, .feature-card, .tech-item');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // Console welcome message
    console.log('🚀 TypeScript + ESBuild Express App loaded!');
    console.log('📦 Built with: Express.js + Handlebars + TypeScript + ESBuild');
    
    // Add some interactive features for demo
    window.appUtils = {
        showNotification: function(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: ${type === 'error' ? '#e53e3e' : '#4299e1'};
                color: white;
                padding: 1rem 2rem;
                border-radius: 0.5rem;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                z-index: 1000;
                transform: translateX(400px);
                transition: transform 0.3s ease;
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.transform = 'translateX(0)';
            }, 100);
            
            setTimeout(() => {
                notification.style.transform = 'translateX(400px)';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        },
        
        formatNumber: function(num) {
            return new Intl.NumberFormat().format(num);
        },
        
        getRandomUser: function() {
            const users = ['John Doe', 'Jane Smith', 'Bob Johnson', 'Alice Brown', 'Charlie Wilson'];
            return users[Math.floor(Math.random() * users.length)];
        }
    };

    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Alt + H = Home
        if (e.altKey && e.key === 'h') {
            e.preventDefault();
            window.location.href = '/';
        }
        
        // Alt + U = Users
        if (e.altKey && e.key === 'u') {
            e.preventDefault();
            window.location.href = '/users';
        }
        
        // Alt + A = About
        if (e.altKey && e.key === 'a') {
            e.preventDefault();
            window.location.href = '/about';
        }
    });

    // Add loading state styles
    const style = document.createElement('style');
    style.textContent = `
        .btn.loading {
            position: relative;
            color: transparent !important;
        }
        
        .btn.loading::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border-radius: 50%;
            border: 2px solid transparent;
            border-top-color: #ffffff;
            animation: button-loading-spinner 1s ease infinite;
        }
        
        @keyframes button-loading-spinner {
            from {
                transform: rotate(0turn);
            }
            to {
                transform: rotate(1turn);
            }
        }
    `;
    document.head.appendChild(style);

    // Show welcome notification on home page
    if (window.location.pathname === '/') {
        setTimeout(() => {
            window.appUtils.showNotification('Welcome to the TypeScript + ESBuild Express App! 🚀');
        }, 1000);
    }
});