How to Make Task Management Section using HTML, JS

By Piyush Gupta
Piyush608 top freelancer india 5
Creating a task management section using HTML, CSS, and JavaScript involves creating an interface where users can add, delete, and mark tasks as complete. Here’s a step-by-step guide to building this application:

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body{
background-color: #ebf2ff;
}</style>
<title>Tasky - Task Management App</title>
</head>
<body onload="loadInitialCardData()">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group mt-3">
<label for="imageurl">Image Url</label>
<input type="url" class="form-control" id="imageurl" aria-describedby="Image Url" placeholder="http://example.com/xyz.png">
</div>
<div class="form-group mt-3">
<label for="tasktitle">Task Title</label>
<input type="text" class="form-control" id="tasktitle" aria-describedby="Task Title" placeholder="Enter Task Title">
</div>
<div class="form-group mt-3">
<label for="tasktype">Task Type</label>
<input type="text" class="form-control" id="tasktype" aria-describedby="Task Type" placeholder="Enter Task Type">
</div>
<div class="form-group mt-3">
<label for="taskdescription">Task Description</label>
<textarea rows="6" type="text" class="form-control" id="taskdescription" aria-describedby="Task Description" placeholder="Enter Task Description"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="saveChanges()" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand fw-bolder text-primary " href="#">TaskY</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html"><strong>home</strong></a>
</li>
</ul>
<button
class="btn btn-primary ml-auto"
data-bs-toggle="modal" data-bs-target="#exampleModal"
>
<i class="fas fa-plus mr-2"></i>Add new
</button>
</div>
</div>
</nav>
<div class="container">
<div class="row mt-3">
<div class="col">
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="input-group mb-3 shadow">
<input type="text" class="form-control" placeholder="Search Here" aria-label="Search Here" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
</div>
</div>
<div class="col">
</div>
</div>
<div class="row task__container">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="index.js">
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> body{ background-color: #ebf2ff; }</style> <title>Tasky - Task Management App</title> </head> <body onload="loadInitialCardData()"> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="form-group mt-3"> <label for="imageurl">Image Url</label> <input type="url" class="form-control" id="imageurl" aria-describedby="Image Url" placeholder="http://example.com/xyz.png"> </div> <div class="form-group mt-3"> <label for="tasktitle">Task Title</label> <input type="text" class="form-control" id="tasktitle" aria-describedby="Task Title" placeholder="Enter Task Title"> </div> <div class="form-group mt-3"> <label for="tasktype">Task Type</label> <input type="text" class="form-control" id="tasktype" aria-describedby="Task Type" placeholder="Enter Task Type"> </div> <div class="form-group mt-3"> <label for="taskdescription">Task Description</label> <textarea rows="6" type="text" class="form-control" id="taskdescription" aria-describedby="Task Description" placeholder="Enter Task Description"></textarea> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" onclick="saveChanges()" data-bs-dismiss="modal">Save changes</button> </div> </div> </div> </div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <a class="navbar-brand fw-bolder text-primary " href="#">TaskY</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="index.html"><strong>home</strong></a> </li> </ul> <button class="btn btn-primary ml-auto" data-bs-toggle="modal" data-bs-target="#exampleModal" > <i class="fas fa-plus mr-2"></i>Add new </button> </div> </div> </nav> <div class="container"> <div class="row mt-3"> <div class="col"> </div> <div class="col-sm-12 col-md-6 col-lg-4"> <div class="input-group mb-3 shadow"> <input type="text" class="form-control" placeholder="Search Here" aria-label="Search Here" aria-describedby="basic-addon2"> <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span> </div> </div> <div class="col"> </div> </div> <div class="row task__container"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="index.js"> </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>

    body{
      background-color: #ebf2ff;
    }</style>
    <title>Tasky - Task Management App</title>
  </head>
  <body onload="loadInitialCardData()">

  <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="form-group mt-3">
    <label for="imageurl">Image Url</label>
    <input type="url" class="form-control" id="imageurl" aria-describedby="Image Url" placeholder="http://example.com/xyz.png">
  </div>

  <div class="form-group mt-3">
    <label for="tasktitle">Task Title</label>
    <input type="text" class="form-control" id="tasktitle" aria-describedby="Task Title" placeholder="Enter Task Title">
  </div>

  <div class="form-group mt-3">
    <label for="tasktype">Task Type</label>
    <input type="text" class="form-control" id="tasktype" aria-describedby="Task Type" placeholder="Enter Task Type">
  </div>

  <div class="form-group mt-3">
    <label for="taskdescription">Task Description</label>
    <textarea rows="6" type="text" class="form-control" id="taskdescription" aria-describedby="Task Description" placeholder="Enter Task Description"></textarea>
  </div>
  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="saveChanges()" data-bs-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>





    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
          <a class="navbar-brand fw-bolder text-primary " href="#">TaskY</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="index.html"><strong>home</strong></a>
            </li>
          </ul>
          <button
            class="btn btn-primary ml-auto"
             data-bs-toggle="modal" data-bs-target="#exampleModal"
          >
            <i class="fas fa-plus mr-2"></i>Add new
          </button>
        </div>
      </div>
    </nav>
    <div class="container">
     <div class="row mt-3">
      <div class="col">

      </div>

      <div class="col-sm-12 col-md-6 col-lg-4">
      <div class="input-group mb-3 shadow">
  <input type="text" class="form-control" placeholder="Search Here" aria-label="Search Here" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
</div>
      </div>

      <div class="col">

      </div>
     </div>

   <div class="row task__container">

   </div>


    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <script src="index.js">

  </script>
  </body>
</html>

JavaScript (script.js)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
const taskContainer = document.querySelector(".task__container");
let globalStore = [];//array of objects
console.log(taskContainer);
const generateNewCard = (taskData) => `
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="card">
<div class="card-header d-flex justify-content-end gap-2">
<button type="button" class="btn btn-outline-success"><i class="fas fa-pencil-alt"></i></button>
<button type="button" class="btn btn-outline-danger" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"><i class="fas fa-trash-alt" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"></i></button>
</div>
<div class="card-body">
<img class="card-img-top" src=${taskData.imageUrl} alt="...">
<h5 class="card-title mt-3 fw-bolder text-primary">${taskData.taskTitle}</h5>
<p class="card-text">${taskData.taskDescription}</p>
<a href="#" class="btn btn-primary">${taskData.taskType}</a>
</div>
</div>
</div>
`;
const loadInitialCardData = () => {
//localstorage to get tasky card data
const getCardData = localStorage.getItem("tasky");
//covert to normal object
const {cards} = JSON.parse(getCardData);
//loop over those array of task obejct to create HTML card , inject it to DOM
cards.map((cardObject) => {
taskContainer.insertAdjacentHTML("beforeend", generateNewCard(cardObject));
//update our globalStore
globalStore.push(cardObject);
}
)
};
//Delete function
const deleteCard = (event) => {
event = window.event;
const targetID = event.target.id;
const tagname = event.target.tagName;
globalStore = globalStore.filter((cardObject) => cardObject.id !== targetID);
localStorage.setItem("tasky",JSON.stringify({cards: globalStore}));
if(tagname === "BUTTON") {
return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode);
} else {
return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode.parentNode);
}
};
const saveChanges = () => {
const taskData = {
id: `${Date.now()}`,
imageUrl: document.getElementById("imageurl").value,
taskTitle: document.getElementById("tasktitle").value,
taskType: document.getElementById("tasktype").value,
taskDescription: document.getElementById("taskdescription").value
};
taskContainer.insertAdjacentHTML("beforeend", generateNewCard(taskData));
globalStore.push(taskData);
localStorage.setItem("tasky",JSON.stringify({cards:globalStore}));
};
const taskContainer = document.querySelector(".task__container"); let globalStore = [];//array of objects console.log(taskContainer); const generateNewCard = (taskData) => ` <div class="col-sm-12 col-md-6 col-lg-4"> <div class="card"> <div class="card-header d-flex justify-content-end gap-2"> <button type="button" class="btn btn-outline-success"><i class="fas fa-pencil-alt"></i></button> <button type="button" class="btn btn-outline-danger" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"><i class="fas fa-trash-alt" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"></i></button> </div> <div class="card-body"> <img class="card-img-top" src=${taskData.imageUrl} alt="..."> <h5 class="card-title mt-3 fw-bolder text-primary">${taskData.taskTitle}</h5> <p class="card-text">${taskData.taskDescription}</p> <a href="#" class="btn btn-primary">${taskData.taskType}</a> </div> </div> </div> `; const loadInitialCardData = () => { //localstorage to get tasky card data const getCardData = localStorage.getItem("tasky"); //covert to normal object const {cards} = JSON.parse(getCardData); //loop over those array of task obejct to create HTML card , inject it to DOM cards.map((cardObject) => { taskContainer.insertAdjacentHTML("beforeend", generateNewCard(cardObject)); //update our globalStore globalStore.push(cardObject); } ) }; //Delete function const deleteCard = (event) => { event = window.event; const targetID = event.target.id; const tagname = event.target.tagName; globalStore = globalStore.filter((cardObject) => cardObject.id !== targetID); localStorage.setItem("tasky",JSON.stringify({cards: globalStore})); if(tagname === "BUTTON") { return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode); } else { return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode.parentNode); } }; const saveChanges = () => { const taskData = { id: `${Date.now()}`, imageUrl: document.getElementById("imageurl").value, taskTitle: document.getElementById("tasktitle").value, taskType: document.getElementById("tasktype").value, taskDescription: document.getElementById("taskdescription").value }; taskContainer.insertAdjacentHTML("beforeend", generateNewCard(taskData)); globalStore.push(taskData); localStorage.setItem("tasky",JSON.stringify({cards:globalStore})); };
const taskContainer = document.querySelector(".task__container");
let globalStore = [];//array of objects
console.log(taskContainer);
const generateNewCard = (taskData) => `
  <div class="col-sm-12 col-md-6 col-lg-4">
  <div class="card">
  <div class="card-header d-flex justify-content-end gap-2">
   <button type="button" class="btn btn-outline-success"><i class="fas fa-pencil-alt"></i></button>
  <button type="button" class="btn btn-outline-danger" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"><i class="fas fa-trash-alt" id=${taskData.id} onclick="deleteCard.apply(this,arguments)"></i></button>
  </div>
  <div class="card-body">
  <img class="card-img-top" src=${taskData.imageUrl} alt="...">
   <h5 class="card-title mt-3 fw-bolder text-primary">${taskData.taskTitle}</h5>
   <p class="card-text">${taskData.taskDescription}</p>
   <a href="#" class="btn btn-primary">${taskData.taskType}</a>
  </div>
  </div>
  </div>
  `;


const loadInitialCardData = () => {
  //localstorage to get tasky card data
const getCardData = localStorage.getItem("tasky");


  //covert to normal object
const {cards} = JSON.parse(getCardData);


  //loop over those array of task obejct to create HTML card , inject it to DOM
cards.map((cardObject) => {
  taskContainer.insertAdjacentHTML("beforeend", generateNewCard(cardObject));

  //update our globalStore
  globalStore.push(cardObject);
}

)

};

//Delete function

const deleteCard = (event) => {
  event = window.event;
  const targetID = event.target.id;
  const tagname = event.target.tagName;

  globalStore = globalStore.filter((cardObject) => cardObject.id !== targetID);
  localStorage.setItem("tasky",JSON.stringify({cards: globalStore}));

  if(tagname === "BUTTON") {
    return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode);
  } else {
    return taskContainer.removeChild(event.target.parentNode.parentNode.parentNode.parentNode);
  }
};


const saveChanges = () => {
  const taskData = {
    id: `${Date.now()}`,
    imageUrl: document.getElementById("imageurl").value,
    taskTitle: document.getElementById("tasktitle").value,
    taskType: document.getElementById("tasktype").value,
    taskDescription: document.getElementById("taskdescription").value
  };


taskContainer.insertAdjacentHTML("beforeend", generateNewCard(taskData));

globalStore.push(taskData);
localStorage.setItem("tasky",JSON.stringify({cards:globalStore}));

};

 

Explanation

  1. HTML Structure:
    • The HTML structure includes a container with an input field for new tasks, a button to add tasks, and an unordered list to display the tasks.
  2. CSS Styling:
    • The CSS styles the container, input elements, task list, and buttons for a clean and modern look.
    • Completed tasks are styled with a line-through effect and gray color to indicate they are done.
  3. JavaScript Functionality:
    • The JavaScript handles adding new tasks, toggling the completion status of tasks, and deleting tasks.
    • Event listeners are set up for the add task button and the enter key to add tasks.
    • The addTask function creates new list items with the task text and a delete button.
    • The toggleComplete function toggles the completed class on the task item to mark it as completed or not.

This setup provides a basic task management application where users can add, complete, and delete tasks. You can expand it by adding more features such as editing tasks, saving tasks to local storage, or categorizing tasks.

CEO Piyush Gupta


Reviews

There are no reviews yet. Be the first one to write one.

0.0
Rated 0 out of 5
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

Select a Rating
  • Select a Rating
  • 5 Stars
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Star

Recent Posts

  CALL

+91 7905834592

Enquiry Now

piyushmnm@gmail.com

piyush.gupta384