Simon Game - My Final project in the Legacy Front-end Certification

Hah here we go… Finally Completed the Legacy Front-end Course . It’s been a long journey. Learned a hell lot of things . Almost 1200 hrs of course . I had fun though. Also got an opportunity to be part of a great community :blush:. Next I wish to complete the back-end too. Once again Thank you to all the good people here .

codepen

OK, taking a look at this…


The game seems to work well and looks good.

Looking at the code…

Do you need refs for all those things? Is there a reason why you can’t store them in regular variables? I don’t know. I don’t use refs much but I do find that they tend to get overused. I think the React docs even suggest they should be avoided if there is another way. One way would be to use a global variable, but obviously that is not ideal. If you want a component variable that persists, then wouldn’t setState work? I don’t know, maybe I’m wrong, it just looked odd to me.


Furthermore, you define this:

let interval;

but never assign a value.


Things like this:

setCount((count) => 1);

could probably be:

setCount(1);

This:

if (typeof count == "number") {

in general, you should use strict equality (===), unless you really want implicit conversion (which of case makes not sense here.)


This:

{error ? "Wrong !!" : count ? (count < 10 ? `0${count}` : count) : isPowerOn ? "--" : ""}

Is an awful lot of byzantine logic for one line. I’m a fan of removing as much logic as possible from JSX for readability. I would have wanted to so something like:

const errorMessage = error ? "Wrong !!" : count ? (count < 10 ? `0${count}` : count) : isPowerOn ? "--" : ""

and render that. Furthermore, I’d want to avoid using nested ternary, or at least format it in a way that makes it very clear what is happening. When looking through 10k lines of code, every little thing that slows you down adds up.


I don’t know, just some thoughts.

1 Like

If I use regular variables to store the interval or timeout I cant clear it later coz ,every time a rerender occure the variable will be assigned a new memory that no longer holds interval so i have to preserve the value between rerenders. Thats why i used refs . If you can suggest a better way that would be helpful .

My bad. Have to optimise the code.

Donno why I’m in love with ternary :sweat_smile:. But I understand when someone else looks into my code they will they will feel pain. I will change it.

I suggested two:

One way would be to use a global variable, but obviously that is not ideal. If you want a component variable that persists, then wouldn’t setState work?

Donno why I’m in love with ternary…

I use a lot of ternary. Sometimes I even use it in JSX. I try to avoid nested ternary anywhere and I try to avoid complex ternaries in JSX - or any complex logic in JSX.

…But I understand when someone else looks into my code they will they will feel pain.

It’s not just them. When you come back and look at this in 6 months, you are going to be looking at it as if you’ve never seen it before.

Writing clear, easy to read code will make your job sooooo much easier in the long run. And sometimes in the short run. And it will keep your fellow devs from slashing your tires in the parking lot.

1 Like

Cannot stress this enough. At the time, we all think we will always understand the code we are currently writing because of course, we created it, right? Nothing worse than having to figure out your own code you thought you were so clever writing at the time and now must admit you were too clever for your own good.

2 Likes

Yeah, it’s just a matter of being aware of it and developing some good habits. When you graduate to a local IDE, adding things like eslint and/or prettier would be good. It’s a pain at first, but will save soooooo much hassle in the long run.

1 Like

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