Código HTML de una calculadora Básica
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<style>
.container {
width: 200px;
margin: 0 auto;
}
input[type="text"] {
width: 100%;
margin-bottom: 10px;
}
input[type="button"] {
width: 48%;
float: left;
margin-right: 2%;
margin-bottom: 10px;
}
input[type="button"]:nth-child(3n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="display" disabled>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="+" onclick="appendToDisplay('+')">
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendToDisplay('/')">
<input type="button" value="C" onclick="clearDisplay()">
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var displayValue = document.getElementById('display').value;
var result = eval(displayValue);
document.getElementById('display').value = result;
}
</script>
</body>
</html>
Este código crea una calculadora básica con una interfaz simple en HTML. Puedes agregarlo en un archivo HTML y abrirlo en un navegador para probarlo. Los números y operadores se muestran en un campo de texto (input) desactivado. Los botones de la calculadora se han agregado con input de tipo botón, y cada uno tiene un atributo onclick que llama a las funciones correspondientes en JavaScript para agregar valores al campo de texto, borrarlo o realizar el cálculo.
A continuación el código completo de HTML con JavaScript incorporado.
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<style>
.container {
width: 200px;
margin: 0 auto;
}
input[type="text"] {
width: 100%;
margin-bottom: 10px;
}
input[type="button"] {
width: 48%;
float: left;
margin-right: 2%;
margin-bottom: 10px;
}
input[type="button"]:nth-child(3n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="display" disabled>
<input type="button" value="7" onclick="appendToDisplay('7')">
<input type="button" value="8" onclick="appendToDisplay('8')">
<input type="button" value="9" onclick="appendToDisplay('9')">
<input type="button" value="+" onclick="appendToDisplay('+')">
<input type="button" value="4" onclick="appendToDisplay('4')">
<input type="button" value="5" onclick="appendToDisplay('5')">
<input type="button" value="6" onclick="appendToDisplay('6')">
<input type="button" value="-" onclick="appendToDisplay('-')">
<input type="button" value="1" onclick="appendToDisplay('1')">
<input type="button" value="2" onclick="appendToDisplay('2')">
<input type="button" value="3" onclick="appendToDisplay('3')">
<input type="button" value="*" onclick="appendToDisplay('*')">
<input type="button" value="0" onclick="appendToDisplay('0')">
<input type="button" value="." onclick="appendToDisplay('.')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendToDisplay('/')">
<input type="button" value="C" onclick="clearDisplay()">
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var displayValue = document.getElementById('display').value;
var result = eval(displayValue);
document.getElementById('display').value = result;
}
</script>
</body>
</html>
Este código crea una calculadora básica con una interfaz simple en HTML. Puedes agregarlo en un archivo HTML y abrirlo en un navegador para probarlo. Los números y operadores se muestran en un campo de texto (input) desactivado. Los botones de la calculadora se han agregado con input de tipo botón, y cada uno tiene un atributo onclick que llama a las funciones correspondientes en JavaScript para agregar valores al campo de texto, borrarlo o realizar el cálculo.
A continuación el código completo de HTML con CSS y JavaScript incorporados.
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 240px;
margin: 20px auto;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.display {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
text-align: right;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.button {
padding: 10px;
font-size: 16px;
text-align: center;
background-color: #e0e0e0;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background-color: #d2d2d2;
}
.button:nth-child(4n) {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="display" id="display"></div>
<div class="buttons">
<div class="button" onclick="appendToDisplay('7')">7</div>
<div class="button" onclick="appendToDisplay('8')">8</div>
<div class="button" onclick="appendToDisplay('9')">9</div>
<div class="button" onclick="appendToDisplay('+')">+</div>
<div class="button" onclick="appendToDisplay('4')">4</div>
<div class="button" onclick="appendToDisplay('5')">5</div>
<div class="button" onclick="appendToDisplay('6')">6</div>
<div class="button" onclick="appendToDisplay('-')">-</div>
<div class="button" onclick="appendToDisplay('1')">1</div>
<div class="button" onclick="appendToDisplay('2')">2</div>
<div class="button" onclick="appendToDisplay('3')">3</div>
<div class="button" onclick="appendToDisplay('*')">*</div>
<div class="button" onclick="appendToDisplay('0')">0</div>
<div class="button" onclick="appendToDisplay('.')">.</div>
<div class="button" onclick="calculate()">=</div>
<div class="button" onclick="appendToDisplay('/')">/</div>
<div class="button" onclick="clearDisplay()">C</div>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').innerText += value;
}
function clearDisplay() {
document.getElementById('display').innerText = '';
}
function calculate() {
var displayValue = document.getElementById('display').innerText;
var result = eval(displayValue);
document.getElementById('display').innerText = result;
}
</script>
</body>
</html>
En este código, se ha agregado CSS para estilizar la calculdora. Se ha aplicado un estilo al contenedor principal, el campo de texto de la pantalla de la calculadora y los botones.
En el CSS, se establece box-sizing: border-box; para que el tamaño total de cada elemento incluya el padding y el borde, evitando así problemas de desbordamiento.
El fondo de la página se establece en background-color: #f2f2f2;.
El contenedor principal tiene un ancho de 240px, un margen de 20px en los lados y se centra verticalmente usando margin: 20px auto;. Además, se agrega un fondo blanco, un sombreado y un borde redondeado para darle una apariencia de caja.
El campo de texto de la pantalla de la calculadora se estiliza con width: 100%; para ocupar todo el ancho disponible, un margen inferior de 10px, un relleno interno de 10px, un tamaño de fuente de 20px y un alineamiento de texto a la derecha (text-align: right;).
Los botones se colocan en una cuadrícula utilizando display: grid;. Se establece grid-template-columns: repeat(4, 1fr); para dividir la cuadrícula en 4 columnas de tamaño igual. Se agrega un espacio entre los botones utilizando gap: 10px;.
Cada botón tiene un relleno de 10px, un tamaño de fuente de 16px, un alineamiento de texto al centro, un fondo gris claro (background-color: #e0e0e0;), un borde sin estilo (border: none;) y un borde redondeado (border-radius: 4px;). Al pasar el cursor sobre un botón, se aplica un cambio de color en el fondo.
El último botón en la cuadrícula se expande en 2 columnas usando grid-column: span 2; para que ocupe un espacio más grande y represente el botón de igual.
En el JavaScript, se han actualizado las funciones appendToDisplay(), clearDisplay() y calculate() para trabajar con el contenido de la pantalla de la calculadora utilizando innerText en lugar de value, ya que ahora se utiliza un div en lugar de un input para mostrar el resultado.