HexaDecoder/HexaDecoder.html at main · rajatgoyal47/HexaDecoder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hexadecimal Bit Decoder</title>
<style>

    table {
        border-collapse: collapse;
        table-layout: fixed;
        width: 100%;
        max-width: 800px; /* Default max-width */
        /* Remove margin: auto to prevent centering */
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }
    th {
        font-weight: bold; /* Make bit position numbers bold */
    }
</style>
</head>
<body>
    <h2>Hexadecimal Bit Decoder</h2>
    <form id="decoderForm">
        <label for="hexInput">Enter Hexadecimal Number: </label>
        <input type="text" id="hexInput" name="hexInput">
        <button type="button" onclick="decode()">Decode</button>
    </form>
    <br>
    <table id="bitTable">
        <tbody id="bitTableBody">
        </tbody>
    </table>

    <script>
        function decode() {
            var hexInput = document.getElementById("hexInput").value.trim();
            var binaryString = parseInt(hexInput, 16).toString(2).padStart(64, '0');
            var bitTableBody = document.getElementById("bitTableBody");
            bitTableBody.innerHTML = ""; // Clear previous content

            // Add First row for bit positions 63-32
            var bitPositionsRow1 = bitTableBody.insertRow();
            for (var i = 63; i >= 32; i--) {
                var cell = bitPositionsRow1.insertCell();
                cell.textContent = i;
                cell.style.fontWeight = "bold"; // Set bit position numbers as bold
            }

            // Add Second row for bits 63-32 of the input
            var firstBitsRow = bitTableBody.insertRow();
            for (var i = 63; i >= 32; i--) {
                var cell = firstBitsRow.insertCell();
                cell.textContent = binaryString.charAt(63 - i);
                if (binaryString.charAt(63 - i) === '1') {
                    cell.style.color = "red"; // Set text color to red if the bit is 1
                }
            }

            // Add Third row for bit positions 31-0
            var bitPositionsRow2 = bitTableBody.insertRow();
            for (var i = 31; i >= 0; i--) {
                var cell = bitPositionsRow2.insertCell();
                cell.textContent = i;
                cell.style.fontWeight = "bold"; // Set bit position numbers as bold
            }

            // Add Fourth row for bits 31-0 of the input
            var secondBitsRow = bitTableBody.insertRow();
            for (var i = 31; i >= 0; i--) {
                var cell = secondBitsRow.insertCell();
                cell.textContent = binaryString.charAt(63 - i);
                if (binaryString.charAt(63 - i) === '1') {
                    cell.style.color = "red"; // Set text color to red if the bit is 1
                }
            }
        }
    </script>
</body>
</html>