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

Resume builder Application using java with complete source code

saloni

•

February 11, 2025

•

Java Projects, projects

Resume Builder Application using Java With Source Code Graphical User Interface [GUI] Introduction: The Resume Builder Application is a powerful and user-friendly …