সহজ ধাপে একটি সরল টু‑ডু অ্যাপ বানান (সহজ ভাষায়)

আমরা যা তৈরি করছি (এবং আপনি কি শিখবেন)

এই গাইডে “অ্যাপ” বলতে আমি একটি ছোট ওয়েব অ্যাপ বুঝাচ্ছি: একটি একক পেজ যা আপনি একটি ব্রাউজার-এ খুলবেন এবং এটি আপনার ক্লিক ও টাইপ অনুযায়ী প্রতিক্রিয়া দেখাবে। কোনো ইনস্টলেশন নেই, কোনো অ্যাকাউন্ট নেই, কোনো জটিল সেটআপ নেই—শুধু এমন একটি সরল প্রজেক্ট যা আপনি লোকালি চালাতে পারবেন।

লক্ষ্য (ফিনিশ হওয়া অ্যাপটি কী করবে)

শেষে, আপনার কাছে একটি টু‑ডু অ্যাপ থাকবে যা করতে পারবে:

• টাস্ক যোগ করা ইনপুট বক্স থেকে\n- টাস্ক সম্পন্ন হিসেবে চিহ্নিত করা (যাতে আপনি দেখে নিতে পারেন কী সম্পন্ন হয়েছে)\n- অপ্রয়োজনীয় টাস্ক মুছে ফেলা\n- রিফ্রেশের পরে টাস্ক রাখবে localStorage ব্যবহার করে (ট্যাব বন্ধ করলেও সব মুছে যাবে না)\n এটি পরিপূর্ণ বা “এন্টারপ্রাইজ-গ্রেড” হবে না, এবং সেটাই উদ্দেশ্য। এটি একটি शुरुआतीদের প্রজেক্ট যাতে খুব বেশি টুল ছাড়াই মৌলিক বিষয়গুলি শেখানো হয়।

আপনি কী কী শিখবেন (সহজ ভাষায়)

আপনি ধাপে ধাপে অ্যাপটি তৈরি করবেন এবং ফ্রন্ট-এন্ড ওয়েব অ্যাপ কেমন কাজ করে তার মূল অংশগুলো শিখবেন:

• HTML পেজ স্ট্রাকচার (ইনপুট, বাটন, লিস্ট) তৈরি করতে\n- CSS যাতে পড়তে আরামদায়ক এবং ব্যবহার করতে সুন্দর হয়\n- JavaScript ক্লিক হ্যান্ডল করা, লিস্ট আইটেম তৈরি করা, এবং পেজ আপডেট করা\n- localStorage টাস্কগুলো সেভ ও লোড করতে যাতে সেগুলো টিকে থাকে\n- বেসিক টেস্টিং ও ডিবাগিং (ছোট ত্রুটি ধরবে এবং ঠিক করবে)

শুরু করার আগে যা দরকার

সহজ রাখুন। আপনার শুধু দরকার:

• একটি কম্পিউটার (Windows, Mac, বা Linux)\n- একটি আধুনিক ব্রাউজার (Chrome, Firefox, Safari, বা Edge)\n- একটি কোড এডিটর (VS Code জনপ্রিয়, কিন্তু যেকোনো এডিটর চলে)

যদি আপনি একটি ফোল্ডার তৈরি ও কিছু ফাইল এডিট করতে পারেন, আপনি প্রস্তুত।

ধাপ ১: অ্যাপের লক্ষ্য ও ফিচার ঠিক করুন

কোনো কোড লেখার আগে ঠিক করুন “সফলতা” কেমন হবে। এই টিউটোরিয়াল এক ছোট অ্যাপ বানায় একটি পরিষ্কার কাজের জন্য: আপনার টাস্কগুলো ট্র্যাক করা।

অ্যাপের এক কাজ বেছে নিন

একটি এক-লাইনের লক্ষ্য লিখে রাখুন যা আপনি নির্মাণের সময় মনে রাখবেন:\n

“এই অ্যাপ আমাকে একটি লিস্টে টাস্ক যোগ করতে দেয় যাতে আমি ভুলে না যাই।”

এইটুকুই। যদি আপনি ক্যালেন্ডার, রিমাইন্ডার, ট্যাগ, বা অ্যাকাউন্ট যোগ করতে ইচ্ছুক হন, সেগুলো পরে রাখুন।

অবশ্যই থাকা বনাম চাইলে থাকা

দুইটি দ্রুত তালিকা করুন:

অবশ্যই থাকা (এই প্রজেক্টের জন্য):\n

• একটি টাস্ক যোগ করা (টেক্সট টাইপ করে বাটন ক্লিক)\n- লিস্টে টাস্ক দেখা\n- একটি টাস্ক সম্পন্ন হিসেবে চিহ্নিত করা\n- একটি টাস্ক মুছে ফেলা\n- রিফ্রেশের পরে টাস্ক রাখা (পরে localStorage ব্যবহার করব)\n চাওয়া হলে (আজ করবো না): ডিউ তারিখ, প্রায়োরিটি, ক্যাটাগরি, সার্চ, ড্র্যাগ-এন্ড-ড্রপ, ক্লাউড সিঙ্ক।

“অবশ্যই থাকা” কম রাখলে আপনি প্রকৃতপক্ষে কাজ শেষ করবেন।

স্ক্রিনটি সাধারণ ভাষায় বর্ণনা করুন

এই অ্যাপ একটি সিঙ্গেল পেজ হতে পারে যেখানে থাকবে:

• একটি টেক্সট ইনপুট ("Add a task…") এবং একটি “Add” বাটন\n- নিচে একটি টাস্ক লিস্ট\n- প্রতিটি টাস্কে একটি “done” টগল এবং একটি “delete” বাটন থাকবে

“সম্পন্ন” মানে কী তা নির্ধারণ করুন

নির্দিষ্ট হন যাতে আপনি আটকে না যান:\n

• “সম্পন্ন” = টাস্কটি ক্রস আউট (বা ফেইড) দেখায়, এবং এটি লিস্টে থাকবে যতক্ষণ না আপনি মুছে ফেলেন।

এগুলো ঠিক করলে, প্রজেক্ট ফাইল সেটআপ করতে প্রস্তুত।

ধাপ ২: প্রজেক্ট ফাইল সেট আপ করুন

কোনো কোড লেখার আগে, অ্যাপের জন্য একটি পরিষ্কার ছোট “হোম” তৈরি করি। শুরু থেকে ফাইলগুলো সংগঠিত রাখা পরবর্তী ধাপগুলোকে সহজ করে।

১) একটি প্রজেক্ট ফোল্ডার তৈরি করুন

কম্পিউটারে একটি নতুন ফোল্ডার বানান এবং নাম দিন todo-app মত কিছু। এই ফোল্ডারেই প্রজেক্টের সব থাকবে।

ফোল্ডারের মধ্যে তিনটি ফাইল তৈরি করুন:\n

• index.html (পেজ স্ট্রাকচার)\n- styles.css (দর্শন ও লেআউট)\n- app.js (বিহেভিয়ার ও ইন্টারঅ্যাকটিভিটি)\n আপনার কম্পিউটার যদি ফাইল এক্সটেনশন লুকায় (যেমন “.html”), নিশ্চিত করুন সঠিক এক্সটেনশনসহ ফাইল হচ্ছে। সাধারণ ত্রুটি হলো index.html.txt হয়ে যাওয়া।

২) ফোল্ডারটি এডিটরে ও ব্রাউজারে খুলুন

todo-app ফোল্ডারটি আপনার কোড এডিটরে খুলুন (VS Code, Sublime ইত্যাদি)। তারপর index.html ব্রাউজারে খুলুন।

এই সময় পেজ খালি থাকতে পারে—এটা ঠিক আছে। আমরা পরের ধাপে কন্টেন্ট যোগ করব।

৩) কিভাবে পরিবর্তন দেখবেন

আপনি ফাইল এডিট করলে ব্রাউজার স্বয়ংক্রিয়ভাবেই আপডেট নাও করবে (যদি কোনো টুল না থাকছে)।

বেসিক লুপ হবে:\n

1. এডিটরে ফাইল সেভ করুন\n2. ব্রাউজার ট্যাবে যান\n3. পেজ রিফ্রেশ করুন এবং আপডেট দেখুন

কিছু কাজ না করলে প্রথমে রিফ্রেশ করে দেখুন।

ঐচ্ছিক: একটি সহজ লোকাল সার্ভার ব্যবহার করুন (ভালো কিন্তু জরুরি না)

আপনি ডাবল-ক্লিক করে index.html চালাতে পারবেন, কিন্তু একটি লোকাল সার্ভার পরে অদ্ভুত সমস্যি রোধ করে (বিশেষত যখন আপনি ডাটা সেভ বা ফাইল লোড করবেন)।

শুরু করার সহজ অপশনগুলি:\n

• VS Code-এ Live Server ইনস্টল করে “Go Live” ক্লিক করুন\n- যদি আপনার মেশিনে Python থাকে, ফোল্ডারে এই চালান:\n

python -m http.server

তারপর ব্রাউজারে প্রদত্ত অ্যাড্রেস (সাধারণত http://localhost:8000) খুলুন।

ধাপ ৩: পেজ স্ট্রাকচার তৈরি করুন (HTML)

এখন আমরা অ্যাপের জন্য একটি পরিষ্কার কঙ্কাল তৈরি করব। এই HTML এখনই ইন্টারঅ্যাকটিভ করবে না (সেটা পরের), কিন্তু এটি JavaScript কে স্পষ্ট জায়গা দেবে পড়া ও লেখা করার জন্য।

আমাদের দরকারে মিনিমাল লেআউট

আমরা রাখব:\n

• একটি টাইটেল যাতে পেজ পরিচিতি বুঝা যায়\n- টাস্ক টেক্সটের জন্য একটি ইনপুট বক্স\n- টাস্ক সাবমিট করার জন্য একটি Add বাটন\n- নতুন টাস্ক দেখানোর জন্য একটি লিস্ট এরিয়া

সহজ ও পড়তে সুবিধাজনক নাম রাখুন। ভাল id/class ব্যবহার করলে পরের ধাপগুলোতে JavaScript সহজে এলিমেন্ট ধরতে পারবে।

এইটি index.html-এ পেস্ট করুন

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>To‑Do App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app" id="app">
      <h1 class="app__title" id="appTitle">My To‑Do List</h1>

      <form class="task-form" id="taskForm">
        <label class="task-form__label" for="taskInput">New task</label>
        <div class="task-form__row">
          <input
            id="taskInput"
            class="task-form__input"
            type="text"
            placeholder="e.g., Buy milk"
            autocomplete="off"
          />
          <button id="addButton" class="task-form__button" type="submit">
            Add
          </button>
        </div>
      </form>

      <ul class="task-list" id="taskList" aria-label="Task list"></ul>
    </main>

    <script src="app.js"></script>
  </body>
</html>

স্ট্রাকচারের জন্য এটুকুই। লক্ষ্য করুন আমরা id="taskInput" এবং id="taskList" ব্যবহার করেছি—এসবই JavaScript-এ সবচেয়ে বেশি ব্যবহার করবেন।

ধাপ ৪: দেখতে পরিষ্কার করুন (CSS)

এখন আপনার পেজ আছে, কিন্তু হয়তো বেশ নির্বাথ লাগছে। একটু CSS দিলে ব্যবহার করা সুবিধাজনক হবে: স্পেসিং, পাঠযোগ্য টেক্সট, আর এমন বাটন যা ক্লিকযোগ্য লাগে।

একটি সহজ কেন্দ্রীভূত কন্টেইনার দিয়ে শুরু

কেন্দ্রীভূত বক্স অ্যাপটিকে ফোকাস করে রাখে এবং কনটেন্টকে চারপাশ জুড়ে ছড়িয়ে পড়া রোধ করে।

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

টাস্কগুলো সহজে স্ক্যান করার মতো রাখুন

প্রতিটি টাস্ক আলাদা “রো” মত দেখানো উচিত, আরামদায়ক স্পেসিং সহ।

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

“ডান” অবস্থান স্পষ্ট দেখান

যখন টাস্কটি সম্পন্ন, এটি ভিজ্যুয়ালি পরিবর্তিত হওয়া উচিত যাতে এক নজরে বোঝা যায়।

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

বাটনগুলো কনসিস্টেন্ট করুন

একই সাইজ এবং স্টাইলে বাটন রাখুন যাতে এগুলো একটি অ্যাপের অংশ মনে হয়।

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

এটুকুই UI-র জন্য—কোনো উন্নত ট্রিক লাগবে না। এখন JavaScript দিয়ে বিহেভিয়ার যোগ করা যাক।

ধাপ ৫: টাস্ক যোগ করা (JavaScript বেসিক)

এখন আপনার ইনপুট, বাটন, ও লিস্ট পেজে আছে—এগুলোকে কাজ করাতে হবে। লক্ষ্য সহজ: যখন কেউ একটি টাস্ক টাইপ করে Add ক্লিক করবে (বা Enter চাপবে), নতুন আইটেম লিস্টে দেখা যাবে।

বাটন ও Enter কী কানেক্ট করুন

JavaScript ফাইলে প্রথমে প্রয়োজনীয় এলিমেন্টগুলো ধরুন, তারপর দুইটি অ্যাকশন শোনার কোড লাগান: বাটন ক্লিক এবং ইনপুটে Enter কী।

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

এটি কী করে (সহজ ভাষায়)

• ইনপুট থেকে টেক্সট পড়ে এবং trim() করে অতিরিক্ত স্পেস সরায়।\n- খালি হলে থামে, যাতে খালি আইটেম না যায়।\n- একটি নতুন <li> তৈরি করে তার টেক্সট সেট করে এবং লিস্টে যোগ করে।\n- ইনপুট ক্লিয়ার করে এবং ফোকাস ফিরিয়ে দেয় যাতে পরের টাস্ক দ্রুত টাইপ করা যায়।

কিছু না হলে, আপনার HTML-এ থাকা id গুলো ও JavaScript সিলেক্টর একে অপরের সাথে মিলছে কিনা চেক করুন (এটি সবচেয়ে সাধারণ সমস্যা)।

ধাপ ৬: টাস্ক সম্পন্ন করা এবং মুছে ফেলা

এখন আপনি টাস্ক যোগ করতে পারবেন—এগুলোকে কার্যকর করানো যাক: একটি টাস্ক সম্পন্ন হিসেবে চিহ্নিত করা এবং মুছে ফেলা সম্ভব হবে।

টাস্কগুলোকে সহজ ডেটা হিসেবে রাখুন

টাস্কগুলো স্ট্রিং হিসেবে রাখার পরিবর্তে অবজেক্ট হিসেবে রাখুন। এতে প্রতিটি টাস্কের একটি স্থায়ী আইডেন্টিটি থাকবে এবং “done” স্ট্যাটাস ট্র্যাক করার জায়গা থাকবে:\n

• text: টাস্কের লেখা\n- done: true বা false\n- id: একটি ইউনিক নম্বর যাতে আমরা সঠিক টাস্কটি খুঁজে/মুছে পারি

উদাহরণ:\n

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

একটি Done কন্ট্রোল ও Delete বাটন যোগ করুন

প্রতিটি টাস্ক রেন্ডার করলে একটি চেকবক্স বা “Done” বাটন এবং একটি “Delete” বাটন রাখুন।

একটি ইভেন্ট লিসেনার হলো ক্লিকের প্রতিক্রিয়া জানানোর উপায়। আপনি বাটনে (বা পুরো লিস্টে) ইভেন্ট লিসেনার লাগাবেন, এবং ইউজার ক্লিক করলে আপনার কোড রান করবে।

শুরুর জন্য একটা বন্ধুত্বপূর্ণ প্যাটার্ন হল ইভেন্ট ডেলিগেশন: টাস্ক লিস্ট কন্টেইনারে একটি ক্লিক লিসেনার রাখুন, তারপর চেক করুন কী ক্লিক করা হয়েছে।

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

আপনার renderTasks()-এ:\n

• প্রতিটি বাটনে data-id="${task.id}" যোগ করুন।\n- .done ক্লাস যোগ করে সম্পন্ন টাস্কগুলো ভিজ্যুয়ালি দেখান।

ধাপ ৭: টাস্ক সংরক্ষণ করুন যাতে থাকে (localStorage)

এখন আপনার টু‑ডু লিস্টের একটি বিরক্তিকর সমস্যা আছে: আপনি যদি পেজ রিফ্রেশ করেন (বা ট্যাব বন্ধ করেন), সব মুছে যায়।

কারণ টাস্কগুলো কেবল JavaScript মেমরিতে থাকছে। পেজ রিলোড করলে মেমরি রিসেট হয়।

localStorage = ব্রাউজারের ভিতরে একটি ছোট “সেভ বক্স”

localStorage ব্রাউজারের সাথে বিল্ট-ইন। এটাকে একটি নামের (কী) নিচে টেক্সট রাখা যায়। সার্ভার বা অ্যাকাউন্ট ছাড়া ছোট প্রজেক্টের জন্য এটি দারুণ উপযোগী।

পুরো টাস্ক লিস্টকে JSON টেক্সটে রেখে, তখন পেজ ওপেন হলে আবার সেটি লোড করা হবে।

১) প্রতিবার পরিবর্তনের পরে সেভ করুন

আপনি যখনই টাস্ক যোগ করবেন, কোনো টাস্কের স্ট্যাটাস পালটাবেন, বা মুছবেন—পর তাহলেই saveTasks() কল করুন।

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

আপনার অ্যাপ যেখানে tasks অ্যারে আপডেট করে সেখানে ঠিক এর পরই লিখুন:\n

saveTasks(tasks);
renderTasks(tasks);

২) পেজ শুরুতে লোড করে রেন্ডার করুন

পেজ লোড হলে সেভ করা মানটি পড়ুন। যদি কিছু না থাকে, ফাঁকা তালিকা ফিরিয়ে দিন।

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

এটুকুই: এখন আপনার অ্যাপ রিফ্রেশের পরে টাস্ক মনে রাখে।

টিপ: localStorage কেবল স্ট্রিংই রাখে, তাই JSON.stringify() অ্যারে-কে টেক্সটে পরিণত করে এবং JSON.parse() লোড করার সময় এটাকে পুনরায় অ্যারে করে।

ধাপ ৮: টেস্ট ও সাধারণ বাগ ঠিক করুন

টেস্ট করা বোরিং শোনাতে পারে, কিন্তু এটা সবচেয়ে দ্রুত উপায় আপনার টু‑ডু অ্যাপকে "কাজ করে সবসময়" বানাতে। প্রতিটি ছোট পরিবর্তনের পরে একটা দ্রুত পাস করুন।

দ্রুত টেস্ট পাস (৬০ সেকেন্ড)

প্রধান ফ্লো নিচের ক্রমে চালান:\n

• একটি টাস্ক যোগ করুন\n- সেটি সম্পন্ন হিসেবে চিহ্নিত করুন\n- মুছে ফেলুন\n- পেজ রিফ্রেশ করুন (UI এখনও সঠিক আচরণ করে কি না দেখুন)

কোনো ধাপ ভুল করলে, নতুন ফিচার যোগ করার আগে সেটা ঠিক করুন। ছোট অ্যাপগুলো সমস্যা জমা হলে জটিল হয়ে যায়।

বাগ ধরার ঐজ কেসগুলো চেষ্টা করুন

এগুলো হল ইনপুট যা আপনি ডিজাইন করেননি, কিন্তু বাস্তব মানুষ করবে:\n

• খুব লম্বা টেক্সট (ওভারফ্লো বা বাটন পুশ করে না তো?)\n- একই টাস্ক বারবার (সঠিক টাস্ক মুছছেন কি?)\n- খালি ইনপুট (খালি টাস্ক যায় কি?)\n একটি সাধারণ ফিক্স হলো খালি টাস্ক ব্লক করা:\n

const text = input.value.trim();
addButton.disabled = text === "";

(এটি প্রতিটি input ইভেন্টে চালাতে পারেন, এবং আবার অ্যাড করার আগে চেক করতে পারেন।)

দ্রুত “কিছু হচ্ছে না” চেকলিস্ট

ক্লিক করলে কিছু না হলে সাধারণত এগুলোই কারণ:\n

• সিলেক্টর মেলেনি (HTML ও JS-এ id বা ক্লাস নাম ভিন্ন)\n- আপনার স্ক্রিপ্ট লোড হয়নি (ভুল ফাইলনেম/পাথ, বা app.js খুঁজে পাওয়া যায়নি)\n- কোনো JavaScript এরর পুরো ফাইলটাকে থামিয়ে দিয়েছে

কনসোল ব্যবহার করে আসল সমস্যা দেখুন

যখন কিছু এলোমেলো লাগে, লগ করে দেখুন:\n

console.log("Adding:", text);
console.log("Current tasks:", tasks);

ব্রাউজারের Console-এ এরর (লাল টেক্সট) দেখুন। সমস্যা ঠিক হলে লগ মুছে দিন যাতে প্রকল্পে ঝামেলা না হয়।

ধাপ ৯: ব্যবহারকারী বান্ধব করুন (অ্যাক্সেসিবিলিটি + মোবাইল)

একটি টু‑ডু অ্যাপ তখনই “ডান” যখন সেটা বাস্তব মানুষদের জন্য আরামদায়ক—ফোনে, কীবোর্ড দিয়ে, এবং স্ক্রিন রিডারের মতো সহায়ক টুলে।

মোবাইলে ট্যাপ করা সহজ করুন

ছোট স্ক্রিনে ক্ষুদ্র বাটন বিরক্তিকর। ক্লিকযোগ্য জিনিসগুলোকে পর্যাপ্ত স্পেস দিন:\n

• বাটনে বড় প্যাডিং দিন (প্রায় 44px উচ্চতা লক্ষ্য করুন)\n- Done ও Delete বাটনের মধ্যে স্পেস রাখুন যাতে মিস-ট্যাপ না হয়\n- মোবাইলে ইনপুট ফিল্ড ফুল-উইথ রাখুন যাতে টাইপ করা স্বাভাবিক লাগে

CSS-এ padding, font-size, এবং gap বাড়ালেই বড় প্রভাভ ফেলে।

লেবেল ও ARIA যোগ করুন (কি এবং কেন)

স্ক্রিন রিডারগুলোকে কন্ট্রোলগুলোর পরিষ্কার নাম দরকার।\n

• আপনার ইনপুটে একটি বাস্তব <label> থাকা উচিত (সবচেয়ে ভালো)। আপনি যদি সেটি না দেখাতে চান, CSS-এ ভিস্যুয়ালি হাইড করে রেখে দিতে পারেন, কিন্তু HTML-এ রাখুন।\n- আইকন-অনলি বাটন (যেমন ট্রাশ আইকন) হলে aria-label="Delete task" দিন যাতে স্ক্রিন রিডার সেটিকে হ্যান্ডেল করতে পারে।

এখানেই মানুষগুলো কন্ট্রোলগুলি বুঝবে অনুমান না করে।

কীবোর্ড সাপোর্ট: Tab + Enter

মোজটা কীবোর্ড ছাড়া ব্যবহার করা উচিত নয়:\n

• আপনি ইনপুট ও বাটনগুলোতে Tab করে যেতে পারা উচিৎ।\n- ইনপুটে Enter চাপলে টাস্ক যোগ হওয়া উচিৎ (একটি <form> ব্যবহার করলে Enter ন্যূনতম কাজ করে)।\n- টাস্ক যোগ হলে ফোকাস ইনপুটে ফিরিয়ে দিলে পরবর্তী টাস্ক দ্রুত যোগ করা যায়।

পাঠযোগ্যতা: কনট্রাস্ট ও ফন্ট সাইজ

পাঠযোগ্য ফন্ট সাইজ (১৬px ভালো বেসলাইন) ও শক্ত কনট্রাস্ট ব্যবহার করুন (ডার্ক টেক্সট লাইট ব্যাকগ্রাউন্ডে)। কেবল রং দিয়ে “ডান” দেখাবেন না—স্ট্রাইকথ্রু বা অন্যান্য স্পষ্ট স্টাইল রাখুন।

ধাপ ১০: কোড পরিষ্কার ও সংগঠিত করুন

এখন সব কাজ করলে, ১০–১৫ মিনিট নিয়ে কোডটাকে টidy করুন। এতে ভবিষ্যতে ফিক্স করা সহজ হয় এবং পরে ফিরে দেখলে নিজের প্রজেক্টটা বোঝা সহজ হবে।

একটি সহজ ফোল্ডার স্ট্রাকচার

ছোট ও পূর্বানুমেয় রাখুন:\n

• /index.html — পেজ স্ট্রাকচার (ইনপুট, বাটন, লিস্ট)\n- /styles.css — অ্যাপ কেমন দেখায় (স্পেসিং, ফন্ট, “ডান” স্টাইল)\n- /app.js — বিহেভিয়ার (যোগ, টগল ডন, মুছে ফেলা, সেভ/লোড)\n- /README.md — ভবিষ্যৎ আপনার জন্য দ্রুত নোট

আপনি যদি সাবফোল্ডার পছন্দ করেন, করতে পারেন:\n

• /css/styles.css\n- /js/app.js

শুধু নিশ্চিত করুন link ও script পাথগুলো ম্যাচ করে।

JavaScript পড়তে সহজ করুন

কিছু দ্রুত টিপস:\n

• পরিষ্কার নাম ব্যবহার করুন: taskInput, taskList, saveTasks()\n- ফাংশন ছোট রাখুন: একটা ফাংশন যেন এক কাজ করে\n- কোড স্পষ্ট না হলে ছোট মন্তব্য দিন (প্রতি লাইনে মন্তব্য দেবেন না)

উদাহরণ হিসেবে সহজ স্কিমা:\n

• renderTasks(tasks)\n- addTask(text)\n- toggleTask(id)\n- deleteTask(id)

ছোট README যোগ করুন

README.md খুব সহজ হতে পারে:\n

• কি করে (একটি টু-ডু লিস্ট যা টাস্ক সেভ করে)\n- কিভাবে চালাবেন (ব্রাউজারে index.html খুলুন)\n- ঐচ্ছিক: কোনো পরিচিত সীমাবদ্ধতা

প্রজেক্ট ব্যাকআপ

কমপক্ষে, কোনো মাইলস্টোন (যেমন “localStorage কাজ করে”) শেষ হলে ফোল্ডার জিপ করে রাখুন। যদি ভার্সন হিস্টরি চান, Git ভাল—কিন্তু ঐচ্ছিক। এমন একটি ব্যাকআপ একটাই বাঁচাতে পারে দুর্ঘটনাজনিত ডিলিট থেকে।

ধাপ ১১: আপনার অ্যাপ পাবলিশ করুন এবং শেয়ার করুন

পাবলিশ মানে আপনার ফাইলগুলো (HTML, CSS, JS) কোথাও পাবলিকলি রেখে অন্যরা লিংকে খুললে ব্যবহার করতে পারে। এই টু‑ডু অ্যাপ একটি “স্ট্যাটিক সাইট”, তাই অনেক সার্ভিসে বিনামূল্যে হোস্ট করা যায়।

অপশন ১: GitHub Pages (স্ট্যাটিক সাইটের জন্য চমৎকার)

সংক্ষিপ্ত স্টেপগুলো:\n

1. একটি GitHub একাউন্ট তৈরি করুন (যদি না থাকে)\n2. নতুন একটি রেপো তৈরি করে ফাইলগুলো আপলোড করুন (বা Git ব্যবহার করে পুশ করুন)\n3. রেপোতে যেন Settings → Pages যায়\n4. পাবলিশ করার শাখা (প্রায়ই main) এবং ফোল্ডার (প্রায়ই / root) নির্বাচন করুন\n5. সেভ করুন—GitHub একটি পাবলিক URL দিবে

আপনার অ্যাপ যদি আলাদা ফাইল ব্যবহার করে, ফাইলনেমগুলো ঠিক আছে কি না যাচাই করুন (styles.css বনাম style.css ইত্যাদি)।

অপশন ২: Netlify বা Vercel (সহজ ড্র্যাগ-এন্ড-ড্রপ)

সবচেয়ে সহজ “আপলোড ও চালান” চাইলে:\n

1. Netlify বা Vercel-এ একটি একাউন্ট খুলুন\n2. Deploy / Add New Project দেখুন\n3. আপনার প্রজেক্ট ফোল্ডার ড্র্যাগ করে ছেড়ে দিন (বা GitHub রেপো কানেক্ট করুন)\n4. বিল্ড/আপলোড শেষ হলে URL খুলুন এবং টেস্ট করুন\n

শেয়ার করার আগে দ্রুত চেকলিস্ট

• পেজ রিফ্রেশ করুন: টাস্কগুলো থাকা উচিত (localStorage কাজ করছে)\n- যোগ, কমপ্লিট, মুছে দেখুন: কোনো বাটন ব্রোকেন নেই\n- মোবাইলে খুলুন (বা ব্রাউজার উইন্ডো সংকুচিত করুন): কিছু স্ক্রিন থেকে বাইরে ছুটে পড়ছে না

সব ঠিক থাকলে লিংক একজন বন্ধুকে পাঠান এবং তাদের দিয়ে ট্রাই করাতে বলুন—নতুন চোখ দ্রুত সমস্যা ধরতে পারে।

পরবর্তী ধাপ: সহজ আপগ্রেডগুলো যা আপনি করতে পারেন

আপনি একটি কাজ করা টু‑ডু অ্যাপ বানিয়ে ফেলেছেন। যদি আপনি বড় না কুঁদে একটু শিখতে চান, এই আপগ্রেডগুলো বাস্তবে মূল্য বাড়ায় এবং দরকারী প্যাটার্ন শেখায়।

১) টাস্ক টেক্সট এডিট করা

প্রতিটি টাস্কের পাশে একটি “Edit” বাটন যোগ করুন। ক্লিক করলে টাস্ক লেবেলকে একটি ইনপুট ফিল্ডে বদলান (পূর্বরূপ ভরা), সঙ্গে “Save” ও “Cancel” দিন।

টিপ: টাস্ক ডেটা id ও text সহ অবজেক্ট হিসেবে রাখুন—এভাবে এডিট করা সহজ: id দিয়ে সঠিক টাস্ক খুঁজে text আপডেট করে রেন্ডার ও সেভ করুন।

২) ফিল্টার: All / Active / Done

উপর তিনটি বাটন যোগ করুন: All, Active, Done।\n বর্তমান ফিল্টার একটি ভেরিয়েবল রাখুন, যেমন currentFilter = 'all'। রেন্ডার করার সময় দেখান:\n

• All: সব টাস্ক\n- Active: সম্পন্ন নয় এমন টাস্ক\n- Done: সম্পন্ন টাস্ক

৩) ডিউ তারিখ বা সিম্পল ক্যাটাগরি

হালকাভাবে রাখুন:\n

• একটি ঐচ্ছিক ডিউ তারিখ (YYYY-MM-DD) যোগ করুন এবং টাস্কের পাশে দেখান\n- অথবা একটি ছোট ড্রপডাউন দিয়ে ক্যাটাগরি দিন, যেমন “Work / Home / School”\n একটি অতিরিক্ত ফিল্ড যোগ করলেই ডেটা মডেল ও UI একসাথে আপডেট কিভাবে করতে হয় শেখায়।

৪) পরেরটায়: localStorage থেকে সার্ভারে সেভ করা

যখন আপনি প্রস্তুত, বড় ধারণা হল: localStorage-এর বদলে টাস্কগুলো API (সার্ভার)-এ পাঠানো। সার্ভার সেটি ডেটাবেসে রাখবে, ফলে ডিভাইস জুড়ে সিঙ্ক হবে।

যদি আপনি সেটা ট্রায় করতে চান, কোনো ভিব-কোডিং প্ল্যাটফর্ম সাহায্য করতে পারে: ফিচার ডেসক্রাইব করে API এন্ডপয়েন্ট, ডাটাবেস টেবিল, UI চেঞ্জ বর্ণনা করে প্রোটোটাইপ তৈরি করতে পারেন এবং পরে সোর্স কোড এক্সপোর্ট করে শিখতে পারেন।

৫) একটি ভাল পরবর্তী শুরুর প্রজেক্ট

একটি নোটস অ্যাপ (সার্চসহ) বা একটি হ্যাবিট ট্র্যাকার (ডেইলি চেক-ইন) বানাতে পারেন। এগুলো এসে একই দক্ষতা ব্যবহার করে: লিস্ট রেন্ডারিং, এডিটিং, সেভিং, ও সহজ UI ডিজাইন।