html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>calculator
</title>
</head>
<body>
<div class="calculator-grid">
<div class="output">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
<button data-all-clear class="span-two">AC</button>
<button data-delete>DEL</button>
<button data-operation>÷</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>X</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
box-sizing:border-box ;
padding: 0;
margin:0;
background:linear-gradient(to right, lightblue, orange);
}
.calculator-grid {
display:grid;
justify-content:center;
align-content:center;
min-height:100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: minmax(120px, auto) repeat(5, 100px) ;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
document.addEventListener("DOMContentLoaded", function() {
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement ) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement =
currentOperandTextElement
this.clear()
}
clear() {
this.currentOperand = ''
this.previousOperand = ''
this.operation = undefined
}
delete() {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run