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

ایک مضمون، ٹویٹ، یا بلاگ پوسٹ لکھتے وقت، اپنے الفاظ کی گنتی اور کرداروں کی گنتی پر نظر رکھنا بہت ضروری ہے۔

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

یہ ٹول مکمل طور پر آپ کے براؤزر میں چلتا ہے، لہذا یہ آپ کے ٹائپ کرتے ہی کام کرتا ہے اور آپ کے ٹیکسٹ ڈیٹا کو مکمل طور پر نجی رکھتا ہے۔

آئیے شروع کرتے ہیں۔

شرطیں

آسانی سے اس گائیڈ پر عمل کرنے کے لیے، آپ کو ضرورت ہو گی:

• ایچ ٹی ایم ایل ٹیگز اور سی ایس ایس اسٹائلز کی بنیادی تفہیم۔

• جاوا اسکرپٹ کے تصورات جیسے فنکشنز، ایونٹ سننے والے، اور بنیادی ریگولر ایکسپریشنز (Regex) کا علم۔

• کوڈ ایڈیٹرز اور ویب براؤزرز، جیسے VS کوڈ۔

انڈیکس

مرحلہ 1: اپنا پروجیکٹ مرتب کریں۔

سب سے پہلے آپ کو اپنی ورک اسپیس سیٹ اپ کرنے کی ضرورت ہے۔ اپنے کمپیوٹر پر ایک نیا فولڈر بنائیں اور اسے ایک نام دیں۔ word-counter-app.

اس فولڈر کے اندر، تین خالی فائلیں بنائیں۔

• index.html

• style.css

• script.js

مرحلہ 2: ایچ ٹی ایم ایل کا ڈھانچہ بنانا

آپ کا index.html فائل آپ کو ایک لے آؤٹ بنانے کی ضرورت ہوگی جس میں ایک ہیڈر، حقیقی وقت کے اعدادوشمار کو ظاہر کرنے کے لیے ایک گرڈ، صارفین کے داخل ہونے کے لیے ٹیکسٹ ایریا، اور متن کو کاپی کرنے یا صاف کرنے کے لیے بٹن شامل ہوں۔

اپنی HTML فائل میں درج ذیل کوڈ شامل کریں:

    
    
    
    



    

    

        
        
        

        
        
        <!-- Action Buttons -->
        <p>
            <button class="btn-primary" onclick="copyText()" id="copyBtn">Copy Text</button>
            <button class="btn-secondary" onclick="clearText()">Clear</button>
        </p>

    </main>

    <script src="script.js"/>


</code></pre>
<p>ایچ ٹی ایم ایل کو سمجھنا:</p>
<ul>
<li>
<p><strong>کہ</strong> <code>.stats-grid</code><strong>:</strong> گنتی کو ظاہر کرنے کے لیے یہاں چار علیحدہ خانے ہیں۔ ہر نمبر کا اپنا منفرد نمبر ہوتا ہے۔ <code>id</code> (شب بخیر <code>wordCount</code>) جاوا اسکرپٹ کے لیے انہیں تلاش کرنا اور اپ ڈیٹ کرنا آسان بنانا۔</p>
</li>
<li>
<p><strong>کہ</strong> <code><textarea/></code><strong>:</strong> یہ بنیادی ان پٹ باکس ہے جہاں صارف مواد ٹائپ یا پیسٹ کرتے ہیں۔</p>
</li>
<li>
<p><strong>کہ</strong> <code><script/></code> <strong>ٹیگ:</strong> یہ HTML کو اس منطق سے جوڑتا ہے جسے ہم اگلے مرحلے میں لکھیں گے۔</p>
</li>
</ul>
<p>اگلا، ہم ٹول کو جدید اور پیشہ ورانہ شکل دیتے ہیں۔ سی ایس ایس گرڈ کا استعمال کرتے ہوئے اسٹیٹ بکس کی کامل سیدھ۔</p>
<p>آپ کا <code>style.css</code> ایک فائل بنائیں اور درج ذیل کوڈ شامل کریں:</p>
<pre><code class="language-css">:root {
    --primary-color: #007bff;
    --bg-color: #f8f9fa;
    --text-dark: #202124;
    --text-muted: #5f6368;
    --border-color: #dadce0;
    --panel-bg: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-section {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    font-weight: 800;
}

p.description {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-size: 1.1rem;
}

.tool-container {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-box {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Text Area */
textarea {
    width: 100%;
    height: 250px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    margin-bottom: 20px;
    transition: border-color 0.2s ease;
}

textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Buttons */
.controls {
    display: flex;
    gap: 12px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
}

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

.btn-secondary {
    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-color);
}
</code></pre>
<p>سی ایس ایس کو سمجھنا:</p>
<ul>
<li>
<p><strong>CSS گرڈ:</strong> کہ <code>.stats-grid</code> کلاس کا استعمال <code>grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));</code>. اس طرح، جب صارف ایک چھوٹی موبائل اسکرین پر ٹول کو دیکھتا ہے، تو چار اسٹیٹ بکس خود بخود ایک دوسرے کے اوپر صاف ستھرا ڈھیر ہوجاتے ہیں۔</p>
</li>
<li>
<p><strong>CSS متغیرات:</strong> استعمال کریں <code>:root</code> سب سے اوپر پر طے شدہ نیلا رنگ (<code>#007bff</code>)۔</p>
</li>
</ul>
<p>اس وقت، ٹول کا بصری ڈیزائن مکمل ہو گیا ہے۔ براؤزر میں، حتمی لفظ کاؤنٹر اس طرح ظاہر ہوتا ہے:</p>
<h2 id="heading-step-4-add-the-javascript-logic">مرحلہ 4: JavaScript Logic شامل کریں۔</h2>
<p>اب ہمیں ٹول کو متن شمار کرنے کی ضرورت ہے۔ ہم ایک ایونٹ سننے والا استعمال کریں گے جو تمام کی اسٹروکس کو دیکھتا ہے۔ ہر لفظ، کردار، جملہ، یا پیراگراف کو صارف کی اقسام کے طور پر دوبارہ شمار کیا جاتا ہے۔</p>
<p>آپ کا <code>script.js</code> ایک فائل بنائیں اور اس میں درج ذیل کوڈ کو پیسٹ کریں۔</p>
<pre><code class="language-javascript">const textInput = document.getElementById('textInput');
const wordCountDisplay = document.getElementById('wordCount');
const charCountDisplay = document.getElementById('charCount');
const sentenceCountDisplay = document.getElementById('sentenceCount');
const paragraphCountDisplay = document.getElementById('paragraphCount');
const copyBtn = document.getElementById('copyBtn');

// 1. Listen for user input in real-time
textInput.addEventListener('input', updateStatistics);

// 2. The Core Counting Logic
function updateStatistics() {
    const text = textInput.value;

    // Character Count (includes spaces)
    charCountDisplay.textContent = text.length;

    // Word Count
    const words = text.match(/S+/g) || [];
    wordCountDisplay.textContent = words.length;

    // Sentence Count
    const sentences = text.split(/[.!?]+(?=s|$)/).filter(sentence => sentence.trim().length > 0);
    sentenceCountDisplay.textContent = sentences.length;

    // Paragraph Count
    const paragraphs = text.split(/n+/).filter(paragraph => paragraph.trim().length > 0);
    paragraphCountDisplay.textContent = paragraphs.length;
}

// 3. Copy functionality
function copyText() {
    if (!textInput.value) return;
    
    textInput.select();
    document.execCommand('copy');
    
    // Provide visual feedback
    copyBtn.textContent="Copied!";
    setTimeout(() => {
        copyBtn.textContent="Copy Text";
    }, 1500);
}

// 4. Clear functionality
function clearText() {
    textInput.value="";
    updateStatistics(); // Reset counts to zero
}
</code></pre>
<p>جاوا اسکرپٹ کو سمجھنا:</p>
<ul>
<li>
<p><strong>کہ</strong> <code>input</code> <strong>واقعہ:</strong> <code>textInput.addEventListener('input', ...)</code>    یہ حقیقی وقت کی تازہ کاریوں کا راز ہے۔ کیلکولیشن کے افعال عین اس وقت چلتے ہیں جب آپ کوئی کلید دباتے ہیں یا متن چسپاں کرتے ہیں۔</p>
</li>
<li>
<p><strong>الفاظ شمار کریں:</strong> <code>text.match(/S+/g)</code>    ایک باقاعدہ اظہار جو غیر وائٹ اسپیس حروف کی ایک غیر منقطع تار تلاش کرتا ہے۔ یہ سفید جگہ کے ذریعے متن کو تقسیم کرنے سے کہیں زیادہ درست ہے کیونکہ یہ غلطی سے پیچھے رہ جانے والی کسی بھی اضافی خالی جگہ کو نظر انداز کر دیتا ہے۔</p>
</li>
<li>
<p><strong>جملے شمار کریں:</strong> کہ <code>.split(/[.!?]+(?=s|$)/)</code> منطق متن کو ٹکڑوں میں کاٹ دیتی ہے جب بھی وقفہ، فجائیہ یا سوالیہ نشان کے بعد کوئی جگہ ظاہر ہوتی ہے۔</p>
</li>
</ul>
<h2 id="heading-step-5-test-your-application">مرحلہ 5: اپنی درخواست کی جانچ کریں۔</h2>
<p>کوڈنگ مکمل طور پر ہو چکی ہے! اب یہ چیک کرنے کا وقت ہے کہ ہماری منطق صحیح طریقے سے کام کرتی ہے۔</p>
<ol>
<li>
<p>آپ کا <code>word-counter-app</code> فولڈر</p>
</li>
<li>
<p>ڈبل کلک کریں <code>index.html</code> فائل کو ویب براؤزر میں کھولا جا سکتا ہے۔</p>
</li>
<li>
<p>متن والے حصے میں چند جملے درج کریں۔ فوری طور پر سب سے اوپر کی تازہ کاری میں نمبر دیکھیں۔</p>
</li>
<li>
<p>ایک نیا پیراگراف بنانے کے لیے، ایک ڈبل اسپیس شامل کریں (یا "Enter" دبائیں) اور یقینی بنائیں کہ آپ کی منطق اس کا صحیح حساب کرتی ہے۔</p>
</li>
<li>
<p>کلک کریں <strong>متن کاپی کریں۔</strong> کلپ بورڈ فنکشن کی جانچ کریں۔ <strong>واضح</strong> بورڈ کو دوبارہ ترتیب دینے کے لیے</p>
</li>
</ol>
<p>اس پروجیکٹ کو مکمل کرکے، آپ نے خالص ونیلا جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک تیز رفتار کلائنٹ سائیڈ یوٹیلیٹی ٹول بنایا ہے۔ آپ نے سیکھا کہ کس طرح تاروں کو جوڑنا ہے، متن کے تجزیہ کے لیے ریگولر ایکسپریشنز کا استعمال کرنا ہے، اور ایک جوابی UI گرڈ بنانا ہے۔</p>
<p>حقیقی پیداواری ماحول میں صحیح کوڈ بیس کو چلانے کے لیے اس آن لائن ورڈ کاؤنٹر کو آزمائیں۔ تعمیر کرتے رہیں اور کوڈنگ کا مزہ لیں!</p>
</p></div>
<!--[googlesitekit-end-of-content]-->

		
		
			</div><!-- .entry-content .clear -->
</div>

	
</article><!-- #post-## -->

<nav class="navigation post-navigation" aria-label="Posts">
				<div class="nav-links"><div class="nav-previous"><a title="کیا ہوا صاف کرنے والا میرے گھر سے جنگل کی آگ کا دھواں نکال سکتا ہے؟ ہمارے لیب ڈیٹا سے کیا پتہ چلتا ہے۔" href="https://umang.pk/ur/2026/09/30/%da%a9%db%8c%d8%a7-%db%81%d9%88%d8%a7-%d8%b5%d8%a7%d9%81-%da%a9%d8%b1%d9%86%db%92-%d9%88%d8%a7%d9%84%d8%a7-%d9%85%db%8c%d8%b1%db%92-%da%af%da%be%d8%b1-%d8%b3%db%92-%d8%ac%d9%86%da%af%d9%84-%da%a9/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> پچھلا</span> <p> کیا ہوا صاف کرنے والا میرے گھر سے جنگل کی آگ کا دھواں نکال سکتا ہے؟ ہمارے لیب ڈیٹا سے کیا پتہ چلتا ہے۔ </p></a></div><div class="nav-next"><a title="پیمانے پر AI کی مرئیت: 9 ملین پرامپٹس اور 400+ کارپوریٹ برانڈز سے سیکھیں" href="https://umang.pk/ur/2026/09/30/%d9%be%db%8c%d9%85%d8%a7%d9%86%db%92-%d9%be%d8%b1-ai-%da%a9%db%8c-%d9%85%d8%b1%d8%a6%db%8c%d8%aa-9-%d9%85%d9%84%db%8c%d9%86-%d9%be%d8%b1%d8%a7%d9%85%d9%be%d9%b9%d8%b3-%d8%a7%d9%88%d8%b1-400-%da%a9/" rel="next"><span class="ast-post-nav" aria-hidden="true">اگلا <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> پیمانے پر AI کی مرئیت: 9 ملین پرامپٹس اور 400+ کارپوریٹ برانڈز سے سیکھیں </p></a></div></div>
		</nav><div class="ast-single-related-posts-container ast-container--"><div class="ast-related-posts-title-section"> <h2 class="ast-related-posts-title"> متعلقہ پوسٹس </h2> </div><div class="ast-related-posts-wrapper">						<article class="ast-related-post post-15675 post type-post status-publish format-standard has-post-thumbnail hentry category-blog tag-apple tag-apple-ios tag-apple-ios-10 tag-apple-iphone-ios-10 tag-ios tag-ios-10 tag-ios-10-adoption tag-iphone tag-iphone-ios-10">
							<div class="ast-related-posts-inner-section">
								<div class="ast-related-post-content">
									<div class="ast-related-post-featured-section post-has-thumb"></div>														<header class="entry-header related-entry-header">
																	<h3 class="ast-related-post-title entry-title">
				<a href="https://umang.pk/ur/2016/09/15/apple-ios-10-surpasses-ios-9-in-early-adoption-in-just-24-hours/" target="_self" rel="bookmark noopener noreferrer">Apple iOS 10 surpasses iOS 9 in early adoption in just 24 hours</a>
			</h3>
		<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none">			<span class="comments-link">
				<a href="https://umang.pk/ur/2016/09/15/apple-ios-10-surpasses-ios-9-in-early-adoption-in-just-24-hours/#respond">ایک تبصرہ چھوڑیں</a>			</span>

			 / <span class="ast-taxonomy-container cat-links default"><a href="https://umang.pk/ur/category/blog/" rel="category tag">Blog</a></span> / از<span class="posted-by vcard author" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">			<a title="admin کی تمام پوسٹس دیکھیں"
				href="https://umang.pk/ur/author/admin/" rel="author"
				class="url fn n" itemprop="url"				>
				<span
				class="author-name" itemprop="name"				>
				admin			</span>
			</a>
		</span>

		</div>														</header>
																						<div class="entry-content clear">
																			</div>
								</div>
							</div>
						</article>
											<article class="ast-related-post post-1579 post type-post status-publish format-standard hentry category-blog tag-bollywood tag-outsider tag-pannu tag-tap">
							<div class="ast-related-posts-inner-section">
								<div class="ast-related-post-content">
									<div class="ast-related-post-featured-section ast-no-thumb"></div>														<header class="entry-header related-entry-header">
																	<h3 class="ast-related-post-title entry-title">
				<a href="https://umang.pk/ur/2017/03/02/taapsee-pannu-on-being-an-outsider-in-bollywood/" target="_self" rel="bookmark noopener noreferrer">Taapsee Pannu on being an outsider in Bollywood</a>
			</h3>
		<div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none">			<span class="comments-link">
				<a href="https://umang.pk/ur/2017/03/02/taapsee-pannu-on-being-an-outsider-in-bollywood/#respond">ایک تبصرہ چھوڑیں</a>			</span>

			 / <span class="ast-taxonomy-container cat-links default"><a href="https://umang.pk/ur/category/blog/" rel="category tag">Blog</a></span> / از<span class="posted-by vcard author" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">			<a title="admin کی تمام پوسٹس دیکھیں"
				href="https://umang.pk/ur/author/admin/" rel="author"
				class="url fn n" itemprop="url"				>
				<span
				class="author-name" itemprop="name"				>
				admin			</span>
			</a>
		</span>

		</div>														</header>
																						<div class="entry-content clear">
																			</div>
								</div>
							</div>
						</article>
					</div> </div>			</main><!-- #main -->
			
		
	</div><!-- #primary -->


	</div> <!-- ast-container -->
	</div><!-- #content -->
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2026 Umang</p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer><!-- #colophon -->
	</div><!-- #page -->
<template id="tp-language" data-tp-language="ur"></template><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/ur/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/ur/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewbox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">اوپر تک سکرول کریں۔</span>
</div>

<!-- Koko Analytics v2.5.3 - https://www.kokoanalytics.com/ -->
<script>
(()=>{var e=window.koko_analytics,s=["utm_source","utm_medium","utm_campaign"],d=/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview|prerender|headless|phantom|scrapy|python|curl|wget|go-http|okhttp|node-fetch|axios|java\/|libwww|http[-_]?client|monitor|uptime|pingdom|statuscake|validator|scanner/i;function u(){let t={},n=new URLSearchParams(window.location.search),c=new URLSearchParams(window.location.hash.substring(1));return s.forEach(a=>{let o=n.get(a)||c.get(a);o&&(t[a]=o)}),t}function h(t,n){if(typeof navigator.sendBeacon=="function"){navigator.sendBeacon(t,n);return}fetch(t,{method:"POST",body:n,keepalive:!0,credentials:"same-origin"}).catch(()=>{})}e.trackPageview=function(t,n){if(d.test(navigator.userAgent)||window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress){console.debug("Koko Analytics: Ignoring call to trackPageview because user agent is a bot or this is a headless browser.");return}h(e.url,new URLSearchParams({action:"koko_analytics_collect",pa:t,po:n,r:document.referrer.indexOf(e.site_url)==0?"":document.referrer,m:e.use_cookie?"c":e.method[0],...u()}))};function r(){e.trackPageview(e.path,e.post_id)}function i(){e.autotracked||(r(),e.autotracked=!0)}document.prerendering?document.addEventListener("prerenderingchange",i,{once:!0}):document.visibilityState==="hidden"||document.visibilityState==="prerender"?document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&i()}):i();window.addEventListener("pageshow",t=>{t.persisted&&r()});})();
</script>

			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
			<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"1","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""};
//# sourceURL=astra-theme-js-js-extra
</script>
<script id="astra-theme-js-js" src="https://umang.pk/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.14.2"></script>
<script id="googlesitekit-events-provider-content-events-js-before">
window._googlesitekit = window._googlesitekit || {};
window._googlesitekit.contentEvents = {"postID":30138,"isReadableSinglePost":true,"hasVimeoEmbed":false,"wordCount":1273,"estimatedReadTimeSeconds":321,"isLastPageOfMultiPagePost":true,"readTimeThresholdPercent":85,"minimumReadTimeSeconds":5};
//# sourceURL=googlesitekit-events-provider-content-events-js-before
</script>
<script id="googlesitekit-events-provider-content-events-js" src="https://umang.pk/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-content-events-90bacb156ab34fa090db.js" defer></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://umang.pk/wp-includes/js/wp-emoji-release.min.js?ver=7.1.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://umang.pk/wp-includes/js/wp-emoji-loader.min.js
</script>

<nav
    class="trp-language-switcher trp-floating-switcher trp-ls-dropdown trp-switcher-position-top trp-opposite-language"
    style="--bg:#ffffff;--bg-hover:#0000000d;--text:#143852;--text-hover:#1d2327;--border:1px solid #1438521a;--border-radius:0px 0px 8px 8px;--flag-radius:2px;--flag-size:18px;--aspect-ratio:4/3;--font-size:14px;--switcher-width:auto;--switcher-padding:10px 0;--transition-duration:0.2s;--top:0px;--right:10vw"
    role="navigation"
    aria-label="Website language selector"
    data-no-translation
>
    
            <div class="trp-language-switcher-inner">
            <a href="https://umang.pk/en_us/2026/09/30/%d8%a7%db%8c%da%86-%d9%b9%db%8c-%d8%a7%db%8c%d9%85-%d8%a7%db%8c%d9%84%d8%8c-%d8%b3%db%8c-%d8%a7%db%8c%d8%b3-%d8%a7%db%8c%d8%b3-%d8%a7%d9%88%d8%b1-%d8%ac%d8%a7%d9%88%d8%a7-%d8%a7%d8%b3%da%a9%d8%b1/" class="trp-language-item" title="English" data-no-translation><img src="https://umang.pk/wp-content/plugins/translatepress-multilingual/assets/flags/4x3/en_US.svg" class="trp-flag-image" alt="" role="presentation" loading="lazy" decoding="async" width="18" height="14" /><span class="trp-language-item-name">English</span></a>
            <div
                class="trp-switcher-dropdown-list"
                id="trp-switcher-dropdown-list"
                role="group"
                aria-label="Available languages"
                hidden
                inert
            >
                            </div>
        </div>

    </nav>
	</body>
</html>