Pomodoro Clock

Developer
DannyCoder
Size
4,639 Kb
Views
14,168
  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 DannyCoder on 06 November 2022, Sunday.

Pomodoro Clock Previews
IQ Test

Pomodoro Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,900,300,500' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container text-center">
<h1><span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-hourglass-half fa-stack-1x"></i> </span></i>&nbsp; <span class="title">Pomodoro<i>Timer</i></span></h1> <div id="controller-panel"> <div class="row"> <div class="col-md-6 col-xs-6"> <h5>Set Session Duration</h5> <div class="input-group input-group-sm"> <span class="input-group-addon"><i class="fa fa-briefcase"></i></span> <input id="session-input" type="text" class="form-control" maxlength="3" aria-label="..." placeholder="120" disabled> <div class="input-group-btn"> <!-- Buttons --> <button type="button" id="session-increase" class="btn btn-info"><i class="fa fa-plus"></i></button> <button type="button" id="session-decrease" class="btn btn-info"><i class="fa fa-minus"></i></button> </div> <!-- /btn-group --> </div> <!-- /input-group --> <h6><h6>[ 30 - 90 ] minutes<h6> </div> <div class="col-md-6 col-xs-6"> <h5>Set Break Duration</h5> <div class="input-group input-group-sm"> <span class="input-group-addon"><i class="fa fa-clock-o"></i></span> <input id="break-input" type="text" placeholder="45" class="form-control" maxlength="3" aria-label="..." disabled> <div class="input-group-btn"> <!-- Buttons --> <button type="button" id="break-increase" class="btn btn-info"><i class="fa fa-plus"></i></button> <button type="button" id="break-decrease" class="btn btn-info"><i class="fa fa-minus"></i></button> </div> <!-- /btn-group --> </div> <h6>[ 01 - 45 ] minutes</h6> </div><!--/.row --> </div>
</div> <!-- /#controller-panel -->
<div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="btn-group" data-toggle="buttons"> <label id="labelForSession" class="btn btn-info active"> <input type="radio" name="options" id="session-selected" autocomplete="off" checked><i class="fa fa-briefcase"></i></span>&nbsp;&nbsp;Session Time </label> <label id="labelForBreak" class="btn btn-info"> <input type="radio" name="options" id="break-selected" autocomplete="off"><i class="fa fa-clock-o"></i></span>&nbsp;&nbsp;Break Time </label> </div><!-- /.botton-group --> </div><!-- /.row --> <p id="clock">45:00<p> </div>
</div> <div class="progress"> <div id="custom-progressbar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"> <span class="sr-only">0% Complete</span> </div> </div><!-- /.progress --> <div class="row"> <button id="start" type="button" class="btn btn-success btn-md"><i class="fa fa-play"></i>&nbsp;&nbsp;Start</button> <button id="stop" type="button" class="btn btn-danger btn-md"><i class="fa fa-stop"></i>&nbsp;&nbsp;Stop</button> <button id="reset" type="button" class="btn btn-default btn-md"><i class="fa fa-repeat"></i>&nbsp;&nbsp;Reset</button> </div> <br> <p id="footer">&copy;&nbsp;DannyCoder | FreeCodeCamp<sup>&reg;</sup></p>
</div> <!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { padding-top: 40px; padding-bottom: 40px; background-color: #ecf0f1; font-family: 'Roboto', sans-serif;
}
.container { max-width: 700px;
}
h1 { font-size: 30px; font-size: 400; line-height: 60px; vertical-align: middle; color: #7f8c8d; margin-bottom: 30px;
}
h5 { font-size: 12px; color: #2C3E50; font-weight: 300;
}
.fa-hourglass-half { color: #2c3e50;
}
h1 .title { font-size: 60px; line-height: 80px; vertical-align: middle; color: #2c3e50; font-family: 'Roboto', sans-serif; font-weight: 500;
}
h1 .title i { font-style: normal; font-family: 'Roboto', sans-serif; font-weight: 200; color: #7f8c8d;
}
.panel { -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3); box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3);
}
.panel-body { position: relative;
}
#twitter-btn { position: absolute; right: 20px; top: 5px; font-size: 30px;
} a#twitter-btn { color: 0084b4;
}
#controller-panel { margin-bottom: 20px;
}
.input-group { width: 130px; margin:auto;
}
.form-control { text-align: right;
}
#clock { font-size: 210px; font-weigth: 200; color: #2C3E50; margin-top: 25px; -webkit-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3); -moz-box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3); box-shadow: -1px 2px 8px 0px rgba(0,0,0,0.3);
}
input[type="text"]:disabled { background-color: white; cursor: unset;
}
button[type="button"]:disabled { cursor: unset;
}
.blink { animation: blink 1s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite;
}
@keyframes blink { to { visibility: hidden; }
}
@-webkit-keyframes blink { to { visibility: hidden; }
}
#footer { color: #2C3E50; font-weight: 300; font-size: 12px;
}

Pomodoro Clock - Script Codes JS Codes

$(window).load(function () { //Set default input values on page load $("input#session-input").val(45); $("input#break-input").val(15); //hold SetTimer Id returned value var $setTimerIntervalId = 0 //Time converted to 100% $("#progressbar").attr("aria-valuemax", 100); var progressbarMaxValue = 100; //Timer default value set to 45 min converted to seconds var progressbarTimerInSeconds = 45 * 60; var progressbarPerc = 0; var progressbarValueNow = 0; //increase session length $("#session-increase").click(function () { var session_input = $("input#session-input").val(); session_input = parseInt(session_input); if (session_input < 90) { $("input#session-input").val(session_input + 1); $("button#session-decrease").prop("disabled", false); updateOutput(session_input + 1, 0); progressbarTimerInSeconds = (session_input + 1) * 60; progressbarValueNow = 0; resetProgressbar(); selectSessionTimer(); } if (session_input === 90) { $("button#session-increase").prop("disabled", true); } else { $("button#session-increase").prop("disabled", false); } }); //decrease session length $("#session-decrease").click(function () { var session_input = $("input#session-input").val(); session_input = parseInt(session_input); if (session_input > 30) { $("input#session-input").val(session_input - 1); $("button#session-increase").prop("disabled", false); updateOutput(session_input - 1, 0); progressbarTimerInSeconds = (session_input - 1) * 60; progressbarValueNow = 0; resetProgressbar(); selectSessionTimer(); } if (session_input === 30) { $("button#session-decrease").prop("disabled", true); } else { $("button#session-decrease").prop("disabled", false); } }); //increase break length $("#break-increase").click(function () { var break_input = $("input#break-input").val(); break_input = parseInt(break_input); if (break_input < 45) { $("input#break-input").val(break_input + 1); $("button#break-decrease").prop("disabled", false); updateOutput(break_input + 1, 0); progressbarTimerInSeconds = (break_input + 1) * 60; progressbarValueNow = 0; resetProgressbar(); selectBreakTimer(); } if (break_input === 45) { $("button#break-increase").prop("disabled", true); } else { $("button#break-increase").prop("disabled", false); } }); //decrease break length $("#break-decrease").click(function () { var break_input = $("input#break-input").val(); break_input = parseInt(break_input); if (break_input > 1) { if (break_input < 10) { $("input#break-input").val("0" + (break_input - 1)); } else { $("input#break-input").val(break_input - 1); } $("button#break-increase").prop("disabled", false); updateOutput(break_input - 1, 0); progressbarTimerInSeconds = (break_input - 1) * 60; progressbarValueNow = 0; resetProgressbar(); selectBreakTimer(); } if (break_input === 1) { $("button#break-decrease").prop("disabled", true); } else { $("button#break-decrease").prop("disabled", false); } }); //Set Session time $("#session-selected").change(function () { var session_time = $("input#session-input").val(); clearInterval($setTimerIntervalId); disableButtons(false); $("#clock").removeClass("blink"); $("#clock").text(session_time + ":00"); progressbarTimerInSeconds = session_time * 60; progressbarValueNow = 0; resetProgressbar(); }); //Set Break Time $("#break-selected").change(function () { var break_time = parseInt($("input#break-input").val()); clearInterval($setTimerIntervalId); disableButtons(false); $("#clock").removeClass("blink"); $("#clock").text(break_time + ":00"); progressbarTimerInSeconds = break_time * 60; progressbarValueNow = 0; resetProgressbar(); }); //Start Countdown $("#start").click(function () { //call countdown function $setTimerIntervalId = setInterval(countdown, 1000); disableButtons(true); }); //Stop Countdown $("#stop").click(function () { if ($setTimerIntervalId !== 0) { clearInterval($setTimerIntervalId); $("#clock").removeClass("blink"); disableButtons(false); } }); //reset Countdown $("#reset").click(function () { //stop countdown if active if ($setTimerIntervalId !== 0) { clearInterval($setTimerIntervalId); disableButtons(false); } $("#clock").removeClass("blink"); //set Session time as default var resetTime = $("input#session-input").val(); $("#clock").text(resetTime + ":00"); selectSessionTimer(); progressbarTimerInSeconds = resetTime * 60; progressbarValueNow = 0; resetProgressbar(); }); function countdown() { var countDownStr = $("#clock").text().split(":"); var minutes = parseInt(countDownStr[0]); var seconds = parseInt(countDownStr[1]); if (minutes === 0 && seconds === 0) { $("#clock").addClass("blink"); clearInterval($setTimerIntervalId); updateOutput(0, 0); disableButtons(true); resetProgressbar(); console.log('Countdown Stopped'); return; } else if (seconds === 0) { //increase seconds seconds = 59; //decrease minutes minutes = minutes - 1; } else { seconds = seconds - 1; } //Update Time updateOutput(minutes, seconds) //Update Progress Bar updateNavbar(); } //update Time function updateOutput(min, sec) { var minutes = parseInt(min); var seconds = parseInt(sec); //Output Format if (minutes > 9 && seconds > 9) { $("#clock").text(minutes + ":" + seconds); } else if (minutes > 9) { $("#clock").text(minutes + ":0" + seconds); } else if (seconds > 9) { $("#clock").text("0" + minutes + ":" + seconds); } else { $("#clock").text("0" + minutes + ":" + "0" + seconds); } } function selectSessionTimer() { $("#session-selected").prop("checked", true); $("#labelForSession").addClass("active"); $("#break-selected").prop("checked", false); $("#labelForBreak").removeClass("active"); } function selectBreakTimer() { $("#session-selected").prop("checked", false); $("#labelForSession").removeClass("active"); $("#break-selected").prop("checked", true); $("#labelForBreak").addClass("active"); } function disableButtons(val) { $("#start").prop("disabled", val); $("button#session-increase").prop("disabled", val); $("button#session-decrease").prop("disabled", val); $("button#break-increase").prop("disabled", val); $("button#break-decrease").prop("disabled", val); } function updateNavbar() { progressbarValueNow = progressbarValueNow + 1; //convert to percentage progressbarPerc = Math.floor((progressbarValueNow / progressbarTimerInSeconds) * 100); $("#custom-progressbar") .css("width", progressbarPerc + "%") .attr("aria-valuenow", progressbarPerc) .text(progressbarPerc + "%"); }; function resetProgressbar(){ $("#custom-progressbar") .css("width", 100 + "%") .attr("aria-valuenow", 100) .text(""); }
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer DannyCoder
Username DannyCoder
Uploaded November 06, 2022
Rating 3
Size 4,639 Kb
Views 14,168
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!

DannyCoder (DannyCoder) Script Codes
Name
Zipline Random Quote Machine
A Pen by DannyCoder
Calculator
Twitch Streamers
CamperNews
Personal Portfolio Webpage
Local Weather
Palindromes
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!