How to develop a Pomodoro Timer using JavaScript?

How to develop a Pomodoro Timer using JavaScript?

Creating a Pomodoro Timer: HTML, CSS & JS

ยท

2 min read

In this article i will help you develop a simple web project titled Pomodoro Timer using HTML, CSS and JavaScript.

Final Output

Youtube Video

For detailed explanation of code watch below video.

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pomodoro Timer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Pomodoro Timer</h1>
        <div class="timer">
            <div class="time-display">
                <span id="minutes">25</span>:<span id="seconds">00</span>
            </div>
            <div class="buttons">
                <button id="startBtn">Start</button>

                <button id="pauseBtn">Pause</button>

                <button id="resetBtn">Reset</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body{
    font-family:  Arial,sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
}

.container{
    max-width: 400px;
    margin:20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-align:center;
}

h1{
    color:#0066cc;
    margin-bottom: 20px;
}

.timer{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-display{
    font-size: 72px;
    color:#0066cc; 
    margin-bottom: 20px;
}

.buttons button{
    padding: 10px 20px;
    margin:5px;
    font-size: 16px;
    color:#fff;
    background-color: #0066cc;
    border:none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buttons button:hover{
    background-color: #0052cc;;
}

JavaScript

var minutes = 25;
var seconds = 0;
var timer;
var isRunning = false;

function startTimer(){
    isRunning = true;
    timer = setInterval(function(){
        if(seconds===0){
            if(minutes===0){
                clearInterval(timer);
                isRunning =  false;
                alert("Time's Up");
                return;
            }
            minutes--
            seconds = 59;
        }
        else{
            seconds--
        }
        document.getElementById("minutes").textContent = padTime(minutes);
        document.getElementById("seconds").textContent = padTime(seconds);
    },1000)
}

function pauseTimer(){
    clearInterval(timer)
    isRunning=false;
}

function resetTimer(){
    minutes = 25;
    seconds=0;
    document.getElementById("minutes").textContent = "25";
    document.getElementById("seconds").textContent = "00";
    isRunning = false;
    clearInterval(timer); 
}

function padTime(time){
    return time<10 ? "0"+time :time;
}

window.addEventListener('DOMContentLoaded',function(){
    document.getElementById("startBtn").addEventListener('click',function(){
        if(!isRunning){
            startTimer();
        }
    });


    document.getElementById("pauseBtn").addEventListener('click',function(){
        if(isRunning){
            pauseTimer();
        }
    });

    document.getElementById("resetBtn").addEventListener('click',function(){
        resetTimer();
    });
})

I hope you find this article helpful.

Please don't forget to like, comment and share and you can also check out my other articles. Also, don't forget to subscribe to my newsletter so you can be notified about new articles.

I am looking to get into technical writing so if you want me to write an article then please connect with me on my Twitter handle here.

Let me also know which topic I should write about next.

Did you find this article valuable?

Support Shubham Lashkan by becoming a sponsor. Any amount is appreciated!

ย