the optimized javascript code with added comments

script.js

@@ -1,78 +1,94 @@
-function getHistory(){
-	return document.getElementById("history-value").innerText;
-}
-function printHistory(num){
-	document.getElementById("history-value").innerText=num;
-}
-function getOutput(){
-	return document.getElementById("output-value").innerText;
-}
-function printOutput(num){
-	if(num==""){
-		document.getElementById("output-value").innerText=num;
+//the optimized code with added comments
+// Helper function to get DOM element by ID
+function getElement(id) {
+	return document.getElementById(id);
+  }
+
+  // Get the history value from the DOM
+  function getHistory() {
+	return getElement("history-value").innerText;
+  }
+
+  // Print the history value to the DOM
+  function printHistory(num) {
+	getElement("history-value").innerText = num;
+  }
+
+  // Get the output value from the DOM
+  function getOutput() {
+	return getElement("output-value").innerText;
+  }
+
+  // Print the output value to the DOM
+  function printOutput(num) {
+	if (num === "") {
+	  getElement("output-value").innerText = num;
+	} else {
+	  getElement("output-value").innerText = getFormattedNumber(num);
 	}
-	else{
-		document.getElementById("output-value").innerText=getFormattedNumber(num);
-	}	
-}
-function getFormattedNumber(num){
-	if(num=="-"){
-		return "";
+  }
+
+  // Format the number with commas for better readability
+  function getFormattedNumber(num) {
+	if (num === "-") {
+	  return "";
 	}
-	var n = Number(num);
-	var value = n.toLocaleString("en");
-	return value;
-}
-function reverseNumberFormat(num){
-	return Number(num.replace(/,/g,''));
-}
-var operator = document.getElementsByClassName("operator");
-for(var i =0;i<operator.length;i++){
-	operator[i].addEventListener('click',function(){
-		if(this.id=="clear"){
+	return Number(num).toLocaleString("en");
+  }
+
+  // Remove commas from the number to perform calculations
+  function reverseNumberFormat(num) {
+	return Number(num.replace(/,/g, ""));
+  }
+
+  // Operator button event listener
+  var operatorButtons = document.getElementsByClassName("operator");
+  for (var i = 0; i < operatorButtons.length; i++) {
+	operatorButtons[i].addEventListener("click", function () {
+	  var output = getOutput();
+	  var history = getHistory();
+
+	  if (this.id === "clear") {
+		// Clear the history and output
+		printHistory("");
+		printOutput("");
+	  } else if (this.id === "backspace") {
+		// Remove the last character from the output
+		output = reverseNumberFormat(output).toString();
+		output = output.substr(0, output.length - 1);
+		printOutput(output);
+	  } else {
+		// Perform calculations
+		if (output !== "" || history !== "") {
+		  output = output === "" ? output : reverseNumberFormat(output);
+		  history += output;
+
+		  if (this.id === "=") {
+			// Evaluate the history expression and display the result
+			var result = eval(history);
+			printOutput(result);
 			printHistory("");
+		  } else {
+			// Append the operator to the history
+			history += this.id;
+			printHistory(history);
 			printOutput("");
+		  }
 		}
-		else if(this.id=="backspace"){
-			var output=reverseNumberFormat(getOutput()).toString();
-			if(output){//if output has a value
-				output= output.substr(0,output.length-1);
-				printOutput(output);
-			}
-		}
-		else{
-			var output=getOutput();
-			var history=getHistory();
-			if(output==""&&history!=""){
-				if(isNaN(history[history.length-1])){
-					history= history.substr(0,history.length-1);
-				}
-			}
-			if(output!="" || history!=""){
-				output= output==""?output:reverseNumberFormat(output);
-				history=history+output;
-				if(this.id=="="){
-					var result=eval(history);
-					printOutput(result);
-					printHistory("");
-				}
-				else{
-					history=history+this.id;
-					printHistory(history);
-					printOutput("");
-				}
-			}
-		}
-
+	  }
 	});
-}
-var number = document.getElementsByClassName("number");
-for(var i =0;i<number.length;i++){
-	number[i].addEventListener('click',function(){
-		var output=reverseNumberFormat(getOutput());
-		if(output!=NaN){ //if output is a number
-			output=output+this.id;
-			printOutput(output);
-		}
+  }
+
+  // Number button event listener
+  var numberButtons = document.getElementsByClassName("number");
+  for (var i = 0; i < numberButtons.length; i++) {
+	numberButtons[i].addEventListener("click", function () {
+	  var output = reverseNumberFormat(getOutput());
+	  if (!isNaN(output)) {
+		// Append the number to the output
+		output += this.id;
+		printOutput(output);
+	  }
 	});
-}
+  }
+

style.css

@@ -26,8 +26,8 @@ body{
 	height: 20px;
 	margin: 0 20px;
 	padding-top: 20px;
-	font-size: 15px;
-	color: #919191;
+	font-size: 25px;
+	color: #2b2929;
 }
 #output{
 	text-align: right;