I am trying to make a countdown timer based on the Pomodoro technique where you work for 25 minutes then take a break. I am writing the page in Javascript and jQuery using the jQuery.countdown and moment.js plugins. I have it so that when a user hits the start button it counts down 25 minutes but then after that timer is finished I want there to have two break options restart the timer again. Then it just goes in a cycle 25mins->break->25 mins->break->etc depending on what button the user pushes at the end of countdown.
How it is now the buttons after the countdown is complete do nothing. I feel like I need to reset the timer but the documentation is a little difficult to through for jQuery.countdown.
<div class="container-fluid">
<p>start timer and then get to work</p>
<div class="container-fluid">
<div class="container-fluid">
<span id="timer"></span>
</div>
</br>
<div class="containter-fluid" id="timer-buttons">
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>
</div>
</div>
<script type="text/javascript">
var $timer = $('#timer');
var $timerButtons = $('#timer-buttons');
$('#btn-start-timer').click(function(event) {
// get the current time when button clicked
var currentTime = moment();
// add 25 minutes for interval
var timerInterval = moment(currentTime).add(25.0, 'm');
// format interval
var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss');
// start the 25 minute timer and at the end popup two buttons for breaks
$timer.countdown(timerIntervalFormatted, function(event) {
$(this).html(event.strftime('%M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span> <span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span>');
});
});
$('#btn-short-break').click(function(event) {
var currentTime = moment();
var shortBreak = moment(currentTime).add(1.0, 'm');
var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.countdown(shortBreakFormatted, function(event) {
$(this).html(event.strftime('%-M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>');
});
});
$('#btn-long-break').click(function(event) {
var currentTime = moment();
var longBreak = moment(currentTime).add(2.0, 'm');
var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.countdown(longBreakFormatted, function(event) {
$(this).html(event.strftime('%-M:%S'));
}).on('finish.countdown', function() {
$timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>');
});
});
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>countdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.css" />
<style type="text/css">
#timer-buttons #btn-short-break, #timer-buttons #btn-long-break, #timer-buttons.break #btn-start-timer
{
display: none;
}
#timer-buttons.break #btn-short-break, #timer-buttons.break #btn-long-break
{
display: inline;
}
</style>
<script type="text/javascript">
$(function () {
var $timer = $('#timer');
var $timerButtons = $('#timer-buttons');
$('#btn-start-timer').click(function (event) {
// get the current time when button clicked
var currentTime = moment();
// add 25 minutes for interval
var timerInterval = moment(currentTime).add(25, 's');
// format interval
var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss');
// start the 25 minute timer and at the end popup two buttons for breaks
$timer.removeClass('is-countdown').html('').countdown({
until: timerInterval._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
$('#btn-short-break').click(function (event) {
var currentTime = moment();
var shortBreak = moment(currentTime).add(1, 's');
var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.removeClass('is-countdown').html('').countdown({
until: shortBreak._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
$('#btn-long-break').click(function (event) {
var currentTime = moment();
var longBreak = moment(currentTime).add(2, 's');
var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss');
$timer.removeClass('is-countdown').html('').countdown({
until: longBreak._d,
onExpiry: function () {
$timerButtons.toggleClass('break');
}
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<p>start timer and then get to work</p>
<div class="container-fluid">
<div class="container-fluid">
<div id="timer"></div>
</div>
<br />
<div class="containter-fluid" id="timer-buttons">
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span>
<span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span>
</div>
</div>
</div>
</body>
</html>
use id="checkout-countdown" for html tag
For jquery:
<script src="~/Assets/global/plugins/countdown/jquery.countdown.js"></script>
<script>
$(function () {
startCountDown();
});
function startCountDown() {
var currentDateTime=new Date($.now());
var austDay = new Date(currentDateTime);
austDay.setSeconds(austDay.getSeconds() + #expirationSecondsRemaining);
$('#checkout-countdown').removeClass('is-countdown').html('');
$('#checkout-countdown').countdown({
until: austDay, compact: true,
description: '', onExpiry: liftOff, 'format': 'MS', alwaysExpire: true
});
}
function liftOff() {
var result = new Object();
result.message = "Your session has expired. We've released your selected price. Please try selecting price again.";
result.type = "info";
app.showConfirmation(result);
//recursively call start count down
startCountDown();
}
</script>
Related
I'm very new to programming and this new project I'm doing is taking me longer than expected (as always with programming) This '25 + 5 Clock' requires I add a start/stop button and a reset button for my countdown timer, and it can't go under 00:00. It's basic I know but just want to see how this would be done for f
function increaseBreak() {
let breakLength = document.getElementById("break-length");
if (parseFloat(breakLength.innerText) < 60 ) {
breakLength.innerText = parseFloat(breakLength.innerText) + 1
}
}
function decreaseBreak() {
let breakLength = document.getElementById("break-length");
if (parseFloat(breakLength.innerText) > 0) {
breakLength.innerText = parseFloat(breakLength.innerText) - 1
}
}
function increaseSession() {
let sessionLength = document.getElementById("session-length");
if (parseFloat(sessionLength.innerText) < 60) {
let increasedSession = parseFloat(sessionLength.innerText) + 1
sessionLength.innerText = increasedSession;
document.getElementById("minutes").innerText = increasedSession;
}
}
function decreaseSession() {
let sessionLength = document.getElementById("session-length");
if (parseFloat(sessionLength.innerText) > 0) {
let decreasedSession = parseFloat(sessionLength.innerText) - 1
sessionLength.innerText = decreasedSession;
document.getElementById("minutes").innerText = decreasedSession;
}
}
const startingMinutes = 25;
let time = startingMinutes * 60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountdown, 1000);
function updateCountdown() {
const minutesLeft = Math.floor(time / 60);
let secondsLeft = time % 60;
secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
countdownEl.innerHTML = `${minutesLeft}: ${secondsLeft}`;
time--;
}
function startAndStop() {
console.log('sAS clicked')
}
function resetTime() {
console.log('rT clicked')
}
p {
justify-content: center;
font-size: 17px;
}
h1 {
text-content: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello World</title>
</head>
<body>
<p><center>makingWater</center></p>
<h1><center>25 + 5 'clock'</center></h1>
<br></br><br></br>
<div class="container">
<div class="row text-center">
<div class="col">
<div id="break-label">
<p>Break Length</p>
</div>
<div id="break-length">
<h2>5<h2>
</div>
<button id="break-increment" class="btn btn-secondary" onclick="increaseBreak()">
Break Increase
</button>
<button id="break-decrement" class="btn btn-danger" onclick="decreaseBreak()">
Break Decrease
</button>
</div>
<div class="col ">
<div id="session-label">
<p>Session Length</p>
<div id="session-length">
<h2>25</h2>
</div>
<button id="session-increment" class="btn btn-secondary" onclick="increaseSession()">
Session Increase
</button>
<button id="session-decrement" class="btn btn-danger" onclick="decreaseSession()">
Session Decrease
</button>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col">
<div id="timer-label">
<br></br><br></br>
<p>Session</p>
</div>
<p>
<div id="time-left">
<h2 id="countdown">25<span id="minutes">:</span>00<span id="seconds"></span></h2>
</p>
<button id="start_stop" class="btn btn-dark" onclick="startAndStop()">Start/Stop</button>
<button id="reset" class="btn" onclick="resetTime()">Reset</button>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
uture reference as well.
You can achieve what you are trying to do by making the following changes to your JavaScript:
Change
const startingMinutes = 25;
To
let startingMinutes = 25;
Store the interval like
let interval = setInterval(updateCountdown, 1000);
Update the updateCountdown
function updateCountdown() {
const minutesLeft = Math.floor(time / 60);
let secondsLeft = time % 60;
if (minutesLeft === 0 && secondsLeft === 0) clearInterval(interval); // add this line to stop when you get to zero
secondsLeft = secondsLeft < 10 ? '0' + secondsLeft : secondsLeft;
countdownEl.innerHTML = `${minutesLeft}: ${secondsLeft}`;
time--;
}
Implement startAndStop() like
function startAndStop() {
if (interval === null){
interval = setInterval(updateCountdown, 1000);
}
else {
clearInterval(interval);
interval = null;
}
console.log('sAS clicked')
}
Implement resetTime() like
function resetTime() {
console.log('rT clicked')
startingMinutes = 25;
time = startingMinutes * 60;
if (interval == null) {
updateCountdown();
}
}
Ideally, the code should be refactored to avoid all the duplicates but this should work.
I was trying to change the innerHTML of a div and retrieving it again after a certain amount of time.
For that I have implemented sleep(miliseconds) function and used jQuery built-in function as below snippet. The strange thing is that, the code works well in Chrome's debugging mode.
Edited:
I edited the snippet just to show using setTimeout()
is not satisfactory in my special case.
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>");
sleep(time);
$(".classname").html(temp);
}
function foo() {
swap(2000);
$(".tab1").slideToggle("slow");
$(".tab2").slideToggle("slow");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">
<div class="classname">
<p>Orginal Content in tab1</p>
</div>
</div>
<div class="tab2" style="display:none;">
<div>
<p>Orginal Content in tab2</p>
</div>
</div>
<button type="button" onclick="foo()">Enter</button>
JavaScript is single-threaded, so your sleep method freezes up the UI and prevents it from refreshing. You should be using setTimeout for this purpose instead.
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>")
setTimeout(function(){
$(".classname").html(temp)
}, time)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classname">
<p>Orginal Content</p>
</div>
<button type="button" onclick="swap(2000)">Enter</button>
Your code just locks up the browser and prevents rendering. You should be using a timeout. This code will make sure that multiple clicks do not mess up the default text.
function swap(selector, time) {
var elem = document.querySelector(selector);
if (!elem.dataset.orgText) elem.dataset.orgText = elem.innerHTML;
if (elem.dataset.timer) window.clearTimeout(elem.dataset.timer);
elem.innerHTML = "<p>Swap Content</p>";
elem.dataset.timer = window.setTimeout( function () {
elem.innerHTML = elem.dataset.orgText;
// delete elem.dataset.orgText;
// delete elem.dataset.timer;
}, time);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classname">
<p>Orginal Content</p>
</div>
<button type="button" onclick="swap('.classname', 2000)">Enter</button>
written for jQuery
function swap(selector, time) {
var elem = $(selector);
if (!elem.data('orgText')) elem.data('orgText', elem.html());
if (elem.data('timer')) window.clearTimeout(elem.data('timer'));
elem.html("<p>Swap Content</p>");
elem.data('timer', window.setTimeout( function () {
elem.html(elem.data('orgText'));
// elem.removeData('orgText');
// elem.removeData('timer');
}, time));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classname">
<p>Orginal Content</p>
</div>
<button type="button" onclick="swap('.classname', 2000)">Enter</button>
You can easily do it with two JQuery Lines:
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>");
setTimeout(function () {
$(".classname").html(temp);
}, time)
}
Please check the Snippet for demo
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>");
setTimeout(function () {
$(".classname").html(temp);
}, time)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab1">
<div class="classname">
<p>Orginal Content in tab1</p>
</div>
</div>
<div class="tab2" style="display:none;">
<div>
<p>Orginal Content in tab2</p>
</div>
</div>
<button type="button" onclick="swap(2000)">Enter</button>
can you try this instead?
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>")
setTimeout(function(){
$(".classname").html(temp);
}, time);
}
function swap(time) {
temp = $(".classname").html();
$(".classname").html("<p>Swap Content</p>")
setTimeout(function(){
$(".classname").html(temp)
}, time)
}
This is the best option!
I am creating one program of the elevator which includes up, down buttons (external functions) and buttons (0 to 5:: internal functions) inside the elevator my external functions are working correctly but when inside elevator user press any button elevator should go to that place. and update the position of user and elevator. But when I press the button(0,1,2,3,4,5) it doesn't work. Can anyone help me to solve the issue. Thanks in advance.
code::
<!DOCTYPE html>
<html lang="en">
<head>
<title>elevator</title>
</head>
<body>
<h2>Internal Functions</h2>
<span>current user position :: </span>
<p id="userPosition"></p>
<span>current elevator position :: </span>
<p id="elevatorPostion"></p>
<button id="btn" onclick="inFunction(0)" value="0">0</button>
<button id="btn" onclick="inFunction(1)" value="1">1</button>
<button id="btn" onclick="inFunction(2)" value="2">2</button>
<button id="btn" onclick="inFunction(3)" value="3">3</button>
<button id="btn" onclick="inFunction(4)" value="4">4</button>
<button id="btn" onclick="inFunction(5)" value="5">5</button>
<h2>External Functions</h2>
user position:
<input type="text" id="userText" name="UserPosition" value="0">
<button onclick="exFunction('up')">UP</button>
<button onclick="exFunction('down')">DOWN</button>
<script>
var userPosition = 0,
elevatorPosition = 4
function exFunction(pressedValue) {
console.log(pressedValue);
var userPosition = document.getElementById("userText").value;
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
var intervalEle = setInterval(function () {
if (userPosition > elevatorPosition) {
console.log('Elevator position', elevatorPosition);
elevatorPosition++;
} else if (userPosition < elevatorPosition) {
elevatorPosition--;
} else {
elevatorPosition == userPosition;
clearInterval(intervalEle);
}
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
}, 1000);
}
function inFunction(clickedValue) {
var btnValue = document.querySelector('btn').value;
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
console.log(btnValue);
var intervalEle2 = setInterval(function () {
if (elevatorPosition > btnValue) {
elevatorPosition--
} else if (elevatorPosition < btnValue) {
elevatorPosition++
} else {
elevatorPosition == btnValue;
clearInterval(intervalEle2)
}
document.getElementById("userPosition").innerHTML = userPosition;
document.getElementById("elevatorPostion").innerHTML = elevatorPosition;
}, 1000)
}
</script>
</body>
</html>
output :
https://i.stack.imgur.com/tKeeL.png
var btnValue = document.querySelector('btn').value;
There are no <btn> elements on your page, so document.querySelector('btn') returns null. You've illegally reused "btn" as an id, so document.getElementById('btn') won't do what you expect either.
You've already got the number of the button that was clicked; you passed it in to inFunction as clickedValue. Just use that.
I had a simple JS script which takes an array of images and display them as an animation by clicking a start button.
I am trying to stop the animation by clicking on the stop button (stop on the current image of the animation), which does not work.
I will appreciate any help. Thanks
<script type="text/javascript">
var images = new Array("unc_prop_1dim_x1.jpg", "unc_prop_1dim_x2.jpg",
"unc_prop_1dim_x3.jpg", "unc_prop_1dim_x4.jpg", "unc_prop_1dim_x5.jpg");
var nextImage = 0; //Index for nextImage
var timeout = 400; //In milliseconds
function animation() {
document.ani.src = images[nextImage];
nextImage++;
if (nextImage==images.length) {
nextImage = 0;
}
setTimeout("animation();", timeout);
};
function stopAnimation() {
ani.stop();
}
document.querySelector('#stop').onclick = function() {
stopAnimation();
};
</script>
<body>
<div id="main" style="width: 700px; height: 500px;">
<img src="unc_prop_1dim_x1.jpg" name="ani"/>
</div><br>
<input type="button" id="start" onclick="animation();" value="Start Animation">
<input type="button" id="stop" value="Stop!">
</body>
I am trying to to increment/decrement a value in a paragraph when a button is clicked.
$(document).ready(function() {
var breakTime = 5;
var section = 25;
var start = "Start";
var stop = "Stop";
function Pomodoro(element, target) {
this.element = element;
this.target = target;
};
Pomodoro.prototype.incrementer = function incrementer() {
// this takes care of break and section timers incrementing
this.element.click(function() {
breakTime++;
var el = this.target;
el.html(breakTime);
});
};
// end
Pomodoro.prototype.decrementer = function decrementer() {
// this takes care of break and section timers incrementing
breakerDec.element.click(function() {
breakTime--;
var el = breakerDec.target.html(breakTime);
});
};
// end
var breakerInc = new Pomodoro();
var ele = $("#inner1");
var tar = $("#par");
breakerInc.element = ele;
breakerInc.target = tar;
breakerInc.incrementer.bind(breakerInc);
//end
var breakerDec = new Pomodoro();
breakerDec.element = $("#inner2");
breakerDec.target = $("#par");
breakerDec.decrementer();
var sectionInc = new Pomodoro($("#inner3"), $("#par2"));
sectionInc.incrementer.bind(sectionInc);
});
and i am getting no result when i click the button.
this is the html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pomodoro Timer</title><!-- End of Title -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="div div-1"><p id="par" class="breaktime-1">5</p>
<div class="inner-div inner-1"><button id="inner1" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner2" type="button" class="btn">-</button></div>
</div>
<div class="div div-2"><p id="par2" class="breaktime">25</p>
<div class="inner-div inner-1"><button id="inner3" type="button" class="btn">+</button></div>
<div class="inner-div inner-2"><button id="inner4" type="button" class="btn">-</button></div>
</div>
</div>
<div class="div div-3">
<h3 class="heading">section</h3>
<button type="button" class="btn-Start-Stop"></button
</div>
<div><p></p></div>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Here is one (trimmed-down) solution just using vanilla javascript:
function changeValue() {
var breaktime = this.parentNode.getElementsByClassName('breaktime')[0];
var val = breaktime.innerHTML;
if (this.className === 'increment') {
val++;
}
else if (this.className === 'decrement') {
val--;
}
breaktime.innerHTML = val;
}
function startStop() {
var values = [];
var breaktimes = document.getElementsByClassName('breaktime');
breaktimes[1].classList.toggle('decrementing');
if (breaktimes[1].classList.contains('decrementing') === true) {
values[1] = parseInt(breaktimes[1].innerHTML);
values[1]--;
breaktimes[1].innerHTML = values[1];
var decrementer = setInterval(function(){
values[0] = parseInt(breaktimes[0].innerHTML);
values[1] = parseInt(breaktimes[1].innerHTML);
if (breaktimes[1].classList.contains('decrementing') !== true) {
clearInterval(decrementer);
}
values[1]--;
breaktimes[1].innerHTML = values[1];
if (values[1] === values[0]) {
window.alert('The counter has reached ' + values[1]);
clearInterval(decrementer);
}
}, 1000);
}
}
var buttons = document.getElementsByTagName('button');
var startStopButton = buttons[(buttons.length -1)];
for (var i = 0; (i+1) < buttons.length; i++) {
buttons[i].addEventListener('click',changeValue,false);
}
startStopButton.addEventListener('click',startStop,false);
<section>
<div>
<p class="breaktime">5</p>
<button id="inner1" type="button" class="increment">+</button>
<button id="inner2" type="button" class="decrement">-</button>
</div>
<div>
<p class="breaktime">25</p>
<button id="inner3" type="button" class="increment">+</button>
<button id="inner4" type="button" class="decrement">-</button>
</div>
<div>
<h3>Section</h3>
<button type="button" class="btn-Start-Stop">Start / Stop</button>
</div>
<div>
<p></p>
</div>
</section>
If you'd like to implement logic using constructors, you can bind events inside of initialization of your instance.
Here is reworked your code based on your html. But code could be improved, so Pomodoro instance can be able not only to decrease or increase, but do both functions.
Also some template engine can give you ability to easy define amount of increase/decrease blocks you want to add to your page.