Skip to content

Commit 32ed8c3

Browse files
bilalahmed804bilalahmed804
committed
Calculator
0 parents  commit 32ed8c3

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed

‎CSS/style.css

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
}
6+
.header{
7+
width: 100%;
8+
height: 100vh;
9+
background: #e3f9ff;
10+
justify-content: center;
11+
}
12+
.text_center{
13+
text-align: center;
14+
font-family: "Roboto", sans-serif;
15+
font-weight: 500;
16+
font-style: normal;
17+
color: #3a4452;
18+
}
19+
.containor{
20+
background: #3a4452;
21+
padding: 20px;
22+
border-radius: 10px;
23+
}
24+
.max_auto{
25+
margin: auto;
26+
}
27+
.flex{
28+
display: flex;
29+
align-items: center;
30+
}
31+
.flex-col{
32+
flex-direction: column;
33+
}
34+
.calculator{
35+
display: flex;
36+
align-items: center;
37+
margin-top: 3%;
38+
}
39+
.button{
40+
border: 0;
41+
outline: 0;
42+
width: 60px ;
43+
height: 60px;
44+
border-radius: 10px;
45+
box-shadow: -8px -8px 15px rgba(255,255,255,0.1),5px 5px 15px rgba(0,0,0,0.2);
46+
background: transparent;
47+
font-size: 20px ;
48+
color: #fff;
49+
cursor: pointer;
50+
margin: 10px;
51+
}
52+
.row{
53+
display: flex;
54+
justify-content: center;
55+
}
56+
.row .input{
57+
text-align: right;
58+
flex: 1;
59+
font-size: 24px;
60+
box-shadow: none;
61+
background-color: #3a4452;
62+
color: white;
63+
border:2px solid #e3f9ff;
64+
border-radius: 5px;
65+
margin-bottom: 20px;
66+
padding: 6px 2px;
67+
}

‎JS/app.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function getNumber(num){
2+
var display = document.getElementById("display");
3+
display.value += num;
4+
}
5+
6+
function clearResult(){
7+
var display = document.getElementById("display");
8+
display.value = ""
9+
}
10+
11+
function onebyone(){
12+
var display =document.getElementById("display");
13+
display.value = display.value.slice(0, display.value.length -1);
14+
}
15+
16+
function getSqure(){
17+
var display = document.getElementById("display")
18+
var curentValue = display.value
19+
var squreValue = curentValue * curentValue
20+
display.value = squreValue
21+
}
22+
23+
function getResult(){
24+
25+
var display = document.getElementById("display");
26+
var num = display.value;
27+
var result;
28+
29+
var num$ = num.split(/[+\-*/]/);
30+
var operator = num.match(/[+\-*/]/);
31+
32+
if (operator && num$.length === 2) {
33+
var num1 = parseFloat(num$[0]);
34+
var num2 = parseFloat(num$[1]);
35+
36+
if (operator[0] === '+') {
37+
result = num1 + num2;
38+
} else if (operator[0] === '-') {
39+
result = num1 - num2;
40+
} else if (operator[0] === '*') {
41+
result = num1 * num2;
42+
} else if (operator[0] === '/') {
43+
if (num2 !== 0) {
44+
result = num1 / num2;
45+
} else {
46+
result = 'Error: Division by zero';
47+
}
48+
} else {
49+
result = 'Error: Invalid operator';
50+
}
51+
} else {
52+
result = 'Error: Invalid ';
53+
}
54+
55+
display.value = result;
56+
}
57+
58+
59+

‎index.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
9+
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
10+
crossorigin="anonymous"
11+
referrerpolicy="no-referrer"
12+
/>
13+
<link rel="stylesheet" href="CSS/style.css" />
14+
<title>Calculate me! - A calculator made my me</title>
15+
</head>
16+
<body>
17+
<div class="header">
18+
<h1 class="text_center">Welcome to Calculate me!</h1>
19+
<div class="calculator">
20+
<div class="containor flex flex-col bg_color max_auto">
21+
<div class="row">
22+
<input class="input" type="text" id="display" readonly>
23+
</div>
24+
<div class="row">
25+
<button class="button" onclick="getNumber('%')">%</button>
26+
<button class="button" onclick="getSqure('2')">&#x221A;</button>
27+
<button class="button" onclick="clearResult('CE')">CE</button>
28+
<button class="button" onclick="onebyone('C')">C</button>
29+
</div>
30+
<div class="row">
31+
<button class="button" onclick="getNumber('7')">7</button>
32+
<button class="button" onclick="getNumber('8')">8</button>
33+
<button class="button" onclick="getNumber('9')">9</button>
34+
<button class="button" onclick="getNumber('-')"><i class="fa-solid fa-minus"></i></button>
35+
</div>
36+
<div class="row">
37+
<button class="button" onclick="getNumber('4')">4</button>
38+
<button class="button" onclick="getNumber('5')">5</button>
39+
<button class="button" onclick="getNumber('6')">6</button>
40+
<button class="button" onclick="getNumber('/')"><i class="fa-solid fa-divide"></i></button>
41+
</div>
42+
<div class="row">
43+
<button class="button" onclick="getNumber('1')">1</button>
44+
<button class="button" onclick="getNumber('2')">2</button>
45+
<button class="button" onclick="getNumber('3')">3</button>
46+
<button class="button" onclick="getNumber('*')"><i class="fa-solid fa-xmark"></i></button>
47+
</div>
48+
<div class="row">
49+
<button class="button" onclick="getNumber('.')">.</button>
50+
<button class="button" onclick="getNumber('0')">0</button>
51+
<button class="button" onclick="getResult('=')"><i class="fa-solid fa-equals"></i></button>
52+
<button class="button" onclick="getNumber('+')"><i class="fa-solid fa-plus"></i></button>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</body>
58+
<script src="JS/app.js"></script>
59+
</html>
60+

0 commit comments

Comments
 (0)