Improve code explanation

static/assets/js/calculator-logic.js

@@ -7,6 +7,7 @@ let characterSpans = []; // Array to track all spans for proper positioning
 let isResultDisplayed = false; // Track if the result is displayed
 let resultSpan; // For showing the result
 
+// Add on-click event listeners to the buttons.
 buttons.forEach(button => {
     button.addEventListener('click', () => {
         const value = button.textContent;
@@ -32,6 +33,7 @@ buttons.forEach(button => {
     });
 });
 
+// This function is used to append a character to the calculator display. It's called when user clicks a button.
 function appendCharacter(char) {
     // Create new span element for the character
     const newChar = document.createElement('span');
@@ -53,6 +55,7 @@ function appendCharacter(char) {
     });
 }
 
+// This function moves already input characters to left to make space for a new one.
 function updateCharacterPositions() {
     const totalWidth = displayText.offsetWidth; // Width of the display
     let currentOffset = totalWidth; // Start from the rightmost edge
@@ -72,6 +75,7 @@ function updateCharacterPositions() {
     }
 }
 
+// This function calculates the result based on characters input.
 function calculateResult() {
     const equation = characterSpans.map(span => span.textContent).join('');
     let result;
@@ -81,6 +85,8 @@ function calculateResult() {
         result = 'Error';
     }
 
+    // We should add 'result' to the history here.
+
     characterSpans.forEach(span => {
         span.style.fontSize = '1.5rem';
     });
@@ -123,6 +129,7 @@ function calculateResult() {
     isResultDisplayed = true;
 }
 
+// This function toggles the history menu.
 function toggleHistory() {
     $('body').toggleClass('history-open');
 
@@ -139,18 +146,14 @@ function toggleHistory() {
     }
 }
 
+// This function toggles the settings menu.
 function toggleSettings() {
     $('body').toggleClass('settings-open');
 }
 
 $('#history').on('click', toggleHistory);
 
-function clearDisplay() {
-    // Remove all current characters (spans)
-    characterSpans.forEach(span => span.remove());
-    characterSpans = [];
-}
-
+// Resets everything, the result and display.
 function resetCalculator() {
     currentInput = '';
     characterSpans = [];
@@ -160,6 +163,7 @@ function resetCalculator() {
 
 // popLock (funny name) is true when a cbaracter pop animation is being progress.
 let popLock = false;
+// This function pops the last character input to the calculator.
 function popCharacter() {
     if (popLock) return;
     popLock = true;
@@ -192,6 +196,8 @@ function popCharacter() {
     });
 }
 
+
+// This sets the calculator display value to some string. I'm pretty sure it's not used, but I'll leave it here just in case.
 function updateDisplay(value) {
     // Clear existing spans and reset positions
     displayText.innerHTML = '';

static/assets/js/colors.js

@@ -18,8 +18,12 @@ function applyUIColors() {
     setUIColors(background, text, buttonPrimary, buttonSecondary);
 }
 
+// When the webpage loades
 window.addEventListener('load', () => {
+    // Hide the loader
     $('.loader').hide();
+
+    // Animate the calculator buttons appearing (with staggering applied).
     anime({
         targets: '.calculator button.button',
         opacity: [0, 1],