calculator/index.html at main · unseenumair/calculator · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="calculator, modern calculator, javascript calculator, easy calculator, responsive calculator, web calculator, animated calculator, HTML CSS JS project, modern UI calculator, js eval calculator">
    <meta name="description" content="Modern responsive light themed web Calculator. Live demo by Umair Shakoor.">
    <title>Calculator - Umair Shakoor</title>

    <!-- Preloading Styles -->
    <link rel="preload" href="styles.css" as="style">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap" as="style">

    <!-- Linking Styles -->
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/unseenumair/universal-signature@main/styles.css">

    <!-- Fav -->
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://unseenumair.github.io/calculator/">

    <!-- Open Graph -->
    <meta property="og:title" content="Calculator - Umair Shakoor">
    <meta property="og:description" content="Modern responsive light themed web Calculator. Live demo by Umair Shakoor.">
    <meta property="og:url" content="https://unseenumair.github.io/calculator/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://unseenumair.github.io/calculator/assets/preview.jpg">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Calculator - Umair Shakoor">
    <meta name="twitter:description" content="Modern responsive light themed web Calculator. Live demo by Umair Shakoor.">
    <meta name="twitter:image" content="https://unseenumair.github.io/calculator/assets/preview.jpg">

    <!-- JSON-LD -->
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"WebApplication",
      "name":"Calculator",
      "url":"https://unseenumair.github.io/calculator/",
      "author":{"@type":"Person","name":"Umair Shakoor","url":"https://unseenumair.github.io/"},
      "description":"Modern responsive light themed web Calculator. Live demo by Umair Shakoor."
    }
    </script>
</head>
<body class="center">
	<main class="center">
		<div id="display" class="center">O</div>
		<div id="btnsCont" class="center">
			<button class="btn center">clr</button>
			<button class="btn center">DEL</button>
			<button class="btn center">%</button>
			<button class="btn center">/</button>
			<button class="btn center">7</button>
			<button class="btn center">8</button>
			<button class="btn center">9</button>
			<button class="btn center">x</button>
			<button class="btn center">4</button>
			<button class="btn center">5</button>
			<button class="btn center">6</button>
			<button class="btn center">-</button>
			<button class="btn center">1</button>
			<button class="btn center">2</button>
			<button class="btn center">3</button>
			<button class="btn center">+</button>
			<button class="btn center" style="font-size: 1.5rem;">.</button>
			<button class="btn center">0</button>
			<button id="equal" class="btn center">=</button>
		</div>
	</main>
	<!-- JS -->
	<script src="script.js" defer></script>
	<script
	  src="https://cdn.jsdelivr.net/gh/unseenumair/universal-signature@main/script.js"
	  data-position='["bottom","right"]'
	  data-offset='["3%", "2%"]'
	  data-bg="linear-gradient(to bottom right, transparent, rgba(0, 0, 255, 0.5))">
	</script>
</body>
</html>