added the keypress functionality

i added the keypress funcitonality which allows the control through user keyboard

Author: rituraj12797

Calculator/sushil-2803/use.js

@@ -8,57 +8,109 @@ var input = document.getElementById('input'), // input/output button
   resultDisplayed = false; // flag to keep an eye on what output is displayed
 
 // adding click handlers to number buttons
-for (var i = 0; i < number.length; i++) {
-  number[i].addEventListener("click", function(e) {
 
-    // storing current input string and its last character in variables - used later
-    var currentString = input.innerHTML;
-    var lastChar = currentString[currentString.length - 1];
-
-    // if result is not diplayed, just keep adding
-    if (resultDisplayed === false) {
-      input.innerHTML += e.target.innerHTML;
-    } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
-      // if result is currently displayed and user pressed an operator
-      // we need to keep on adding to the string for next operation
-      resultDisplayed = false;
-      input.innerHTML += e.target.innerHTML;
-    } else {
-      // if result is currently displayed and user pressed a number
-      // we need clear the input string and add the new input to start the new opration
-      resultDisplayed = false;
-      input.innerHTML = "";
-      input.innerHTML += e.target.innerHTML;
-    }
-
-  });
+function number_handler(event) {
+  // storing current input string and its last character in variables - used later
+  var currentString = input.innerHTML;
+  var lastChar = currentString[currentString.length - 1];
+
+  // if result is not diplayed, just keep adding
+  if (resultDisplayed === false) {
+    input.innerHTML += event.target.innerHTML;
+  } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
+    // if result is currently displayed and user pressed an operator
+    // we need to keep on adding to the string for next operation
+    resultDisplayed = false;
+    input.innerHTML += event.target.innerHTML;
+  } else {
+    // if result is currently displayed and user pressed a number
+    // we need clear the input string and add the new input to start the new opration
+    resultDisplayed = false;
+    input.innerHTML = "";
+    input.innerHTML += event.target.innerHTML;
+  }
+
+}
+for (var i = 0; i < number.length; i++) {
+  number[i].addEventListener("click",number_handler );
 }
 
 // adding click handlers to number buttons
+function operator_handler(event) {
+  // storing current input string and its last character in variables - used later
+  var currentString = input.innerHTML;
+  var lastChar = currentString[currentString.length - 1];
+
+  // if last character entered is an operator, replace it with the currently pressed one
+  if (lastChar === "+" || lastChar === "-" || lastChar === "x" || lastChar === "÷") {
+    var newString = currentString.substring(0, currentString.length - 1) + event.target.innerHTML;
+    input.innerHTML = newString;
+  } else if (currentString.length == 0) {
+    // if first key pressed is an opearator, don't do anything
+    console.log("enter a number first");
+  } else {
+    // else just add the operator pressed to the input
+    input.innerHTML += event.target.innerHTML;
+  }
+
+}
 for (var i = 0; i < operator.length; i++) {
-  operator[i].addEventListener("click", function(e) {
+  operator[i].addEventListener("click",operator_handler );
+}
 
+// adding a window eventListener to add keypress events to window
+function windows_handler(event){
+  if (parseInt(event.key)<=9 || parseInt(event.key)>=0) {
     // storing current input string and its last character in variables - used later
-    var currentString = input.innerHTML;
-    var lastChar = currentString[currentString.length - 1];
-
-    // if last character entered is an operator, replace it with the currently pressed one
-    if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
-      var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML;
-      input.innerHTML = newString;
-    } else if (currentString.length == 0) {
-      // if first key pressed is an opearator, don't do anything
-      console.log("enter a number first");
-    } else {
-      // else just add the operator pressed to the input
-      input.innerHTML += e.target.innerHTML;
-    }
-
-  });
+  var currentString = input.innerHTML;
+  var lastChar = currentString[currentString.length - 1];
+
+  // if result is not diplayed, just keep adding
+  if (resultDisplayed === false) {
+    input.innerHTML += parseInt(event.key);
+  } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") {
+    // if result is currently displayed and user pressed an operator
+    // we need to keep on adding to the string for next operation
+    resultDisplayed = false;
+    input.innerHTML += parseInt(event.key);
+  } else {
+    // if result is currently displayed and user pressed a number
+    // we need clear the input string and add the new input to start the new opration
+    resultDisplayed = false;
+    input.innerHTML = "";
+    input.innerHTML += parseInt(event.key);
+  }
+  }
+  else if(event.key === "+" || event.key === "-" || event.key === "x" || event.key === "÷" || event.key === "/"  ||  event.key === "*" ){
+     // storing current input string and its last character in variables - used later
+  var currentString = input.innerHTML;
+  var lastChar = currentString[currentString.length - 1];
+  var s=event.key;
+  if(s=="/"){      // deckared a variable s to accomodte / as ÷
+    s="÷"
+  }
+  if(s=="*"){    // to accomodate * as ×
+    s=document.querySelector('.multiply_sign').textContent;        // to apply sign x when * is pressed
+  }
+  // if last character entered is an operator, replace it with the currently pressed one
+  if (lastChar === "+" || lastChar === "-" || lastChar === "x" || lastChar === "÷") {
+    var newString = currentString.substring(0, currentString.length - 1) + s;
+    input.innerHTML = newString;
+  } else if (currentString.length == 0) {
+    // if first key pressed is an opearator, don't do anything
+    console.log("enter a number first");
+  } else {
+    // else just add the operator pressed to the input
+    input.innerHTML +=  s;
+  }
+  }
 }
+window.addEventListener("keypress",windows_handler);
+
 
 // on click of 'equal' button
-result.addEventListener("click", function() {
+
+function output(){
 
   // this is the string that we will be processing eg. -10+26+33-56*34/23
   var inputString = input.innerHTML;
@@ -112,9 +164,22 @@ result.addEventListener("click", function() {
   input.innerHTML = numbers[0]; // displaying the output
 
   resultDisplayed = true; // turning flag if result is displayed
-});
+}
+result.addEventListener("click",output );
+
 
 // clearing the input on press of clear
 clear.addEventListener("click", function() {
   input.innerHTML = "";
-})
+})
+
+//adding a event for clearing with the help of backspace 
+window.onkeydown = function(event){
+  let key = event.key;
+  if (key === "Backspace") {
+    input.innerHTML = "";
+  }
+  else if(key==="Enter"){
+    output()
+  }
+}