-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (117 loc) · 4.74 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>JS Calculator</title>
</head>
<body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap");
</style>
<div class="calculator_container">
<div id="calculator_main">
<div class="screen">
<label class="switch">
<input id="lightDarkToggle" type="checkbox" />
<span class="slider round"></span>
</label>
<textarea id="history" readonly></textarea>
<span id="text"></span>
</div>
<div id="buttons" class="buttons_root">
<button type="button" class="clear first_row operator" value="C">
<span>C</span>
</button>
<button type="button" id="sqrt" class="sqrt first_row" value="sqrt">
<svg
id="sqrt_icon"
width="25"
height="30"
viewBox="0 0 25 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.4181 0L9.00632 21.8767L4.26002 10.2889H-2.47444e-05L7.9818 30H10.8199L18.4334 4.02525H24.1016V0H15.4181Z"
fill="#FF7340"
/>
</svg>
</button>
<button type="button" id="percentage" class="first_row percentage">
<span>%</span>
</button>
<button type="button" class="divide first_row operator" value="/">
<span>/</span>
</button>
<button type="button" class="number" value="7"><span>7</span></button>
<button type="button" class="number" value="8"><span>8</span></button>
<button type="button" class="number" value="9"><span>9</span></button>
<button type="button" id="multiply" class="operator" value="x">
<svg
width="27"
height="26"
viewBox="0 0 27 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="multiply_svg_icon"
d="M18.6386 5.60637L20.9918 7.95962L15.9629 12.9886L21.3539 18.3795L18.797 20.9364L13.406 15.5455L8.35442 20.597L6.00117 18.2438L11.0527 13.1922L5.68438 7.82386L8.24128 5.26696L13.6096 10.6353L18.6386 5.60637Z"
fill="black"
/>
</svg>
</button>
<button type="button" class="number" value="4"><span>4</span></button>
<button type="button" class="number" value="5"><span>5</span></button>
<button type="button" class="number" value="6"><span>6</span></button>
<button type="button" class="minus operator" value="-">
<span>-</span>
</button>
<button type="button" class="number" value="1"><span>1</span></button>
<button type="button" class="number" value="2"><span>2</span></button>
<button type="button" class="number" value="3"><span>3</span></button>
<button type="button" class="assign operator" value="+">
<span>+</span>
</button>
<button type="button" class="number"><span>0</span></button>
<button type="button" id="dot" class="dot"><span>.</span></button>
<button type="button" id="backspace" class="backspace">
<svg
id="backspace_Icon"
width="44"
height="28"
viewBox="0 0 44 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="backspace_1"
id="backspace_svg_1"
d="M13.8474 1.07578C14.5881 0.384473 15.5635 0 16.5767 0H40C42.2091 0 44 1.79086 44 4V24C44 26.2091 42.2091 28 40 28H16.5767C15.5635 28 14.5881 27.6155 13.8474 26.9242L3.13309 16.9242C1.43879 15.3429 1.43879 12.6571 3.13309 11.0758L13.8474 1.07578Z"
fill="#10101E"
/>
<path
id="backspace_2"
id="backspace_svg_2"
d="M35.7678 21.4086H32.086L27.9062 16.1552L23.7713 21.4086H20.2241L26.2673 13.9326L20.5833 6.59131H24.2203L28.1531 11.5753L32.1309 6.59131H35.4984L29.792 13.8203L35.7678 21.4086Z"
fill="#F5F5F5"
/>
</svg>
</button>
<button
type="button"
id="equal"
class="equal_operand operator"
value="="
>
<span>=</span>
</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>