Now, we will build a Task Scheduler web application using HTML, CSS, and JavaScript. The app allows users to manage tasks efficiently by setting priorities, deadlines, and marking tasks as completed.
- Add and store tasks with Low, Medium, or High priority levels.
- Assign a deadline to each task for better time management.
- Mark tasks as completed (highlighted) using JavaScript-based functionality.
Preview
Prerequisites: HTML CSS JavaScript
Approach
The Task scheduler is user centric task management-based application. It stores task provided by user with priority of importance.HTML is used to create a structure of web application. It designed via CSS. Logic of application implemented using JS.
Project Structure
Example: Write the following code in respective files
- index.html: This file contains the basic structure of the scheduler
- styles.css: This file contains the styling of the application
- logic.js: The logic to implement functionalities is defined in this file
<!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="styles.css">
<title>Task Scheduler</title>
</head>
<body>
<header>
<h1>Task Scheduler</h1>
</header>
<main>
<div class="task-form">
<input type="text" id="task" placeholder="Enter task...">
<select id="priority">
<option value="top">Top Priority</option>
<option value="middle">Middle Priority</option>
<option value="low">Less Priority</option>
</select>
<input type="date" id="deadline">
<button id="add-task">Add Task</button>
</div>
<div class="task-list" id="task-list">
<!-- Tasks will be added here dynamically -->
</div>
<script src="logic.js"></script>
</main>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #007bff;
color: white;
text-align: center;
padding: 1rem 0;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.task-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.task-list {
border: 1px solid #ddd;
padding: 10px;
}
.task {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.task button {
background-color: #28a745;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
const taskInput = document.getElementById("task");
const priorityInput = document.getElementById("priority");
const deadlineInput = document.getElementById("deadline");
const addTaskButton = document.getElementById("add-task");
const taskList = document.getElementById("task-list");
addTaskButton.addEventListener("click", () => {
const task = taskInput.value;
const priority = priorityInput.value;
const deadline = deadlineInput.value;
if (task.trim() === "" || deadline === "") {
alert("Please select an upcoming date for the deadline.")
return; // Don't add task if task or deadline is empty
}
const selectedDate = new Date(deadline);
const currentDate = new Date();
if (selectedDate <= currentDate) {
alert("Please select an upcoming date for the deadline.");
return; // Don't add task if deadline is not in the future
}
const taskItem = document.createElement("div");
taskItem.classList.add("task");
taskItem.innerHTML = `
<p>${task}</p>
<p>Priority: ${priority}</p>
<p>Deadline: ${deadline}</p>
<button class="mark-done">Mark Done</button>
`;
taskList.appendChild(taskItem);
taskInput.value = "";
priorityInput.value = "top";
deadlineInput.value = "";
});
taskList.addEventListener("click", (event) => {
if (event.target.classList.contains("mark-done")) {
const taskItem = event.target.parentElement;
taskItem.style.backgroundColor = "#f2f2f2";
event.target.disabled = true;
}
});
Output:
