First of all,

Overview of the Project: The to-do list app is a straightforward and practical tool that aids users in efficiently managing their activities. Users can add, remove, and arrange tasks according to their deadlines and priorities. The goal of this program is to guarantee smooth task management across many platforms by offering an intuitive user experience that is accessible from any device.

Important Features:

  • Task Creation: Tasks with a title, description, and deadline can be added by users.
  • Task Organization: Users can arrange relevant tasks together by categorizing them into distinct lists or tags.
  • Task Deletion: When a task is no longer required, users can quickly delete it.
  • Task Priority: To emphasize a task’s significance, users can give it a higher or lower priority.
  • Task Sorting: To effectively arrange their to-do list, users can sort tasks according to their priority, due date, or alphabetical order.
  • Task Search: To find and manage particular tasks quickly, users can search for them using keywords or tags.
  • Task Completion: By marking tasks as finished, users can show progress visually.
  • The program is made using a responsive design, which makes it suitable for a variety of devices.

Other Projects:

Source Code:

HTML

<!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 data-two_delay_id="two_65844ff986f45" data-two_delay_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

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

.container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px 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"] {
  font-family: 'Afacad', sans-serif;
  flex-grow: 1;
  padding: 10px;
  border-radius: 5px 0 0 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button {
  font-family: 'Afacad', sans-serif;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

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 4px 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;
}

JS

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);
}

Final Output

See the Pen Untitled by Ayan Hussain (@Ayan-Hussain) on CodePen.

Conclusion

In summary, the to-do list app serves as a user-friendly and versatile solution for effective task management. With its simple yet powerful features allowing users to organize tasks based on deadlines and priorities, the project aims to provide a seamless experience across multiple platforms, ensuring accessibility from any device.

Categorized in:

HTML Projects,

Last Update: December 31, 2023