HTML、CSS、JSを使用して計算機を作成するにはどうすればよいですか？
HTML、CSS、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;
}
```

インデックス.js
コードブロック2