JavaScript-Practice/simplecalci.html at main · SandeshBanakar/JavaScript-Practice · 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
<!-- A simple calculator of 4 basic operations designed using HTML, CSS, and JS -->

<!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">

        <title>Simple Calculator</title>

        <!-- Important element to add external CSS file -->
        <link rel="stylesheet" href="universalstyle.css" type="text/css">

    </head>

    <body>
        <div class="calci-box">
            <div class="heading">
                <h1>Simple Calculator</h1>
            </div>

            <div>
                <input class="first-number" type="number" name="first" id="first" min="0" max="1000">

                <select id="opr" class="dropdown">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">x</option>
                    <option value="/">/</option>
                </select>

                <input class="second-number" type="number" name="second" id="second" min="0" max="1000">
            </div>

            <div>
                <button class="calc-btn" onclick="calci()">
                    <h3>
                        Calculate
                    </h3>
                </button>

                <input class="result-box" type="text" id="result" readonly>
            </div>
        </div>
    </body>

    <script>
        function calci() {
            var opr1 = document.getElementById("first").value;
            var opr2 = document.getElementById("second").value;

            var opr = document.getElementById("opr").value;

            if (opr == '+') {
                var res = parseInt (opr1) + parseInt (opr2);
            }

            if (opr == '-') {
                var res = parseInt (opr1) - parseInt (opr2);
            }

            if (opr == '*') {
                var res = parseInt (opr1) * parseInt (opr2);
            }

            if (opr == '/') {
                var res = parseInt (opr1) / parseInt (opr2);
            }

            document.getElementById("result").value=res;
        }
    </script>
</html>