calc example

HTML

<html>

  <body>
  <div id="form">
  <form name='calculator_output' method='post' class='calculator_output'>
  <input type='text' id='text' name="enter" />
  <input type='Submit' value='submit' />
  <input type="button" class="reset" onclick="reset()" value="reset">
  </form>
  </div>
  <div id="one">
  <button class="one" value="1">
    1
  </button>
  </div>
  
  <div id="two">
  <button class="two" value="2">
    2
  </button>
  </div>
  
  <div id="three">
  <button class="three" value="3">
    3
  </button>
  </div>
  
  <div id="four">
  <button class="four" value="4">
    4
  </button>
  </div>
  
  <div id="five">
  <button class="five" value="5">
    5
  </button>
  </div>
  
  <div id="six">
  <button class="six" value="6">
    6
  </button>
  </div>
  
  <div id="seven">
  <button class="seven" value="7">
    7
  </button>
  </div>
  
  <div id="eight">
  <button class="eight" value="8">
    8
  </button>
  </div>
  
  <div id="nine">
 <button class="nine" value="9">
    9
  </button>
  </div>
  
  <div id="zero">
 <button class="zero" value="0">
    0
  </button>
  </div>
  
  <div id="plus">
 <button class="plus" value="+">
    +
  </button>
  </div>

<div id="minus">
 <button class="minus" value="-">
    -
  </button>
  </div>

<div id="times">
 <button class="times" value="*">
    ×
  </button>
  </div>
  
  <div id="devide">
 <button class="devide" value="/">
    ÷
  </button>
  </div>
  
   <div id="thanks">
 <button class="thanks">
    😃
  </button>
  </div>
  <html>

CSS

html {
  height: 100%
  
}
body {
  background-color: #123456;
  height: 100%;
}

#one {
 position:relative;
    top: 5px;
    left: 5px;

}

#two {
    position:relative;
    top: -17px;
    left: 35px;
     }
    
#three {
    position:relative;
    top: -38px;
    left: 65px;
   }
   
   #four {
    position:relative;
    top: -32px;
    left: 5px;
   }
   
   #five {
    position:relative;
    top: -53px;
    left: 35px;
   }
   
   #six {
    position:relative;
    top: -74px;
    left: 65px;
   }
   
   #seven {
    position:relative;
    top: -68px;
    left: 5px;
   }
   
   #eight {
    position:relative;
    top: -89px;
    left: 35px;
   }
   
   #nine {
    position:relative;
    top: -111px;
    left: 65px;
   }
   
   
    #plus {
    position:relative;
    top: -154px;
    left: 96px;
   }
   
    #minus {
    position:relative;
    top: -145px;
    left: 99px;
   }
   
     #times {
    position:relative;
    top: -252px;
    left: 97px;
   }
   
    #devide {
    position:relative;
    top: -246px;
    left: 97px;
   }
   #zero {
     position:relative;
    top: -103px;
    left: 35px;
   }
   
    #thanks {
     position:relative;
    top: -295px;
    left: 130px;
   }

JavaScript

$('.calculator_output').submit(function(e) {
  
	//Stops stuff from working the way it's supposed to so javascript magic can happen
  e.preventDefault();
  
  var calcBox = $(this).serializeArray();

  var calcstring = calcBox[0].value;
  var firstdigit = calcstring.charAt(0);
 
  var symbol = calcstring.charAt(1);
    
    var thirddigit = calcstring.charAt(2);
    
   if(symbol=="+"){
   document.getElementById("text").value=
   Number(firstdigit)+Number(thirddigit);
   }
   
    if(symbol=="-"){
   document.getElementById("text").value=
   Number(firstdigit)-Number(thirddigit);
   }
   
    if(symbol=="×"){
   document.getElementById("text").value=
   Number(firstdigit)*Number(thirddigit);
   }
   
    if(symbol=="÷"){
   document.getElementById("text").value=
   Number(firstdigit)/Number(thirddigit);
   }
   
});
function myFunction() {
    document.getElementById("reset").reset();
}

$(".one").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '1';
});

$(".two").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '2';
});

$(".three").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '3';
});

$(".four").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '4';
});

$(".five").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '5';
});

$(".six").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '6';
});

$(".seven").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '7';
});

$(".eight").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value + '8';
});

$(".nine").click(function() {
  
  document.getElementById("text").value=document.getElementById("text").value...