Task Manager Template Using HTML, CSS, and JavaScript

Live Preview Of Task Manager:-

<!-- Working version of https://dribbble.com/shots/14552329--Exploration-Task-Management-Dashboard -->
<div class='app'>
<main class='project'>
<div class='project-info'>
<h1>Homepage Design</h1>
<div class='project-participants'>
<span></span>
<span></span>
<span></span>
<button class='project-participants__add'>Add Participant</button>

</div>
</div>
<div class='project-tasks'>
<div class='project-column'>
<div class='project-column-heading'>
<h2 class='project-column-heading__title'>Task Ready</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
</div>
<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Konsep hero title yang menarik</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>3</span>
<span><i class="fas fa-paperclip"></i>7</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Icon di section our services</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>2</span>
<span><i class="fas fa-paperclip"></i>5</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Konsep hero title yang menarik</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>2</span>
<span><i class="fas fa-paperclip"></i>3</span>
<span class='task__owner'></span>
</div>
</div>
</div>
<div class='project-column'><div class='project-column-heading'>
<h2 class='project-column-heading__title'>In Progress</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Replace lorem ipsum text in the final designs</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>5</span>
<span><i class="fas fa-paperclip"></i>5</span> 
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Create and generate the custom SVG illustrations.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>8</span>
<span><i class="fas fa-paperclip"></i>7</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Proof read the legal page and check for and loopholes</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>12</span>
<span><i class="fas fa-paperclip"></i>11</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Create the landing page graphics for the hero slider.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>4</span>
<span><i class="fas fa-paperclip"></i>8</span>
<span class='task__owner'></span>
</div>
</div>

</div>
<div class='project-column'><div class='project-column-heading'>
<h2 class='project-column-heading__title'>Needs Review</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Check the company we copied doesn't think we copied them.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>4</span>
<span><i class="fas fa-paperclip"></i>0</span>
<span class='task__owner'></span>
</div>
</div>
<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--design'>UI Design</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Design the about page.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>0</span>
<span><i class="fas fa-paperclip"></i>5</span>
<span class='task__owner'></span>
</div>
</div>
<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Move that one image 5px down to make Phil Happy.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>2</span>
<span><i class="fas fa-paperclip"></i>2</span>
<span class='task__owner'></span>
</div>
</div>
</div>
<div class='project-column'><div class='project-column-heading'>
<h2 class='project-column-heading__title'>Done</h2><button class='project-column-heading__options'><i class="fas fa-ellipsis-h"></i></button>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Send Advert illustrations over to production company.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>12</span>
<span><i class="fas fa-paperclip"></i>5</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--illustration'>Illustration</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Dawn wants to move the text 3px to the right.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>3</span>
<span><i class="fas fa-paperclip"></i>7</span>
<span class='task__owner'></span>
</div>
</div>

<div class='task' draggable='true'>
<div class='task__tags'><span class='task__tag task__tag--copyright'>Copywriting</span><button class='task__options'><i class="fas fa-ellipsis-h"></i></button></div>
<p>Amend the contract details.</p>
<div class='task__stats'>
<span><time datetime="2021-11-24T20:00:00"><i class="fas fa-flag"></i>Nov 24</time></span>
<span><i class="fas fa-comment"></i>8</span>
<span><i class="fas fa-paperclip"></i>16</span>
<span class='task__owner'></span>
</div>
</div>

</div>

</div>
</main>
<aside class='task-details'>
<div class='tag-progress'>
<h2>Task Progress</h2>
<div class='tag-progress'>
<p>Copywriting <span>3/8</span></p>
<progress class="progress progress--copyright" max="8" value="3"> 3 </progress>
</div>
<div class='tag-progress'>
<p>Illustration <span>6/10</span></p>
<progress class="progress progress--illustration" max="10" value="6"> 6 </progress>
</div>
<div class='tag-progress'>
<p>UI Design <span>2/7</span></p>
<progress class="progress progress--design" max="7" value="2"> 2 </progress>
</div>
</div>
<div class='task-activity'>
<h2>Recent Activity</h2>
<ul>
<li>
<span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
<b>Andrea </b>uploaded 3 documents
<time datetime="2021-11-24T20:00:00">Aug 10</time>
</li>
<li>
<span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
<b>Karen </b> left a comment
<time datetime="2021-11-24T20:00:00">Aug 10</time>
</li>
<li>
<span class='task-icon task-icon--edit'><i class="fas fa-pencil-alt"></i></span>
<b>Karen </b>uploaded 3 documents
<time datetime="2021-11-24T20:00:00">Aug 11</time>
</li>
<li>
<span class='task-icon task-icon--attachment'><i class="fas fa-paperclip"></i></span>
<b>Andrea </b>uploaded 3 documents
<time datetime="2021-11-24T20:00:00">Aug 11</time>
</li>
<li>
<span class='task-icon task-icon--comment'><i class="fas fa-comment"></i></span>
<b>Karen </b> left a comment
<time datetime="2021-11-24T20:00:00">Aug 12</time>
</li>
</ul>
</div>
</aside>
</div>

Using the h1 tag selector, we will add the heading for our homepage design, and using the button tag, we will create different sections: task ready, in, task progress, Task and recent activities. These sections will serve as the framework for our task manager.

To develop the task manager section, we’ll employ the fundamental HTML tags. We will build the framework for our task manager using the div and span tags, and we will add the icon for our task manager using the icon element.

We’ll employ a few icons in our task management. The task management UI for our project will be created using the keywords and the Font Awesome symbols inside of our task management.

Restaurant Website Using HTML and CSS

There is all the Html code for Task Management. Now, you can see output without Css and JavaScript, So let’s write more Code.

Html Code Output:-

 

 

 

 

 

 

CSS Code For Task Manager:-

:root {
  --bg:#ebf0f7;
  --header:#fbf4f6;
  --text:#2e2e2f;
  --white:#ffffff;
  --light-grey:#c4cad3;
  --tag-1:#ceecfd;
  --tag-1-text:#2e87ba;
  --tag-2:#d6ede2;
  --tag-2-text:#13854e;
  --tag-3:#ceecfd;
  --tag-3-text:#2d86ba;
  --tag-4:#f2dcf5;
  --tag-4-text:#a734ba;
  --purple:#7784ee;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  color: var(--text);
}

.app {
  background-color: var(--bg);
  width: 100%;
  min-height: 100vh;
}

h1 {
  font-size: 30px;
}

.project {
  padding: 2rem;
  max-width: 75%;
  width: 100%;
  display: inline-block;
}
.project-info {
  padding: 2rem 0;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.project-participants {
  display: flex;
  align-items: center;
}
.project-participants span, .project-participants__add {
  width: 30px;
  height: 30px;
  display: inline-block;
  background: var(--purple);
  border-radius: 100rem;
  margin: 0 0.2rem;
}
.project-participants__add {
  background: transparent;
  border: 1px dashed rgb(150, 150, 150);
  font-size: 0;
  cursor: pointer;
  position: relative;
}
.project-participants__add:after {
  content: "+";
  font-size: 15px;
  color: rgb(150, 150, 150);
}
.project-tasks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  grid-column-gap: 1.5rem;
}
.project-column-heading {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.project-column-heading__title {
  font-size: 20px;
}
.project-column-heading__options {
  background: transparent;
  color: var(--light-grey);
  font-size: 18px;
  border: 0;
  cursor: pointer;
}

.task {
  cursor: move;
  background-color: var(--white);
  padding: 1rem;
  border-radius: 8px;
  width: 100%;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  margin-bottom: 1rem;
  border: 3px dashed transparent;
}
.task:hover {
  box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
  border-color: rgba(162, 179, 207, 0.2) !important;
}
.task p {
  font-size: 15px;
  margin: 1.2rem 0;
}
.task__tag {
  border-radius: 100px;
  padding: 2px 13px;
  font-size: 12px;
}
.task__tag--copyright {
  color: var(--tag-4-text);
  background-color: var(--tag-4);
}
.task__tag--design {
  color: var(--tag-3-text);
  background-color: var(--tag-3);
}
.task__tag--illustration {
  color: var(--tag-2-text);
  background-color: var(--tag-2);
}
.task__tags {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.task__options {
  background: transparent;
  border: 0;
  color: var(--light-grey);
  font-size: 17px;
}
.task__stats {
  position: relative;
  width: 100%;
  color: var(--light-grey);
  font-size: 12px;
}
.task__stats span:not(:last-of-type) {
  margin-right: 1rem;
}
.task__stats svg {
  margin-right: 5px;
}
.task__owner {
  width: 25px;
  height: 25px;
  border-radius: 100rem;
  background: var(--purple);
  position: absolute;
  display: inline-block;
  right: 0;
  bottom: 0;
}

.task-hover {
  border: 3px dashed var(--light-grey) !important;
}

.task-details {
  width: 24%;
  border-left: 1px solid #d9e0e9;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  padding: 3rem 2rem;
}

.tag-progress {
  margin: 1.5rem 0;
}
.tag-progress h2 {
  font-size: 16px;
  margin-bottom: 1rem;
}
.tag-progress p {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.tag-progress p span {
  color: rgb(180, 180, 180);
}
.tag-progress .progress {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 10px;
  height: 10px;
}
.tag-progress .progress::-webkit-progress-bar, .tag-progress .progress::-webkit-progress-value {
  border-radius: 10px;
}
.tag-progress .progress--copyright::-webkit-progress-bar {
  background-color: #ecd8e6;
}
.tag-progress .progress--copyright::-webkit-progress-value {
  background: #d459e8;
}
.tag-progress .progress--illustration::-webkit-progress-bar {
  background-color: #dee7e3;
}
.tag-progress .progress--illustration::-webkit-progress-value {
  background-color: #46bd84;
}
.tag-progress .progress--design::-webkit-progress-bar {
  background-color: #d8e7f4;
}
.tag-progress .progress--design::-webkit-progress-value {
  background-color: #08a0f7;
}

.task-activity h2 {
  font-size: 16px;
  margin-bottom: 1rem;
}
.task-activity li {
  list-style: none;
  margin: 1rem 0;
  padding: 0rem 1rem 1rem 3rem;
  position: relative;
}
.task-activity time {
  display: block;
  color: var(--light-grey);
}

.task-icon {
  width: 30px;
  height: 30px;
  border-radius: 100rem;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-icon svg {
  font-size: 12px;
  color: var(--white);
}
.task-icon--attachment {
  background-color: #fba63c;
}
.task-icon--comment {
  background-color: #5dc983;
}
.task-icon--edit {
  background-color: #7784ee;
}

@media only screen and (max-width: 1300px) {
  .project {
    max-width: 100%;
  }
  .task-details {
    width: 100%;
    display: flex;
  }
  .tag-progress,
.task-activity {
    flex-basis: 50%;
    background: var(--white);
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem;
  }
}
@media only screen and (max-width: 1000px) {
  .project-column:nth-child(2),
.project-column:nth-child(3) {
    display: none;
  }
  .project-tasks {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 600px) {
  .project-column:nth-child(4) {
    display: none;
  }
  .project-tasks {
    grid-template-columns: 1fr;
  }
  .task-details {
    flex-wrap: wrap;
    padding: 3rem 1rem;
  }
  .tag-progress,
.task-activity {
    flex-basis: 100%;
  }
  h1 {
    font-size: 25px;
  }
}

In order to style our task manager UI. We will first create a sudo element and predefine the colours for the task management user interface inside of it. The padding and margin will then be set to “Zero” using the universal tag selector (*), and the box sizing property will be used to set the box sizing to “border-box” with “Poppins” as the font family.

The styling will now be added to the project using the class selector. We will add styling to our task management UI’s elements using the class selector. We’ll increase the padding and margin, add some styling—like text boldness—as well as alter the text’s colour.

We will style our project so that it gives the user a speedy and responsive user interface. The styling will be added to the project using the media query property.

Html + Css Code Output:-

 

 

 

JavaScript Code For Task Manager:-

document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;
  
  function handleDragStart(e) {
    this.style.opacity = '0.1';
    this.style.border = '3px dashed #c4cad3';
    
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';
    
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('task-hover');
  }

  function handleDragLeave(e) {
    this.classList.remove('task-hover');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }
    
    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }
    
    return false;
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';
    this.style.border = 0;
    
    items.forEach(function (item) {
      item.classList.remove('task-hover');
    });
  }
  
  
  let items = document.querySelectorAll('.task'); 
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
});

We will write the drag start function inside of our javascript, where the opacity and the border will change as the user drags, and we’ll add a drop effect to our utilising the handleover property. We have integrated these capabilities into our solution because they each have a unique functionality.

Using the addList and remove methods provided by this task management, we will be able to add and remove classes inside of our function. In order for this to happen, we will create a variable using the let keyword that will store the values of all the html elements used in the document. querySelector All in all, we will style our project and add the dragstart and dragenter events, among many others, for our task management UI using the addEventListener.

Final Output Of Task Manager Using Html,Css and JavaScript:-

Video Output Of Task Manager: