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>Page Title</title>
</head>
<body>
<div id='Cal'>
<input id='display' readonly>
<div id='butts'>
<button onclick='displayValue("*")' class='add'>x</button>
<button onclick='displayValue("7")'>7</button>
<button onclick='displayValue("8")'>8</button>
<button onclick='displayValue("9")'>9</button>
<button onclick='displayValue("+")' class='add'>+</button>
<button onclick='displayValue("6")'>6</button>
<button onclick='displayValue("5")'>5</button>
<button onclick='displayValue("4")'>4</button>
<button onclick='displayValue("-")' class='add'>-</button>
<button onclick='displayValue("3")'>3</button>
<button onclick='displayValue("2")'>2</button>
<button onclick='displayValue("1")'>1</button>
<button onclick='displayValue("/")' class='add'>/</button>
<button onclick='displayValue("0")'>0</button>
<button onclick='displayValue(".")'>.</button>
<button onclick='Calculate()'>=</button>
<button onclick='Clear()' class='add'>C</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 {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#butts{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 5px;
font-size: 25px;
margin: 5px;
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.6);
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Запуск