Pomodoro Clock

Developer
Hong
Size
2,764 Kb
Views
18,216
  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 Hong on 21 October 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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <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> <div class="container-fluid"> <h1 style='color: #F65; font-family: Georgia, serif; text-align: center;'>Pomodoro Clock</h1> <div class='move'> <div class='session'> <p>Session</p> <p id='timer1'>2:00</p> <p id='timer2'>2:00</p> </div> <div id='progressbar' style="height: 50px;"> </div> </div> <div class='length'> Session length (minutes): <span class="slength">25 (Click here to set session length)</span> </div> <div class='length'> Break length (minutes): <span class="blength">5 (Click here to set break length)</span> </div> <div id="buttons"> </div>
</div> <script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Clock - Script Codes CSS Codes

body { background-color: #558;
}
.ui-progressbar.ui-widget-content { background: #F65;
}
.ui-widget-header { background: green;
}
.session { color: white; font-size: 200%; text-align: center;
}
.move { border-style: double; border-color: white;
}
.length { color: white; font-size: 150%; text-align: center;
}
.number { background-color: #b95; height: 60px; width: 60px; float: left; margin: 10px; font-size: 250%; text-align: center;
}

Pomodoro Clock - Script Codes JS Codes

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
function button() { var html = ''; for (var i = 0; i < arr.length; i++) { html += '<span class="number" id="' + arr[i] + '">' + arr[i] + '</span>'; } document.getElementById('buttons').innerHTML = html;
}
button();
// js timers, timing events,setInterval(myCallback, 500), Animate.css
//Date.prototype.getSeconds()
$(document).ready(function() { var p = 0; var sec = 0; var min = 2; //var hr = 3; var IntervalID = window.setInterval(progress, 1000); var start = Date.now(); var t2 = start; function progress() { $('#timer1').text(eval('120-(p*120/100)')); sec = 59 - (Math.round((t2 - start) / 1000)) % 60; min = 2 - 1 - Math.floor(((t2 - start) / 1000 / 60) % 60); //hr = 3 - Math.floor((t2 - start) / 1000 / 3600); $('#timer2').text(min + ':' + sec); $('#progressbar').progressbar({ value: p }); p += 100 / 120; t2 = Date.now(); console.log(p); if (Math.round(p) >= 100) { clearInterval(IntervalID); console.log(IntervalID); } } var arr2 = []; var arr3 = []; $(".slength").on("click", function() { $(".slength").html(""); arr2 = []; $(".number").on("click", function() { $(this).effect('highlight'); arr2.push(this.innerHTML); $(".slength").html(arr2.join('')); }); }); $(".blength").on("click", function() { $(".blength").html(""); arr3 = []; $(".number").on("click", function() { $(this).effect('highlight'); arr3.push(this.innerHTML); $(".blength").html(arr3.join('')); }); });
});
Pomodoro Clock - Script Codes
Pomodoro Clock - Script Codes
Home Page Home
Developer Hong
Username designbuildshipsoftware
Uploaded October 21, 2022
Rating 3
Size 2,764 Kb
Views 18,216
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!

Hong (designbuildshipsoftware) Script Codes
Name
Pomodoro Clock8
WikipediaViewer
JavaScript Calculator
ContractVehicles
Pomodoro Clock5
Use the Twitchtv JSON API
WikipediaViewer1
Personal Portfolio of Hong2
A Pen by Hong
Tribute Page of Bill Gates
Create amazing SEO content 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!