Calculator/index.html at main · Adarsh-61/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
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
<html>

<head>
    <title>Index</title>
</head>

<script>
    let calculatorCleared = true;

    function view(num) {
        let screen = document.getElementById("Run");
        if (calculatorCleared) {
            return;
        }
        if (screen.value == '0') {
            screen.value = '';
        }
        screen.value += num;
    }

    function calculate() {
        let x = document.getElementById("Run").value;
        let y = eval(x);
        document.getElementById("Run").value = y;
    }

    function cls() {
        let screen = document.getElementById("Run");
        if (calculatorCleared) {
            calculatorCleared = false;
        }
        screen.value = '0';
    }
</script>

<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    table {
        border: 4px solid blue;
        width: 300px;
        text-align: center;
    }

    input[type="button"] {
        background-color: red;
        color: white;
        border: 1px;
        width: 100%;
        height: 100%;
    }

    input[type="num"] {
        background-color: lime;
        color: white;
        border: 1px;
        width: 100%;
        height: 100%;
    }

    input:hover {
        background-color: black;
    }
</style>

<body>
    <table border="1" bordercolor="black" height="265" width="365">
        <tr>
            <td colspan="3"><input type="num" id="Run" /></td>
            <td bgcolor="red"><input type="button" value="Ac" onclick="cls('')" /></td>
        </tr>

        <tr>
            <td><input type="button" value="7" onclick="view('7')" /></td>
            <td><input type="button" value="8" onclick="view('8')" /></td>
            <td><input type="button" value="9" onclick="view('9')" /></td>
            <td><input type="button" value="÷" onclick="view('/')" /></td>
        </tr>

        <tr>
            <td><input type="button" value="4" onclick="view('4')" /></td>
            <td><input type="button" value="5" onclick="view('5')" /></td>
            <td><input type="button" value="6" onclick="view('6')" /></td>
            <td><input type="button" value="×" onclick="view('*')" /></td>
        </tr>

        <tr>
            <td><input type="button" value="1" onclick="view('1')" /></td>
            <td><input type="button" value="2" onclick="view('2')" /></td>
            <td><input type="button" value="3" onclick="view('3')" /></td>
            <td><input type="button" value="+" onclick="view('+')" /></td>
        </tr>

        <tr>
            <td><input type="button" value="0" onclick="view('0')" /></td>
            <td><input type="button" value="." onclick="view('.')" /></td>
            <td><input type="button" value="=" onclick="calculate('=')" /></td>
            <td><input type="button" value="-" onclick="view('-')" /></td>
        </tr>
    </table>
</body>

</html>