All-in-One Code Formatter | HTML/CSS/JS
š Select Code Language
š HTML Formatter
šØ CSS Formatter
ā” JavaScript Formatter
š Combined Formatter
// Formatted code will appear here
// 1. Paste your code in the left panel
// 2. Select language type
// 3. Click "Format Code" button
// 4. Get perfectly formatted code here
āļø Formatter Settings
āØ Format Code
š Load Example
š Copy Output
š¾ Download
āļø Settings
šļø Clear All
`;
break;
case 'css':
exampleCode = `/* Main Stylesheet */
:root {
--primary-color: #8b0000;
--secondary-color: #ffcc00;
--text-color: #333333;
--bg-color: #f8f9fa;
--font-family: 'Segoe UI', system-ui, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
}
/* Header Styles */
.main-header {
background: linear-gradient(135deg, var(--primary-color), #a50000);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.nav-list {
display: flex;
list-style: none;
gap: 2rem;
justify-content: center;
}
.nav-item a {
color: white;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 4px;
transition: background-color 0.3s;
}
.nav-item a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.navbar {
padding: 0 1rem;
}
}
/* Button Styles */
.cta-button {
background-color: var(--secondary-color);
color: var(--text-color);
border: none;
padding: 12px 24px;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.cta-button:hover {
background-color: #e6b800;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero {
animation: fadeIn 1s ease-out;
}`;
break;
case 'js':
exampleCode = `// JavaScript Example Code
class User {
constructor(name, email) {
this.name = name;
this.email = email;
this.createdAt = new Date();
this.isActive = true;
}
// Method to get user info
getInfo() {
return \`User: \${this.name} | Email: \${this.email}\`;
}
// Method to update email
updateEmail(newEmail) {
if (this.validateEmail(newEmail)) {
this.email = newEmail;
console.log(\`Email updated to: \${newEmail}\`);
return true;
}
return false;
}
// Email validation
validateEmail(email) {
const regex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
return regex.test(email);
}
// Static method
static createAdmin() {
return new User('Admin', 'admin@example.com');
}
}
// Function to calculate factorial
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
// Arrow function with array methods
const processNumbers = (numbers) => {
return numbers
.filter(num => num > 0)
.map(num => num * 2)
.reduce((sum, num) => sum + num, 0);
};
// Event handler
const handleClick = (event) => {
event.preventDefault();
const button = event.target;
button.textContent = 'Clicked!';
button.disabled = true;
// Timeout to reset button
setTimeout(() => {
button.textContent = 'Click Me';
button.disabled = false;
}, 2000);
};
// Async function example
const fetchData = async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(\`HTTP error! status: \${response.status}\`);
}
const data = await response.json();
console.log('Data received:', data);
return data;
} catch (error) {
console.error('Error fetching data:', error);
return null;
}
};
// Example usage
const main = () => {
console.log('Application started');
// Create user instance
const user1 = new User('John Doe', 'john@example.com');
console.log(user1.getInfo());
// Calculate factorial
const num = 5;
console.log(\`Factorial of \${num} is: \${factorial(num)}\`);
// Process numbers
const numbers = [1, -2, 3, 4, -5, 6];
const result = processNumbers(numbers);
console.log(\`Processed numbers result: \${result}\`);
// Create admin user
const admin = User.createAdmin();
console.log(admin.getInfo());
};
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', main);`;
break;
case 'all':
exampleCode = `
Complete Example
Interactive Color Changer
Click buttons to change the box color
Red
Yellow
Blue
Green
Random
`;
break;
}
document.getElementById('inputCode').value = exampleCode;
showNotification(`Loaded ${currentTab.toUpperCase()} example`, 'info');
// Auto-format after 1 second
setTimeout(formatCode, 1000);
}
// ============= SETTINGS FUNCTIONS =============
function toggleSettings() {
const panel = document.getElementById('settingsPanel');
panel.classList.toggle('active');
if (panel.classList.contains('active')) {
loadSettings();
}
}
function loadSettings() {
document.getElementById('indentSize').value = settings.indentSize;
document.getElementById('lineLength').value = settings.lineLength;
document.getElementById('autoIndent').checked = settings.autoIndent;
document.getElementById('trimWhitespace').checked = settings.trimWhitespace;
document.getElementById('preserveComments').checked = settings.preserveComments;
}
function saveSettings() {
settings.indentSize = document.getElementById('indentSize').value;
settings.lineLength = parseInt(document.getElementById('lineLength').value);
settings.autoIndent = document.getElementById('autoIndent').checked;
settings.trimWhitespace = document.getElementById('trimWhitespace').checked;
settings.preserveComments = document.getElementById('preserveComments').checked;
localStorage.setItem('codeFormatterSettings', JSON.stringify(settings));
showNotification('Settings saved!', 'success');
}
// ============= KEYBOARD SHORTCUTS =============
document.addEventListener('keydown', (e) => {
// Ctrl/Cmd + Enter: Format code
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
formatCode();
}
// Ctrl/Cmd + S: Save output
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
saveOutput();
}
// Ctrl/Cmd + C: Copy output
if ((e.ctrlKey || e.metaKey) && e.key === 'c' && e.target.id !== 'inputCode') {
e.preventDefault();
copyOutput();
}
// Ctrl/Cmd + E: Load example
if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
e.preventDefault();
loadExample();
}
// Ctrl/Cmd + L: Clear all
if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
e.preventDefault();
clearAll();
}
});
// ============= INITIALIZATION =============
function init() {
// Load saved settings
const savedSettings = localStorage.getItem('codeFormatterSettings');
if (savedSettings) {
settings = JSON.parse(savedSettings);
}
// Set default tab
selectTab('html');
// Show welcome message
setTimeout(() => {
showNotification('Welcome to All-in-One Code Formatter! Press Ctrl+Enter to format code.', 'info');
}, 1000);
// Auto-save settings
document.querySelectorAll('select, input').forEach(element => {
element.addEventListener('change', saveSettings);
});
}
// Helper functions for footer links
function showAbout() {
alert(`Complete Code Formatter v2.0\n\nFeatures:\nā¢ Format HTML, CSS, and JavaScript\nā¢ Syntax highlighting\nā¢ Multiple indentation options\nā¢ Save and load examples\nā¢ Keyboard shortcuts\nā¢ Works offline\n\nMade with ā¤ļø for developers`);
}
function showShortcuts() {
alert(`Keyboard Shortcuts:\n\nā¢ Ctrl/Cmd + Enter = Format Code\nā¢ Ctrl/Cmd + S = Save Output\nā¢ Ctrl/Cmd + C = Copy Output\nā¢ Ctrl/Cmd + E = Load Example\nā¢ Ctrl/Cmd + L = Clear All\n\nUse these shortcuts for faster workflow!`);
}
// Initialize when page loads
window.onload = init;