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>
<html>
<head>
<title>calculator</title>
<link rel="styleaheet"href="style.css">
</head>
<body>
<div class="calculator" ></div>
<input type="text"placeholder="0"id="inputBox">
<button class="operator">AC</button></button>
<button class="operator">Del</button>
<button class="operator">/</button>
<button class="operator">%</button>
</div>
<div>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button class="operator">-</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">*</button>
</div>
<div>
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 {
width:100%;
height:x00vh;
background:linear-gradient( white, blue);
}
.calculator{
padding:20px;
border-radius:16px;
background:transparent ;
}
button{
border:none;
width:60px;
height:60px;
margin:10px;
border-radius:50%;
background: white;
font-size:20px;
box-shadow:-8px -8px -15px;
cursor:pointer;
color: green;
}
input::placeholder{
color: green;
}
input:{
width:320%;
border:none;
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run