Developing a Jira-Like Task Management Tool Using JavaScript
Task management tools like Jira have become indispensable for organizing workflows and improving productivity in teams and organizations. Inspired by the functionalities of such tools, this article discusses the development of a simplified, Jira-like task management application using JavaScript, HTML, and CSS. This web-based application allows users to add tasks, categorize them into different statuses (To Do, In Progress, Done), prioritize them, and drag-and-drop tasks to manage their workflow.
Follow this video for complete guidance:
Full Source Code – Task Management Tool
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Board</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body {
padding: 20px;
background: #1e1e2e;
color: #fff;
min-height: 100vh;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.header h1 {
font-size: 24px;
font-weight: 600;
}
.add-task-form {
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.form-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
input, select {
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
font-size: 14px;
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
input[type="text"] {
flex: 1;
}
input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
select {
min-width: 120px;
}
button {
padding: 12px 24px;
border: none;
border-radius: 8px;
background: #7c3aed;
color: white;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
}
button:hover {
background: #6d28d9;
transform: translateY(-1px);
}
.board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.column {
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 16px;
min-height: 400px;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.column.drag-over {
border-color: #7c3aed;
background: rgba(124, 58, 237, 0.1);
}
.column-header {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
.task {
background: rgba(255, 255, 255, 0.05);
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
cursor: move;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease;
}
.task:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
background: rgba(255, 255, 255, 0.08);
}
.task.dragging {
opacity: 0.5;
transform: scale(0.95);
}
.task-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
align-items: center;
}
.task-title {
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.delete-btn {
background: #ef4444;
padding: 4px 8px;
font-size: 16px;
}
.delete-btn:hover {
background: #dc2626;
}
.priority-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-top: 8px;
}
.priority-high {
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.priority-medium {
background: rgba(245, 158, 11, 0.2);
color: #f59e0b;
}
.priority-low {
background: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
@media (max-width: 768px) {
.board {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="header">
<h1>✨ Task Board</h1>
<button onclick="toggleForm()">+ New Task</button>
</div>
<div id="addTaskForm" class="add-task-form" style="display: none;">
<div class="form-row">
<input type="text" id="taskTitle" placeholder="What needs to be done?">
<select id="taskPriority">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
<button onclick="addTask()">Add Task</button>
</div>
</div>
<div class="board">
<div class="column" id="todo" ondragover="onDragOver(event)" ondrop="onDrop(event, 'todo')">
<div class="column-header">To Do</div>
</div>
<div class="column" id="inProgress" ondragover="onDragOver(event)" ondrop="onDrop(event, 'inProgress')">
<div class="column-header">In Progress</div>
</div>
<div class="column" id="done" ondragover="onDragOver(event)" ondrop="onDrop(event, 'done')">
<div class="column-header">Done</div>
</div>
</div>
<script>
let tasks = [
{ id: 1, title: 'Implement login', status: 'todo', priority: 'high' },
{ id: 2, title: 'Fix navigation bug', status: 'inProgress', priority: 'medium' },
{ id: 3, title: 'Update documentation', status: 'done', priority: 'low' }
];
function toggleForm() {
const form = document.getElementById('addTaskForm');
form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
function addTask() {
const title = document.getElementById('taskTitle').value;
const priority = document.getElementById('taskPriority').value;
if (title.trim()) {
const task = {
id: Date.now(),
title: title,
status: 'todo',
priority: priority
};
tasks.push(task);
document.getElementById('taskTitle').value = '';
renderTasks();
toggleForm();
}
}
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
renderTasks();
}
function createTaskElement(task) {
return `
<div class="task"
draggable="true"
ondragstart="onDragStart(event, ${task.id})"
ondragend="onDragEnd(event)">
<div class="task-header">
<span class="task-title">${task.title}</span>
<button class="delete-btn" onclick="deleteTask(${task.id})">×</button>
</div>
<span class="priority-badge priority-${task.priority}">
${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)} Priority
</span>
</div>
`;
}
function renderTasks() {
document.getElementById('todo').innerHTML = '<div class="column-header">To Do</div>' +
tasks.filter(t => t.status === 'todo').map(createTaskElement).join('');
document.getElementById('inProgress').innerHTML = '<div class="column-header">In Progress</div>' +
tasks.filter(t => t.status === 'inProgress').map(createTaskElement).join('');
document.getElementById('done').innerHTML = '<div class="column-header">Done</div>' +
tasks.filter(t => t.status === 'done').map(createTaskElement).join('');
}
// Drag and Drop functionality
function onDragStart(event, taskId) {
event.dataTransfer.setData('text/plain', taskId);
event.target.classList.add('dragging');
}
function onDragEnd(event) {
event.target.classList.remove('dragging');
document.querySelectorAll('.column').forEach(column => {
column.classList.remove('drag-over');
});
}
function onDragOver(event) {
event.preventDefault();
const column = event.target.closest('.column');
if (column) {
column.classList.add('drag-over');
}
}
function onDrop(event, status) {
event.preventDefault();
const taskId = parseInt(event.dataTransfer.getData('text/plain'));
const column = event.target.closest('.column');
if (column) {
column.classList.remove('drag-over');
tasks = tasks.map(task =>
task.id === taskId ? {...task, status: status} : task
);
renderTasks();
}
}
// Initial render
renderTasks();
// Add keyboard support
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const form = document.getElementById('addTaskForm');
if (form.style.display === 'block') {
toggleForm();
}
}
});
</script>
</body>
</html>
Key Features of the Task Management Tool
- Intuitive User Interface : The application offers a clean and user-friendly interface. A minimalistic design ensures ease of navigation, allowing users to focus on their tasks. It features a visually appealing task board divided into three columns: To Do, In Progress, and Done.
- Task Creation : Users can add new tasks using a form. Each task includes a title and priority level (Low, Medium, High). Tasks are initially placed in the “To Do” column and can be moved to other statuses as needed.
- Drag-and-Drop Functionality : Tasks can be seamlessly dragged and dropped between columns. This feature mimics the agile board experience, enabling users to update task statuses visually and intuitively.
- Task Prioritization : Tasks are labeled with priority badges to indicate their urgency. The badges use color codes (e.g., red for high, yellow for medium, green for low) to provide immediate visual cues.
- Deletion Support : Users can delete tasks that are no longer relevant. Each task card includes a delete button for quick removal.
- Responsive Design : The application is fully responsive, ensuring that users can manage their tasks effectively on both desktop and mobile devices.
Adding New Tasks
The header includes a button to toggle the task creation form. Users can enter a task title and select a priority level. Upon submission, the task is added to the “To Do” column.
Managing Tasks with Drag-and-Drop
Users can drag tasks from one column to another. The drop zones highlight when a task is dragged over them, providing a clear visual indication of where the task will land. Once dropped, the task’s status is updated accordingly.
Task Customization
Each task card includes a title, priority badge, and delete button. Hover effects and animations enhance the user experience, providing a dynamic and interactive feel.
Accessibility Features
The tool includes keyboard support for toggling the task creation form. For instance, pressing the “Escape” key closes the form if it is open.
JavaScript for Dynamic Functionality
JavaScript powers the dynamic aspects of the application, including task creation, drag-and-drop interaction, and updates to the task board. Event listeners handle user interactions, ensuring smooth operation.
CSS for Styling and Responsiveness
CSS provides the visual framework for the application. The use of modern CSS techniques, such as grid layouts and responsive design principles, ensures that the tool looks polished across devices.
Scalability and Future Enhancements
This tool serves as a foundation for building a more complex task management application. Future enhancements could include user authentication, integration with a database, or advanced features like task deadlines and notifications.
Why Build Your Own Tool?
Developing a task management tool offers several benefits:
- Customization: Tailor the application to specific workflows and team needs.
- Cost-Effectiveness: Avoid subscription fees associated with commercial tools.
- Skill Development: Enhance your programming skills and deepen your understanding of JavaScript, CSS, and UI/UX design.
Building a Jira-like task management tool with JavaScript is a rewarding project that demonstrates the power of web technologies. Whether for personal use or as part of a team, this tool offers a practical solution for managing tasks effectively. By starting with this foundational application, developers can continue to expand its features, creating a robust tool tailored to their needs.
