Last Updated : 05 Sep, 2023
In this article, we will create a Task Scheduler web application using HTML, CSS and JavaScript. This is an application which can store tasks provided by user and classified them as low priority, middle priority, and high priority. User also can provide a deadline for the task. User also can mark done by highlighting them. This all-functional logic is implemented using JavaScript.
The final project will look like this:
Technologies Used/Pre-requisites:
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
--index.html
--styles.css
--logic.js
Example: Write the following code in respective files
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;
}
});
HTML
<!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>
CSS
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;
}
Output:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4