<!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";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.