index.html      # HTML ফাইল
style.css       # CSS ফাইল
app.js          # JavaScript ফাইল

এখন আপনি HTML ফাইলটি খুলুন এবং একটি বেসিক HTML স্ট্রাকচার তৈরি করুন। এই স্ট্রাকচারটি হবে আমাদের টু-ডু অ্যাপের বেস।

    
    
    
    


    

        
আমার টু-ডু লিস্ট
        
        কাজ যোগ করুন
        

    
    

ধাপ ২: স্টাইলিং (CSS)

এখন আমরা টু-ডু অ্যাপটির দেখতে সুন্দর করতে কিছু CSS যোগ করব। আমাদের অ্যাপটি দেখতে একটি সুন্দর এবং ব্যবহারযোগ্য হতে হবে, তাই CSS খুবই গুরুত্বপূর্ণ। নিচে কিছু সাধারণ স্টাইলিং কোড দেওয়া হলো:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
}

.app-container {
    width: 300px;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

input {
    width: 80%;
    padding: 10px;
    margin-right: 10px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

button:hover {
    background-color: #45a049;
}

ধাপ ৩: জাভাস্ক্রিপ্ট কোড

এখন আসল মজা শুরু হবে! আমরা জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাপের কার্যকারিতা তৈরি করব। আমরা টাস্ক যোগ করার জন্য একটি ফাংশন তৈরি করব এবং পরে টাস্কগুলোকে HTML তালিকায় দেখাব। নিচে কিছু জাভাস্ক্রিপ্ট কোড দেওয়া হলো:

// HTML এলিমেন্টগুলো রেফারেন্স করা
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");

// নতুন কাজ যোগ করার ফাংশন
addTaskBtn.addEventListener("click", function() {
    const taskText = taskInput.value;
    if (taskText !== "") {
        const li = document.createElement("li");
        li.textContent = taskText;

        // কাজের উপরে ডিলিট বাটন যোগ করা
        const deleteBtn = document.createElement("button");
        deleteBtn.textContent = "বুঝেছি";
        deleteBtn.style.marginLeft = "10px";
        deleteBtn.addEventListener("click", function() {
            taskList.removeChild(li);
        });
        li.appendChild(deleteBtn);
        
        taskList.appendChild(li);
        taskInput.value = ""; // ইনপুট ফিল্ড ফাঁকা করা
    } else {
        alert("দয়া করে একটি কাজ লিখুন!");
    }
});

ধাপ ৪: অ্যাপ টেস্টিং

এখন আমাদের টু-ডু অ্যাপ তৈরি হয়ে গেছে! আপনি এখন অ্যাপটি খুলে দেখতে পারেন। আপনি একটি নতুন কাজ লিখুন, এবং যখন আপনি "কাজ যোগ করুন" বাটনে ক্লিক করবেন, তখন সেই কাজটি তালিকায় যোগ হবে। প্রতিটি কাজের পাশে একটি "বুঝেছি" বাটন থাকবে যা ক্লিক করলে কাজটি মুছে যাবে।

আপনি চাইলে আরও কিছু নতুন ফিচার যোগ করতে পারেন, যেমন:

• কাজগুলো সম্পন্ন বা অসম্পন্ন হিসেবে মার্ক করা
• ডেটা স্থানীয় স্টোরেজে সেভ করা, যাতে ব্রাউজার বন্ধ করার পরেও টাস্কগুলো সেভ থাকে
• কাজের নির্দিষ্ট সময় সেট করার সুবিধা

ধাপ ৫: অতিরিক্ত ফিচার যোগ করা

যদি আপনি আরো কিছু নতুন ফিচার যোগ করতে চান, তাহলে স্থানীয় স্টোরেজের ব্যবহার খুবই উপকারী। স্থানীয় স্টোরেজে টাস্কগুলো সেভ করা গেলে, আপনি অ্যাপটি আবার খোলার পরও টাস্কগুলো দেখতে পাবেন। নিচে একটি সহজ কোড উদাহরণ দেওয়া হলো:

// কাজগুলো স্থানীয় স্টোরেজে সেভ করা
window.addEventListener("load", function() {
    const savedTasks = JSON.parse(localStorage.getItem("tasks"));
    if (savedTasks) {
        savedTasks.forEach(task => {
            const li = document.createElement("li");
            li.textContent = task;

            const deleteBtn = document.createElement("button");
            deleteBtn.textContent = "বুঝেছি";
            deleteBtn.addEventListener("click", function() {
                taskList.removeChild(li);
                saveTasks(); // পরিবর্তনগুলি সেভ করা
            });
            li.appendChild(deleteBtn);
            taskList.appendChild(li);
        });
    }
});

// কাজগুলো স্থানীয় স্টোরেজে সেভ করা
function saveTasks() {
    const tasks = [];
    const taskItems = taskList.getElementsByTagName("li");
    for (let i = 0; i < taskItems.length; i++) {
        tasks.push(taskItems[i].textContent.replace("বুঝেছি", "").trim());
    }
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

শেষ কথা

এখন আপনি শিখেছেন কিভাবে একটি টু-ডু অ্যাপ তৈরি করতে হবে জাভাস্ক্রিপ্টে! এই অ্যাপটি খুবই সহজ এবং কার্যকরী, এবং এটি আপনাকে আরও জাভাস্ক্রিপ্ট কোডিং শিখতে সহায়ক হবে। আপনি যদি আরো ফিচার যোগ করতে চান, তবে শুধু আপনার কল্পনা এবং দক্ষতা কাজে লাগান।

এটা আপনার প্রথম ওয়েব অ্যাপ হতে পারে, কিন্তু এটি আপনার জাভাস্ক্রিপ্ট স্কিল বৃদ্ধি করতে অনেক সাহায্য করবে। শুভকামনা রইল!