better calculator

by BLOBBY

HTML

<!-- This is the HTML for the calculator -->
<div id="calculator">
<header>
  <h1>Donald Shrump's dank calculator</h1>
  <p>The dankst combo of da greatest wall and da greatest swamp</p>
</header>
  <div class="input-area">
  <h2>Step 1: ENTER DA NUMBER OF DANK MEMES U CAN HANDLE M8</h2>
  <input type="text" id="argument1" value="10" />
  <select id="argument1-type">
    <option value="number">number</option>
  </select>
</div>

<div class="input-area">
  <h2>Step 2: Choose your MTDew M8</h2>
  <div class = "operator-choices">
    <h3>choose til dat PEEPO is just right</h3>
    <input type="radio" name="operator" value="+" checked/>
    <label for = "+">+</label>
    <input type="radio" name="operator" value="-" />
    <label for = "-">-</label>
    <input type="radio" name="operator" value="*" />
    <label for = "*">*</label>
    <input type="radio" name="operator" value="%" />
    <label for = "%">%</label>
    <input type="radio" name="operator" value="/" />
    <label for = "/">/</label>
  </div>
</div>

<div class="input-area">
  <h2>Step 3: choose your second DEW M8</h2>
  <input type="text" id="argument2" value="10" />
  <select id="argument2-type">
    <option value="number">number</option>
  </select>
</div>

<div class="input-area">
  <h2>step 4:press dat button u PeBBLE m8</h2>
  <input type="button" id="submit" value="Dorito da # M8"/>
  </div>


<div class="output-area">
  <h2>DA SHRUMP WILL GIVE</h2>
    <h3>Specified Operation:</h3>
    <span id="specified-operation">???</span>
    
    <h3>Calculated Result:</h3>
    <span id="calculated-result">???</span>
 

</div>
</div>

CSS

/* This is the CSS for our calculator */

header {
  text-align: center;
  background-color: pink;
}

body {
  front-family: Hellvetica, Arial, sans-serif;
}

h2 {
  text-align: center;
  border-top: 2px dashed orange;
  border-bottom: 2px dashed orange;
}

input {
  width: 300px;
  height: 40px;
  margin-left: 20px;
  background-color: red;
  font-size: 20px;
  text-align: center;
}

input[type=text] {
  width: 300px;
  height: 40px;
  margin-left: 20px;
  background-color: orange;
  font-size: 20px;
  text-align: center;
}

#submit {
  width: 200px;
  font-size: 16pt;
}

#submit:hover {
  background: pink;
}

#calculator{
  border: 1px solid yellow;
  border-radius: 4px;
  padding: 4px;
}

.input-area {
  background-color:blue;
  padding: 8px;
  margin: 8px;
  text-align: center;
  border-radius: 8px;
}

.operator-choices {
  text-align: left;
}

.output-area {
  background-color: orange;
  color: white;
  padding: 8px;
  margin: 8px;
  font-size: 18pt;
}

JavaScript

//peepo is always there

document.getElementById("submit").addEventListener("click", Calculate);

function Calculate() {
 
    var myOperator, returnValue, arg1, arg2, select1, select2, arg1Type, arg2Type, radios;

    arg1 = document.getElementById("argument1").value;
    arg2 = document.getElementById("argument2").value;
    //alert(arg1);
    
   select1 = document.getElementById("argument1-type");
   select2 = document.getElementById("argument2-type");

   arg1Type = select1.value;
   arg2Type = select2.value;
   radios = document.getElementsByName('operator');
   //alert(radios); 

   if (arg1Type === "number") {
       arg1 = Number(arg1);
   }
   if (arg2Type === "number") {
       arg2 = Number(arg2);
   }
   
   for (var i = 0; i < radios.length; i++){
        if(radios[i].checked) {
            myOperator = radios[i].value;
            //alert(myOperator);

    if (myOperator === "+"){
        returnValue = arg1 + arg2;
    }
    if (myOperator === "-"){
        returnValue = arg1 - arg2;
    }
    if (myOperator === "*"){
        returnValue = arg1 * arg2;
    }
    if (myOperator === "/"){
        returnValue = arg1 / arg2;
    }
    if (myOperator === "%"){
        returnValue = arg1 % arg2;
    }
  }
  }
document.getElementById("specified-operation").innerHTML = arg1 + " " + myOperator + " " + arg2;
document.getElementById("calculated-result").innerHTML = returnValue;
}