Pomodoro Timer

Developer
Rostislav Ugrynyuk
Size
2,388 Kb
Views
10,120
  1. Pomodoro Timer Previews
  2. Pomodoro Timer HTML Codes
  3. Pomodoro Timer CSS Codes
  4. Pomodoro Timer JS Codes

How do I make an pomodoro timer?

What is a pomodoro timer? How do you make a pomodoro timer? This script and codes were developed by Rostislav Ugrynyuk on 26 December 2022, Monday.

Pomodoro Timer Previews
IQ Test

Pomodoro Timer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro Timer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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> <h1>Pomodoro Timer</h1>
<div class="container" ng-app="PomodoroTimerApp" ng-controller="TimerCtrl"> <div class="session"> <div class="breakCtrl"> <p>break length</p> <button ng-click="breakLengthChange(-1)" class="minus">-</button><span class="time">{{breakLength}}</span> <button ng-click="breakLengthChange(1)" class="plus">+</button> </div> <div class="sessionCtrl"> <p>session length</p> <button ng-click="sessionLengthChange(-1)" class="minus">-</button><span class="time">{{sessionLength}}</span> <button ng-click="sessionLengthChange(1)" class="plus">+</button> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Timer - Script Codes CSS Codes

body { background-color: #333333; height: 100%; color: #fff; text-align: center; font-size: 16px;
}
.inline { display: inline-block;
}
.session .minus,
.session .plus { background-color: #333333; color: #fff; border: none; cursor: pointer; font-size: 2em; outline: none;
}

Pomodoro Timer - Script Codes JS Codes

var app = angular.module('PomodoroTimerApp', []);
app.controller('TimerCtrl', function($scope, $interval){ $scope.breakLength = 5; $scope.sessionLength = 25; $scope.timeLeft = $scope.sessionLength; $scope.fillHeight = '0%'; $scope.sessionName = 'Session'; $scope.currentTotal; $scope.breakLengthChange = function(n){ $scope.breakLength += n; if($scope.breakLength < 0){ $scope.breakLength = 0; } }
});
Pomodoro Timer - Script Codes
Pomodoro Timer - Script Codes
Home Page Home
Developer Rostislav Ugrynyuk
Username ugross
Uploaded December 26, 2022
Rating 3
Size 2,388 Kb
Views 10,120
Do you need developer help for Pomodoro Timer?

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!

Rostislav Ugrynyuk (ugross) Script Codes
Name
Simple CSS Pricing Table
A Pen by Rostislav Ugrynyuk
Simple article cards
Scroll Down Animation
Create amazing captions 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!