Skip to content

Commit 5d83e04

Browse files
andrewvd31andrewvd31
committed
Files Created and Initialized
1 parent 36eaafd commit 5d83e04

File tree

3 files changed

+181
-0
lines changed

3 files changed

+181
-0
lines changed

‎app.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const clearBtn = document.querySelector('.clear-btn')
2+
const backBtn = document.querySelector('.backsp-btn')
3+
const equalToBtn = document.querySelector('.equal-to')
4+
const btnClick = document.querySelectorAll('.btn')
5+
const inputbtnValue = document.querySelector('.number-box')
6+
7+
btnClick.forEach(myFunction)
8+
9+
equalToBtn.addEventListener('click',evaluateFunction)
10+
11+
backBtn.addEventListener('click',backSpaceFunction)
12+
13+
clearBtn.addEventListener('click',clearFunction)
14+
15+
function buttonFunctionDisable(data){
16+
for (let buttons of btnClick){
17+
buttons.disabled = data
18+
}
19+
}
20+
21+
function evaluateFunction(){
22+
const equalTo = eval(inputbtnValue.value)
23+
inputbtnValue.value = equalTo
24+
buttonFunctionDisable(false)
25+
}
26+
27+
function clearFunction(){
28+
inputbtnValue.value = ""
29+
}
30+
31+
function backSpaceFunction(){
32+
inputbtnValue.value = inputbtnValue.value.slice(0,-1)
33+
buttonFunctionDisable(false)
34+
}
35+
36+
function myFunction(button){
37+
button.addEventListener('click',(e)=>{
38+
const btnClick = e.target.dataset.set
39+
if (btnClick){
40+
inputbtnValue.value += btnClick
41+
}
42+
if(inputbtnValue.value.length === inputbtnValue.maxLength){
43+
buttonFunctionDisable(true)
44+
}
45+
})
46+
}
47+

‎index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Calculator</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
10+
<script src="app.js" defer></script>
11+
</head>
12+
<body>
13+
<div class="calculator-big-screen">
14+
<input type="text" id="number-box" class="number-box" minlength="1" maxlength="15">
15+
<div class="calculator-container">
16+
<button class="clear-btn">AC</button>
17+
<button class="backsp-btn"><i class="fa-solid fa-delete-left"></i></button>
18+
<button class="btn" data-set="%">%</button>
19+
<button class="btn operation-btn" data-set="/">÷</button>
20+
</div>
21+
<div class="calculator-container">
22+
<button class="btn" data-set="1">1</button>
23+
<button class="btn" data-set="2">2</button>
24+
<button class="btn" data-set="3">3</button>
25+
<button class="btn operation-btn" data-set="*">X</button>
26+
</div>
27+
<div class="calculator-container">
28+
<button class="btn" data-set="4">4</button>
29+
<button class="btn" data-set="5">5</button>
30+
<button class="btn" data-set="6">6</button>
31+
<button class="btn operation-btn" data-set="-">-</button>
32+
</div>
33+
<div class="calculator-container">
34+
<button class="btn" data-set="7">7</button>
35+
<button class="btn" data-set="8">8</button>
36+
<button class="btn" data-set="9">9</button>
37+
<button class="btn operation-btn" data-set="+">+</button>
38+
</div>
39+
<div class="calculator-container">
40+
<button class="btn" data-set="0">0</button>
41+
<button class="btn" data-set=".">.</button>
42+
<button class="equal-to">=</button>
43+
</div>
44+
</div>
45+
</body>
46+
</html>

‎styles.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100vh;
12+
background-color: rgb(20, 11, 39);
13+
14+
}
15+
16+
.calculator-big-screen{
17+
width: 30%;
18+
height: 500px;
19+
border-radius: 15px;
20+
background-color: rgb(255, 255, 255);
21+
box-shadow: 0 0 10px rgba(128, 128, 128, 0.608);
22+
}
23+
24+
.number-box{
25+
width: 95%;
26+
height: 100px;
27+
display: block;
28+
border-radius: 15px;
29+
margin: 20px auto;
30+
border: none;
31+
box-shadow: 0 0 7px rgba(128, 128, 128, 0.608);
32+
pointer-events: none;
33+
font-size: 3rem;
34+
text-align: right;
35+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
36+
font-weight: bold;
37+
padding-right: 10px;
38+
}
39+
40+
.calculator-container{
41+
display: flex;
42+
margin: 0 20px;
43+
width: 92%;
44+
justify-content: space-between;
45+
align-items: center;
46+
gap: 30px;
47+
padding: 10px;
48+
}
49+
50+
.btn,.clear-btn,.backsp-btn,.equal-to{
51+
width: 100%;
52+
height: 50px;
53+
border: none;
54+
border-radius: 10px;
55+
background-color: #cbe2f1a5;
56+
box-shadow: 0 0 2px rgba(128, 128, 128, 0.608);
57+
cursor: pointer;
58+
font-size: 1.5rem;
59+
transition: 0.25s;
60+
font-weight: bold;
61+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
62+
}
63+
64+
.btn:hover{
65+
opacity: 0.7;
66+
}
67+
68+
.operation-btn{
69+
background-color: #4B99F7;
70+
color: white;
71+
}
72+
73+
.equal-to{
74+
background-color: #FC3C64;
75+
color: white;
76+
}
77+
78+
@media (min-width: 768px) and (max-width: 1024px){
79+
.calculator-big-screen{
80+
width: 60%;
81+
}
82+
}
83+
84+
@media (max-width: 767px){
85+
.calculator-big-screen{
86+
width: 90%;
87+
}
88+
}

0 commit comments

Comments
 (0)