better calculator

by BLOBBY

HTML

<!-- This is the HTML for the calculator -->
<div id="calculator">
<header>
  <h1>ˇ¨‰ˇÒ´Í PEEPO</h1>
  <p>Shows the results of performing different opperations on different data types</p>
</header>


<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>
  </select>
</div>

<div class="input-area">
  <h2>Step 2: Choose your first PEEPO</h2>
  <div class="operator-choices">
    <h3>Arithmetic Operators</h3>
    <input type="radio" name="operator" value="+" checked/>
    <label for = "+">+</label>
    <input type="radio" name="operator" value="-" checked/>
    <label for = "-">-</label>
    <input type="radio" name="operator" value="*" checked/>
    <label for = "*">*</label>
    <input type="radio" name="operator" value="%" checked/>
    <label for = "%">%</label>
    
  </div>
</div>

<div class="input-area">
  <h2>Step 3: Enter the 2nd PEEPO</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: USE THE PEEPO LUKE</h2>
  <input type="button" id="submit" value="NASA PEEPO DEM NUMBAS" />
  </div>


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






</div>

CSS

/* This is the CSS for our calculator */

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

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: lightgray;
  font-size: 20px;
  text-align: center;
}

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

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

#submit:hover {
  background: red;
}

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

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

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

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