Calculator-Program/CSC FINAL.HTML at main · dagostocsc/Calculator-Program · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- creating an icon for the website -->
    <link rel="icon" href="calc.png">
     <!--  link is to append the css file to the website  -->
    <link rel="stylesheet" href="Project.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- This is the title of the website -->
    <title>Debbie's Calculator</title>
</head>
<body class="body1">
    <div class="container">
        <div>
            <!--div is a box holding portions of information that makes it into one entity-->
            <!-- class is identifying the input and help us to called this input in the css file and style it -->
            <input class="colors" id="colorback" type="color">
            <p>BG Color</p>
        </div>

        <div class="innercontainer">
            <img src="calc.png" width="100px">
            <h1 class="title">Calculator</h1>
        </div>
        <div>
            <input   class="colors" id="colorbtn" type="color">
            <p>Button Color</p>
        </div>
    </div>


    <div class="container1">
        <input id="num1" class="inputnum" type="number" placeholder="Enter a number">
        <input id="num2"  class="inputnum" type="number" placeholder="Enter a number">
    </div>


    <div class="container2">
        <button id="add" class="btn">Add</button>
        <button id="sub" class="btn">Subtract</button>
        <button id="mul" class="btn">Multiply</button>
        <button id="div" class="btn">Divide</button>
        <button id="mod" class="btn">Modulus</button>
    </div>


    <h2 id="result" class="title">Result</h2>


    <script>
        // getting all the elements of html using id
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        var add = document.getElementById("add");
        var sub = document.getElementById("sub");
        var mul = document.getElementById("mul");
        var div = document.getElementById("div");
        var mod = document.getElementById("mod");
        var result = document.getElementById("result");
        var color = document.getElementById("colorback");
        var colorbtn = document.getElementById("colorbtn");


        // anytime when event occurs on the website i.e inputting the numbers or clicking the button. This function will automatically run
        add.addEventListener("click", function(){
            if (num1.value == "" || num2.value == ""){
            result.innerHTML = "Please enter a number";
            }
            else{
            result.innerHTML = parseInt(num1.value) + parseInt(num2.value);
            }
        })


        sub.addEventListener("click", function(){
            if (num1.value == "" || num2.value == ""){
            result.innerHTML = "Please enter a number";
            }
            else{
            result.innerHTML = parseInt(num1.value) - parseInt(num2.value);
        }})


        mul.addEventListener("click", function(){
            if (num1.value == "" || num2.value == ""){
            result.innerHTML = "Please enter a number";
            }
            else{
            result.innerHTML = parseInt(num1.value) * parseInt(num2.value);
        } })


        div.addEventListener("click", function(){
            if (num1.value == "" || num2.value == ""){
            result.innerHTML = "Please enter a number";
            }
            else{
            result.innerHTML = parseInt(num1.value) / parseInt(num2.value);
        }})


        mod.addEventListener("click", function(){
            if (num1.value == "" || num2.value == ""){
            result.innerHTML = "Please enter a number";
            }
            else{
            result.innerHTML = parseInt(num1.value) % parseInt(num2.value);
        }})


        color.addEventListener("input", function(){
            document.body.style.backgroundColor = color.value;
        })


        colorbtn.addEventListener("input", function(){
            document.getElementById("add").style.backgroundColor = colorbtn.value;
            document.getElementById("sub").style.backgroundColor = colorbtn.value;
            document.getElementById("mul").style.backgroundColor = colorbtn.value;
            document.getElementById("div").style.backgroundColor = colorbtn.value;
            document.getElementById("mod").style.backgroundColor = colorbtn.value;
        })


    </script>
</body>
</html>