Pomodoro

Developer
Joo Vctor De Oliveira Santos
Size
3,113 Kb
Views
36,432
  1. Pomodoro Previews
  2. Pomodoro HTML Codes
  3. Pomodoro JS Codes

How do I make an pomodoro?

Pomodoro freecodecamp. What is a pomodoro? How do you make a pomodoro? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Pomodoro Previews
IQ Test

Pomodoro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pomodoro</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body> <div class="content"> <div class="row"> <div class="col-md-12"> <div class="page-header "> <h1 id="page-title" style="font-size:64px" class="text-center">Pomodore</h1> </div> </div> </div> <!-- Title --> <div class="row"> <div class="col-sm-6"> <center> <label for="pause">Break Length</label> <div class="input-group" style="width: 30%;"> <span class="input-group-btn"> <button id="plus-bt-pause" class="btn btn-default" type="button" onclick="var t = document.getElementById('pause'); t.value++; pause_timer = t.value * 60;">+</button> </span> <input id="pause" type="text" class="form-control" onchange="pause_timer = this.value * 60;" value="5" style="text-align: center;"> <span class="input-group-btn"> <button id="less-bt-pause" class="btn btn-default" type="button" onclick="var t = document.getElementById('pause'); t.value -= 1; pause_timer = t.value * 60;">-</button> </span> </center> </div> <!-- Pause Input --> <div class="col-sm-6"> <center> <label for="session">Session Length</label> <div class="input-group" style="width: 30%;"> <span class="input-group-btn"> <button id="plus-bt-session" class="btn btn-default" type="button" onclick="var t = document.getElementById('session'); t.value++; session_timer = t.value * 60;">+</button> </span> <input id="session" type="text" class="form-control" onchange="session_timer = this.value * 60;" value="25" style="text-align: center;"> <span class="input-group-btn"> <button id="less-bt-session" class="btn btn-default" type="button" onclick="var t = document.getElementById('session'); t.value -= 1; session_timer = t.value * 60;">-</button> </span> </center> </div> </div> <!-- Session Input --> </div> <!-- Pause & Session Input --> </br> <div class="row"> <div class="col-sm-12"> <center> <div class="btn-group" role="group" aria-label="..."> <button id="bt_restart" type="button" class="btn btn-primary btn-lg" disabled><span class="glyphicon glyphicon-repeat"></span> Restart</button> <button id="bt_start" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-play"></span> Start</button> <button id="bt_pause" type="button" class="btn btn-primary btn-lg" disabled="disabled"><span class="glyphicon glyphicon-pause"></span> Pause</button> </div> </center> </div> </div> <!-- Controll Buttons --> </br> </br> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-info" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%" id="progressbar"> <b>00:00</b> </div> </div> </div> </div> <!-- ProgressBar --> </div> <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 - Script Codes JS Codes

var running = false;
var paused = false;
var session_timer = document.getElementById('session').value * 60;
var pause_timer = document.getElementById('pause').value * 60;
var current_timer = 0;
var target_timer = 0;
var timeout_var;
var isOnPauseTime = false;
var audio = new Audio("http://www.oringz.com/oringz-uploads/sounds-964-come-to-daddy.mp3");
$('#bt_start').on("click", start);
$('#bt_pause').on("click", pause);
$('#bt_restart').on("click", restart);
function toggle() { $('#bt_restart').prop('disabled', !running); $('#bt_start').prop('disabled', (running && !paused)); $('#bt_pause').prop('disabled', !(running && !paused)); $('#session').prop('disabled', (running)); $('#plus-bt-session').prop('disabled', (running)); $('#less-bt-session').prop('disabled', (running)); $('#plus-bt-pause').prop('disabled', (running)); $('#less-bt-pause').prop('disabled', (running)); $('#pause').prop('disabled', (running)); if (running) { if (!paused) { $('#progressbar').addClass("active"); $('#progressbar').removeClass("progress-bar-warning"); if (!isOnPauseTime) $('#progressbar').addClass("progress-bar-info"); else $('#progressbar').addClass("progress-bar-danger"); } else { $('#progressbar').removeClass("active"); $('#progressbar').removeClass("progress-bar-info"); $('#progressbar').removeClass("progress-bar-danger"); $('#progressbar').addClass("progress-bar-warning"); } } else { $('#progressbar').removeClass("active"); }
}
function start() { if (paused) paused = false; else { target_timer = session_timer; isOnPauseTime = false; $('#page-title').text("Session"); } running = true; $('#progressbar').css('width 0%'); toggle(); tick();
}
function pause() { paused = true; clearTimeout(timeout_var); toggle();
}
function restart() { current_timer = target_timer = 0; clearTimeout(timeout_var); isOnPauseTime = false; paused = running = false; toggle(); $('#progressbar').removeClass("progress-bar-warning"); $('#progressbar').removeClass("progress-bar-danger"); $('#progressbar').addClass("progress-bar-info"); $('#progressbar').css('width', 100 + '%'); $('#progressbar').html("<i><b>Press start to run.</b></i>"); $('#page-title').text("Pomodore");
}
function tick() { current_timer++; var percentage = (current_timer / target_timer) * 100; if (current_timer > target_timer) { toggleTimers(); current_timer = percentage = 0; } $('#progressbar').css('width', percentage + '%'); $('#progressbar').html("<b>" + timerToString(Math.floor(target_timer - current_timer)) + "</b>"); timeout_var = setTimeout(tick, 1000);
}
function toggleTimers() { audio.play(); isOnPauseTime = !isOnPauseTime; if (isOnPauseTime) { target_timer = pause_timer; $('#progressbar').addClass("progress-bar-danger"); $('#progressbar').removeClass("progress-bar-info"); $('#progressbar').removeClass("progress-bar-warning"); $('#page-title').text("Break"); } else { target_timer = session_timer; $('#progressbar').addClass("progress-bar-info"); $('#progressbar').removeClass("progress-bar-danger"); $('#progressbar').removeClass("progress-bar-warning"); $('#page-title').text("Session"); }
}
function timerToString(time) { var hours = 0; var minutes = 0; var seconds = 0; seconds = time % 60; minutes = Math.floor(time / 60); hours = Math.floor(minutes / 60); minutes -= hours * 60; return ((hours !== 0) ? hours + ":" : "") + pad(minutes, 2) + ":" + pad(seconds, 2);
}
function pad(num, size) { var s = "000" + num; return s.substr(s.length - size);
}
Pomodoro - Script Codes
Pomodoro - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 3,113 Kb
Views 36,432
Do you need developer help for Pomodoro?

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!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Tic Tac Toe Game
Youtube Random Video With Cover Image
A Pen by Joo Vctor de Oliveira Santos
Love Letter
Markdown Previewer
Local Weather
JQuery UI Playground
Testimonial Gallery
Random Quote Machine
Simon Game
Create amazing sales emails 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!