55 lines
2.6 KiB
HTML
55 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pocket Calculator Example</title>
|
|
<script src="../dist/tuicss.min.js"></script>
|
|
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
|
|
<div class="center" style="margin-top: 100px;">
|
|
<div class="tui-window white-168">
|
|
<fieldset class="tui-fieldset">
|
|
<legend align="center">Pocket Calculator</legend>
|
|
<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
|
|
<br><br>
|
|
<button class="tui-button" onclick="clearDisplay()">C </button>
|
|
<button class="tui-button"><-</button>
|
|
<button class="tui-button">% </button>
|
|
<button class="tui-button">+-</button><br><br>
|
|
<button class="tui-button" onclick="digit('7')">7 </button>
|
|
<button class="tui-button" onclick="digit('8')">8 </button>
|
|
<button class="tui-button" onclick="digit('9')">9 </button>
|
|
<button class="tui-button">/ </button><br><br>
|
|
<button class="tui-button" onclick="digit('4')">4 </button>
|
|
<button class="tui-button" onclick="digit('5')">5 </button>
|
|
<button class="tui-button" onclick="digit('6')">6 </button>
|
|
<button class="tui-button">* </button><br><br>
|
|
<button class="tui-button" onclick="digit('1')">1 </button>
|
|
<button class="tui-button" onclick="digit('2')">2 </button>
|
|
<button class="tui-button" onclick="digit('3')">3 </button>
|
|
<button class="tui-button">- </button><br><br>
|
|
<button class="tui-button" onclick="digit('0')">0 </button>
|
|
<button class="tui-button" onclick="digit('.')">. </button>
|
|
<button class="tui-button">= </button>
|
|
<button class="tui-button">+ </button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function digit(digit) {
|
|
let val = document.getElementById("display").value;
|
|
document.getElementById("display").value = digit + "" + val;
|
|
}
|
|
function clearDisplay() {
|
|
document.getElementById("display").value = "";
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|