Improve Calculator UI — rounded buttons, separate screens, colored = and Clear#226
Open
DhruvGupta6177 wants to merge 2 commits into
Open
Improve Calculator UI — rounded buttons, separate screens, colored = and Clear#226DhruvGupta6177 wants to merge 2 commits into
DhruvGupta6177 wants to merge 2 commits into
Conversation
- Added input field to specify password length (1-128 characters) - Removed hardcoded password lengths (13 and 12) - Both passwords now generate with the same user-specified length - Added validation for input values with alerts - Styled input field to match dark theme - Default password length set to 12
- Added distinct colors for = button (green) and C (Clear) button (red) - Rounded buttons with hover effects for better UX - Improved screen display with separate operation and result sections - Added better visual hierarchy and contrast - Styled screens with dark theme colors for better visibility - Decimal button now spans full width on its own row
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds user-configurable password length to the Password Generator UI (with client-side clamping) and refreshes the Calculator UI with a new screen layout and improved button styling.
Changes:
- Add a numeric “Password Length” input and use it to generate passwords.
- Validate/clamp password length to a 1–128 range and update the input accordingly.
- Update Calculator markup/CSS to introduce a dedicated screen container and enhanced button styles.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| Password Generator/index.js | Reads user-selected length, clamps it, and generates passwords with the chosen length. |
| Password Generator/index.html | Adds a labeled numeric input for password length. |
| Password Generator/index.css | Styles the new password-length input group. |
| Calculator/cal.html | Restructures the display into operation/result “screens” and adds button classes. |
| Calculator/cal.css | Adds hover effects and new styles for special buttons and screens. |
Comments suppressed due to low confidence (1)
Calculator/cal.css:1
- The layout relies on fixed pixel widths (900px/815px), which is likely to overflow or require horizontal scrolling on smaller screens. Consider using fluid sizing (
max-width: 100%,width: 100%for.screen-container/.decimal-btn) and letting button rows wrap or use a grid so the calculator remains usable on narrow viewports.
body{
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+43
to
+44
| let lengthInput = document.querySelector("#passwordLength"); | ||
| let length = parseInt(lengthInput.value) || 12; |
| }; | ||
|
|
||
| const displayPassword = () => { | ||
| let lengthInput = document.querySelector("#passwordLength"); |
Comment on lines
57
to
59
| let dPassword1 = document.querySelector(".Password1"); | ||
| dPassword1.textContent = generatePassword(13); | ||
| dPassword1.textContent = generatePassword(length); | ||
| let dPassword2 = document.querySelector(".Password2"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR improves the Calculator UI to be more realistic and user-friendly.
What I changed
=(green) andC(red) buttons for clearer affordance.Files changed
Calculator/cal.htmlCalculator/cal.cssNotes
improve-calculator-uiin my fork.Please review and merge if acceptable.