This is a submission for the KendoReact Free Components Challenge.
What I Built
I built an Interactive Task Manager application. This app allows users to create, view, and manage their tasks with features like setting due dates and filtering by status. It utilizes several KendoReact Free components to provide a polished and user-friendly interface.
Demo
import React, { useState, useEffect } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Input } from '@progress/kendo-react-inputs';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import { Button } from '@progress/kendo-react-buttons';
import { Checkbox } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Card, CardBody, CardTitle } from '@progress/kendo-react-layout';
import { Tooltip } from '@progress/kendo-react-tooltip';
import { ProgressBar } from '@progress/kendo-react-progressbar';
import { Badge } from '@progress/kendo-react-indicators';
const App = () => {
const [tasks, setTasks] = useState([
{ id: 1, name: 'Grocery Shopping', dueDate: new Date(2025, 2, 20), status: 'Incomplete' },
{ id: 2, name: 'Book Appointment', dueDate: new Date(2025, 2, 22), status: 'Complete' },
{ id: 3, name: 'Pay Bills', dueDate: new Date(2025, 2, 25), status: 'Incomplete' },
]);
const [newTaskName, setNewTaskName] = useState('');
const [newTaskDueDate, setNewTaskDueDate] = useState(new Date());
const [filterStatus, setFilterStatus] = useState('All');
const taskStatuses = ['All', 'Complete', 'Incomplete'];
const handleAddTask = () => {
if (newTaskName.trim()) {
setTasks([...tasks, { id: Date.now(), name: newTaskName, dueDate: newTaskDueDate, status: 'Incomplete' }]);
setNewTaskName('');
}
};
const handleStatusChange = (taskId, newStatus) => {
setTasks(tasks.map(task =>
task.id === taskId ? { ...task, status: newStatus } : task
));
};
const filteredTasks = filterStatus === 'All'
? tasks
: tasks.filter(task => task.status === filterStatus);
const completedTasksCount = tasks.filter(task => task.status === 'Complete').length;
const totalTasksCount = tasks.length;
const completionPercentage = totalTasksCount > 0 ? (completedTasksCount / totalTasksCount) * 100 : 0;
return (
<Card style={{ margin: '20px' }}>
<CardBody>
<CardTitle>Interactive Task Manager</CardTitle>
<ProgressBar value={completionPercentage} label={`${Math.round(completionPercentage)}% Complete`} />
<div style={{ display: 'flex', gap: '10px', marginBottom: '15px', alignItems: 'center' }}>
<Input
label="New Task:"
value={newTaskName}
onChange={(e) => setNewTaskName(e.target.value)}
/>
<DatePicker value={newTaskDueDate} onChange={(e) => setNewTaskDueDate(e.target.value)} />
<Button onClick={handleAddTask}>Add Task</Button>
</div>
<div style={{ marginBottom: '15px' }}>
<label htmlFor="filterStatus">Filter by Status: </label>
<DropDownList
id="filterStatus"
data={taskStatuses}
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
/>
</div>
<Grid data={filteredTasks}>
<GridColumn field="name" title="Task Name" cell={(props) => (
<td>
<Tooltip title={`Due Date: ${props.dataItem.dueDate.toLocaleDateString()}`}>
{props.dataItem.name}
</Tooltip>
</td>
)} />
<GridColumn field="dueDate" title="Due Date" format="{0:d}" />
<GridColumn
field="status"
title="Status"
cell={(props) => (
<td>
<DropDownList
data={['Complete', 'Incomplete']}
value={props.dataItem.status}
onChange={(e) => handleStatusChange(props.dataItem.id, e.target.value)}
/>
</td>
)}
/>
</Grid>
</CardBody>
</Card>
);
};
export default App;
KendoReact Experience
I leveraged the following KendoReact Free Components to build the Task Manager:
1️⃣. Grid: The Grid component is used to display the list of tasks in a structured and organized manner, with columns for "Task Name", "Due Date", and "Status".
2️⃣. Input: The Input component allows users to type in the name of a new task they want to add.
3️⃣. DatePicker: The DatePicker component enables users to easily select a due date for their new tasks.
4️⃣. Button: The Button component triggers the action of adding a new task to the list when clicked.
5️⃣. DropDownList: Two DropDownList components are used:
One at the top to allow users to filter tasks by their status ("All", "Complete", "Incomplete").
Another within each row of the `Grid` in the "Status" column, allowing users to update the status of individual tasks.
6️⃣. Card: The Card component from @progress/kendo-react-layout is used as a container to wrap the entire Task Manager application, providing a visually distinct section on the page.
7️⃣. Tooltip: The Tooltip component is used to display the full due date of a task when the user hovers over the task name in the Grid.
8️⃣. ProgressBar: The ProgressBar component visually represents the overall completion progress of all tasks.
9️⃣. Badge: While not explicitly used in this basic code for visual representation in the Grid, the Badge component could be easily integrated within the status column to display "Complete" or "Incomplete" with different visual styles. (For simplicity in this basic example, a DropDownList is used for status update).
🔟. Checkbox: Although the status is managed with a DropDownList in this version, a Checkbox could be an alternative and more direct way to mark tasks as complete, especially if the status was a simple "Complete/Incomplete" toggle.
Thanks for trying it out.
Top comments (2)
Nicely done @aibughunter . I hope you enjoyed it, too. I am Toni and I am the Product Manager of KendoReact. It would be very helpful if you can share your feedback our product in a quick 15 min chat. Let me know at antoniya.boynovska@progress.com
build link please ?