Calculator-Webapp/index.html at main · SandunLB/Calculator-Webapp · 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scientific Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" class="calculator-display" disabled>

        <div class="calculator-buttons">
            <!-- Number and basic operation buttons -->
            <div class="button-row">
                <button class="btn memory" onclick="clearEntry()">CE</button>
                <button class="btn memory" onclick="clearMemory()">MC</button>
                <button class="btn memory" onclick="recallMemory()">MR</button>
                <button class="btn memory" onclick="addToMemory()">M+</button>
                <button class="btn memory" onclick="subtractFromMemory()">M-</button>
            </div>
            <div class="button-row">
                <button class="btn" onclick="appendNumber('7')">7</button>
                <button class="btn" onclick="appendNumber('8')">8</button>
                <button class="btn" onclick="appendNumber('9')">9</button>
                <button class="btn operator" onclick="updateOperation('/')">÷</button>
                <button class="btn clear" onclick="clearDisplay()">C</button>
            </div>

            <div class="button-row">
                <button class="btn" onclick="appendNumber('4')">4</button>
                <button class="btn" onclick="appendNumber('5')">5</button>
                <button class="btn" onclick="appendNumber('6')">6</button>
                <button class="btn operator" onclick="updateOperation('*')">x</button>
                <button class="btn equal" onclick="calculate()">=</button>
            </div>

            <div class="button-row">
                <button class="btn" onclick="appendNumber('1')">1</button>
                <button class="btn" onclick="appendNumber('2')">2</button>
                <button class="btn" onclick="appendNumber('3')">3</button>
                <button class="btn operator" onclick="updateOperation('-')">-</button>
                <button class="btn sign-change" onclick="changeSign()">±</button>


            </div>

            <div class="button-row">
                <button class="btn" onclick="appendNumber('.')">.</button>
                <button class="btn" onclick="appendNumber('0')">0</button>
                <button class="btn" onclick="moveCursorLeft()">←</button>
                <button class="btn operator" onclick="updateOperation('+')">+</button>
                <button class="btn" onclick="moveCursorRight()">→</button>
            </div>

            <!-- Scientific function buttons -->
            <div class="button-row">
                <button class="btn function" onclick="computeFunction('sin')">sin</button>
                <button class="btn function" onclick="computeFunction('cos')">cos</button>
                <button class="btn function" onclick="computeFunction('tan')">tan</button>
                <button class="btn function" onclick="computeFunction('log')">log</button>
                <button class="btn function" onclick="computeFunction('sqrt')">√</button>
            </div>

            <!-- Additional scientific functions -->
            <div class="button-row">
                <button class="btn function" onclick="computeFunction('exp')">exp</button>
                <button class="btn function" onclick="computeFunction('pow')">x<sup>y</sup></button>
                <button class="btn function" onclick="computeFunction('factorial')">n!</button>
                <button class="btn function" onclick="computeFunction('pow10')">10<sup>x</sup></button>
                <button class="btn function" onclick="computeFunction('ln')">ln</button>
            </div>

            <div class="button-row">
                <button class="btn function" onclick="computeFunction('inverse')">1/x</button>
                <button class="btn function" onclick="updateOperation('%')">%</button>
                <button class="btn function" onclick="computeFunction('sinh')">sinh</button>
                <button class="btn function" onclick="computeFunction('cosh')">cosh</button>
                <button class="btn function" onclick="computeFunction('tanh')">tanh</button>
            </div>

            <!-- Additional buttons for advanced functions -->
            <div class="button-row">
                <button class="btn function" onclick="computeFunction('exp')">e<sup>x</sup></button>
                <button class="btn function" onclick="computeFunction('logBase')">log<sub>b</sub>(x)</button>
                <button class="btn function" onclick="computeFunction('antilog')">10<sup>x</sup> / e<sup>x</sup></button>
                <button class="btn function" onclick="computeFunction('cubeRoot')">∛x</button>
                <button class="btn function" onclick="computeFunction('nthRoot')">nthRoot</button>
            </div>

            <div class="button-row">
                <button class="btn function" onclick="computeFunction('square')">x²</button>
                <button class="btn function" onclick="computeFunction('cube')">x³</button>
                <button class="btn function" onclick="computeFunction('perm')">nPr</button>
                <button class="btn function" onclick="computeFunction('comb')">nCr</button>
                <button class="btn function" onclick="computeFunction('mean')">Mean</button>
            </div>

            <div class="button-row">
                <button class="btn function" onclick="computeFunction('stdDev')">StdDev</button>
                <button class="btn function" onclick="computeFunction('variance')">Variance</button>
                <button class="btn function" onclick="computeFunction('sec')">sec</button>
                <button class="btn function" onclick="computeFunction('csc')">csc</button>
                <button class="btn function" onclick="computeFunction('cot')">cot</button>
            </div>

            <!-- Radians/Degrees toggle -->
            <div class="button-row">
                <button class="btn toggle" id="radians-degrees-toggle" onclick="toggleRadiansDegrees()">Radians</button>
            </div>

            <!-- Financial calculations -->
            <div class="button-row">
                <button class="btn function" onclick="computeFunction('pv')">PV</button>
                <button class="btn function" onclick="computeFunction('fv')">FV</button>
                <button class="btn function" onclick="computeFunction('npv')">NPV</button>
                <button class="btn function" onclick="computeFunction('irr')">IRR</button>
                <button class="btn function" onclick="computeFunction('loanAmortization')">Amort</button>
            </div>

            <!-- Unit conversions -->
            <div class="button-row">
                <button class="btn function" onclick="computeFunction('unitConversion')">Unit Conv</button>
                <button class="btn function" onclick="computeFunction('baseConversion')">Base Conv</button>
                <button class="btn function" onclick="computeFunction('binaryToDecimal')">Bin to Dec</button>
                <button class="btn function" onclick="computeFunction('decimalToBinary')">Dec to Bin</button>
                <button class="btn function" onclick="computeFunction('physicalConstants')">Constants</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>