Project 1: Study Tracker & Pomodoro Timer
Description
Study Tracker & Pomodoro Timer is a productivity-focused web application designed specifically for students. The application helps users organize their daily study tasks and improve concentration using the Pomodoro Technique. Students can add study tasks, mark them as completed, and track their progress throughout the day. The built-in 25-minute focus timer encourages distraction-free study sessions while promoting healthy study habits.
All tasks are automatically stored in the browser using Local Storage, ensuring that the user's data remains available even after refreshing or closing the page. The simple and minimalistic interface makes it easy for students of all ages to use without any learning curve.
Key Features
Add and manage study tasks
Mark completed tasks
25-minute Pomodoro focus timer
Browser-based data storage
Clean and responsive interface
No account or login required
How It Works
Step 1: Add a Task
The student enters a study task such as:
Complete Mathematics Chapter 5
Revise Physics Notes
Solve 20 MCQs
and clicks the Add button.
Step 2: View Task List
The task appears in the task list below the input field.
Step 3: Complete a Task
After finishing a task, the student clicks on it. The task is marked as completed with a strike-through effect.
Step 4: Start Focus Session
The student clicks the Start Timer button to begin a 25-minute study session.
Step 5: Receive Completion Notification
When the timer reaches zero, the application displays a notification indicating that the study session has been completed.
Step 6: Automatic Saving
All tasks are automatically saved in the browser and remain available after refreshing the page.
Technologies Used
HTML5
CSS3
JavaScript
Local Storage API
Educational Benefits
Improves time management
Increases productivity
Encourages focused study sessions
Helps students track daily progress
Builds consistent study habits
index.html
body{
font-family:Arial;
background:#f4f4f4;
display:flex;
justify-content:center;
padding:40px;
}
.container{
background:white;
padding:20px;
width:350px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,.1);
}
input{
width:70%;
padding:10px;
}
button{
padding:10px;
cursor:pointer;
}
li{
margin:10px 0;
cursor:pointer;
}
.done{
text-decoration:line-through;
color:gray;
}
<!DOCTYPE html>
<html>
<head>
<title>Study Tracker</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Study Tracker</h1>
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
<h2 id="timer">25:00</h2>
<button onclick="startTimer()">Start Timer</button>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
script.js
const taskList=document.getElementById("taskList");
function saveTasks(){
localStorage.setItem("tasks",taskList.innerHTML);
}
function loadTasks(){
taskList.innerHTML=localStorage.getItem("tasks") || "";
}
loadTasks();
function addTask(){
const input=document.getElementById("taskInput");
if(input.value==="") return;
const li=document.createElement("li");
li.textContent=input.value;
li.onclick=function(){
li.classList.toggle("done");
saveTasks();
}
taskList.appendChild(li);
input.value="";
saveTasks();
}
let time=1500;
let running=false;
function startTimer(){
if(running) return;
running=true;
let interval=setInterval(()=>{
time--;
let min=Math.floor(time/60);
let sec=time%60;
document.getElementById("timer").innerText=
`${String(min).padStart(2,'0')}:${String(sec).padStart(2,'0')}`;
if(time<=0){
clearInterval(interval);
alert("Study Session Complete!");
running=false;
time=1500;
}
},1000);
}