<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Task Time Tracker</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin-top: 40px; }
#time { font-size: 48px; margin-bottom: 10px; }
input, button { font-size: 18px; padding: 10px; margin: 5px; }
#log { margin-top: 30px; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto; }
.entry { border-bottom: 1px solid #ccc; padding: 10px 0; }
</style>
</head>
<body>
<h1>🕒 Time Tracker</h1>
<input type=”text” id=”taskName” placeholder=”Enter task name…” />
<div id=”time”>00:00:00</div>
<button onclick=”startTimer()”>Start</button>
<button onclick=”stopTimer()”>Stop</button>
<button onclick=”resetTimer()”>Reset</button>
<div id=”log”><h2>🗂️ Task Log</h2></div>
<script>
let startTime = 0;
let elapsedTime = 0;
let timerInterval;
let breakInterval;
function timeToString(time) {
const hrs = Math.floor(time / 3600000);
const mins = Math.floor((time % 3600000) / 60000);
const secs = Math.floor((time % 60000) / 1000);
return `${hrs.toString().padStart(2, ‘0’)}:${mins.toString().padStart(2, ‘0’)}:${secs.toString().padStart(2, ‘0’)}`;
}
function startTimer() {
const task = document.getElementById(“taskName”).value.trim();
if (!task) {
alert(“Please enter a task name.”);
return;
}
startTime = Date.now() – elapsedTime;
timerInterval = setInterval(() => {
elapsedTime = Date.now() – startTime;
document.getElementById(“time”).textContent = timeToString(elapsedTime);
}, 1000);
// Start break reminder every 25 minutes
breakInterval = setInterval(() => {
alert(“⏰ Time for a break!”);
}, 25 * 60 * 1000);
}
function stopTimer() {
clearInterval(timerInterval);
clearInterval(breakInterval);
logTask();
}
function resetTimer() {
clearInterval(timerInterval);
clearInterval(breakInterval);
elapsedTime = 0;
document.getElementById(“time”).textContent = “00:00:00”;
document.getElementById(“taskName”).value = “”;
}
function logTask() {
const task = document.getElementById(“taskName”).value.trim();
if (!task || elapsedTime === 0) return;
const timeStr = timeToString(elapsedTime);
const logEntry = {
task,
duration: timeStr,
timestamp: new Date().toLocaleString()
};
// Save to localStorage
let history = JSON.parse(localStorage.getItem(“taskLog”)) || [];
history.push(logEntry);
localStorage.setItem(“taskLog”, JSON.stringify(history));
displayLog();
resetTimer();
}
function displayLog() {
const logDiv = document.getElementById(“log”);
let history = JSON.parse(localStorage.getItem(“taskLog”)) || [];
logDiv.innerHTML = `<h2>🗂️ Task Log</h2>` + history.reverse().map(entry =>
`<div class=”entry”>
<strong>${entry.task}</strong><br>
⏳ Duration: ${entry.duration}<br>
📅 Logged: ${entry.timestamp}
</div>`
).join(”);
}
window.onload = displayLog;
</script>
</body>
</html>
Features Recap:
-
Users must input a task name before tracking.
-
Timer logs are stored in browser localStorage.
-
Entries are timestamped and displayed below.
-
Optional 25-minute break alert included (you can customise).
-
No backend or database needed — perfect for personal use or MVPs.
