Calculator

calculator.markdown

Calculator

A Pen by MelulekiDube on CodePen.

License.

index.html

<div class='calc'>
  <section class="display">
    0
  </section>
  <div class='buttons'>
    <div class='button_row'>
      <button class='general double'>C</button>
      <button class='general'>&larr;</button>
      <button class='general control'>&divide;</button>
    </div>
    <div class='button_row'>
      <button class='general'>7</button>
      <button class='general'>8</button>
      <button class='general'>9</button>
      <button class='general control'>x</button>
    </div>
    <div class='button_row'>
      <button class='general'>6</button>
      <button class='general'>5</button>
      <button class='general'>4</button>
      <button class='general control'>-</button>
    </div>
    <div class='button_row'>
      <button class='general'>3</button>
      <button class='general'>2</button>
      <button class='general'>1</button>
      <button class='general control'>+</button>
    </div>
    <div class='button_row'>
      <button class='general tripple'>0</button>
      <button class='general control'>=</button>
    </div>
  </div>
</div>

script.js

let total= 0;
let buffer = 0;
let previous_operator;
const delete_char = '\u2190';
const display = document.querySelector(".display");

let reset = true;

let display_text = display.innerText;


function reset_all(){
    display_text = "0";
    previous_operation = 'NaN';
    total = 0;
    buffer = 0;
    reset = true;
}

function general_click_handler(value){
  if(isNaN(parseInt(value))){
    // we are dealing with a symbol
    handle_symbol(value);
  }
  else{
    if(reset){
      display_text = value
      reset = false;
    }
    else{
      display_text = display_text.concat(value);
    }
  }
  display.innerText = display_text;
}

function handle_symbol(value){
  let v = 0;
  switch(value){
    case delete_char:
      if(display_text.length === 1){
        display_text = "0"; 
      }
      else {
        display_text = display_text.substring(0, display_text.length-1);
      }
      break;
    case "C":
      reset_all();
      break;
    case "=":
      v = (display_text.length==0)?0:parseInt(display_text);
      total = apply_operation(buffer, v);
      buffer = 0;
      console.log("total="+total);
      display_text = ""+(total);
      previous_operator = null;
      break;
    case "+":
    case "-":
    case "x":
    case "÷":
      v = (display_text.length==0)?0:parseInt(display_text);
      buffer = apply_operation(buffer, v);
      reset =  true;
      display_text = ""+buffer;
      previous_operator = value;
      break;
  }
}

function apply_operation(value1, value2){
  console.log(value1+" "+previous_operator+" "+value2);
  switch(previous_operator){
      case '+':
        return value1+value2;
    case '-':
      console.log(value1-value2);
      return value1-value2;
    case 'x':
      return value1*value2;
    case "÷":
      return value1/value2;
    case undefined:
    case null:
      return value2;
  }
}

function init() {
  document.querySelector(".buttons").addEventListener("click", function(event) {
    general_click_handler(event.target.innerText);
  });
}

init();

style.css

.calc {
  width: 400px;
  background-color: black;
  color: white;
}

.buttons{
  display: grid;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 14px;
}

.display{
  display: block;
  text-align: right;
  color: white;
  padding: 20px 5px;
  font-family: "Courier New", Courier, monospace;
}

.general{
  background-color: #D8D9DB;
  height: 100px;
  width: 24.5%;
  border: none;
  border-radius: 0;
  font-size: 40px;
  cursor: pointer;
}

.general:hover {
  background-color: #ebebeb;
}

.general:active{
   background-color: #bbbcbe;
}
.button_row{
  display: flex;
  align-content: stretch;
  justify-content: space-between;
  margin-bottom: 0.5%;
}

.double{
   width: 49.7%;
}

.control{
  background-color: #DF974C;
  color: white;
}

.tripple{
  width: 74.8%;
}