Merge pull request #1 from arpitjha867/main · DPG-Code/javaScript-projects@c7e35fc · GitHub
Skip to content

Commit c7e35fc

Browse files
tamannasghtamannasgh
authored
Merge pull request tamannasgh#1 from arpitjha867/main
basic javascript calculator
2 parents 78791c8 + 889c472 commit c7e35fc

4 files changed

Lines changed: 229 additions & 0 deletions

File tree

‎basic-projects/arpitjha867-calculator/README.md‎

Lines changed: 8 additions & 0 deletions

‎basic-projects/arpitjha867-calculator/index.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
12+
<link rel="stylesheet" href="style.css">
13+
<title>MyCalculator</title>
14+
</head>
15+
16+
<body>
17+
<!-- nav bar -->
18+
<nav class="navbar navbar-expand-lg bg-dark">
19+
<div class="container-fluid">
20+
<a class="navbar-brand" href="#">MyCalculator</a>
21+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
25+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
26+
<li class="nav-item">
27+
<a class="nav-link active" aria-current="page" href="#">Home</a>
28+
</li>
29+
<li class="nav-item">
30+
<a class="nav-link" href="#">Link</a>
31+
</li>
32+
<li class="nav-item dropdown">
33+
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
34+
Dropdown
35+
</a>
36+
<ul class="dropdown-menu">
37+
<li><a class="dropdown-item" href="#">Action</a></li>
38+
<li><a class="dropdown-item" href="#">Another action</a></li>
39+
<li><hr class="dropdown-divider"></li>
40+
<li><a class="dropdown-item" href="#">Something else here</a></li>
41+
</ul>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link disabled">Disabled</a>
45+
</li>
46+
</ul>
47+
<form class="d-flex" role="search">
48+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
49+
<button class="btn btn-outline-success" type="submit">Search</button>
50+
</form>
51+
</div>
52+
</div>
53+
</nav>
54+
55+
<!-- title of the calculator -->
56+
57+
<div class="heading" >
58+
<h2 id="head1">MyCalculator</h2>
59+
</div>
60+
61+
<!-- calculator main layout here -->
62+
63+
<div id="calculatorBody">
64+
<div id="calculatorBtn">
65+
<input id="screen" type="text" placeholder="" name="screen">
66+
<div id="buttons">
67+
<table>
68+
<tr>
69+
<td><button class="btn btn-primary">(</button></td>
70+
<td><button class="btn btn-primary">)</button></td>
71+
<td><button class="btn btn-primary">C</button></td>
72+
<td><button class="btn btn-primary">/</button></td>
73+
</tr>
74+
<tr>
75+
<td><button class="btn btn-primary">7</button></td>
76+
<td><button class="btn btn-primary">8</button></td>
77+
<td><button class="btn btn-primary">9</button></td>
78+
<td><button class="btn btn-primary">*</button></td>
79+
</tr>
80+
<tr>
81+
<td><button class="btn btn-primary">4</button></td>
82+
<td><button class="btn btn-primary">5</button></td>
83+
<td><button class="btn btn-primary">6</button></td>
84+
<td><button class="btn btn-primary">-</button></td>
85+
</tr>
86+
<tr>
87+
<td><button class="btn btn-primary">1</button></td>
88+
<td><button class="btn btn-primary">2</button></td>
89+
<td><button class="btn btn-primary">3</button></td>
90+
<td><button class="btn btn-primary">+</button></td>
91+
</tr>
92+
<tr>
93+
<td><button class="btn btn-primary">%</button></td>
94+
<td><button class="btn btn-primary">0</button></td>
95+
<td><button class="btn btn-primary">.</button></td>
96+
<td><button class="btn btn-primary">=</button></td>
97+
</tr>
98+
</table>
99+
</div>
100+
</div>
101+
</div>
102+
103+
104+
105+
106+
107+
108+
109+
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
<!-- Optional JavaScript; choose one of the two! -->
123+
124+
<!-- Option 1: Bootstrap Bundle with Popper -->
125+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
126+
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
127+
crossorigin="anonymous"></script>
128+
129+
<!-- Option 2: Separate Popper and Bootstrap JS -->
130+
131+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
132+
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
133+
crossorigin="anonymous"></script>
134+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
135+
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
136+
crossorigin="anonymous"></script>
137+
138+
</body>
139+
<script src="index.js"></script>
140+
141+
</html>

‎basic-projects/arpitjha867-calculator/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
console.log('welcome')
2+
3+
let btn=document.getElementsByClassName(`btn`)
4+
let screen=document.getElementById('screen')
5+
6+
console.log(btn)
7+
8+
let screenValue=""
9+
10+
for(let ele of btn){
11+
ele.addEventListener(`click`,(e)=>{
12+
let buttonText =e.target.innerText
13+
console.log(`button is `,buttonText)
14+
if(buttonText=='='){
15+
screen.value=eval(screenValue)
16+
}else if(buttonText=='C'){
17+
screenValue=""
18+
screen.value=screenValue
19+
}else{
20+
screenValue+=buttonText
21+
screen.value=screenValue
22+
}
23+
24+
})
25+
}
26+
27+
28+

‎basic-projects/arpitjha867-calculator/style.css‎

Lines changed: 52 additions & 0 deletions

0 commit comments

Comments
 (0)