Skip to content

Commit d487ff4

Browse files
rudreshmodirudreshmodi
authored
Add files via upload
1 parent d554a78 commit d487ff4

File tree

10 files changed

+966
-0
lines changed

10 files changed

+966
-0
lines changed

‎assets/avatar.png‎

134 KB
Loading

‎assets/calicon.svg‎

Lines changed: 43 additions & 0 deletions
Loading

‎assets/font/octicon.eot‎

6.11 KB
Binary file not shown.

‎assets/font/octicon.ttf‎

5.94 KB
Binary file not shown.

‎assets/font/octicon.woff‎

3.42 KB
Binary file not shown.

‎assets/qrcode.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/wave.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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+
<link rel="stylesheet" href="style.css">
8+
<link href='//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
9+
<link rel="icon" type="image/x-icon" class="site-favicon" href="assets/calicon.svg" />
10+
<title>Calculator</title>
11+
</head>
12+
<body oncontextmenu="return false;">
13+
<h1> Calculator </h1>
14+
<div class="bg"></div>
15+
<div class="container">
16+
<div class="calculator dark">
17+
<div class="theme-toggler active">
18+
<i class="sun"></i>
19+
</div>
20+
<di class="display-screen">
21+
<div id="display"></div>
22+
</di>
23+
<div class="buttons">
24+
<table>
25+
<tr> <!-- FIRST ROW OF BUTTONS -->
26+
<td><button class="btn-operator" id="clear">AC</button></td>
27+
<td><button class="btn-operator" id="(">(</button></td>
28+
<td><button class="btn-operator" id=")">)</button></td>
29+
<td><button class="btn-operator" id="%">%</button></td>
30+
<td><button class="btn-operator" id="backspace"><-</button></td>
31+
</tr>
32+
<tr> <!-- SECOND ROW OF BUTTONS -->
33+
<td><button class="btn-number" id="7">7</button></td>
34+
<td><button class="btn-number" id="8">8</button></td>
35+
<td><button class="btn-number" id="9">9</button></td>
36+
<td><button class="btn-operator" id="/">&divide;</button></td>
37+
<td><button class="btn-operator" id="^">
38+
<span class="base">x</span>
39+
<span class="exponent">y</span>
40+
</button></td>
41+
</tr>
42+
<tr> <!-- THIRD ROW OF BUTTONS -->
43+
<td><button class="btn-number" id="4">4</button></td>
44+
<td><button class="btn-number" id="5">5</button></td>
45+
<td><button class="btn-number" id="6">6</button></td>
46+
<td><button class="btn-operator" id="*">&times;</button></td>
47+
<td><button class="btn-operator" id="plmn">&plusmn;</button></td>
48+
</tr>
49+
<tr> <!-- FOURTH ROW OF BUTTONS -->
50+
<td><button class="btn-number" id="1">1</button></td>
51+
<td><button class="btn-number" id="2">2</button></td>
52+
<td><button class="btn-number" id="3">3</button></td>
53+
<td><button class="btn-operator" id="-">&minus;</button></td>
54+
<td rowspan="2"><button class="btn-equal" id="equal">=</button></td>
55+
</tr>
56+
<tr> <!-- FIFTH ROW OF BUTTONS -->
57+
<td><button class="btn-number" id=".">.</button></td>
58+
<td><button class="btn-number" id="0">0</button></td>
59+
<td><button class="btn-number" id="00">00</button></td>
60+
<td><button class="btn-operator" id="+">+</button></td>
61+
</tr>
62+
</table>
63+
</div>
64+
</div>
65+
</div>
66+
<!-- FOOTER SECTION -->
67+
<footer>
68+
<div class="disclaimer"> <!-- DISCLAIMER -->
69+
<a href="./LICENSE" target="_blank">
70+
Copyright &copy; 2023, RUDRESH
71+
</a>
72+
</div>
73+
<div class="wrapper"> <!-- BUILD INFO -->
74+
Made with <i class="fa fa-heart pulse"></i> in <a href="https://goo.gl/maps/AGPx7QK8cQLrFs8aA" target="_blank">INDIA</a>
75+
</div>
76+
<div class="about-wrap">
77+
<div class="about">About</div>
78+
<div class="card"> <!-- ABOUT CARD -->
79+
<div class="dev-head">
80+
<h2>Developer</h2>
81+
<i class="octicon" aria-hidden="true">&#xe800;</i>
82+
<div class="version-info">
83+
<span class="title">Version</span>
84+
<span class="version">1.1.5</span>
85+
</div>
86+
</div>
87+
<div class="line-1"></div>
88+
<div class="line-2"></div>
89+
<div class="dev-info">
90+
<div class="avatar-wrap">
91+
<a href="https://github.com/rudreshmodi" target="_blank">
92+
<img src="assets/avatar.png" alt="profile" class="avatar">
93+
</a>
94+
<div class="line-3"></div>
95+
</div>
96+
<div class="names">
97+
<span class="fullname">Rudresh Modi</span>
98+
<span class="username">rudreshmodi</span>
99+
</div>
100+
</div>
101+
<div id="learn-more-wrap">
102+
<div class="learn-more">
103+
<span class="circle" aria-hidden="true">
104+
<span class="icon arrow"></span>
105+
</span>
106+
<a href="https://github.com/rudreshmodi/Calculator-app" target="_blank" class="button-text">Learn More</a>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</footer>
112+
<script src="script/app.js"></script>
113+
</body>
114+
</html>

‎script/app.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
const display = document.querySelector("#display");
2+
const buttons = document.querySelectorAll("button");
3+
4+
buttons.forEach((item) => {
5+
item.onclick = function () {
6+
if (item.id == "clear") {
7+
return (display.innerText = "");
8+
}
9+
if (item.id == "backspace") {
10+
let string = display.innerText.toString();
11+
return (display.innerText = string.substr(0, string.length - 1));
12+
}
13+
if (item.id == "plmn") {
14+
if (display.innerText.charAt(0) === "-") {
15+
return (display.innerText = display.innerText.slice(1));
16+
}
17+
return (display.innerText = "-" + display.innerText);
18+
}
19+
if (display.innerText.includes("%") && item.id == "equal") {
20+
let split = display.innerText.split("%");
21+
let percent = Number(split[0]);
22+
let value = Number(split[1]);
23+
return (display.innerText = (percent / 100) * value);
24+
}
25+
if (display.innerText.includes("^") && item.id == "equal") {
26+
let base = display.innerText.slice(0, display.innerText.indexOf("^"));
27+
let exponent = display.innerText.slice(display.innerText.indexOf("^") + 1);
28+
return (display.innerText = base ** exponent);
29+
}
30+
if (display.innerText != "" && item.id == "equal") {
31+
return (display.innerText = eval(display.innerText));
32+
}
33+
if (display.innerText == "" && item.id == "equal") {
34+
display.innerText = "Empty!";
35+
setTimeout(() => (display.innerText = ""), 2000);
36+
return;
37+
}
38+
return (display.innerText += item.id);
39+
};
40+
});
41+
const themeToggleBtn = document.querySelector(".theme-toggler");
42+
const calculator = document.querySelector(".calculator");
43+
const toggleIcon = document.querySelector(".toggler-icon");
44+
let isDark = true;
45+
themeToggleBtn.onclick = function () {
46+
calculator.classList.toggle("dark");
47+
themeToggleBtn.classList.toggle("active");
48+
isDark = !isDark;
49+
};

0 commit comments

Comments
 (0)