Task Manager Using HTML , CSS , JavaScript With Source Code

Introduction:

Project Introduction: The to-do list application is a simple and efficient tool that helps users manage their tasks effectively. It allows users to create, delete, and organize tasks based on their priorities and deadlines. This application aims to provide a user-friendly interface that can be accessed from any device, ensuring seamless task management across different platforms.

Key Features:

Task Creation: Users can add tasks with a title, description, and due date.
Task Organization: Tasks can be categorized into different lists or tags, allowing users to group related tasks together.
Task Deletion: Users can easily delete tasks that are no longer needed.
Task Priority: Users can assign priority levels to tasks to highlight their importance.
Task Sorting: Users can sort tasks based on due date, priority, or alphabetical order to organize their to-do list efficiently.
Task Search: Users can search for specific tasks using keywords or tags to quickly locate and manage them.
Task Completion: Users can mark tasks as complete, providing a visual indication of progress.
Responsive Design: The application is designed to be responsive and compatible with different devices and screen sizes.

Source Code:

Join our Telegram for Free Coding Ebooks & Handwritten Notes!

HTML:

				
					<--@codewithcurious.com--></-->

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List Application</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <div class="input-container">
            <input type="text" id="taskInput" placeholder="Add new task...">
            <button onclick="addTask()">Add</button>
        </div>
        <ul id="taskList"></ul>
    </div>
</body>
</html>

CSS (style.css):

				
					/* @codewithcurious.com */


body {
  font-family: 'Roboto', sans-serif;
  background-color: #f2f2f2;
}

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

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex-grow: 1;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  border: none;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button {
  padding: 10px 20px;
  background-color: #ff5851;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #ff403a;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

li:hover {
  background-color: #f2f2f2;
}

li span {
  flex-grow: 1;
  margin-right: 10px;
}

li button {
  background-color: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  transition: color 0.3s ease;
}

li button:hover {
  color: #333;
}

JavaScript (script.js):

				
					// @codewithcurious.com/

function addTask() {
  var input = document.getElementById("taskInput");
  var task = input.value;
  input.value = "";

  if (task === "") {
      alert("Please enter a task!");
      return;
  }

  var taskList = document.getElementById("taskList");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(task));
  taskList.appendChild(li);
}

Output:

Find More Projects

Personal Finance Manager using java Swing with complete source code

saloni

•

February 4, 2025

•

Java Projects, projects

Personal Finance Manager using java swing with complete source code Introduction: The Personal Finance Manager is a Java-based application designed to help …