Pomodoro clock

Developer
Kartikeya Gupta
Size
2,825 Kb
Views
16,192
  1. Pomodoro clock Previews
  2. Pomodoro clock HTML Codes
  3. Pomodoro clock CSS Codes
  4. Pomodoro clock JS Codes

How do I make an pomodoro clock?

What is a pomodoro clock? How do you make a pomodoro clock? This script and codes were developed by Kartikeya Gupta on 22 November 2022, Tuesday.

Pomodoro clock Previews
IQ Test

Pomodoro clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro clock</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div class='container-fluid'>	<div class='row nopad'>	<div class='col-md-4 nopad'><h2>WORK</h2>	<div class='col-md-12 nopad'><button class='btn btn-success n' id='work_plus'>+</button></div>	<div class='col-md-2 well nopad'><span id='work_time'>25</span></div>	<div class='col-md-12 nopad'><button class='btn btn-danger n' id='work_minus'>-</button></div>	</div>	<div class='col-md-4 nopad'>	<div class='col-md-12 nopad'><span><button class='btn-primary play'>Play</button><button class=' btn-primary stop'>Stop</button></i></span></div>	<div class='col-md-12 nopad'><div id='clock'></div></div>	<div class='col-md-12 nopad'><div id='clock_what'></div></div>	</div>	<div class='col-md-4 nopad'><h2>BREAK</h2>	<div class='col-md-12 nopad'><button class='btn btn-success n' id='break_plus'>+</button></div>	<div class='col-md-2 well nopad'><span id='break_time'>5</span></div>	<div class='col-md-12 nopad'><button class='btn btn-danger n' id='break_minus'>-</button></div>	</div>
</div>
</div>
<footer>Design and Coded by <a href="https://www.facebook.com/kartikeya100" target=_blank>Kartikeya Gupta</a></footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro clock - Script Codes CSS Codes

.nopad{	margin: 0 !important;	padding: 0 !important;
}
.well{	margin-bottom: 0;	background: #303030;	border-radius: #303030;	box-shadow: #303030;	height: 80px;	width: 60px;
}
span{	font-weight: bold;	line-height:80px;	font-size: 45px;	color: #3C54F0;	padding: 0 auto;	text-align: center!important;
}
.btn{	font-weight: bold;	font-size: 32px;	height: 60px;	width: 60px;
}
.fa{	color: red;
margin-right: 10px;
}
.fa:hover{	cursor: pointer;
}
#clock{	font-size: 40px;	font-weight: bold;
}
footer{	background: black;	text-align: center;	color: white;
}

Pomodoro clock - Script Codes JS Codes

$(document).ready(function(){
var worktime =25;
var breaktime=5;
var flag=0;
var myVar;
//Display by default
display = $('#clock');
$('#clock').html(worktime+':00');
//Does some plus minus
$('#work_plus').click(function(){
worktime +=1;
$('#work_time').html(worktime);
$('#clock').html(worktime+':00');
});
$('#work_minus').click(function(){
if(worktime>1){
worktime -=1;
$('#clock').html(worktime+':00');
}
else
worktime = worktime;
$('#work_time').html(worktime);
});
$('#break_plus').click(function(){
breaktime +=1;
$('#break_time').html(breaktime);
});
$('#break_minus').click(function(){
if(breaktime>1)
breaktime = breaktime-1;
else
breaktime = breaktime;
$('#break_time').html(breaktime);
});
//Clicking Play button
$('.play').click(function(){ $(this).prop('disabled',true) $('.n').prop('disabled',true)	timer(worktime*60);
});
//Clicking Stop button
$('.stop').click(function(){ reset();
});
function reset(){ $('.n,.play').prop('disabled',false) breaktime=5; worktime=25; $('#work_time').html(worktime); $('#break_time').html(breaktime); $('#clock').html(worktime+':00'); $('#clock_what').html(''); clearInterval(myVar);
}
//Timer function
function timer(seconds) { var remaningTime = seconds; var min = Math.floor(seconds/60); var sec = (seconds%60); console.log(min); console.log(sec); myVar = setTimeout(function() { if (remaningTime > 0 && flag===0) { timer(remaningTime - 1); if(sec<10) $('#clock').html(min+':0'+sec); else $('#clock').html(min+':'+sec); $('#clock_what').html('Its work time'); } else if(remaningTime===0 && flag===0){ if(sec<10) $('#clock').html(min+':0'+sec); else $('#clock').html(min+':'+sec); $('#clock_what').html('Its break time'); timer(breaktime*60); flag=1; } else if(flag===1 && remaningTime > 0){ timer(remaningTime - 1); $('#clock').html(min+':'+sec); $('#clock_what').html('Its break time'); } else if(flag===1 && remaningTime===0){ $('#clock').html(seconds); clearInterval(remaningTime); $(".n").prop('disabled','false'); alert('Session Over'); reset(); $('#clock_what').html('over'); flag=0; } }, 1000);
}
});
Pomodoro clock - Script Codes
Pomodoro clock - Script Codes
Home Page Home
Developer Kartikeya Gupta
Username kartikeya100
Uploaded November 22, 2022
Rating 3
Size 2,825 Kb
Views 16,192
Do you need developer help for Pomodoro clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kartikeya Gupta (kartikeya100) Script Codes
Name
Random Quote Generator Machine
Weather Application
Portfolio 2
My Portfolio
Parallax effect
Tic Tac Toe
Wikipedia Viewer
Javascript Calculator
Tribute Page
Twitch TV
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!