<|im_start|>system
You are a helpful AI assistant.<|im_end|>
<|im_start|>user
cómo puede crear una calculadora usando html, css y js?<|im_end|>
<|im_start|>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;
}
```<|im_end|>
<|im_start|>user
Gracias, podrías reducir la cantidad de código que se necesita para esta calculadora?<|im_end|>
<|im_start|>assistant
Seguro! Aquí esta un ejemplo más corto de la implementación de una calculadora usando HTML, Javascript y CSS, contenido en un solo archivo de HTML.
```html
<!DOCTYPE html>
<html>
  
<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
        integrity=
"sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
        integrity=
"sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer"></script>
    <!-- for styling -->
    <style>
        table {
            border: 1px solid black;
            margin-left: auto;
            margin-right: auto;
        }
  
        input[type="button"] {
            width: 100%;
            padding: 20px 40px;
            background-color: green;
            color: white;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
        }
  
        input[type="text"] {
            padding: 20px 30px;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            border: 2px solid black;
        }
    </style>
</head>
<!-- create table -->
  
<body>
    <table id="calcu">
        <tr>
            <td colspan="3"><input type="text" id="result"></td>
            <!-- clr() function will call clr to clear all value -->
            <td><input type="button" value="c" onclick="clr()" /> </td>
        </tr>
        <tr>
            <!-- create button and assign value to each button -->
            <!-- dis("1") will call function dis to display value -->
            <td><input type="button" value="1" onclick="dis('1')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="2" onclick="dis('2')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="3" onclick="dis('3')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="/" onclick="dis('/')" 
                        onkeydown="myFunction(event)"> </td>
        </tr>
        <tr>
            <td><input type="button" value="4" onclick="dis('4')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="5" onclick="dis('5')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="6" onclick="dis('6')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="*" onclick="dis('*')" 
                        onkeydown="myFunction(event)"> </td>
        </tr>
        <tr>
            <td><input type="button" value="7" onclick="dis('7')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="8" onclick="dis('8')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="9" onclick="dis('9')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="-" onclick="dis('-')"
                        onkeydown="myFunction(event)"> </td>
        </tr>
        <tr>
            <td><input type="button" value="0" onclick="dis('0')" 
                        onkeydown="myFunction(event)"> </td>
            <td><input type="button" value="." onclick="dis('.')" 
                        onkeydown="myFunction(event)"> </td>
            <!-- solve function call function solve to evaluate value -->
            <td><input type="button" value="=" onclick="solve()"> </td>
  
            <td><input type="button" value="+" onclick="dis('+')" 
                        onkeydown="myFunction(event)"> </td>
        </tr>
    </table>
  
    <script>
        // Function that display value
        function dis(val) {
            document.getElementById("result").value += val
        }
  
        function myFunction(event) {
            if (event.key == '0' || event.key == '1' 
                || event.key == '2' || event.key == '3'
                || event.key == '4' || event.key == '5' 
                || event.key == '6' || event.key == '7'
                || event.key == '8' || event.key == '9' 
                || event.key == '+' || event.key == '-'
                || event.key == '*' || event.key == '/')
                document.getElementById("result").value += event.key;
        }
  
        var cal = document.getElementById("calcu");
        cal.onkeyup = function (event) {
            if (event.keyCode === 13) {
                console.log("Enter");
                let x = document.getElementById("result").value
                console.log(x);
                solve();
            }
        }
  
        // Function that evaluates the digit and return result
        function solve() {
            let x = document.getElementById("result").value
            let y = math.evaluate(x)
            document.getElementById("result").value = y
        }
  
        // Function that clear the display
        function clr() {
            document.getElementById("result").value = ""
        }
    </script>
</body>
  
</html>   
```
Este ejemplo usa la función math.evaluate la biblioteca [math.js](https://mathjs.org/) en lugar de usar la función `eval` de Javascript para evaluar expresiones matemáticas a calcular.<|im_end|>