Skip to content

Implemented feature f01: Bin2Dec converter #1111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
asthanit1205 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implemented feature f01: Bin2Dec converter #1111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions bin2dec-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bin2Dec Practice App</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="app-shell">
<section class="card" aria-labelledby="title">
<p class="eyebrow">CommitVerse Practice</p>
<h1 id="title">Binary to Decimal Converter</h1>
<p class="subtitle">Enter a binary number and get its base-10 value.</p>

<form id="converter-form" novalidate>
<label for="binary-input">Binary Input</label>
<input
id="binary-input"
name="binary"
type="text"
inputmode="numeric"
maxlength="8"
placeholder="Example: 10110101"
aria-describedby="input-hint error-text"
required
/>
<p id="input-hint" class="hint">Up to 8 digits (0 or 1 only)</p>

<label class="toggle-row" for="allow-variable-length">
<input id="allow-variable-length" type="checkbox" />
<span>Bonus mode: allow variable length input</span>
</label>

<button type="submit">Convert</button>
</form>

<p id="error-text" class="error" role="alert" aria-live="polite"></p>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Use a single live-region strategy for error announcements.

Line 41 mixes role="alert" (assertive) with aria-live="polite". That can lead to inconsistent screen-reader behavior. Keep one (typically aria-live="polite" for inline validation).

Suggested change 
-      <p id="error-text" class="error" role="alert" aria-live="polite"></p>
+      <p id="error-text" class="error" aria-live="polite"></p>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p id="error-text" class="error" role="alert" aria-live="polite"></p>
<p id="error-text" class="error" aria-live="polite"></p>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@bin2dec-app/index.html` at line 41, The element with id "error-text"
currently mixes role="alert" and aria-live="polite", causing inconsistent SR
behavior; update the <p id="error-text"> element (identifier: error-text) to use
a single live-region strategy by removing role="alert" and keeping
aria-live="polite" (or vice versa if assertive is required), and ensure the
element still has appropriate aria attributes (e.g., aria-live="polite") for
inline validation announcements.


<label for="decimal-output">Decimal Output</label>
<output id="decimal-output" class="output" aria-live="polite">-</output>
</section>
</main>

<script src="script.js"></script>
</body>
</html>
69 changes: 69 additions & 0 deletions bin2dec-app/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const form = document.getElementById("converter-form");
const binaryInput = document.getElementById("binary-input");
const allowVariableLength = document.getElementById("allow-variable-length");
const errorText = document.getElementById("error-text");
const decimalOutput = document.getElementById("decimal-output");

function setError(message) {
errorText.textContent = message;
}

function sanitizeInput(value) {
return value.trim();
}

function isBinaryString(value) {
return /^[01]+$/.test(value);
}

function binaryToDecimal(binaryValue) {
let decimalValue = 0;
let positionFromRight = 0;

for (let i = binaryValue.length - 1; i >= 0; i -= 1) {
if (binaryValue[i] === "1") {
decimalValue += Math.pow(2, positionFromRight);
}
positionFromRight += 1;
}

return decimalValue;
}
Comment on lines +19 to +31
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Read-only verification: demonstrate precision loss in Number-based approach.
node - <<'NODE'
const binary = '1'.repeat(64);

let dec = 0;
let pos = 0;
for (let i = binary.length - 1; i >= 0; i--) {
  if (binary[i] === '1') dec += Math.pow(2, pos);
  pos++;
}

const expected = (2n ** 64n) - 1n;
console.log('number_result:', dec);
console.log('number_as_bigint:', BigInt(dec).toString());
console.log('expected:', expected.toString());
console.log('exact_match:', BigInt(dec) === expected);
NODE

Repository: florinpop17/app-ideas

Length of output: 189

🏁 Script executed:

#!/bin/bash
# Verify the actual code in the repository and check related lines

# First, let's find and read the script.js file
fd "script\.js" bin2dec-app -type f

# Then check the structure around lines 19-31 and 67-68
if [ -f "bin2dec-app/script.js" ]; then
  echo "=== Lines 15-75 of script.js ==="
  cat -n bin2dec-app/script.js | sed -n '15,75p'
fi

Repository: florinpop17/app-ideas

Length of output: 1959

64-bit bonus inputs produce incorrect decimals due to Number precision limits.

The binaryToDecimal function accumulates results into a Number type, which cannot exactly represent integers beyond 2^53-1. For 64-bit binary inputs (up to 2^64-1), this causes precision loss. For example, the maximum 64-bit value (all ones) converts to 18446744073709552000 instead of the correct 18446744073709551615.

Use BigInt for exact conversion. This affects both the function at lines 19-31 and the result assignment at lines 67-68.

Suggested fix (use BigInt for exact conversion) 
 function binaryToDecimal(binaryValue) {
-  let decimalValue = 0;
+  let decimalValue = 0n;
   let positionFromRight = 0;
 
   for (let i = binaryValue.length - 1; i >= 0; i -= 1) {
     if (binaryValue[i] === "1") {
-      decimalValue += Math.pow(2, positionFromRight);
+      decimalValue += 1n << BigInt(positionFromRight);
     }
     positionFromRight += 1;
   }
 
   return decimalValue;
 }
@@
-  const result = binaryToDecimal(binaryValue);
-  decimalOutput.textContent = String(result);
+  const result = binaryToDecimal(binaryValue);
+  decimalOutput.textContent = result.toString();
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@bin2dec-app/script.js` around lines 19 - 31, The binaryToDecimal function
should use BigInt to avoid Number precision loss: change decimalValue to
BigInt(0), use BigInt(2) exponentiation or bit shifts and add BigInt(1) when a
digit is "1" (e.g., shift/<< with BigInt), and keep position tracking as BigInt
arithmetic; also update the code that assigns/displays the conversion result
(the result variable/assignment where the function is called) to convert the
BigInt to a string (via toString()) before rendering. Ensure all intermediate
literals and arithmetic in binaryToDecimal use BigInt types and that the
returned value is a BigInt so the caller transforms it to a string for display.


function validateInput(binaryValue, allowLongInput) {
if (!binaryValue) {
return "Please enter a binary number.";
}

if (!isBinaryString(binaryValue)) {
return "Only 0 and 1 are allowed.";
}

if (!allowLongInput && binaryValue.length > 8) {
return "Use up to 8 digits, or enable bonus mode.";
}

return "";
}
Comment on lines +33 to +47
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Mirror bonus-mode length limit in validation logic.

Validation currently enforces only the non-bonus 8-digit rule. Add an explicit 64-digit check so the business rule is not only UI-attribute-dependent.

Suggested change 
 function validateInput(binaryValue, allowLongInput) {
   if (!binaryValue) {
     return "Please enter a binary number.";
   }
@@
   if (!allowLongInput && binaryValue.length > 8) {
     return "Use up to 8 digits, or enable bonus mode.";
   }
+  
+  if (allowLongInput && binaryValue.length > 64) {
+    return "Use up to 64 digits in bonus mode.";
+  }
 
   return "";
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function validateInput(binaryValue, allowLongInput) {
if (!binaryValue) {
return "Please enter a binary number.";
}
if (!isBinaryString(binaryValue)) {
return "Only 0 and 1 are allowed.";
}
if (!allowLongInput && binaryValue.length > 8) {
return "Use up to 8 digits, or enable bonus mode.";
}
return "";
}
function validateInput(binaryValue, allowLongInput) {
if (!binaryValue) {
return "Please enter a binary number.";
}
if (!isBinaryString(binaryValue)) {
return "Only 0 and 1 are allowed.";
}
if (!allowLongInput && binaryValue.length > 8) {
return "Use up to 8 digits, or enable bonus mode.";
}
if (allowLongInput && binaryValue.length > 64) {
return "Use up to 64 digits in bonus mode.";
}
return "";
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@bin2dec-app/script.js` around lines 33 - 47, The validateInput function
currently enforces only the 8-digit limit; update it to also enforce a 64-digit
cap when bonus mode is enabled by checking allowLongInput and returning an
appropriate error if binaryValue.length > 64. Keep existing checks (empty input
and isBinaryString) and ensure the error messages differentiate the two limits
(e.g., "Use up to 8 digits..." vs "Use up to 64 digits, or disable bonus
mode."). Modify validateInput (and reference allowLongInput, binaryValue,
isBinaryString) to run the 64-length check before returning success.


allowVariableLength.addEventListener("change", () => {
binaryInput.maxLength = allowVariableLength.checked ? 64 : 8;
setError("");
});

form.addEventListener("submit", (event) => {
event.preventDefault();
setError("");

const binaryValue = sanitizeInput(binaryInput.value);
const validationMessage = validateInput(binaryValue, allowVariableLength.checked);

if (validationMessage) {
decimalOutput.textContent = "-";
setError(validationMessage);
return;
}

const result = binaryToDecimal(binaryValue);
decimalOutput.textContent = String(result);
});
157 changes: 157 additions & 0 deletions bin2dec-app/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
:root {
--bg-a: #fbf3ea;
--bg-b: #d6efe2;
--card-bg: rgba(255, 255, 255, 0.82);
--text-main: #1f2937;
--text-muted: #5b6878;
--accent: #006d77;
--accent-strong: #00545c;
--danger: #bf1f2f;
--ring: rgba(0, 109, 119, 0.28);
}

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
font-family: "Space Grotesk", sans-serif;
color: var(--text-main);
background:
radial-gradient(circle at 12% 20%, rgba(250, 173, 20, 0.2), transparent 42%),
radial-gradient(circle at 82% 15%, rgba(0, 109, 119, 0.23), transparent 36%),
linear-gradient(145deg, var(--bg-a), var(--bg-b));
display: grid;
place-items: center;
padding: 24px;
}

.app-shell {
width: min(640px, 100%);
}

.card {
border-radius: 24px;
padding: 28px;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.65);
backdrop-filter: blur(8px);
box-shadow: 0 24px 60px rgba(18, 38, 63, 0.18);
animation: rise-in 420ms ease-out;
}

.eyebrow {
margin: 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
font-size: 0.76rem;
}

h1 {
margin: 10px 0 6px;
font-size: clamp(1.5rem, 3.2vw, 2rem);
}

.subtitle {
margin: 0 0 18px;
color: var(--text-muted);
}

form {
display: grid;
gap: 10px;
}

label {
font-weight: 600;
}

input[type="text"] {
width: 100%;
border: 1px solid rgba(31, 41, 55, 0.26);
border-radius: 12px;
padding: 11px 12px;
font: inherit;
transition: border-color 160ms ease, box-shadow 160ms ease;
}

input[type="text"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px var(--ring);
}

.hint {
margin: 0 0 6px;
color: var(--text-muted);
font-size: 0.9rem;
}

.toggle-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 500;
color: var(--text-muted);
margin: 2px 0 8px;
}

button {
border: none;
border-radius: 12px;
padding: 12px;
font: inherit;
font-weight: 700;
background: var(--accent);
color: #fff;
cursor: pointer;
transition: transform 140ms ease, background-color 140ms ease;
}

button:hover {
background: var(--accent-strong);
transform: translateY(-1px);
}

.error {
min-height: 1.4em;
margin: 14px 0 8px;
color: var(--danger);
font-weight: 600;
}

.output {
display: block;
width: 100%;
margin-top: 8px;
border: 1px dashed rgba(31, 41, 55, 0.35);
background: rgba(255, 255, 255, 0.7);
border-radius: 12px;
padding: 12px;
font-size: 1.15rem;
font-weight: 700;
min-height: 50px;
}

@keyframes rise-in {
from {
opacity: 0;
transform: translateY(14px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@media (max-width: 640px) {
.card {
padding: 22px;
border-radius: 18px;
}
}