Create Task Scheduler Project Using HTML, CSS and JS

By Piyush Gupta
Piyush608 top freelancer india

Creating a Task Scheduler project using HTML, CSS, and JavaScript involves creating a user interface where users can add, edit, and delete tasks. Below is a simple implementation to get you started.

index.html

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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>

styles.css

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
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; }
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;
}

logic.js

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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;
}
});
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; } });
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;
    }
});

 

Explanation

  1. HTML:
    • The index.html file contains the basic structure of the Task Scheduler. It includes an input field for new tasks and a button to add tasks. There’s also an unordered list (ul) where tasks will be displayed.
  2. CSS:
    • The styles.css file provides styling for the task scheduler, including the container, input field, buttons, and the task list items.
  3. JavaScript:
    • The logic.js file contains functions to add and delete tasks. The addTask function adds a new task to the list, and the deleteTask function removes a task from the list.

Setup

  1. Create three files: index.html, styles.css, and logic.js.
  2. Copy the respective code into these files.
  3. Open index.html in your browser to see the Task Scheduler in action.

Feel free to extend this project by adding more features like editing tasks, setting deadlines, or storing tasks in the browser’s local storage to persist them across sessions.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.

0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Select a Rating
  • Select a Rating
  • 5 Stars
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Star

Recent Posts

  CALL

+91 7905834592

Enquiry Now

piyushmnm@gmail.com

piyush.gupta384