Show description
Number Systems Interactive Guide - EEE120 Module 2
Number Systems Interactive Guide - EEE120 Module 2
🔢 Number Systems Interactive Guide
EEE120 - Module 2: Binary, Decimal, Octal, Hexadecimal
Universal Converter
Binary Operations
Theory & Concepts
Adders & Logic
Practice Problems
🔄 Universal Number System Converter
Convert between Binary, Decimal, Octal, and Hexadecimal instantly!
Select Input Base:
Binary (Base-2)
Decimal (Base-10)
Octal (Base-8)
Hexadecimal (Base-16)
Enter Number:
Binary (Base-2)
-
Decimal (Base-10)
-
Octal (Base-8)
-
Hexadecimal (Base-16)
-
Step-by-Step Conversion:
🎯 Quick Reference
Binary (Base-2)
Uses: 0, 1
Example: 1011₂ = 11₁₀
Decimal (Base-10)
Uses: 0-9
Example: 29₁₀
Octal (Base-8)
Uses: 0-7
Example: 35₈ = 29₁₀
Hexadecimal (Base-16)
Uses: 0-9, A-F
Example: 1D₁₆ = 29₁₀
➕ Binary Addition
First Binary Number:
Second Binary Number:
Calculate Sum
➖ Binary Subtraction (Two's Complement)
Minuend (First Number):
Subtrahend (Second Number):
Calculate Difference
🔄 Two's Complement Calculator
Binary Number:
Calculate Two's Complement
📊 4-bit Signed Binary Converter
Decimal Number (-8 to 7):
Convert to Signed Binary
Binary Circle (4-bit)
📚 Number System Fundamentals
What is a Number System?
A number system is a way to represent numbers using a specific set of symbols (digits).…
Number Systems Interactive Guide - EEE120 Module 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Systems Interactive Guide - EEE120 Module 2</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #e0e0e0;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
border-radius: 15px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
h1 {
color: #00d9ff;
font-size: 2.5em;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.subtitle {
color: #ff6b6b;
font-size: 1.2em;
margin-top: 10px;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
justify-content: center;
}
.tab-button {
background: #0f3460;
color: #00d9ff;
border: 2px solid #00d9ff;
padding: 12px 25px;
cursor: pointer;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease;
font-weight: 600;
}
.tab-button:hover {
background: #00d9ff;
color: #0f3460;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 217, 255, 0.3);
}
.tab-button.active {
background: #00d9ff;
color: #0f3460;
}
.tab-content {
display: none;
animation: fadeIn 0.5s;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
background: rgba(15, 52, 96, 0.6);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
margin-bottom: 25px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 217, 255, 0.2);
}
.card h2 {
color: #ff6b6b;
margin-bottom: 20px;
font-size: 1.8em;
border-bottom: 2px solid #ff6b6b;
padding-bottom: 10px;
}
.card h3 {
color: #00d9ff;
margin: 20px 0 15px 0;
font-size: 1.3em;
}
.input-group {
margin: 20px 0;
}
label {
display: block;
color: #00d9ff;
margin-bottom: 8px;
font-weight: 600;
font-size: 1.1em;
}
input[type="text"],
input[type="number"],
select {
width: 100%;
padding: 12px 15px;
background: rgba(22, 33, 62, 0.8);
border: 2px solid #0f3460;
border-radius: 8px;
color: #e0e0e0;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
outline: none;
border-color: #00d9ff;
box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}
button {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
margin: 10px 5px;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
.result {
background: rgba(0, 217, 255, 0.1);
border-left: 4px solid #00d9ff;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
font-size: 1.1em;
}
.result strong {
color: #00d9ff;
}
.converter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.conversion-box {
background: rgba(22, 33, 62, 0.6);
padding: 20px;
border-radius: 10px;
border: 2px solid rgba(0, 217, 255, 0.3);
}
.conversion-box h4 {
color: #ff6b6b;
margin-bottom: 10px;
}
.output-display {
background: rgba(0, 217, 255, 0.1);
padding: 15px;
border-radius: 8px;
margin-top: 10px;
font-family: 'Courier New', monospace;
font-size: 1.2em;
color: #00d9ff;
text-align: center;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.example-box {
background: rgba(255, 107, 107, 0.1);
border-left: 4px solid #ff6b6b;
padding: 15px;
margin: 15px 0;
border-radius: 5px;
}
.formula {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin: 15px 0;
border: 1px solid rgba(0, 217, 255, 0.3);
}
.truth-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: rgba(22, 33, 62, 0.6);
border-radius: 8px;
overflow: hidden;
}
.truth-table th {
background: #0f3460;
color: #00d9ff;
padding: 12px;
font-weight: 600;
}
.truth-table td {
padding: 10px;
text-align: center;
border-bottom: 1px solid rgba(0, 217, 255, 0.2);
}
.truth-table tr:hover {
background: rgba(0, 217, 255, 0.1);
}
.binary-circle {
width: 100%;
max-width: 500px;
margin: 30px auto;
display: block;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 20px 0;
}
.info-card {
background: rgba(22, 33, 62, 0.8);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #ff6b6b;
transition: transform 0.3s ease;
}
.info-card:hover {
transform: translateX(5px);
}
.info-card h4 {
color: #00d9ff;
margin-bottom: 10px;
}
code {
background: rgba(0, 0, 0, 0.4);
padding: 2px 6px;
border-radius: 4px;
color: #ff6b6b;
font-family: 'Courier New', monospace;
}
.highlight {
color: #ff6b6b;
font-weight: 600;
}
.success {
color: #4caf50;
}
.warning {
color: #ff9800;
}
.error {
color: #f44336;
}
@media (max-width: 768px) {
h1 {
font-size: 1.8em;
}
.converter-grid {
grid-template-columns: 1fr;
}
.tabs {
flex-direction: column;
}
.tab-button {
width: 100%;
}
}
.step-by-step {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
margin: 15px 0;
border-radius: 8px;
border-left: 4px solid #00d9ff;
}
.step {
margin: 10px 0;
padding-left: 20px;
}
.bit-display {
display: flex;
gap: 5px;
justify-content: center;
flex-wrap: wrap;
margin: 15px 0;
}
.bit {
background: rgba(0, 217, 255, 0.2);
border: 2px solid #00d9ff;
padding: 10px 15px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 1.2em;
min-width: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🔢 Number Systems Interactive Guide</h1>
<p class="subtitle">EEE120 - Module 2: Binary, Decimal, Octal, Hexadecimal</p>
</header>
<div class="tabs">
<button class="tab-button active" onclick="showTab('converter')">Universal Converter</button>
<button class="tab-button" onclick="showTab('binary-ops')">Binary Operations</button>
<button class="tab-button" onclick="showTab('theory')">Theory & Concepts</button>
<button class="tab-button" onclick="showTab('adders')">Adders & Logic</button>
<button class="tab-button" onclick="showTab('practice')">Practice Problems</button>
</div>
<!-- Universal Converter Tab -->
<div id="converter" class="tab-content active">
<div class="card">
<h2>🔄 Universal Number System Converter</h2>
<p>Convert between Binary, Decimal, Octal, and Hexadecimal instantly!</p>
<div class="input-group">
<label>Select Input Base:</label>
<select id="inputBase" onchange="updatePlaceholder()">
<option value="2">Binary (Base-2)</option>
<option value="10" selected>Decimal (Base-10)</option>
<option value="8">Octal (Base-8)</option>
<option value="16">Hexadecimal (Base-16)</option>
</select>
</div>
<div class="input-group">
<label>Enter Number:</label>
<input type="text" id="inputNumber" placeholder="Enter a decimal number" oninput="convertAll()">
</div>
<div class="converter-grid">
<div class="conversion-box">
<h4>Binary (Base-2)</h4>
<div class="output-display" id="binaryOutput">-</div>
</div>
<div class="conversion-box">
<h4>Decimal (Base-10)</h4>
<div class="output-display" id="decimalOutput">-</div>
</div>
<div class="conversion-box">
<h4>Octal (Base-8)</h4>
<div class="output-display" id="octalOutput">-</div>
</div>
<div class="conversion-box">
<h4>Hexadecimal (Base-16)</h4>
<div class="output-display" id="hexOutput">-</div>
</div>
</div>
<div id="conversionSteps" class="step-by-step" style="display: none;">
<h3>Step-by-Step Conversion:</h3>
<div id="stepsContent"></div>
</div>
</div>
<div class="card">
<h2>🎯 Quick Reference</h2>
<div class="info-grid">
<div class="info-card">
<h4>Binary (Base-2)</h4>
<p>Uses: <code>0, 1</code></p>
<p>Example: <code>1011₂ = 11₁₀</code></p>
</div>
<div class="info-card">
<h4>Decimal (Base-10)</h4>
<p>Uses: <code>0-9</code></p>
<p>Example: <code>29₁₀</code></p>
</div>
<div class="info-card">
<h4>Octal (Base-8)</h4>
<p>Uses: <code>0-7</code></p>
<p>Example: <code>35₈ = 29₁₀</code></p>
</div>
<div class="info-card">
<h4>Hexadecimal (Base-16)</h4>
<p>Uses: <code>0-9, A-F</code></p>
<p>Example: <code>1D₁₆ = 29₁₀</code></p>
</div>
</div>
</div>
</div>
<!-- Binary Operations Tab -->
<div id="binary-ops" class="tab-content">
<div class="card">
<h2>➕ Binary Addition</h2>
<div class="input-group">
<label>First Binary Number:</label>
<input type="text" id="addNum1" placeholder="e.g., 1011" pattern="[01]+">
</div>
<div class="input-group">
<label>Second Binary Number:</label>
<input type="text" id="addNum2" placeholder="e.g., 0010" pattern="[01]+">
</div>
<button onclick="binaryAddition()">Calculate Sum</button>
<div id="additionResult" class="result" style="display: none;"></div>
</div>
<div class="card">
<h2>➖ Binary Subtraction (Two's Complement)</h2>
<div class="input-group">
<label>Minuend (First Number):</label>
<input type="text" id="subNum1" placeholder="e.g., 0011" pattern="[01]+">
</div>
<div class="input-group">
<label>Subtrahend (Second Number):</label>
<input type="text" id="subNum2" placeholder="e.g., 0001" pattern="[01]+">
</div>
<button onclick="binarySubtraction()">Calculate Difference</button>
<div id="subtractionResult" class="result" style="display: none;"></div>
</div>
<div class="card">
<h2>🔄 Two's Complement Calculator</h2>
<div class="input-group">
<label>Binary Number:</label>
<input type="text" id="twosCompInput" placeholder="e.g., 0011" pattern="[01]+">
</div>
<button onclick="calculateTwosComplement()">Calculate Two's Complement</button>
<div id="twosCompResult" class="result" style="display: none;"></div>
</div>
<div class="card">
<h2>📊 4-bit Signed Binary Converter</h2>
<div class="input-group">
<label>Decimal Number (-8 to 7):</label>
<input type="number" id="signedDecimal" min="-8" max="7" placeholder="e.g., -3">
</div>
<button onclick="decimalToSigned()">Convert to Signed Binary</button>
<div id="signedResult" class="result" style="display: none;"></div>
<div style="margin-top: 30px;">
<h3>Binary Circle (4-bit)</h3>
<canvas id="binaryCircle" width="500" height="500" style="max-width: 100%; height: auto;"></canvas>
</div>
</div>
</div>
<!-- Theory Tab -->
<div id="theory" class="tab-content">
<div class="card">
<h2>📚 Number System Fundamentals</h2>
<h3>What is a Number System?</h3>
<p>A number system is a way to represent numbers using a specific set of symbols (digits). Different systems use different bases.</p>
<div class="info-grid">
<div class="info-card">
<h4>Decimal (Base-10)</h4>
<p>MOD-10 system</p>
<p>Digits: 0 through 9</p>
<p>Most common for everyday use</p>
</div>
<div class="info-card">
<h4>Binary (Base-2)</h4>
<p>MOD-2 system</p>
<p>Digits: 0 and 1</p>
<p>Foundation of digital electronics</p>
</div>
<div class="info-card">
<h4>Octal (Base-8)</h4>
<p>MOD-8 system</p>
<p>Digits: 0 through 7</p>
<p>Groups 3 binary digits</p>
</div>
<div class="info-card">
<h4>Hexadecimal (Base-16)</h4>
<p>MOD-16 system</p>
<p>Digits: 0-9, A-F</p>
<p>Groups 4 binary digits</p>
</div>
</div>
<h3>Conversion Methods</h3>
<div class="example-box">
<h4>Binary to Decimal</h4>
<p>Multiply each bit by 2 raised to its position power, then sum.</p>
<div class="formula">
Example: 1011₂<br>
= 1×2³ + 0×2² + 1×2¹ + 1×2⁰<br>
= 8 + 0 + 2 + 1<br>
= 11₁₀
</div>
</div>
<div class="example-box">
<h4>Decimal to Binary</h4>
<p>Divide by 2 repeatedly, recording remainders bottom-to-top.</p>
<div class="formula">
Example: 29₁₀<br>
29 ÷ 2 = 14 remainder 1<br>
14 ÷ 2 = 7 remainder 0<br>
7 ÷ 2 = 3 remainder 1<br>
3 ÷ 2 = 1 remainder 1<br>
1 ÷ 2 = 0 remainder 1<br>
Result: 11101₂
</div>
</div>
<div class="example-box">
<h4>Binary to Octal</h4>
<p>Group binary digits in sets of 3 (from right), convert each group.</p>
<div class="formula">
Example: 11101₂<br>
011 101 (grouped)<br>
3 5 (octal)<br>
Result: 35₈
</div>
</div>
<div class="example-box">
<h4>Binary to Hexadecimal</h4>
<p>Group binary digits in sets of 4 (from right), convert each group.</p>
<div class="formula">
Example: 11101₂<br>
0001 1101 (grouped)<br>
1 D (hex)<br>
Result: 1D₁₆
</div>
</div>
</div>
<div class="card">
<h2>🔢 Signed Binary Numbers</h2>
<h3>Two's Complement</h3>
<p>Two's complement is the most common method for representing signed numbers in binary.</p>
<div class="example-box">
<h4>How to get Two's Complement:</h4>
<ol class="step">
<li><strong>Step 1:</strong> Invert all bits (One's Complement)</li>
<li><strong>Step 2:</strong> Add 1 to the result</li>
</ol>
<div class="formula">
Example: Find two's complement of 0011₂ (+3)<br>
Step 1: Invert bits → 1100<br>
Step 2: Add 1 → 1100 + 0001 = 1101₂ (-3)
</div>
</div>
<h3>Signed vs Unsigned Binary</h3>
<table class="truth-table">
<thead>
<tr>
<th>4-bit Binary</th>
<th>Unsigned</th>
<th>Signed (Two's Complement)</th>
</tr>
</thead>
<tbody>
<tr><td>0000</td><td>0</td><td>0</td></tr>
<tr><td>0001</td><td>1</td><td>+1</td></tr>
<tr><td>0010</td><td>2</td><td>+2</td></tr>
<tr><td>0011</td><td>3</td><td>+3</td></tr>
<tr><td>0111</td><td>7</td><td>+7</td></tr>
<tr><td>1000</td><td>8</td><td>-8</td></tr>
<tr><td>1001</td><td>9</td><td>-7</td></tr>
<tr><td>1111</td><td>15</td><td>-1</td></tr>
</tbody>
</table>
<div class="info-grid">
<div class="info-card">
<h4>Unsigned Range</h4>
<p>For n bits: 0 to 2ⁿ-1</p>
<p>4-bit: 0 to 15</p>
<p>Leading bit can be 0 or 1</p>
</div>
<div class="info-card">
<h4>Signed Range</h4>
<p>For n bits: -2ⁿ⁻¹ to 2ⁿ⁻¹-1</p>
<p>4-bit: -8 to +7</p>
<p>MSB (sign bit): 0=positive, 1=negative</p>
</div>
</div>
<h3>Overflow Detection</h3>
<p>Overflow occurs when the result exceeds the representable range. In signed arithmetic, overflow happens when <code>C<sub>MSB</sub> ≠ C<sub>out</sub></code></p>
</div>
</div>
<!-- Adders Tab -->
<div id="adders" class="tab-content">
<div class="card">
<h2>🔧 Half Adder</h2>
<p>A half adder adds two single bits and produces a sum and carry output.</p>
<h3>Truth Table:</h3>
<table class="truth-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Sum</th>
<th>Carry</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>1</td><td>1</td><td>0</td></tr>
<tr><td>1</td><td>0</td><td>1</td><td>0</td></tr>
<tr><td>1</td><td>1</td><td>0</td><td>1</td></tr>
</tbody>
</table>
<div class="formula">
<strong>Logic Equations:</strong><br>
Sum = A ⊕ B (XOR)<br>
Carry = A · B (AND)
</div>
<div class="input-group">
<label>Test Half Adder:</label>
<div style="display: flex; gap: 10px;">
<input type="text" id="haA" maxlength="1" placeholder="A (0 or 1)" style="flex: 1;">
<input type="text" id="haB" maxlength="1" placeholder="B (0 or 1)" style="flex: 1;">
</div>
</div>
<button onclick="testHalfAdder()">Calculate</button>
<div id="halfAdderResult" class="result" style="display: none;"></div>
</div>
<div class="card">
<h2>🔩 Full Adder</h2>
<p>A full adder adds three bits: two inputs plus a carry-in, producing sum and carry-out.</p>
<h3>Truth Table:</h3>
<table class="truth-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Cin</th>
<th>Sum</th>
<th>Cout</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>1</td><td>1</td><td>0</td></tr>
<tr><td>0</td><td>1</td><td>0</td><td>1</td><td>0</td></tr>
<tr><td>0</td><td>1</td><td>1</td><td>0</td><td>1</td></tr>
<tr><td>1</td><td>0</td><td>0</td><td>1</td><td>0</td></tr>
<tr><td>1</td><td>0</td><td>1</td><td>0</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>0</td><td>0</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</tbody>
</table>
<div class="formula">
<strong>Logic Equations:</strong><br>
Sum = A ⊕ B ⊕ Cin<br>
Cout = AB + ACin + BCin
</div>
<div class="input-group">
<label>Test Full Adder:</label>
<div style="display: flex; gap: 10px;">
<input type="text" id="faA" maxlength="1" placeholder="A" style="flex: 1;">
<input type="text" id="faB" maxlength="1" placeholder="B" style="flex: 1;">
<input type="text" id="faCin" maxlength="1" placeholder="Cin" style="flex: 1;">
</div>
</div>
<button onclick="testFullAdder()">Calculate</button>
<div id="fullAdderResult" class="result" style="display: none;"></div>
</div>
<div class="card">
<h2>🏗️ Multi-bit Adder (Ripple Carry)</h2>
<p>Multiple full adders chained together, with carry output of one feeding carry input of next.</p>
<div class="example-box">
<h4>4-bit Ripple Carry Adder Example:</h4>
<p>Adding 1011₂ + 0110₂</p>
<div class="formula">
Position: 3 2 1 0<br>
A: 1 0 1 1<br>
B: + 0 1 1 0<br>
Carry: 1 0 1 1 0<br>
─────────────────<br>
Sum: 1 0 0 0 1
</div>
</div>
</div>
</div>
<!-- Practice Tab -->
<div id="practice" class="tab-content">
<div class="card">
<h2>📝 Practice Problems</h2>
<div class="example-box">
<h4>Problem 1: Binary to Decimal</h4>
<p>Convert 110110₂ to decimal.</p>
<button onclick="showSolution('sol1')">Show Solution</button>
<div id="sol1" class="step-by-step" style="display: none;">
<div class="formula">
110110₂<br>
= 1×2⁵ + 1×2⁴ + 0×2³ + 1×2² + 1×2¹ + 0×2⁰<br>
= 32 + 16 + 0 + 4 + 2 + 0<br>
= 54₁₀
</div>
</div>
</div>
<div class="example-box">
<h4>Problem 2: Decimal to Binary</h4>
<p>Convert 77₁₀ to binary.</p>
<button onclick="showSolution('sol2')">Show Solution</button>
<div id="sol2" class="step-by-step" style="display: none;">
<div class="formula">
77 ÷ 2 = 38 remainder 1<br>
38 ÷ 2 = 19 remainder 0<br>
19 ÷ 2 = 9 remainder 1<br>
9 ÷ 2 = 4 remainder 1<br>
4 ÷ 2 = 2 remainder 0<br>
2 ÷ 2 = 1 remainder 0<br>
1 ÷ 2 = 0 remainder 1<br>
Reading remainders bottom to top: 1001101₂
</div>
</div>
</div>
<div class="example-box">
<h4>Problem 3: Binary Addition</h4>
<p>Add 1101₂ + 1011₂</p>
<button onclick="showSolution('sol3')">Show Solution</button>
<div id="sol3" class="step-by-step" style="display: none;">
<div class="formula">
Carries: 1 1 1 0<br>
1 1 0 1<br>
+ 1 0 1 1<br>
─────────────────<br>
1 1 0 0 0₂<br>
<br>
Check: 13₁₀ + 11₁₀ = 24₁₀<br>
11000₂ = 16 + 8 = 24₁₀ ✓
</div>
</div>
</div>
<div class="example-box">
<h4>Problem 4: Two's Complement</h4>
<p>Find the two's complement of 01010₂</p>
<button onclick="showSolution('sol4')">Show Solution</button>
<div id="sol4" class="step-by-step" style="display: none;">
<div class="formula">
Original: 01010<br>
Invert (1's): 10101<br>
Add 1: + 1<br>
─────────────────────<br>
Two's comp: 10110₂
</div>
</div>
</div>
<div class="example-box">
<h4>Problem 5: Hexadecimal to Decimal</h4>
<p>Convert 2A9₁₆ to decimal.</p>
<button onclick="showSolution('sol5')">Show Solution</button>
<div id="sol5" class="step-by-step" style="display: none;">
<div class="formula">
2A9₁₆<br>
= 2×16² + A×16¹ + 9×16⁰<br>
= 2×256 + 10×16 + 9×1<br>
= 512 + 160 + 9<br>
= 681₁₀
</div>
</div>
</div>
</div>
<div class="card">
<h2>🎲 Random Practice Generator</h2>
<button onclick="generatePractice()">Generate New Problem</button>
<div id="randomProblem" class="result" style="display: none;"></div>
</div>
</div>
</div>
<script>
// Tab switching
function showTab(tabName) {
const tabs = document.querySelectorAll('.tab-content');
const buttons = document.querySelectorAll('.tab-button');
tabs.forEach(tab => tab.classList.remove('active'));
buttons.forEach(btn => btn.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
event.target.classList.add('active');
}
// Update placeholder based on input base
function updatePlaceholder() {
const base = parseInt(document.getElementById('inputBase').value);
const input = document.getElementById('inputNumber');
const placeholders = {
2: 'e.g., 1011',
10: 'e.g., 29',
8: 'e.g., 35',
16: 'e.g., 1D'
};
input.placeholder = placeholders[base];
input.value = '';
convertAll();
}
// Universal converter
function convertAll() {
const inputBase = parseInt(document.getElementById('inputBase').value);
const inputValue = document.getElementById('inputNumber').value.trim().toUpperCase();
if (!inputValue) {
document.getElementById('binaryOutput').textContent = '-';
document.getElementById('decimalOutput').textContent = '-';
document.getElementById('octalOutput').textContent = '-';
document.getElementById('hexOutput').textContent = '-';
document.getElementById('conversionSteps').style.display = 'none';
return;
}
try {
// Convert to decimal first
let decimal = parseInt(inputValue, inputBase);
if (isNaN(decimal)) {
throw new Error('Invalid input');
}
// Convert to all bases
document.getElementById('binaryOutput').textContent = decimal.toString(2);
document.getElementById('decimalOutput').textContent = decimal.toString(10);
document.getElementById('octalOutput').textContent = decimal.toString(8);
document.getElementById('hexOutput').textContent = decimal.toString(16).toUpperCase();
// Show conversion steps
showConversionSteps(inputValue, inputBase, decimal);
} catch (e) {
document.getElementById('binaryOutput').textContent = 'Invalid';
document.getElementById('decimalOutput').textContent = 'Invalid';
document.getElementById('octalOutput').textContent = 'Invalid';
document.getElementById('hexOutput').textContent = 'Invalid';
}
}
function showConversionSteps(input, base, decimal) {
const stepsDiv = document.getElementById('stepsContent');
const baseName = {2: 'Binary', 8: 'Octal', 10: 'Decimal', 16: 'Hexadecimal'}[base];
let steps = `<h4>Converting ${input} from ${baseName} to Decimal:</h4>`;
if (base !== 10) {
steps += '<div class="formula">';
let terms = [];
let calculation = [];
for (let i = 0; i < input.length; i++) {
const digit = input[input.length - 1 - i];
const digitValue = parseInt(digit, base);
const power = i;
const value = digitValue * Math.pow(base, power);
terms.push(`${digit}×${base}^${power}`);
calculation.push(value);
}
steps += terms.reverse().join(' + ') + '<br>';
steps += '= ' + calculation.reverse().join(' + ') + '<br>';
steps += `= ${decimal}₁₀`;
steps += '</div>';
}
stepsDiv.innerHTML = steps;
document.getElementById('conversionSteps').style.display = 'block';
}
// Binary Addition
function binaryAddition() {
const num1 = document.getElementById('addNum1').value.trim();
const num2 = document.getElementById('addNum2').value.trim();
if (!/^[01]+$/.test(num1) || !/^[01]+$/.test(num2)) {
alert('Please enter valid binary numbers (only 0 and 1)');
return;
}
const maxLen = Math.max(num1.length, num2.length);
const a = num1.padStart(maxLen, '0');
const b = num2.padStart(maxLen, '0');
let result = '';
let carry = 0;
let steps = '<h4>Step-by-Step Addition:</h4><div class="formula">';
for (let i = maxLen - 1; i >= 0; i--) {
const bitA = parseInt(a[i]);
const bitB = parseInt(b[i]);
const sum = bitA + bitB + carry;
result = (sum % 2) + result;
carry = Math.floor(sum / 2);
}
if (carry) result = '1' + result;
steps += ` ${a}<br>+ ${b}<br>───────${'─'.repeat(maxLen)}<br> ${result}<br>`;
steps += '</div>';
steps += `<p><strong>Decimal Check:</strong> ${parseInt(num1, 2)} + ${parseInt(num2, 2)} = ${parseInt(result, 2)}</p>`;
const resultDiv = document.getElementById('additionResult');
resultDiv.innerHTML = steps;
resultDiv.style.display = 'block';
}
// Two's Complement
function calculateTwosComplement() {
const input = document.getElementById('twosCompInput').value.trim();
if (!/^[01]+$/.test(input)) {
alert('Please enter a valid binary number');
return;
}
// One's complement (invert)
let onesComp = '';
for (let bit of input) {
onesComp += bit === '0' ? '1' : '0';
}
// Add 1
let twosComp = '';
let carry = 1;
for (let i = onesComp.length - 1; i >= 0; i--) {
const sum = parseInt(onesComp[i]) + carry;
twosComp = (sum % 2) + twosComp;
carry = Math.floor(sum / 2);
}
const resultDiv = document.getElementById('twosCompResult');
resultDiv.innerHTML = `
<h4>Two's Complement Calculation:</h4>
<div class="formula">
Original: ${input}<br>
One's Comp: ${onesComp} (inverted)<br>
Add 1: + ${'0'.repeat(input.length - 1)}1<br>
─────────────${'─'.repeat(input.length)}<br>
Two's Comp: ${twosComp}
</div>
<p><strong>Decimal Values:</strong></p>
<p>Original: ${parseInt(input, 2)}</p>
<p>Two's Complement represents: -${parseInt(input, 2)}</p>
`;
resultDiv.style.display = 'block';
}
// Binary Subtraction
function binarySubtraction() {
const num1 = document.getElementById('subNum1').value.trim();
const num2 = document.getElementById('subNum2').value.trim();
if (!/^[01]+$/.test(num1) || !/^[01]+$/.test(num2)) {
alert('Please enter valid binary numbers');
return;
}
const maxLen = Math.max(num1.length, num2.length);
const a = num1.padStart(maxLen, '0');
// Get two's complement of num2
let onesComp = '';
for (let bit of num2.padStart(maxLen, '0')) {
onesComp += bit === '0' ? '1' : '0';
}
let twosComp = '';
let carry = 1;
for (let i = onesComp.length - 1; i >= 0; i--) {
const sum = parseInt(onesComp[i]) + carry;
twosComp = (sum % 2) + twosComp;
carry = Math.floor(sum / 2);
}
// Add a and twosComp
let result = '';
carry = 0;
for (let i = maxLen - 1; i >= 0; i--) {
const sum = parseInt(a[i]) + parseInt(twosComp[i]) + carry;
result = (sum % 2) + result;
carry = Math.floor(sum / 2);
}
const resultDiv = document.getElementById('subtractionResult');
resultDiv.innerHTML = `
<h4>Binary Subtraction using Two's Complement:</h4>
<div class="formula">
Minuend: ${a}<br>
Subtrahend: ${num2.padStart(maxLen, '0')}<br>
Two's Comp: ${twosComp}<br>
<br>
Add them:<br>
${a}<br>
+ ${twosComp}<br>
───────${'─'.repeat(maxLen)}<br>
${result} ${carry ? '(carry ignored)' : ''}<br>
</div>
<p><strong>Result:</strong> ${result}₂ = ${parseInt(result, 2)}₁₀</p>
<p><strong>Check:</strong> ${parseInt(num1, 2)} - ${parseInt(num2, 2)} = ${parseInt(num1, 2) - parseInt(num2, 2)}</p>
`;
resultDiv.style.display = 'block';
}
// Signed binary converter
function decimalToSigned() {
const decimal = parseInt(document.getElementById('signedDecimal').value);
if (isNaN(decimal) || decimal < -8 || decimal > 7) {
alert('Please enter a number between -8 and 7');
return;
}
let binary;
if (decimal >= 0) {
binary = decimal.toString(2).padStart(4, '0');
} else {
// Two's complement for negative
const positive = Math.abs(decimal).toString(2).padStart(4, '0');
let inverted = '';
for (let bit of positive) {
inverted += bit === '0' ? '1' : '0';
}
let result = '';
let carry = 1;
for (let i = 3; i >= 0; i--) {
const sum = parseInt(inverted[i]) + carry;
result = (sum % 2) + result;
carry = Math.floor(sum / 2);
}
binary = result;
}
const resultDiv = document.getElementById('signedResult');
resultDiv.innerHTML = `
<h4>4-bit Signed Binary (Two's Complement):</h4>
<div class="bit-display">
${binary.split('').map((bit, i) =>
`<div class="bit">${bit}${i === 0 ? '<br><small>sign</small>' : ''}</div>`
).join('')}
</div>
<p><strong>Decimal:</strong> ${decimal}</p>
<p><strong>Binary:</strong> ${binary}₂</p>
<p><strong>Sign bit:</strong> ${binary[0]} (${binary[0] === '0' ? 'positive' : 'negative'})</p>
`;
resultDiv.style.display = 'block';
drawBinaryCircle();
}
// Draw binary circle
function drawBinaryCircle() {
const canvas = document.getElementById('binaryCircle');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 180;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.strokeStyle = '#00d9ff';
ctx.lineWidth = 3;
ctx.stroke();
// Draw values
for (let i = 0; i < 8; i++) {
const angle = (i * Math.PI / 4) - Math.PI / 2;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
const binary = i.toString(2).padStart(3, '0');
const signed = i;
ctx.fillStyle = '#00d9ff';
ctx.font = 'bold 16px monospace';
ctx.textAlign = 'center';
ctx.fillText(binary, x, y);
ctx.fillStyle = '#4caf50';
ctx.font = '14px sans-serif';
ctx.fillText(`+${signed}`, x, y + 20);
}
for (let i = 0; i < 8; i++) {
const angle = (i * Math.PI / 4) - Math.PI / 2 + Math.PI;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
const binary = (i + 8).toString(2).padStart(3, '0');
const signed = -(8 - i);
ctx.fillStyle = '#ff6b6b';
ctx.font = 'bold 16px monospace';
ctx.textAlign = 'center';
ctx.fillText(binary, x, y);
ctx.fillStyle = '#f44336';
ctx.font = '14px sans-serif';
ctx.fillText(signed, x, y + 20);
}
// Center label
ctx.fillStyle = '#00d9ff';
ctx.font = 'bold 18px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('4-bit', centerX, centerY - 10);
ctx.fillText('Binary Circle', centerX, centerY + 10);
}
// Half Adder
function testHalfAdder() {
const a = document.getElementById('haA').value;
const b = document.getElementById('haB').value;
if (!/^[01]$/.test(a) || !/^[01]$/.test(b)) {
alert('Please enter 0 or 1 only');
return;
}
const sum = parseInt(a) ^ parseInt(b); // XOR
const carry = parseInt(a) & parseInt(b); // AND
const resultDiv = document.getElementById('halfAdderResult');
resultDiv.innerHTML = `
<h4>Half Adder Result:</h4>
<p><strong>Inputs:</strong> A = ${a}, B = ${b}</p>
<p><strong>Sum = A ⊕ B = ${sum}</strong></p>
<p><strong>Carry = A · B = ${carry}</strong></p>
`;
resultDiv.style.display = 'block';
}
// Full Adder
function testFullAdder() {
const a = document.getElementById('faA').value;
const b = document.getElementById('faB').value;
const cin = document.getElementById('faCin').value;
if (!/^[01]$/.test(a) || !/^[01]$/.test(b) || !/^[01]$/.test(cin)) {
alert('Please enter 0 or 1 only');
return;
}
const aInt = parseInt(a);
const bInt = parseInt(b);
const cinInt = parseInt(cin);
const sum = aInt ^ bInt ^ cinInt;
const cout = (aInt & bInt) | (aInt & cinInt) | (bInt & cinInt);
const resultDiv = document.getElementById('fullAdderResult');
resultDiv.innerHTML = `
<h4>Full Adder Result:</h4>
<p><strong>Inputs:</strong> A = ${a}, B = ${b}, Cin = ${cin}</p>
<p><strong>Sum = A ⊕ B ⊕ Cin = ${sum}</strong></p>
<p><strong>Cout = AB + ACin + BCin = ${cout}</strong></p>
<div class="formula">
Decimal: ${aInt} + ${bInt} + ${cinInt} = ${sum + (cout * 2)}
</div>
`;
resultDiv.style.display = 'block';
}
// Practice solutions
function showSolution(id) {
const sol = document.getElementById(id);
sol.style.display = sol.style.display === 'none' ? 'block' : 'none';
}
// Random practice generator
function generatePractice() {
const types = [
{
type: 'Binary to Decimal',
generate: () => {
const num = Math.floor(Math.random() * 256);
const binary = num.toString(2);
return {
question: `Convert ${binary}₂ to decimal`,
answer: `${num}₁₀`
};
}
},
{
type: 'Decimal to Binary',
generate: () => {
const num = Math.floor(Math.random() * 256);
return {
question: `Convert ${num}₁₀ to binary`,
answer: `${num.toString(2)}₂`
};
}
},
{
type: 'Hexadecimal to Decimal',
generate: () => {
const num = Math.floor(Math.random() * 256);
const hex = num.toString(16).toUpperCase();
return {
question: `Convert ${hex}₁₆ to decimal`,
answer: `${num}₁₀`
};
}
},
{
type: 'Binary Addition',
generate: () => {
const a = Math.floor(Math.random() * 16);
const b = Math.floor(Math.random() * 16);
return {
question: `Add ${a.toString(2)}₂ + ${b.toString(2)}₂`,
answer: `${(a + b).toString(2)}₂ (${a + b}₁₀)`
};
}
}
];
const selected = types[Math.floor(Math.random() * types.length)];
const problem = selected.generate();
const resultDiv = document.getElementById('randomProblem');
resultDiv.innerHTML = `
<h3>${selected.type}</h3>
<h4>Question:</h4>
<p style="font-size: 1.2em;">${problem.question}</p>
<button onclick="document.getElementById('practiceAnswer').style.display='block'">Show Answer</button>
<div id="practiceAnswer" style="display: none; margin-top: 15px;">
<strong class="success">Answer: ${problem.answer}</strong>
</div>
`;
resultDiv.style.display = 'block';
}
// Initialize
window.onload = function() {
drawBinaryCircle();
};
</script>
</body>
</html>