Telegram Group Join Now
Task Management Using HTML,CSS and JavaScript
Welcome to the Codewithrandom blog. In this blog, we learn how we create Task Management Using Html, Css, and JavaScript. We have Task ready, In progress, need review and done task section in Task Management. In Task Management’s sidebar are a progress bar and an activity section.
I hope you enjoy our blog so let’s start with a basic HTML structure for Task Management.
Code by | AaronMcGuire |
Project Download | Link Available Below |
Language used | HTML ,CSS and JavaScript |
External link / Dependencies | Yes |
Responsive | Yes |
Live Preview Of Task Management
Html Code For Task Management
<!-- 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>
Restaurant Website Using HTML and CSS
ADVERTISEMENT
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 Management
: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; } }
Html + Css Code Output
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); }); });
Final Output Of Task Management
Now that we have completed our JavaScript Code. I hope you like the Task Management Ui. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you !
Written by – Code With Random/Anki
Code by – AaronMcGuire
Which code editor do you use for this Task Management Website coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!