Skip to content

Commit 2e1aa80

Browse files
MDJAminMDJAmin
committed
feat: improve & CC & favicon & mdjamin
1 parent 2432e57 commit 2e1aa80

File tree

4 files changed

+176
-114
lines changed

4 files changed

+176
-114
lines changed

‎css/style.css‎

Lines changed: 64 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,73 @@
1-
*{
2-
padding: 0;
3-
margin: 0;
4-
box-sizing: border-box;
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
55
}
6-
:root{
7-
--primaryClr:#ffffff;
8-
--secondaryClr:#dddddd;
9-
--thirdClr:#393E46;
10-
--txtClr:#222831;
6+
:root {
7+
--primaryClr: #474747;
8+
--secondaryClr: #dddddd;
9+
--thirdClr: #212121;
10+
--txtClr: #222831;
1111
}
12-
body{
13-
background-color: black;
12+
body {
13+
background-color: #ddd;
1414
}
15-
.calculator{
16-
width: 400px;
17-
margin: 80px auto;
18-
display: flex;
19-
flex-direction: column;
20-
align-items: center;
21-
background-color: var(--thirdClr);
22-
height: 500px;
23-
border-radius: 20px;
24-
padding: 3%;
25-
gap: 5%;
15+
.calculator {
16+
width: 400px;
17+
margin: 80px auto;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
background-color: var(--thirdClr);
22+
height: 500px;
23+
border-radius: 20px;
24+
padding: 3%;
25+
gap: 5%;
2626
}
27-
.calculator .screen{
28-
width: 100%;
29-
height: 18%;
30-
background-color: var(--primaryClr);
31-
border-radius: 5px;
32-
color: var(--txtClr);
33-
padding: 0 5%;
27+
.calculator .screen {
28+
width: 100%;
29+
height: 18%;
30+
background-color: var(--primaryClr);
31+
border-radius: 5px;
32+
color: var(--secondaryClr);
33+
padding: 0 5%;
3434
}
35-
.screen #screen-txt{
36-
width: 100%;
37-
height: 100%;
38-
display: flex;
39-
align-items: center;
40-
font-size: 28px;
41-
overflow: hidden;
42-
font-weight: 600;
43-
font-family: 'Courier New', Courier, monospace;
35+
.screen #screen-txt {
36+
width: 100%;
37+
height: 100%;
38+
display: flex;
39+
align-items: center;
40+
font-size: 28px;
41+
overflow: hidden;
42+
font-weight: 600;
43+
font-family: "Courier New", Courier, monospace;
4444
}
45-
.keys{
46-
width: 100%;
47-
display: flex;
48-
gap:5px;
49-
flex-wrap: wrap;
50-
align-items: center;
51-
justify-content: center;
45+
.keys {
46+
width: 100%;
47+
display: flex;
48+
gap: 5px;
49+
flex-wrap: wrap;
50+
align-items: center;
51+
justify-content: center;
5252
}
53-
.calculator button{
54-
width:6rem;
55-
height: 3.2rem;
56-
border-radius: 5px;
57-
border: none;
58-
outline: none;
59-
background-color: var(--secondaryClr);
60-
color: var(--txtClr);
61-
font-size: 24px;
62-
font-weight: 600;
63-
cursor: pointer;
64-
font-family: 'Courier New', Courier, monospace;
53+
.calculator button {
54+
width: 6rem;
55+
height: 3.2rem;
56+
border-radius: 5px;
57+
border: none;
58+
outline: none;
59+
background-color: var(--secondaryClr);
60+
color: var(--txtClr);
61+
font-size: 24px;
62+
font-weight: 600;
63+
cursor: pointer;
64+
font-family: "Courier New", Courier, monospace;
6565
}
66-
/* .calculator i{
67-
color: var(--txtClr);
68-
font-size: 24px;
69-
font-weight: 600;
70-
} */
71-
/* #point{
72-
position: relative;
66+
.calculator i {
67+
color: var(--txtClr);
68+
font-size: 24px;
69+
font-weight: 600;
70+
}
71+
.btn-opacity {
72+
opacity: 0.5;
7373
}
74-
#point::after{
75-
position: absolute;
76-
font-family: "font awesome 5 free";
77-
content: "\2e";
78-
font-size: 50px;
79-
top: -30%;
80-
left: 0;
81-
transform: translateX(40px);
82-
} */
83-
.btn-opacity{
84-
opacity: .5;
85-
}

‎favicon.png‎

3.99 KB
Loading

‎index.html‎

Lines changed: 73 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,26 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
69
<link
710
rel="stylesheet"
811
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
912
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
1013
crossorigin="anonymous"
1114
referrerpolicy="no-referrer"
1215
/>
13-
<link rel="stylesheet" href="css/style.css">
16+
<link
17+
rel="stylesheet"
18+
href="css/style.css"
19+
/>
20+
<link
21+
rel="shortcut icon"
22+
href="favicon.png"
23+
type="image/x-icon"
24+
/>
1425
<title>Calculator</title>
1526
</head>
1627
<body>
@@ -19,16 +30,66 @@
1930
<p id="screen-txt"></p>
2031
</div>
2132
<div class="keys">
22-
<button class="num" id="1">1</button>
23-
<button class="num" id="2">2</button>
24-
<button class="num" id="3">3</button>
25-
<button class="num" id="4">4</button>
26-
<button class="num" id="5">5</button>
27-
<button class="num" id="6">6</button>
28-
<button class="num" id="7">7</button>
29-
<button class="num" id="8">8</button>
30-
<button class="num" id="9">9</button>
31-
<button class="num" id="0">0</button>
33+
<button
34+
class="num"
35+
id="1"
36+
>
37+
1
38+
</button>
39+
<button
40+
class="num"
41+
id="2"
42+
>
43+
2
44+
</button>
45+
<button
46+
class="num"
47+
id="3"
48+
>
49+
3
50+
</button>
51+
<button
52+
class="num"
53+
id="4"
54+
>
55+
4
56+
</button>
57+
<button
58+
class="num"
59+
id="5"
60+
>
61+
5
62+
</button>
63+
<button
64+
class="num"
65+
id="6"
66+
>
67+
6
68+
</button>
69+
<button
70+
class="num"
71+
id="7"
72+
>
73+
7
74+
</button>
75+
<button
76+
class="num"
77+
id="8"
78+
>
79+
8
80+
</button>
81+
<button
82+
class="num"
83+
id="9"
84+
>
85+
9
86+
</button>
87+
<button
88+
class="num"
89+
id="0"
90+
>
91+
0
92+
</button>
3293
<button id="plus">+</button>
3394
<button id="minus">-</button>
3495
<button id="Multiply">*</button>

‎js/script.js‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,46 @@
1-
"use strict";
2-
const numEls = document.querySelectorAll(".num");
3-
const screenEl = document.querySelector("#screen-txt");
4-
const dotEl = document.querySelector("#point");
5-
const plusEl = document.querySelector("#plus");
6-
const minusEl = document.querySelector("#minus");
7-
const multiplyEl = document.querySelector("#Multiply");
8-
const divideEl = document.querySelector("#divide");
9-
const clearEl = document.querySelector("#clear");
10-
const equalEl = document.querySelector("#equal");
11-
const btnEls = document.querySelectorAll("button");
1+
const screenTxt = document.getElementById("screen-txt");
2+
const numButtons = document.querySelectorAll(".num");
3+
const operators = document.querySelectorAll("#plus, #minus, #Multiply, #divide");
4+
const pointBtn = document.getElementById("point");
5+
const equalBtn = document.getElementById("equal");
6+
const clearBtn = document.getElementById("clear");
127

13-
for (let i = 0; i < btnEls.length; i++) {
14-
btnEls[i].addEventListener("mousedown", () => {
15-
btnEls[i].style.opacity = ".5";
16-
});
17-
btnEls[i].addEventListener("mouseup", () => {
18-
btnEls[i].style.opacity = "1";
8+
let currentInput = "";
9+
let result = null;
10+
11+
numButtons.forEach((btn) => {
12+
btn.addEventListener("click", () => {
13+
currentInput += btn.innerText;
14+
screenTxt.textContent = currentInput;
1915
});
20-
btnEls[i].addEventListener("click", () => {
21-
if (btnEls[i] != equalEl) {
22-
screenEl.innerHTML += btnEls[i].innerHTML;
23-
}
16+
});
17+
18+
operators.forEach((btn) => {
19+
btn.addEventListener("click", () => {
20+
if (currentInput === "") return;
21+
currentInput += ` ${btn.innerText} `;
22+
screenTxt.textContent = currentInput;
2423
});
25-
}
24+
});
25+
26+
pointBtn.addEventListener("click", () => {
27+
currentInput += ".";
28+
screenTxt.textContent = currentInput;
29+
});
2630

27-
clearEl.addEventListener("click", () => {
28-
screenEl.innerHTML = "";
31+
equalBtn.addEventListener("click", () => {
32+
try {
33+
result = eval(currentInput);
34+
screenTxt.textContent = result;
35+
currentInput = result.toString();
36+
} catch (error) {
37+
screenTxt.textContent = "خطا";
38+
currentInput = "";
39+
}
2940
});
3041

31-
equalEl.addEventListener("click", () => {
32-
screenEl.innerHTML = eval(screenEl.innerHTML);
42+
clearBtn.addEventListener("click", () => {
43+
currentInput = "";
44+
result = null;
45+
screenTxt.textContent = "";
3346
});

0 commit comments

Comments
 (0)