{"id":25255,"date":"2026-06-12T14:02:18","date_gmt":"2026-06-12T14:02:18","guid":{"rendered":"https:\/\/umang.pk\/2026\/06\/12\/html%d8%8c-css%d8%8c-%d8%a7%d9%88%d8%b1-javascript-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%db%8c%d8%b3-%da%a9%d9%86%d9%88%d8%b1\/"},"modified":"2026-06-12T14:02:19","modified_gmt":"2026-06-12T14:02:19","slug":"html%d8%8c-css%d8%8c-%d8%a7%d9%88%d8%b1-javascript-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%db%8c%d8%b3-%da%a9%d9%86%d9%88%d8%b1","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/06\/12\/html%d8%8c-css%d8%8c-%d8%a7%d9%88%d8%b1-javascript-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-%da%a9%db%8c%d8%b3-%da%a9%d9%86%d9%88%d8%b1\/","title":{"rendered":"HTML\u060c CSS\u060c \u0627\u0648\u0631 JavaScript \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0633 \u06a9\u0646\u0648\u0631\u0679\u0631 \u0679\u0648\u0644 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div>: \u0627\u0633 \u062d\u0635\u06d2 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2: <code>span<\/code> \u0627\u06cc\u06a9 \u0645\u0646\u0641\u0631\u062f ID \u0648\u0627\u0644\u0627 \u0639\u0646\u0635\u0631\u06d4 \u0645\u062a\u0646 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u06a9\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c JavaScript \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0646 IDs \u06a9\u0648 \u06c1\u062f\u0641 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06af\u0644\u0627\u060c \u0627\u067e\u0646\u06d2 \u0622\u0644\u06d2 \u06a9\u0648 \u0635\u0627\u0641\u060c \u067e\u06cc\u0634\u06c1 \u0648\u0631\u0627\u0646\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u062f\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0627 <code>styles.css<\/code> \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-css\">* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Inter', sans-serif;\n}\n\nbody {\n    background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);\n    min-height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2rem;\n    color: #1e293b;\n}\n\n.app-container {\n    background: #ffffff;\n    width: 100%;\n    max-width: 900px;\n    border-radius: 24px;\n    box-shadow: 0 20px 40px rgba(0,0,0,0.08);\n    padding: 2.5rem;\n}\n\n.textarea-header {\n    display: flex;\n    justify-content: flex-end;\n    margin-bottom: 0.5rem;\n}\n\n.tip-badge {\n    background: #fef08a;\n    color: #854d0e;\n    padding: 0.35rem 0.85rem;\n    border-radius: 20px;\n    font-size: 0.75rem;\n    font-weight: 600;\n}\n\ntextarea {\n    width: 100%;\n    height: 220px;\n    padding: 1.5rem;\n    border: 2px solid #e2e8f0;\n    border-radius: 16px;\n    font-size: 1rem;\n    resize: vertical;\n    outline: none;\n    transition: all 0.3s ease;\n    background: #f8fafc;\n}\n\ntextarea:focus {\n    border-color: #007bff;\n    background: #fff;\n    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);\n}\n\n.button-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.75rem;\n    margin-top: 1.5rem;\n}\n\nbutton {\n    padding: 0.75rem 1.25rem;\n    border: none;\n    border-radius: 12px;\n    font-size: 0.875rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.case-btn {\n    background: #f1f5f9;\n    color: #475569;\n    border: 1px solid #e2e8f0;\n}\n\n.case-btn:hover { \n    background: #e2e8f0; \n}\n\n\/* The active class highlights the selected button *\/\n.case-btn.active {\n    background: #007bff;\n    color: #fff;\n    border-color: #007bff;\n    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);\n}\n\n.divider {\n    height: 1px;\n    background: #e2e8f0;\n    margin: 1.5rem 0;\n}\n\n.action-btn { \n    background: #fff; \n    border: 1px solid #cbd5e1; \n}\n\n.action-btn:hover { \n    background: #f8fafc; \n    border-color: #94a3b8; \n}\n\n.primary-action { \n    background: #007bff; \n    color: #fff; \n    border-color: #007bff; \n}\n\n.primary-action:hover { \n    background: #0056b3; \n    border-color: #0056b3; \n}\n\n.danger-action { \n    color: #ef4444; \n    border-color: #fca5a5; \n    background: #fef2f2; \n}\n\n.danger-action:hover { \n    background: #fee2e2; \n    border-color: #f87171; \n}\n\n.stats-panel {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));\n    gap: 1rem;\n    margin-top: 2rem;\n    background: #f8fafc;\n    padding: 1.5rem;\n    border-radius: 16px;\n    border: 1px solid #e2e8f0;\n}\n\n.stat-box { \n    display: flex; \n    flex-direction: column; \n    align-items: center; \n}\n\n.stat-value { \n    font-size: 1.75rem; \n    font-weight: 700; \n}\n\n.stat-label { \n    font-size: 0.75rem; \n    color: #64748b; \n    text-transform: uppercase; \n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u0648 \u0633\u0645\u062c\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2:<\/p>\n<ul>\n<li>\n<p><code>body<\/code>: Flexbox \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0679\u0648\u0644\u0632 \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0628\u0627\u0644\u06a9\u0644 \u0645\u0631\u06a9\u0632 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u06c1\u0645\u0648\u0627\u0631 \u06af\u0631\u0627\u0688\u06cc\u0646\u0679 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u0648 \u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><code>.app-container<\/code>: \u06cc\u0648\u0632\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0646\u0631\u0645 \u0633\u0627\u0626\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0633\u0641\u06cc\u062f\u060c \u06af\u0648\u0644 \u06a9\u0627\u0631\u0688 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><code>.case-btn.active<\/code>: \u06cc\u06c1\u0627\u06ba \u0641\u0639\u0627\u0644 \u062d\u0627\u0644\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u0644\u0627\u0633 \u06a9\u0648 \u0627\u0633 \u0645\u062e\u0635\u0648\u0635 \u0628\u0679\u0646 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 JavaScript \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u062c\u0633 \u067e\u0631 \u0635\u0627\u0631\u0641 \u06a9\u0644\u06a9 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0633 \u0645\u0631\u062d\u0644\u06d2 \u067e\u0631 \u06c1\u0645 \u0646\u06d2 \u06cc\u0648\u0632\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0679\u0631\u06a9\u0686\u0631 \u0627\u0648\u0631 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4 \u0679\u0648\u0644\u0632 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba:<\/p>\n<p>\u0627\u0628 \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u0627 \u062d\u0635\u06c1 \u0646\u0638\u0631 \u0622 \u0631\u06c1\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0628\u0679\u0646 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062c\u0627\u0645\u062f \u06c1\u06cc\u06ba\u06d4 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u062d\u0642\u06cc\u0642\u062a \u0645\u06cc\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0622\u067e \u06a9\u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0645\u06cc\u06ba \u0645\u0646\u0637\u0642 \u0644\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-4-add-javascript-functionality\">\u0645\u0631\u062d\u0644\u06c1 4: \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u0628 \u06c1\u0645\u06cc\u06ba \u0679\u0648\u0644 \u06a9\u0648 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u0627\u0641\u062a\u062a\u0627\u062d\u06cc <code>script.js<\/code> \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba:<\/p>\n<pre><code class=\"language-javascript\">const textArea = document.getElementById('inputText');\n\n\/\/ Listen for typing to update statistics in real-time\ntextArea.addEventListener('input', updateStats);\n\nfunction updateStats() {\n    const text = textArea.value;\n    \n    document.getElementById('charCount').textContent = text.length;\n    \n    const words = text.trim().split(\/s+\/).filter(word => word.length > 0);\n    document.getElementById('wordCount').textContent = words.length;\n    \n    const sentences = text.split(\/[.!?]+\/).filter(sentence => sentence.trim().length > 0);\n    document.getElementById('sentenceCount').textContent = sentences.length;\n    \n    const paragraphs = text.split(\/n+\/).filter(paragraph => paragraph.trim().length > 0);\n    document.getElementById('paragraphCount').textContent = paragraphs.length;\n}\n\nfunction convertCase(event, type) {\n    let text = textArea.value;\n    if (!text) return; \n\n    \/\/ Highlight the active button\n    const buttons = document.querySelectorAll('.case-btn');\n    buttons.forEach(btn => btn.classList.remove('active'));\n    if (event) {\n        event.target.classList.add('active');\n    }\n\n    \/\/ Process the text\n    switch (type) {\n        case 'upper':\n            text = text.toUpperCase();\n            break;\n        case 'lower':\n            text = text.toLowerCase();\n            break;\n        case 'capitalized':\n            text = text.toLowerCase().replace(\/bw\/g, c => c.toUpperCase());\n            break;\n        case 'title':\n            const minorWords = ['a', 'an', 'the', 'and', 'but', 'or', 'for', 'nor', 'on', 'at', 'to', 'from', 'by'];\n            text = text.toLowerCase().split(' ').map((word, index) => {\n                if (index !== 0 && minorWords.includes(word)) return word;\n                return word.charAt(0).toUpperCase() + word.slice(1);\n            }).join(' ');\n            break;\n        case 'sentence':\n            text = text.toLowerCase().replace(\/(^s*w|[.!?]n*s*w)\/g, c => c.toUpperCase());\n            break;\n        case 'inverse':\n            text = text.split('').map(c => c === c.toUpperCase() ? c.toLowerCase() : c.toUpperCase()).join('');\n            break;\n        case 'alternate':\n            text = text.toLowerCase().split('').map((c, i) => i % 2 === 0 ? c : c.toUpperCase()).join('');\n            break;\n    }\n\n    textArea.value = text;\n    updateStats(); \n}\n\nfunction copyToClipboard() {\n    if (!textArea.value) return;\n    textArea.select();\n    document.execCommand('copy');\n    \n    const copyBtn = document.querySelector('.copy-btn');\n    copyBtn.textContent=\"Copied!\";\n    setTimeout(() => copyBtn.textContent=\"Copy To Clipboard\", 1500);\n}\n\nfunction clearText() {\n    textArea.value=\"\";\n    updateStats();\n    document.querySelectorAll('.case-btn').forEach(btn => btn.classList.remove('active'));\n}\n\nfunction downloadWord() {\n    if (!textArea.value) return;\n    const blob = new Blob([textArea.value], { type: 'application\/msword' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = 'converted_text.doc';\n    a.click();\n    URL.revokeObjectURL(url);\n}\n\nfunction downloadPDF() {\n    if (!textArea.value) return;\n    const { jsPDF } = window.jspdf;\n    const doc = new jsPDF();\n    const splitText = doc.splitTextToSize(textArea.value, 180);\n    doc.text(splitText, 15, 15);\n    doc.save('converted_text.pdf');\n}\n<\/code><\/pre>\n<p>\u0627\u0633 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0633\u0645\u062c\u06be\u0646\u0627:<\/p>\n<ul>\n<li>\n<p><code>addEventListener('input', ...)<\/code>: \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u06cc \u0627\u0633\u0679\u0631\u0648\u06a9 \u0648\u0635\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u06d2 \u0679\u0627\u0626\u067e \u06a9\u0631\u062a\u06d2 \u06c1\u06cc \u06c1\u0631 \u0644\u0641\u0638\u060c \u06a9\u0631\u062f\u0627\u0631\u060c \u06cc\u0627 \u062c\u0645\u0644\u06d2 \u06a9\u0648 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0634\u0645\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>convertCase(event, type)<\/code>: \u06cc\u06c1 \u0641\u0646\u06a9\u0634\u0646 \u0645\u0646\u062a\u062e\u0628 \u0627\u0646\u062f\u0627\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 <code>upper<\/code> \u06cc\u0627 <code>sentence<\/code>) \u0627\u0648\u0631 \u0633\u0679\u0631\u0646\u06af\u0632 \u06a9\u0648 \u0641\u0627\u0631\u0645\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u06af\u0648\u0644\u0631 \u0627\u06cc\u06a9\u0633\u067e\u0631\u06cc\u0634\u0646\u0632 (Regex) \u06cc\u0627 \u0627\u0631\u06d2 \u0645\u06cc\u067e\u0646\u06af \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u0646\u0627\u06d4 \u06cc\u06c1 \u0645\u062a\u062d\u0631\u06a9 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06be\u06cc \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>.active<\/code> \u06a9\u0644\u06a9 \u06a9\u0631\u062f\u06c1 \u0645\u062e\u0635\u0648\u0635 \u0628\u0679\u0646 \u067e\u0631 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u0644\u0627\u0633 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>document.execCommand('copy')<\/code>: \u0627\u06cc\u06a9 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0645\u0627\u0646\u0688 \u062c\u0648 \u0645\u0646\u062a\u062e\u0628 \u0645\u062a\u0646 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u06a9\u0644\u067e \u0628\u0648\u0631\u0688 \u067e\u0631 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><code>new Blob()<\/code>: \u0628\u0644\u0627\u0628 (\u0628\u0627\u0626\u0646\u0631\u06cc \u0644\u0627\u0631\u062c \u0622\u0628\u062c\u06cc\u06a9\u0679) \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0645\u062a\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 <code>.doc<\/code> \u0627\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0633\u0631\u0648\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0628 \u0622\u067e \u0627\u06cc\u06a9 \u062d\u0642\u06cc\u0642\u06cc \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u0627\u062d\u0648\u0644 \u0645\u06cc\u06ba \u0627\u067e\u0646\u06d2 \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ol>\n<li>\n<p>\u0627\u0641\u062a\u062a\u0627\u062d\u06cc <code>case-converter-app<\/code> \u06cc\u06c1 \u0622\u067e \u06a9\u06d2 \u06a9\u0645\u067e\u06cc\u0648\u0679\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0641\u0648\u0644\u0688\u0631 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0688\u0628\u0644 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba <code>index.html<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0648 \u0639\u0645\u0644 \u0645\u06cc\u06ba \u0644\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u067e\u0646\u06d2 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u06a9\u0648 \u062f\u0631\u0633\u062a \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u06cc\u06a9\u0633\u0679 \u0627\u06cc\u0631\u06cc\u0627 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0644\u0645\u0628\u0627 \u067e\u06cc\u0631\u0627\u06af\u0631\u0627\u0641 \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 DOM \u06c1\u06cc\u0631\u0627 \u067e\u06be\u06cc\u0631\u06cc \u06a9\u0627 \u0645\u0634\u0627\u06c1\u062f\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0627\u0631\u0645\u06cc\u0679\u0646\u06af \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0633\u0648\u0626\u0686 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u062f\u0631\u0633\u062a \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0631\u0622\u0645\u062f\u06cc \u0628\u0679\u0646 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0646\u06d2 \u0648\u0646\u06cc\u0644\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u067e\u0631 \u0645\u0628\u0646\u06cc \u06a9\u06cc\u0633 \u06a9\u0646\u0648\u0631\u0679\u0631 \u0679\u0648\u0644 \u06a9\u0648 \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u0646\u06d2 \u0633\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u0645\u0633\u062a\u0642\u0644 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0627\u0646 \u067e\u0679 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u060c \u0631\u06cc\u06af\u0648\u0644\u0631 \u0627\u06cc\u06a9\u0633\u067e\u0631\u06cc\u0634\u0646\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0633\u0679\u0631\u0646\u06af \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u062c\u0648\u0691\u0646\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0645\u0642\u0627\u0645\u06cc \u0641\u0627\u0626\u0644 \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0633\u0627\u0645\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0633\u0631\u06d2 \u0633\u06d2 \u0645\u062a\u062d\u0631\u06a9 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0633\u0628 \u0633\u06d2 \u0627\u06c1\u0645 \u0628\u0627\u062a\u060c \u06c1\u0645 \u0646\u06d2 \u0633\u06cc\u06a9\u06be\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062c\u062f\u06cc\u062f \u0648\u06cc\u0628 \u0628\u0631\u0627\u0624\u0632\u0631\u0632 \u0628\u06cc\u0631\u0648\u0646\u06cc \u0628\u06cc\u06a9 \u0627\u06cc\u0646\u0688 \u0633\u0631\u0648\u0631\u0632 \u06a9\u06cc \u0633\u062e\u062a \u0636\u0631\u0648\u0631\u062a \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u0645\u0642\u0627\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06c1\u0644 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0637\u0631\u06cc\u0642\u06c1 \u062a\u06cc\u0632 \u0631\u0641\u062a\u0627\u0631 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af \u06a9\u06cc \u0631\u0641\u062a\u0627\u0631 \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0646\u062c\u06cc \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u0645\u0627\u062d\u0648\u0644 \u0645\u06cc\u06ba \u0627\u0646 \u062a\u0635\u0648\u0631\u0627\u062a \u06a9\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0628\u0644\u0627 \u062c\u06be\u062c\u06be\u06a9 \u0627\u0633 \u06a9\u06cc\u0633 \u06a9\u0646\u0648\u0631\u0679\u0631 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062a\u062c\u0631\u0628\u06c1 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u0645\u062a\u0646 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u062a\u0646\u06cc \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/p><\/div>\n<p data-test-label=\"social-row-cta\">\n<p>    \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0628 \u062a\u06a9 \u067e\u0691\u06be\u0627 \u06c1\u06d2 \u062a\u0648 \u0645\u0635\u0646\u0641 \u0645\u06cc\u06ba \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1\u06d4 <button id=\"tweet-btn\" class=\"cta-button\" data-test-label=\"tweet-button\">\u0634\u06a9\u0631\u06cc\u06c1<\/button><\/p>\n","protected":false},"excerpt":{"rendered":"<p>: \u0627\u0633 \u062d\u0635\u06d2 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2: span \u0627\u06cc\u06a9 \u0645\u0646\u0641\u0631\u062f ID \u0648\u0627\u0644\u0627 \u0639\u0646\u0635\u0631\u06d4 \u0645\u062a\u0646 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u06a9\u0648 \u062d\u0642\u06cc\u0642\u06cc \u0648\u0642\u062a \u0645\u06cc\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c JavaScript \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0646 IDs \u06a9\u0648 \u06c1\u062f\u0641 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u06af\u0644\u0627\u060c \u0627\u067e\u0646\u06d2 \u0622\u0644\u06d2 \u06a9\u0648 \u0635\u0627\u0641\u060c \u067e\u06cc\u0634\u06c1 \u0648\u0631\u0627\u0646\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u062f\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u0627 styles.css \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba: [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":25256,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-25255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=25255"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25255\/revisions"}],"predecessor-version":[{"id":25257,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25255\/revisions\/25257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/25256"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=25255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=25255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=25255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}