title: Remove focus from button once clicked
body: <p>Finishing off a simple calculator project.
  As you'll see by the codepen; when I do a calculation, for example do "2+3", then hit the keyboard enter button. It returns the answer but it also enters the 3 again (last input).
  (I think) This is because the focus is still on the last button clicked.</p>
  
  <p>How do I fix this?</p>
  
  <p><a href="http://codepen.io/apswak/pen/RapEqp" rel="nofollow noreferrer">http://codepen.io/apswak/pen/RapEqp</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="calculator"&gt;
    &lt;div id="screen"&gt;
      &lt;div id="calc"&gt;0&lt;/div&gt;
      &lt;div id="result"&gt;0&lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="value"&gt;1&lt;/button&gt;&lt;button class="value"&gt;2&lt;/button&gt;&lt;button class="value"&gt;3&lt;/button&gt;&lt;button class="value"&gt;+&lt;/button&gt;&lt;button class="value"&gt;4&lt;/button&gt;&lt;button class="value"&gt;5&lt;/button&gt;&lt;button class="value"&gt;6&lt;/button&gt;&lt;button class="value"&gt;-&lt;/button&gt;&lt;button class="value"&gt;7&lt;/button&gt;&lt;button class="value"&gt;8&lt;/button&gt;&lt;button class="value"&gt;9&lt;/button&gt;&lt;button class="value"&gt;*&lt;/button&gt;&lt;button class="value"&gt;.&lt;/button&gt;&lt;button class="value"&gt;0&lt;/button&gt;&lt;button class="CE"&gt;   &amp;larr;&lt;/button&gt;&lt;button class="value"&gt;/&lt;/button&gt;&lt;button class="equals"&gt;=&lt;/button&gt;&lt;button class="C"&gt;C&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
  body {
    text-align: center;
    background: -webkit-linear-gradient(to top right, #4d48c0, #56BF6D);
    /* Safari */
    background: -o-linear-gradient(to top right, #4d48c0, #56BF6D);
    /* Opera */
    background: -moz-linear-gradient(to top right, #4d48c0, #56BF6D);
    /* Mozilla */
    background: linear-gradient(to top right, #4d48c0, #56BF6D);
    /* Standard */
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  
  button:focus {outline:0;}
  
  #calculator {
    font-family: "Quicksand", sans-serif;
    margin: 60px auto;
    padding: 0;
    width: 300px;
    background-color: #1D1E22;
  }
  
  #screen {
    height: 150px;
    width: auto;
    background-color: #4269F4;
    color: whitesmoke;
  }
  
  #screen #calc {
    padding-top: 30px;
    font-size: 20px;
  }
  
  #screen #result {
    font-size: 50px;
  }
  
  .value,
  .equals,
  .C,
  .CE {
    margin: 0;
    width: 75px;
    height: 60px;
    font-size: 25px;
    background-color: #1D1E22;
    color: white;
    border: none;
  }
  
  .value:hover,
  .equals:hover,
  .C:hover,
  .CE:hover {
    font-size: 25px;
    background-color: #1a1a1a;
    color: whitesmoke;
    border: none;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function() {
  
    var string = "";
  
    /* Calculator input string */
    $(".value").click(function() {
      string += $(this).text();
      $("#calc").text(string);
    });
  
    /* Clear all */
    $(".C").click(function() {
      string = "";
      $("#calc, #result").text("0");
    });
    /* Clear last entry */
    $(".CE").click(function() {
      string = string.slice(0, string.length - 1);
      $("#calc").text(string);
    });
  
    /* Show result */
    $(".equals").click(function() {
      $("#result").text(eval(string));
    });
  
    /* Enabling keyboard input */
  
    $(document).keydown(function(event) {
  
      /* Numbers */
      if (event.which == 48) {
        string += 0;
        $("#calc").text(string);
      }
      if (event.which == 49) {
        string += 1;
        $("#calc").text(string);
      }
      if (event.which == 50) {
        string += 2;
        $("#calc").text(string);
      }
      if (event.which == 51) {
        string += 3;
        $("#calc").text(string);
      }
      if (event.which == 52) {
        string += 4;
        $("#calc").text(string);
      }
      if (event.which == 53) {
        string += 5;
        $("#calc").text(string);
      }
      if (event.which == 54) {
        string += 6;
        $("#calc").text(string);
      }
      if (event.which == 55) {
        string += 7;
        $("#calc").text(string);
      }
      if (event.which == 56) {
        string += 8;
        $("#calc").text(string);
      }
      if (event.which == 57) {
        string += 9;
        $("#calc").text(string);
      }
      /* Enter / show result */
      if (event.which == 13) {
        $("#result").text(eval(string));
      }
      /* Backspace */
      if (event.which == 8) {
        string = string.slice(0, string.length - 1);
        $("#calc").text(string);
      }
      /* Clear all with escape or del */
      if (event.which == 27) {
        string = "";
        $("#calc, #result").text("0");
      }
  
    });
  
    $(document).keypress(function(event) {
      /* Start of operators */
      if (event.which == 43) {
        string += '+';
        $("#calc").text(string);
      }
      if (event.which == 45) {
        string += "-";
        $("#calc").text(string);
      }
      if (event.which == 42) {
        string += "*";
        $("#calc").text(string);
      }
      if (event.which == 47) {
        string += "/";
        $("#calc").text(string);
      }
      if (event.which == 46) {
        string += ".";
        $("#calc").text(string);
      }
    });
  
  });
  </code></pre>