Project - To-Do List - Jassif Team

Project - To-Do List

செய்ய வேண்டிய பட்டியல்

இந்த திட்டத்தில் நீங்கள் ஒரு செய்ய வேண்டிய பட்டியலை உருவாக்குவீர்கள்.

நீங்கள் பணிகளைச் சேர்க்கலாம், பணிகளை நீக்கலாம் மற்றும் அனைத்து பணிகளையும் அழிக்கலாம்.

பணிகள் localStorage இல் உள்ள ஒரு வரிசையில் சேமிக்கப்படும்.

நீங்கள் கற்றுக் கொள்வீர்கள்

வரிசையில் உருப்படிகளைச் சேமித்தல்

ஒரு வரிசையில் உருப்படிகளை எவ்வாறு சேமிப்பது

வரிசையிலிருந்து உருப்படிகளை நீக்குதல்

ஒரு வரிசையிலிருந்து உருப்படிகளை எவ்வாறு நீக்குவது

JavaScript பயன்படுத்தி பட்டியலைக் காட்டுதல்

JavaScript ஐப் பயன்படுத்தி பட்டியலை எவ்வாறு காட்டுவது

localStorage மூலம் தரவைச் சேமித்தல் மற்றும் ஏற்றுதல்

localStorage ஐப் பயன்படுத்தி தரவை எவ்வாறு சேமித்து ஏற்றுவது

முதலில்: HTML உருவாக்குதல்

முதலில் பின்வரும் உறுப்புகளுடன் ஒரு HTML பக்கத்தை உருவாக்கவும்:

ஒரு உள்ளீட்டுப் புலம் id="task" உடன்

addTask() ஐ அழைக்க ஒரு பொத்தான்

id="list" உடன் ஒரு வரிசைப்படுத்தப்படாத பட்டியல்

clearAll() ஐ அழைக்க ஒரு பொத்தான்

எடுத்துக்காட்டு

<!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();
}

⚙️ குறிப்பு:

வரிசை முறை splice(i, 1) i நிலையில் 1 உருப்படியை நீக்குகிறது.

அனைத்தையும் அழிக்கும் செயல்பாட்டைச் சேர்க்கவும்

எடுத்துக்காட்டு

எல்லாவற்றையும் நீக்கவும்:

// Function to Clear all tasks
function clearAll() {
  tasks = [];
  saveTasks();
  displayTasks();
}

பணியை சேமிக்கும் செயல்பாடு

எடுத்துக்காட்டு

localStorage இல் சேமிக்கவும்:

// Function to Save tasks
function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

💾 குறிப்பு:

வரிசைகளை localStorage இல் சேமிக்க, JSON.stringify() ஐப் பயன்படுத்தி அவற்றை உரையாக மாற்றுகிறோம்.

பணிகளை ஏற்றும் செயல்பாடு

எடுத்துக்காட்டு

localStorage இலிருந்து பணிகளை ஏற்றவும்:

// 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>

இறுதி JavaScript

// 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

பணியைச் சேர்க்க பயனர் Enter விசையை அழுத்த அனுமதிக்கவும்.

🏋️ பயிற்சி 3

ஒவ்வொரு மாற்றத்திற்கும் பிறகு பணிகளை தானாக சேமிக்கவும் (ஏற்கனவே செய்யப்பட்டது).

சேமிக்கும் போது "Saved!" செய்தியைக் காட்டவும்.

போனஸ் சவால்கள் (நிலை உயர்த்தல்)

திட்டத்தை மேம்படுத்த முயற்சிக்கவும்:

பணிகளை முடிந்ததாகக் குறிக்கவும் (✔)

பணிகளை முடிந்ததாகக் குறிக்கும் வசதி

பணிகளை வடிகட்டவும்: அனைத்தும் / செயலில் உள்ளவை / முடிந்தவை

பணிகளை வகைப்படுத்தும் வசதி

"பணியைத் திருத்து" செயல்பாட்டைச் சேர்க்கவும்

பணிகளைத் திருத்தும் வசதி

அகரவரிசையில் பணிகளை வரிசைப்படுத்தவும்

பணிகளை வரிசைப்படுத்தும் வசதி

JavaScript திட்டங்கள்

JavaScript Counter

localStorage இல் மீட்டெடுத்து சேமிக்கும் எண்ணிக்கை திட்டம்.

JavaScript Event Listener

onclick க்கு பதிலாக event listener ஐப் பயன்படுத்தும் எண்ணிக்கை திட்டம்.

JavaScript To-Do List

local storage இல் உள்ள ஒரு வரிசையில் சேமிக்கப்பட்ட செய்ய வேண்டிய பட்டியல்.

JavaScript Modal Popup

பக்கத்தின் மேல் தோன்றும் மாதிரி பாப்-அப் சாளரம்.