From c2588ff33e6b20e87d978ff659b220ac2ca688d1 Mon Sep 17 00:00:00 2001 From: Sambhavi Date: Mon, 23 Mar 2026 18:19:38 +0530 Subject: [PATCH 1/5] Replace alert with inline validation message for better UX --- _includes/binary2.html | 3 +++ assets/js/module.js | 25 ++++++++++++++++--------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/_includes/binary2.html b/_includes/binary2.html index dd70016c5..c9c82a9b3 100644 --- a/_includes/binary2.html +++ b/_includes/binary2.html @@ -56,6 +56,9 @@ max="255" onkeypress="return event.charCode >= 48 && event.charCode <= 57" /> +
OR
diff --git a/assets/js/module.js b/assets/js/module.js index 0d2577ee8..bdca50dca 100644 --- a/assets/js/module.js +++ b/assets/js/module.js @@ -27,20 +27,27 @@ function set_bits() { document.getElementById("value_A").value = 0; document.getElementById("value_B").value = 0; - alert("Only numbers between 0 and 255 can be entered."); + const errorEl = document.getElementById("input-error"); + if (errorEl) { + errorEl.style.display = "block"; +} set_bits(); } else +{ + const errorEl = document.getElementById("input-error"); + if (errorEl) { + errorEl.style.display = "none"; + } + + for(var i=0; i < 8; i++) { - for(var i=0; i < 8; i++) - { - if((document.getElementById("value_A").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } - document.getElementById(i).innerHTML = bit_display[bit[i] = bit_value]; - if((document.getElementById("value_B").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } - document.getElementById(i+8).innerHTML = bit_display[bit[i+8] = bit_value]; - } - do_bitwise(); + if((document.getElementById("value_A").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } + document.getElementById(i).innerHTML = bit_display[bit[i] = bit_value]; + if((document.getElementById("value_B").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } + document.getElementById(i+8).innerHTML = bit_display[bit[i+8] = bit_value]; } + do_bitwise(); } function toggle_bit(column) From 9921bdf34fc35f4ccabb3a8aa7c6eb1db6b6de9a Mon Sep 17 00:00:00 2001 From: Sambhavi Date: Mon, 23 Mar 2026 18:36:00 +0530 Subject: [PATCH 2/5] Fix: remove recursive set_bits call to prevent error flicker --- assets/js/module.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/js/module.js b/assets/js/module.js index bdca50dca..1fa3eadd2 100644 --- a/assets/js/module.js +++ b/assets/js/module.js @@ -31,7 +31,6 @@ function set_bits() if (errorEl) { errorEl.style.display = "block"; } - set_bits(); } else { From 3129a4bc2c84411e6ca66c956a0471f80c1a21fd Mon Sep 17 00:00:00 2001 From: Sambhavi Date: Mon, 23 Mar 2026 19:00:17 +0530 Subject: [PATCH 3/5] Fix: added operator to do_bitwise --- assets/js/module.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/module.js b/assets/js/module.js index 1fa3eadd2..b6da7a818 100644 --- a/assets/js/module.js +++ b/assets/js/module.js @@ -46,7 +46,7 @@ function set_bits() if((document.getElementById("value_B").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } document.getElementById(i+8).innerHTML = bit_display[bit[i+8] = bit_value]; } - do_bitwise(); + do_bitwise(operator); } function toggle_bit(column) From 64e36b750fba2497ce3edeb96ec2b009ec281487 Mon Sep 17 00:00:00 2001 From: Sambhavi Date: Mon, 23 Mar 2026 19:06:01 +0530 Subject: [PATCH 4/5] Fixed const to variable --- assets/js/module.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/js/module.js b/assets/js/module.js index b6da7a818..f6609d3ec 100644 --- a/assets/js/module.js +++ b/assets/js/module.js @@ -27,14 +27,14 @@ function set_bits() { document.getElementById("value_A").value = 0; document.getElementById("value_B").value = 0; - const errorEl = document.getElementById("input-error"); + var errorEl = document.getElementById("input-error"); if (errorEl) { errorEl.style.display = "block"; } } else { - const errorEl = document.getElementById("input-error"); + var errorEl = document.getElementById("input-error"); if (errorEl) { errorEl.style.display = "none"; } From 47ceb04fcc489ca56c6977e80b8a948fd2c41fa0 Mon Sep 17 00:00:00 2001 From: Sambhavi Date: Mon, 23 Mar 2026 19:11:38 +0530 Subject: [PATCH 5/5] improved changes --- assets/js/module.js | 53 ++++++++++++++++++++++++++++++++------------- 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/assets/js/module.js b/assets/js/module.js index f6609d3ec..64077645b 100644 --- a/assets/js/module.js +++ b/assets/js/module.js @@ -23,30 +23,53 @@ bit.fill(false); function set_bits() { - if(isNaN(document.getElementById("value_A").value) || document.getElementById("value_A").value > 255 || document.getElementById("value_A").value < 0 || isNaN(document.getElementById("value_B").value) || document.getElementById("value_B").value < 0 || document.getElementById("value_B").value > 255) + var errorEl = document.getElementById("input-error"); + var bit_value; + + if ( + isNaN(document.getElementById("value_A").value) || + document.getElementById("value_A").value > 255 || + document.getElementById("value_A").value < 0 || + isNaN(document.getElementById("value_B").value) || + document.getElementById("value_B").value < 0 || + document.getElementById("value_B").value > 255 + ) { document.getElementById("value_A").value = 0; document.getElementById("value_B").value = 0; - var errorEl = document.getElementById("input-error"); + if (errorEl) { errorEl.style.display = "block"; -} + } } else -{ - var errorEl = document.getElementById("input-error"); - if (errorEl) { - errorEl.style.display = "none"; - } - - for(var i=0; i < 8; i++) { - if((document.getElementById("value_A").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } - document.getElementById(i).innerHTML = bit_display[bit[i] = bit_value]; - if((document.getElementById("value_B").value&Math.pow(2,i))>0) { bit_value = true; } else { bit_value = false; } - document.getElementById(i+8).innerHTML = bit_display[bit[i+8] = bit_value]; + if (errorEl) { + errorEl.style.display = "none"; + } + + for (var i = 0; i < 8; i++) + { + if ((document.getElementById("value_A").value & Math.pow(2, i)) > 0) { + bit_value = true; + } else { + bit_value = false; + } + + document.getElementById(i).innerHTML = bit_display[bit[i] = bit_value]; + + if ((document.getElementById("value_B").value & Math.pow(2, i)) > 0) { + bit_value = true; + } else { + bit_value = false; + } + + document.getElementById(i + 8).innerHTML = bit_display[bit[i + 8] = bit_value]; + } + + do_bitwise(operator); } - do_bitwise(operator); +} } function toggle_bit(column)