Chapter 9 - Super-Calculator

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

by Darren Yap

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Calculator</title>
</head>

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

CSS

body {
    font-family: "JetBrains Mono", "Source Code Pro", Courier, monospace;
    font-size: 1em;
}

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;
    font-family: "JetBrains Mono", "Source Code Pro", Courier, monospace;
}

input[type=submit] {
    width: 200px;
    font-size: 1.5em;
    font-family: "JetBrains Mono", "Source Code Pro", Courier, monospace;
}

#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;
}
select {
    font-family: "JetBrains Mono", "Source Code Pro", Courier, monospace;
}

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;
                case "concat":
    ...