prompter: cómo puede crear una calculadora usando html, css y js?

assistant: Existen muchas formas de hacer una calculadora usando html, css y js...
Le mostrare un ejemplo simple:
`index.html`
```html
<!DOCTYPE html>
<html>
<head>
	<title>Calculadora</title>
	<link rel="stylesheet" type="text/css" href="estilo.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div class="calculadora">
		<div class="display">
			<input type="text" name="display" id="display" disabled>
		</div>
		<script>
			function agregar(valor){
				document.getElementById('display').value = document.getElementById('display').value + valor;
			}
			function calcular(){
				var resultado = eval(document.getElementById('display').value);
				document.getElementById('display').value = resultado;
			}
		</script>
		<div class="teclado">
			<input type="button" value="7" onclick="agregar('7')">
			<input type="button" value="8" onclick="agregar('8')">
			<input type="button" value="9" onclick="agregar('9')">
			<input type="button" value="/" onclick="agregar('/')">
			<input type="button" value="4" onclick="agregar('4')">
			<input type="button" value="5" onclick="agregar('5')">
			<input type="button" value="6" onclick="agregar('6')">
			<input type="button" value="*" onclick="agregar('*')">
			<input type="button" value="1" onclick="agregar('1')">
			<input type="button" value="2" onclick="agregar('2')">
			<input type="button" value="3" onclick="agregar('3')">
			<input type="button" value="-" onclick="agregar('-')">
			<input type="button" value="0" onclick="agregar('0')">
			<input type="button" value="." onclick="agregar('.')">
			<input type="button" value="=" onclick="calcular()">
			<input type="button" value="+" onclick="agregar('+')">
			<input type="button" value="C" onclick="document.getElementById('display').value = ''">
		</div>
	</div>
</body>
</html>
```

Y esta seria la hoja de estilos para este ejemplo:
`estilo.css`
```css
*{
	margin: 0;
	padding: 0;
}

body{
	background: #333;
}

.calculadora{
	width: 300px;
	height: 400px;
	border-radius: 5px;
	margin: 50px auto;
}

.display{
	width: 100%;
	height: 100px;
}

.display input{
	width: 100%;
	height: 100%;
	font-size: 50px;
	text-align: right;
	background: #333;
	border: 0;
	color: #fff;
}

.teclado{
	width: 100%;
	height: 60px;
}

.teclado input{
	width: 25%;
	height: 100%;
	font-size: 50px;
	border: 0;
	background: #333;
	color: #fff;
	float: left;
	cursor: pointer;
}

.teclado input:hover{
	background: #555;
}
```

prompter: Gracias por ayudarme con esta tarea, ahora necesito que me expliques como usar esos códigos que mostraste

assistant: Ok, te explico...

Dirígete a el escritorio en tu ordenador y crear un archivo con el nombre `index.html`
Abre el archivo con algún editor de texto que tengas instalado en tu ordenador y coloque el código `index.html` que te enseñe en el mensaje anterior.

Haz lo mismo con el otro archivo, en este caso el archivo debe tener el nombre `estilo.css`
Abre el archivo y coloque el código `estilo.css` que te enseñe antes...

no olvides guardar los cambios que hiciste en los dos archivos, en este punto ya puedes abrir el archivo `index.html` con tu navegador favorito.

¿Necesitas algo mas?

prompter: Necesito ejecutar el código en Android localmente. ¿Cómo podría hacerlo?

assistant: A continuación te dejare un ejemplo como se puede crear una calculadora usando HTML, CSS y Javascript:

index.html
```html
<form id="calculadora">
  <table>
    <tr>
      <td colspan="4"><input type="text" readonly id="resultado"></td>
    </tr>
    <tr>
      <td><button type="button" id="clear" class="operacion">C</button></td>
      <td><button type="button" id="dividir" class="operacion">/</button></td>
      <td><button type="button" id="multiplicar" class="operacion">X</button></td>
      <td rowspan="2"><button type="button" id="restar" class="operacion">-</button></td>
    </tr>
    <tr>
      <td><button type="button">1</button></td>
      <td><button type="button">2</button></td>
      <td><button type="button">3</button></td>
    </tr>
    <tr>
      <td><button type="button">4</button></td>
      <td><button type="button">5</button></td>
      <td><button type="button">6</button></td>
      <td rowspan="2"><button type="button" id="sumar" class="operacion">+</button></td>
    </tr>
    <tr>
      <td><button type="button">7</button></td>
      <td><button type="button">8</button></td>
      <td><button type="button">9</button></td>
    </tr>
    <tr>
      <td colspan="2"><button type="button">0</button></td>
      <td colspan="2"><button type="button" id="igual"  class="operacion">=</button></td>
    </tr>
	</table>
</form>
```

index.css
```css
*{
	box-sizing: border-box;
}

body{
  background-image: linear-gradient(to left, magenta, tomato);
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calculadora table{
	border-collapse: collapse;
}

#calculadora table{
	height: 300px;
}

#calculadora button,
#calculadora input{
	width: 100%;
	height: 100%;
	font-size: 1em;
	padding: 10px
}

#calculadora input{
	padding: 15px;
	color: white;
	border: none;
	background-color: rgba(0, 0, 0, .5);
}

#calculadora input:focus{
	outline: none;
}

#calculadora button{
	background-color: rgba(0, 0, 0, .4);
	border: none;
	color: white;
	font-weight: bold;
	cursor: pointer;
}

#calculadora button:hover{
	background-color: rgba(0, 0, 0, .5);
}

#calculadora button:focus{
	outline: none;
}

#calculadora button.operacion{
	background-color: crimson;
}

#calculadora button.operacion#restar,
#calculadora button.operacion#igual,
#calculadora button.operacion#clear{
	background-color: steelblue;
}
```

index.js
```javascript
// variables
const calculadora = document.getElementById('calculadora')
const resultado = document.getElementById('resultado')

// eventos
calculadora.addEventListener('click', añadirNumeros)

// Operaciones
let operaciones = []

// añadirNumeros
function añadirNumeros(e){
	if(e.target.getAttribute('type') === 'button'){
		if(e.target.className != 'operacion'){
			resultado.value += e.target.innerText
		}
		if(e.target.id === 'sumar'){
			operaciones.push(resultado.value)
			operaciones.push('+')
			calculadora.reset()
		}
		if(e.target.id === 'igual'){
			operaciones.push(resultado.value)
			calculadora.reset()
			const resultadoOperacion = eval(operaciones.join(''))
			resultado.value = resultadoOperacion
			operaciones = []
		}
		if(e.target.id === 'restar'){
			operaciones.push(resultado.value)
			operaciones.push('-')
			calculadora.reset()
		}
		if(e.target.id === 'multiplicar'){
			operaciones.push(resultado.value)
			operaciones.push('*')
			calculadora.reset()
		}
		if(e.target.id === 'dividir'){
			operaciones.push(resultado.value)
			operaciones.push('/')
			calculadora.reset()
		}
		if(e.target.id === 'clear'){
			operaciones = []
			calculadora.reset()
		}
	}
}
```

prompter: Gracias, podrías reducir la cantidad de código que se necesita para esta calculadora?