Issue with Pomodoro Clock Continuing to Run Past Countdown

The timepiece operates correctly until reaching zero, where it should start the break timer. However, there is an issue as it goes into negative numbers once it hits zero. Below is the function containing this troublesome code. Just a heads up, I have set the interval to 100 to speed up testing the clock.

//The problematic function
function start(){
    $("#start").addClass("disabled");
    $("#myreset").addClass("disabled");
    var secs = Number("59");

    var min = document.getElementById("sessiontime").innerHTML; 
    min = min-=1;

    if(min > -1){
        startcounter = setInterval(function(){
            secs--;

            if(secs > 9){
                document.getElementById("mytimer").innerHTML = min +":"+ secs;
            } else if(secs >= 0 && secs < 10){
                secs = "0"+secs;
                document.getElementById("mytimer").innerHTML = min +":"+ secs;
            } else if(secs < 0){
                min--;
                secs = 59;
            } else if(secs === 0 && min === 0){
                clearInterval(startcounter); 
                var x = document.getElementById("arrownumid").innerHTML;
                mybreak(x);
            }
        },100);
    }
}

http://codepen.io/sammyb123/pen/QyQaPr

Answer №1

After some trial and error, I managed to find a solution that may not be the most elegant but gets the job done as intended. Many thanks for your assistance and time.

function initiateCountdown(){
    $("#start").addClass("disabled");
    $("#myreset").addClass("disabled");

    var seconds = Number("59");
    var minutes = document.getElementById("sessiontime").innerHTML; 
    minutes = minutes -= 1;

    if(minutes >= 0){
       countdownInterval = setInterval(function(){
       seconds--;

          if(seconds > 9){
             document.getElementById("mytimer").innerHTML = minutes +":"+ seconds;
                } if(seconds > 0 && seconds < 10){
                   seconds = "0"+seconds;
                   document.getElementById("mytimer").innerHTML = minutes +":"+ seconds;
                      } if(seconds === 0 && minutes > 0){
                           minutes--;
                           seconds = 59;
                         } 

                              else if(minutes === 0 && seconds === 0){
                                 document.getElementById("beep").play();
                                 stop(countdownInterval);
                                 clearInterval(countdownInterval); 
                                 var x = document.getElementById("arrownumid").innerHTML;
                                  takeABreak(x);
                              }
                      },1000);
                   }
                }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for integrating a custom class file in NestJS without compromising the NestJS conventions

In my nestjs project, I have a custom Crypto class implementation which utilizes bcrypt for hashing and comparing passwords. import * as bcrypt from 'bcrypt'; export class Crypto { constructor() { } public async hash(target: string, sal ...

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

When dealing with websites that utilize Ajax or javascript to display data, I'm facing a challenge in saving this data using WWW::Selenium. Although my code successfully navigates through the webpage and interacts with the elements, I've encounte ...

execute ajax within a standalone javascript function

I am just starting to learn about jquery and ajax, and I have a specific requirement to call ajax from a separate javascript function. The issue is that the JSP file is dynamically generated and the button IDs in the JSP file are also created using a for l ...

Angular is able to select an element from a specified array

I'm currently struggling with using Angular to manipulate a TMDB API. I am having difficulty retrieving an item from an array. Can someone provide assistance? Here is the response that the array returns: { "id": 423108, "results ...

How does AJAX relate to XML technology?

Well, let's clear up this misconception about XML and AJAX. The term "Asynchronous JavaScript And XML" may seem misleading because you can actually use an XMLHttpRequest object to fetch not just XML, but also plain text, JSON, scripts, and more. So w ...

The issue with jqBootstrapValidation is that it fails to display customized data-validation-required-message

I'm attempting to implement jqBootstrapValidation, but I keep seeing the default message instead of my custom one. Could it be that I forgot to include a <div> here? <div class="control-group"> <div class="controls"> <div c ...

Suggestions for parsing a JSON.stringify array in PHP without resorting to the explode function?

My form includes a table, input[type=text], and a button[type=submit]. Upon clicking the submit button, the value of the input field is assigned with data from the table in JSON form using the following JavaScript: document.getElementById("inputField").va ...

Incorporate the value of a JQuery variable within an HTML form

When the Submit button is clicked, I am attempting to pass the value of currentDate to a REST GET service. However, there are two things that I don't understand. Is it possible to include the URL of the REST service in the action attribute of the fo ...

Is using float:right making the jquery slide toggle dropdown div (triggered by hover) appear glitchy?

Utilizing jQuery's slidetoggle and hover functions, I have successfully implemented a dropdown feature in my div. Within this div, there is various information displayed including the date, a note counter, and three buttons. The first two are Tumblr ...

Dispatch an Ajax message with a specified delay in milliseconds before executing the next action

Hey there, I've been attempting to incorporate a delay() or setTimeOut function into this simple send message script, but I seem to be struggling with the syntax. Whenever I try to add these functions, I encounter numerous syntax errors. Even after fi ...

The act of receiving becomes ineffective when it was intended to be functional - Nextjs/JavaScript

When using nextjs, I encountered an issue while trying to map my array to getstaticpaths for generating getstaticprops. Every time I attempted to map the result, I received an error stating 'mycatagoriesis not a function'. Below is a snippet fro ...

How can I load a URL without causing a page refresh?

While searching around, I stumbled upon this HTML 5 code snippet: window.history.pushState("object or string", "Title", "/new-url"); I started thinking: how can this be implemented? Is there a way to utilize this code to change the URL to without needin ...

How do I retrieve the top position of the text content itself, not the text element, using jQuery or Javascript?

I'm facing a unique challenge and need some guidance: I am trying to determine the exact y-coordinate of specific text in a document. Simply getting the y-coordinate of the container element is not sufficient for my needs. To illustrate this issue, p ...

What are the steps to modify the placeholder of the formik <Field/> component?

Struggling to figure out how to make the date input empty with Formik. I just want it to display nothing initially, but have been unable to do so after hours of trying different methods. <Field name="date" type="date" className ...

Effective method for managing objects with expiration stored in the Dictionary?

Currently facing the challenge of storing objects in a Dictionary with a time limit of approximately 20 minutes (time precision is not critical). Once the time limit is reached, the object should be automatically removed from the Dictionary. While I could ...

leveraging npm packages in Vue single page applications

I recently developed a Vue.js application using vue-loader and now I am trying to integrate an npm package that I have installed. Here is the code snippet: var x = require('package-name') Vue.use(x) However, I encountered the following ...

Using JavaScript to send form input in the form of a 2D array through AJAX

I am currently working on a form that looks like this: <form name="chat" id="chat" action="" onsubmit="sendMessage()"> <a name="chat">&nbsp;</a> <input type="text" name="chat" id="chat" size="38" maxlength="50" vertical-align="m ...

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

Increasing the upward motion of the matrix raining HTML canvas animation

Recently, I've been experimenting with the Matrix raining canvas animation here and I was intrigued by the idea of making it rain upwards instead of downwards. However, my attempts to achieve this using the rotate() method resulted in skewing and stre ...

Can this be considered a sophisticated resolution?

Solving this issue is actually quite simple. Choose a name randomly from an array of names. Here is my approach: var names = [ 'nick', 'rock', 'danieel' ]; function randPicker(names) { var randNum = Math.floor((Math.rand ...