পরিচিতি
Underscore.js একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনাকে জাভাস্ক্রিপ্ট কোডকে আরও কার্যকর, দ্রুত এবং পরিষ্কারভাবে লেখার সুবিধা দেয়। এটি বিভিন্ন হেল্পার ফাংশন সরবরাহ করে যা অ্যারে, অবজেক্ট, ফাংশন এবং অন্যান্য ডেটা স্ট্রাকচারের সাথে কাজ করতে সহায়তা করে।
এখানে আমরা একটি টু-ডু লিস্ট অ্যাপ্লিকেশন তৈরি করব যা Underscore.js ব্যবহার করে ফিল্টার, ম্যাপ এবং রিডুস এর মতো সাধারণ ডেটা ম্যানিপুলেশন কার্যকলাপ সম্পন্ন করবে।
টু-ডু লিস্ট অ্যাপ্লিকেশন তৈরি করা
এই টিউটোরিয়ালে আমরা একটি সহজ টু-ডু অ্যাপ তৈরি করব যেখানে ব্যবহারকারী টাস্ক যোগ করতে পারবে, টাস্ক মার্ক এজ কমপ্লিট (সম্পন্ন) করতে পারবে এবং টাস্কগুলো ফিল্টার করতে পারবে (যেমন "সম্পন্ন" বা "অপূর্ণ").
প্রয়োজনীয় উপাদান:
- HTML - অ্যাপের UI (ইউজার ইন্টারফেস) তৈরি করবে।
- CSS - অ্যাপের ডিজাইন এবং স্টাইলিং করবে।
- JavaScript (Underscore.js) - অ্যাপের কার্যকারিতা এবং লজিক পরিচালনা করবে।
১. HTML ফাইল: index.html
প্রথমে একটি HTML ফাইল তৈরি করুন যেখানে অ্যাপের UI থাকবে। আমরা দুটি মূল অংশ তৈরি করব:
- টু-ডু টাস্ক যোগ করার ইনপুট ফিল্ড
- টাস্কের তালিকা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task...">
<button id="add-task">Add Task</button>
<ul id="task-list">
<!-- Tasks will be added here -->
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script src="app.js"></script>
</body>
</html>
২. CSS ফাইল: style.css
এখন কিছু বেসিক স্টাইল যোগ করি যা আমাদের অ্যাপের লেআউট এবং ডিজাইনকে উন্নত করবে।
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
input {
width: 70%;
padding: 10px;
margin-right: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
li.completed {
text-decoration: line-through;
color: #888;
}
li button {
background-color: #f44336;
color: white;
border: none;
cursor: pointer;
}
li button:hover {
background-color: #d32f2f;
}
৩. JavaScript ফাইল: app.js
এখন আসি অ্যাপের কার্যকারিতায়। আমরা Underscore.js এর ফাংশন ব্যবহার করে ডেটা ম্যানিপুলেশন এবং অ্যাপের লজিক তৈরি করব।
// অ্যাপের ডাটাবেস (এখানে কেবল অ্যারে ব্যবহার করা হয়েছে)
let tasks = [];
// DOM এলিমেন্টগুলি সিলেক্ট করা
const taskInput = document.getElementById('new-task');
const addButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');
// টাস্ক অ্যারে থেকে টাস্ক লিস্টের HTML তৈরি করা
function renderTasks() {
taskList.innerHTML = ''; // তালিকা পরিষ্কার করা
_.each(tasks, function(task, index) {
const li = document.createElement('li');
li.classList.toggle('completed', task.completed);
li.innerHTML = `
${task.name}
<button onclick="deleteTask(${index})">Delete</button>
`;
li.addEventListener('click', function() {
toggleTaskCompletion(index);
});
taskList.appendChild(li);
});
}
// নতুন টাস্ক যোগ করা
addButton.addEventListener('click', function() {
const taskName = taskInput.value.trim();
if (taskName) {
const newTask = {
name: taskName,
completed: false
};
tasks.push(newTask);
taskInput.value = ''; // ইনপুট ক্লিয়ার করা
renderTasks(); // টাস্ক তালিকা আপডেট করা
}
});
// টাস্কের অবস্থা পরিবর্তন করা (কমপ্লিট অথবা ইনকামপ্লিট)
function toggleTaskCompletion(index) {
tasks[index].completed = !tasks[index].completed;
renderTasks();
}
// টাস্ক মুছে ফেলা
function deleteTask(index) {
tasks.splice(index, 1); // নির্দিষ্ট টাস্ক মুছে ফেলা
renderTasks();
}
// পৃষ্ঠার প্রথম লোডে টাস্কগুলো রেন্ডার করা
renderTasks();
কোড বিশ্লেষণ:
tasksঅ্যারে: টাস্কগুলো এই অ্যারেতে সংরক্ষণ করা হয়, যেখানে প্রতিটি টাস্ক একটি অবজেক্ট হিসেবে রাখা হয়, যার মধ্যেname(টাস্কের নাম) এবংcompleted(কমপ্লিট হয়েছে কি না) প্রপার্টি থাকে।renderTasks(): এই ফাংশনটিtasksঅ্যারেটি রেন্ডার করে এবং প্রতিটি টাস্ককে HTML তালিকায় প্রদর্শন করে।toggleTaskCompletion(): টাস্ক ক্লিক করার মাধ্যমে টাস্কের সম্পন্ন/অপূর্ণ অবস্থা পরিবর্তন করা হয়।deleteTask(): টাস্ক মুছে ফেলার জন্য এই ফাংশনটি ব্যবহৃত হয়।_.each(): Underscore.js-এর_.each()ফাংশন ব্যবহার করেtasksঅ্যারে ট্রাভার্স করা হয় এবং প্রতিটি টাস্ক রেন্ডার করা হয়।
পারফরম্যান্স অপটিমাইজেশন:
- Underscore.js এর
_.each()ফাংশনটি অ্যারে বা অবজেক্টের ওপর কাজ করতে দ্রুত এবং কার্যকরী। এই ফাংশন ব্যবহার করে কোড আরও পরিষ্কার এবং সংক্ষিপ্ত করা যায়। - কোডের পারফরম্যান্স আরও বৃদ্ধি করার জন্য Debounce বা Throttle ব্যবহার করা যেতে পারে, যেমন টাস্ক যোগ করার সময় অতিরিক্ত রেন্ডারিং এড়ানো।
সারাংশ
এই টিউটোরিয়ালে Underscore.js ব্যবহার করে একটি টু-ডু লিস্ট অ্যাপ তৈরি করা হয়েছে, যেখানে টাস্ক যোগ, মুছে ফেলা এবং সম্পন্ন হওয়া ফিচার রয়েছে। আমরা Underscore.js এর _.each() ফাংশন ব্যবহার করে অ্যারে ম্যানিপুলেশন করেছি, যা কোডকে আরও সহজ, পরিষ্কার এবং কার্যকরী করেছে। Underscore.js এর এই ফাংশনগুলো ব্যবহার করে কোড লিখে পারফরম্যান্স অপটিমাইজেশন করা সম্ভব এবং অ্যাপের কার্যকারিতা বৃদ্ধি করা যায়।
Read more
