Skip to content

Commit f334104

Browse files
asaltcodeasaltcode
committed
Task complete
0 parents  commit f334104

File tree

4 files changed

+197
-0
lines changed

4 files changed

+197
-0
lines changed

‎index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Calculator</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<script src="https://app.zenclass.in/sheets/v1/js/zen/suite/bundle.js"></script>
12+
<script src="./script.js"></script>
13+
</body>
14+
15+
</html>

‎readme.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<h1>✌️This is a calculator program😵</h1>
2+
3+
* I have done this using only Dom in this
4+
* Calculation like addition, subtraction, multiplication and division in this calculator
5+
* Gives alert message showing if wrong input is given
6+
* This calculator is responsive for all devices
7+
* I used CSS only in this and bootstrap is do not use in this

‎script.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
const num = "C ← . X 7 8 9 / 4 5 6 - 1 2 3 + 0 00 =";
2+
const numList = num.split(" ");
3+
4+
// const h1 = document.getElementById("title");
5+
const h1 = document.createElement("h1");
6+
const p = document.createElement("p");
7+
const container = document.createElement("div");
8+
const calculator = document.createElement("div");
9+
const input_box = document.createElement("div");
10+
const numBtn = document.createElement("div");
11+
const input = document.createElement("input");
12+
13+
container.className = "container";
14+
calculator.className = "calculator";
15+
input_box.id = "inputBox";
16+
numBtn.className = "nums";
17+
input.id = "result";
18+
h1.innerText = "Calculator"
19+
h1.id = "title";
20+
h1.className = "text-center"
21+
22+
//p tag
23+
p.innerText = "This is a calculator program that uses the DOM";
24+
p.id = "description";
25+
p.className = "text-center";
26+
27+
//body append
28+
document.body.append(h1, p, container);
29+
container.append(calculator);
30+
calculator.append(input_box, numBtn);
31+
32+
const inputBox = document.getElementById("inputBox");
33+
inputBox.append(input);
34+
35+
//This function button created
36+
function buttons(valu) {
37+
let element = document.createElement("button");
38+
element.setAttribute("value", valu);
39+
element.setAttribute("id", valu);
40+
element.innerText = valu;
41+
42+
let btnList = element.innerText;
43+
if (btnList == "C" || btnList === "←") {
44+
switch (btnList === valu) {
45+
//input value all clear
46+
case valu === "C":
47+
element.style.color = "red";
48+
element.id = "clear";
49+
element.value = "";
50+
element.addEventListener("click", () => {
51+
input.value = "";
52+
});
53+
break;
54+
case valu === "←":
55+
element.addEventListener('click', ()=>{
56+
input.value = input.value.slice(0, -1)
57+
})
58+
element.value = ""
59+
break
60+
}
61+
}
62+
if (
63+
btnList === "X" ||
64+
btnList === "/" ||
65+
btnList === "-" ||
66+
btnList === "+" ||
67+
btnList === "."
68+
) {
69+
element.style.color = "blue";
70+
switch (btnList === valu) {
71+
case valu === "+":
72+
element.id = "add";
73+
break;
74+
case valu === "-":
75+
element.id = "subtract";
76+
break;
77+
case valu === "X":
78+
element.id = "multiplication";
79+
element.value = "*";
80+
break;
81+
case valu === "/":
82+
element.id = "division";
83+
break;
84+
case valu === ".":
85+
element.id = "point";
86+
}
87+
}
88+
//Calculate values for result
89+
if (btnList === "=") {
90+
element.id = "equal";
91+
element.value = ""
92+
element.addEventListener("click",()=> {
93+
try{
94+
input.value = eval(input.value);
95+
}
96+
catch(error){
97+
alert("Invalid input")
98+
input.value = ""
99+
}
100+
})
101+
}
102+
//iinserting the entered value
103+
element.addEventListener("click", () => {
104+
input.value += element.value;
105+
});
106+
107+
return element;
108+
}
109+
110+
//button value pushing
111+
for (let i = 0; i < numList.length; i++) {
112+
let inp = buttons(numList[i]);
113+
numBtn.append(inp);
114+
}

‎style.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.text-center{
7+
text-align: center;
8+
}
9+
.container{
10+
height: 100vh;
11+
display: grid;
12+
place-items: center;
13+
}
14+
.calculator{
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: space-evenly;
18+
background: #dadada;
19+
height: 80vh;
20+
width: 60vh;
21+
border: 2px solid black;
22+
border-radius: 8px;
23+
box-shadow: 2px 2px 10px black;
24+
/* position: relative; */
25+
}
26+
#inputBox{
27+
/* background-color: red; */
28+
display: flex;
29+
justify-content: center;
30+
margin-top: 20px;
31+
}
32+
#inputBox input{
33+
width: 90%;
34+
padding: 15px;
35+
background-color: #b9b9b9;
36+
border: none;
37+
outline: none;
38+
font-size: 30px;
39+
color: #919191;
40+
}
41+
.nums{
42+
position: relative;
43+
height: 75%;
44+
display: grid;
45+
justify-content: space-around;
46+
grid-template-columns: repeat(4, 50px);
47+
48+
}
49+
.nums button{
50+
border: none;
51+
outline: none;
52+
height: 25px;
53+
width: 100%;
54+
background-color: transparent;
55+
font-weight: 600;
56+
}
57+
#equal{
58+
background-color: #0d6efd !important;
59+
grid-column: 3/5;
60+
color: white;
61+
}

0 commit comments

Comments
 (0)