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:
Get Discount on Top Educational Courses
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
MathGenius Pro – AI-Powered Math Solver Using Python Introduction: From simple arithmetic to more complicated college-level subjects like integration, differentiation, algebra, matrices, …
CipherMaze: The Ultimate Code Cracking Quest Game Using Python Introduction: You can make CipherMaze, a fun and brain-boosting puzzle game, with Python …
Warp Perspective Using Open CV Python Introduction: In this article, we are going to see how to Create a Warp Perspective System …
Custom AI Story Generator With Emotion Control Using Python Introduction: With the help of this AI-powered story generator, users can compose stories …
AI Powered PDF Summarizer Using Python Introduction: AI-Powered PDF Summarizer is a tool that extracts and summarizes research papers from ArXiv PDFs using Ollama (Gemma 3 LLM). The …
AI Based Career Path Recommender Using Python Introduction: One of the most significant and frequently perplexing decisions in a person’s life is …
More HTML CSS JS Projects
Get Huge Discounts
