Modernize calculator UI with theme switching functionality

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
         "browser": true,
         "es2021": true,
         "mocha": true,
-        "request": true
+        "node": true
     },
     "extends": "eslint:recommended",
     "overrides": [

api/controller.js

@@ -16,6 +16,7 @@ exports.calculate = function(req, res) {
     'subtract': function(a, b) { return a - b },
     'multiply': function(a, b) { return a * b },
     'divide':   function(a, b) { return a / b },
+    'modulo':   function(a, b) { return a % b },
   };
 
   if (!req.query.operation) {
@@ -29,13 +30,13 @@ exports.calculate = function(req, res) {
   }
 
   if (!req.query.operand1 ||
-      !req.query.operand1.match(/^(-)?[0-9\.]+(e(-)?[0-9]+)?$/) ||
+      !req.query.operand1.match(/^(-)?[0-9.]+(e(-)?[0-9]+)?$/) ||
       req.query.operand1.replace(/[-0-9e]/g, '').length > 1) {
     throw new Error("Invalid operand1: " + req.query.operand1);
   }
 
   if (!req.query.operand2 ||
-      !req.query.operand2.match(/^(-)?[0-9\.]+(e(-)?[0-9]+)?$/) ||
+      !req.query.operand2.match(/^(-)?[0-9.]+(e(-)?[0-9]+)?$/) ||
       req.query.operand2.replace(/[-0-9e]/g, '').length > 1) {
     throw new Error("Invalid operand2: " + req.query.operand2);
   }

public/client.js

@@ -16,6 +16,38 @@ var operand1 = 0;
 var operand2 = 0;
 var operation = null;
 
+// Theme management
+const themes = ['default', 'dark', 'light', 'colorful'];
+let currentThemeIndex = 0;
+
+function initializeTheme() {
+    const savedTheme = localStorage.getItem('calculatorTheme');
+    if (savedTheme && themes.includes(savedTheme)) {
+        currentThemeIndex = themes.indexOf(savedTheme);
+        applyTheme(savedTheme);
+    } else {
+        applyTheme(themes[0]);
+    }
+
+    // Add theme toggle event listener
+    document.getElementById('themeToggle').addEventListener('click', toggleTheme);
+}
+
+function toggleTheme() {
+    currentThemeIndex = (currentThemeIndex + 1) % themes.length;
+    const newTheme = themes[currentThemeIndex];
+    applyTheme(newTheme);
+    localStorage.setItem('calculatorTheme', newTheme);
+}
+
+function applyTheme(theme) {
+    if (theme === 'default') {
+        document.documentElement.removeAttribute('data-theme');
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+}
+
 function calculate(operand1, operand2, operation) {
     var uri = location.origin + "/arithmetic";
 
@@ -33,6 +65,9 @@ function calculate(operand1, operand2, operation) {
         case '/':
             uri += "?operation=divide";
             break;
+        case '%':
+            uri += "?operation=modulo";
+            break;
         default:
             setError();
             return;
@@ -138,7 +173,7 @@ document.addEventListener('keypress', (event) => {
         numberPressed(event.key);
     } else if (event.key == '.') {
         decimalPressed();
-    } else if (event.key.match(/^[-*+/]$/)) {
+    } else if (event.key.match(/^[-*+/%]$/)) {
         operationPressed(event.key);
     } else if (event.key == '=') {
         equalPressed();
@@ -198,3 +233,8 @@ function setLoading(loading) {
         buttons[i].disabled = loading;
     }
 }
+
+// Initialize theme when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeTheme();
+});