Task Scheduler Using HTML, CSS and JS (original) (raw)

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 `

Task Scheduler

Add Task

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:

gfg