jQuery Kanban Board Project

Welcome to the jQuery Kanban Board project tutorial! This lesson is designed to guide both beginners and intermediates through the process of creating a practical and functional Kanban board using jQuery. Let's dive in! 🎯

Introduction

A Kanban board is a visual tool used to manage work and help teams collaborate effectively. In this tutorial, you'll learn how to create a Kanban board using jQuery, and by the end, you'll have a working project to showcase your new skills! 🎉

Before we get started, let's take a look at the project structure:

index.html: Our main HTML file where we'll structure the board and include necessary scripts
style.css: CSS file to style our board and make it look pretty
script.js: jQuery script file where we'll write our code to create the dynamic Kanban board

Setting up the HTML structure

First, let's create the basic HTML structure for our Kanban board. Open index.html in your favorite text editor.

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="style.css">
  <title>jQuery Kanban Board</title>
</head>
<body>
  <!-- Kanban board content goes here -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

📝 Note: Make sure to link the jQuery library before our custom script file (script.js).

Designing the board

Next, let's create the basic layout for our Kanban board. Add the following HTML structure inside the <body> tag in index.html.

html

<div id="kanban-board">
  <div class="column" id="to-do">
    To Do
  </div>
  <div class="column" id="in-progress">
    In Progress
  </div>
  <div class="column" id="completed">
    Completed
  </div>
</div>

💡 Pro Tip: We've created three columns for To Do, In Progress, and Completed. Each column will contain task cards that can be moved around as tasks progress.

Styling the board

Now, it's time to add some style to our Kanban board. Open the style.css file and add the following CSS rules:

css

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

#kanban-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.column {
  width: calc(33.333% - 10px);
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

.task {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  cursor: move;
}

Creating tasks

Let's create a simple task array in JavaScript for our example. Add the following code to script.js.

javascript

// Task array
const tasks = [
  {
    title: "Task 1",
    column: "to-do"
  },
  {
    title: "Task 2",
    column: "in-progress"
  },
  {
    title: "Task 3",
    column: "completed"
  }
];

💡 Pro Tip: In a real-world application, you'd want to fetch tasks from a server.

Creating task cards

Now, let's create the task cards for each task in the array. Add the following code to script.js.

javascript

// Function to create a task card
function createTaskCard(title, column) {
  const task = document.createElement('div');
  task.classList.add('task');
  task.textContent = title;
  document.querySelector(`#${column}`).appendChild(task);
  return task;
}

// Create task cards for our example
tasks.forEach(task => createTaskCard(task.title, task.column));

Now that we have our task cards created, let's make them draggable!

Making tasks draggable

To make our task cards draggable, we'll use jQuery UI. Add the following script to the end of index.html (before the closing </body> tag).

html

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

Now, let's add the draggable functionality to our task cards in script.js.

javascript

// Initialize draggable task cards
$( function() {
  $( ".task" ).draggable({
    revert: "invalid",
    start: function( event, ui ) {
      ui.helper.data("original-position", [ui.helper.position.left, ui.helper.position.top]);
    }
  });
});

Implementing drop zones

Next, let's make each column a drop zone so that tasks can be moved between columns. Add the following code to script.js.

javascript

// Initialize drop zones
$(function() {
  $(".column").droppable({
    drop: function( event, ui ) {
      const columnId = ui.draggable.parent().prop("id");
      const task = ui.draggable[0];
      const originalPosition = task.dataset.originalPosition;
      const [columnLeft, columnTop] = originalPosition.split(" ").map(Number);
      const newColumnLeft = $(this).offset().left;
      const taskLeft = ui.position.left - columnLeft + newColumnLeft;

      $(this).append(task);
      ui.draggable.animate({ left: taskLeft }, "fast");
      ui.draggable.removeData("original-position");
    }
  });
});

Quiz

Now, you have a functional Kanban board! You can move tasks between columns, and they will stay in place when you release the mouse button.

Conclusion

Congratulations on creating your first jQuery Kanban board! You learned how to create a dynamic Kanban board, make task cards draggable, and implement drop zones.

💡 Pro Tip: To add more functionality like deleting tasks, updating tasks, or adding new tasks, you can explore the jQuery UI API further.

Keep learning, coding, and building awesome projects with jQuery! 💪