Skip to content

Commit 87e69cd

Browse files
thinkswellthinkswell
authored
Merge pull request #1194 from bhpranit08/Calculator-bhpranit08
Calculator bhpranit08
2 parents d65dbca + 4ba147c commit 87e69cd

File tree

5 files changed

+222
-0
lines changed

5 files changed

+222
-0
lines changed

‎Calculator/bhpranit08/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Calculator
2+
- A simple calculator using HTML, CSS, and JS <br>
3+
- It can calculate some of the basic operations like addition, subtraction, multiplication, and division. <br>
4+
- It has validaton to not let the user enter more than one decimal point in one number. <br>
5+
- It has validaton to not let the user enter symbols (+, &divide;, &minus;, &times;) right after one another. <br>
6+
7+
## Built using:
8+
9+
- HTML
10+
- CSS
11+
- Javascript
12+
13+
## Screenshot
14+
![Screenshot](images/screenshot.png)

‎Calculator/bhpranit08/images/screenshot.png‎

12 KB
Loading

‎Calculator/bhpranit08/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="./style.css">
7+
<title>Calculator</title>
8+
</head>
9+
<body>
10+
<div class="calculator">
11+
<h1>The Calculator</h1>
12+
<input type="text" disabled class="input-box" id="input-el">
13+
<input type="text" hidden class="input-box" id="real-input-el">
14+
<div class="row">
15+
<button class="mega-btn" onclick="clearScreen()">AC</button>
16+
<button class="mega-btn" onclick="deleteEl()">DEL</button>
17+
</div>
18+
<div class="row">
19+
<button onclick="addItem('7')" class="num-btn">7</button>
20+
<button onclick="addItem('8')" class="num-btn">8</button>
21+
<button onclick="addItem('9')" class="num-btn">9</button>
22+
<button onclick="addItem('+')" class="action-btn">+</button>
23+
</div>
24+
<div class="row">
25+
<button onclick="addItem('4')" class="num-btn">4</button>
26+
<button onclick="addItem('5')" class="num-btn">5</button>
27+
<button onclick="addItem('6')" class="num-btn">6</button>
28+
<button onclick="addItem('-')" class="action-btn">&minus;</button>
29+
</div>
30+
<div class="row">
31+
<button onclick="addItem('1')" class="num-btn">1</button>
32+
<button onclick="addItem('2')" class="num-btn">2</button>
33+
<button onclick="addItem('3')" class="num-btn">3</button>
34+
<button onclick="addItem('*')" class="action-btn">&times;</button>
35+
</div>
36+
<div class="row">
37+
<button onclick="addItem('0')" class="num-btn">0</button>
38+
<button onclick="addItem('.')" class="num-btn">.</button>
39+
<button onclick="addItem('/')" class="action-btn">&divide;</button>
40+
<button onclick="equal()" class="action-btn">=</button>
41+
</div>
42+
</div>
43+
<script src="./script.js"></script>
44+
</body>
45+
</html>

‎Calculator/bhpranit08/script.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const addItem = (item) => {
2+
const inputEl = document.getElementById("input-el")
3+
const realInput = document.getElementById("real-input-el")
4+
5+
const specials = ["*", "/", "-", "+"]
6+
const currentValue = inputEl.value
7+
8+
const replacements = {
9+
"*": "×",
10+
"-": "−",
11+
"/": "÷",
12+
"+": "+",
13+
"+": "+",
14+
}
15+
16+
if(specials.includes(item)) {
17+
inputEl.value += replacements[item]
18+
realInput.value += item
19+
return
20+
}
21+
22+
if (item === '.') {
23+
const numberSegments = currentValue.split(/[\*\+\-\/]/)
24+
const currentSegment = numberSegments.at(-1)
25+
if (currentSegment.includes('.')) {
26+
return;
27+
}
28+
}
29+
30+
const lastChar = currentValue.slice(-1)
31+
if (specials.includes(item) && specials.includes(lastChar)) {
32+
return
33+
}
34+
35+
realInput.value += item
36+
inputEl.value += item
37+
}
38+
39+
const clearScreen = () => {
40+
document.getElementById("input-el").value = ""
41+
document.getElementById("real-input-el").value = ""
42+
}
43+
44+
const deleteEl = () => {
45+
const inputEl = document.getElementById("input-el")
46+
const realInput = document.getElementById("real-input-el")
47+
inputEl.value = inputEl.value.slice(0, -1)
48+
realInput.value = realInput.value.slice(0, -1)
49+
}
50+
51+
const equal = () => {
52+
const realInput = document.getElementById("real-input-el")
53+
const inputEl = document.getElementById("input-el")
54+
try {
55+
realInput.value = eval(realInput.value)
56+
inputEl.value = realInput.value
57+
} catch (err) {
58+
realInput.value = "Error"
59+
inputEl.value = "Error"
60+
}
61+
}

‎Calculator/bhpranit08/style.css‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
height: 100%;
11+
}
12+
13+
body {
14+
width: 100%;
15+
height: 100%;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
font-family: 'Roboto', sans-serif;
20+
}
21+
22+
.calculator {
23+
24+
min-width: 20%;
25+
height: 100%;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
flex-direction: column;
30+
gap: 4px;
31+
}
32+
33+
.row {
34+
display: flex;
35+
align-items: center;
36+
width: 100%;
37+
justify-content: center;
38+
gap: 2px;
39+
}
40+
41+
input {
42+
width: 100%;
43+
border: 2px solid rgb(52, 216, 52);
44+
border-radius: 0.3rem;
45+
background-color: rgba(52, 216, 52, 0.527);
46+
height: 7%;
47+
font-size: 2rem;
48+
text-align: right;
49+
padding-right: 4px;
50+
color: black;
51+
}
52+
53+
button {
54+
width: 100%;
55+
height: 3rem;
56+
transition: transform 0.1s ease-in-out;
57+
}
58+
59+
button:active {
60+
transform: scale(0.9);
61+
}
62+
63+
.num-btn {
64+
background-color: rgba(163, 88, 218, 0.527);
65+
border: 2px solid rgb(162, 88, 214);
66+
color: rgb(162, 88, 214);
67+
border-radius: 0.14rem;
68+
font-size: 1.4rem;
69+
}
70+
71+
.num-btn:active {
72+
background-color: rgb(81, 41, 110);
73+
border: 2px solid rgb(81, 41, 110);
74+
color: white;
75+
}
76+
77+
.action-btn {
78+
background-color: rgba(51, 104, 173, 0.527);
79+
border: 2px solid rgb(51, 104, 173);
80+
color: rgb(51, 104, 173);
81+
border-radius: 0.15rem;
82+
font-size: 1.5rem;
83+
}
84+
85+
.action-btn:active {
86+
border: 2px solid rgb(35, 74, 124);
87+
background-color: rgb(35, 74, 124);
88+
color: white;
89+
}
90+
91+
.mega-btn {
92+
background-color: rgba(233, 171, 55, 0.527);
93+
border: 2px solid rgb(233, 171, 55);
94+
border-radius: 0.15rem;
95+
font-size: 1rem;
96+
color: black;
97+
}
98+
99+
.mega-btn:active {
100+
background-color: rgb(233, 171, 55);
101+
color: black;
102+
}

0 commit comments

Comments
 (0)