Skip to content

Commit a022b44

Browse files
Jobayer-AhmedJobayer-Ahmed
authored
Merge pull request #7 from gskls/master
Fixed all the issues and Undo and Redo feature
2 parents 1da35c9 + 8dc6dbb commit a022b44

File tree

3 files changed

+142
-91
lines changed

3 files changed

+142
-91
lines changed

‎index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,13 @@
1111

1212
<body>
1313
<div id="wrapper">
14+
<div class="historyContainer">
15+
<p style="font-size:36px">History</p>
16+
<div id="history">
17+
</div>
18+
<button id="deleteHistory">Distroy History</button>
19+
</div>
20+
1421
<div class="main">
1522
<div class="output">
1623
<div id="steps">
@@ -21,6 +28,7 @@
2128
<!-- removed the calbutton classes as you can target this in css without this : so just remove the junk -->
2229

2330
<!-- fixed typo : <buttona> -->
31+
<button id="redo">Redo</button>
2432
<button id="deleteAll">ac</button>
2533
<button id="backOne">ce</button>
2634
<button id="/">/</button>
@@ -40,9 +48,11 @@
4048
<button id="3">3</button>
4149
<button id="+">+</button>
4250
<br>
51+
<button id="undo">Undo</button>
4352
<button id="0">0</button>
4453
<button id=".">.</button>
4554
<button id="total">=</button>
55+
4656
</div>
4757
</div>
4858
</div>

‎script.js

Lines changed: 95 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,86 @@
1-
// no need for jquery: it's a really big library: bad for performace
1+
class History {
2+
historyShow(state, deleteAll) {
3+
const target = document.getElementById("history");
4+
var p = document.createElement("p");
5+
p.innerHTML = state.join("");
6+
deleteAll ? target.innerHTML = "" : target.appendChild(p);
7+
}
8+
9+
historyPush(state) {
10+
this.history.push(state);
11+
this.redoUndoKeyPressed = this.history.length;
12+
this.historyShow(state);
13+
}
14+
15+
deleteHistory() {
16+
this.history = [];
17+
this.historyShow([], "delete");
18+
this.redoUndoKeyPressed = this.history.length;
19+
}
220

3-
const $ = (selector) => {
4-
return document.querySelector(selector);
21+
RedoOrUndo(cmd) {
22+
cmd === "undo" && this.redoUndoKeyPressed ? this.goAhead("undo") : false;
23+
cmd === "redo" && this.redoUndoKeyPressed < this.history.length - 1 ? this.goAhead("redo") : true;
24+
}
25+
26+
goAhead(cmd) {
27+
cmd === "undo" ? this.redoUndoKeyPressed-- : this.redoUndoKeyPressed++;
28+
this.setState({
29+
input: this.history[this.redoUndoKeyPressed]
30+
})
31+
}
532
}
633

734

835

936

10-
class Calculator {
37+
38+
39+
40+
41+
class Calculator extends History {
1142
constructor() {
12-
this.state = {
13-
monitor: [],
14-
output: ""
15-
};
16-
this.output = document.getElementById("steps");
17-
this.input = document.getElementById("calBody");
18-
this.bound = this.bound.bind(this);
43+
super();
44+
this.state = [];
45+
this.history = [];
46+
this.redoUndoKeyPressed = 0;
47+
this.instantiate();
48+
}
49+
50+
instantiate() {
1951
this.getUserInput();
20-
this.leaveZero();
52+
this.render();
53+
this.history.push();
2154
}
2255

23-
render() {
24-
this.output.innerHTML = this.state.output;
56+
render(total) {
57+
var noData = this.state.join("");
58+
noData === "" ? noData = 0 : true;
59+
document.getElementById("steps").innerHTML = total ? total : noData;
2560
}
2661

27-
getUserInput() {
28-
this.input.addEventListener('click', (e) => {
29-
var id = e.target.id;
30-
if (id !== "calBody") {
31-
const ctrkeys = ["deleteAll", "backOne", "total"];
32-
ctrkeys.includes(id) ? this.commandStation(id) : this.regularClick(id);
33-
}
34-
});
62+
regularClick(id) {
63+
this.setState({
64+
input: this.state.concat(id)
65+
})
3566
}
3667

68+
backOne() {
69+
this.state.pop();
70+
this.render();
71+
}
3772

73+
deleteAll() {
74+
this.setState({
75+
input: []
76+
});
77+
this.redoUndoKeyPressed = this.history.length;
78+
}
79+
80+
setState(obj, total) {
81+
this.state = obj.input;
82+
this.render(total);
83+
}
3884

3985
commandStation(id) {
4086
switch (id) {
@@ -43,79 +89,46 @@ class Calculator {
4389
break;
4490
case "backOne":
4591
this.backOne();
92+
break;
4693
case "total":
47-
this.total();
94+
this.getTotal("total");
95+
break;
96+
case "undo":
97+
this.RedoOrUndo("undo");
98+
break;
99+
case "redo":
100+
this.RedoOrUndo("redo");
101+
break;
48102
default:
49103
break;
50104
}
51105
}
52106

53-
regularClick(id) {
54-
this.state.monitor.push(id);
55-
this.state.output = this.state.monitor.join("");
56-
this.render();
57-
console.log(this.state)
58-
}
59-
60-
deleteAll() {
61-
this.state = {
62-
monitor: [],
63-
output: ""
64-
}
65-
this.render();
66-
this.leaveZero();
67-
}
68-
69-
backOne() {
70-
var monitor = [];
71-
var state = this.state;
72-
73-
for (var i = 0; i < state.monitor.length - 1; i++) {
74-
monitor[i] = state.monitor[i].toString().split("")
75-
}
76-
77-
this.state = {
78-
monitor: monitor,
79-
output: monitor.join("")
80-
}
81-
82-
if (state.output === "") {
83-
state.output = "0";
84-
}
85-
this.render();
86-
}
87-
88-
total() {
89-
// give something wrong and see how it works
107+
getTotal(cmd) {
90108
try {
91-
var total = eval(this.state.monitor.join(""));
109+
var total = eval(this.state.join(""));
110+
this.historyPush(this.state);
92111
} catch (e) {
93-
total = e;
112+
var total = e;
94113
}
95-
96-
this.state = {
97-
output: total,
98-
monitor: total.toString().split("")
99-
};
100-
this.render();
114+
this.setState({
115+
input: [].concat(total.toString().split(""))
116+
}, total);
101117
}
102118

103-
104-
105-
bound() {
106-
this.deleteAll = this.deleteAll.bind(this);
107-
this.backOne = this.backOne.bind(this);
108-
this.total = this.total.bind(this);
109-
this.commandStation = this.commandStation.bind(this);
110-
this.getUserInput = this.getUserInput.bind(this);
111-
this.render = this.render.bind(this);
112-
}
113-
leaveZero() {
114-
this.output.innerHTML = "0";
119+
getUserInput() {
120+
document.getElementById("deleteHistory").addEventListener("click", (e) => {
121+
this.deleteHistory();
122+
});
123+
document.getElementById("calBody").addEventListener('click', (e) => {
124+
var id = e.target.id;
125+
if (id !== "calBody") {
126+
const ctrkeys = ["deleteAll", "backOne", "total", "undo", "redo"];
127+
ctrkeys.includes(id) ? this.commandStation(id) : this.regularClick(id);
128+
}
129+
});
115130
}
116-
117131
}
118132

119133

120-
121134
const StartCalc = new Calculator();

‎style.css

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,32 @@
22
padding: 0;
33
margin: 0;
44
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5-
border: 0;
65
}
7-
6+
html{
7+
height: 100%;
8+
}
89
body {
910
background-color: #ececec;
1011
text-align: right;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100%;
16+
}
17+
18+
#wrapper {
19+
display: flex;
20+
align-items: center;
21+
justify-content: flex-start;
1122
}
1223

1324
.main {
1425
width: 350px;
1526
height: auto;
1627
background-color: #fff;
17-
margin: auto;
18-
margin-top: 30px;
1928
border-radius: 5px;
2029
box-shadow: 0px 6px 80px rgba(0, 0, 0, 0.24);
30+
margin-left: 3em;
2131
}
2232

2333
.output {
@@ -38,14 +48,17 @@ body {
3848
background-color: transparent;
3949
font-size: 20px;
4050
cursor: pointer;
41-
transition: 50ms all ease;
42-
outline: none; /* now it won't show the outline on Click */
51+
transition: 50ms all ease;
52+
outline: none;
53+
/* now it won't show the outline on Click */
4354
transform: scale(1);
4455
font-weight: 600;
56+
border: none;
4557
}
4658

4759

4860
/* hover effect for the buttons */
61+
4962
.calBody button:hover {
5063
background: rgb(234, 244, 255);
5164
}
@@ -54,12 +67,27 @@ body {
5467
transform: scale(0.9);
5568
border-radius: 10px;
5669
}
57-
.calBody{
70+
71+
.calBody {
5872
background: rgb(145, 215, 255);
5973
border-bottom-left-radius: 5px;
6074
border-bottom-right-radius: 5px;
6175
}
6276

63-
#steps{
64-
font-family:monospace
77+
#steps {
78+
font-family: monospace
79+
}
80+
81+
.historyContainer {
82+
padding: 1em;
83+
}
84+
85+
#history {
86+
margin-bottom: 1em
87+
}
88+
89+
#history p {
90+
padding-top: 1em;
91+
font-weight: 600;
92+
font-size: 20px;
6593
}

0 commit comments

Comments
 (0)