Skip to content

Commit 15e6ded

Browse files
Akshat162001Akshat162001
committed
Completely Resolved The issue: missing button! #16 
1 parent 0fe39eb commit 15e6ded

5 files changed

Lines changed: 82 additions & 17 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,12 @@
22

33
A simple JavaScript Calculator made by [Harsh Trivedi](https://harsh98trivedi.github.io)
44

5+
<h1>Contributors</h1>
6+
Contributors are always welcome to make contribution in this project and work on the available Issues...
7+
<br>
8+
9+
<h3>Happy Coding...</h3>
10+
511
![Simple Javascript Calculator](https://raw.githubusercontent.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg)
12+
13+

‎calc.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ for (item of buttons) {
3333
isSign = true;
3434
} else if (buttonText == "=") {
3535
checkForBracketMulti(); // automatically evaluates if no brackets
36-
//
36+
3737
} else if (isNumber(buttonText)) {
3838
if (flag == 1) {
3939
screenValue = buttonText;
@@ -57,9 +57,7 @@ for (item of buttons) {
5757
}
5858

5959
document.addEventListener("keydown", function (event) {
60-
if (
61-
event.key <= 9
62-
) {
60+
if (event.key <= 9) {
6361
screenValue += event.key;
6462
screen.value = screenValue;
6563
isSign = false;
@@ -144,3 +142,4 @@ function checkForBracketMulti() {
144142
}
145143
flag = 1;
146144
}
145+

‎hist.js‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ let historybutton = document.getElementById('historybutton');
22
let history = document.getElementById('history');
33
let bar1 = document.getElementById('bar1');
44
let bar2 = document.getElementById('bar2');
5+
let dis=document.getElementById('answer');
56

67
function showHistory() {
78
let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || [];
@@ -15,7 +16,7 @@ function showHistory() {
1516
let historyItem = document.createElement('div');
1617
historyItem.innerHTML = "There's no history yet.";
1718
historyItem.className = 'historyelement his';
18-
historyItem.style.fontSize = '30px';
19+
historyItem.style.fontSize = '25px';
1920
history.appendChild(historyItem);
2021
} else {
2122
for (let index = len-1; index >=0; index--) {
@@ -27,16 +28,31 @@ function showHistory() {
2728
if (index > 0) history.appendChild(document.createElement('hr'));
2829
}
2930
}
31+
3032
history.style.display = 'block';
3133
}
3234

3335
historybutton.addEventListener('click', showHistory);
3436

37+
function clearAll(){
38+
dis.value=''
39+
}
40+
3541
function hide(){
3642
history.style.display = 'none';
3743
bar1.style.display = 'none';
3844
bar2.style.display = 'none';
3945
}
46+
function deleteLastEntry() {
47+
let calcHistory = JSON.parse(localStorage.getItem("calcHistory")) || [];
48+
if (calcHistory.length > 0) {
49+
calcHistory.pop();
50+
localStorage.setItem("calcHistory", JSON.stringify(calcHistory));
51+
showHistory(); // It open each time when u click on CE if u dont want then u can remove it ....
52+
}
53+
}
54+
55+
4056

4157
bar1.addEventListener('click', hide);
4258
bar2.addEventListener('click', hide);

‎index.html‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
<meta property="twitter:image:src"
5959
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/master/meta.jpg" />
6060
<meta property="twitter:image" content="Calculator by Harsh Trivedi" />
61+
6162
<link rel='icon' type='image/x-icon' href='favicon.png' />
6263
</head>
6364

@@ -69,14 +70,36 @@
6970
</label>
7071
</div>
7172
<div class="container">
72-
<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href="" onclick="location.reload();">CALCULATOR</a><img id="historybutton" src="history.png"></h1 >
73+
<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 1.25rem;" href="" onclick="location.reload();">CALCULATOR</a>
74+
<img id="historybutton" src="history.png"> </h1>&nbsp;&nbsp;
75+
76+
77+
78+
79+
<!-- </h1 > -->
7380
<div class="calculator">
7481
<input type="text" name="screen" id="answer" readonly>
7582
<table>
7683
<tr>
7784
<td><button>(</button></td>
7885
<td><button>)</button></td>
79-
<td><button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;">C</button></td>
86+
<!-- <td><button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;" onclick="deleteLastEntry()">C</button></td> -->
87+
<td>
88+
<div class="row">
89+
<div class="col">
90+
<button style="background-color: #f01600; font-weight: bold; color: #ecf0f1; width: 140px;font-size: 35px;" onclick="clearAll()">C</button>
91+
</div>
92+
<div class="col">
93+
<button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;width: 140px;font-size: 35px;" onclick="deleteLastEntry()">CE</button>
94+
</div>
95+
</div>
96+
97+
</td>
98+
99+
100+
<!-- <td colspan="2"><button style="background-color: #f01600; font-weight: bold; color: #ecf0f1;" onclick="deleteLastEntry()">C</button></td>
101+
</td> -->
102+
80103
<td><button>%</button></td>
81104
</tr>
82105
<tr>
@@ -115,7 +138,7 @@ <h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href
115138
</div>
116139
<div id="turn">
117140
PLEASE TURN YOUR DEVICE
118-
</div>
141+
</div>
119142
</body>
120143
<script src="hist.js"></script>
121144
<script src="calc.js"></script>

‎style.css‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ html {
88
background-color: rgb(23, 24, 37);
99
font-family: 'Fjalla One', sans-serif;
1010
animation: fadein 1.5s;
11+
font-family: 'Times New Roman', Times, serif;
1112
}
12-
13-
@keyframes fadein {
13+
@keyframes fadein {
1414
0% {
1515
opacity: 0%;
1616
}
@@ -23,7 +23,7 @@ h1 {
2323
font-size: 2.5rem;
2424
font-weight: 500;
2525
margin-bottom: 0;
26-
}
26+
}
2727

2828
input {
2929
background-color: rgba(52, 73, 94, 0.5);
@@ -32,7 +32,7 @@ input {
3232
text-align: right;
3333
border: none;
3434
font-size: 3rem;
35-
width: 78vw;
35+
width: 80vw;
3636
margin-bottom: 0.5rem;
3737
border-radius: 0.5rem;
3838
padding: 0.5rem 1.5rem;
@@ -67,7 +67,7 @@ button {
6767
padding: 0.5rem 0;
6868
margin: 0.25vmax;
6969
font-size: 2rem;
70-
border-radius: 0.5rem;
70+
border-radius: 1rem;
7171
-moz-transition: all ease 0.5s;
7272
-webkit-transition: all 0.5s ease;
7373
transition: all 0.5s ease;
@@ -127,7 +127,7 @@ a:hover{
127127
height: 80vh;
128128
top:10vh;
129129
background-color: white;
130-
border: 2px solid black;
130+
border: 6px solid black;
131131
border-radius: 10px;
132132
display: none;
133133
/* overflow-y: scroll; */
@@ -171,8 +171,9 @@ a:hover{
171171

172172
.toggle-container {
173173
position: absolute;
174-
top: 1rem;
175-
left: 1rem;
174+
top: 4rem;
175+
left: 3rem;
176+
176177
}
177178

178179
.toggle-switch {
@@ -212,16 +213,20 @@ a:hover{
212213
-webkit-transition: .4s;
213214
transition: .4s;
214215
border-radius: 50%;
216+
border-radius: 10px;
215217
}
216218

217219
input:checked + .toggle-slider {
218220
background-color: #2a2c2e;
221+
border-radius: 10px;
219222
}
220223

221224
input:focus + .toggle-slider {
222225
box-shadow: 0 0 1px #2b2c2d;
226+
border-radius: 10px;
223227
}
224228

229+
225230
input:checked + .toggle-slider:before {
226231
-webkit-transform: translateX(26px);
227232
-ms-transform: translateX(26px);
@@ -232,28 +237,42 @@ input:checked + .toggle-slider:before {
232237

233238
.dark-mode {
234239
background-color: black;
240+
border-radius: 10px;
235241
color: #fff;
236242
}
237243

238244
.dark-mode body,
239245
.dark-mode html {
240246
background-color: black;
247+
border-radius: 10px;
248+
241249
}
242250

243251
.dark-mode .calculator {
244252
background-color: black;
253+
border-radius: 10px;
254+
245255
}
246256

247257
.dark-mode table {
248258
color: #fff;
259+
border-radius: 10px;
249260
}
250261

251262
.dark-mode button {
252263
background-color: #555;
253264
color: #fff;
265+
border-radius: 10px;
254266
}
255267

256268

257269
.dark-mode a {
258270
color: #fff;
259-
}
271+
border-radius: 10px;
272+
}
273+
274+
.row{
275+
display: flex;
276+
font-size: 1rem;
277+
}
278+

0 commit comments

Comments
 (0)