Pomodoro Clock Works 100%, Except I need to Enable the Buttons to Not Work When Device is Off

Pomodoro Clock Works 100%, Except I need to Enable the Buttons to Not Work When Device is Off
0

#1

Hi folks!

I recently got my Pomodoro Clock to work, essentially 100%, except for the fact that I want all of the buttons to not be functionable when the device is off. How can I get this scenario to happen? Thanks in advance for your help!:persevere::grinning:

See JSFiddle link here: http://jsfiddle.net/MenelikMakonnen/230xtgmb/242/

javascript code here:

$(document).ready(() => {

class Timer { //timer is name of class
	constructor(){ //making the object
   this.seconds = 60 //this is the property
   this.play = false;
  }
  	//behavior of timer
  	secondsPassed (e) {
    console.log("yea mon time ah move yunno!")
    //inside this function, new variable called minutes
    
    if (this.play === false){
     return
     }
   
   let minutes = Math.round((this.seconds-30)/60);
    //now going to add another variable inside function for remaining seconds
    let remainingSeconds = this.seconds % 60;
    
    if (remainingSeconds < 10){
        remainingSeconds = "0" + remainingSeconds;
    }

    //Output the result in an element with id="number"
    e.innerHTML = minutes + ":" + remainingSeconds

    //once remaining seconds reach none, interval is over, so write some text
    if( this.seconds == 0){
        clearInterval("number"); //countdown ends and ceases numeric display
        e.innerHTML= 'Buzz!!'; //..and will display the alphabetic display, "Buzz!!"....temporary placeholder....will link to a buzz sound later
    }else{
        this.seconds--; //decrements as long as seconds do not equal zero
    }
    
	}//end of behavior
  
  togglePlay(){
  	this.play = !this.play //means its false
  }
  
  startCountDown () {
    var myTimer = setInterval(() =>  this.secondsPassed(document.getElementById("number")), 1000) //displays countdown per the number id from html sheet
	}
}//end of class function

const t = new Timer(); //this is the object or instance

 //on button
 $('.state-1').click(function(){
 	$('#number').addClass("on");
  $(".radar-background").show();
 });


 $(".start-resume").click(function(){ 
 		t.togglePlay();
    t.startCountDown(); 
    //calls startCountDown function from above: "startCountDown = () => {}"
     //if paused, then click to resume(make a state for if myVar == -1)
     /*
     if (myTimer == -1){
      myVar = setInterval (function(){
      	seconds++;
        number.inerHTML = seconds;
        }, 1000);
        //else
        }else{
        clearInterval(myTimer);
        myTimer = -1
      }
    });
    */
    
    
     }); 
      //pause button
      $('.pause').on('click', function() {
      t.togglePlay();
      });
      
      //off button
      
      $('.state-2').click(function(){
 	if (t.play === true){
     t.togglePlay();
     }
     else{
     	document.getElementById("number")
      .innerHTML = "888888"
     }
 	$('#number').removeClass("on"); 
  document.getElementById("number")
      .innerHTML = "888888"
      t.seconds = 60; //resets  timer
  
 }); 
      
     //stop/reset button
     
     $('.stop-reset').click(function(){
     if (t.play === true){
     t.togglePlay();
     }
     else{
      t.seconds = 60;
      document.getElementById("number")
      .innerHTML = "1:00"
     }
     });
     
        


	$(".state-2").click(function(){ 
	    $(".radar-background").hide(); 
	});


 
 /*
 function myTimer(){
  var status= false;
  var myInterval;
  $(".pause").click(function(){ 
   if(status === true){ 
            status = false;
            clearInterval(myInterval);

        }
        else{
            status = true;
            myInterval = setInterval(myTimer,1000);
        }

    });   
    }
    */
 
});


#2

So if you want the devise to power on and off then that should be the first condition in your code. if ( button === on ){ create your code here }
Then your machine would have to be powered on before anything would work


#3

@DivaWeb, hi! Where in my my present code would I insert if ( button === on ){ }?


#4

if (this.play === false){ return }

what is this line of code doing?


#5

I kind of forgot, my code mentor told me that yesterday…if I think hard enough I might remember why lol!


#6

I will tell you that you are not returning anything from that line of code. So what happens when you put a return statement in a method or function?


#7

“In JavaScript, return statements cease execution in a function and return a value to the caller; JavaScript functions require an explicit return statement for returning the result of an expression (the value) from a function. When a return statement is not present, the interpreter automatically returns undefined.”


#8

so then that tells you that function is doing what?


#9

I don’t believe your purpose was to return undefined was it?


#10

Hahaha…it terminates execution of the function if there is no behavior from the timer…right?:thinking:


#11

@DivaWeb…hmmm…maybe not…let me comment out that line of code and see if the timer still works correctly…


#12

So I did this a very long time ago and you have took a very different approach than I . I just looked at my code lol.

Just curious as to why you decided to create a javascript class?


#13

@DivaWeb, lol…the guy who coached me, taught me that way…its way more easier! Nice and concise!


#14

so for giggle because you have it working here was my javascript

var newTime = parseInt(document.getElementById("timer").innerText);


function addsTime(){
    newTime++;
     parseInt(document.getElementById("timer").innerText = newTime +     ":00");
 }
 
function subtract(){
     newTime--;
     document.getElementById("timer").innerText = newTime + ":00";
} 

var timerHandle = null;
function begin() {
  var count = newTime * 60;
  var minute = Math.floor(count/60);
     if(minute < 10 ){
       minute = "0" + minute;
    }
 
  timerHandle = setInterval(function() {
     count -=1;
 
    document.getElementById("timer").innerText = minute -1 + ":" + Math.floor(count % 60);
   
    if (count <= 0) { // deactivate countdown after it's down to 0
      sound.play();
      clearInterval(timerHandle);

    
    }
  }, 1000);

}



function quiter(){
  alert("Don't be a quitter!");
}

var newBreak = parseInt(document.getElementById("brMinutes").innerText);
 var sound = new Audio("http://mackville.net/pomodoro/sounds/session-start.mp3")
function begin2() {
  var count = newBreak * 60;
  var minute = Math.floor(count/60);
     if(minute < 10 ){
       minute = "0" + minute;
    }
 
  timerHandle = setInterval(function() {
     count -=1;
 
    document.getElementById("brMinutes").innerText = minute -1 + ":" + Math.floor(count % 60);
   
    if (count <= 0) { // deactivate countdown after it's down to 0
      sound.play();
      clearInterval(timerHandle);  
    
    
    }
  }, 1000);
 
}

function addBreak(){
    newBreak++;
     parseInt(document.getElementById("brMinutes").innerText = newBreak +     ":00");
 }
 
function subtractBreak(){
     newBreak--;
     document.getElementById("brMinutes").innerText = newBreak + ":00";
} 


#15

@DivaWeb, this is nice too :grinning: Also, are your buttons unable to function while device is powered off? Do you have an on/off button?


#16

Well I never created a power on and off button


#17

@DivaWeb…you seem to know how one would work though, right? :grinning:


#18

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#19

Can anyone else lend me a helping hand??:thinking: