<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
  
	<form name="calculator">
		<span id="izquierda">CASIO</span>
		<span id="derecha">fx-82MS</span>
		<span id="centro">S-V.P.A.M</span>
		<input type="text" name="ans" value="" disabled>
		<div id="expandir">
			<input type="button" value="√" class="rojo">
			<input type="button" value="sin"  class="rojo">
			<input type="button" value="cos" class="rojo">
			<input type="button" value="tan" class="rojo">
		</div>
		<div>	
			<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
			<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
			<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
			<input type="button" value="+" class="negro" onClick="document.calculator.ans.value+='+'">
		</div>
		<div>
			<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
			<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
			<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
			<input type="button" value="-" class="negro" onClick="document.calculator.ans.value+='-'">
		</div>
		<div>
			<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
			<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
			<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
			<input type="button" value="x" class="negro" onClick="document.calculator.ans.value+='*'">
		</div>
		<div>
			<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
			<input type="reset" value="C" class="rojo">
			<input type="button" value="EX" class="rojo" onclick="expandir()">
			<input type="button" value="/" class="negro" onClick="document.calculator.ans.value+='/'">
			
		</div>
		<div>
			<input type="button" value="=" class="negro" style="width: 90%; margin-bottom: 20px;" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
		</div>
	</form>
  
  <!-- CREDITS -->
  <div class="credits">
    <a href="https://www.linkedin.com/in/josemariabernalgomez/" target="__blank">
      <i class="fab fa-linkedin"></i>
    </a>
  </div>
  
</body>
@font-face {
  font-family: "digital-7";
  src: url(http://db.onlinewebfonts.com/t/58045dabdc3a361cb9bb9faf2f1dd1f3.ttf");
}
@font-face{
  font-family: "eurostile";
  src: url("http://db.onlinewebfonts.com/t/6c3a09a727b79f2832ddddaa5d699747.ttf");
}
*{
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}
body{
  background: #CBD8CF;
  display: flex;
  justify-content: center;
  position: relative;
}
form {
  width: 310px;
  max-width: 310px;
  min-width: 310px;
  text-align: center;
  border: double 6px #363442;
  padding-bottom: 20px;
  background: #484556;
  padding-top: 40px;
  margin-top: 60px;
  border-radius: 5px;
  box-shadow: 10px 10px 5px rgba(0,0,0,0.2);
}
#izquierda{
  float: left;
  margin-top: -28px;
  margin-left: 18px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  font-family: eurostile;
}
#derecha{
  float: right;
  margin-top: -28px;
  margin-right: 18px;
  color: white;
  font-size: 18px;
  font-family: serif;
}
#centro{
  color: #C3828E;
  font-weight: bold;
  font-size: 21px;
  font-family: digital-7;
}

input[type=text] {
  font-family: digital-7;
    width: 66%;
    padding: 19px 32px;
    font-size: 30px;
    margin: 8px;
    border-radius: 5px;
    border: 2px inset;
    text-align: left;
    color: #333;
    background: #CBD8CF;
    margin-top: 10px;
    margin-bottom: 30px;
}
.rojo{
  background-color: #AE6B7E !important;
}
.negro{
  background-color: #33303d !important;
}
input[type=button], input[type=submit], input[type=reset] {
    background-color: #94929F;
    border: none;
    color: white;
    padding: 10px;
    font-size: 18px;
    min-width: 16%;
    border-radius: 10px;
    border-bottom: 2px solid rgba(0,0,0,0.3);
    margin: 10px 10px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
}
#expandir{
  display: none;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  background-color: #62606c;
}
.rojo:hover{
  background-color: #945164 !important;
}
.negro:hover{
  background-color: #24222b !important;
}

.credits{
  position: absolute;
  bottom: -95px;
  right: 15px;
  font-size: 45px;
}

.credits a{
    color: #33303d;
    text-decoration: none;
}
.credits a:hover{
  color: rgba(51,48,61,0.8);
}
function expandir(){
		if(document.getElementById('expandir').style.display == "block"){
				document.getElementById('expandir').style.display = "none";
			}
			else{
				document.getElementById('expandir').style.display = "block";
			}
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.