JavaScript FCC 25 + 5 clock project

[lorelei]

Hi all.
I'm wondering if someone here would be willing to take a look at my code?
It needs to pass the 25+5 clock test (visible in the left corner drop down menu )
I've tried everything to make all tests pass, but it seems near hopeless. I know some test is not the be all end all, but I just want to know where I'm going wrong.
I'll just post a codepen link:

codepen


Thanks

 

[Malcolm]

Hi there!

Welcome to Code Forum! This one is a tough one.. have you tried it outside of CodePen?

 

[lorelei]

no, and the only way to test it , as far as I know , is with these FCC codepens.
If you don't have an idea , I certainly won't ever figure this out

 

[Malcolm]

no, and the only way to test it , as far as I know , is with these FCC codepens.
If you don't have an idea , I certainly won't ever figure this out

Hmm, let's see if we can get help with this! @Krusty the Senile @Ghost @Alan @LTomy @swift, hey all! Do you know of any solution that may help @lorelei with this issue?

 

[LTomy]

Sadly, I do not have enough experience with Javascript to really help .

 

[lorelei]

Thanks for trying at least

 

[Krusty the Senile]

Can you paste the link to the FreeCodeCamp exercise here? I'd like to read the description on their site.

 

[lorelei]

Off course. Here it is : https://www.freecodecamp.org/learn/...nt-end-libraries-projects/build-a-25--5-clock
I know many others have struggled with this one

 

[Krusty the Senile]

To start, I think the "simplest" way to check is to confirm that you're fulfilling the user stories mentioned in the challenge. In saying that, the challenge mentions 28 user stories but there are 29 tests. Unfortunately it looks like there's a mismatch.

It looks like it's possible to add the tests to an environment outside of CodePen (but I haven't tried). If you look at the HTML section of the pen you can see <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> - this contains the test suite. I was trying to look for the source code for the tests in their GitHub area but couldn't find anything. Maybe it's not something they make publically available to prevent cheating.

I've managed to get a better look at the code in that bundle.js - you can run it through this site https://unminify.com/ to get better formatting. You can do a search for "25-5-clock" and this will show you the code for the tests. What seems good: there's descriptions of each of the tests, the bad: it doesn't seem to show you which ones fail. Maybe you could add something like console.log for failed tests?

 

[lorelei]

Thanks for the reply and trying. If you run the code in the codepen , bottom left just press the three stripes , and search for the 25+5 clock test.


I've been trying a different approach, but it doesn't seem easy right of the bat.

with this code I separated the break from the app, can do the same for session.

But I know that the break value is needed later when the switch happens from session to a break and back.
But the updated break value (count) is not accessible from within App , so how do I solve that?

const Break = (props)=>{
   const [count,setcount] = React.useState(props.breaks);
   return (
      <div>
         <button onClick={()=>setcount(count-1)}>-</button>
         {count}
         <button onClick={()=>setcount(count+1)}>+</button>
      </div>
 
   );
}
class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      break: 5,
      session: 25,
     
    }
  }
  render(){
     return(
        <Break breaks={this.state.break}/>
     );
  }
}
ReactDOM.render(<App/>,document.getElementById('container'));

 

[lorelei]

could someone please give some insight with my direct above this post code snippit ?

And, is it normal to be this stuck with react again. I feel like I'm getting nowhere, I keep having to redo beginner js/react tutorials. Maybe I'm not cut out for this.

 

[lorelei]

Never mind, I figured out the code snippet. Using nested components, honestly I feel i'm back at square one .
Still stuck with the 25+5 code, but I'll see how this new code will work out.

 

[Krusty the Senile]

Sorry, I can't really provide you any feedback regarding your code. ReactJS and associated framework is on my TODO list.

Maybe I'm not cut out for this.

Coding and programming is one of those things that take time and practice. Please don't give up. We've all been in that situation where there's a problem that's stumped us, but you can get the result you want in the end. Keep it up! You can do this!

 

[Malcolm]

Never mind, I figured out the code snippet. Using nested components, honestly I feel i'm back at square one .
Still stuck with the 25+5 code, but I'll see how this new code will work out.

As @Krusty the Senile mentioned, don't just quit! Keep practicing, you figured out the code snippet. That's more than enough to tell you to keep going! Code Forum will always be behind you. So don't ever quit!

 

[lorelei]

Thanks Malcolm, never saw your reply sorry

I managed to get it to work for 2 different versions, one is just plain JS, the other uses a react class. They work and pass the FCC test!

But I have another version using React components and a class, that I can't get to work.
Well , it seems to work correctly when I run it by pressing the buttons.
But the freecodecamp test doesnt pass it. This is for the 25+5 timer.
Hopefully I'll be able to finish it soon , otherwise I'll be here again for help .