Task Scheduler using React

0 0 4 minutes read

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:

Approach to create the Task Scheduler:

React’s useState hook effectively manages several key state variables related to tasks. These include upcoming tasks, completed tasks, task names, task priority, and task deadline.
The functions handleTaskChange, handlePriorityChange, and handleDeadlineChange capture the input provided by the users and subsequently update the relevant state variables
The addTask function performs several tasks. First, it validates the inputs for the task and deadline. If the conditions are met, it proceeds to create a new task object. This object is then appended to the tasks list.
Task states 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 uncompleted tasks and presents them 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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!