Project - To-Do List
একটি করণীয় তালিকা
একটি করণীয় তালিকা
এই প্রকল্পে আপনি একটি করণীয় তালিকা তৈরি করবেন।
আপনি টাস্ক যোগ করতে পারেন, টাস্ক মুছে ফেলতে পারেন এবং সব টাস্ক সাফ করতে পারেন।
কাজগুলি স্থানীয় স্টোরেজ-এ একটি অ্যারেতে সংরক্ষণ করা হয়।
তুমি শিখবে
একটি সারিতে আইটেম সংরক্ষণ করা হচ্ছে
একটি অ্যারে আইটেম সংরক্ষণ কিভাবে
একটি অ্যারে থেকে আইটেম মুছে ফেলা হচ্ছে
কিভাবে একটি অ্যারে থেকে আইটেম মুছে ফেলা যায়
জাভাস্ক্রিপ্ট ব্যবহার করে একটি তালিকা প্রদর্শন করা হচ্ছে
কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে একটি তালিকা প্রদর্শন করবেন
লোকাল স্টোরেজের সাথে ডেটা সংরক্ষণ এবং লোড হচ্ছে
লোকাল স্টোরেজ ব্যবহার করে কীভাবে ডেটা সঞ্চয় এবং লোড করবেন
প্রথম: HTML তৈরি করা
প্রথমে নিম্নলিখিত উপাদানগুলি সহ একটি HTML পৃষ্ঠা তৈরি করুন:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>To-Do List</h2>
<input id="task" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<button onclick="clearAll()">Clear All</button>
<script>
// Create a task Array
let tasks = [];
</script>
</body>
</html>একটি প্রদর্শন ফাংশন যোগ করুন
উদাহরণ
displayTasks() ফাংশন আপডেট করে এবং তালিকা প্রদর্শন করে।
// Function to display the list
function displayTasks() {
let html = "";
for (let i = 0; i < tasks.length; i++) {
html += "<li>" + tasks[i] +
" <button onclick='removeTask(" + i + ")'>x</button></li>";
}
document.getElementById("list").innerHTML = html;
}দ্রষ্টব্য:
যখনই তালিকা পরিবর্তিত হয় তখন displayTasks() ফাংশনটি কল করা উচিত।
টাস্ক অ্যাড ফাংশন যোগ করুন
উদাহরণ
// Function to Add a task
function addTask() {
let taskInput = document.getElementById("task");
let text = taskInput.value;
if (text === "") {
return;
}
tasks.push(text);
taskInput.value = "";
saveTasks();
displayTasks();
}একটি মুছে ফেলা ফাংশন যোগ করুন
উদাহরণ
কোড দ্বারা টাস্ক মুছুন:
// Function to Remove a task
function removeTask(i) {
tasks.splice(i, 1);
saveTasks();
displayTasks();
}দ্রষ্টব্য:
বাছাই পদ্ধতি স্প্লাইস(i, 1) আইটেম 1 অবস্থানে মুছে দেয়।
একটি পরিষ্কার সব ফাংশন যোগ করুন
উদাহরণ
সব মুছে দিন:
// Function to Clear all tasks
function clearAll() {
tasks = [];
saveTasks();
displayTasks();
}একটি টাস্ক সেভিং ফাংশন
উদাহরণ
স্থানীয় স্টোরেজে স্টোর করুন:
// Function to Save tasks
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}দ্রষ্টব্য:
LocalStorage-এ স্ট্রিং সংরক্ষণ করতে, আমরা JSON.stringify() ব্যবহার করে সেগুলিকে টেক্সটে রূপান্তর করি।
লোডিং কাজ ফাংশন
উদাহরণ
স্থানীয় স্টোরেজ থেকে কাজগুলি লোড করুন:
// Function to Load tasks
function loadTasks() {
let saved = localStorage.getItem("tasks");
if (saved !== null) {
tasks = JSON.parse(saved);
}
}দ্রষ্টব্য:
অ্যারে লোড করার জন্য, আমরা JSON.parse() ব্যবহার করি তাদের ফিরিয়ে আনতে।
চূড়ান্ত প্রকল্প
চূড়ান্ত HTML
<!DOCTYPE html>
<html>
<body>
<h2>To-Do List</h2>
<input id="task" placeholder="New task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<button onclick="clearAll()">Clear All</button>
<script>
// JavaScript goes here
</script>
</body>
</html>চূড়ান্ত জাভাস্ক্রিপ্ট
// Create a task Array
let tasks = [];
// Function to Display tasks
function displayTasks() {
let html = "";
for (let i = 0; i < tasks.length; i++) {
html += "<li>" + tasks[i] +
" <button onclick='removeTask(" + i + ")'>x</button></li>";
}
document.getElementById("list").innerHTML = html;
}
// Function to Add a task
function addTask() {
let taskInput = document.getElementById("task");
let text = taskInput.value;
if (text === "") {
return;
}
tasks.push(text);
taskInput.value = "";
saveTasks();
displayTasks();
}
// Function to Remove a task
function removeTask(i) {
tasks.splice(i, 1);
saveTasks();
displayTasks();
}
// Function to Clear all tasks
function clearAll() {
tasks = [];
saveTasks();
displayTasks();
}
// Function to Save tasks
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
}
// Function to Load tasks
function loadTasks() {
let saved = localStorage.getItem("tasks");
if (saved !== null) {
tasks = JSON.parse(saved);
}
}
// Load and display tasks when page loads
loadTasks();
displayTasks();ব্যায়াম
ব্যায়াম 1
ব্যবহারকারী একটি খালি কাজ যোগ করার চেষ্টা করলে একটি সতর্কতা প্রদর্শন করুন।
ব্যায়াম 2
টাস্ক যোগ করতে ব্যবহারকারীকে এন্টার কী টিপতে অনুমতি দিন।
ব্যায়াম 3
প্রতিটি পরিবর্তনের পরে স্বয়ংক্রিয়ভাবে কাজগুলি (ইতিমধ্যে সম্পন্ন) সংরক্ষণ করুন।
সংরক্ষণ করার সময় "সংরক্ষিত!" বার্তাটি প্রদর্শন করুন।
বোনাস চ্যালেঞ্জ (লেভেল আপ)
প্রকল্প আপগ্রেড করার চেষ্টা করুন:
কাজগুলিকে সম্পূর্ণ হিসাবে চিহ্নিত করুন (✔)
কাজগুলিকে সম্পূর্ণ হিসাবে চিহ্নিত করার সুবিধা
ফিল্টার কাজ: সমস্ত / সক্রিয় / সম্পূর্ণ
কাজ শ্রেণীবদ্ধ করার সুবিধা
"এডিট টাস্ক" কার্যকারিতা যোগ করুন
অ্যাসাইনমেন্ট সম্পাদনা করার সুবিধা
বর্ণানুক্রমিকভাবে কাজগুলি সাজান
কাজ শিডিউল করার সুবিধা
জাভাস্ক্রিপ্ট প্রকল্প
JavaScript Counter
একটি গণনা স্কিম যা স্থানীয় স্টোরেজে পুনরুদ্ধার এবং সঞ্চয় করে।
JavaScript Event Listener
একটি গণনা প্রোগ্রাম যা অনক্লিকের পরিবর্তে একটি ইভেন্ট লিসেনার ব্যবহার করে।
JavaScript To-Do List
স্থানীয় স্টোরেজে একটি অ্যারেতে সংরক্ষিত একটি করণীয় তালিকা।
JavaScript Modal Popup
পৃষ্ঠার শীর্ষে একটি নমুনা পপ-আপ উইন্ডো প্রদর্শিত হবে৷