Pomodoro clock works perfectly but it doesn't pass (TypeError: Cannot read property '1')) Why?!

thatolunika · September 19, 2020, 3:02pm

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
background-color: lightblue;
height: 450px;
width:450px;
margin: auto;
}
#display
{
grid-column: 1/3;
border:solid black 2px;
grid-row:1/4;
 border-radius:50%;
}
#controls
{
grid-column: 1/3;
grid-row: 4/5;
border:solid black 2px;
}
#settings
{
grid-column: 3/4;
grid-row:1/5;
border:solid black 2px;
padding:10px;
}
#controls button{
width:50%;
}
#display div{
margin-top: 80px;
text-align:center;
font-family:forte;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My Podmoro Clock</h1>
<div class="container">
<div id="display"><div id="timer-label">Session</div>
<div id="time-left">25:00</div>
</div>
<div id="settings"><p id="break-label">Break Length<p><button id="break-increment" class="adjust">+</button><br><div id="break-length">5</div><br>
<button id="break-decrement" class="adjust">-</button>
<br><br><br><br>
<p id="session-label">Session Length<p><button id="session-increment" class="adjust">+</button><br><div id="session-length">25</div><br>
<button id="session-decrement" class="adjust">-</button>
</div>
<div id="controls"><button id="start_stop" onclick="theSwitch()">Play| Pause</button><button id="reset">Reset</button></div>
</div></div>
<audio id="beep" controls src="http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"></audio>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
//alert("works here")
$(".adjust").click(function(){adjustDisplay($(this).attr("id"));});
$("#reset").click(function(){resetClock()});
});
</script>

<script>
var runningCon=false;
var currentSLength = 25;
var currentBLength =5;
var secondsL = 60;
var AtStart =[25,5];
var timer;//session timer
var timer2; // break timer
var displayTimeLeft = document.getElementById("time-left");
//WORK ON DISPLAY HERE
function adjustDisplay(id)
{
//alert("we have lift-off")
//first ensure that timer isn't running! Come back later
if(id == 'break-decrement')
{
currentBLength--;
currentBLength>=1? document.getElementById("break-length").innerHTML = currentBLength: currentBLength=1;
}
if(id == 'break-increment')
{
currentBLength++;
currentBLength<=60? document.getElementById("break-length").innerHTML = currentBLength: currentBLength=60;
}
if(id == 'session-decrement')
{
currentSLength--;
currentSLength>=1? document.getElementById("session-length").innerHTML = currentSLength: currentSLength=1;
if(runningCon==false)
{
 if(currentSLength<10)
 {
 displayTimeLeft.innerHTML= "0"+currentSLength+":00"
 }
 else{
displayTimeLeft.innerHTML= currentSLength+":00";
}
}
}
if(id == 'session-increment')
{
currentSLength++;
currentSLength<=60? document.getElementById("session-length").innerHTML = currentSLength: currentSLength=60;
if(runningCon==false)
{
if(currentSLength<10)
 {
 displayTimeLeft.innerHTML= "0"+currentSLength+":00"
 }
 else{
displayTimeLeft.innerHTML= currentSLength+":00";
}

}
}
if(runningCon == false)
{
AtStart[0] = currentSLength;
AtStart[1] = currentBLength;
//alert("Session = "+AtStart[0]+". Session = "+AtStart[1]); 
} // this will start us out;
}
//START SESSION TIMER
function iterateTimer()
{
document.getElementById("timer-label").innerHTML="Session";
runningCon=true;

var displayArr = displayTimeLeft.innerHTML.split(":");
var totalTime = parseInt(displayArr[0])*60 + parseInt(displayArr[1]); // receives total number of seconds; we must only assign this once
var sec=totalTime%60;
var min=Math.floor(totalTime/60);
sec--;
if(sec==-1 && min!=0)
{
sec=59
}
if(sec==59)
{
min--;
}

//now lets render: formating display is to be noted!
if(min<10 && sec>=10)
{
displayTimeLeft.innerHTML = "0"+min+":"+sec ;
//alert("true")
}
else if(min>=10 && sec>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(sec<10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+"0"+sec;
}
else if(sec>=10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(min<10&&sec<10){displayTimeLeft.innerHTML = "0"+min+":"+"0"+sec;}
if(sec==-1&&min==0)
{
/*playBeep();
displayTimeLeft.innerHTML = "00:00";
document.getElementById("timer-label").innerHTML="Break";
displayTimeLeft.innerHTML=AtStart[1]+":00";
runBreak();*/
document.getElementById("timer-label").innerHTML="Break";
playBeep();
stopTimer();
displayTimeLeft.innerHTML = AtStart[1]+":00";
runTimer();
}
}
//RUN BREAK TIMER HERE!

function iterateBreak()
{
document.getElementById("timer-label").innerHTML="Break";
runningCon=true;
var displayArr = displayTimeLeft.innerHTML.split(":");
var totalTime = parseInt(displayArr[0])*60 + parseInt(displayArr[1]); // receives total number of seconds; we must only assign this once
var sec=totalTime%60;
var min=Math.floor(totalTime/60);
sec--;
if(sec==-1&&min!=0)
{
sec=59
}
if(sec==59)
{
min--;
}
//now lets render: formating display is to be noted!
if(min<10 && sec>=10)
{
displayTimeLeft.innerHTML = "0"+min+":"+sec ;
//alert("true")
}
else if(min>=10 && sec>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(sec<10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+"0"+sec;
}
else if(sec>=10 && min>=10)
{
displayTimeLeft.innerHTML = min+":"+sec;
}
else if(min<10&&sec<10){displayTimeLeft.innerHTML = "0"+min+":"+"0"+sec;}

if(sec==-1&&min==0)
{
document.getElementById("timer-label").innerHTML="Session";
playBeep();
stopTimer();
displayTimeLeft.innerHTML = AtStart[0]+":00";
runTimer();
}
}


function runTimer()
{
if(document.getElementById("timer-label").innerHTML=="Break")
{
timer2= setInterval(iterateBreak,1000);
}
else
{
timer=setInterval(iterateTimer,1000);
}
}
function stopTimer()
{
clearInterval(timer);
clearInterval(timer2);
}
function theSwitch()
{
if(runningCon==true)
{
stopTimer()
runningCon=false;
}
else
{
runTimer()
runningCon=true;
}
}
//WORK ON THIS FUNCTION
function runBreak()
{
stopTimer();
//alert("Break Length = "+AtStart[1]);
timer2= setInterval(iterateBreak,1000);
}

function resetClock()
{
stopTimer();
AtStart[0]=25;
AtStart[1]=5;
displayTimeLeft.innerHTML = "25:00";
document.getElementById("break-length").innerHTML = 5;
document.getElementById("session-length").innerHTML =25;
runningCon = false;
document.getElementById("timer-label").innerHTML="Session";
currentSLength = 25;
currentBLength =5;
var A = document.getElementById("beep");
A.currentTime=0;
A.pause();
}
function playBeep()
{
var A = document.getElementById("beep");
beep.play();
}
</script>
</body>
</html>```

thatolunika · September 19, 2020, 3:15pm

It says TypeError: “Cannot read property ‘1’ of null”
Why? I’m confused!

nhcarrigan · September 19, 2020, 3:16pm

Hello and welcome to the freeCodeCamp community~!

Do you have a link to a live version, such as a CodePen? It is often easier to debug this when we have a live example to work with

thatolunika · September 19, 2020, 3:20pm

I’m kinda of new to this whole thing but I think this is the link: https://codepen.io/freeCodeCamp/pen/MJjpwO

My code is also in this post. I sort of struggled to render it from markdown to ordinary html initially. I think its all visible now.

nhcarrigan · September 19, 2020, 3:25pm

So the link you provided is for the freeCodeCamp test suite pen. Your work isn’t being saved at this link.

To be able to save your work, you need to log in to CodePen with your account, then click the “fork” button in the bottom right of that screen. That’ll create a copy of the fCC pen with the test suite - write your code there, and it’ll save to your account with your own link.

thatolunika · September 19, 2020, 3:33pm

I think this is it now. Hopefully : https://codepen.io/ZiphoLunika/pen/VwaEdNz

nhcarrigan · September 19, 2020, 3:50pm

Alright - I believe I see the source of your errors.

The test uses a regex to locate the time display. The regex specifically matches a format 00:00, and checks the values with [1] and [2] (the regex validation returns an array).

However, when your clock transitions from session to break (for example), instead of starting the time at 05:00 it starts at 5:00 - the regex doesn’t match this, so the tests see null instead of the time. Thus, the errors you receive.

thatolunika · September 19, 2020, 4:05pm

Ah yes,I see it now! I’ll try to fix that right away thank you.

nhcarrigan · September 19, 2020, 4:06pm

Good luck and happy coding!

scottbrown500 · February 12, 2021, 11:18am

Thanks for this! I’ve also been banging my head against the wall for the last 4 days trying to get this project to pass the tests. I’d been looking at the test suite code on GitHub, but didn’t spot this as my clock was only shifting to one digit on the very first second of the new countdown. So frustrating! So glad it works now!

Topic		Replies	Views
(React) Pomodoro Clock Error Help (tests 12, 13, 15) JavaScript	5	1853	February 2, 2021
What does this error message mean in Pomodoro Clock	1	457	June 1, 2021
Pomodoro Clock "Cannot read property '1' of null" error	4	451	June 1, 2021
Possible Pomodoro Clock Test Suite Bug..... My Pomodoro Clock is working fine But Not passing 1 test: Getting TypeError: cannot read property '1' of null. I did a console.log after the error point, but the variable is logging without a problem	2	463	September 10, 2020
Pomodoro Clock -- Cannot read property '1' of null	2	614	June 1, 2021

Pomodoro clock works perfectly but it doesn't pass (TypeError: Cannot read property '1')) Why?!

Related topics