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
URL Shortener Using Python Django Introduction: Long URLs can be shortened into short, shareable links with the help of the URL Shortener …
User Authentication System Using Python Django Introduction: The implementation of safe and adaptable user authentication in Django is the main goal of …
The E-Learning System using Java with a Graphical User Interface (GUI) Introduction The E-Learning System is developed using Java (with a Graphical …
Weather App Using Python Django Introduction: When a user enters the name of a city, the Weather App retrieves current weather information. …
Quiz App Using Python Django Introduction: Users can take quizzes in a variety of subjects, see their results, and monitor their progress …
resume screener in python using python introduction The hiring process often begins with reviewing numerous resumes to filter out the most suitable …
More HTML CSS JS Projects
Get Huge Discounts
