Added a backspace button, moved some buttons

static/assets/js/calculator-logic.js

@@ -17,6 +17,8 @@ buttons.forEach(button => {
             toggleHistory();
         } else if (value === 'settings') {
             toggleSettings();
+        } else if (value === 'backspace') {
+            popCharacter();
         } else if (value === '=') {
             calculateResult();
         } else {
@@ -74,7 +76,7 @@ function calculateResult() {
     const equation = characterSpans.map(span => span.textContent).join('');
     let result;
     try {
-        result = eval(equation.replace('÷', '/').replaceAll('×', '*')).toString();
+        result = eval(equation.replaceAll('÷', '/').replaceAll('×', '*').replaceAll('−', '-')).toString();
     } catch (error) {
         result = 'Error';
     }
@@ -156,6 +158,40 @@ function resetCalculator() {
     isResultDisplayed = false; // Reset the result display flag
 }
 
+// popLock (funny name) is true when a cbaracter pop animation is being progress.
+let popLock = false;
+function popCharacter() {
+    if (popLock) return;
+    popLock = true;
+
+    if (isResultDisplayed) {
+        resetCalculator();
+        popLock = false;
+        return;
+    }
+
+    currentInput = currentInput.slice(0, -1);
+    characterSpans.pop();
+    if (displayText.innerHTML.length === 0) {
+        isResultDisplayed = false;
+        popLock = false;
+        return;
+    }
+
+    // Animate character disappearing
+    anime({
+        targets: displayText.lastChild,
+        opacity: [1, 0],
+        duration: 150,
+        easing: 'easeInExpo',
+        complete: () => {
+            displayText.removeChild(displayText.lastChild);
+            updateCharacterPositions();
+            popLock = false;
+        }
+    });
+}
+
 function updateDisplay(value) {
     // Clear existing spans and reset positions
     displayText.innerHTML = '';

static/index.html

@@ -11,7 +11,7 @@
         href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
         rel="stylesheet">
     <link rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=settings" />
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <!-- anime.js is a library for easy fancy animations with JavaScript -->
@@ -32,9 +32,9 @@
         <div class="display">
             <div class="display-text"></div>
         </div>
+        <button class="button"><span class="material-symbols-outlined">backspace</span></button>
         <button class="button">AC</button>
         <button class="button">H</button>
-        <button class="button">%</button>
         <button class="button operation">÷</button>
         <button class="button">7</button>
         <button class="button">8</button>