Task Management Ui Html,css And, Javascript (Source Code)
Hey guys, welcome to this blog, in today’s blog we are going to see how to create a task management UI with html, css, and javascript. Before going to the project let’s see what is task management.
Task management is a process of monitoring our tasks through various stages from beginning to ending. In this project we are adding the stages that pass the ” ready”, ” in progress “, ” needs review” and “Completed” stages of the tasks we entered. So this is referred to as task management.
So, now let’s begin with creating our project by adding the html code.
Html code for Task Management Ui:
<!-- 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>Now we have successfully added our html code. In this code , we first begin with adding header with the project title and the buttons along with span tags in the top header section. Now we are adding some span tags for each element to specify some animate or variation of element properties.
And we started adding the div tags for all elements with different class names for every element throughout the code. It is recommended to keep the class name related to the element we are adding, for example, if you are creating an element for adding the tasks then I would suggest you keep the class name as a task, task-new, task-finish like that in order to relate with the correct elements. Using this may result in identifying the elements with a proper class name which would result in easy and efficient styling in css part and if it occurs error then easy to find the lines.
Then we add some icons for the project with img tags so that we can use them for a specific purpose. And that’s of for html, now we can move on to the css code for styling our html. The respective code is down below.
Css code for Task Management Ui:
: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);
}
@mixin display {
display:flex;
align-items:center;
}
.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;
&-info {
padding:2rem 0;
display:flex;
width:100%;
justify-content:space-between;
align-items:center;
}
&-participants {
@include display;
span,
&__add{
width:30px;
height:30px;
display:inline-block;
background:var(--purple);
border-radius:100rem;
margin:0 .2rem;
}
&__add {
background:transparent;
border:1px dashed rgb(150,150,150);
font-size:0;
cursor:pointer;
position:relative;
&:after {
content:'+';
font-size:15px;
color:rgb(150,150,150);
}
}
}
&-tasks {
display:grid;
grid-template-columns:repeat(4,1fr);
width:100%;
grid-column-gap:1.5rem;
}
&-column {
&-heading {
margin-bottom:1rem;
@include display;
justify-content:space-between;
&__title {
font-size:20px;
}
&__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;
&:hover {
box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;
border-color:rgba(162,179,207,.2)!important;
}
p {
font-size:15px;
margin:1.2rem 0;
}
&__tag {
border-radius:100px;
padding:2px 13px;
font-size:12px;
&--copyright {
color:var(--tag-4-text);
background-color:var(--tag-4);
}
&--design {
color:var(--tag-3-text);
background-color:var(--tag-3);
}
&--illustration {
color:var(--tag-2-text);
background-color:var(--tag-2);
}
}
&__tags {
width:100%;
@include display;
justify-content:space-between;
}
&__options {
background:transparent;
border:0;
color:var(--light-grey);
font-size:17px;
}
&__stats {
position:relative;
width:100%;
color:var(--light-grey);
font-size:12px;
span:not(:last-of-type){
margin-right:1rem;
}
svg {
margin-right:5px;
}
}
&__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;
h2 {
font-size:16px;
margin-bottom:1rem;
}
p {
display:flex;
width:100%;
justify-content:space-between;
span {
color:rgb(180,180,180);
}
}
.progress {
width:100%;
-webkit-appearance: none;
appearance: none;
border:none;
border-radius:10px;
height:10px;
&::-webkit-progress-bar,
&::-webkit-progress-value {
border-radius:10px;
}
&--copyright {
&::-webkit-progress-bar {
background-color:#ecd8e6;
}
&::-webkit-progress-value {
background:#d459e8
}
}
&--illustration {
&::-webkit-progress-bar {
background-color:#dee7e3;
}
&::-webkit-progress-value {
background-color:#46bd84;
}
}
&--design {
&::-webkit-progress-bar {
background-color:#d8e7f4;
}
&::-webkit-progress-value {
background-color:#08a0f7;
}
}
}
}
.task-activity {
h2 {
font-size:16px;
margin-bottom:1rem;
}
li {
list-style:none;
margin:1rem 0;
padding:0rem 1rem 1rem 3rem;
position:relative;
}
time {
display:block;
color:var(--light-grey);
}
}
.task-icon {
width:30px;
height:30px;
border-radius:100rem;
position:absolute;
top:0;
left:0;
@include display;
justify-content:center;
svg {
font-size:12px;
color:var(--white);
}
&--attachment {
background-color:#fba63c;
}
&--comment {
background-color:#5dc983;
}
&--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;
}
}Now we have added our css code successfully. In this code, we have specially implemented scss properties which you can see at the beginning of the code. It is nothing but an advanced level in which it includes the css properties as well as includes the properties that are not presented in css. It gives the same result as css compared but the number of lines will be reduced when compared with css.
Now we start styling each and every element of html, but before we assigning the margin and padding values to zero and fixed the alignment property to border-box and font family. It is represented by the universal mark(*).
After that, some elements are added by parent class and child class properties to see some difference in elements before and after clicking and then other elements are styled by the common and regular css properties until the footer end. Also, media queries were added to support in all kinds of screens by a change in some elements.
So that’s for css, but there is one more left which is java script and that is given below.
Javascript Code task management UI:
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);
});
});Now the javascript code is also added successfully. In this code we simply add the process of the task which means when we click on it, it might go to some part of a title like completed, needs review like this part that oriented to tasks.
Create Spotify Clone Using Html Css Javascript (Source Code)
Then we create a separate function using the js function property to display the data (tasks result like completed, pending, etc..) using the inner html property. Lastly, select the tasks with loop functions and add the events to elements with add event listener properties.
So, we have completed our javascript code, we have now come to an end but before that we will look at the preview of the project in the output section.
Final output:
Now we have successfully created our task management UI project with the help of html,css, and javascript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.
If you find out this blog helpful? , then make sure to search code with random on google for front-end projects with source codes and make sure to follow the codewithrandom Instagram page.
Refer code – aaronmcg
Written by – ragunathan s
