Need to minimize Javascript Code using operator in Calculator-CodePudding

HTML, CSS and Javascript calculator. Need to make separate methods for operators, display digits by calling through HTML button tags BY ONCLICK and to minimize code. In case if there is operator button pressed or presseddigit() function if digit button pressed replacing the livescreen() function. Code section below:

document.addEventListener("keydown", keyboardInputHandler);


function keyboardInputHandler(e) {
  //grabbing the liveScreen
  let res = document.getElementById("result");

  //numbers
  if (e.key === "0") {
    res.value  = "0";
  } else if (e.key === "1") {
    res.value  = "1";
  } else if (e.key === "2") {
    res.value  = "2";
  } else if (e.key === "3") {
    res.value  = "3";
  } else if (e.key === "4") {
    res.value  = "4";
  } else if (e.key === "5") {
    res.value  = "5";
  } else if (e.key === "6") {
    res.value  = "6";
  } else if (e.key === "7") {
    res.value  = "7";
  } else if (e.key === "7") {
    res.value  = "7";
  } else if (e.key === "8") {
    res.value  = "8";
  } else if (e.key === "9") {
    res.value  = "9";
  }

  //operators
  // if (e.key === " ") {
  //     res.value  = " ";
  // } else if (e.key === "-") {
  //     res.value  = "-";
  // } else if (e.key === "*") {
  //     res.value  = "*";
  // } else if (e.key === "/") {
  //     res.value  = "/";
  // }
  if (e.key === " ") {
    res.value  = " ";
  } else if (e.key === "-") {
    res.value  = "-";
  } else if (e.key === "*") {
    res.value  = "*";
  } else if (e.key === "/") {
    res.value  = "/";
  }

  // Handling decimal key
  if (e.key === ".") {
    res.value  = ".";
  }




}


// Show equal Result
function showequalresult() {
  result.value = eval(result.value);
}

// Clears the screen on click of C button.
function clearScreen() {
  document.getElementById("result").value = "";
}
// Displays entered value on screen.
function liveScreen(value) {
  let res = document.getElementById("result");

  res.value  = value;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: black;
}

#container {
  width: 1000px;
  height: 550px;
  background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png);
  margin: 20px auto;
}

#calculator {
  width: 320px;
  height: 520px;
  background-color: #eaedef;
  margin: 0 auto;
  top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#result {
  height: 120px;
  margin-bottom: 20px;
}

#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #919191;
}

#result {
  text-align: right;
  height: 60px;
  width: 290px;
  margin: 10px 20px;
  font-size: 30px;
  background-color: #afbec4;
}

#keyboard {
  height: 400px;
}

.operator,
.number,
.empty {
  width: 67px;
  height: 50px;
  margin: 6px;
  float: left;
  border-width: 0;
  font-weight: bold;
  font-size: 15px;
}

#clear {
  background-color: #cb4e4d;
  border-radius: 45%;
}

.number,
.empty {
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.number,
.operator {
  cursor: pointer;
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.operator:active,
.number:active {
  font-size: 13px;
}

.operator:focus,
.number:focus,
.empty:focus {
  outline: 0;
}

button:nth-child(4) {
  font-size: 9px;
  background-color: #cb4e4d;
  border-radius: 10px;
}

button:nth-child(8) {
  font-size: 20px;
  background-color: #ffa500;
  border-radius: 10px;
}

button:nth-child(12) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(16) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(20) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open Sans:600,700" rel="stylesheet">
  <title>A simple calculator</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="container">
    <div id="calculator">
      <div id="resultss">
        <div id="results">
          <input type="text" name="result"  id="result" value="" placeholder="0" />

        </div>

      </div>

      <div id="keyboard">
        <button  onclick="clearScreen()" id="clear">C</button>
        <button  onclick="liveScreen(' -')" id="backspace"> -</button>
        <button  onclick="liveScreen('%')" id="%">%</button>
        <button  onclick="liveScreen('/')" id="/">Console <br>Log</button>
        <button  onclick="liveScreen(7)" id="7">7</button>
        <button  onclick="liveScreen(8)" id="8">8</button>
        <button  onclick="liveScreen(9)" id="9">9</button>
        <button  onclick="liveScreen('/')" id="/">&divide</button>
        <button  onclick="liveScreen(4)" id="4">4</button>
        <button  onclick="liveScreen(5)" id="5">5</button>
        <button  onclick="liveScreen(6)" id="6">6</button>
        <button  onclick="liveScreen('*')" id="-">&times;</button>
        <button  onclick="liveScreen(1)" id="1">1</button>
        <button  onclick="liveScreen(2)" id="2">2</button>
        <button  onclick="liveScreen(3)" id="3">3</button>
        <button  onclick="liveScreen('-')" id="-">-</button>
        <button  onclick="liveScreen(0)" id="0">0</button>
        <button  onclick="liveScreen('.')" id="0">.</button>
        <button  onclick="showequalresult()" id="=">=</button>
        <button  onclick="liveScreen(' ')" id=" "> </button>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Minimise code

One solution is to use the Array.prototype.includes() function built into JS.

Replace all of your character if checks with the following:

const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ' ', '-', '*', '/', '.']
if (validCharacters.contains(e.key)) {
  res.value  = e.key;
}

Here is a working snippet example:

document.addEventListener("keydown", keyboardInputHandler);


function keyboardInputHandler(e) {
  //grabbing the liveScreen
  let res = document.getElementById("result");

  //numbers
  const validCharacters = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ' ', '-', '*', '/', '.']
  if (validCharacters.contains(e.key)) {
    res.value  = e.key;
  }
}

// Show equal Result
function showequalresult() {
  result.value = eval(result.value);
}

// Clears the screen on click of C button.
function clearScreen() {
  document.getElementById("result").value = "";
}
// Displays entered value on screen.
function liveScreen(value) {
  let res = document.getElementById("result");

  res.value  = value;
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: black;
}

#container {
  width: 1000px;
  height: 550px;
  background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png);
  margin: 20px auto;
}

#calculator {
  width: 320px;
  height: 520px;
  background-color: #eaedef;
  margin: 0 auto;
  top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#result {
  height: 120px;
  margin-bottom: 20px;
}

#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #919191;
}

#result {
  text-align: right;
  height: 60px;
  width: 290px;
  margin: 10px 20px;
  font-size: 30px;
  background-color: #afbec4;
}

#keyboard {
  height: 400px;
}

.operator,
.number,
.empty {
  width: 67px;
  height: 50px;
  margin: 6px;
  float: left;
  border-width: 0;
  font-weight: bold;
  font-size: 15px;
}

#clear {
  background-color: #cb4e4d;
  border-radius: 45%;
}

.number,
.empty {
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.number,
.operator {
  cursor: pointer;
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.operator:active,
.number:active {
  font-size: 13px;
}

.operator:focus,
.number:focus,
.empty:focus {
  outline: 0;
}

button:nth-child(4) {
  font-size: 9px;
  background-color: #cb4e4d;
  border-radius: 10px;
}

button:nth-child(8) {
  font-size: 20px;
  background-color: #ffa500;
  border-radius: 10px;
}

button:nth-child(12) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(16) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(20) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open Sans:600,700" rel="stylesheet">
  <title>A simple calculator</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="container">
    <div id="calculator">
      <div id="resultss">
        <div id="results">
          <input type="text" name="result"  id="result" value="" placeholder="0" />

        </div>

      </div>

      <div id="keyboard">
        <button  onclick="clearScreen()" id="clear">C</button>
        <button  onclick="liveScreen(' -')" id="backspace"> -</button>
        <button  onclick="liveScreen('%')" id="%">%</button>
        <button  onclick="liveScreen('/')" id="/">Console <br>Log</button>
        <button  onclick="liveScreen(7)" id="7">7</button>
        <button  onclick="liveScreen(8)" id="8">8</button>
        <button  onclick="liveScreen(9)" id="9">9</button>
        <button  onclick="liveScreen('/')" id="/">&divide</button>
        <button  onclick="liveScreen(4)" id="4">4</button>
        <button  onclick="liveScreen(5)" id="5">5</button>
        <button  onclick="liveScreen(6)" id="6">6</button>
        <button  onclick="liveScreen('*')" id="-">&times;</button>
        <button  onclick="liveScreen(1)" id="1">1</button>
        <button  onclick="liveScreen(2)" id="2">2</button>
        <button  onclick="liveScreen(3)" id="3">3</button>
        <button  onclick="liveScreen('-')" id="-">-</button>
        <button  onclick="liveScreen(0)" id="0">0</button>
        <button  onclick="liveScreen('.')" id="0">.</button>
        <button  onclick="showequalresult()" id="=">=</button>
        <button  onclick="liveScreen(' ')" id=" "> </button>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

document.addEventListener("keydown", function(e) {
  e.preventDefault();
  return keyboardInput(e.key);
});

const allowedKeys = [
  '0',  '1', '2',  '3',  '4', '5', '6', '7', '8', '9', 
  '.', ' ', '-', '/', '*',
];

const screen = document.getElementById("result");

function keyboardInput(key) {
  if (allowedKeys.includes(key) || allowedKeys.includes(key.toString())) {
    screen.value  = key.toString();
  }
  
  if (key === '=') {
    showequalresult();
  }
  return false;
}


// Show equal Result
function showequalresult() {
  screen.value = eval(screen.value);
}

// Clears the screen on click of C button.
function clearScreen() {
  screen.value = "";
}

// Displays entered value on screen.
function liveScreen(value) {
  keyboardInput(value);
}

body {
  font-family: 'Open Sans', sans-serif;
  background-color: black;
}

#container {
  width: 1000px;
  height: 550px;
  background-image: linear-gradient(#0000004d, rgba(0, 0, 0, 0.3)), url(bgcalc.png);
  margin: 20px auto;
}

#calculator {
  width: 320px;
  height: 520px;
  background-color: #eaedef;
  margin: 0 auto;
  top: 20px;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#result {
  height: 120px;
  margin-bottom: 20px;
}

#history {
  text-align: right;
  height: 20px;
  margin: 0 20px;
  padding-top: 20px;
  font-size: 15px;
  color: #919191;
}

#result {
  text-align: right;
  height: 60px;
  width: 290px;
  margin: 10px 20px;
  font-size: 30px;
  background-color: #afbec4;
}

#keyboard {
  height: 400px;
}

.operator,
.number,
.empty {
  width: 67px;
  height: 50px;
  margin: 6px;
  float: left;
  border-width: 0;
  font-weight: bold;
  font-size: 15px;
}

#clear {
  background-color: #cb4e4d;
  border-radius: 45%;
}

.number,
.empty {
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.number,
.operator {
  cursor: pointer;
  background-color: #5f7d8c;
  border-radius: 10px;
  color: white;
}

.operator:active,
.number:active {
  font-size: 13px;
}

.operator:focus,
.number:focus,
.empty:focus {
  outline: 0;
}

button:nth-child(4) {
  font-size: 9px;
  background-color: #cb4e4d;
  border-radius: 10px;
}

button:nth-child(8) {
  font-size: 20px;
  background-color: #ffa500;
  border-radius: 10px;
}

button:nth-child(12) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(16) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

button:nth-child(20) {
  font-size: 20px;
  background-color: #fda629;
  border-radius: 10px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open Sans:600,700" rel="stylesheet">
  <title>A simple calculator</title>
  <script src="script.js"></script>
</head>

<body>
  <div id="container">
    <div id="calculator">
      <div id="resultss">
        <div id="results">
          <input type="text" name="result"  id="result" value="" placeholder="0" />

        </div>

      </div>

      <div id="keyboard">
        <button  onclick="clearScreen()" id="clear">C</button>
        <button  onclick="liveScreen(' -')" id="backspace"> -</button>
        <button  onclick="liveScreen('%')" id="%">%</button>
        <button  onclick="liveScreen('/')" id="/">Console <br>Log</button>
        <button  onclick="liveScreen(7)" id="7">7</button>
        <button  onclick="liveScreen(8)" id="8">8</button>
        <button  onclick="liveScreen(9)" id="9">9</button>
        <button  onclick="liveScreen('/')" id="/">&divide</button>
        <button  onclick="liveScreen(4)" id="4">4</button>
        <button  onclick="liveScreen(5)" id="5">5</button>
        <button  onclick="liveScreen(6)" id="6">6</button>
        <button  onclick="liveScreen('*')" id="-">&times;</button>
        <button  onclick="liveScreen(1)" id="1">1</button>
        <button  onclick="liveScreen(2)" id="2">2</button>
        <button  onclick="liveScreen(3)" id="3">3</button>
        <button  onclick="liveScreen('-')" id="-">-</button>
        <button  onclick="liveScreen(0)" id="0">0</button>
        <button  onclick="liveScreen('.')" id="0">.</button>
        <button  onclick="showequalresult()" id="=">=</button>
        <button  onclick="liveScreen(' ')" id=" "> </button>
      </div>
    </div>
  </div>
</body>

</html>