Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@iaadillatif
iaadillatif authored Nov 18, 2023
1 parent ac58ba8 commit dc11a2d
Show file tree
Hide file tree
Showing 3 changed files with 301 additions and 0 deletions.
34 changes: 34 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="to-do_styles.css">
<title>To-Do App</title>
</head>
<body>

<div id="todo-container">
<div id="todo-header">To-Do List</div>
<input type="text" id="task-input" placeholder="Add a new task" onkeydown="if (event.key === 'Enter') addTask()">
<input type="datetime-local" id="completion-time">
<button id="add-task-button" onclick="addTask()">Add Task</button>
<table id="task-table">
<thead>
<tr>
<th>S.No.</th>
<th>Task Name</th>
<th>Date and Time</th>
<th>Action</th>
</tr>
</thead>
<tbody id="task-list"></tbody>
</table>
<div id="date-time"></div>
<div id="todo-footer">Made with ❤️ by Aadil Latif</div>
<a id="about-me-link" href="https://drive.google.com/file/d/11Vb6Rd-dkPdTvWlKJ0COzByx6apwvmMu/view?usp=sharing" target="_blank">About me</a>
</div>

<script src="script.js"></script>
</body>
</html>
144 changes: 144 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<td></td>
<td>${taskText}</td>
<td class="completion-time">${formatCompletionTime(selectedTime)}</td>
<td>
<button onclick="toggleCompleted(this.parentElement.parentElement)">Complete</button>
<button onclick="removeTask(this.parentElement.parentElement)">Remove</button>
</td>
`;

// 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();
}
123 changes: 123 additions & 0 deletions to-do_styles.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit dc11a2d

Please sign in to comment.