My Projects
Pomodoro Timer
A productivity tool built using HTML, CSS, and JavaScript to help manage work and break intervals using the Pomodoro Technique.
Development Process:
- 💡 **Idea & Planning**: Decided to create a timer to enhance productivity.
- 🔧 **Design**: Crafted a futuristic UI with animations and a progress ring.
- 💻 **Development**: Used JavaScript for timer logic and particle effects.
- 🚀 **Final Touches**: Added productivity stats, inspirational quotes, and deployed the project.
Code Examples:
<!-- Timer HTML Structure -->
<div class="timer">
<div id="time">00:00</div>
<button onclick="startTimer()">Start</button>
<button onclick="pauseTimer()">Pause</button>
<button onclick="resetTimer()">Reset</button>
</div>
// Timer Logic Example
let time = 25 * 60; // 25 minutes
function startTimer() {
setInterval(() => {
time--;
document.getElementById('time').innerText = formatTime(time);
}, 1000);
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}