65 lines
2.4 KiB
HTML
65 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Create a calculator container -->
|
|
<div class="calculator">
|
|
<!-- Create a display screen -->
|
|
<div class="screen" id="screen"></div>
|
|
<!-- Create a table of buttons -->
|
|
|
|
|
|
<table>
|
|
<tr>
|
|
<td><button class="button function" id="sqrt">√</button></td>
|
|
<td><button class="button function" id="sin">sin</button></td>
|
|
<td><button class="button function" id="cos">cos</button></td>
|
|
<td><button class="button function" id="tan">tan</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button class="button function" id="log">log</button></td>
|
|
<td><button class="button function" id="power">^</button></td>
|
|
<td><button class="button operator" id="divide">/</button></td>
|
|
<td><button class="button clear" id="clear">C</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button class="button number" id="seven">7</button></td>
|
|
<td><button class="button number" id="eight">8</button></td>
|
|
<td><button class="button number" id="nine">9</button></td>
|
|
<td><button class="button operator" id="multiply">*</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button class="button number" id="four">4</button></td>
|
|
<td><button class="button number" id="five">5</button></td>
|
|
<td><button class="button number" id="six">6</button></td>
|
|
<td><button class="button operator" id="subtract">-</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><button class="button number" id="one">1</button></td>
|
|
<td><button class="button number" id="two">2</button></td>
|
|
<td><button class="button number" id="three">3</button></td>
|
|
<td><button class="button operator" id="add">+</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan=""><button class="button number" id="zero">0</button></td>
|
|
<td colspan=""><button class="button number" id="doublezero">00</button></td>
|
|
<td><button class="button number" id="dot">.</button></td>
|
|
<td><button class="button operator" id="equal">=</button></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Link to the JavaScript code -->
|
|
<script src="script.js"></script>
|
|
|
|
</body>
|
|
|