Chapter 9 - Super-Calculator

The project from Chapter 9 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by rosakaufman

HTML

<div id="calculator">
    <header>when the button is clicked
document.getElementById("submit").addEventListener("click",calculateIt);

function calculateIt() {

    //create some variables
    var myOperator;
    var returnValue;
    
    //get the operands
    var operand1 = document.getElementById("operand1").value;
    var operand2 = document.getElementById("operand2").value;

    //get the operand types
    var select1 = document.getElementById("operand1-type");
    var select2 = document.getElementById("operand2-type");
  
    var operand1type = select1.value;
    var operand2type = select2.value;
    
    //get the operator
    var radios = document.getElementsByName('operator');
    
    //convert the operands
    switch (operand1type) {
        case "string":
            operand1 = String(operand1);
            break;
        case "number":
            operand1 = Number(operand1);
            break;
    }
    
    switch (operand2type) {
        case "string":
            operand2 = String(operand2);
            break;
        case "number":
            operand2 = Number(operand2);
            break;
    }
    //loop through each possible operand value and find the checked one
    for (var i = 0, length = radios.length; i < length; i++) {
 
        if (radios[i].checked) {
            myOperator = radios[i].value;
            
            //do a different operation depending on which operator was selected
            switch (radios[i].value) {
                case "+":
                    returnValue = operand1 + operand2;
                    break;
                case "-":
                    returnValue = operand1 - operand2;
                    break;
                case "*":
                    returnValue = operand1 * operand2;
                    break;
                case "/":
                    returnValue = operand1 * operand2;
                    break;
                case "%":
                    returnValue = operand1 % operand2;
        ...

CSS

body {
    font-family: "Courier New", Courier, monospace;
    font-size: .85em;
}
header {
    text-align: center;
}
h2 {
    text-align: center;
    font-size: 1.2em;
    border-top: 2px dashed yellow;
    border-bottom: 2px dashed yellow;
}
input[type=text] {
    width: 40px;
    height: 40px;
    margin-left: 20px;
    background-color: #DADADA;
    font-size: 1.2em;
}
input[type=submit] {
    width: 200px;
    font-size: 2em;
}
#calculator {
    border: 1px solid #dadada;
    border-radius: 4px;
    padding: 4px;
}
.input-area {
    background-color: #42FF8C;
    padding: 8px;
    margin: 8px;
    text-align: center;
    border-radius: 8px;
}
.operator-choices {
    text-align: left;
}
.output-area {
    background-color: #333333;
    color: #FFFFFF;
    padding: 8px;
    margin: 8px;
    font-size: 1.5em;
}

JavaScript

when the button is clicked
document.getElementById("submit").addEventListener("click",calculateIt);

function calculateIt() {

    //create some variables
    var myOperator;
    var returnValue;
    
    //get the operands
    var operand1 = document.getElementById("operand1").value;
    var operand2 = document.getElementById("operand2").value;

    //get the operand types
    var select1 = document.getElementById("operand1-type");
    var select2 = document.getElementById("operand2-type");
  
    var operand1type = select1.value;
    var operand2type = select2.value;
    
    //get the operator
    var radios = document.getElementsByName('operator');
    
    //convert the operands
    switch (operand1type) {
        case "string":
            operand1 = String(operand1);
            break;
        case "number":
            operand1 = Number(operand1);
            break;
    }
    
    switch (operand2type) {
        case "string":
            operand2 = String(operand2);
            break;
        case "number":
            operand2 = Number(operand2);
            break;
    }
    //loop through each possible operand value and find the checked one
    for (var i = 0, length = radios.length; i < length; i++) {
 
        if (radios[i].checked) {
            myOperator = radios[i].value;
            
            //do a different operation depending on which operator was selected
            switch (radios[i].value) {
                case "+":
                    returnValue = operand1 + operand2;
                    break;
                case "-":
                    returnValue = operand1 - operand2;
                    break;
                case "*":
                    returnValue = operand1 * operand2;
                    break;
                case "/":
                    returnValue = operand1 * operand2;
                    break;
                case "%":
                    returnValue = operand1 % operand2;
                    break;
               ...