Chapter 9 - My-Super-Calculator

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

by Kanatantsin

HTML

<div id="calculator">
    <header>
    <h1>JS Super-Calculator</h1>
    <p>The super-calculator shows the result of using different operators</p>
    </header>
    <div class="input-area">
    <h2>Step 1: Enter the 1st Operand</h2>
        <input type="text" id="operand1" value="1" />
        <select id="operand1-type">
            <option value="number">number</option>
            <option value="string">string</option>
        </select>
    </div>
    
    <div class="input-area">
    <h2>Step 2: Choose an Operator</h2>
        <div class="operator-choices">
        <h3>Arithmetic Operators</h3>

        <input type="radio" name="operator" value="+" checked>+&nbsp;
        <input type="radio" name="operator" value="-">-&nbsp;
        <input type="radio" name="operator" value="*">*&nbsp;
        <input type="radio" name="operator" value="/">/&nbsp;
        <input type="radio" name="operator" value="%">%&nbsp;
     
        <h3>String Operator</h3>
        <input type="radio" name="operator" value="concat">+ (concatenation)&nbsp;
            
        <h3>Comparison Operators</h3>
        <input type="radio" name="operator" value="==">==&nbsp;
        <input type="radio" name="operator" value="===">===&nbsp;
        <input type="radio" name="operator" value="!=">!=&nbsp;
        <input type="radio" name="operator" value="!==">!==&nbsp;
        <input type="radio" name="operator" value=">">&gt;&nbsp;
        <input type="radio" name="operator" value=">=">&gt;=&nbsp;
        <input type="radio" name="operator" value="<">&lt;&nbsp;
        <input type="radio" name="operator" value="<=">&lt;=&nbsp;
        </div>
    </div>
            
    <div class="input-area">
    <h2>Step 3: Enter the 2nd Operand</h2>
    <input type="text" id="operand2" value="1">
    <select id="operand2-type">
        <option value="number">number</option>
        <option value="string">string</option>
    </select>
    </div>
    
    <div class="input-area">
    <h2>Step 4: Click the...

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;
             ...