Pomodoro Clock
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 Matheus on 03 September 2022, Saturday.
Pomodoro Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Pacifico">
<div ng-app="pomodoroApp" ng-controller="pomodoroClock"> <h1>Pomodoro Clock</h1> <div id="timeButtons"> <div id="breakControl"> <p id="breakHeader"> BREAK LENGTH </p> <button class="lengthButtons" id="breakPlus" ng-click="breakIncrease()">+</button> <p id="breakLength"> {{break}}<p> <button class="lengthButtons" id="breakMinus" ng-click="breakDecrease()">-</button> </div> <div id="sessionControl"> <p id="sessionHeader"> SESSION LENGTH </p> <button class="lengthButtons" id="sessionPlus" ng-click="sessionIncrease()">+</button> <p id="sessionLength"> {{session}}<p> <button class="lengthButtons" id="sessionMinus" ng-click="sessionDecrease()">-</button> </div> </div> <div style="cursor:pointer" id="circle" ng-click="clockInit()"> <p id="clockStatus">{{status}}</p> <p id="timer">{{minutes}}:{{seconds}}</p> </div> <div id="animatedCircle"></div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pomodoro Clock - Script Codes CSS Codes
body { width: 700px; height: 700px; margin: auto; color: #161616; background-color: currentColor;
}
h1{ font-family: 'Pacifico', serif; color: white; font-size: 80px; text-align: center; position: relative; bottom: 50px;
}
#timeButtons{ width: 350px; height: 100px; left: 35%; bottom: 150px; position: relative; display: inline;
}
#breakHeader{ color: white; position: relative; top: 60px; right: 7.5%;
}
#sessionHeader{ color: white; position: relative; bottom: 135px; left: 15.5%;
}
.lengthButtons{ color: white; border: none; background: Transparent; cursor: pointer;
}
#breakPlus{ position: relative; top: 60px; right: 6%;
}
#breakLength{ color: white; font-size: 30px; position: relative; right: 1%;
}
#breakMinus{ position: relative; bottom: 56px; left: 3.8%;
}
#sessionLength{ color: white; font-size: 30px; position: relative; bottom: 195px; left: 22.5%;
}
#sessionPlus{ position: relative; bottom: 135px; left: 17%;
}
#sessionMinus{ position: relative; bottom: 251px; left: 28%;
}
#breakControl{ position: relative; left:1%; bottom: 8px;
}
#sessionControl{ position: relative; left: 1%;
}
#circle{ background: Transparent; width: 300px; height: 300px; border-radius: 50%; border-style: solid; border-width: 8px; border-color: purple; margin: auto; position: relative; bottom: 400px;
}
#animatedCircle{ background: purple; width: 280px; height: 280px; border-radius: 50%; border-style: solid; margin: auto; position: relative; bottom: 701px; z-index: -1; opacity: 0.3;
}
#clockStatus{ color: white; text-align: center; font-size: 50px;
}
#timer{ color: white; text-align: center; position: relative; top: 5%; font-size: 50px;
}
Pomodoro Clock - Script Codes JS Codes
//exemplo de contador:
//http://jsfiddle.net/otupman/fq4vg/
//Opacity: http://stackoverflow.com/questions/32836623/how-to-fill-circle-based-on-a-value-in-css
//to make a circle with css:
/*
Yep, draw a box and give it a border radius that is half the width of the box:
#circle { background: #f00; width: 200px; height: 200px; border-radius: 50%;
}
*/
//decrease timer (format 00:00)
//var squareCanvas1x2 = document.getElementById("square1x2");
//squareCanvas1x2.style.background = 'none';
var myApp = angular.module('pomodoroApp', []);
myApp.controller('pomodoroClock', ['$scope', '$timeout', function($scope, $timeout) { $scope.minutes=25; $scope.seconds='00'; $scope.break=5; $scope.session=25; $scope.status='Session' var clickFlag=0; var circleOpcty = document.getElementById("animatedCircle"); circleOpcty.style.opacity=0; //function to define percentual relation beetwen //current timing and break/session length function percentTime(){ var totalSeconds; var pastSeconds; var currentSeconds=60*($scope.minutes)+($scope.seconds); if($scope.status=='Session'){ totalSeconds=60*($scope.session); pastSeconds=totalSeconds-currentSeconds; return (pastSeconds/totalSeconds); } else{ totalSeconds=60*($scope.break); pastSeconds=totalSeconds-currentSeconds; return (1-(pastSeconds/totalSeconds)); } } //handles clock timing var countUp = function() { if (clickFlag==1){ //handles transition break-session if ($scope.seconds==0 && $scope.minutes==0){ if($scope.status=='Session'){ $scope.minutes=$scope.break; $scope.status='Break'; } else if($scope.status=='Break'){ $scope.minutes=$scope.session; $scope.status='Session'; } } //decrease minutes if ($scope.seconds==0){ $scope.seconds=60; $scope.minutes-=1; } $scope.seconds-= 1; circleOpcty.style.opacity=percentTime(); if ($scope.seconds<10) $scope.seconds='0'+$scope.seconds.toString(); $timeout(countUp, 1000); } //defines circle color opacity as a time-function } //handles click on clock $scope.clockInit = function(){ if (clickFlag==0) clickFlag=1; else clickFlag=0; $timeout(countUp,1000); } //handles break length changes $scope.breakIncrease = function(){ if ($scope.break<$scope.session && clickFlag==0){ $scope.break+=1; $scope.minutes=$scope.session; $scope.seconds='00'; $scope.status='Session'; circleOpcty.style.opacity=0; } } $scope.breakDecrease = function(){ if ($scope.break>1 && clickFlag==0){ $scope.break-=1; $scope.minutes=$scope.session; $scope.seconds='00'; $scope.status='Session'; circleOpcty.style.opacity=0; } } //handles session length changes $scope.sessionIncrease = function(){ if ($scope.session <= 59 && clickFlag==0){ $scope.session+=1; $scope.minutes=$scope.session; $scope.seconds='00'; $scope.status='Session'; circleOpcty.style.opacity=0; } } $scope.sessionDecrease = function(){ if ($scope.session > 1 && $scope.session>$scope.break && clickFlag==0){ $scope.session-=1; $scope.minutes=$scope.session; $scope.seconds='00'; $scope.status='Session'; circleOpcty.style.opacity=0; } } }]);
/*
$(document).ready(function(){ var timerString = document.getElementById("timer"); var minutesTen; var minutesUnit; var secondsTen; var secondsUnit; function numberDecrease(n){ var ans; if (n=='0'){ return '9'; } else{ ans = parseInt(n)-1; ans=ans.toString(); return ans; } } while (timerString.innerHTML != "00:00"){ setTimeout(function(){ timerString = document.getElementById("timer"); minutesTen = timerString.innerHTML[0]; minutesUnit = timerString.innerHTML[1]; secondsTen = timerString.innerHTML[3]; secondsUnit = timerString.innerHTML[4]; secondsUnit=numberDecrease(secondsUnit); timerString.innerHTML[4] = secondsUnit; if(secondsUnit=='9'){ secondsTen=numberDecrease(secondsTen); if(secondsTen=='9'){ minutesUnit=numberDecrease(minutesUnit); timerString.innerHTML[1] = minutesUnit; if(minutesUnit=='9'){ minutesTen=numberDecrease(minutesTen); } } } timerString.innerHTML[0]=minutesTen; },1000); } /* setTimeout(function() { }, 2000); */
//});
Developer | Matheus |
Username | MatheusLima92 |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 3,705 Kb |
Views | 34,408 |
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!
Name | Size |
A Pen by Matheus | 3,441 Kb |
Quote Machine | 2,578 Kb |
Weather App | 4,587 Kb |
VotingApp - Authenticated | 2,123 Kb |
Test environment | 1,781 Kb |
Javascript Calculator | 3,484 Kb |
Portfolio | 7,721 Kb |
Game of Life | 6,575 Kb |
Recipe Box | 9,514 Kb |
Camper LeaderBoard | 4,784 Kb |
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!
Name | Username | Size |
CSS3 Latte Art Logo | Esambino | 2,036 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Spin | Elalemanyo | 8,262 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Flexbox playground | Enxaneta | 5,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!