Skip to content

Commit fd23f31

Browse files
letsdogreatletsdogreat
committed
everything's done except ce button doesn't work
1 parent efc319f commit fd23f31

File tree

3 files changed

+110
-60
lines changed

3 files changed

+110
-60
lines changed

‎javaScriptCalculator/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,11 @@
1313
<div id="wrapper">
1414
<div class="main">
1515
<div class="output">
16-
<div id="userOutput">
17-
<span id="steps"></span>
16+
<div id="steps">
1817
</div>
1918
</div>
2019

21-
<div class="calBody">
20+
<div class="calBody" id="calBody">
2221
<!-- removed the calbutton classes as you can target this in css without this : so just remove the junk -->
2322

2423
<!-- fixed typo : <buttona> -->
@@ -47,7 +46,6 @@
4746
</div>
4847
</div>
4948
</div>
50-
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
5149
<script type="text/javascript" src="./script.js"></script>
5250
</body>
5351

‎javaScriptCalculator/script.js

Lines changed: 95 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,104 @@
1-
$(document).ready(function() {
2-
var userInput = [""];
3-
var subTotal;
4-
var variable1 = ["+","-","*","/"];
5-
var variable2 = ["."];
6-
var numb = [0,1,2,3,4,5,6,7,8,9];
7-
8-
function getValue(input) {
9-
if(variable2.includes(userInput[userInput.length-1])===true && input==="."){
10-
console.log("Duplicate '.'");
11-
}
12-
else if(userInput.length===1 && variable1.includes(input)===false){
13-
userInput.push(input);
14-
}
15-
else if(variable1.includes(userInput[userInput.length-1])===false){
16-
userInput.push(input);
17-
}
18-
else if(numb.includes(Number(input))){
19-
userInput.push(input);
20-
}
21-
updated();
1+
// no need for jquery: it's a really big library: bad for performace
2+
3+
const $ = (selector) => {
4+
return document.querySelector(selector);
5+
}
6+
7+
8+
9+
10+
class Calculator {
11+
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);
19+
this.getUserInput();
20+
this.leaveZero();
2221
}
2322

24-
function updated() {
25-
subTotal= userInput.join("");
26-
$("#steps").html(subTotal);
23+
render() {
24+
this.output.innerHTML = this.state.output;
2725
}
2826

29-
function getTotal(){
30-
subTotal = userInput.join("");
31-
console.log(subTotal + ": " + eval(subTotal));
32-
$("#steps").html(eval(subTotal));
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+
});
3335
}
3436

35-
$("button").on("click",function(){
36-
if(this.id==="deleteAll"){
37-
userInput = [""];
38-
updated();
39-
}
40-
else if(this.id==="backOne"){
41-
userInput.pop();
42-
updated();
43-
}
44-
else if(this.id==="total"){
45-
getTotal();
37+
38+
39+
commandStation(id) {
40+
switch (id) {
41+
case "deleteAll":
42+
this.deleteAll();
43+
break;
44+
case "backOne":
45+
this.backOne();
46+
case "total":
47+
this.total();
48+
default:
49+
break;
4650
}
47-
else{
48-
if(userInput[userInput.length-1].indexOf("+","-","/","*",".")===-1){
49-
getValue(this.id);
50-
}
51-
else {
52-
getValue(this.id);
53-
}
51+
}
52+
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.monitor);
58+
}
59+
60+
deleteAll() {
61+
this.state = {
62+
monitor: [],
63+
output: ""
5464
}
55-
});
56-
function windowClose() {
57-
window.open('','_parent','');
58-
window.close();
65+
this.render();
66+
this.leaveZero();
67+
}
68+
69+
backOne() {
70+
this.state.monitor.pop();
71+
this.state.output = this.state.monitor.join("");
72+
this.render();
73+
console.log(this.state)
74+
}
75+
76+
total() {
77+
const total = eval(this.state.monitor.join(""));
78+
79+
this.state = {
80+
output: total,
81+
monitor: [].concat(total)
82+
};
83+
this.render();
5984
}
60-
});
85+
86+
87+
88+
bound() {
89+
this.deleteAll = this.deleteAll.bind(this);
90+
this.backOne = this.backOne.bind(this);
91+
this.total = this.total.bind(this);
92+
this.commandStation = this.commandStation.bind(this);
93+
this.getUserInput = this.getUserInput.bind(this);
94+
this.render = this.render.bind(this);
95+
}
96+
leaveZero() {
97+
this.output.innerHTML = "0";
98+
}
99+
100+
}
101+
102+
103+
104+
const StartCalc = new Calculator();

‎javaScriptCalculator/style.css

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
body {
10-
background-color: #54C7FD;
10+
background-color: #ececec;
1111
text-align: right;
1212
}
1313

@@ -18,7 +18,7 @@ body {
1818
margin: auto;
1919
margin-top: 30px;
2020
border-radius: 5px;
21-
box-shadow: 0px 6px 80px #45a4d1;
21+
box-shadow: 0px 6px 80px rgba(0, 0, 0, 0.24);
2222
}
2323

2424
.output {
@@ -28,8 +28,8 @@ body {
2828
padding-right: 30px;
2929
font-size: 40px;
3030
color: black;
31-
margin-bottom: 40px;
32-
overflow: hidden;
31+
overflow-x: auto;
32+
overflow-y: hidden;
3333
}
3434

3535
.calBody button {
@@ -42,15 +42,23 @@ body {
4242
transition: 50ms all ease;
4343
outline: none; /* now it won't show the outline on Click */
4444
transform: scale(1);
45+
font-weight: 600;
4546
}
4647

4748

4849
/* hover effect for the buttons */
4950
.calBody button:hover {
50-
background: rgb(221, 221, 221);
51+
background: rgb(234, 244, 255);
5152
}
5253

5354
.calBody button:active {
5455
transform: scale(0.9);
5556
border-radius: 10px;
57+
}
58+
.calBody{
59+
background: rgb(145, 215, 255);
60+
}
61+
62+
#steps{
63+
font-family:monospace
5664
}

0 commit comments

Comments
 (0)