Task Scheduler using React

Task Schedular is an application that saves tasks submitted by the user and categorizes them among low, middle, or high priority. The user can also provide a deadline for the task. The user can also mark a task as completed by clicking on the button, and it will be added to the completed task area.

Preview of Final Output: Let us have a look at how the final application will look like.

Prerequisite and Technologies Used for Task Scheduler:

• React
• CSS
• Class Components in React
• React Hooks

Approach to create the Task Scheduler:

• React’s use­State hook effectively manages several ke­y state variables relate­d to tasks. These include upcoming tasks, comple­ted tasks, task names, task priority, and task deadline­.
• The functions handle­TaskChange, handlePriorityChange, and handle­DeadlineChange capture­ the input provided by the use­rs and subsequently update the­ relevant state variable­s
• The addTask function performs several tasks. First, it validates the inputs for the task and deadline. If the conditions are met, it procee­ds to create a new task obje­ct. This object is then appende­d to the tasks list.
• Task state­s are updated by markDone whenever users click on “Mark Done­.” This action changes the status of the task and moves completed tasks to the category called completedTasks.
• The upcomingTasks filters uncomple­ted tasks and presents the­m in a table-like format. The display includes task name, priority, deadline, and a “Mark Done­” button.

Steps to Create the Task Scheduler:

Step 1: Create a react application by using this command

npx create-react-app  task-scheduler-app

Step 2: After creating your project folder, i.e. task-scheduler-app, use the following command to navigate to it:

cd task-scheduler-app

Project Structure:

The updated dependecies in package.json file will look like

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Write the below code in App.js file and App.css in the src directory

Javascript

import React, { useState } from "react";
import "./App.css"; // Import your CSS file here

function App() {
    const [tasks, setTasks] = useState([]);
    const [completedTasks, setCompletedTasks] = useState([]);
    const [task, setTask] = useState("");
    const [priority, setPriority] = useState("top");
    const [deadline, setDeadline] = useState("");

    const handleTaskChange = (e) => {
        setTask(e.target.value);
    };

    const handlePriorityChange = (e) => {
        setPriority(e.target.value);
    };

    const handleDeadlineChange = (e) => {
        setDeadline(e.target.value);
    };

    const addTask = () => {
        if (task.trim() === "" || deadline === "") {
            alert("Please enter a task and select a valid deadline.");
            return;
        }

        const selectedDate = new Date(deadline);
        const currentDate = new Date();

        if (selectedDate <= currentDate) {
            alert("Please select a future date for the deadline.");
            return;
        }

        const newTask = {
            id: tasks.length + 1,
            task,
            priority,
            deadline,
            done: false,
        };

        setTasks([...tasks, newTask]);

        setTask("");
        setPriority("top");
        setDeadline("");
    };

    const markDone = (id) => {
        const updatedTasks = tasks.map((t) =>
            t.id === id ? { ...t, done: true } : t
        );
        setTasks(updatedTasks);

        const completedTask = tasks.find((t) => t.id === id);
        if (completedTask) {
            setCompletedTasks([...completedTasks, completedTask]);
        }
    };

    const upcomingTasks = tasks.filter((t) => !t.done);

    return (
        <div className="App">
            <header>
                <h1>Task Scheduler</h1>
            </header>
            <main>
                <div className="task-form">
                    <input
                        type="text"
                        id="task"
                        placeholder="Enter task..."
                        value={task}
                        onChange={handleTaskChange}
                    />
                    <select
                        id="priority"
                        value={priority}
                        onChange={handlePriorityChange}
                    >
                        <option value="top">Top Priority</option>
                        <option value="middle">Middle Priority</option>
                        <option value="low">Less Priority</option>
                    </select>
                    <input
                        type="date"
                        id="deadline"
                        value={deadline}
                        onChange={handleDeadlineChange}
                    />
                    <button id="add-task" onClick={addTask}>
                        Add Task
                    </button>
                </div>
                <h2 className="heading">Upcoming Tasks</h2>
                <div className="task-list" id="task-list">
                    <table>
                        <thead>
                            <tr>
                                <th>Task Name</th>
                                <th>Priority</th>
                                <th>Deadline</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {upcomingTasks.map((t) => (
                                <tr key={t.id}>
                                    <td>{t.task}</td>
                                    <td>{t.priority}</td>
                                    <td>{t.deadline}</td>
                                    <td>
                                        {!t.done && (
                                            <button
                                                className="mark-done"
                                                onClick={() => markDone(t.id)}
                                            >
                                                Mark Done
                                            </button>
                                        )}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
                <div className="completed-task-list">
                    <h2 className="cheading">Completed Tasks</h2>
                    <table>
                        <thead>
                            <tr>
                                <th>Task Name</th>
                                <th>Priority</th>
                                <th>Deadline</th>
                            </tr>
                        </thead>
                        <tbody>
                            {completedTasks.map((ct) => (
                                <tr key={ct.id}>
                                    <td>{ct.task}</td>
                                    <td>{ct.priority}</td>
                                    <td>{ct.deadline}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    );
}

export default App;

CSS

/* App.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background-color: white;
    color: green;
    text-align: center;
    padding: 1rem 0;
    box-shadow: 0 4px 18px grey;
}

main {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 18px grey;
    border-radius: 15px;
}

.task-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.task-form input,
.task-form select,
.task-form button {
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
    flex: 1;
    border-radius: 10px;
}

button {
    background-color: green;
    color: white;
    border: none;
    cursor: pointer;
}

.mark-done {
    padding: 10px;
    font-size: 16px;
    flex: 1;
    border-radius: 15px;
    background-color: crimson;
    color: white;
    border: none;
    cursor: pointer;
}

.task-list {
    border: 1px solid #ddd;
    padding: 10px;
}

table {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

table th,
table td {
    padding: 19px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

table th {
    background-color: #eee;
    color: black;
    border-radius: 10px;
}

.completed-task-list {
    margin-top: 20px;
}

.completed-task {
    padding: 10px;
    border: 1px solid crimson;
    border-radius: 5px;
    background-color: #eaffea;
}

.completed-task h2 {
    color: #28a745;
}

h2 {
    font-size: 1.3rem;
}

.heading {
    padding-bottom: 10px;
}

.cheading {
    color: rgb(54, 54, 54);
}

Steps to run the Application:

Step 1: Type the following command in the terminal:

npm start

Step 2: Type the following URL in the browser:

 http://localhost:3000/

Output: