calculator/index.html at main · MaskofDevil/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
<!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">
    <script src="renderer.js" defer></script>
    <title>Calculator</title>
</head>

<body>
    <div class="container">
        <section class="title-bar">
            <select class="dropdown">
                <option value="">Standard</option>
            </select>
            <p>Calculator</p>
            <button id="minimize">
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
                    <path d="M0 0h24v24H0V0z" fill="none" />
                    <path d="M6 19h12v2H6z" />
                </svg>
            </button>
            <button id="close" class="cancel">
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
                    <path d="M0 0h24v24H0z" fill="none" />
                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                </svg>
            </button>
        </section>
        <section class="submenu">
            <button id="clipboard">
                <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" width="16px" fill="currentColor">
                    <path d="M0 0h24v24H0z" fill="none" />
                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
                </svg>
            </button>
            <button id="toggle-dark-mode">
                <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="18px" viewBox="0 0 24 24" width="18px" fill="currentColor">
                    <rect fill="none" height="24" width="24" />
                    <path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
                </svg>
            </button>
        </section>
        <div class="calculator">
            <div id="display"></div>
            <div class="buttons">
                <span class="cancel">C</span>
                <span data-brackets>()</span>
                <span data-operation>%</span>
                <span data-operation>÷</span>
                <span data-number>7</span>
                <span data-number>8</span>
                <span data-number>9</span>
                <span data-operation>×</span>
                <span data-number>4</span>
                <span data-number>5</span>
                <span data-number>6</span>
                <span data-operation>-</span>
                <span data-number>1</span>
                <span data-number>2</span>
                <span data-number>3</span>
                <span data-operation>+</span>
                <span data-number>0</span>
                <span data-operation>.</span>
                <span data-backspace>
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path d="M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14zm-11.59-2L14 13.41 17.59 17 19 15.59 15.41 12 19 8.41 17.59 7 14 10.59 10.41 7 9 8.41 12.59 12 9 15.59z" />
                    </svg>
                </span>
                <span class="equal">=</span>
            </div>
        </div>
        <div class="footer">
            <p>&copy;Tuhin Dhar, <a href="https://github.com/MaskofDevil" target="_blank">github.com/MaskofDevil</a></p>
        </div>
    </div>
</body>

</html>