.. عنوان: اعشاریہ سے ہیکس سے بائنری کنورٹر
.. slug: decimal-to-hex-to-binary
.. تاریخ: 26-12-2025 15:00:00 UTC
.. ٹیگز: نیٹ ورکنگ، کیلکولیٹر، ٹول
.. زمرہ: کیلکولیٹر
.. لنک:
.. تفصیل: اعداد کو اعشاریہ، ہیکساڈیسیمل اور بائنری کے درمیان تبدیل کریں۔ نیٹ ورک تجزیہ میں سب نیٹ ماسک، VLAN IDs، پیکٹ ہیکس ڈمپ، اور انٹرفیس کاؤنٹرز کی ترجمانی کے لیے استعمال کیا جاتا ہے۔
.. قسم: متن
<style>
    .calc-container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 20px;
    }

    .calc-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .calc-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .calc-header p {
        margin: 10px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .input-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    .input-group {
        display: flex;
        flex-direction: column;
    }

    .input-group label {
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 14px;
    }

    .input-group input {
        padding: 14px;
        font-size: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        background: rgba(255,255,255,0.95);
        transition: all 0.3s ease;
    }

    .input-group input:focus {
        outline: none;
        border-color: #4CAF50;
        background: white;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

    .button-container {
        margin-top: 20px;
        display: flex;
        gap: 10px;
    }

    .calc-button {
        padding: 14px 35px;
        font-size: 16px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .calc-button:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .calc-button:active {
        background: #3d8b40;
        transform: translateY(0);
    }

    .calc-button.secondary {
        background: #666;
    }

    .calc-button.secondary:hover {
        background: #555;
    }

    .calc-button.secondary:active {
        background: #444;
    }

    .result-section {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        display: none;
    }

    .result-section.show {
        display: block;
    }

    .result-section:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .section-header {
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .section-header .icon {
        font-size: 20px;
    }

    .section-content {
        padding: 20px;
        background: #fafafa;
    }

    .data-row {
        display: flex;
        margin: 12px 0;
        padding: 10px;
        background: white;
        border-radius: 4px;
        border-left: 3px solid #4CAF50;
    }

    .data-label {
        font-weight: bold;
        color: #555;
        min-width: 180px;
        flex-shrink: 0;
    }

    .data-value {
        color: #333;
        font-family: 'Courier New', monospace;
        word-break: break-word;
        font-size: 15px;
    }

    .data-value.highlight {
        color: #4CAF50;
        font-weight: bold;
    }

    .help-text {
        margin-top: 15px;
        font-size: 14px;
        color: rgba(255,255,255,0.9);
        background: rgba(0,0,0,0.1);
        padding: 10px 15px;
        border-radius: 4px;
    }

    .help-text strong {
        color: white;
    }

    .error {
        background: #ffebee;
        color: #c62828;
        padding: 15px 20px;
        border-radius: 8px;
        border-left: 4px solid #c62828;
        margin: 20px 0;
        display: none;
    }

    .error.show {
        display: block;
    }

    .results-container {
        margin-top: 30px;
    }

    /* Responsive design */
    @media (max-width: 768px) {
        .input-row {
            grid-template-columns: 1fr;
        }

        .button-container {
            flex-direction: column;
        }

        .calc-button {
            width: 100%;
        }

        .data-row {
            flex-direction: column;
        }

        .data-label {
            margin-bottom: 5px;
            min-width: auto;
        }
    }
</style>
<div class="calc-container">
<div class="calc-header">
<h2>ڈیسیمل-ہیکس-بائنری کنورٹر</h2>
<p>اعداد کو اعشاریہ، ہیکساڈیسیمل، اور بائنری فارمیٹس کے درمیان تبدیل کریں۔ کسی بھی شکل میں ایک قدر درج کریں اور تبادلوں کو دیکھنے کے لیے جمع کرائیں پر کلک کریں۔</p>
<div class="input-row">
<div class="input-group">
<label for="decnum">اعشاریہ نمبر</label>
<input id="decnum" placeholder="e.g., 255" type="text" value=""/>
</div>
<div class="input-group">
<label for="hexnum">ہیکساڈیسیمل نمبر</label>
<input id="hexnum" placeholder="e.g., FF" type="text" value=""/>
</div>
<div class="input-group">
<label for="binnum">بائنری نمبر</label>
<input id="binnum" placeholder="e.g., 11111111" type="text" value=""/>
</div>
</div>
<div class="button-container">
<button class="calc-button" onclick="hexdecbinFunction()" type="submit">جمع کروائیں۔</button>
<button class="calc-button secondary" onclick="clearInputs()" type="button">صاف</button>
</div>
<div class="help-text">
<strong>تجاویز:</strong>کسی ایک فیلڈ میں قدر درج کریں۔ دیگر فیلڈز کو خالی چھوڑ دیں۔ تبادلوں کے نتائج نیچے دکھائے جائیں گے۔</div>
</div>
<div class="error" id="errorMessage"></div>
<div class="results-container">
<div class="result-section" id="resultFromDecimal">
<div class="section-header">
<h3><span class="icon">🔢</span>اعشاریہ سے تبدیل</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">اعشاریہ:</div>
<div class="data-value highlight" id="decnumResultdec"></div>
</div>
<div class="data-row">
<div class="data-label">ہیکساڈیسیمل:</div>
<div class="data-value" id="hexnumResultdec"></div>
</div>
<div class="data-row">
<div class="data-label">بائنری:</div>
<div class="data-value" id="binnumResultdec"></div>
</div>
</div>
</div>
<div class="result-section" id="resultFromHex">
<div class="section-header">
<h3><span class="icon">🔠</span>ہیکساڈیسیمل سے تبدیل</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">ہیکساڈیسیمل:</div>
<div class="data-value highlight" id="hexnumResulthex"></div>
</div>
<div class="data-row">
<div class="data-label">اعشاریہ:</div>
<div class="data-value" id="decnumResulthex"></div>
</div>
<div class="data-row">
<div class="data-label">بائنری:</div>
<div class="data-value" id="binnumResulthex"></div>
</div>
</div>
</div>
<div class="result-section" id="resultFromBinary">
<div class="section-header">
<h3><span class="icon">💾</span>ثنائی سے تبدیل</h3>
</div>
<div class="section-content">
<div class="data-row">
<div class="data-label">بائنری:</div>
<div class="data-value highlight" id="binnumResultbin"></div>
</div>
<div class="data-row">
<div class="data-label">اعشاریہ:</div>
<div class="data-value" id="decnumResultbin"></div>
</div>
<div class="data-row">
<div class="data-label">ہیکساڈیسیمل:</div>
<div class="data-value" id="hexnumResultbin"></div>
</div>
</div>
</div>
</div>
</div>
<script>
function hexdecbinFunction() {
    // Set variables from input
    var hexnum = document.getElementById("hexnum").value.trim();
    var decnum = document.getElementById("decnum").value.trim();
    var binnum = document.getElementById("binnum").value.trim();

    // Hide all result sections first
    document.getElementById('resultFromDecimal').classList.remove('show');
    document.getElementById('resultFromHex').classList.remove('show');
    document.getElementById('resultFromBinary').classList.remove('show');
    document.getElementById('errorMessage').classList.remove('show');

    // Check if at least one input is provided
    if (!decnum && !hexnum && !binnum) {
        showError('Please enter a value in at least one field');
        return;
    }

    // Clear inputs after getting values
    document.getElementById("hexnum").value = "";
    document.getElementById("decnum").value = "";
    document.getElementById("binnum").value = "";

    try {
        // Input from Decimal
        if (decnum) {
            var decValue = parseInt(decnum, 10);
            if (isNaN(decValue)) {
                throw new Error('Invalid decimal number');
            }
            var hexStringdec = decValue.toString(16).toUpperCase();
            var binStringdec = decValue.toString(2);

            document.getElementById("decnumResultdec").innerHTML = decnum;
            document.getElementById("hexnumResultdec").innerHTML = hexStringdec;
            document.getElementById("binnumResultdec").innerHTML = binStringdec;
            document.getElementById('resultFromDecimal').classList.add('show');
        }

        // Input from Hex
        if (hexnum) {
            var decStringhex = parseInt(hexnum, 16);
            if (isNaN(decStringhex)) {
                throw new Error('Invalid hexadecimal number');
            }
            var binStringhex = decStringhex.toString(2);

            document.getElementById("hexnumResulthex").innerHTML = hexnum.toUpperCase();
            document.getElementById("decnumResulthex").innerHTML = decStringhex.toString(10);
            document.getElementById("binnumResulthex").innerHTML = binStringhex;
            document.getElementById('resultFromHex').classList.add('show');
        }

        // Input from Binary
        if (binnum) {
            var decStringbin = parseInt(binnum, 2);
            if (isNaN(decStringbin)) {
                throw new Error('Invalid binary number');
            }
            var hexStringbin = decStringbin.toString(16).toUpperCase();

            document.getElementById("binnumResultbin").innerHTML = binnum;
            document.getElementById("decnumResultbin").innerHTML = decStringbin.toString(10);
            document.getElementById("hexnumResultbin").innerHTML = hexStringbin;
            document.getElementById('resultFromBinary').classList.add('show');
        }

        // Scroll to results
        document.querySelector('.results-container').scrollIntoView({ behavior: 'smooth', block: 'start' });

    } catch (error) {
        showError(error.message);
    }
}

function clearInputs() {
    document.getElementById("hexnum").value = "";
    document.getElementById("decnum").value = "";
    document.getElementById("binnum").value = "";

    // Hide all result sections
    document.getElementById('resultFromDecimal').classList.remove('show');
    document.getElementById('resultFromHex').classList.remove('show');
    document.getElementById('resultFromBinary').classList.remove('show');
    document.getElementById('errorMessage').classList.remove('show');

    // Focus on first input
    document.getElementById("decnum").focus();
}

function showError(message) {
    const errorDiv = document.getElementById('errorMessage');
    errorDiv.textContent = message;
    errorDiv.classList.add('show');
    errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

// Add enter key support
document.addEventListener('DOMContentLoaded', function() {
    const inputs = ['decnum', 'hexnum', 'binnum'];

    inputs.forEach(function(inputId) {
        document.getElementById(inputId).addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                hexdecbinFunction();
            }
        });
    });

    // Auto-focus first input field
    document.getElementById("decnum").focus();
});
</script>