Skip to content

Commit 984f86c

Browse files
atomic-guyatomic-guy
committed
Simple JavaScript Calculator
0 parents  commit 984f86c

4 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
* {
2+
text-align: center;
3+
color: white;
4+
font-family: Arial, Helvetica, sans-serif;
5+
font-size: 36px;
6+
border-radius: 5px;
7+
}
8+
9+
body {
10+
padding-top: 15px;
11+
}
12+
13+
.kalkulator {
14+
height: 600px;
15+
width: 400px;
16+
background-color: beige;
17+
margin-right: auto;
18+
margin-left: auto;
19+
display: flex;
20+
padding-top: 7.5px;
21+
padding-bottom: 7.5px;
22+
justify-content: center;
23+
align-content: center;
24+
align-items: center;
25+
flex-wrap: wrap;
26+
box-shadow: 0px 2px 4px rgba(000, 000, 000, 0.4),
27+
inset 0px 0px 2px rgba(255, 255, 255, 0.7);
28+
}
29+
30+
[name="przycisk"],
31+
[name="przycisk-delete"],
32+
[name="przycisk-wynik"] {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
box-shadow: 1px 2px 5px rgba(000, 000, 000, 0.4),
37+
inset 0px 0px 2px rgba(255, 255, 255, 0.7);
38+
box-sizing: border-box;
39+
}
40+
41+
[name="przycisk"]:hover,
42+
[name="przycisk-delete"]:hover,
43+
[name="przycisk-wynik"]:hover {
44+
border: 2px solid white;
45+
}
46+
47+
.wyswietlacz {
48+
width: 380px;
49+
height: 92.5px;
50+
background-color: dimgray;
51+
margin: 2.5px;
52+
display: flex;
53+
align-items: center;
54+
justify-content: flex-end;
55+
box-shadow: 1px 2px 5px rgba(000, 000, 000, 0.4),
56+
inset 0px 0px 2px rgba(255, 255, 255, 0.7);
57+
}
58+
59+
#wyswietlacz-tekst {
60+
padding-right: 20px;
61+
font-family: 'Economica', sans-serif;
62+
font-size: 48px;
63+
}
64+
65+
66+
.duzy-przycisk {
67+
height: 92.5px;
68+
width: 187.5px;
69+
background-color: black;
70+
margin: 2.5px;
71+
}
72+
73+
.maly-przycisk {
74+
height: 92.5px;
75+
width: 91.25px;
76+
background-color: black;
77+
color: white;
78+
margin: 2.5px;
79+
}
80+
81+
#delete {
82+
background-color: dodgerblue;
83+
}
84+
85+
#dzielenie,
86+
#mnozenie,
87+
#dodawanie,
88+
#odejmowanie,
89+
#pierwiastek {
90+
background-color: forestgreen;
91+
}
92+
93+
#wynik {
94+
background-color: crimson;
95+
}

‎img/jscalulator.png‎

54.6 KB
Loading

‎index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Kalkulator</title>
7+
<link href="https://fonts.googleapis.com/css?family=Economica" rel="stylesheet">
8+
<link rel="stylesheet" href="css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="kalkulator" id="kalkulator">
13+
<div class="wyswietlacz" id="wyswietlacz"><div id="wyswietlacz-tekst"></div></div>
14+
<div class="duzy-przycisk" name="przycisk-delete" id="delete">Del</div>
15+
<div class="maly-przycisk" name="przycisk" id="pierwiastek">&Sqrt;</div>
16+
<div class="maly-przycisk" name="przycisk" id="dodawanie">+</div>
17+
<div class="maly-przycisk" name="przycisk" id="7">7</div>
18+
<div class="maly-przycisk" name="przycisk" id="8">8</div>
19+
<div class="maly-przycisk" name="przycisk" id="9">9</div>
20+
<div class="maly-przycisk" name="przycisk" id="odejmowanie">-</div>
21+
<div class="maly-przycisk" name="przycisk" id="4">4</div>
22+
<div class="maly-przycisk" name="przycisk" id="5">5</div>
23+
<div class="maly-przycisk" name="przycisk" id="6">6</div>
24+
<div class="maly-przycisk" name="przycisk" id="mnozenie">*</div>
25+
<div class="maly-przycisk" name="przycisk" id="1">1</div>
26+
<div class="maly-przycisk" name="przycisk" id="2">2</div>
27+
<div class="maly-przycisk" name="przycisk" id="3">3</div>
28+
<div class="maly-przycisk" name="przycisk" id="dzielenie">/</div>
29+
<div class="duzy-przycisk" name="przycisk" id="0">0</div>
30+
<div class="maly-przycisk" name="przycisk" id="przecinek">.</div>
31+
<div class="maly-przycisk" name="przycisk-wynik" id="wynik">=</div>
32+
</div>
33+
<script src="js/main.js"></script>
34+
</body>
35+
36+
</html>

‎js/main.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
let dzialanieLista = [];
2+
3+
function wyswietl() {
4+
let wyswietlacz = document.getElementById('wyswietlacz-tekst');
5+
let dzialanie = wyswietlacz.textContent;
6+
let ost = dzialanie.slice(-1)
7+
let getId = this.id;
8+
let wartoscLubDzialanie = "";
9+
if (getId == "1") {
10+
wartoscLubDzialanie = 1;
11+
} else if (getId == "2") {
12+
wartoscLubDzialanie = 2;
13+
} else if (getId == "3") {
14+
wartoscLubDzialanie = 3;
15+
} else if (getId == "4") {
16+
wartoscLubDzialanie = 4;
17+
} else if (getId == "5") {
18+
wartoscLubDzialanie = 5;
19+
} else if (getId == "6") {
20+
wartoscLubDzialanie = 6;
21+
} else if (getId == "7") {
22+
wartoscLubDzialanie = 7;
23+
} else if (getId == "8") {
24+
wartoscLubDzialanie = 8;
25+
} else if (getId == "9") {
26+
wartoscLubDzialanie = 9;
27+
} else if (getId == "dodawanie") {
28+
if (ost == "+" || ost == "-" || ost == "*" || ost == "/" || ost == ".") {
29+
wyswietlacz.textContent = wyswietlacz.textContent.slice(0, -1);
30+
};
31+
wartoscLubDzialanie = "+";
32+
} else if (getId == "odejmowanie") {
33+
if (ost == "+" || ost == "-" || ost == "*" || ost == "/" || ost == ".") {
34+
wyswietlacz.textContent = wyswietlacz.textContent.slice(0, -1);
35+
};
36+
wartoscLubDzialanie = "-";
37+
} else if (getId == "mnozenie") {
38+
if (ost == "+" || ost == "-" || ost == "*" || ost == "/" || ost == ".") {
39+
wyswietlacz.textContent = wyswietlacz.textContent.slice(0, -1);
40+
};
41+
wartoscLubDzialanie = "*";
42+
} else if (getId == "dzielenie") {
43+
if (ost == "+" || ost == "-" || ost == "*" || ost == "/" || ost == ".") {
44+
wyswietlacz.textContent = wyswietlacz.textContent.slice(0, -1);
45+
};
46+
wartoscLubDzialanie = "/";
47+
} else if (getId == "pierwiastek") {
48+
wyswietlacz.textContent = Math.sqrt(wyswietlacz.textContent);
49+
dzialanieLista.length = 0;
50+
dzialanieLista.push(wyswietlacz.textContent);
51+
} else if (getId == "0") {
52+
wartoscLubDzialanie = 0;
53+
} else if (getId == "przecinek") {
54+
if (ost == "+" || ost == "-" || ost == "*" || ost == "/" || ost == ".") {
55+
wyswietlacz.textContent = wyswietlacz.textContent.slice(0, -1);
56+
};
57+
if (dzialanieLista[dzialanieLista.length - 1] == '.'){
58+
dzialanieLista.splice(dzialanieLista.length - 1, 1);
59+
};
60+
wartoscLubDzialanie = ".";
61+
}
62+
dzialanieLista.push(wartoscLubDzialanie);
63+
wyswietlacz.textContent += wartoscLubDzialanie;
64+
console.log(dzialanieLista);
65+
let wyswietlaczLength = wyswietlacz.textContent.length;
66+
console.log(wyswietlaczLength);
67+
if (wyswietlaczLength > 17) {
68+
wyswietlacz.textContent = wyswietlacz.textContent.slice(-17);
69+
}
70+
}
71+
72+
function czysc() {
73+
let wyswietlacz = document.getElementById('wyswietlacz-tekst');
74+
wyswietlacz.innerHTML = "";
75+
dzialanieLista.length = 0;
76+
}
77+
78+
function oblicz() {
79+
console.log("lista: " + dzialanieLista);
80+
let dzialanie = dzialanieLista.join("");
81+
let wyswietlacz = document.getElementById('wyswietlacz-tekst');
82+
console.log("dzialania = " + dzialanie + ", " + typeof dzialanie);
83+
let wynik = eval(dzialanie);
84+
console.log(dzialanie);
85+
console.log(wynik);
86+
wyswietlacz.innerHTML = "";
87+
wyswietlacz.textContent = wynik.toPrecision(12);
88+
dzialanieLista.length = 0;
89+
dzialanieLista.push(wynik);
90+
}
91+
92+
document.getElementById("0").onclick = wyswietl;
93+
document.getElementById("1").onclick = wyswietl;
94+
document.getElementById("2").onclick = wyswietl;
95+
document.getElementById("3").onclick = wyswietl;
96+
document.getElementById("4").onclick = wyswietl;
97+
document.getElementById("5").onclick = wyswietl;
98+
document.getElementById("6").onclick = wyswietl;
99+
document.getElementById("7").onclick = wyswietl;
100+
document.getElementById("8").onclick = wyswietl;
101+
document.getElementById("9").onclick = wyswietl;
102+
document.getElementById("dodawanie").onclick = wyswietl;
103+
document.getElementById("mnozenie").onclick = wyswietl;
104+
document.getElementById("dzielenie").onclick = wyswietl;
105+
document.getElementById("odejmowanie").onclick = wyswietl;
106+
document.getElementById("przecinek").onclick = wyswietl;
107+
document.getElementById("pierwiastek").onclick = wyswietl;
108+
document.getElementById("delete").onclick = czysc;
109+
document.getElementById("wynik").onclick = oblicz;

0 commit comments

Comments
 (0)