-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
120 lines (105 loc) · 2.82 KB
/
script.js
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
//!Creating Elements:-
const num = "C ← . X 7 8 9 / 4 5 6 - 1 2 3 + 0 00 = ";
const numList = num.split(" ");
const h1 = document.createElement("h1");
const p = document.createElement("p");
const container = document.createElement("div");
const calculator = document.createElement("div");
const input_box = document.createElement("div");
const numBtn = document.createElement("div");
const input = document.createElement("input");
//Initiate the class name:-
container.className = "container";
calculator.className = "calculator";
input_box.id = "inputBox";
numBtn.className = "nums";
input.id = "result";
h1.innerText = "Calculator";
h1.id = "title";
h1.className = "text-center";
//Initiation of tag p:-
p.innerText = "This calculator program Using DOM";
p.id= "description";
p.className = "text-center";
//Using append method:-
document.body.append(h1, p, container);
container.append(calculator);
calculator.append(input_box,numBtn);
const inputBox = document.getElementById("inputBox");
inputBox.append(input);
//Buttton creation:-
function buttons(vall){
let element = document.createElement("button");
element.setAttribute("value", vall);
element.setAttribute("id", vall);
element.innerText= vall;
//Using revealed method:-
let btnList = element.innerText;
if (btnList == "C" || btnList === "←"){
switch(btnList === vall){
case vall ==="C":
element.style.color = "red";
element.id = "clear";
element.value = "";
element.addEventListener("click",()=>{
input.value = "";
});
break;
case vall ==="←":
element.addEventListener("click",()=>{
input.value = input.value.slice(0,-1)
})
element.value = ""
break;
}
}
if(
btnList ==="X" ||
btnList ==="/" ||
btnList ==="-" ||
btnList ==="+" ||
btnList ==="."
) {
element.style.color = "blue";
switch(btnList === vall){
case vall ==="+":
element.id="add";
break;
case vall ==="-":
element.id="subtract";
break;
case vall ==="X":
element.id="multiplication";
element.value = "*";
break;
case vall ==="/":
element.id="division";
break;
case vall ===".":
element.id="point";
}
}
//Using input condition alert:-
if(btnList === "="){
element.id = "equal";
element.value = ""
element.addEventListener("click",()=>{
try{
input.value = eval(input.value);
}
catch(error){
alert("Invalid input")
input.value = ""
}
})
}
element.addEventListener("click",()=>{
input.value += element.value;
});
return element;
}
//Using for loop repeat the calculation proces:-
for(let i=0;i<numList.length;i++){
let inp = buttons(numList[i]);
numBtn.append(inp);
}