HTML، CSS، اور JavaScript کا استعمال کرتے ہوئے کیس کنورٹر ٹول کیسے بنایا جائے۔

: اس حصے پر مشتمل ہے: span ایک منفرد ID والا عنصر۔ متن کے اعدادوشمار کو حقیقی وقت میں اپ ڈیٹ کرنے کے لیے، JavaScript کا استعمال کرتے ہوئے ان IDs کو ہدف بنائیں۔

اگلا، اپنے آلے کو صاف، پیشہ ورانہ ڈیزائن دیں۔ آپ کا styles.css ایک فائل بنائیں اور درج ذیل کوڈ شامل کریں:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #1e293b;
}

.app-container {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    padding: 2.5rem;
}

.textarea-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.tip-badge {
    background: #fef08a;
    color: #854d0e;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

textarea {
    width: 100%;
    height: 220px;
    padding: 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 1rem;
    resize: vertical;
    outline: none;
    transition: all 0.3s ease;
    background: #f8fafc;
}

textarea:focus {
    border-color: #007bff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

button {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.case-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.case-btn:hover { 
    background: #e2e8f0; 
}

/* The active class highlights the selected button */
.case-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
}

.divider {
    height: 1px;
    background: #e2e8f0;
    margin: 1.5rem 0;
}

.action-btn { 
    background: #fff; 
    border: 1px solid #cbd5e1; 
}

.action-btn:hover { 
    background: #f8fafc; 
    border-color: #94a3b8; 
}

.primary-action { 
    background: #007bff; 
    color: #fff; 
    border-color: #007bff; 
}

.primary-action:hover { 
    background: #0056b3; 
    border-color: #0056b3; 
}

.danger-action { 
    color: #ef4444; 
    border-color: #fca5a5; 
    background: #fef2f2; 
}

.danger-action:hover { 
    background: #fee2e2; 
    border-color: #f87171; 
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.stat-box { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.stat-value { 
    font-size: 1.75rem; 
    font-weight: 700; 
}

.stat-label { 
    font-size: 0.75rem; 
    color: #64748b; 
    text-transform: uppercase; 
}

اس سی ایس ایس کو سمجھنے کے لیے:

body: Flexbox کا استعمال کریں تاکہ آپ اپنے ٹولز کو اسکرین پر بالکل مرکز میں رکھیں اور ایک ہموار گراڈینٹ پس منظر کو لاگو کریں۔
.app-container: یوزر انٹرفیس رکھنے کے لیے نرم سائے کے ساتھ ایک سفید، گول کارڈ بنائیں۔
.case-btn.active: یہاں فعال حالت کی وضاحت کریں۔ اس کلاس کو اس مخصوص بٹن پر لاگو کرنے کے لیے JavaScript استعمال کریں جس پر صارف کلک کرتا ہے۔

اس مرحلے پر ہم نے یوزر انٹرفیس کو مکمل طور پر سٹرکچر اور اسٹائل کیا ہے۔ ٹولز میں شامل ہیں:

اب سامنے والا حصہ نظر آ رہا ہے، لیکن بٹن مکمل طور پر جامد ہیں۔ تبدیلی کو حقیقت میں کام کرنے کے لیے، آپ کو جاوا اسکرپٹ میں منطق لکھنے کی ضرورت ہے۔

مرحلہ 4: جاوا اسکرپٹ کی فعالیت شامل کریں۔

اب ہمیں ٹول کو انٹرایکٹو بنانے کی ضرورت ہے۔ افتتاحی script.js ایک فائل بنائیں اور درج ذیل کوڈ شامل کریں:

const textArea = document.getElementById('inputText');

// Listen for typing to update statistics in real-time
textArea.addEventListener('input', updateStats);

function updateStats() {
    const text = textArea.value;
    
    document.getElementById('charCount').textContent = text.length;
    
    const words = text.trim().split(/s+/).filter(word => word.length > 0);
    document.getElementById('wordCount').textContent = words.length;
    
    const sentences = text.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0);
    document.getElementById('sentenceCount').textContent = sentences.length;
    
    const paragraphs = text.split(/n+/).filter(paragraph => paragraph.trim().length > 0);
    document.getElementById('paragraphCount').textContent = paragraphs.length;
}

function convertCase(event, type) {
    let text = textArea.value;
    if (!text) return; 

    // Highlight the active button
    const buttons = document.querySelectorAll('.case-btn');
    buttons.forEach(btn => btn.classList.remove('active'));
    if (event) {
        event.target.classList.add('active');
    }

    // Process the text
    switch (type) {
        case 'upper':
            text = text.toUpperCase();
            break;
        case 'lower':
            text = text.toLowerCase();
            break;
        case 'capitalized':
            text = text.toLowerCase().replace(/bw/g, c => c.toUpperCase());
            break;
        case 'title':
            const minorWords = ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by'];
            text = text.toLowerCase().split(' ').map((word, index) => {
                if (index !== 0 && minorWords.includes(word)) return word;
                return word.charAt(0).toUpperCase() + word.slice(1);
            }).join(' ');
            break;
        case 'sentence':
            text = text.toLowerCase().replace(/(^s*w|[.!?]n*s*w)/g, c => c.toUpperCase());
            break;
        case 'inverse':
            text = text.split('').map(c => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase()).join('');
            break;
        case 'alternate':
            text = text.toLowerCase().split('').map((c, i) => i % 2 === 0 ? c : c.toUpperCase()).join('');
            break;
    }

    textArea.value = text;
    updateStats(); 
}

function copyToClipboard() {
    if (!textArea.value) return;
    textArea.select();
    document.execCommand('copy');
    
    const copyBtn = document.querySelector('.copy-btn');
    copyBtn.textContent="Copied!";
    setTimeout(() => copyBtn.textContent="Copy To Clipboard", 1500);
}

function clearText() {
    textArea.value="";
    updateStats();
    document.querySelectorAll('.case-btn').forEach(btn => btn.classList.remove('active'));
}

function downloadWord() {
    if (!textArea.value) return;
    const blob = new Blob([textArea.value], { type: 'application/msword' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'converted_text.doc';
    a.click();
    URL.revokeObjectURL(url);
}

function downloadPDF() {
    if (!textArea.value) return;
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    const splitText = doc.splitTextToSize(textArea.value, 180);
    doc.text(splitText, 15, 15);
    doc.save('converted_text.pdf');
}

اس جاوا اسکرپٹ کو سمجھنا:

addEventListener('input', ...): ہر ایک کی اسٹروک وصول کرتا ہے۔ آپ کے ٹائپ کرتے ہی ہر لفظ، کردار، یا جملے کو فوری طور پر دوبارہ شمار کیا جاتا ہے۔
convertCase(event, type): یہ فنکشن منتخب انداز کے ساتھ کام کرتا ہے، جیسے upper یا sentence) اور سٹرنگز کو فارمیٹ کرنے کے لیے ریگولر ایکسپریشنز (Regex) یا ارے میپنگ کا اطلاق کرنا۔ یہ متحرک طور پر بھی شامل کرتا ہے۔ .active کلک کردہ مخصوص بٹن پر سی ایس ایس کلاس کا اطلاق ہوتا ہے۔
document.execCommand('copy'): ایک براؤزر کمانڈ جو منتخب متن کو براہ راست صارف کے کلپ بورڈ پر کاپی کرتا ہے۔
new Blob(): بلاب (بائنری لارج آبجیکٹ) کا استعمال کرتے ہوئے فائلوں کو متن کے ساتھ ترتیب دیں۔ اس کے ذریعے صارفین .doc اس فائل کو بیک اینڈ سرور کی ضرورت نہیں ہے۔

اب آپ ایک حقیقی براؤزر ماحول میں اپنے کوڈ کا جائزہ لینے کے لیے تیار ہیں۔

افتتاحی case-converter-app یہ آپ کے کمپیوٹر پر ایک فولڈر ہے۔
ڈبل کلک کریں index.html یہ ایک ایپلیکیشن کو عمل میں لانے کے لیے ایک فائل ہے۔
اپنے ریئل ٹائم اعدادوشمار کو درست طریقے سے اپ ڈیٹ کرنے کے لیے ٹیکسٹ ایریا میں ایک لمبا پیراگراف چسپاں کریں۔
فوری طور پر DOM ہیرا پھیری کا مشاہدہ کرنے کے لیے فارمیٹنگ کے اختیارات کے درمیان سوئچ کریں اور فائل کے درست طریقے سے ڈاؤن لوڈ ہونے کو یقینی بنانے کے لیے برآمدی بٹن کی جانچ کریں۔

نتیجہ

اس ٹیوٹوریل میں، آپ نے ونیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے براؤزر پر مبنی کیس کنورٹر ٹول کو کامیابی سے بنایا ہے۔

آپ نے سیکھا کہ کس طرح مستقل صارف کے ان پٹ کو ہینڈل کرنا ہے، ریگولر ایکسپریشنز کا استعمال کرتے ہوئے سٹرنگ ڈیٹا کو جوڑنا ہے، اور مقامی فائل ڈاؤن لوڈ کو براہ راست سامنے والے سرے سے متحرک کرنا ہے۔

سب سے اہم بات، ہم نے سیکھا ہے کہ جدید ویب براؤزرز بیرونی بیک اینڈ سرورز کی سخت ضرورت کو ختم کرتے ہوئے، مقامی طور پر پیچیدہ دستاویزات میں ترمیم کرنے کے زیادہ اہل ہیں۔ یہ طریقہ تیز رفتار پروسیسنگ کی رفتار کو یقینی بناتا ہے اور صارف کے ڈیٹا کو مکمل طور پر نجی رکھتا ہے۔

اگر آپ پیداواری ماحول میں ان تصورات کو حقیقی وقت میں ظاہر کرنا چاہتے ہیں، تو بلا جھجھک اس کیس کنورٹر کی جانچ کریں اور تجربہ کریں کہ یہ متن کی تبدیلیاں کتنی آسانی سے کام کرتی ہیں۔

اگر آپ نے اب تک پڑھا ہے تو مصنف میں دلچسپی کا شکریہ۔

مرحلہ 4: جاوا اسکرپٹ کی فعالیت شامل کریں۔

نتیجہ

Related Posts