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;
}
TrueCodes 
Leave a comment