JavaScript Formatter

Format JavaScript code instantly. Beautify JS, indent properly, validate syntax, and make code readable. Perfect for developers!
Enter JavaScript Code:
                    <div class="option-group">
                        <label class="option-label">Indentation:</label>
                        <select id="indentType" class="option-input">
                            <option value="2">2 Spaces</option>
                            <option value="4" selected>4 Spaces</option>
                            <option value="8">8 Spaces</option>
                            <option value="tab">Tab</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Quote Style:</label>
                        <select id="quoteStyle" class="option-input">
                            <option value="single" selected>Single Quotes</option>
                            <option value="double">Double Quotes</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Semicolons:</label>
                        <select id="semicolons" class="option-input">
                            <option value="true" selected>Add Semicolons</option>
                            <option value="false">Remove Semicolons</option>
                        </select>
                    </div>
                    <div class="option-group">
                        <label class="option-label">Max Line Length:</label>
                        <input type="number" id="maxLineLength" class="option-input" value="80" min="40" max="200">
                    </div>
                </div>

                <div class="btn-group">
                    <button id="formatBtn" class="btn">Format JavaScript</button>
                    <button id="minifyBtn" class="btn btn-secondary">Minify Code</button>
                    <button id="validateBtn" class="btn btn-secondary">Validate Syntax</button>
                    <button id="clearBtn" class="btn btn-secondary">Clear All</button>
                </div>
            </div>

            <!-- Results -->
            <div class="results-section">
                <div class="results-header">
                    <h3 class="results-title">Formatted Code:</h3>
                    <button id="copyBtn" class="copy-btn">Copy to Clipboard</button>
                </div>
                <pre id="formattedOutput" class="formatted-code">Your formatted JavaScript code will appear here...</pre>
            </div>

            <!-- Stats -->
            <div class="stats-section">
                <div class="stat-card">
                    <div class="stat-value" id="lineCount">0</div>
                    <div class="stat-label">Lines</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="charCount">0</div>
                    <div class="stat-label">Characters</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="wordCount">0</div>
                    <div class="stat-label">Words</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="functionCount">0</div>
                    <div class="stat-label">Functions</div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>© 2024 FreeDownloadTools.com. All rights reserved. Made with ❤️ for creators worldwide.</p>
            <p><strong>Powered by <a href="https://likeprovider.net" target="_blank">LikeProvider.net</a></strong></p>
        </div>
    </footer>

    <script defer>
        // JavaScript Formatter Tool
        class JavaScriptFormatter {
            constructor() {
                this.initializeElements();
                this.bindEvents();
            }

            initializeElements() {
                this.jsInput = document.getElementById('jsInput');
                this.formattedOutput = document.getElementById('formattedOutput');
                this.formatBtn = document.getElementById('formatBtn');
                this.minifyBtn = document.getElementById('minifyBtn');
                this.validateBtn = document.getElementById('validateBtn');
                this.clearBtn = document.getElementById('clearBtn');
                this.copyBtn = document.getElementById('copyBtn');
                this.indentType = document.getElementById('indentType');
                this.quoteStyle = document.getElementById('quoteStyle');
                this.semicolons = document.getElementById('semicolons');
                this.maxLineLength = document.getElementById('maxLineLength');
                
                // Stats elements
                this.lineCount = document.getElementById('lineCount');
                this.charCount = document.getElementById('charCount');
                this.wordCount = document.getElementById('wordCount');
                this.functionCount = document.getElementById('functionCount');
            }

            bindEvents() {
                this.formatBtn.addEventListener('click', () => this.formatCode());
                this.minifyBtn.addEventListener('click', () => this.minifyCode());
                this.validateBtn.addEventListener('click', () => this.validateCode());
                this.clearBtn.addEventListener('click', () => this.clearAll());
                this.copyBtn.addEventListener('click', () => this.copyToClipboard());
                this.jsInput.addEventListener('input', () => this.updateStats());
            }

            formatCode() {
                const code = this.jsInput.value.trim();
                if (!code) {
                    this.showError('Please enter some JavaScript code to format.');
                    return;
                }

                try {
                    const formatted = this.beautifyJavaScript(code);
                    this.formattedOutput.textContent = formatted;
                    this.updateStats();
                    this.showSuccess('JavaScript code formatted successfully!');
                } catch (error) {
                    this.showError('Error formatting code: ' + error.message);
                }
            }

            minifyCode() {
                const code = this.jsInput.value.trim();
                if (!code) {
                    this.showError('Please enter some JavaScript code to minify.');
                    return;
                }

                try {
                    const minified = this.minifyJavaScript(code);
                    this.formattedOutput.textContent = minified;
                    this.updateStats();
                    this.showSuccess('JavaScript code minified successfully!');
                } catch (error) {
                    this.showError('Error minifying code: ' + error.message);
                }
            }

            validateCode() {
                const code = this.jsInput.value.trim();
                if (!code) {
                    this.showError('Please enter some JavaScript code to validate.');
                    return;
                }

                try {
                    // Basic syntax validation
                    new Function(code);
                    this.showSuccess('JavaScript syntax is valid!');
                } catch (error) {
                    this.showError('Syntax error: ' + error.message);
                }
            }

            beautifyJavaScript(code) {
                // Simple JavaScript beautifier
                let formatted = code;
                
                // Remove extra whitespace
                formatted = formatted.replace(/\s+/g, ' ');
                
                // Add line breaks after semicolons
                formatted = formatted.replace(/;/g, ';\n');
                
                // Add line breaks after opening braces
                formatted = formatted.replace(/\{/g, ' {\n');
                
                // Add line breaks after closing braces
                formatted = formatted.replace(/\}/g, '\n}\n');
                
                // Add line breaks after commas
                formatted = formatted.replace(/,/g, ',\n');
                
                // Add line breaks after operators
                formatted = formatted.replace(/([+\-*/=<>!&|])/g, ' $1\n');
                
                // Clean up multiple line breaks
                formatted = formatted.replace(/\n\s*\n/g, '\n');
                
                // Add proper indentation
                const lines = formatted.split('\n');
                let indentLevel = 0;
                const indentSize = parseInt(this.indentType.value) || 4;
                const indentChar = this.indentType.value === 'tab' ? '\t' : ' '.repeat(indentSize);
                
                const indentedLines = lines.map(line => {
                    const trimmedLine = line.trim();
                    if (!trimmedLine) return '';
                    
                    // Decrease indent for closing braces
                    if (trimmedLine.includes('}')) {
                        indentLevel = Math.max(0, indentLevel - 1);
                    }
                    
                    const indentedLine = indentChar.repeat(indentLevel) + trimmedLine;
                    
                    // Increase indent for opening braces
                    if (trimmedLine.includes('{')) {
                        indentLevel++;
                    }
                    
                    return indentedLine;
                });
                
                return indentedLines.join('\n');
            }

            minifyJavaScript(code) {
                // Simple JavaScript minifier
                return code
                    .replace(/\/\*[\s\S]*?\*\//g, '') // Remove block comments
                    .replace(/\/\/.*$/gm, '') // Remove line comments
                    .replace(/\s+/g, ' ') // Replace multiple spaces with single space
                    .replace(/\s*([{}();,+\-*/=<>!&|])\s*/g, '$1') // Remove spaces around operators
                    .replace(/;\s*}/g, '}') // Remove semicolons before closing braces
                    .trim();
            }

            updateStats() {
                const code = this.jsInput.value;
                const lines = code.split('\n').length;
                const chars = code.length;
                const words = code.split(/\s+/).filter(word => word.length > 0).length;
                const functions = (code.match(/function\s+\w+/g) || []).length + 
                                (code.match(/\w+\s*:\s*function/g) || []).length +
                                (code.match(/=>\s*{/g) || []).length;

                this.lineCount.textContent = lines;
                this.charCount.textContent = chars;
                this.wordCount.textContent = words;
                this.functionCount.textContent = functions;
            }

            clearAll() {
                this.jsInput.value = '';
                this.formattedOutput.textContent = 'Your formatted JavaScript code will appear here...';
                this.updateStats();
            }

            async copyToClipboard() {
                const text = this.formattedOutput.textContent;
                if (text === 'Your formatted JavaScript code will appear here...') {
                    this.showError('No formatted code to copy.');
                    return;
                }

                try {
                    await navigator.clipboard.writeText(text);
                    this.showSuccess('Code copied to clipboard!');
                } catch (error) {
                    // Fallback for older browsers
                    const textArea = document.createElement('textarea');
                    textArea.value = text;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                    this.showSuccess('Code copied to clipboard!');
                }
            }

            showSuccess(message) {
                this.showNotification(message, 'success');
            }

            showError(message) {
                this.showNotification(message, 'error');
            }

            showNotification(message, type) {
                // Remove existing notifications
                const existing = document.querySelector('.notification');
                if (existing) existing.remove();

                const notification = document.createElement('div');
                notification.className = `notification notification-${type}`;
                notification.textContent = message;
                notification.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    padding: 1rem 1.5rem;
                    border-radius: 10px;
                    color: white;
                    font-weight: 600;
                    z-index: 10000;
                    animation: slideIn 0.3s ease;
                    background: ${type === 'success' ? 'var(--success)' : '#dc3545'};
                `;

                document.body.appendChild(notification);

                setTimeout(() => {
                    notification.style.animation = 'slideOut 0.3s ease';
                    setTimeout(() => notification.remove(), 300);
                }, 3000);
            }
        }

        // Initialize the formatter when the page loads
        document.addEventListener('DOMContentLoaded', () => {
            new JavaScriptFormatter();
        });

        // Add CSS animations
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            @keyframes slideOut {
                from { transform: translateX(0); opacity: 1; }
                to { transform: translateX(100%); opacity: 0; }
            }
        `;
        document.head.appendChild(style);
    </script>
<!-- Mobile Menu Script --><script defer>document.addEventListener("DOMContentLoaded", function() { const mobileMenuToggle = document.querySelector(".mobile-menu-toggle"); const navLinks = document.querySelector(".nav-links"); if (mobileMenuToggle && navLinks) { mobileMenuToggle.addEventListener("click", function() { mobileMenuToggle.classList.toggle("active"); navLinks.classList.toggle("active"); }); navLinks.addEventListener("click", function(e) { if (e.target.tagName === "A") { mobileMenuToggle.classList.remove("active"); navLinks.classList.remove("active"); } }); document.addEventListener("click", function(e) { if (!mobileMenuToggle.contains(e.target) && !navLinks.contains(e.target)) { mobileMenuToggle.classList.remove("active"); navLinks.classList.remove("active"); } }); } });</script></body>
</html>