From dc11a2d0c36e2490725d9031de4d15031c14264d Mon Sep 17 00:00:00 2001 From: Aadil Latif Date: Sun, 19 Nov 2023 03:44:51 +0530 Subject: [PATCH] Add files via upload --- index.html | 34 +++++++++++ script.js | 144 +++++++++++++++++++++++++++++++++++++++++++++++ to-do_styles.css | 123 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 301 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 to-do_styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f625043 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + To-Do App + + + +
+
To-Do List
+ + + + + + + + + + + + + +
S.No.Task NameDate and TimeAction
+
+ + About me +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..25b1c41 --- /dev/null +++ b/script.js @@ -0,0 +1,144 @@ + function addTask() { + var taskInput = document.getElementById("task-input"); + var completionTimeInput = document.getElementById("completion-time"); + var taskText = taskInput.value.trim(); + var completionTime = completionTimeInput.value; + + if (taskText === "") { + alert("Fill the task name."); + return; + } + + if (completionTime !== "") { + var now = new Date(); + var selectedTime = new Date(completionTime); + + if (selectedTime <= now) { + alert("Invalid time! Please select a time in the future."); + return; + } + + var taskList = document.getElementById("task-list"); + + var tr = document.createElement("tr"); + tr.className = "task-item waiting"; // Added 'waiting' class for visual indication + tr.innerHTML = ` + + ${taskText} + ${formatCompletionTime(selectedTime)} + + + + + `; + + // Find the correct position to insert the new task based on date and time + var tasks = taskList.childNodes; + var insertionIndex = 0; + while (insertionIndex < tasks.length) { + var taskTime = new Date(tasks[insertionIndex].querySelector(".completion-time").textContent); + if (taskTime > selectedTime) { + break; + } + insertionIndex++; + } + + // Insert the new task at the correct position + taskList.insertBefore(tr, tasks[insertionIndex]); + + taskInput.value = ""; + completionTimeInput.value = ""; + + // Set Serial Number and schedule the task completion + setSerialNumbers(); + scheduleTaskCompletion(tr, selectedTime); + // Sort tasks based on completion time + sortTasksByCompletionTime(); + } else { + alert("Fill the completion time."); + } + } + + function toggleCompleted(taskItem) { + var buttons = taskItem.querySelector("td:last-child"); + var repeatButton = document.createElement("button"); + repeatButton.textContent = "Repeat"; + repeatButton.className = "repeat-button"; + repeatButton.onclick = function () { + var newCompletionTime = prompt("Enter new date and time (Example format: YYYY-MM-DDTHH:mm):"); + if (newCompletionTime) { + taskItem.classList.remove("completed", "waiting"); + taskItem.querySelector(".completion-time").textContent = formatCompletionTime(new Date(newCompletionTime)); + scheduleTaskCompletion(taskItem, new Date(newCompletionTime)); + // Sort tasks based on completion time + sortTasksByCompletionTime(); + } + }; + + buttons.innerHTML = ""; // Clear existing buttons + buttons.appendChild(repeatButton); + } + + function removeTask(taskItem) { + taskItem.remove(); + // Set Serial Number after removing a task + setSerialNumbers(); + } + + function formatCompletionTime(dateTime) { + var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; + return dateTime.toLocaleDateString('en-US', options); + } + + function scheduleTaskCompletion(taskItem, completionTime) { + var now = new Date(); + var timeDifference = completionTime - now; + + if (timeDifference > 0) { + setTimeout(function () { + taskItem.classList.remove("waiting"); // Remove 'waiting' class when the task is completed + taskItem.classList.add("completed"); + toggleCompleted(taskItem); // Trigger the toggleCompleted function to replace buttons + }, timeDifference); + } + } + + function setSerialNumbers() { + var serialNumberCells = document.querySelectorAll("#task-table tbody tr td:first-child"); + serialNumberCells.forEach(function (cell, index) { + cell.textContent = index + 1; + }); + } + + // Update date and time + function updateDateTime() { + var dateTimeElement = document.getElementById("date-time"); + var now = new Date(); + var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }; + var dateTimeString = now.toLocaleDateString('en-US', options); + dateTimeElement.textContent = dateTimeString; + } + + // Update date and time initially and then every second + updateDateTime(); + setInterval(updateDateTime, 1000); + + // Sort tasks based on completion time + function sortTasksByCompletionTime() { + var taskList = document.getElementById("task-list"); + var tasks = Array.from(taskList.childNodes); + var sortedTasks = tasks.sort(function (a, b) { + var timeA = new Date(a.querySelector(".completion-time").textContent); + var timeB = new Date(b.querySelector(".completion-time").textContent); + return timeA - timeB; + }); + + // Clear the task list and re-insert the sorted tasks + taskList.innerHTML = ""; + sortedTasks.forEach(function (task) { + taskList.appendChild(task); + }); + + // Set Serial Numbers after sorting tasks + setSerialNumbers(); + } diff --git a/to-do_styles.css b/to-do_styles.css new file mode 100644 index 0000000..57f57c7 --- /dev/null +++ b/to-do_styles.css @@ -0,0 +1,123 @@ + body { + font-family: 'Arial', sans-serif; + background-color: #f4f4f4; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + } + + #todo-container { + width: 600px; + border: 1px solid #ccc; + border-radius: 5px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: #fff; + } + + #todo-header { + background-color: #FF9933; /* Saffron color */ + color: white; + padding: 20px 0; /* Increased padding for more space */ + margin-bottom: 20px; /* Increased margin-bottom for more space */ + text-align: center; + font-size: 40px; + font-weight: bold; + border-bottom: 1px solid #ccc; + } + + #task-input, + #completion-time, + #add-task-button { + width: calc(40% - 15px); + margin-bottom: 10px; + } + + #task-input, + #completion-time { + width: calc(40% - 15px); /* Contribution of 2/5th */ + } + + #add-task-button { + width: calc(20% - 10px); /* Contribution of 1/5th */ + background-color: green; + color: white; + cursor: pointer; + border: none; + padding: 10px; + font-size: 16px; + font-weight: bold; + border-radius: 5px; + } + + #task-table { + width: 100%; + border-collapse: collapse; + margin-top: 20px; /* Added margin-top for space */ + } + + #task-table th, #task-table td { + border: 1px solid #ddd; + padding: 8px; + text-align: left; + } + + #task-table th { + background-color: #f2f2f2; + } + + .task-item.waiting td { + background-color: #ffeb3b; /* Yellow color for waiting tasks */ + } + + .task-item.completed td { + background-color: #d4f7dc; + text-decoration: line-through; + color: #888; + } + + .completion-time { + font-size: 12px; + color: #777; + } + + .repeat-button { + background-color: #2196F3; + color: white; + cursor: pointer; + border: none; + padding: 5px; + font-size: 14px; + border-radius: 3px; + } + + #current-time { + text-align: center; + font-size: 12px; + color: #777; + } + + #date-time { + text-align: center; + font-size: 12px; + color: #777; + margin-top: 10px; /* Adjusted margin-top */ + } + + #todo-footer { + text-align: center; + padding: 20px 0; /* Increased padding for more space */ + font-size: 21px; + font-weight: bold; + color: #fff; /* Text color */ + background-color: #138808; /* Green color */ + } + + #about-me-link { + display: block; + text-align: center; + margin-top: 20px; /* Added margin-top for space */ + font-size: 18px; + }