Skip to content

Transform calculator into LOTR-themed scientific calculator with dark/light modes - #4

Draft
haslam93 with Copilot wants to merge 3 commits into
mainfrom
copilot/change-calculator-theme
Draft

Transform calculator into LOTR-themed scientific calculator with dark/light modes#4
haslam93 with Copilot wants to merge 3 commits into
mainfrom
copilot/change-calculator-theme

Conversation

Copilot AI commented Jan 29, 2026

Copy link
Copy Markdown

Converts basic arithmetic calculator into a scientific calculator with Lord of the Rings theming, dual color modes, and full-screen responsive layout.

Scientific Functions

  • Trigonometric: sin, cos, tan (degree mode)
  • Mathematical: , , , , log₁₀, π
  • Input validation: rejects log(x≤0), √(x<0), tan(90°), NaN, Infinity

Theming

  • Dark mode (Mordor): #1a1612#3a3028 gradients, gold (#d4af37) accents
  • Light mode (Shire): #f5f0e8#dcd0b8 gradients, brown (#3e2723) text
  • Toggle persisted to localStorage, applied on init
  • CSS variables enable runtime theme switching

Layout

  • Full viewport: 90vw × 90vh (max 600px × 800px)
  • Responsive breakpoints: @768px (mobile), @700px (height-constrained)
  • Grid layout: 4 columns, dynamic rows for scientific buttons

Technical Improvements

  • Proper HTML5: <!DOCTYPE html>, lang="en", charset="UTF-8"
  • All buttons: type="button" (prevent form submission)
  • Scientific operations computed client-side (power operator uses local Math.pow)
  • Existing API arithmetic operations unchanged

Screenshots

Before:
Before

After - Dark Mode:
Dark Mode

After - Light Mode:
Light Mode

Functionality Demo:
Calculator in action

Original prompt

Change the calculator theme

Work Item Details

Note: Please focus on the descriptions and information that provide context about the task requirements, functionality, and implementation details. Dates, priorities, and administrative metadata are less relevant for coding tasks.

Description

Change the calculator Theme.
Add a theme that resembles Lord of the Rings.

Make the calculator scientific.
Add Dark ad Light mode.

Acceptance Criteria:

  • Screenshot before the changes
  • Screenshot after the changes.
  • All functionalities are operating
  • Calculator fills the screen

Work item: AB#1061
Created via Azure DevOps


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits January 29, 2026 16:58
…ght mode

Co-authored-by: haslam93 <36418598+haslam93@users.noreply.github.com>
…ibutes to buttons

Co-authored-by: haslam93 <36418598+haslam93@users.noreply.github.com>
Copilot AI changed the title [WIP] Change calculator theme to resemble Lord of the Rings Transform calculator into LOTR-themed scientific calculator with dark/light modes Jan 29, 2026
Copilot AI requested a review from haslam93 January 29, 2026 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants