Add the functionality of the Enter and Backspace keys to the working calculator [closed]

Closed. This question is off-topic. Answers to it are not accepted at the moment.

Want to improve this question? Update the question so that it it fit into the theme of Stack Overflow in Russian.

Closed 5 years ago.

Improve the question

How to add the ability to get the same thing when pressing the Enter key as after the operation with =, as well as add a new action and functionality for the Backspace key (aka DEL on a calculator that doesn't work)? Deleting should work character-by-character, removing the . sign as well. The actual code:

$(function() {
$(document).keypress(function(e){
    var char = String.fromCharCode(e.which);
    console.log(char)
    switch(char)
    {
      case '0':
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6':
      case '7':
      case '8':
      case '9':
      case '.':
      case ',':
        if(char == ',') char = '.';
        digitAction(char);
        break;
      case '-':
      case '+':
      case '=':
      case '/':
      case '*':
      case 'C':
        doAction(char);
        break;
    }
  });
  // Main variables
  var $screen = $('.screen');
  var value = 0;
  var start = true;
  var action = 0;

  // Display '0' on load
  $screen.text('0');

  // Digits
  $('.digit').on('click', function() {
    var mytext = $(this).text();
    digitAction(mytext);
  });
  
  function digitAction(mytext)
  {
    var curtext = (start) ? '0' : $screen.text();
    start = false;
    if (mytext === '.') {
      if (curtext.indexOf('.') < 0) {
        $screen.text(curtext + mytext);
      }
    } else {
      if (curtext === '0') {
        // Overwrite
        $screen.text(mytext);
      } else {
        $screen.text(curtext + mytext);
      }
    }
  }

  // Maths operations
  function Maths_operations() {
    var num = parseFloat($screen.text());
    switch (action) {
      case 0:
        { // Nothing?
          value = num;
        }
        break;
      case 1:
        { // Add
          value += num;
        }
        break;
      case 2:
        { // Subtract
          value -= num;
        }
        break;
      case 3:
        { // Multiply
          value *= num;
        }
        break;
      case 4:
        { // Divide
          if (num == 0) {
            value = 'Error'; // Couldn't divide by zero!
          } else {
            value /= num;
          }
        }
        break;
      case 5:
        { // Backspace
          // Some code here
        }
        break;
      default:
        break; // Shouldn't happen...
    }
    start = true; // New number now...
  }

  // Actions
  $('.action').on('click', function() {
    doAction($(this).text());
  });
  function doAction(op)
  {
    
    switch (op) {
      case 'C':
        {
          value = 0;
          $screen.text('0');
          action = 0;
          start = true;
        }
        break;  
      case 'DEL':
        { // Backspace
          Maths_operations();
          action = 5;
        }
        break;  
      case '\u00F7':
        { // Divide
          Maths_operations();
          action = 4;
        }
        break;
      case '\u00D7':
        { // Multiply
          Maths_operations();
          action = 3;
        }
        break;
      case '-':
        { // Subtract
          Maths_operations();
          action = 2;
        }
        break;
      case '+':
        { // Add
          Maths_operations();
          action = 1;
        }
        break;
      case '=':
        { // Equals
          Maths_operations();
          $screen.text(value);
          action = 0; // Nothing
        }
        break;
      default:
        { // If it's not a button
          console.log($(this).text());
        }
    }
  }

});
/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  /* Global text styling */
  font-family: 'Roboto Mono', Helvetica, Arial, sans-serif;
}

/* Background */
html {
  height: 100%;
  background: rgba(171, 168, 168, 0.82);
  background-size: cover;
}

/* Name */
.pre-top > span {
  display: block;
  
  /* Special text styling */
  font-family: 'Josefin Slab', Monospace, sans-serif;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

.pre-top .version {
  margin-bottom: 10px;
  font-size: 12px;
}

/* Calculator body */
.calculator {
  
  /* Absolute horizontal & vertical centering */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 400px;
  height: auto;
  padding: 20px 20px 9px;
  background: #b8c6cc;
  background: linear-gradient(#979fa2 14.9%, #6a7073 52.31%);
  border-radius: 3px;
  
  /* Using box shadows to create 3D effects */
  box-shadow: 0 4px #5e6264, 0 10px 15px rgba(0, 0, 0, 0.2);
}

/* Top */
.top span.clear {
  float: left;
}

.top .screen {
  height: 40px;
  width: 212px;
  float: right;
  padding: 0 10px;
  margin-bottom: 20px;
  /* Inset shadow on the screen to create some indent */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
  /* Typography */
  font-size: 17px;
  line-height: 40px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-align: right;
  letter-spacing: 1px;
}

/* Clear floats */
.keys,
.top {
  overflow: hidden;
}

/* Applying same to the keys */
.keys span,
.top span.clear,
.top span.backspace {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 36px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.2);
  margin: 0 8px 11px 0;
  color: #000;
  line-height: 36px;
  text-align: center;
 
  /* Smoothing out hover and active states using css3 transitions */
  transition: all 0.2s ease;
  /* Prevent selection of text inside keys in all browsers*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.keys span {
  width: 84px;
}

/* Style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
  background: #f5ac75;
  /* Remove right margins from operator keys */
  margin-right: 0;
  color: #fff;
}

.keys span.eval {
  background: #79de9e;
  color: #fff;
}

.top span.clear,
.top span.backspace {
  background: #e79199;
  color: #fff;
}

/* Some hover effects */
.keys span:hover {
  background: #7d8ae3;
  box-shadow: 0 4px #5963a0;
  color: #fff;
}

.keys span.operator:hover {
  background: #fa9345;
  box-shadow: 0 4px #ce8248;
}

.keys span.eval:hover {
  background: #39f788;
  box-shadow: 0 4px #2fc66e;
  color: #fff;
}

.top span.clear:hover,
.top span.backspace:hover {
  background: #f86670;
  box-shadow: 0 4px #d5656d;
}

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
  top: 4px;
  box-shadow: 0 0 #6b54d3;
}

.keys span.eval:active {
  top: 4px;
  box-shadow: 0 0 #717a33;
}

.top span.clear:active,
.top span.backspace:active {
  top: 4px;
  box-shadow: 0 0 #d3545d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Some Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab|Roboto+Mono:500' rel='stylesheet' type='text/css'>

<!-- Calculator -->
<div class="calculator">

  <!-- Name -->
  <div class="pre-top">
    <span class="name">jQuery calculator</span>
    <span class="version">v1.1</span>
  <div>

  <!-- Clear key & screen-->
  <div class="top">
    <span class="action clear">C</span>
    <span class="action backspace">DEL</span>
    <span class="screen"></span>
  </div>

  <!-- Operators and other keys -->
  <div class="keys">
    <span class="digit">7</span>
    <span class="digit">8</span>
    <span class="digit">9</span>
    <span class="action operator">+</span>
    <span class="digit">4</span>
    <span class="digit">5</span>
    <span class="digit">6</span>
    <span class="action operator">-</span>
    <span class="digit">1</span>
    <span class="digit">2</span>
    <span class="digit">3</span>
    <span class="action operator">&divide;</span>
    <span class="digit">0</span>
    <span class="digit">.</span>
    <span class="action eval">=</span>
    <span class="action operator">&times;</span>
  </div>
    
</div>

Codepen version.

Author: k1r8r0wn, 2015-10-15
Source

1 answers

$(function() {

  $(document).on('keypress, keydown', function(e) {
    var char = String.fromCharCode(e.which);
    var ekc = event.keyCode;
    console.log('char ' + char);
    console.log('ekc ' + ekc);
    switch (char) {
      case '-':
      case '+':
      case '=':
      case '/':
      case '*':
      case 'C':
        doAction(char);
        break;
    }

    switch (ekc) {
      case 48:
      case 96:
        digitAction('0');
        break;
      case 49:
      case 97:
        digitAction('1');
        break;
      case 50:
      case 98:
        digitAction('2');
        break;
      case 51:
      case 99:
        digitAction('3');
        break;
      case 52:
      case 100:
        digitAction('4');
        break;
      case 53:
      case 101:
        digitAction('5');
        break;
      case 54:
      case 102:
        digitAction('6');
        break;
      case 55:
      case 103:
        digitAction('7');
        break;
      case 56:
      case 104:
        digitAction('8');
        break;
      case 57:
      case 105:
        digitAction('9');
        break;
      case 110:
        //point
        digitAction('.');
        break;
      case 188:
        //comma
        digitAction('.');
        break;
      case 107:
        doAction('+');
        break;
      case 109:
      case 189:
        doAction('-');
        break;
      case 111:
        doAction('/');
        break;
      case 106:
        doAction('*');
        break;
      case 13:
        doAction('=');
        break;
      case 8:
        //Backspace
        doAction('DEL');
        break;
      case 46:
        //DELETE
        doAction('DEL');
        break;


    }

  });


  // Main variables
  var $screen = $('.screen');
  var value = 0;
  var start = true;
  var action = 0;

  // Display '0' on load
  $screen.text('0');

  // Digits
  $('.digit').on('click', function() {
    var mytext = $(this).text();
    digitAction(mytext);
  });

  function digitAction(mytext) {
    var curtext = (start) ? '0' : $screen.text();
    start = false;
    if (mytext === '.') {
      if (curtext.indexOf('.') < 0) {
        $screen.text(curtext + mytext);
      }
    } else {
      if (curtext === '0') {
        // Overwrite
        $screen.text(mytext);
      } else {
        $screen.text(curtext + mytext);
      }
    }
  }

  // Maths operations
  function Maths_operations() {
    var num = parseFloat($screen.text());
    var text = $screen.text();
    console.log('num' + num);
    switch (action) {
      case 0:
        { // Nothing?
          value = num;
        }
        break;
      case 1:
        { // Add
          value += num;
        }
        break;
      case 2:
        { // Subtract
          value -= num;
        }
        break;
      case 3:
        { // Multiply
          value *= num;
        }
        break;
      case 4:
        { // Divide
          if (num == 0) {
            value = 'Error'; // Couldn't divide by zero!
          } else {
            value /= num;
          }
        }
        break;
      case 5:
        { // Backspace
          // Some code here
          var text = $screen.text();
          if ((text.length - 1) == 0) {
            $screen.html('0');
          } else {
            $screen.html(text.substring(0, text.length - 1));
          }
        }
        break;
      default:
        break; // Shouldn't happen...
    }
    start = true; // New number now...
  }

  // Actions
  $('.action').on('click', function() {
    doAction($(this).text());
  });

  function doAction(op) {
    console.log(op);
    switch (op) {
      case 'C':
        {
          value = 0;
          $screen.text('0');
          action = 0;
          start = true;
        }
        break;
      case 'DEL':
        { // Backspace
          Maths_operations();
          action = 5;
        }
        break;
      case '\u00F7':
        { // Divide
          Maths_operations();
          action = 4;
        }
        break;
      case '\u00D7':
        { // Multiply
          Maths_operations();
          action = 3;
        }
        break;
      case '-':
        { // Subtract
          Maths_operations();
          action = 2;
        }
        break;
      case '+':
        { // Add
          Maths_operations();
          action = 1;
        }
        break;
      case '=':
        { // Equals
          Maths_operations();
          $screen.text(value);
          action = 0; // Nothing
        }
        break;
      default:
        { // If it's not a button
          console.log($(this).text());
        }
    }
  }

});
/* Basic reset */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Global text styling */
  font-family: 'Roboto Mono', Helvetica, Arial, sans-serif;
}
/* Background */

html {
  height: 100%;
  background: rgba(171, 168, 168, 0.82);
  background-size: cover;
}
/* Name */

.pre-top > span {
  display: block;
  /* Special text styling */
  font-family: 'Josefin Slab', Monospace, sans-serif;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #000;
  text-align: center;
}
.pre-top .version {
  margin-bottom: 10px;
  font-size: 12px;
}
/* Calculator body */

.calculator {
  /* Absolute horizontal & vertical centering */
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 400px;
  height: auto;
  padding: 20px 20px 9px;
  background: #b8c6cc;
  background: linear-gradient(#979fa2 14.9%, #6a7073 52.31%);
  border-radius: 3px;
  /* Using box shadows to create 3D effects */
  box-shadow: 0 4px #5e6264, 0 10px 15px rgba(0, 0, 0, 0.2);
}
/* Top */

.top span.clear {
  float: left;
}
.top .screen {
  height: 40px;
  width: 212px;
  float: right;
  padding: 0 10px;
  margin-bottom: 20px;
  /* Inset shadow on the screen to create some indent */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: inset 0 4px rgba(0, 0, 0, 0.2);
  /* Typography */
  font-size: 17px;
  line-height: 40px;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  text-align: right;
  letter-spacing: 1px;
}
/* Clear floats */

.keys,
.top {
  overflow: hidden;
}
/* Applying same to the keys */

.keys span,
.top span.clear,
.top span.backspace {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 36px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.2);
  margin: 0 8px 11px 0;
  color: #000;
  line-height: 36px;
  text-align: center;
  /* Smoothing out hover and active states using css3 transitions */
  transition: all 0.2s ease;
  /* Prevent selection of text inside keys in all browsers*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.keys span {
  width: 84px;
}
/* Style different type of keys (operators/evaluate/clear) differently */

.keys span.operator {
  background: #f5ac75;
  /* Remove right margins from operator keys */
  margin-right: 0;
  color: #fff;
}
.keys span.eval {
  background: #79de9e;
  color: #fff;
}
.top span.clear,
.top span.backspace {
  background: #e79199;
  color: #fff;
}
/* Some hover effects */

.keys span:hover {
  background: #7d8ae3;
  box-shadow: 0 4px #5963a0;
  color: #fff;
}
.keys span.operator:hover {
  background: #fa9345;
  box-shadow: 0 4px #ce8248;
}
.keys span.eval:hover {
  background: #39f788;
  box-shadow: 0 4px #2fc66e;
  color: #fff;
}
.top span.clear:hover,
.top span.backspace:hover {
  background: #f86670;
  box-shadow: 0 4px #d5656d;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */

.keys span:active {
  top: 4px;
  box-shadow: 0 0 #6b54d3;
}
.keys span.eval:active {
  top: 4px;
  box-shadow: 0 0 #717a33;
}
.top span.clear:active,
.top span.backspace:active {
  top: 4px;
  box-shadow: 0 0 #d3545d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Calculator -->
<div class="calculator">

  <!-- Name -->
  <div class="pre-top">
    <span class="name">jQuery calculator</span>
    <span class="version">v1.1</span>
    <div>

      <!-- Clear key & screen-->
      <div class="top">
        <span class="action clear">C</span>
        <span class="action backspace">DEL</span>
        <span class="screen"></span>
      </div>

      <!-- Operators and other keys -->
      <div class="keys">
        <span class="digit">7</span>
        <span class="digit">8</span>
        <span class="digit">9</span>
        <span class="action operator">+</span>
        <span class="digit">4</span>
        <span class="digit">5</span>
        <span class="digit">6</span>
        <span class="action operator">-</span>
        <span class="digit">1</span>
        <span class="digit">2</span>
        <span class="digit">3</span>
        <span class="action operator">&divide;</span>
        <span class="digit">0</span>
        <span class="digit">.</span>
        <span class="action eval">=</span>
        <span class="action operator">&times;</span>
      </div>

    </div>

JsFiddle

 2
Author: Alex, 2015-10-15 20:53:40