uccser/cs-field-guide

View on GitHub
csfieldguide/static/interactives/awful-calculator/js/awful-calculator.js

Summary

Maintainability
A
3 hrs
Test Coverage
/**
 * Awful Calculator Interactive
 * For use in the CS Field Guide
 * Created by Hayley van Waas, University of Canterbury
 * Modified by Jack Morgan, University of Canterbury
 * Logic from thecodeplayer.com/walkthrough/javascript-css3-calculator
 */

var AwfulCalculator = {};

$(document).ready(function () {
    AwfulCalculator.operators = ['+', '-', '\u00D7', '\u00F7'];
    AwfulCalculator.decimal_added = false;

    $("#calculator-good button").click(function(){
        var button_value = this.innerHTML.trim();
        output_element = document.getElementById("good-calculator-output");
        processInput(button_value, output_element);
    });


    $("#calculator-awful button").click(function(){
        var button_value = this.innerHTML.trim();
        output_element = document.getElementById("awful-calculator-output");
        var delayTime = (Math.random() * (2 - 0.1) + 0.1)*1000;
        setTimeout(function() {
            processInput(button_value, output_element);
        }, delayTime);
    });

});

function processInput(button_value, output_element) {
    var output_value = output_element.innerHTML;

    // Clear
    if (button_value == "C") {
        output_element.innerHTML = ""; // clear display
    }
    // Evaluate
    else if (button_value == "=") {
              var last_char = output_value[output_value.length - 1];
              // Replace all instances of x and รท with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
              output_value = output_value.replace(/\u00D7/g, '*').replace(/\u00F7/g, '/');

            // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
            if(AwfulCalculator.operators.indexOf(last_char) > -1 || last_char == '.') {
        output_value = output_value.slice(0, -1);
      }
            if(output_value) {
        output_element.innerHTML = eval(output_value);
      }
    }
    // Operator
    else if(AwfulCalculator.operators.indexOf(button_value) > -1) {
        // Get the last character from the equation
        var last_char = output_value[output_value.length - 1];

        // Allow minus if the string is empty
        if(output_value == '' && button_value == '-') {
          output_element.innerHTML += button_value;
        }
        else if(AwfulCalculator.operators.indexOf(last_char) > -1 && output_value.length > 1) {
          // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
          output_element.innerHTML = output_value.slice(0, -1) + button_value;
        }
        // Only add operator if input is not empty and there is no operator at the last
        else if(output_value != '' && AwfulCalculator.operators.indexOf(last_char) == -1) {
          output_element.innerHTML += button_value;
        }
        // Replace the last operator (if exists) with the newly pressed operator
        // Reset decimal
        AwfulCalculator.decimal_added = false;
    }
    // Decimal place
    else if (button_value == ".") {
        if(!AwfulCalculator.decimal_added) {
            output_element.innerHTML += button_value;
            AwfulCalculator.decimal_added = true;
        }
    }
    // Number
    else {
      output_element.innerHTML += button_value;
    }
  }