Pomodoro Clock

Developer
Tushar Singh
Size
4,777 Kb
Views
44,528
  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 Tushar Singh on 08 July 2022, Friday.

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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700' rel='stylesheet' type='text/css'>
<div class="container text-center"> <audio> <source src="http://soundbible.com/grab.php?id=1218&type=mp3"> </audio> <h1 id="pomo">Pomodoro Clock</h1> <div class="row"> <!--left-column--> <div class="col-xs-6 col-left"> <p class="heading">Break Length</p> <i class="fa fa-caret-square-o-up fa-2x" id="plusBreak"></i> <span class="number" id="break">5</span><i class="fa fa-caret-square-o-down fa-2x" id="minusBreak"></i> </div> <!--Right column--> <div class="col-xs-6 col-right"> <p class="heading">Session Length</p> <i class="fa fa-caret-square-o-up fa-2x" id="plusSession"></i> <span class="number" id="session">25</span><i class="fa fa-caret-square-o-down fa-2x" id="minusSession"></i> </div> </div> <div class="row"> <div class="col-xs-6 note-col"> <i class="pin"></i> <p class="note">Click on the Clock to start or stop the Timer.</p>
</div> <div class="col-xs-6"> <div class="talk-bubble tri-right border round btm-left-in"> <div class="talktext" id="help"> <p>Start the Timer by clicking on the Clock.</p> </div>
</div> </div>
</div> <div id="clock"> <p id="clock-heading">Session</p> <i class="fa fa-bolt fa-3x" aria-hidden="true"></i><span id="clock-time">20</span> </div> <footer> <p>&copy;Copyright <span>&hearts;</span> <a href="http://codepen.io/tushar_13/" target="_blank">Tushar Singh</a> 2016.</p> </footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body{ background-image: url('http://www.axisimages.in/wp-content/uploads/Grey-background-for-site11.jpg'); color: white; font-family: 'Fira Sans', sans-serif;
}
h1 { color: #c60000; margin-bottom:50px; font-size:3em; font-weight:bold; letter-spacing:3px;
}
.heading { font-size:2em; margin-right:20px; margin-left:20px; color:#cb0000;
}
.number{ margin-right:20px; margin-left:20px; font-size:2em;
}
i, .number{ color: black;
}
i{ cursor:pointer;
}
/* Note*/
.note-col{ position:relative;
}
.note{ background-color: #ff9; color:black; height:auto; width:100px; margin-top:60px; padding:10px; border-radius:3px; box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); -moz-transform:rotate(-6deg); position:relative; display:none;
}
/*not my work(pin)*/
.pin { background-color: #aaa; display: block; height: 32px; width: 2px; position: absolute; left: 10%; top: 20%; z-index: 1; display:none;
}
.pin:after { background-color: #A31; background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3)); border-radius: 50%; box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15); content: ''; height: 12px; left: -5px; position: absolute; top: -10px; width: 12px;
}
.pin:before { background-color: hsla(0,0%,0%,0.1); box-shadow: 0 0 .25em hsla(0,0%,0%,.1); content: ''; height: 24px; width: 2px; left: 0; position: absolute; top: 8px; transform: rotate(57.5deg); -moz-transform: rotate(57.5deg); -webkit-transform: rotate(57.5deg); -o-transform: rotate(57.5deg); -ms-transform: rotate(57.5deg); transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%;
}
/*clock*/
#clock { width:300px; height:300px; margin:20px auto; cursor:pointer; border-radius:50%; background-color: rgba(245,37,73,.4);
}
#clock-heading{ font-size:2.5em; padding-top:50px; padding-bottom:30px;
}
#clock-time { font-size:3em; margin-left:10px; }
.fa-bolt{ color:white; display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: none;
z-index: auto;
width: auto;
height: auto;
position: static;
cursor: default;
opacity: 1;
margin: 0;
padding: 10px;
overflow: visible;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
color: rgba(255,255,255,1);
text-decoration: normal;
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
white-space: pre;
background: none;
-webkit-box-shadow: none;
box-shadow: none;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-webkit-transform: none;
transform: none;
-webkit-transform-origin: 50% 50% 0;
transform-origin: 50% 50% 0;
} /*footer*/
footer{ color: black;
}
footer span { color:red;
}
footer a{ font-size:1.2em; color: blue;
}
/*bubble*/
#help{ color: black; padding:10px;
}
.talk-bubble {	margin-top:50px; margin-left:10%; display: inline-block; position: relative;	width: 300px;	height: auto;	background-color: lightyellow;
}
.border{ border: 5px solid rgb(245,37,73);
}
.round{ border-radius: 30px;	-webkit-border-radius: 30px;	-moz-border-radius: 30px;
}
.tri-right.border.btm-left-in:before {	content: ' ';	position: absolute;	width: 0;	height: 0;	left: 30px; right: auto; top: auto;	bottom: -40px;	border: 20px solid;	border-color: rgb(245,37,73) transparent transparent rgb(245,37,73);
}
.tri-right.btm-left-in:after{	content: ' ';	position: absolute;	width: 0;	height: 0;	left: 38px; right: auto; top: auto;	bottom: -20px;	border: 12px solid;	border-color: lightyellow transparent transparent lightyellow;
}
@media (max-width:769px) { .talk-bubble{ width:250px; } .pin{ left: 30%; top: 20%; }
}
@media (max-width:510px) { .talk-bubble{ width:150px; } .pin{ left: 25%; top: 20%; }
}

Pomodoro Clock - Script Codes JS Codes

//1. play sound when timer ends
//2. If timer stops, check for the text //2.1 if session, change it to break //2.2 if break, change it to session
//3. decrement minutes and seconds
//4. use plus minus buttons to change timers
//5. call function after every 1sec
//6. change help text accordingly
//7. mousemove function for a little note
$(document).ready(function(){ var sessionTime = 25; var breakTime =5; var seconds =0; var minutes =25; var countTime = 25; var run; var stop =false; // Just display 25minutes $('#clock-time').text(minutes+":00"); // Let's work on our function -timer function timer () { // play the sound when seconds ==1, it would be applicable for both session and break if(minutes===0 && seconds ===1){ $('audio')[0].play(); } // check if our timer stops if(minutes === 0 & seconds ===0 ) { // if the session was running start break if($('#clock-heading').text() === 'Session') { $('#clock-heading').text('Break'); // as the session stopped start the break time // used 0 + seconds, as 00 dosen't work minutes = breakTime; $('#clock-time').html(minutes+":0"+seconds); } // if the break was running start session else if($('#clock-heading').text() === 'Break') { $('#clock-heading').text('Session'); minutes = countTime; $('#clock-time').html(minutes+":0"+seconds); } }//end if else { // if seconds is 0, we would like to start counting from 60 and minus 1 minute if(seconds === 0) { minutes--; seconds=60; } seconds--; if(seconds<10) { $('#clock-time').html(minutes+":0"+seconds) } else{ $('#clock-time').html(minutes+":"+seconds) } } // end else } //---------BREAK-------------
// increase the breaktie with plus and decrease with minus $('#plusBreak').click(function () { if(stop === false){ breakTime++; $('#break').html(breakTime); $('#clock-heading').text("Session"); $('#clock-time').html(countTime + ":00"); //reset values seconds = 0; minutes = countTime; } }); // end plusBreak $('#minusBreak').click(function () { if(stop === false){ if(breakTime>1) { breakTime--; $('#break').html(breakTime); $('#clock-heading').text("Session"); $('#clock-time').html(countTime + ":00"); seconds = 0; minutes = countTime; } } }); // end minusBreak //---------SESSION------------- $('#plusSession').click(function () { if(stop === false){ countTime++; $('#session').html(countTime); $('#clock-heading').text("Session"); $('#clock-time').html(countTime + ":00"); seconds = 0; minutes = countTime; } }); // end plusSession $('#minusSession').click(function () { if(stop === false){ if(countTime>1) { countTime--; $('#session').html(countTime); $('#clock-heading').text("Session"); $('#clock-time').html(countTime + ":00"); seconds = 0; minutes = countTime; } } }); // end minusSession $('#clock').click(function(){ if(stop === false){ // here we are calling function every 1sec run = setInterval(timer, 1000);
// help text $('#help').text("You can change the session/break length by stopping the clock and change the session/break length and start again."); stop=true; } else if(stop===true) { clearInterval(run); $('#help').text("Ok! want to change the length, Go Ahead! I am waiting for you."); stop=false; } }); // end #clock // just a little info to see when a user hovers over the clock $('#clock').mousemove(function(){ $('.note, .pin').show(); }).mouseout(function(){ $('.note, .pin').hide(); }); // end clock mousemove
});// end ready
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Tushar Singh
Username tushar_13
Uploaded July 08, 2022
Rating 3
Size 4,777 Kb
Views 44,528
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!

Tushar Singh (tushar_13) Script Codes
Name
Wikipedia Viewer
Manav
Random Stuff
Tribute Page
Experiments
Random Quote Generator
Tic Tac Toe
Portfolio
Hamburger for smaller screens
JavaScript Calculator
Create amazing video scripts 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!