1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / startupfintech / assets / js / jkanban /
Filename : custom.js
back
var kanban1 = new jKanban({
  element: '#demo1',
  boards: [{
      'id': '_todo',
      'title': 'Todo (2)',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">23/7/20</span><span class="badge badge-primary f-right">Medium</span>
                                <h6>Design Dashboard</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+10</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    },
    {
      'id': '_doing',
      'title': 'Doing (2)',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                <h6>Dashboard issue</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Pixelstrap, New york</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    },
    {
      'id': '_done',
      'title': 'Done (2)',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">23/7/20</span><span class="badge badge-primary f-right">Medium</span>
                                <h6>Design Dashboard</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+10</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    }
  ]
});

var kanban2 = new jKanban({
  element: '#demo2',
  gutter: '15px',
  click: function (el) {
    alert(el.innerHTML);
  },
  boards: [{
      'id': '_todo',
      'title': 'To Do (Item only in Working)',
      'class': 'bg-info',
      'dragTo': ['_working'],
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-info f-right">Medium</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                <h6>Dashboard issue</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Pixelstrap, New york</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    },
    {
      'id': '_working',
      'title': 'Working',
      'class': 'bg-warning',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                <h6>Dashboard issue</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Pixelstrap, New york</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    },
    {
      'id': '_done',
      'title': 'Done (Item only in Working)',
      'class': 'bg-success',
      'dragTo': ['_working'],
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-success f-right">Low</span>
                                <h6>Dashboard issue</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Pixelstrap, New york</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    }
  ]
});

var kanban3 = new jKanban({
  element: '#demo3',
  gutter: '15px',
  click: function (el) {
    alert(el.innerHTML);
  },
  boards: [{
      'id': '_todo',
      'title': 'To Do',
      'class': 'info',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
      ]
    },
    {
      'id': '_working',
      'title': 'Working',
      'class': 'warning',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
      ]
    },
    {
      'id': '_done',
      'title': 'Done',
      'class': 'success',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },
      ]
    }
  ]
});

var toDoButton = document.getElementById('addToDo');
toDoButton.addEventListener.on('click', function() {
  kanban3.addElement(
    '_todo', {
      'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
    }
  );
});

var addBoardDefault = document.getElementById('addDefault');
addBoardDefault.addEventListener.on('click', function() {
  kanban3.addBoards(
    [{
      'id': '_default',
      'title': 'Kanban Default',
      'item': [{
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        },

        {
          'title': `
                               <a class="kanban-box" href="javascript:void(0)"><span class="date">24/7/20</span><span class="badge badge-danger f-right">Urgent</span>
                                <img class="mt-2 img-fluid" src="../assets/images/other-images/maintenance-bg.jpg" alt="" data-original-title="" title="">
                                <h6>Test Sidebar</h6>
                                <div class="d-flex"><img class="img-20 me-1 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title="">
                                  <div class="flex-grow-1">
                                    <p>Themeforest, australia</p>
                                  </div>
                                </div>
                                <div class="d-flex mt-3">
                                  <ul class="list">
                                    <li><i class="fa fa-comments-o"></i>2</li>
                                    <li><i class="fa fa-paperclip"></i>2</li>
                                    <li><i class="fa fa-eye"></i></i></li>
                                  </ul>
                                  <div class="customers">
                                    <ul>
                                      <li class="d-inline-block me-3">
                                        <p class="f-12">+5</p>
                                      </li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/3.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/1.jpg" alt="" data-original-title="" title=""></li>
                                      <li class="d-inline-block"><img class="img-20 rounded-circle" src="../assets/images/user/5.jpg" alt="" data-original-title="" title=""></li>
                                    </ul>
                                  </div>
                                </div></a>
                            `,
        }
      ]
    }]
  )
});

var removeBoard = document.getElementById('removeBoard');
removeBoard.addEventListener.on('click', function() {
  kanban3.removeBoard('_done');
});