<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Master</title>
<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;500;700&family=Poppins:wght@400;600;700&display=swap"
rel="stylesheet">
<style>
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f4f7fa;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: 0 20px;
}
header {
background-color: #0061f2;
width: 100%;
padding: 20px;
text-align: center;
color: white;
font-size: 24px;
font-weight: 600;
border-radius: 8px;
margin-top: 20px;
}
.container {
width: 100%;
max-width: 1200px;
margin-top: 30px;
padding: 20px;
}
.task-container {
background: #ffffff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px;
margin-bottom: 30px;
}
.task-container h2 {
font-size: 22px;
margin-bottom: 15px;
font-weight: 600;
}
.task-inputs {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
margin-bottom: 20px;
}
input[type="text"], input[type="date"], input[type="time"], button {
padding: 10px;
border-radius: 8px;
border: 1px solid #ddd;
font-size: 16px;
width: 45%;
}
button {
background-color: #0061f2;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0051c2;
}
.task-list {
list-style-type: none;
padding-left: 0;
}
.task-list li {
background: #fafafa;
padding: 12px;
margin-bottom: 10px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s ease-in-out;
}
.task-list li:hover {
background: #f0f0f0;
}
.task-list li .task-name {
font-weight: 500;
font-size: 16px;
flex-grow: 1;
}
.task-list li .task-time {
font-size: 14px;
color: #888;
}
.task-list li .delete-btn,
.task-list li .complete-btn {
background-color: #ff5c5c;
border: none;
color: white;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
.task-list li .complete-btn {
background-color: #00c853;
}
.insights-container {
display: flex;
justify-content: space-between;
gap: 30px;
margin-top: 50px;
flex-wrap: wrap;
}
.insight-box {
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
width: 48%;
margin-bottom: 20px;
}
.insight-box h3 {
font-size: 20px;
margin-bottom: 15px;
font-weight: 600;
}
canvas {
max-width: 100%;
}
footer {
margin-top: 50px;
font-size: 14px;
color: #888;
text-align: center;
padding: 20px 0;
width: 100%;
background-color: #f4f7fa;
border-top: 1px solid #ddd;
}
.ai-suggestions {
background: #e3f2fd;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.ai-suggestions h3 {
font-size: 18px;
font-weight: 600;
}
.ai-suggestions p {
font-size: 16px;
color: #333;
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
header {
font-size: 20px;
padding: 15px;
}
.task-inputs input, .task-inputs button {
width: 100%;
margin-bottom: 10px;
}
.task-inputs {
flex-direction: column;
gap: 10px;
}
.task-container {
padding: 15px;
}
.task-list li {
font-size: 14px;
padding: 10px;
}
.insights-container {
flex-direction: column;
gap: 20px;
}
.insight-box {
width: 100%;
}
.insight-box h3 {
font-size: 18px;
}
canvas {
max-height: 200px;
}
footer {
font-size: 12px;
padding: 10px 0;
}
}
@media screen and (max-width: 480px) {
header {
font-size: 18px;
}
.task-container h2 {
font-size: 20px;
}
.task-inputs input, .task-inputs button {
font-size: 14px;
}
.task-list li {
font-size: 12px;
padding: 8px;
}
.insight-box h3 {
font-size: 16px;
}
.ai-suggestions h3 {
font-size: 16px;
}
footer {
font-size: 10px;
}
}
</style>
</head>
<body>
<header>
Task Master
</header>
<div class="container">
<!-- Task Management Section -->
<div class="task-container">
<h2>Manage Your Tasks</h2>
<div class="task-inputs">
<input type="text" id="taskName" placeholder="Task Name">
<input type="date" id="taskDeadline">
<input type="time" id="taskTime">
<button onclick="addTask()">Add Task</button>
</div>
<!-- Separate Pending and Completed Tasks -->
<div>
<h3>Pending Tasks</h3>
<ul id="taskList" class="task-list">
<!-- Task items will appear here -->
</ul>
</div>
<div>
<h3>Completed Tasks</h3>
<ul id="completedList" class="task-list">
<!-- Completed tasks will appear here -->
</ul>
</div>
</div>
<!-- AI Suggestions Section -->
<div class="ai-suggestions">
<h3>AI Suggestions</h3>
<p id="aiSuggestion">The task with the nearest deadline should be
prioritized!</p>
</div>
<!-- Insights Section -->
<div class="insights-container">
<!-- Productivity Score Insight -->
<div class="insight-box">
<h3>Your Productivity Score</h3>
<p id="productivityScore">Score: 0</p>
<canvas id="productivityChart"></canvas>
</div>
<!-- Task Completion Overview -->
<div class="insight-box">
<h3>Task Completion Overview</h3>
<p id="totalPending">Total Tasks Pending: 0</p>
<p id="totalCompleted">Total Tasks Completed: 0</p>
<canvas id="completionChart"></canvas>
</div>
</div>
</div>
<!-- Footer with Author Info -->
<footer>
Created By Dhruv Dhonde
</footer>
<!-- Chart.js Library -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Task Management Functionality
let tasks = [];
let completedTasks = [];
function addTask() {
const taskName = document.getElementById('taskName').value;
const taskDeadline = document.getElementById('taskDeadline').value;
const taskTime = document.getElementById('taskTime').value;
if (!taskName || !taskDeadline || !taskTime) return alert('Please fill out
all fields!');
const task = {
id: Date.now(),
name: taskName,
deadline: taskDeadline + 'T' + taskTime, // combine date and time into
one string
time: taskTime,
completed: false // Initially tasks are not completed
};
tasks.push(task);
renderTasks();
updateProductivityScore();
suggestTask();
document.getElementById('taskName').value = '';
document.getElementById('taskDeadline').value = '';
document.getElementById('taskTime').value = '';
}
function renderTasks() {
const taskList = document.getElementById('taskList');
const completedList = document.getElementById('completedList');
taskList.innerHTML = '';
completedList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.classList.add(task.completed ? 'completed' : 'pending');
li.innerHTML = `
<span class="task-name">${task.name}</span>
<span class="task-time">${task.deadline}</span>
<button class="complete-btn" onclick="toggleComplete(${task.id})">$
{task.completed ? 'Undo' : 'Complete'}</button>
<button class="delete-btn" onclick="deleteTask($
{task.id})">Delete</button>
`;
if (task.completed) {
completedList.appendChild(li);
} else {
taskList.appendChild(li);
}
});
// Update total pending/completed tasks
document.getElementById('totalPending').textContent = `Total Tasks Pending:
${tasks.filter(task => !task.completed).length}`;
document.getElementById('totalCompleted').textContent = `Total Tasks
Completed: ${tasks.filter(task => task.completed).length}`;
}
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
renderTasks();
updateProductivityScore();
suggestTask();
}
function toggleComplete(id) {
const task = tasks.find(task => task.id === id);
task.completed = !task.completed; // Toggle completion status
renderTasks();
updateProductivityScore();
suggestTask();
}
// Productivity Insights & Charts
let productivityScore = 0;
function updateProductivityScore() {
const completedCount = tasks.filter(task => task.completed).length;
productivityScore = completedCount * 10; // Each completed task adds 10
points
// Update Score Display
document.getElementById('productivityScore').textContent = `Score: $
{productivityScore}`;
// Update Charts
updateCharts();
}
function updateCharts() {
const completedCount = tasks.filter(task => task.completed).length;
const pendingCount = tasks.length - completedCount;
// Productivity Chart
const productivityChart = new
Chart(document.getElementById('productivityChart'), {
type: 'radar',
data: {
labels: ['Tasks', 'Deadlines', 'Reminders'],
datasets: [{
label: 'Productivity Insights',
data: [productivityScore, 80, 60],
backgroundColor: 'rgba(0, 97, 242, 0.2)',
borderColor: '#0061f2',
borderWidth: 2
}]
}
});
// Task Completion Chart
const completionChart = new
Chart(document.getElementById('completionChart'), {
type: 'pie',
data: {
labels: ['Pending', 'Completed'],
datasets: [{
label: 'Task Completion',
data: [pendingCount, completedCount],
backgroundColor: ['#ff5c5c', '#00c853'],
borderColor: '#fff',
borderWidth: 2
}]
}
});
}
// AI Task Suggestion (Based on nearest deadline)
function suggestTask() {
if (tasks.length === 0) return;
// Sort tasks by deadline
const sortedTasks = tasks.sort((a, b) => new Date(a.deadline) - new
Date(b.deadline));
// Get the task with the earliest deadline
const nextTask = sortedTasks[0];
// Display the task suggestion
const aiSuggestion = document.getElementById('aiSuggestion');
aiSuggestion.textContent = `You should complete "${nextTask.name}" first,
as it has the nearest deadline: ${nextTask.deadline}`;
}
// Initialize the app
updateProductivityScore();
suggestTask();
</script>
</body>
</html>
