Skip to content

Commit 44770a1

Browse files
zonayedpcazonayedpca
committed
calculator done
1 parent d53e8e2 commit 44770a1

File tree

5 files changed

+271
-0
lines changed

5 files changed

+271
-0
lines changed

‎cover.png

121 KB
Loading

‎index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Simple Calculator - Practical JavaScript</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
<div class="wrapper">
10+
<div class="calculator">
11+
<div class="display">
12+
<div class="result">
13+
<p>0</p>
14+
</div>
15+
<div class="inputs">
16+
<input type="text" name="input" placeholder="0"/>
17+
</div>
18+
</div>
19+
<div class="keypad">
20+
<p class="function big">C</p>
21+
<p class="function">%</p>
22+
<p class="function col-purple">x</p>
23+
<p>1</p>
24+
<p>2</p>
25+
<p>3</p>
26+
<p class="function col-orange">-</p>
27+
<p>4</p>
28+
<p>5</p>
29+
<p>6</p>
30+
<p class="function col-deepgreen">/</p>
31+
<p>7</p>
32+
<p>8</p>
33+
<p>9</p>
34+
<p class="function col-red">+</p>
35+
<p>0</p>
36+
<p>.</p>
37+
<p class="function btn-equal disabled col-green big">=</p>
38+
</div>
39+
</div>
40+
<div class="copyright">
41+
<ul>
42+
<li>হাতেকলমে জাভাস্ক্রিপ্ট</li>
43+
<li><a href="https://www.zonayed.me">জুনায়েদ আহমেদ</a></li>
44+
</ul>
45+
</div>
46+
</div>
47+
<script src="script.js" charset="utf-8"></script>
48+
</body>
49+
</html>

‎script-solved.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন
2+
const selectKeypad = document.querySelector('.keypad');
3+
const selectInput = document.querySelector('input[name=input]');
4+
const selectEqualBtn = document.querySelector('.btn-equal');
5+
const selectResult = document.querySelector('.result p');
6+
7+
// ইনপুট ডাটা
8+
let data = '';
9+
10+
// ইনপুট ভ্যালিডেট করা, ইনপুট ক্যালকুলেশন করার মতো কিনা
11+
const validateInput = input => {
12+
// রেগুলার এক্সপ্রেশন দিয়ে ইনপুট যাচাই
13+
return (/^[-+]?[0-9\.]+?([-+*/x%]+[-+]?[0-9\.]+)*$/).test(input);
14+
}
15+
16+
// ইকুয়্যাল বাটনের অবস্থার ফাংশন
17+
const equalBtnState = (value) => {
18+
// ইনপুট ফিল্ডের ডাটা ভ্যালিডেট করা
19+
if(validateInput(value)) {
20+
// ইকুয়্যাল বাটন একমাত্র ইনপুট ক্যালকুলেট করার মতো হলেই ক্লিক এনাবল করা
21+
selectEqualBtn.classList.remove('disabled');
22+
} else {
23+
// নাইলে বাটন ডিসাবল করে রাখা
24+
selectEqualBtn.classList.add('disabled');
25+
}
26+
}
27+
28+
// ইনপুট ফিল্ডের চেঞ্জ ইভেন্ট
29+
selectInput.addEventListener('change', (e) => {
30+
// ইনপুট ফিল্ডের ইনপুট ডাটাতে স্টোর করে ফেলা
31+
data = e.target.value;
32+
// ডাটা অনুযায়ী ইকুয়্যাল বাটনের অবস্থা দেখা
33+
equalBtnState(e.target.value);
34+
})
35+
36+
// ক্যালকুলেটরের কীপ্যাড বাটনের ইভেন্ট, পুরোটা কীপ্যাডের উপ ইভেন্ট লাগানো হয়েছে
37+
selectKeypad.addEventListener('click', (e) => {
38+
// ইলিমেন্ট যদি বাটনই হয় তাহলে অ্যাকশন নেওয়া
39+
if(e.target.tagName==='P') {
40+
// আমাদের বাটনের কাজ অনুযায়ী ডাটা সেট করা
41+
switch (e.target.textContent) {
42+
case 'C':
43+
// এই কেস হলে ডাটা ক্লিয়ার করা ফেলা
44+
data = '';
45+
break;
46+
case '=':
47+
// এই কেস হলে ডাটাতে এটার কোনো ইফেক্ট পড়বে না
48+
break;
49+
case 'x':
50+
// এই কেস হলে এটাকে আসল ম্যাথ অপারেটর * এ কনভার্ট করে ফেলা
51+
data += '*';
52+
break;
53+
case '%':
54+
// এই কেস হলে মূল ক্যালকুলেশনের জন্যে তৈরী করে একটা এক্সপ্রেশন তৈরী করা
55+
data += '/100*'
56+
break;
57+
default:
58+
// বাই ডিফল্ট বাটনের ভ্যালু ডাটাতে অ্যাড করা
59+
data += e.target.textContent;
60+
}
61+
// ইনপুট ফিল্ডে ডাটা দেখানো
62+
selectInput.value = data;
63+
64+
// ডাটা অনুযায়ী ইকুয়্যাল বাটনের অবস্থা দেখা
65+
equalBtnState(selectInput.value);
66+
}
67+
})
68+
69+
// ইকুয়্যাল বাটনের ক্লিক হ্যান্ডেল করা
70+
selectEqualBtn.addEventListener('click', () => {
71+
// আগে শিউর হওয়া ইকুয়্যাল বাটন ডিসাবল না এনাবল
72+
if(!selectEqualBtn.classList.contains('disabled')) {
73+
// আমাদের ম্যাথমেটিক্যাল এক্সপ্রেশন তৈরী, এখন এটাকে ইভালিউট করা
74+
const result = eval(data);
75+
// এবার রেসাল্ট ইউজারকে দেখানো
76+
selectResult.textContent = result;
77+
}
78+
})

‎script.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Write your code here

‎style.css

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900');
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
}
7+
8+
html, body {
9+
margin: 0;
10+
padding: 0;
11+
line-height: 1;
12+
}
13+
14+
body {
15+
min-height: 100vh;
16+
width: 100%;
17+
font-family: 'Roboto', sans-serif;
18+
font-weight: 300;
19+
text-align: center;
20+
display: flex;
21+
color: #333;
22+
align-items: center;
23+
background-image: url(cover.png);
24+
background-color: #f2f2f2;
25+
background-size: cover;
26+
background-position: center;
27+
}
28+
29+
body>div {
30+
flex: 1;
31+
}
32+
33+
.calculator {
34+
width: 320px;
35+
margin: 0 auto;
36+
background: #fff;
37+
border-radius: 4px;
38+
box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
39+
}
40+
41+
.display {
42+
color: #4b4c4c;
43+
padding: 30px 25px;
44+
font-size: 42px;
45+
text-align: right;
46+
background-color: #efefef;
47+
}
48+
49+
.display .result {
50+
overflow: hidden;
51+
}
52+
53+
.display .inputs input {
54+
font-size: 22px;
55+
font-weight: 900;
56+
width: 100%;
57+
background: transparent;
58+
border: none;
59+
text-align: right;
60+
color: rgba(0, 0, 0, 0.5);
61+
letter-spacing: 3px;
62+
font-family: 'Roboto', sans-serif;
63+
font-weight: 900;
64+
}
65+
66+
.keypad {
67+
display: flex;
68+
flex-wrap: wrap;
69+
padding: 20px 10px;
70+
}
71+
72+
.keypad>p {
73+
flex-basis: calc(100% / 4 - 30px);
74+
margin: 10px 15px;
75+
font-weight: 900;
76+
padding: 15px 10px;
77+
border-radius: 50px;
78+
}
79+
80+
.keypad .big {
81+
flex: 2;
82+
flex-basis: calc(100% / 3)
83+
}
84+
85+
.keypad .function {
86+
background: #efefef;
87+
box-shadow: 0 5px 13px -5px rgba(0, 0, 0, 0.5);
88+
}
89+
90+
.keypad .col-purple {
91+
background: #9C27B0;
92+
color: #fff;
93+
}
94+
95+
.keypad .col-orange {
96+
background: #FF9800;
97+
color: #fff;
98+
}
99+
100+
.keypad .col-deepgreen {
101+
background: #1B5E20;
102+
color: #fff;
103+
}
104+
105+
.keypad .col-red {
106+
background-color: #F44336;
107+
color: #fff;
108+
}
109+
110+
.keypad .col-green {
111+
background: #4CAF50;
112+
color: #fff;
113+
}
114+
115+
116+
.keypad .disabled {
117+
cursor: not-allowed;
118+
background: #E0E0E0;
119+
}
120+
121+
.copyright {
122+
margin-top: 45px;
123+
}
124+
125+
.copyright ul {
126+
margin: 0;
127+
list-style: none;
128+
padding: 0;
129+
}
130+
131+
.copyright ul li {
132+
display: inline-block;
133+
margin: 0 5px;
134+
font-weight: 900;
135+
font-size: 13px;
136+
}
137+
138+
.copyright ul li a {
139+
text-decoration: none;
140+
padding: 3px 8px;
141+
border-radius: 4px;
142+
background: #fff;
143+
}

0 commit comments

Comments
 (0)