Pomodoro Timer

Developer
Katie Inkblotty
Size
4,732 Kb
Views
42,504
  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?

Built using Angular.js and SCSSTime management Pomodoro built for FreeCodeCamp challenge "Zipline: Build a Pomodoro Clock". What is a pomodoro timer? How do you make a pomodoro timer? This script and codes were developed by Katie Inkblotty on 08 August 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> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="timerMod"> <div ng-controller="timeCtrl"> <div id="star-wrap"><div id="star-five"></div></div> <div class="tomato-shell" ng-click="startStop();"> <div class="tomato-inner"> <div class="count-down"> {{ displayActive | timeFilt }} </div> <div id="tomato-fill"></div> </div> </div> <div class="time-ui"> <div class="break"> <div class="heading">Break</div> <span class="inc-dec" id="minus-break" ng-click="minus('b');">-</span> <span id="break-set">{{initialBreak}}</span> <span class="inc-dec" id="plus-break" ng-click="plus('b');">+</span> </div> <div class="vert-line"></div> <div class="work"> <div class="heading">Work</div> <span class="inc-dec" id="minus-work" ng-click="minus('w');">-</span> <span id="break-set">{{ initialWork }}</span> <span class="inc-dec" id="plus-work" ng-click="plus('w');">+</span> </div> </div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pomodoro Timer - Script Codes CSS Codes

body { background-color: #d6cfc9; font-family: Arial, sans-serif; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none;
}
#star-wrap { margin: 5% auto 0 auto; width: 200px;
}
#star-five { position: relative; display: block; color: #4a572c; margin: 0 auto; margin-top: 6%; width: 0px; height: 0px; border-right: 6em solid transparent; border-bottom: 3em solid #4a572c; border-left: 6em solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); z-index: 900;
}
#star-five:before { border-bottom: 5em solid #4a572c; border-left: 2em solid transparent; border-right: 2em solid transparent; position: absolute; height: 0; width: 0; top: -3em; left: -2.5em; display: block; content: '';
}
#star-five:after { position: absolute; display: block; color: red; top: 0.5em; left: -7em; width: 0; height: 0; border-right: 7em solid transparent; border-bottom: 2.5em solid #4a572c; border-left: 6em solid transparent; -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); content: '';
}
.tomato-shell { background-color: #e34819; border-radius: 50%; cursor: pointer; height: 400px; margin: 0 auto; margin-top: -4%; position: relative; width: 500px;
}
.tomato-shell .tomato-inner { background-color: #d6cfc9; border-radius: 50%; height: 90%; margin: 0 auto; overflow: hidden; position: relative; top: 50%; transform: translateY(-50%); width: 90%;
}
.tomato-shell .tomato-inner #tomato-fill { background-color: #e34819; bottom: 0; height: 0%; position: absolute; width: 100%;
}
.tomato-shell .tomato-inner .count-down { color: #4a572c; font-size: 6em; position: relative; text-align: center; top: 50%; transform: translateY(-50%); z-index: 1000;
}
.time-ui { color: #4a572c; font-size: 2em; margin: 0 auto; margin-top: 3%; text-align: center;
}
.time-ui .inc-dec { cursor: pointer;
}
.time-ui > div { display: inline-block;
}
.time-ui .vert-line { background-color: #4a572c; height: 70px; margin: 0 5%; width: 3px;
}
.time-ui .heading { font-size: 0.8em; margin-bottom: 0.8em;
}
@media screen and (max-width: 500px) { #star-wrap { font-size: 0.6em; } .tomato-shell { max-height: 300px; max-width: 90%; }
}

Pomodoro Timer - Script Codes JS Codes

// Yes, that's Duke Nukem telling you to get back to work.
var app = angular.module('timerMod', []);
app.filter('timeFilt', function(){ return function(input){ var time = new Date(input); var minutes = time.getMinutes(); var seconds = time.getSeconds(); if(seconds.toString().length===1){ seconds = "0"+(seconds.toString().substr(-2)); } return minutes + ':' + seconds; };
});
app.controller('timeCtrl', function($scope){ var timer = $scope; var minute = 60000; // milliseconds var timeout; var running = false; timer.workVar = 25; // in minutes, changes, not on DOM timer.breakVar = 5; timer.initialWork = timer.workVar; // in minutes, changes only on + -, appears on DOM timer.initialBreak = timer.breakVar; timer.workTime = timer.workVar*minute; timer.breakTime = timer.breakVar*minute; timer.activeTime = 'workTime'; timer.displayActive = timer[timer.activeTime]; timer.updateTime = function(){ timer.workTime = timer.workVar*minute; timer.breakTime = timer.breakVar*minute; timer.displayActive = timer[timer.activeTime]; timer.$apply(timer.workTime); timer.$apply(timer.breakTime); timer.$apply(timer.displayActive); } timer.updateFill = function(){ var fill = document.getElementById('tomato-fill'); if (timer.activeTime === 'workTime') { fill.style.height = 100 - ((timer.workVar/timer.initialWork)*100).toString()+'%'; } else { fill.style.height = ((timer.breakVar/timer.initialBreak)*100).toString()+'%'; } } timer.sounds = { getBackToWork: new Audio("http://www.wavsource.com/snds_2015-12-27_2076172843468134/video_games/duke/back_2_work_y.wav"), missionSuccess: new Audio("http://www.wavsource.com/snds_2015-12-27_2076172843468134/video_games/duke/bitchin.wav") } timer.startStop = function(){ running === true ? running = false : running = true if (running) { timer.countDown(); } else { window.clearTimeout(timeout); } timer.updateTime(); timer.updateFill(); } timer.countDown = function() { /* problems: timer.$apply throws error */ var active; if (timer.activeTime === 'workTime') { timer.workVar -= (1/60); active = timer.workVar; } else { timer.breakVar -= (1/60); active = timer.breakVar; } timer.updateTime(); timer.updateFill(); if (active >= (1/60)) { timeout = window.setTimeout(timer.countDown, 1000); } else { if (timer.activeTime === 'workTime'){ timer.sounds.missionSuccess.play(); timer.activeTime = 'breakTime'; timer.workVar = timer.initialWork; } else { timer.sounds.getBackToWork.play(); timer.activeTime = 'workTime'; timer.breakVar = timer.initialBreak; } timeout = window.setTimeout(timer.countDown, 1000); } } timer.plus = function(element){ running = false; if (timeout) { window.clearTimeout(timeout); } if (element === 'b'){ timer.breakVar = timer.initialBreak+1; timer.initialBreak++; } else{ timer.workVar = timer.initialWork+1; timer.initialWork++; } timer.updateTime(); timer.updateFill(); } timer.minus = function(element){ running = false; if (timeout) { window.clearTimeout(timeout); } var check; if (element === 'b') { timer.breakVar = Math.ceil(timer.breakVar)-1; timer.initialBreak--; check = timer.breakVar; } else{ timer.workVar = Math.ceil(timer.workVar)-1; timer.initialWork--; check = timer.workVar; } if (check < 0) { if (element === 'b'){ timer.breakVar = 0; timer.initialBreak = 0; } else { timer.workVar = 0; timer.initialWork = 0; } } timer.updateTime(); timer.updateFill(); }
});
Pomodoro Timer - Script Codes
Pomodoro Timer - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 4,732 Kb
Views 42,504
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!

Katie Inkblotty (inkblotty) Script Codes
Name
Force Directed Graph
Random Quote Generator
Simon game
GeoLocation
Angular Task App
Cycling D3 Scatterplot
FCC Camper Leaderboard
JQuery Calculator
Monthly Global Land Surface Temperature
Le Fake Bakery
Create amazing marketing copy 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!