Skip to content
Advertisements

JavaScript Pomodoro Timer

Github: https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Pomodora%20Timer


HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="codeblogger">
    <meta name="keywords" content="pomodoro timer,pomodoro,work timer">
    <meta name="description" content="Free Pomodoro Timer">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Pomodoro</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!-- Fontawesome -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!-- JQuery -->

    <link rel="stylesheet" href="./css/style.css">
    
    
</head>
<body>

    <div class="container">
        <div class="clock_box">
            <div class="clock">
                
                    <svg
                        class="progress-ring"
                        width="500"
                        height="500">
                        <circle
                        class="clock_circle"
                        stroke="#EFEAEA"
                        stroke-width="10"
                        fill="transparent"
                        r="225"
                        cx="250"
                        cy="250"
                        />
                        <circle  />
                    </svg>
                    <div class="back_circle"></div>
                <div class="clock_text" >
                    <input class="pomodoro_name" placeholder="pomodoro name"/>
                    <p class="timer"></p>
                </div>

            </div>
            <div class="clock_button">
                <div class="smallCircle reload">
                    <i class="fas fa-redo-alt"></i>
                </div>
                <div id="play_stop" class="bigCircle play_stop">
                    <i style="display:block; margin-left: 22px" id="play" class="fas fa-play"></i>
                    <i style="display:none; margin-left: 20px" id="stop" class="fas fa-pause"></i>
                </div>
                <div class="smallCircle info" data-toggle="modal" data-target=".bd-example-modal-sm">
                    <i class="fas fa-info info "></i>
                </div>
                <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-sm">
                      <div class="modal-content p-3 text-center">
                        This application is under development. <br>
                        You can improve it by going to github at truecodes.org.<br>
                        ©codeblogger 
                      </div>
                    </div>
                  </div>
            </div>
        </div>
    </div>
      
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>

</body>
</html>

SCSS

$backgroundColor: rgb(240,128,128);
$white_color: #efeaea;
$white_color_2: rgba(239, 234, 234,.7);
$timeTextFontSize: 30px;
$timeFontSize: 100px;
$clock_text_line_height: 60px;

@mixin position($top,$left) {
    position: absolute;
    top: $top;
    left: $left;
    transform: translate(-50%,-50%);
};

body{
    background-color: $backgroundColor;
    width: 100%;
    height: 100vh;

    .container{
        position: relative;

        .clock_box{
            position: relative;
            top: 5rem;
            width: 500px;
            height:700px;
            margin: 0 auto;

            .clock{
                width: 500px;
                height: 500px;
                background:transparent;
                position: relative;
                margin-bottom: 20px;

                .back_circle{
                    width: 460px;
                    height: 460px;
                    background: transparent;
                    border: 10px solid rgb(225, 81, 81);
                    @include position(50%,50%);
                    border-radius: 50%;
                    z-index: -1;
                }

                .clock_circle{
                    transition: 0.35s stroke-dashoffset;
                    -webkit-transform: rotate(-90deg);
                            transform: rotate(-90deg);
                    -webkit-transform-origin: 50% 50%;
                            transform-origin: 50% 50%;
                }

                .clock_text{
                    @include position(50%,50%);
                    text-align: center;
                    line-height: $clock_text_line_height;
                    color: $white_color;
                    
                    .pomodoro_name{
                        font-size: $timeTextFontSize;
                        background: none;
                        border: none;
                        text-align: center;
                        color: $white_color;
                        outline: none;
                        ::placeholder{
                            color: $white_color;
                        }
                    }

                    .timer{
                        font-size: $timeFontSize;
                    }
                }
                
            }
            .clock_button{
                position: relative;

                .smallCircle{
                    width: 75px;
                    height: 75px;
                    background: transparent;
                    border-radius: 50%;
                    border: 5px solid $white_color_2;
                    cursor: pointer;
                    i{
                        font-size: 25px;
                        transition: .5s;
                    }
                    &:hover{
                        i{
                            font-size: 30px;
                        }
                    }
                }
                .reload{
                    position: absolute;
                    left: 15%;

                    &:hover{
                        border: 5px solid $white_color;
                    }
                }
                .info{
                    position: absolute;
                    left: 70%;
                }
                .bigCircle{
                    position: absolute;
                    width: 100px;
                    height: 100px;
                    top: 30px;
                    left: 50%;
                    transform: translateX(-50%);
                    background: transparent;
                    border-radius: 50%;
                    border: 5px solid $white_color_2;
                    cursor: pointer;
                    i{
                        margin-left: 5px;
                        font-size: 34px;
                        transition: .5s;
                    }
                    &:hover{
                        i{
                            font-size: 39px;
                        }
                    }
                }
                .fas{
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    color: $white_color;
                }          
            }       
        }
    }
}

JS

const reload = document.querySelector(".reload");
const play = document.getElementById("play");
const stop = document.getElementById("stop");
const info = document.querySelector(".info");
const timeText = document.querySelector(".timer");
const playStop = document.getElementById("play_stop");


class Pomodoro{
    constructor(){
        this.countdown = 0;
        this.seconds = 1500; 
        this.workTime = 25;
        this.breakTime = 5;
        this.isBreak = true;
        this.isPaused = true; 
        this.minutes = Math.floor(this.seconds / 60);
        this.remainderSeconds = this.seconds % 60;
    };
    start(){
        clearInterval(this.countdown);
        this.isPaused = !this.isPaused;
        if(!this.isPaused){
            this.countdown = setInterval(this.timer.call(this),1000);
            this.minutes = Math.floor(this.seconds / 60);
            this.remainderSeconds = this.seconds % 60;
        }else{
            clearInterval(this.countdown);
        }
    };
    reset(){
        clearInterval(this.countdown);
        this.seconds = this.workTime*60;
        this.countdown = 0;
        this.isBreak = true;
        this.isPaused = true; 
    };
    timer(){
        console.log(this.seconds);
        this.seconds -= 1;
        if(this.seconds < 0){
            clearInterval(this.countdown);
            this.seconds = (this.isBreak ? this.breakTime : this.workTime) * 60;
        }
    };
    countdownDisplay(){
        let minutes = Math.floor(this.seconds / 60);
        let remainderSeconds = this.seconds % 60;
        timeText.innerHTML = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
    };
    update(){
        this.timer();
        this.countdownDisplay();
    }
}

let pomodoro = new Pomodoro();
let pause = true;
let circleLength = 100;
const staticWorkTime = pomodoro.seconds;
const staticBreakTime = pomodoro.breakTime;
function Update(){
    pomodoro.update();
    let timeLoopCircle = 100/pomodoro.seconds;
    circleLength -= (((timeLoopCircle*pomodoro.seconds)/staticWorkTime));
    setProgress(circleLength);
}
function UpdateSmall(){
    let timeLoopCircle = 100/(staticBreakTime*60);
    circleLength -= (((timeLoopCircle*(pomodoro.seconds*60))/staticBreakTime));
    setProgress(circleLength);
}


let loop;
playStop.addEventListener("click",function(){
    if(pause == true){
        loop = setInterval(Update, 1000);
        pause = false;
        play.style.display = "none";
        stop.style.display = "block";
        
    }else if(pause == false){
        clearInterval(loop);
        pause = true;
        play.style.display = "block";
        stop.style.display = "none";
    }
})
reload.addEventListener("click",function(){
    pomodoro.reset();
    circleLength = 100;
})

var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: