Simple_Calculator/index.html at main · Udara-Dilshan/Simple_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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Calculator</h1>
    <div class="calculator-container">
        <form action="" name="clc">
            <input type="text" name="display" class="display">
            <br>
            <input class="btn" type="button" value="1" onclick="clc.display.value += '1'">
            <input class="btn" type="button" value="2" onclick="clc.display.value += '2'">
            <input class="btn" type="button" value="3" onclick="clc.display.value += '3'">
            <input class="btn" type="button" value="+" onclick="clc.display.value += '+'" style="background-color:aquamarine;">
            <br>
            <input class="btn" type="button" value="4" onclick="clc.display.value += '4'">
            <input class="btn" type="button" value="5" onclick="clc.display.value += '5'">
            <input class="btn" type="button" value="6" onclick="clc.display.value += '6'">
            <input class="btn" type="button" value="-" onclick="clc.display.value += '-'" style="background-color: #ba55d3;">
            <br>
            <input class="btn" type="button" value="7" onclick="clc.display.value += '7'">
            <input class="btn" type="button" value="8" onclick="clc.display.value += '8'">
            <input class="btn" type="button" value="9" onclick="clc.display.value += '9'">
            <input class="btn" type="button" value="*" onclick="clc.display.value += '*'" style="background-color:burlywood;">
            <br>
            <input class="btn" type="button" value="C" onclick="clc.display.value =''" style="background-color:#cc0000;">
            <input class="btn" type="button" value="0" onclick="clc.display.value += '0'">
            <input class="btn" type="button" value="=" onclick="clc.display.value = eval(clc.display.value)" style="background-color: yellow;">
            <input class="btn" type="button" value="&#247;" onclick="clc.display.value += '/'" style="background-color: #1f80c9;">
        </form>
    </div>
</body>
</html>