25+5 Clock and Javascript Calculator Feedback

Hello, so I’ve finished these 2 projects a couple of weeks ago and I’d love to get some feedback on them.

I’m curious if you could find some cases that I didn’t take into consideration or if the UI is user-friendly enough.

Also, I’d really appreciate it if you’d take a look at my code and recommend some improvements. I’m still getting familiar with react and javascript best practices and I have a feeling that some of them are sadly being thrown of the window in these 2 projects :sweat_smile:

Thanks in advance!

Here are the projects:
freeCodeCamp 25+5 Clock
freeCodeCamp Javascript Calculator

1 Like

Nice👍. But if you want someone to see your LinkedIn profile use target="_blank".

1 Like

Hei thanks, didn’t notice that the redirect wouldn’t work from codepen, I guess because it would have to act like an inframe. :grinning:

Hi @flaxi,

I’m curious if you could find some cases that I didn’t take into consideration or if the UI is user-friendly enough.

I’m getting some errors:

Browser:

Version 92.0.4515.159 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)

input:
. 1

expected result:
0.1

project calculator:
decimal
decimal


input:
. 1 + .1

expected result:
0.1 + 0.1

project calculator:
+0.1
0.1

I recorded a video:

Cheers and happy coding :slight_smile:

1 Like

Thank you! Initially, I didn’t want to let the calculator consider . as 0. if you didn’t press zero first. Did a quick fix, now if you press . it just shows NAN.

Just that… the / from JavaScriptCalculator mustn’t be orange like all other calculus signs?

Could have done that if I’d switched the elements around a bit. Like make the equal shorter and maybe the ac longer or if I’d added some new button.

Quickly looked at your Pomodoro Timer. Couple observations:

  • Naming: avoid names like click, ref. Why some variables are const and some let?
  • If you use setTimeout or setInterval it’s best practice to do cleanup (even if you think it doesn’t matter in your case :slight_smile: )
  • Four levels deep ifs :unamused:
  • Too much repetition to pad the string with 0 (btw:.padStart())
  • finalValue is not worthy of ref? It gets redeclared every render.
  • I’d personally would have only seconds and derive display time from it.
  • Not sure what is going on here: refTimeLeftOutPut.current = timeLeftOutput;.
  • Avoid logic/long functions in handlers (start-stop button onClick).
  • It’s a convention to put ReactDOM.render at the end :slight_smile: .
1 Like

Thanks for the tips!
I’ll check them out soon and do some refactoring.:grinning:
Initially, I just focused on making it work, I usually spend one or two days on the logic and one on the design. I’m trying to learn things as fast as possible and not get hung up too much on certain aspects.
I’m still behind when it comes to the best practices sadly. :sweat_smile:
Seems right with the ReactDOM.render, didn’t even notice when I took it from my react app since they were in different folders.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.