Task Management with HTML, CSS, & JavaScript

Screenshot:-

In this article, we'll walk through the process of building a simple Task Management App using HTML, CSS, and JavaScript. By the end of this guide, you'll have a basic app that allows users to add, display, edit, and delete tasks. Let's dive in!

1. Setting Up the HTML Structure

We'll start by creating the basic HTML structure for our app. The HTML will contain a form for adding tasks and a container for displaying the task list.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Management App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Task Management App</h1>

    <form id="task-form">
      <input type="text" id="title" placeholder="Task Title" required />
      <textarea id="description" placeholder="Task Description"></textarea>
      <input type="date" id="due-date" />
      <button type="submit">Add Task</button>
    </form>

    <div id="task-list"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

This HTML file includes:

A form with fields for the task title, description, and due date.
A container (task-list) where tasks will be displayed.

2. Adding Styles with CSS

Next, let's add some basic styles to make our app visually appealing.

style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type="text"], textarea, input[type="date"] {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

#task-list {
  margin-top: 20px;
}

.task-item {
  background-color: #f4f4f4;
  margin: 10px 0;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.task-item h3 {
  margin: 0 0 10px;
}

.task-item button {
  margin-left: 10px;
  background-color: #dc3545;
}

.task-item button:first-of-type {
  background-color: #28a745;
}

In this CSS:

The .container class styles the main content area, giving it a nice background and shadow.
The form and its elements are styled to look clean and easy to use.
The task list (#task-list) and each task item (.task-item) are styled to make the tasks visually distinct.

3. Adding Interactivity with JavaScript

Now comes the fun part: adding functionality to our app with JavaScript.

script.js:

const tasks = [];

// Handle form submission to add a new task
document.getElementById('task-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const title = document.getElementById('title').value;
  const description = document.getElementById('description').value;
  const dueDate = document.getElementById('due-date').value;

  const task = { title, description, dueDate };
  tasks.push(task);

  displayTasks();

  this.reset();
});

// Function to display all tasks
function displayTasks() {
  const taskList = document.getElementById('task-list');
  taskList.innerHTML = '';

  tasks.forEach((task, index) => {
    const taskItem = `
      <div class="task-item">
        <h3>${task.title}</h3>
        <p>${task.description}</p>
        <small>Due: ${task.dueDate}</small>
        <button onclick="editTask(${index})">Edit</button>
        <button onclick="deleteTask(${index})">Delete</button>
      </div>
    `;
    taskList.innerHTML += taskItem;
  });
}

// Function to edit a task
function editTask(index) {
  const task = tasks[index];

  document.getElementById('title').value = task.title;
  document.getElementById('description').value = task.description;
  document.getElementById('due-date').value = task.dueDate;

  document.getElementById('task-form').onsubmit = function(e) {
    e.preventDefault();
    updateTask(index);
  };
}

// Function to update a task
function updateTask(index) {
  const title = document.getElementById('title').value;
  const description = document.getElementById('description').value;
  const dueDate = document.getElementById('due-date').value;

  tasks[index] = { title, description, dueDate };

  displayTasks();
  document.getElementById('task-form').reset();
  document.getElementById('task-form').onsubmit = handleFormSubmit;
}

// Function to delete a task
function deleteTask(index) {
  if (confirm('Are you sure you want to delete this task?')) {
    tasks.splice(index, 1);
    displayTasks();
  }
}

// Reset form submission back to default after editing
function handleFormSubmit(e) {
  e.preventDefault();

  const title = document.getElementById('title').value;
  const description = document.getElementById('description').value;
  const dueDate = document.getElementById('due-date').value;

  const task = { title, description, dueDate };
  tasks.push(task);

  displayTasks();

  this.reset();
}

Explanation

Creating the Tasks Array: We start by creating an empty array called tasks to store all our tasks.
Handling Form Submission:
- We listen for the submit event on the form.
- When the form is submitted, we prevent the default behavior, grab the values from the form fields, and create a new task object.
- The new task is then pushed into the tasks array, and the displayTasks() function is called to show the updated task list.
Displaying Tasks:
- The displayTasks() function is responsible for clearing the existing task list and then iterating over the tasks array.
- For each task, it creates a new task-item element and appends it to the task-list div.
- The task-item includes the task title, description, due date, and buttons for editing and deleting the task.
Editing Tasks:
- When the Edit button is clicked, the editTask() function is called with the index of the task.
- This function populates the form with the task's current details and changes the form submission behavior to update the task instead of adding a new one.
Updating Tasks:
- The updateTask() function replaces the old task in the tasks array with the updated one.
- After updating, the task list is refreshed to show the changes.
Deleting Tasks:
- The deleteTask() function removes the task from the tasks array and refreshes the task list.
- Before deletion, a confirmation dialog is shown to prevent accidental deletions.

Conclusion

With just a few lines of HTML, CSS, and JavaScript, we have created a simple but functional Task Management App. This app allows users to create, edit, and delete tasks, making it a handy tool for organizing daily tasks. Feel free to expand on this by adding features like task completion status, filtering tasks, or even saving tasks to local storage!

Source Code: Link

Task Management Using Html,css and Javascript