Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript">
- let result = '0';
- let empty = true;
- function update() {
- document.getElementById('calculation-result').innerHTML = result;
- }
- function append(char) {
- if (char === '.') {
- let dot = false;
- for (i = result.length - 1; i > 0 && '.012345789'.includes(result[i]); i--) {
- if (result[i] == '.') {
- dot = true;
- break;
- }
- }
- if (dot) {
- return;
- }
- }
- if (empty) {
- if (char === '0') {
- return;
- }
- if ('*/'.includes(char)) {
- return;
- }
- result = char;
- } else {
- let last = result.slice(-2);
- if (!'+-*/'.includes(last[0]) || last[1] != ' ') {
- if ('+-*/'.includes(char)) {
- char = ' ' + char + ' ';
- }
- } else {
- if ('*/'.includes(char)) {
- return;
- }
- }
- result += char;
- }
- empty = false;
- update();
- }
- function calculate() {
- result = eval(result).toString();
- update();
- }
- function backspace() {
- if (result.length === 1) {
- empty = true;
- result = '0';
- } else {
- if (result.slice(-1) == ' ') {
- result = result.slice(0, -3);
- } else {
- result = result.slice(0, -1);
- }
- }
- update();
- }
- </script>
- <style>
- * {
- font-family: monospace;
- }
- body {
- background: linear-gradient(to top, #34343E, #57575F);
- background-size: 100% 250%;
- text-align: center;
- color: #7CBDBA;
- }
- #calculation-result {
- margin-right: 6px;
- font-size: 150%;
- }
- .number-button {
- border: 1px solid #7CFDFF;
- background-clip: padding-box;
- border-radius: 0.125em;
- display: inline-block;
- background: #34343E;
- text-decoration: none;
- color: #7CBDBA;
- padding: 10px;
- margin: 0.5%;
- }
- </style>
- <title>Calculator</title>
- <meta charset="utf-8">
- </head>
- <body>
- <div id="calculator">
- <a id="calculation-result">0</div>
- <br>
- <a class="number-button" href="#" onclick="append('1')">1</a>
- <a class="number-button" href="#" onclick="append('2')">2</a>
- <a class="number-button" href="#" onclick="append('3')">3</a>
- <a class="number-button" href="#" onclick="append('+')">+</a>
- <br>
- <a class="number-button" href="#" onclick="append('4')">4</a>
- <a class="number-button" href="#" onclick="append('5')">5</a>
- <a class="number-button" href="#" onclick="append('6')">6</a>
- <a class="number-button" href="#" onclick="append('-')">-</a>
- <br>
- <a class="number-button" href="#" onclick="append('7')">7</a>
- <a class="number-button" href="#" onclick="append('8')">8</a>
- <a class="number-button" href="#" onclick="append('9')">9</a>
- <a class="number-button" href="#" onclick="append('*')">*</a>
- <br>
- <a class="number-button" href="#" onclick="append('.')">.</a>
- <a class="number-button" href="#" onclick="append('0')">0</a>
- <a class="number-button" href="#" onclick="append('/')">/</a>
- <a class="number-button" href="#" onclick="calculate()">=</a>
- <br>
- <a class="number-button" href="#" onclick="backspace()">←</a>
- <br>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement