diff --git a/cover.png b/cover.png
new file mode 100644
index 0000000..58b6b36
Binary files /dev/null and b/cover.png differ
diff --git a/index.html b/index.html
index 74baee3..1661d7e 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,40 @@
- Simple Click Game
+ Simple Calculator - Practical JavaScript
-
-
-
-
+
+
+
+
C
+
%
+
x
+
1
+
2
+
3
+
-
+
4
+
5
+
6
+
/
+
7
+
8
+
9
+
+
+
0
+
.
+
=
+
diff --git a/script-solved.js b/script-solved.js
index abee0d7..592c3ab 100644
--- a/script-solved.js
+++ b/script-solved.js
@@ -1,68 +1,53 @@
-// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন
-const stats = document.querySelector('.stats');
-const btnStart = document.querySelector('button[name=start]');
-const btnClick = document.querySelector('button[name=click]');
-
-// ডিফল্ট উইন স্কোর সেট করুন
-const winScore = 10;
-
-// একটা কাউন্ট ভ্যারিয়েবল সেট করুন
-let count = 0;
-
-// স্টার্ট বাটনে ক্লিক ইভেন্ট লাগান
-btnStart.addEventListener('click', () => {
- // ক্লিক করলেই গেইম শুরু হওয়ার ফাংশন চলবে
- start();
-});
-
-// ক্লিক বাটনে ক্লিক ইভেন্ট লাগান
-btnClick.addEventListener('click', () => {
- // ক্লিক করলেই কাউন্ট এক করে বাড়বে
- count++;
- // কাউন্টটা শো করান
- stats.textContent = count;
-});
-
-// গেইম শুরু করার ফাংশন
-const start = () => {
- // কাউন্ট জিরোতে সেট হবে
- count = 0;
-
- // কাউন্টের টেক্সটাও জিরোতে সেট হবে
- stats.textContent = count;
-
- // ক্লিক বাটন থেকে ডিসাবল্ড অবস্থা সরিয়ে ফেলা
- btnClick.removeAttribute('disabled');
+const selectKeypad = document.querySelector('.keypad');
+const selectInput = document.querySelector('input[name=input]');
+const selectEqualBtn = document.querySelector('.btn-equal');
+const selectResult = document.querySelector('.result p');
+
+let data = '';
+
+selectInput.addEventListener('change', (e) => {
+ data = e.target.value;
+ equalBtnState(e.target.value);
+})
+
+selectKeypad.addEventListener('click', (e) => {
+ if(e.target.tagName==='P') {
+ switch (e.target.textContent) {
+ case 'C':
+ data = '';
+ break;
+ case '=':
+ break;
+ case 'x':
+ data += '*';
+ break;
+ case '%':
+ data += '/100*'
+ break;
+ default:
+ data += e.target.textContent;
+ }
+ selectInput.value = data;
- // কাউন্ট শুরু করা
- startCounting();
-}
+ equalBtnState(selectInput.value);
+ }
+})
-// কাউন্ট শুরু করার ফাংশন
-const startCounting = () => {
- // সেট টাইম আউট ফাংশন, ২ সেকেন্ড এর জন্যে অপেক্ষা করবে
- setTimeout(() => {
- // উইন হয়েছে কিনা দেখার জন্যে
- if(isWin()) {
- // উইন হলে উইনের টেক্সট দেখানো
- stats.textContent = 'You Won!';
- } else {
- // উইন না হলে উইন হয়নি সে টেক্সট দেখানো
- stats.textContent = 'You Lost!';
- }
- // উইন হয়ে গেলে ক্লিক বাটন ডিসাবল করে ফেলা
- btnClick.setAttribute('disabled', true);
- }, 2000);
-}
+selectEqualBtn.addEventListener('click', () => {
+ if(!selectEqualBtn.classList.contains('disabled')) {
+ const result = eval(data);
+ selectResult.textContent = result;
+ }
+})
-// উইন হয়েছে কিনা চেক করুন
-const isWin = () => {
- // স্কোর চেক করা
- if(count < winScore) {
- // কাউন্ট উইনস্কোর থেকে ছোটো হলে উইন হয়নি
- return false;
+const equalBtnState = (value) => {
+ if(validateInput(value)) {
+ selectEqualBtn.classList.remove('disabled');
} else {
- // কাউন্ট উইনস্কোর থেকে বড় হলে উইন হয়েছে
- return true;
+ selectEqualBtn.classList.add('disabled');
}
}
+
+const validateInput = input => {
+ return (/^[-+]?[0-9\.]+?([-+*/x%]+[-+]?[0-9\.]+)*$/).test(input);
+}
diff --git a/style.css b/style.css
index 79b5112..b21de73 100644
--- a/style.css
+++ b/style.css
@@ -12,60 +12,114 @@ html, body {
}
body {
- height: 100vh;
+ min-height: 100vh;
width: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
display: flex;
+ color: #333;
align-items: center;
- background: #8E2DE2;
- background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
- background: linear-gradient(to right, #4A00E0, #8E2DE2);
+ background-image: url(cover.png);
+ background-color: #f2f2f2;
+ background-size: cover;
+ background-position: center;
}
body>div {
flex: 1;
}
-button {
+.calculator {
+ width: 320px;
+ margin: 0 auto;
+ background: #fff;
+ border-radius: 4px;
+ box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
+}
+
+.display {
+ color: #4b4c4c;
+ padding: 30px 25px;
+ font-size: 42px;
+ text-align: right;
+ background-color: #efefef;
+}
+
+.display .result {
+ overflow: hidden;
+}
+
+.display .inputs input {
+ font-size: 22px;
+ font-weight: 900;
+ width: 100%;
+ background: transparent;
border: none;
+ text-align: right;
+ color: rgba(0, 0, 0, 0.5);
+ letter-spacing: 3px;
+ font-family: 'Roboto', sans-serif;
font-weight: 900;
- padding: 10px 25px;
- text-transform: uppercase;
- font-size: 18px;
- margin: 0 5px;
- border-radius: 40px;
}
-.points {
- margin-bottom: 25px;
+.keypad {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 20px 10px;
}
-.points .stats {
- font-size: 108px;
- font-weight: bold;
- color: #FFEB3B;
+.keypad>p {
+ flex-basis: calc(100% / 4 - 30px);
+ margin: 10px 15px;
+ font-weight: 900;
+ padding: 15px 10px;
+ border-radius: 50px;
}
-button[name=start] {
- background-color: #4caf50;
+.keypad .big {
+ flex: 2;
+ flex-basis: calc(100% / 3)
+}
+
+.keypad .function {
+ background: #efefef;
+ box-shadow: 0 5px 13px -5px rgba(0, 0, 0, 0.5);
+}
+
+.keypad .col-purple {
+ background: #9C27B0;
+ color: #fff;
+}
+
+.keypad .col-orange {
+ background: #FF9800;
+ color: #fff;
+}
+
+.keypad .col-deepgreen {
+ background: #1B5E20;
color: #fff;
}
-button[name=click] {
+.keypad .col-red {
background-color: #F44336;
color: #fff;
}
-button[disabled] {
- background-color: #9E9E9E;
+.keypad .col-green {
+ background: #4CAF50;
+ color: #fff;
+}
+
+
+.keypad .disabled {
cursor: not-allowed;
+ background: #E0E0E0;
}
.copyright {
margin-top: 45px;
- color: #fff;
}
.copyright ul {