Managing tasks efficiently is crucial for productivity. In this tutorial, we’ll create a Task Manager with Reminder using HTML, CSS, and JavaScript. This simple yet effective project will allow users to add tasks with due dates, display them in a list, and receive automatic alerts when a task is due. Whether you’re a beginner or looking for a small JavaScript project, this tutorial is perfect for learning DOM manipulation, event handling, and date/time management.
Features of This Task Manager
✅ Add tasks with a due date and time 📅
✅ Display tasks in a structured list 📝
✅ Implement JavaScript-based reminders ⏰
✅ Clean and modern UI with CSS 🎨
✅ Improve organization and productivity 🚀
Step-by-Step Guide to Building a Task Manager with Reminders
1. Setting Up the HTML Structure
First, create a simple HTML file that includes an input field for the task name, a date-time picker, and a button to add tasks. The task list will be displayed in an unordered list <ul>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager with Reminder</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Task Manager</h2>
<input type="text" id="task" placeholder="Task Name">
<input type="datetime-local" id="due-date">
<button onclick="addTask()">Add Task</button>
<ul id="task-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
2. Styling the Task Manager with CSS
To enhance the visual appeal, add the following CSS code to style the task manager UI.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.container {
width: 90%;
max-width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
input, button {
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
border: 1px solid black;
}
button {
background: #6e8efb;
color: white;
cursor: pointer;
}
button:hover {
background: #4c6ef5;
}
ul {
list-style: none;
margin-top: 20px;
}
li {
background: #f4f4f4;
padding: 10px;
border-radius: 5px;
margin-top: 5px;
display: flex;
justify-content: space-between;
}
3. Adding JavaScript Functionality
Now, let’s implement the JavaScript functionality to add tasks, display them in the list, and set automatic reminders.
function addTask() {
let taskInput = document.getElementById("task").value;
let dueDate = document.getElementById("due-date").value;
let taskList = document.getElementById("task-list");
if (taskInput && dueDate) {
let li = document.createElement("li");
li.innerHTML = `${taskInput} <span>${new Date(dueDate).toLocaleString()}</span>`;
taskList.appendChild(li);
let timeDiff = new Date(dueDate) - new Date();
if (timeDiff > 0) {
setTimeout(() => alert(`Reminder: ${taskInput} is due!`), timeDiff);
}
}
}
How It Works
- The user enters a task name and selects a due date and time.
- Clicking the “Add Task” button adds the task to the list.
- The JavaScript function calculates the time difference between the current time and the due time.
- If the due time is in the future, a reminder alert is triggered when the task is due.
Why This Task Manager is Useful
- 📅 Stay organized – Manage daily tasks efficiently.
- ⏰ Never miss deadlines – Get timely alerts.
- 🎨 User-friendly UI – Easy and intuitive design.
- 🚀 Enhance JavaScript skills – Practice event handling and time-based functions.
Conclusion
By following this tutorial, you’ve built a fully functional Task Manager with Reminder using HTML, CSS, and JavaScript. This project is a great starting point for building productivity tools and can be further enhanced with local storage, task deletion, and push notifications.
🔹 GitHub Repository: Access the complete source code here
🔹 Video Tutorial:
🚀 If you found this tutorial helpful, like, share, and subscribe to Madras Academy for more exciting web development tutorials!
#HTML #CSS #JavaScript #TaskManager #WebDevelopment #FrontendDevelopment #Coding #TechTutorial #InteractiveUI #TaskReminder #WebDesign 🚀✅