Битовая клавиатура. Есть такая в калькуляторе Windows в опции режим программиста

<style>
td {
    padding-left: 5px; 
    padding-right: 5px; 
    text-align: center;
}
#data tr:nth-child(odd) td {
    font-size: 150%;
    letter-spacing: 3px;
}
#data tr:nth-child(even) td {
    color: blue;
}
#data span {
    cursor: pointer;
}
td input {
    margin-top: 20px;
}
#itog {
    margin-top: 20px;
}
#itog td {
    text-align: left;
}
#itog td:nth-child(odd):after {
    content: ' |';
}
</style>
 
<table>
    <tbody id='data'></tbody>
    <tbody>
        <td colspan='4'>
            <input id='res' type='button' value='В другие системы счисления' />
        </td>
    </tbody>
</table>
<table id='itog'>
    <tr>
        <td>DEC</td>
        <td></td>
    </tr>
    <tr>
        <td>OCT</td>
        <td></td>
    </tr>
    <tr>
        <td>HEX</td>
        <td></td>
    </tr>
</table>
 
<script>
const n = 32
const oz = document.createElement('td')
for (let i = 0; i < 4; i++) {
    const o = document.createElement('span')
    o.textContent = 0
    oz.appendChild(o)
}
const ob = document.getElementById('data')
for (let i = 0; i < 2; i++) {
    let or = document.createElement('tr')
    for (let j = 0; j < 4; j++) {
        const o = oz.cloneNode(true)
        or.appendChild(o)
    }
    ob.appendChild(or)
    or = document.createElement('tr')
    for (let j = 0; j < 4; j++) {
        const o = document.createElement('td')
        let v = n - ((j + i * 4) * 4)
        v = v + ' бит' + (~[2, 4].indexOf(v % 10) ? 'а': '')
        o.textContent = v
        or.appendChild(o)
    }
    ob.appendChild(or)
}
const as = ob.getElementsByTagName('span')
// тут я малость заленился с этим старым стилем...
const ai = document.querySelectorAll('#itog td:nth-child(even)')
const aa = [
    v => v,
    v => v.toString(8),
    v => v.toString(16),
]
document.getElementById('res').addEventListener('click', _ => {
    let v = ''
    for (const o of as) {
        v += o.textContent
    }
    v = parseInt(v, 2)
    for (let i = 0; i < ai.length; i++) {
        ai[i].textContent = aa[i](v)
    }
})
ob.addEventListener('click', e => {
    const o = e.target.closest('span')
    if (!o) return
    o.textContent = +o.textContent + 1 % 2
})
</script>

<style>
td {
    padding-left: 5px; 
    padding-right: 5px; 
    text-align: center;
}
#data tr:nth-child(odd) td {
    font-size: 150%;
}
#data tr:nth-child(even) td {
    color: blue;
}
#data span {
    cursor: pointer;
}
td input {
    margin-top: 20px;
}
#itog {
    margin-top: 20px;
}
#itog td {
    text-align: left;
}
#itog td:nth-child(odd):after {
    content: ' |';
}
</style>
 
<table>
    <tbody id='data'></tbody>
    <tbody>
        <td colspan='4'>
            <input id='res' type='button' value='В другие системы счисления' />
        </td>
    </tbody>
</table>
<table id='itog'>
    <tr>
        <td>DEC</td>
        <td></td>
    </tr>
    <tr>
        <td>OCT</td>
        <td></td>
    </tr>
    <tr>
        <td>HEX</td>
        <td></td>
    </tr>
</table>
 
<template id='zero'>
    <td>
        <span>0</span>
        <span>0</span>
        <span>0</span>
        <span>0</span>
    </td>
</template>
 
<script>
const n = 32
const oz = document.getElementById('zero').content
const ob = document.getElementById('data')
for (let i = 0; i < 2; i++) {
    let or = document.createElement('tr')
    for (let j = 0; j < 4; j++) {
        const o = oz.cloneNode(true)
        or.appendChild(o)
    }
    ob.appendChild(or)
    or = document.createElement('tr')
    for (let j = 0; j < 4; j++) {
        const o = document.createElement('td')
        let v = n - ((j + i * 4) * 4)
        v = v + ' бит' + ([2, 4].includes(v % 10) ? 'а': '')
        o.textContent = v
        or.appendChild(o)
    }
    ob.appendChild(or)
}
const as = ob.getElementsByTagName('span')
// тут я малость заленился с этим старым стилем...
const ai = document.querySelectorAll('#itog td:nth-child(even)')
const aa = [
    v => v,
    v => v.toString(8),
    v => v.toString(16),
]
document.getElementById('res').addEventListener('click', _ => {
    let v = [...as].reduce((v, o) => v + o.textContent, '')
    v = parseInt(v, 2)
    ai.forEach((o, i) => o.textContent = aa[i](v))
})
ob.addEventListener('click', e => {
    const o = e.target.closest('span')
    if (!o) return
    o.textContent = +o.textContent ? 0 : 1
})
</script>