File size: 3,359 Bytes
b406761 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | document.addEventListener('DOMContentLoaded', function() {
// Task form submission
const taskForm = document.getElementById('taskForm');
const taskList = document.getElementById('taskList');
taskForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values
const taskName = this.elements[0].value;
const description = this.elements[1].value;
const dueDate = this.elements[2].value;
const recurrence = this.elements[3].value;
const telegramNotify = this.elements[4].checked;
// Create new task element
const taskItem = document.createElement('div');
taskItem.className = 'task-item bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-secondary transition duration-200';
const formattedDate = new Date(dueDate).toLocaleString('en-US', {
weekday: 'short',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
taskItem.innerHTML = `
<div class="flex justify-between items-start">
<div class="flex items-start">
<input type="checkbox" class="mt-1 h-4 w-4 text-primary focus:ring-primary border-gray-700 rounded">
<div class="ml-3">
<h3 class="font-medium">${taskName}</h3>
<p class="text-sm text-gray-400 mt-1">Due: ${formattedDate}</p>
<div class="flex items-center mt-2 text-xs">
<span class="bg-gray-700 px-2 py-1 rounded mr-2">${recurrence.charAt(0).toUpperCase() + recurrence.slice(1)}</span>
${telegramNotify ? `<span class="flex items-center text-secondary">
<i data-feather="send" class="w-3 h-3 mr-1"></i>
Telegram
</span>` : ''}
</div>
</div>
</div>
<button class="text-gray-400 hover:text-red-500 delete-task">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
`;
// Add to task list
taskList.prepend(taskItem);
feather.replace();
// Add event listeners to new task
taskItem.querySelector('input[type="checkbox"]').addEventListener('change', function() {
const taskText = this.closest('.flex').querySelector('h3');
if (this.checked) {
taskText.classList.add('text-gray-500', 'line-through');
} else {
taskText.classList.remove('text-gray-500', 'line-through');
}
});
taskItem.querySelector('.delete-task').addEventListener('click', function() {
taskItem.classList.add('opacity-0');
setTimeout(() => {
taskItem.remove();
}, 300);
});
// Reset form
this.reset();
});
// Add animation to task items on load
document.querySelectorAll('.task-item').forEach((item, index) => {
setTimeout(() => {
item.classList.add('opacity-100');
}, index * 100);
});
}); |