diff --git a/cover.jpg b/cover.jpg
new file mode 100644
index 0000000..86ab480
Binary files /dev/null and b/cover.jpg differ
diff --git a/index.html b/index.html
index 74baee3..5ef3cc2 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,29 @@
- Simple Click Game
+ Simple To Do List - Practical JavaScript
-
-
-
-
+
+
+
To Do List
+
+
+
+
+ - X7 minutes exercise
+ - XBuy some chocolates
+ - XMake a Project
+ - XBuy a Jacket
+ - XMath Homework
+ - XStart React Native
+
+
diff --git a/script-solved.js b/script-solved.js
index abee0d7..faabe83 100644
--- a/script-solved.js
+++ b/script-solved.js
@@ -1,68 +1,49 @@
-// প্রয়োজনীয় সব ইলিমেন্ট সিলেক্ট করে নিন
-const stats = document.querySelector('.stats');
-const btnStart = document.querySelector('button[name=start]');
-const btnClick = document.querySelector('button[name=click]');
+const selectItem = document.querySelector('.body ul');
+const selectForm = document.querySelector('.todo');
-// ডিফল্ট উইন স্কোর সেট করুন
-const winScore = 10;
-
-// একটা কাউন্ট ভ্যারিয়েবল সেট করুন
-let count = 0;
-
-// স্টার্ট বাটনে ক্লিক ইভেন্ট লাগান
-btnStart.addEventListener('click', () => {
- // ক্লিক করলেই গেইম শুরু হওয়ার ফাংশন চলবে
- start();
-});
+selectItem.addEventListener('click', (e) => {
+ if(e.target.tagName==='LI') {
+ if(e.target.classList.contains('done')) {
+ e.target.classList.remove('done');
+ } else {
+ e.target.classList.add('done');
+ }
+ }
-// ক্লিক বাটনে ক্লিক ইভেন্ট লাগান
-btnClick.addEventListener('click', () => {
- // ক্লিক করলেই কাউন্ট এক করে বাড়বে
- count++;
- // কাউন্টটা শো করান
- stats.textContent = count;
+ if(e.target.classList.contains('remove')) {
+ e.target.parentNode.remove()
+ }
+})
+
+selectForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+ const input = e.target.task.value;
+ if(validateInput(input, e.target.task)) {
+ selectItem.insertAdjacentElement('afterbegin', newItem(e.target.task.value));
+ e.target.task.value = '';
+ }
});
-// গেইম শুরু করার ফাংশন
-const start = () => {
- // কাউন্ট জিরোতে সেট হবে
- count = 0;
-
- // কাউন্টের টেক্সটাও জিরোতে সেট হবে
- stats.textContent = count;
-
- // ক্লিক বাটন থেকে ডিসাবল্ড অবস্থা সরিয়ে ফেলা
- btnClick.removeAttribute('disabled');
-
- // কাউন্ট শুরু করা
- startCounting();
+const validateInput = (input, element) => {
+ if(input) {
+ element.parentNode.classList.remove('error');
+ return true;
+ } else {
+ element.parentNode.classList.add('error');
+ return false;
+ }
}
-// কাউন্ট শুরু করার ফাংশন
-const startCounting = () => {
- // সেট টাইম আউট ফাংশন, ২ সেকেন্ড এর জন্যে অপেক্ষা করবে
- setTimeout(() => {
- // উইন হয়েছে কিনা দেখার জন্যে
- if(isWin()) {
- // উইন হলে উইনের টেক্সট দেখানো
- stats.textContent = 'You Won!';
- } else {
- // উইন না হলে উইন হয়নি সে টেক্সট দেখানো
- stats.textContent = 'You Lost!';
- }
- // উইন হয়ে গেলে ক্লিক বাটন ডিসাবল করে ফেলা
- btnClick.setAttribute('disabled', true);
- }, 2000);
+const newItem = (content) => {
+ const createAItem = document.createElement('li');
+ createAItem.textContent = content;
+ createAItem.insertAdjacentElement('afterbegin', removeButton());
+ return createAItem;
}
-// উইন হয়েছে কিনা চেক করুন
-const isWin = () => {
- // স্কোর চেক করা
- if(count < winScore) {
- // কাউন্ট উইনস্কোর থেকে ছোটো হলে উইন হয়নি
- return false;
- } else {
- // কাউন্ট উইনস্কোর থেকে বড় হলে উইন হয়েছে
- return true;
- }
+const removeButton = () => {
+ const createRemoveBtn = document.createElement('span');
+ createRemoveBtn.classList.add('remove');
+ createRemoveBtn.textContent = 'X';
+ return createRemoveBtn;
}
diff --git a/style.css b/style.css
index 79b5112..5153914 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,7 @@
* {
box-sizing: border-box;
margin: 0;
+ padding: 0;
}
html, body {
@@ -12,60 +13,123 @@ 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.jpg);
+ background-color: #f2f2f2;
+ background-size: cover;
+ background-position: center;
+}
+
+ul {
+ list-style: none;
}
body>div {
flex: 1;
}
-button {
- border: none;
- font-weight: 900;
- padding: 10px 25px;
+.todolist {
+ background: #fff;
+ padding: 30px 15px;
+ width: 320px;
+ margin: 0 auto;
+ border-radius: 15px;
+ box-shadow: 2px 2px 15px -5px rgba(0, 0, 0, 0.5);
+}
+
+.head h3 {
+ font-size: 26px;
text-transform: uppercase;
- font-size: 18px;
- margin: 0 5px;
- border-radius: 40px;
+ margin-bottom: 25px;
+ color: rgba(0, 0, 0, 0.5);
}
-.points {
+.todo {
+ display: flex;
+ border-radius: 40px;
margin-bottom: 25px;
+ padding: 8px;
+ box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.5);
+}
+
+.todo.error {
+ box-shadow: 0 0 30px -5px #F44336;
+}
+
+.todo>* {
+ flex: 5;
+}
+
+.todo input {
+ padding: 10px 15px;
+ font-family: 'Roboto', sans-serif;
+ border: none;
+ font-size: 16px;
}
-.points .stats {
- font-size: 108px;
- font-weight: bold;
- color: #FFEB3B;
+.todo input:focus {
+ outline: none;
}
-button[name=start] {
- background-color: #4caf50;
+.todo button[name=submit] {
+ flex: 1;
+ background: #4CAF50;
+ font-size: 38px;
+ border: none;
+ cursor: pointer;
color: #fff;
+ border-radius: 40px;
}
-button[name=click] {
- background-color: #F44336;
+.remove {
+ visibility: hidden;
+ position: absolute;
+ left: 0;
+ display: inline-block;
+ background: #F44336;
color: #fff;
+ font-size: 13px;
+ padding: 2px 5px;
+ border-radius: 34px;
+ margin-right: 10px;
+ cursor: pointer;
+ transition: 0.2s all;
+}
+
+.body ul {
+ padding: 0 20px;
}
-button[disabled] {
- background-color: #9E9E9E;
- cursor: not-allowed;
+.body ul li {
+ position: relative;
+ font-size: 18px;
+ padding: 10px 0;
+ text-align: left;
+ transition: all 0.5s;
+}
+
+.body ul li:hover {
+ padding-left: 30px;
+}
+
+.body ul li:hover .remove {
+ visibility: visible;
+}
+
+.body ul li.done {
+ color: rgba(0, 0, 0, 0.3);
+ text-decoration: line-through;
}
.copyright {
margin-top: 45px;
- color: #fff;
}
.copyright ul {
@@ -85,5 +149,6 @@ button[disabled] {
text-decoration: none;
padding: 3px 8px;
border-radius: 4px;
- background: #fff;
+ background: #333;
+ color: #fff;
}