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
<!-- created by Umar Bashir -->
<!DOCTYPE html>
<html>
<head>
<title>cal</title>
</head>
<body>
<div class="bg">
<div class="mnn">
<div class=alg>
<form name="form">
<input class="textview" name="textview">
</form>
<table class="rmn">
<tr>
<td><input class="button" type="button" value="C" onclick="clean()"></td>
<td><input class="button" type="button" value="<" onclick="back()"></td>
<td><input class="button" type="button" value="/" onclick="insert('/')"></td>
<td><input class="button" type="button" value="x" onclick="insert('*')"></td>
</tr>
<tr>
<td><input class="button" type="button" value="7" onclick="insert('7')"></td>
<td><input class="button" type="button" value="8" onclick="insert('8')"></td>
<td><input class="button" type="button" value="9" onclick="insert('9')"></td>
<td><input class="button" type="button" value="-" onclick="insert('-')"></td>
</tr>
<tr>
Enter to Rename, Shift+Enter to Preview
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{
height:100vh;
}
*{
margin: 0;
padding: 0;
}
.button{
width: 50px;
height: 50px;
font-size: 25px;
margin: 2;
cursor: pointer;
text-align:center;
/*border: 1px solid #fff;*/
box-shadow:0 0 25px rgba(0,0,0,1), inset 0 0 1px rgba(225,225,225,0.8);
background-color:#607d8b;
border-radius:20px;
color: white;
/*background-color:#000;*/
}
.button:hover{
color:#0f0;
/* width:55px;
transition:0.4s;*/
background-color:#000;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function insert(num){
document.form.textview.value = document.form.textview.value+num
}
function equal(){
var exp = document.form.textview.value;
if (exp) {
document.form.textview.value = eval(exp);
}
}
function clean(){
document.form.textview.value ="";
}
function back(){
var exp = document.form.textview.value;
document.form.textview.value = exp.substring(0,exp.length-1);
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run