tuicss
Version:
TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style
55 lines (51 loc) • 2.72 kB
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>