CSS फॉर्मैटर

// DOM तत्वों को प्राप्त करना const cssInput = document.getElementById(‘cssInput’); const output = document.getElementById(‘output’); const formatBtn = document.getElementById(‘formatBtn’); const copyBtn = document.getElementById(‘copyBtn’); const downloadBtn = document.getElementById(‘downloadBtn’); const fileInput = document.getElementById(‘fileInput’); const toast = document.getElementById(‘toast’); // सभी विकल्प तत्वों को प्राप्त करना const options = { sortProperties: document.getElementById(‘sortProperties’), removeComments: document.getElementById(‘removeComments’), alignColons: document.getElementById(‘alignColons’), compressOutput: document.getElementById(‘compressOutput’), vendorPrefix: document.getElementById(‘vendorPrefix’), removeEmptyRules: document.getElementById(‘removeEmptyRules’), convertRGBToHex: document.getElementById(‘convertRGBToHex’), removeLastSemicolon: document.getElementById(‘removeLastSemicolon’), indentSize: document.getElementById(‘indentSize’) }; // टोस्ट नोटिफिकेशन दिखाने का फंक्शन function showToast(message, isError = false) { toast.textContent = message; toast.classList.toggle(‘error’, isError); toast.classList.add(‘show’); setTimeout(() => toast.classList.remove(‘show’), 3000); } // पार्टिकल इफेक्ट बनाने का फंक्शन function createParticles(x, y) { const particleCount = 15; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); const size = Math.random() * 8 + 4; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}px`; particle.style.top = `${y}px`; const angle = Math.random() * Math.PI * 2; const distance = Math.random() * 100; document.body.appendChild(particle); const animation = particle.animate( [ { transform: 'translate(0, 0)', opacity: 1 }, { transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`, opacity: 0 } ], { duration: 800, easing: 'ease-out' } ); animation.onfinish = () => { particle.remove(); }; } } // RGB को HEX कलर में बदलने का फंक्शन function rgbToHex(rgb) { const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); if (!match) return rgb; const r = parseInt(match[1]); const g = parseInt(match[2]); const b = parseInt(match[3]); const toHex = (n) => { const hex = n.toString(16); return hex.length === 1 ? ‘0’ + hex : hex; }; return `#${toHex(r)}${toHex(g)}${toHex(b)}`; } // CSS को फॉर्मेट करने का फंक्शन function formatCSS(css) { // टिप्पणियों को हटाएं (यदि विकल्प चेक किया गया है) if (options.removeComments.checked) { css = css.replace(/\/\*[\s\S]*?\*\//g, ”); } // नियमों में विभाजित करें let rules = css.split(‘}’) .filter(rule => rule.trim()) .map(rule => { let [selector, properties] = rule.split(‘{‘); if (!properties) return ”; // सेलेक्टर को साफ करें selector = selector.trim(); // खाली नियमों को छोड़ें (यदि विकल्प चेक किया गया है) if (options.removeEmptyRules.checked && !properties.trim()) { return ”; } // गुणों को एरे में विभाजित करें let propsArray = properties .split(‘;’) .filter(prop => prop.trim()) .map(prop => prop.trim()); // वेंडर प्रीफिक्स को सॉर्ट करें if (options.vendorPrefix.checked) { propsArray.sort((a, b) => { const aPrefix = a.match(/^-\w+-/) || [”]; const bPrefix = b.match(/^-\w+-/) || [”]; return aPrefix[0].localeCompare(bPrefix[0]); }); } // गुणों को सॉर्ट करें (यदि विकल्प चेक किया गया है) if (options.sortProperties.checked) { propsArray.sort((a, b) => { const aProp = a.split(‘:’)[0].trim(); const bProp = b.split(‘:’)[0].trim(); return aProp.localeCompare(bProp); }); } // RGB को HEX में बदलें (यदि विकल्प चेक किया गया है) if (options.convertRGBToHex.checked) { propsArray = propsArray.map(prop => { const [name, value] = prop.split(‘:’); if (value && value.includes(‘rgb(‘)) { return `${name}: ${rgbToHex(value.trim())}`; } return prop; }); } // कोलन संरेखण के लिए अधिकतम गुण नाम की लंबाई खोजें let maxPropLength = 0; if (options.alignColons.checked) { propsArray.forEach(prop => { const propName = prop.split(‘:’)[0]; maxPropLength = Math.max(maxPropLength, propName.trim().length); }); } const indent = ‘ ‘.repeat(parseInt(options.indentSize.value)); // गुणों को फॉर्मेट करें let formattedProps = propsArray.map((prop, index) => { let [propName, propValue] = prop.split(‘:’); propName = propName.trim(); propValue = propValue ? propValue.trim() : ”; if (options.alignColons.checked) { const padding = ‘ ‘.repeat(maxPropLength – propName.length); return `${indent}${propName}${padding}: ${propValue}`; } else { return `${indent}${propName}: ${propValue}`; } }); // अंतिम सेमीकोलन को हटाएं (यदि विकल्प चेक किया गया है) if (options.removeLastSemicolon.checked && formattedProps.length > 0) { formattedProps[formattedProps.length – 1] = formattedProps[formattedProps.length – 1].replace(‘;’, ”); } // गुणों को जोड़ें let result = formattedProps.join(‘;\n’); if (!options.removeLastSemicolon.checked) { result += ‘;’; } // सेलेक्टर और गुणों को जोड़ें if (options.compressOutput.checked) { return `${selector}{${formattedProps.join(‘;’)}}`; } else { return `${selector} {\n${result}\n}`; } }) .filter(rule => rule); // खाली नियमों को हटाएं return options.compressOutput.checked ? rules.join(”) : rules.join(‘\n\n’); } // फाइल इम्पोर्ट हैंडलर fileInput.addEventListener(‘change’, (e) => { const file = e.target.files[0]; if (file && file.type === ‘text/css’) { const reader = new FileReader(); reader.onload = (event) => { cssInput.value = event.target.result; showToast(‘CSS फाइल सफलतापूर्वक इम्पोर्ट की गई’); }; reader.onerror = () => { showToast(‘फाइल पढ़ने में त्रुटि हुई’, true); }; reader.readAsText(file); } else { showToast(‘कृपया एक वैध CSS फाइल चुनें’, true); } }); // फॉर्मेट बटन हैंडलर formatBtn.addEventListener(‘click’, (e) => { const css = cssInput.value.trim(); if (!css) { showToast(‘कृपया CSS कोड दर्ज करें’, true); return; } try { const formattedCSS = formatCSS(css); output.value = formattedCSS; copyBtn.disabled = !formattedCSS; downloadBtn.disabled = !formattedCSS; const rect = e.target.getBoundingClientRect(); createParticles(e.clientX, rect.top); showToast(‘CSS सफलतापूर्वक फॉर्मेट की गई’); } catch (error) { showToast(‘CSS फॉर्मेट करने में त्रुटि हुई’, true); console.error(error); } }); // कॉपी बटन हैंडलर copyBtn.addEventListener(‘click’, async () => { try { await navigator.clipboard.writeText(output.value); showToast(‘CSS क्लिपबोर्ड पर कॉपी की गई’); const originalText = copyBtn.textContent; copyBtn.textContent = “कॉपी हो गया!”; setTimeout(() => { copyBtn.textContent = originalText; }, 2000); } catch (error) { showToast(‘क्लिपबोर्ड पर कॉपी करने में त्रुटि हुई’, true); } }); // डाउनलोड बटन हैंडलर downloadBtn.addEventListener(‘click’, () => { try { const blob = new Blob([output.value], { type: ‘text/css’ }); const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href = url; a.download = ‘formatted.css’; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast(‘CSS फाइल डाउनलोड की गई’); } catch (error) { showToast(‘फाइल डाउनलोड करने में त्रुटि हुई’, true); } }); // इनपुट परिवर्तन हैंडलर cssInput.addEventListener(‘input’, () => { copyBtn.disabled = true; downloadBtn.disabled = true; }); // प्रारंभिकरण copyBtn.disabled = true; downloadBtn.disabled = true;