Chapter 2 - Super-Calculator

The project from Chapter 2 of Writing Computer Code by Chris Minnick and Eva Holland

HTML

<!doctype HTML>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="calculator">
    <header>
    <h1> Super-Calculator</h1>
    <p3>Made by Cloud System</p3>
    <p3>With helping Mr.Dadkhah</p3>
    <p><b><a href="https://samiisch.com" target="_blank">Prof.Samii High School Website.</a></b></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="text">text</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>Text Operator</h3>
        <input type="radio" name="operator" value="concat">+ (combine)&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"...

CSS

body {
    font-family: sans-serif;
    font-size: .85em;
}
header {
    text-align: center;
}
h2 {
    text-align: center;
    font-size: 1.2em;
    border-top: 2px dashed White;
    border-bottom: 2px dashed white;
}
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: 8px solid gray
  ;
    border-radius: 4px;
    padding: 4px;
}
.input-area {
    background-color: rgb(255, 173, 51);
    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;
}
h4 {
  border-left: 6px solid gray;
  font-size: 25px;
  text-align: center;
 }
#grad1 {
  height: 140px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, rgb(255, 173, 51), orange); /* Standard syntax (must be last) */
} 
p {
  font-size: 25px;
  color: white;
  text-align: center;
}
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
h2 {
  text-align: center;
  font-size: 2px;
}

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