<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List with Reminders and Priority</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
h1 {
text-align: center;
.todo-container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
.task-inputs {
display: flex;
gap: 10px;
justify-content: space-between;
}
.task-inputs input, .task-inputs select {
padding: 10px;
width: 30%;
border-radius: 5px;
border: 1px solid #ccc;
.task-inputs button {
padding: 10px 20px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
.task-inputs button:hover {
background-color: #4cae4c;
.task-list {
list-style: none;
padding: 0;
margin: 20px 0;
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
border-radius: 5px;
border-left: 5px solid transparent;
animation: fadeIn 0.3s ease;
.task-item.priority-high {
border-left: 5px solid red;
.task-item.priority-medium {
border-left: 5px solid orange;
.task-item.priority-low {
border-left: 5px solid green;
.task-item button {
background-color: red;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 10px;
.task-item button:hover {
background-color: darkred;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
.sort-container {
text-align: right;
margin-bottom: 10px;
.sort-container select {
padding: 5px;
</style>
</head>
<body>
<h1>To-Do List</h1>
<div class="todo-container">
<div class="task-inputs">
<input type="text" id="taskInput" placeholder="Enter Task" />
<input type="datetime-local" id="deadlineInput" />
<select id="priorityInput">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<button onclick="addTask()">Add Task</button>
</div>
<div class="sort-container">
<select id="sortBy" onchange="sortTasks()">
<option value="priority">Sort by Priority</option>
<option value="deadline">Sort by Deadline</option>
</select>
</div>
<ul class="task-list" id="taskList"></ul>
</div>
<script>
let tasks = [];
function addTask() {
const taskInput = document.getElementById("taskInput");
const deadlineInput = document.getElementById("deadlineInput");
const priorityInput = document.getElementById("priorityInput");
const taskText = taskInput.value;
const deadline = deadlineInput.value;
const priority = priorityInput.value;
if (taskText && deadline && priority) {
const task = {
text: taskText,
deadline: new Date(deadline),
priority: priority,
};
tasks.push(task);
taskInput.value = '';
deadlineInput.value = '';
renderTasks();
} else {
alert("Please fill in all fields!");
function deleteTask(index) {
tasks.splice(index, 1);
renderTasks();
function sortTasks() {
const sortBy = document.getElementById("sortBy").value;
if (sortBy === "priority") {
tasks.sort((a, b) => {
const priorityOrder = { low: 1, medium: 2, high: 3 };
return priorityOrder[a.priority] - priorityOrder[b.priority];
});
} else if (sortBy === "deadline") {
tasks.sort((a, b) => a.deadline - b.deadline);
renderTasks();
function renderTasks() {
const taskList = document.getElementById("taskList");
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const taskItem = document.createElement("li");
taskItem.classList.add("task-item");
taskItem.classList.add(`priority-${task.priority}`);
taskItem.innerHTML = `
<span>${task.text} - ${task.deadline.toLocaleString()}</span>
<button onclick="deleteTask(${index})">Delete</button>
`;
taskList.appendChild(taskItem);
});
</script>
</body>
</html>
