html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<!--Have made this on my phone because my laptop stopped working...The better version would be out soon, tap on the line for dark mode...-->
<html>
<head style="overflow:hidden;">
<link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel="stylesheet">
<title>Calculator</title>
<link href="calculator.css" rel="stylesheet">
<script src="calculator.js"></script>
</head>
<body id="body">
<div class="container">
<div id="display"></div>
<button id="d0" onclick="join('0')">0</button>
<button id="d1" onclick="join('1')">1</button>
<button id="d2" onclick="join('2')">2</button>
<button id="d3" onclick="join('3')">3</button>
<button id="d4" onclick="join('4')">4</button>
<button id="d5" onclick="join('5')">5</button>
<button id="d6" onclick="join('6')">6</button>
<button id="d7" onclick="join('7')">7</button>
<button id="d8" onclick="join('8')">8</button>
<button id="d9" onclick="join('9')">9</button>
<button id="dpoint" onclick="join('.')">•</button>
<button id="dplus" onclick="join('+')">+</button>
<button id="dsub" onclick="join('-')">-</button>
<button id="dpro" onclick="join('*')">x</button>
<button id="dquo" onclick="join('/')">/</button>
<button id="dequal" onclick="equal()">=</button>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#body{transition:1s;background-color:white;overflow:hidden;}
.container{
position:absolute;
height:250pt;width:200pt;
margin:auto;display:flex;
top:0;right:0;left:0;bottom:0;
background-color:transparent;
border-radius:10px;
transform:scale(1.2);
justify-content:center;align-items:center;
}
#display{
position:absolute;
height:70px;
width:190pt;
top:5pt;
background-color:black;
border-radius:10px;
color:orange;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-weight:900;
overflow:scroll;
font-size:30px;
font-family: 'Saira Semi Condensed', sans-serif;
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
alert("Coded with Krish, do go follow him, link in comments...Tap on blue line for dark mode...")
function join(arg){
document.getElementById('display').innerHTML+=arg;
navigator.vibrate(80);
}
function equal(){
if(document.getElementById('display').innerHTML!='')
document.getElementById('display').innerHTML=eval(document.getElementById('display').innerHTML);
navigator.vibrate(80);
}
function clearL(){
var y = document.getElementById('display').innerHTML;
document.getElementById('display').innerHTML=y.substring(0,y.length-1);
navigator.vibrate(80);
}
var j=0;
function change(){
j++;
if(j%2==0)
document.getElementById('body').style.backgroundColor="white";
else
document.getElementById('body').style.backgroundColor="black";
navigator.vibrate([100,100,100,100,100,100,100,100,100]);
}
BROWSER
Console
Run