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
- 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;} |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!