Building 'Base Blaster'

index.html (snippet)

<form id="numberInputForm" class="mb-3" autocomplete="off" onsubmit="return false;">
    <label for="numberInput" class="form-label">Enter a non-negative integer:</label>
    <div class="input-group mb-2">
        <input type="text" id="numberInput" class="form-control" pattern="\\d*" maxlength="12" placeholder="e.g. 435" aria-label="Number input">
        <button id="enterBtn" class="btn btn-primary" type="button">Enter</button>
    </div>
    <div id="inputError" class="text-danger small visually-hidden">Please enter a valid non-negative integer up to nMax.</div>
</form>
<div id="placeValueTableDiv"></div>

placeValue.js (core logic)

var nMax = 999999999999; // 12 digits for now

document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('numberInput');
    var btn = document.getElementById('enterBtn');
    var errorDiv = document.getElementById('inputError');
    var tableDiv = document.getElementById('placeValueTableDiv');

    function showError(msg) {
        errorDiv.textContent = msg;
        errorDiv.classList.remove('visually-hidden');
    }
    function hideError() {
        errorDiv.classList.add('visually-hidden');
    }

    function buildTable(numStr) {
        numStr = numStr.replace(/^0+/, '') || '0';
        var digits = numStr.split('');
        var len = digits.length;
        var table = `
`;
        table += ``;
        for (var i = 0; i < len; i++) {
            var power = len - i - 1;
            table += '';
        }
        table += '';
        table += '';
        for (var j = 0; j < digits.length; j++) {
            table += '';
        }
        table += '';
        table += '
10' + power + '
' + digits[j] + '
';
        tableDiv.innerHTML = table;
    }

    btn.addEventListener('click', function() {
        var val = input.value.trim();
        if (!/^\d+$/.test(val)) {
            showError('Please enter a non-negative integer.');
            tableDiv.innerHTML = '';
            return;
        }
        if (val.length > 12 || Number(val) > nMax) {
            showError('Number must be less than or equal to ' + nMax + '.');
            tableDiv.innerHTML = '';
            return;
        }
        hideError();
        buildTable(val);
    });

    input.addEventListener('input', hideError);
});

index.html (snippet)

<form id="numberInputForm" class="mb-3" autocomplete="off" onsubmit="return false;">
    <label for="numberInput" class="form-label">Enter a non-negative integer:</label>
    <div class="input-group mb-2">
        <input type="text" id="numberInput" class="form-control" pattern="\\d*" maxlength="12" placeholder="e.g. 435" aria-label="Number input">
        <button id="enterBtn" class="btn btn-primary" type="button">Enter</button>
        <button id="clearBtn" class="btn btn-secondary" type="button">Clear</button>
    </div>
    <div id="inputError" class="text-danger small visually-hidden">Please enter a valid non-negative integer up to nMax.</div>
</form>
<div id="placeValueTableDiv"></div>

placeValue.js (core logic)

var nMax = 999999999999; // 12 digits for now

document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('numberInput');
    var btn = document.getElementById('enterBtn');
    var clearBtn = document.getElementById('clearBtn');
    var errorDiv = document.getElementById('inputError');
    var tableDiv = document.getElementById('placeValueTableDiv');
    var form = document.getElementById('numberInputForm');

    function showError(msg) {
        errorDiv.textContent = msg;
        errorDiv.classList.remove('visually-hidden');
    }
    function hideError() {
        errorDiv.classList.add('visually-hidden');
    }

    function buildTable(numStr) {
        numStr = numStr.replace(/^0+/, '') || '0';
        var digits = numStr.split('');
        var len = digits.length;
        var table = '
';
        table += '';
        for (var i = 0; i < len; i++) {
            var power = len - i - 1;
            table += '';
        }
        table += '';
        table += '';
        for (var j = 0; j < digits.length; j++) {
            table += '';
        }
        table += '';
        table += '
10' + power + '
' + digits[j] + '
';
        tableDiv.innerHTML = table;
    }

    function clearAll() {
        input.value = '';
        tableDiv.innerHTML = '';
        hideError();
        input.focus();
    }

    function handleEnter() {
        var val = input.value.trim();
        if (!/^\d+$/.test(val)) {
            showError('Please enter a non-negative integer.');
            tableDiv.innerHTML = '';
            return;
        }
        if (val.length > 12 || Number(val) > nMax) {
            showError('Number must be less than or equal to ' + nMax + '.');
            tableDiv.innerHTML = '';
            return;
        }
        hideError();
        buildTable(val);
    }

    btn.addEventListener('click', handleEnter);
    clearBtn.addEventListener('click', clearAll);
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        handleEnter();
    });
    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleEnter();
        }
    });

    input.addEventListener('input', hideError);
});

placeValueChatLog.html (snippet)

<div id="chatLogNavBtns" class="position-fixed end-0 bottom-0 m-3" style="z-index: 1050;">
    <button id="toTopBtn" class="btn btn-outline-secondary btn-sm mb-2" title="Scroll to top">
        <i class="bi bi-arrow-up-circle"></i> Top
    </button><br>
    <button id="toBottomBtn" class="btn btn-outline-secondary btn-sm" title="Scroll to bottom">
        <i class="bi bi-arrow-down-circle"></i> Bottom
    </button>
</div>

placeValueChatLog.html (JavaScript)

// ...inside the init() function...
var toTopBtn = document.getElementById('toTopBtn');
var toBottomBtn = document.getElementById('toBottomBtn');
if (toTopBtn && toBottomBtn) {
    toTopBtn.addEventListener('click', function() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    toBottomBtn.addEventListener('click', function() {
        window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    });
}

index.html (snippet)

<form id="baseForm" class="mb-3" autocomplete="off" onsubmit="return false;">
    <label for="baseSelect" class="form-label">Select a base (2-16):</label>
    <div class="input-group mb-2">
        <select id="baseSelect" class="form-select" aria-label="Base select">
            <option value="2">2</option>
            ...
            <option value="16">16</option>
        </select>
        <button id="baseBtn" class="btn btn-primary" type="button">Select</button>
    </div>
</form>
<div id="baseTableDiv"></div>

placeValue.js (core logic)

// Converts a base 10 number string to an array of digits in the given base (as strings)
function convertToBase(numStr, base) {
    var num = parseInt(numStr, 10);
    if (isNaN(num)) return ['0'];
    var digits = [];
    do {
        var rem = num % base;
        digits.unshift(rem.toString(base).toUpperCase());
        num = Math.floor(num / base);
    } while (num > 0);
    return digits;
}

function buildBaseTable(numStr, base) {
    var digits = convertToBase(numStr, base);
    var len = digits.length;
    var table = '
';
    // Header row: powers of base
    table += '';
    for (var i = 0; i < len; i++) {
        var power = len - i - 1;
        table += '';
    }
    table += '';
    // Digits row
    table += '';
    for (var j = 0; j < digits.length; j++) {
        table += '';
    }
    table += '';
    table += '
' + base + '' + power + '
' + digits[j] + '
';
    baseTableDiv.innerHTML = table;
}

baseBtn.addEventListener('click', function() {
    var val = input.value.trim();
    var base = parseInt(baseSelect.value, 10);
    if (!/^[0-9]+$/.test(val) || val.length === 0) {
        baseTableDiv.innerHTML = '
Please enter a valid base 10 number first.
';
        return;
    }
    if (val.length > 12 || Number(val) > nMax) {
        baseTableDiv.innerHTML = '
Number must be less than or equal to ' + nMax + '.
';
        return;
    }
    buildBaseTable(val, base);
});

placeValue.js (snippet for exponent value row)

// ...existing code...
    // Header row: powers of ten
    table += '';
    for (var i = 0; i < len; i++) {
        var power = len - i - 1;
        table += '10' + power + '';
    }
    table += '';
    // New row: values of the exponents
    table += '';
    for (var i = 0; i < len; i++) {
        var power = len - i - 1;
        table += '' + Math.pow(10, power) + '';
    }
    table += '';
    // ...existing code...

Resulting Table Example (Base 10)

<table class="table table-bordered text-center align-middle mb-0">
  <tr>
    <th>10<sup>2</sup></th><th>10<sup>1</sup></th><th>10<sup>0</sup></th>
  </tr>
  <tr>
    <td class="text-secondary small">100</td><td class="text-secondary small">10</td><td class="text-secondary small">1</td>
  </tr>
  <tr>
    <td class="fw-bold fs-4">4</td><td class="fw-bold fs-4">3</td><td class="fw-bold fs-4">5</td>
  </tr>
</table>

placeValue.js (auto-update logic)

input.addEventListener('input', function() {
    hideError();
    var val = input.value.trim();
    if (!/^\d+$/.test(val) || val.length === 0) {
        baseTableDiv.innerHTML = '';
    } else {
        // Automatically update right panel as user types
        var base = parseInt(baseSelect.value, 10);
        buildBaseTable(val, base);
    }
});

var hexInfoBtn = document.getElementById('hexInfoBtn');

// Ensure the lightbulb launches the modal when clicked
if (hexInfoBtn) {
    hexInfoBtn.addEventListener('click', function() {
        var modal = new bootstrap.Modal(document.getElementById('hexInfoModal'));
        modal.show();
    });
}

placeValue.js (snippet for exponent value row, base 10)

// ...existing code...
    // New row: values of the exponents
    table += '';
    for (var i = 0; i < len; i++) {
        var power = len - i - 1;
        var expVal = Math.pow(10, power).toLocaleString();
        table += '' + expVal + '';
    }
    table += '';
    // ...existing code...

placeValue.js (snippet for exponent value row, base-N)

// ...existing code...
    // New row: values of the exponents
    table += '';
    for (var i = 0; i < len; i++) {
        var power = len - i - 1;
        var expVal = Math.pow(base, power).toLocaleString();
        table += '' + expVal + '';
    }
    table += '';
    // ...existing code...