Davyd23
Davyd23

Reputation: 1

Javascript function blocking the program

I am trying to make a promodoro clock (or something that in my imagination is similar), everything works fine until I add a function in javascript.

$(document).ready(function(){
  var breakTime=5;
  var session=5;
  var interval=null;
  var click=0;
  var arr=null;
  $("#rightBr").click(function(){
    breakTime++;
    $("#brTime").text(""+breakTime);
  });
  $("#leftBr").click(function(){
    if(breakTime!==0)
    {
      breakTime--;
    }
    $("#brTime").text(""+breakTime);
  });
  
  $("#rightSes").click(function(){
    session++;
$("#SesTime").text(""+session);                   
  });
  $("#leftSes").click(function(){
    if(session!==0)
      {
        session--;
      }
$("#SesTime").text(""+session);                   });
  $("#clock").click(function(){
    if(click===0)
    {
      click=1;
      $("#audio").html('<audio id="ard" src="http://www.oringz.com/oringz-uploads/sounds-917-communication-channel.mp3" type="audio/mpeg">Your browser does not support the &#60;audio&#62; element. </audio>');
      arr=[session,0,"#clock"];
      arr=alarmTime(arr);
      while(arr[0]!==0 && arr[1]!==0)
        {
          setTimeout(function(){
            arr=alarmTime(arr);
          },1000);
        }
    $("#clock").text("Stop");
    $("audio").get(0).play();
    interval=setInterval(function(){
      $("audio").get(0).play();
    },breakTime*60*1000);
    }else{
      click=0;
       clearInterval(interval);
      arr[0]=0;
      arr[1]=0;
    }
  });
  function alarmTime(arr){
  var minute=arr[0];
  var second=arr[1];
  var id=arr[2];
  $(id).text(""+minute+":"+second);
  if(second===0)
    {
      minute--;
      second=59;
    }else{
      second--;
    }
  if(minute===0 &&& second===0)
    {
      setTimeout(function(){
         $(id).text("Stop");
      },1000);
    }
  return [minute,second,id];
};
});
body{
  background-color:black;
  color:pink;
}
h1{
  width:500px;
  text-align:center;
  color:yellow;
  margin:0 auto;
}
.tot{
  width:100%;
  text-align:center;
}
.data{
  text-align:center;
  width:200px;
  margin: 0 auto;
  border:2px solid red;
  display:inline-block;
}
#break{
  display: inline;
  border:2px solid red;
}
#time{
  display: inline;
  border:2px solid red;
}
#brTime{
  display:inline;
}

.data2{
  width:200px;
  margin:0 auto;
  border:2px solid red;
  text-align:center;
  display:inline-block;
}
#SesTime{
  display:inline;
}
#clock{
  border:2px solid yellow;
  width:200px;
  height:35px;
  font-size:25px;
  margin:0 auto;
  
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Awsome Pomodoro Clock</h1>
<div class="tot">
<div class="data">
  <div id="break">break length</div>
  
  <br>
  <button type="button" id="leftBr">&lt;</button>
  <div id="brTime" >5</div>
  <button type="button" id="rightBr">&gt;</button>
</div>

<div class="data2">
  <div id="break">session length</div>
  
  <br>
  <button type="button" id="leftSes">&lt;</button>
  <div id="SesTime" >5</div>
  <button type="button" id="rightSes">&gt;</button>
</div>
  <div id="audio"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<div id="clock">
  Start
  </div>

if I remove :

function alarmTime(arr){
  var minute=arr[0];
  var second=arr[1];
  var id=arr[2];
  $(id).text(""+minute+":"+second);
  if(second===0)
    {
      minute--;
      second=59;
    }else{
      second--;
    }
  if(minute===0 &&& second===0)
    {
      setTimeout(function(){
         $(id).text("Stop");
      },1000);
    }
  return [minute,second,id];
};

it works (buttons don't respond to .click function with it).

Upvotes: 0

Views: 50

Answers (1)

kiranvj
kiranvj

Reputation: 34107

This

if(minute===0 &&& second===0)

or

if(minute===0 && second===0)

?

Why do you have 3 &&& ?

Upvotes: 1

Related Questions