diff --git a/cover.jpg b/cover.jpg
new file mode 100644
index 0000000..84ef43c
Binary files /dev/null and b/cover.jpg differ
diff --git a/index.html b/index.html
index 74baee3..0fcb75e 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,41 @@
- Simple Click Game
+ Simple Tip Calculator - Practical JavaScript
-
-
0
+
-
-
-
+
+
+
+
+
Tip
+
BDT 0.00
+
Per Person
+
+
+
Total
+
BDT 0.00
+
Per Person
+
+
diff --git a/script-solved.js b/script-solved.js
index abee0d7..77702f9 100644
--- a/script-solved.js
+++ b/script-solved.js
@@ -1,68 +1,35 @@
-// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন
-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 tipCalculator = document.querySelector('.tip-calculator');
+const selectTotal = document.querySelector('.amount_total span');
+const selectTipPerPerson = document.querySelector('.tip_per_person span');
+
+const data = {
+ bill: 0,
+ tip: 0,
+ person: 1
+}
-// গেইম শুরু করার ফাংশন
-const start = () => {
- // কাউন্ট জিরোতে সেট হবে
- count = 0;
+tipCalculator.addEventListener('change', (e) => {
+ if(validateInput(e.target.value)) {
+ e.target.classList.remove('err');
- // কাউন্টের টেক্সটাও জিরোতে সেট হবে
- stats.textContent = count;
+ data[e.target.name] = parseFloat(e.target.value);
- // ক্লিক বাটন থেকে ডিসাবল্ড অবস্থা সরিয়ে ফেলা
- btnClick.removeAttribute('disabled');
+ const tip = (data.bill * data.tip) / 100;
- // কাউন্ট শুরু করা
- startCounting();
-}
+ let total = data.bill + tip;
+ total = total / data.person;
+ total = total.toFixed(2);
+ selectTotal.textContent = total;
-// কাউন্ট শুরু করার ফাংশন
-const startCounting = () => {
- // সেট টাইম আউট ফাংশন, ২ সেকেন্ড এর জন্যে অপেক্ষা করবে
- setTimeout(() => {
- // উইন হয়েছে কিনা দেখার জন্যে
- if(isWin()) {
- // উইন হলে উইনের টেক্সট দেখানো
- stats.textContent = 'You Won!';
- } else {
- // উইন না হলে উইন হয়নি সে টেক্সট দেখানো
- stats.textContent = 'You Lost!';
- }
- // উইন হয়ে গেলে ক্লিক বাটন ডিসাবল করে ফেলা
- btnClick.setAttribute('disabled', true);
- }, 2000);
-}
+ let tip_per_person = tip / data.person;
+ tip_per_person = tip_per_person.toFixed(2);
+ selectTipPerPerson.textContent = tip_per_person;
-// উইন হয়েছে কিনা চেক করুন
-const isWin = () => {
- // স্কোর চেক করা
- if(count < winScore) {
- // কাউন্ট উইনস্কোর থেকে ছোটো হলে উইন হয়নি
- return false;
} else {
- // কাউন্ট উইনস্কোর থেকে বড় হলে উইন হয়েছে
- return true;
+ e.target.classList.add('err');
}
+});
+
+const validateInput = input => {
+ return (/^\d+$/).test(input);
}
diff --git a/style.css b/style.css
index 79b5112..9a3a95f 100644
--- a/style.css
+++ b/style.css
@@ -12,55 +12,90 @@ html, body {
}
body {
- height: 100vh;
+ min-height: 100vh;
width: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
display: flex;
align-items: center;
- background: #8E2DE2;
- background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
- background: linear-gradient(to right, #4A00E0, #8E2DE2);
+ background: url(cover.jpg);
+ background-size: cover;
+ background-position: center;
}
body>div {
flex: 1;
}
-button {
- border: none;
- font-weight: 900;
- padding: 10px 25px;
- text-transform: uppercase;
+.header h2 {
+ color: #fff;
+ margin-bottom: 25px;
+}
+
+.calculator {
+ display: flex;
+ color: rgba(0, 0, 0, 0.75);
+ padding: 25px;
+ width: 600px;
+ margin: 0 auto;
+ border-radius: 4px;
+ background: #fff;
+}
+
+.calculator>div,
+.calculator>form {
+ flex: 1;
+ padding: 0 10px;
+}
+
+.result {
+ align-self: center;
+}
+
+.tip_per_person {
+ border-bottom: solid 1px rgba(255, 255, 255, 0.25);
+}
+
+.result div {
+ padding: 15px 0;
+}
+
+.result div p {
font-size: 18px;
- margin: 0 5px;
- border-radius: 40px;
+ text-transform: uppercase;
}
-.points {
- margin-bottom: 25px;
+.result div .amount_tip,
+.result div .amount_total {
+ font-size: 36px;
+ font-weight: 900;
+ margin: 5px 0;
}
-.points .stats {
- font-size: 108px;
- font-weight: bold;
- color: #FFEB3B;
+input {
+ border: solid 2px rgba(0, 0, 0, 0.2);
+ padding: 15px 10px;
+ font-size: 15px;
+ width: 100%;
+ border-radius: 4px;
}
-button[name=start] {
- background-color: #4caf50;
- color: #fff;
+input.err {
+ border: solid 2px #F44336;
}
-button[name=click] {
- background-color: #F44336;
- color: #fff;
+.input-group {
+ margin: 10px 0;
}
-button[disabled] {
- background-color: #9E9E9E;
- cursor: not-allowed;
+.input-group label {
+ color: rgba(0, 0, 0, 0.75);
+ display: block;
+ text-align: left;
+ font-weight: 900;
+ text-transform: uppercase;
+ margin-bottom: 5px;
}
.copyright {