Karamata Session 2: Calculator

This is a simple programming project, using HTML5 technologies - HTML, CSS, and Javascript.

by Dave Lane

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Session 2: Digital Empowerment at Christchurch South Karamata Intermediate School</title>
    <meta name="author" content="lightweight">
    <meta name="description" content="karamata - This is code accompanying &#39;digital empowerment&#39; sessions with Christchurch South Karamata Intermediate School in 2023.">
    <meta name="keywords" content="git,forge,forgejo">
    <meta name="referrer" content="no-referrer">
  </head>
  <body>
    <div class='app'>
      <h1>Calculator</h1>
      <!-- We need calculator interface -->
      <div class='interface'>
        <div class='first factor element'>
          <label for='first'>1st #</label><br/>
          <input type='text' placeholder='1st factor' id='first' class='factor'/>
        </div>
        <div class='operator element'>       
          <label for='operator'>op</label><br/>
          <select id='operator'>
            <option value='+'>+</option>
            <option value='-'>-</option>
            <option value='*'>*</option>
            <option value='/'>/</option>
          </select>
        </div>
        <div class='second factor element'>
          <label for='second'>2nd #</label><br/>
          <input type='text' placeholder='2nd factor' id='second' class='factor'/>
        </div>
        <div class='equals element'>
          <label>equals</label><br/>
          <span>=</span>
        </div>
        <div class='answer element'>
          <label>answer</label><br/>
          <span id='answer'>unknown</span>
        </div>
      </div>
      <div style='clear: both' />
      <button onclick='doCalculation()'>solve</button>
    </div>
  </body>
</html>

CSS

body {
  background-color: #ccc;
  padding: 1em;
}
.app {
  background-color: #e6f2ff;
  padding: 2em;
  border: 2px solid #b3d9ff;
  border-radius: 8px;
}
.app input[type=text] {
  width: 6em;
}

.element {
  float: left;
  margin-right: 6px;
}

.element label {
  font-size: 80%;
  color: #555;
  padding: 0.5em 0;
}

.equals {
  text-align: center;
}

JavaScript

function calculate(a, b, op) {
  a = Number(a); 
  b = Number(b);
  console.log('a='+a+', b='+b+', op=\''+op+'\'');
  var ans;
  if (op == '+') {
    ans = a + b;
  } else if (op == '-') {
    ans = a - b;
  } else if (op == '*') {
    ans = a * b;
  } else {
    ans = a / b;
  }
  return ans;
}

function doCalculation() {
  const first = document.querySelector('#first').value;
  const second = document.querySelector('#second').value;
  const operator = document.querySelector('#operator').value;
  const answer = document.querySelector('#answer');
  console.log('1st='+first+', 2nd='+second+', op=\''+operator+'\'');

  if (first && second && operator) {
    answer.textContent = calculate(first, second, operator);
  } else {
    alert('something\'s wrong!');
  }
}