-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
85 lines (85 loc) · 3.04 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- Primary Meta Tags -->
<link
rel="icon"
href="https://avatars.githubusercontent.com/u/39514595?s=32"
/>
<title>Vanilla Calculator</title>
<meta name="title" content="Vanilla Calculator" />
<meta
name="description"
content="An elegant and minimalistic calculator built with vanilla JavaScript, delivering instant results with every input."
/>
<meta
name="keywords"
content="calculator,ui-design,interactive,css-animations,web-app,vanilla-javascript,vanilla-js,css-grid,web-design,responsive-design,calculator-application,iphone-app,ux-design,calculator-javascript,javascript-calculator,css-flexbox,calculator-app,iphone-calculator,iphone-application,button-design"
/>
<meta name="author" content="Ray C" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://rayc2045.github.io/vanilla-calculator/"
/>
<meta property="og:title" content="Vanilla Calculator" />
<meta
property="og:description"
content="An elegant and minimalistic calculator built with vanilla JavaScript, delivering instant results with every input."
/>
<meta property="og:image" content="/assets/images/cover.webp" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://rayc2045.github.io/vanilla-calculator/"
/>
<meta property="twitter:title" content="Vanilla Calculator" />
<meta
property="twitter:description"
content="An elegant and minimalistic calculator built with vanilla JavaScript, delivering instant results with every input."
/>
<meta property="twitter:image" content="/assets/images/cover.webp" />
<!-- font: M PLUS 1P -->
<link rel="stylesheet" href="./src/font-face.css" />
<!-- styles -->
<link rel="stylesheet" href="./src/style.css" />
</head>
<body>
<div class="iphone-x">
<div class="view">
<div id="input"></div>
<div id="result"></div>
</div>
<div class="buttons-container">
<div class="light clear">C</div>
<div class="light delete">
<span>⌫</span>
</div>
<div class="light percent">%</div>
<div class="light devide">÷</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div class="light multiply">✕</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="light minus">–</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="light plus">＋</div>
<div class="zero">O</div>
<div>.</div>
<div class="light equals">=</div>
</div>
</div>
<script src="./src/utils.js"></script>
<script src="./src/script.js"></script>
</body>
</html>