title: How to make a caluculation in a calculator?
body: <p><strong>Hello all,</strong></p>
  <p>I am currently doing a schoolassignment where I need to make a calculator in JavaScript. To many this probably will be very easy, but I recently started with JavaScript.</p>
  <p>I made a calculator in HTML &amp; CSS. I also figured out how to make the numbers and operators in the display of the calculator. But now I'm trying to figure out how to make the calculation right. Because the thing is that I have to put in two screens. One screen for the numbers and one screen for the operators(look in de HTML for more info). When I use one screen I can use the eval() function, but I can't get this to work because I need the data from two div's.</p>
  <p>When I click on a number and after that I click on the operator I'm stuck. Because when I want to put in the second number to make the sum, I have to replace the first number but still need the first number for the sum.</p>
  <p>I hope some of you will understand this. I don't know how to explain it better.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const myInput = document.getElementById('result');
  const myOperator = document.getElementById('operator');
  
  // function numbers
  function addNumber(clickedNumber){
      myInput.value += clickedNumber;
  }
  
  // function operators
  function addOperator(clickedOperator){
      myOperator.value = clickedOperator;
  }
  
  // function cancel
  function cancel(clickedCancel) {
      myInput.value = '';
      myOperator.value = '';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  
  #calculator {
      width: 500px;
      margin: auto;
  }
  
  #keys {
      display: flex;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  
  #numbers {
      display: flex;
      flex-wrap: wrap;
      width: 75%;
      justify-content: center;
  }
  #operators div {
      background: #0797978c;
  }
  
  #operators {
      width: 25%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  button {
      width: 100px;
      margin: 10px;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      cursor: pointer;
      box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.6) inset;
      border: none;
  }
  
  #numbers div{
      padding: 30px 0 0 0;
      background-color: #f1f1f1;
  }
  
  
  button:active {
     
      box-shadow: 1px 1px 4px  rgba(0,0,0,0.6) inset;
  }
  #screen{
      margin: 18px;
      width: calc(100% - 30px);
      box-shadow: 3px 3px 4px  rgba(0,0,0,0.6) inset;
      background-color:rgba(239, 239, 239, 0.3);
      display: flex;
  
  }
  
  #result, #operator {
      width: 100%;
      height: 100px;
      padding: 20px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 42px;
      text-align: right;
      border: none;
  }
  #operator {
      width: 20%;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
  #errorMessage {
      margin: 18px;
      width: calc(100% - 30px);
      height: 30px;
      background-color:rgba(165, 165, 165, 0.3);
      color: black;
      display: flex;
      border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7]&gt;      &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7]&gt;         &lt;html class="no-js lt-ie9 lt-ie8"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;         &lt;html class="no-js lt-ie9"&gt; &lt;![endif]--&gt;
  &lt;!--[if gt IE 8]&gt;      &lt;html class="no-js"&gt; &lt;!--&lt;![endif]--&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;title&gt;Oefenbestand&lt;/title&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--[if lt IE 7]&gt;
              &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="#"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
          &lt;![endif]--&gt;
          &lt;div id="calculator"&gt;
              &lt;div id="screen"&gt;
              &lt;input type="text" id="result" placeholder ="0" value=""  disabled&gt;
              &lt;input type="text" id="operator" disabled&gt;
              &lt;/div&gt;
              &lt;div id="keys"&gt;
                  &lt;div id="numbers"&gt;
                      &lt;button onclick="addNumber('7')"&gt;7&lt;/button&gt;
                      &lt;button onclick="addNumber('8')"&gt;8&lt;/button&gt;
                      &lt;button onclick="addNumber('9')"&gt;9&lt;/button&gt;
                      &lt;button onclick="addNumber('4')"&gt;4&lt;/button&gt;
                      &lt;button onclick="addNumber('5')"&gt;5&lt;/button&gt;
                      &lt;button onclick="addNumber('6')"&gt;6&lt;/button&gt;
                      &lt;button onclick="addNumber('1')"&gt;1&lt;/button&gt;
                      &lt;button onclick="addNumber('2')"&gt;2&lt;/button&gt;
                      &lt;button onclick="addNumber('3')"&gt;3&lt;/button&gt;
                      &lt;button onclick="addNumber('.')"&gt;.&lt;/button&gt;
                      &lt;button onclick="addNumber('0')"&gt;0&lt;/button&gt;
                      &lt;button onclick="equals()"&gt;=&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="operators"&gt;
                      &lt;button onclick="cancel()"&gt;C&lt;/button&gt;
                      &lt;button onclick="addOperator('+')"&gt;+&lt;/button&gt;
                      &lt;button onclick="addOperator('-')"&gt;-&lt;/button&gt;
                      &lt;button onclick="addOperator('*')"&gt;X&lt;/button&gt;
                      &lt;button onclick="addOperator('/')"&gt;/&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="key"&gt;&lt;/div&gt;
  
  
  &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>