epic cal

by ProPlayerMet

HTML

<div id="calculator">
  <header>
  <h1>Dan's EPIC CALCULATOR!</h1>
  <p>shows resalts at 
  bottom.</p>
  </header>
  </div>
  
  <div class="input-area">
  <h2>STEP 1:ENTER THE 1ST ARGUMENT!</h2>
  
  <input type="text" id="argument1" value= 10 />
  <select id="argument1-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>ARITHEMIC OPERATOR</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:ENTER THE 2ST ARGUMENT!</h2>
  
  <input type="text" id="argumant2" value= 5 />
  <select id="argument2-type">
  <option value="number">number</option>
  <option value="text">text</option>
  </select>
  </div>
  
  <div class = "input-area">
   <h2>STEP 4:CLICK THE BUTTON!</h2>
   <input type = "button" id = "submit" value = "CALCULATE" />
  </div>
  <h2>Output</h2>
  <h3>SPECIFIED OPERATION</h3>
  <span id = "spesified-operation">??????</span>
  
    <h3>CALCULATED RESULT</h3>
  <span id = "calculated-result">??????</span>

CSS

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

body {
  font-family Helvetica, Arial, sans-serif;
  background-color: red;
}

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

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

JavaScript

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

function CALCULATE() {

var myOp, result, 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;

//alert (arg1-type);





}