Replace alert with inline validation message for better UX

[sambhavi0]

• Replaced browser alert with inline validation message
• Improves user experience by avoiding disruptive popups
• Error message shows and hides dynamically based on input validity

Summary by CodeRabbit

• New Features

  • Added an inline red validation message in the decimal input area that appears when an invalid value is entered.

• Bug Fixes

  • Replaced blocking alert pop-ups with the inline validation message and reset invalid inputs to 0 to reduce interruptions.

• Refactor

  • Improved update flow to make bit updates and result calculation more efficient and responsive.

[coderabbitai]

Warning

Rate limit exceeded

@sambhavi0 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 30 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a138279-5ad0-475a-81af-006fa150b0e7

📥 Commits

Reviewing files that changed from the base of the PR and between 3129a4b and 47ceb04.

📒 Files selected for processing (1)

• assets/js/module.js

Walkthrough

A hidden error message element with id="input-error" was added to _includes/binary2.html. In assets/js/module.js, set_bits() no longer shows an alert or re-invokes itself on invalid input; it toggles #input-error visibility and resets inputs. For valid input it hides the error, computes the 8-bit representations for both values in a single loop, and calls do_bitwise() once after the loop.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: replacing alert dialogs with an inline validation message. This directly aligns with the modifications across both files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

_includes/binary2.html (1)

59-61: Consider accessibility and styling improvements for the error message.

The inline error message implementation looks reasonable. A few suggestions:

1. Add role="alert" or aria-live="polite" for screen reader accessibility
2. Consider using a CSS class instead of inline styles for maintainability
3. The placement between the two inputs works, but ensure users understand which input triggered the error (both are validated together)

♿ Suggested accessibility improvement

-      <p id="input-error" style="color: red; display: none; font-size: 14px;">
+      <p id="input-error" role="alert" style="color: red; display: none; font-size: 14px;">
       Only numbers between 0 and 255 can be entered.
       </p>

assets/js/module.js (1)

33-37: Fix inconsistent indentation.

The closing brace on line 33 and opening brace on line 37 have inconsistent indentation with the rest of the code, making it harder to follow the control flow.

🧹 Fix formatting

         const errorEl = document.getElementById("input-error");
         if (errorEl) {
             errorEl.style.display = "block";
-}
+        }
         set_bits();
     }
     else
-{
+    {
         const errorEl = document.getElementById("input-error");

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 06c8c263-c360-4857-8a93-c8fe0d04912f

📥 Commits

Reviewing files that changed from the base of the PR and between ac91c0a and c2588ff.

📒 Files selected for processing (2)

• _includes/binary2.html
• assets/js/module.js

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

assets/js/module.js (1)

30-40: Inconsistent indentation and brace placement.

The closing brace on line 33 and the code block starting at line 36 have inconsistent indentation compared to the surrounding code. Consider aligning the formatting for better readability.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 490c3030-cba3-4355-b613-b037f0859156

📥 Commits

Reviewing files that changed from the base of the PR and between c2588ff and 9921bdf.

📒 Files selected for processing (1)

• assets/js/module.js