Skip to content

Commit 95b4e9f

Browse files
harsh98trivediharsh98trivedi
committed
Initial Commit ➕
0 parents  commit 95b4e9f

File tree

6 files changed

+299
-0
lines changed

6 files changed

+299
-0
lines changed

‎calc.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
console.log("Javascript Calculator Made by Harsh Trivedi\nhttps://harsh98trivedi.github.io")
2+
3+
document.getElementById('answer').readOnly = true;
4+
let screen = document.getElementById('answer');
5+
buttons = document.querySelectorAll('button');
6+
let screenValue = '';
7+
for (item of buttons) {
8+
item.addEventListener('click', (e) => {
9+
// console.log(buttonText, "has been pressed");
10+
buttonText = e.target.innerText;
11+
if (buttonText == 'X') {
12+
buttonText = '*';
13+
screenValue += buttonText;
14+
screen.value = screenValue;
15+
}
16+
else if (buttonText == 'C') {
17+
screenValue = "";
18+
screen.value = screenValue;
19+
}
20+
else if (buttonText == '=') {
21+
screen.value = eval(screenValue);
22+
}
23+
else {
24+
screenValue += buttonText;
25+
screen.value = screenValue;
26+
}
27+
28+
})
29+
}
30+
31+
document.addEventListener("keydown", function(event) {
32+
console.log(event.which);
33+
if(event.shiftKey==57){
34+
event.key = '(';
35+
}
36+
else if(event.shiftKey==48){
37+
event.key = ')';
38+
}
39+
else if(event.shiftKey==53){
40+
event.key = '%';
41+
}
42+
if(event.keyCode==88){
43+
screenValue += '*';
44+
screen.value = screenValue;
45+
}
46+
if(event.key<=9 || event.key=='+' || event.key=='-' || event.key=='*' || event.key=='.' || event.key=='/' || event.key=='%' || event.key=='(' || event.key==')'){
47+
screenValue += event.key;
48+
screen.value = screenValue;
49+
}
50+
if(event.keyCode == 13 || event.keyCode == 187)
51+
{
52+
screen.value = eval(screenValue);
53+
}
54+
else if(event.keyCode == 46){
55+
screenValue = "";
56+
screen.value = screenValue;
57+
console.clear();
58+
}
59+
else if(event.keyCode == 8){
60+
screenValue = screenValue.slice(0, -1);
61+
screen.value = screenValue;
62+
}
63+
else if(event.keyCode == 67){
64+
screenValue = "";
65+
screen.value = screenValue;
66+
console.clear();
67+
}
68+
else if(event.keyCode == 82){
69+
location.reload();
70+
}
71+
})
72+
73+
window.onerror = function(){
74+
alert("PLEASE INPUT VALID EXPRESSION");
75+
screenValue = "";
76+
screen.value = screenValue;
77+
console.clear();
78+
}

‎favicon.png

12.5 KB
Loading

‎heart.png

453 Bytes
Loading

‎index.html

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1 user-scalable=no, shrink-to-fit=no">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Simple Calculator Harsh Trivedi</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&display=swap" rel="stylesheet">
11+
<!-- Common Tags -->
12+
<meta content='#171825' name='theme-color' />
13+
14+
<meta name="keywords"
15+
content="Simple JavaScript Calculator, Harsh, JavaScript, Calculator, JavaScript Calculator, JSCalci, JavaScriptCalci, Harsh Trivedi">
16+
17+
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
18+
<meta property="og:title" content="Simple JavaScript Calculator" />
19+
<meta property="og:description"
20+
content="Simple JavaScript Calculator by Harsh Trivedi" />
21+
<meta property="og:image"
22+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/meta.jpg" />
23+
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
24+
<meta property="og:site_name" content="Simple JavaScript Calculator" />
25+
<meta property="og:locale" content="en_US" />
26+
<meta property="fb:admins" content="245221532650178" />
27+
<meta property="og:type" content="website" />
28+
<meta content='https://www.facebook.com/TheHarshTrivedi' property='article:author' />
29+
<meta property="og:url" content="https://harsh98trivedi.github.io/Simple-JavaScript-Calculator/" />
30+
<!-- Search Engine -->
31+
<meta property="description"
32+
content="Simple JavaScript Calculator by Harsh Trivedi" />
33+
<meta property="image"
34+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/meta.jpg" />
35+
<!-- Schema.org for Google -->
36+
<meta itemprop="name" content="Simple JavaScript Calculator" />
37+
<meta itemprop="description"
38+
content="Simple JavaScript Calculator by Harsh Trivedi" />
39+
<meta itemprop="image"
40+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/meta.jpg" />
41+
<!-- Twitter -->
42+
<meta property="twitter:card" content="summary_large_image" />
43+
<meta property="twitter:title" content="Simple JavaScript Calculator" />
44+
<meta property="twitter:description"
45+
content="Simple JavaScript Calculator by Harsh Trivedi" />
46+
<meta property="twitter:creator" content="@harsh98trivedi" />
47+
<meta property="twitter:creator:id" content="@harsh98trivedi" />
48+
<meta property="twitter:image:src"
49+
content="https://raw.github.com/harsh98trivedi/Simple-JavaScript-Calculator/meta.jpg" />
50+
<meta property="twitter:image" content="Calculator by Harsh Trivedi" />
51+
<link rel='icon' type='image/x-icon' href='favicon.png' />
52+
</head>
53+
54+
<body>
55+
<div class="container">
56+
<h1><a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;" href="" onclick="location.reload();">CALCULATOR</a></h1 >
57+
<div class="calculator">
58+
<input type="text" name="screen" id="answer">
59+
<table>
60+
<tr>
61+
<td><button>(</button></td>
62+
<td><button>)</button></td>
63+
<td><button style="background-color: #e74c3c; font-weight: bold; color: #ecf0f1;">C</button></td>
64+
<td><button>%</button></td>
65+
</tr>
66+
<tr>
67+
<td><button>7</button></td>
68+
<td><button>8</button></td>
69+
<td><button>9</button></td>
70+
<td><button>X</button></td>
71+
</tr>
72+
<tr>
73+
<td><button>4</button></td>
74+
<td><button>5</button></td>
75+
<td><button>6</button></td>
76+
<td><button>-</button></td>
77+
</tr>
78+
<tr>
79+
<td><button>1</button></td>
80+
<td><button>2</button></td>
81+
<td><button>3</button></td>
82+
<td><button>+</button></td>
83+
</tr>
84+
<tr>
85+
<td><button>0</button></td>
86+
<td><button style="font-weight: bold;">.</button></td>
87+
<td><button>/</button></td>
88+
<td><button style="background-color: #2ecc71; font-weight: bold; color: #ecf0f1;">=</button></td>
89+
</tr>
90+
</table>
91+
<hr style="max-width: 50vw;">
92+
<div style="font-size:1rem; display: flex; align-items: center; justify-content: center;">Made with <img style="margin: 0.15rem;" src="heart.png">by<a style="text-decoration: none; color: #f1c40f; margin-left: 0.25rem;"
93+
target="_blank" href="https://harsh98trivedi.github.io">Harsh Trivedi</a></div>
94+
</div>
95+
</div>
96+
<div id="turn">
97+
PLEASE TURN YOUR DEVICE
98+
</div>
99+
</body>
100+
<script src="calc.js"></script>
101+
</html>

‎meta.jpg

114 KB
Loading

‎style.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
body,
2+
html {
3+
padding: 0;
4+
margin: 0;
5+
display: flex;
6+
justify-content: center;
7+
color: #ecf0f1;
8+
background-color: rgb(23, 24, 37);
9+
font-family: 'Fjalla One', sans-serif;
10+
animation: fadein 1.5s;
11+
}
12+
13+
@keyframes fadein {
14+
0% {
15+
opacity: 0%;
16+
}
17+
100% {
18+
opacity: 100%;
19+
}
20+
}
21+
22+
h1 {
23+
font-size: 2.5rem;
24+
font-weight: 500;
25+
margin-bottom: 0;
26+
}
27+
28+
input {
29+
background-color: rgba(52, 73, 94, 0.5);
30+
color: #ecf0f1;
31+
outline: none;
32+
text-align: right;
33+
border: none;
34+
font-size: 3rem;
35+
width: 78vw;
36+
margin-bottom: 0.5rem;
37+
border-radius: 0.5rem;
38+
padding: 0.5rem 1.5rem;
39+
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
40+
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
41+
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
42+
}
43+
44+
.container {
45+
margin: auto;
46+
text-align: center;
47+
position: absolute;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
}
52+
53+
.calculator {
54+
padding: 0.25rem;
55+
display: inline-block;
56+
}
57+
58+
table {
59+
margin: auto;
60+
}
61+
62+
button {
63+
border: none;
64+
background-color: white;
65+
width: 20vw;
66+
height: 10vh;
67+
padding: 0.5rem 0;
68+
margin: 0.25vmax;
69+
font-size: 2rem;
70+
border-radius: 0.5rem;
71+
-moz-transition: all ease 0.5s;
72+
-webkit-transition: all 0.5s ease;
73+
transition: all 0.5s ease;
74+
-o-transition: all ease 0.5s;
75+
}
76+
77+
button:hover {
78+
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
79+
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
80+
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
81+
-moz-transition: all ease 0.5s;
82+
-webkit-transition: all 0.5s ease;
83+
transition: all 0.5s ease;
84+
-o-transition: all ease 0.5s;
85+
}
86+
87+
a{
88+
outline: none;
89+
-moz-transition: all ease 0.5s;
90+
-webkit-transition: all 0.5s ease;
91+
transition: all 0.5s ease;
92+
-o-transition: all ease 0.5s;
93+
}
94+
95+
a:hover{
96+
text-shadow: 0px 0px 10px rgba(241, 196, 15, 0.5);
97+
-moz-transition: all ease 0.5s;
98+
-webkit-transition: all 0.5s ease;
99+
transition: all 0.5s ease;
100+
-o-transition: all ease 0.5s;
101+
}
102+
103+
#turn {
104+
display: none;
105+
z-index: 100;
106+
position: fixed;
107+
}
108+
109+
@media (orientation: landscape) and (max-height: 500px) {
110+
#turn {
111+
width: 100vw;
112+
height: 100vh;
113+
display: flex;
114+
justify-content: center;
115+
align-items: center;
116+
font-size: 2rem;
117+
color: rgba(52, 73, 94, 1.0);
118+
background-color: rgba(236, 240, 241, 1.0);
119+
}
120+
}

0 commit comments

Comments
 (0)