Task Scheduler Using HTML, CSS and JS

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:

gfg

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

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

Javascript

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;
}