<!DOCTYPE html>
<html>
<h1>NOSSO APLICATIVO CALCULADORA!</h1>
<head>
<h3>NOSSO PRIMEIRO APP</h3>
<style>
h1 {
  color: red;
  text-align: center;
}
h3 {
  color: blue;
  text-align: center;
}
</style>
<script>
	function soma(){
	    var x = document.getElementById("x").value;// com .value vc pega o valor do ide 
		var y = document.getElementById("y").value;
		var r = parseInt(x) + parseInt(y);/// parseInt converte pra inteiro
		document.getElementById("r").value = r;
	}
	function sub(){
		var x = document.getElementById("x").value;// com .value vc pega o valor do ide 
		var y = document.getElementById("y").value;
		var r = parseInt(x) - parseInt(y);
		document.getElementById("r").value = r;
	}
	function mult(){
		var x = document.getElementById("x").value;
		var y = document.getElementById("y").value;
		var r = parseInt(x) * parseInt(y);
		document.getElementById("r").value = r;
	}
	function div(){
		var x = document.getElementById("x").value;// com .value vc pega o valor do ide 
		var y = document.getElementById("y").value;
		var r = parseInt(x) / parseInt(y);
		document.getElementById("r").value = r;
	}	
				
</script>
<body>
<div id = "principal">
<form id="form">
<!-- ESSES BUTÕES PARA NA TELA-->
<input id="x" type="text"/>
<input id="somar" type= "button" value="Somar" onclick="soma()"/>
<input id="subtrair" type= "button" value="Sub" onclick="sub()"/>
<input id="multiplicar" type= "button" value="Mult" onclick="mult()"/>
<input id="dividir" type= "button" value="Div" onclick="div()"/>
<input id="y" type="text"/>
<input id="limpar" type="reset" value="Resetar"/>
<!--
<button onclick="soma()">SOMA</button>  esse é so um clic
<button onclick="sub()">SUBTRAÇÃO</button>
<button onclick="mult()">MULTIPLICAÇÃO</button>
<button onclick="div()">DIVISÃO</button>
-->
<b>=</b>
<input id="r" type="text"/ disabled="true">
</form>
</div>
</body>
</head>
</html>