I created this Tenzies game after 11 hours of FCC React course, mainly pulling stuff from memory and looking some things up as I went along. Basically, you pick a number, or several, but they all need to be the same number, and after each roll you can only pick those numbers. Once you have 10 identical numbers, you win. Pick a wrong number - you lose. I tried using best practices, and that’s my main concern. Can someone experienced please scan the code and point out the mistakes, namely conventions that I did not follow, or improvements that can be made in the logic (I’m trying to use as little imperative code as possible). I left comments for better navigation.
const initialState = {
num1: {
val: random(),
on: false,
lost: false
},
num2: {
val: random(),
on: false,
lost: false
},
num3: {
val: random(),
on: false,
lost: false
},
num4: {
val: random(),
on: false,
lost: false
},
num5: {
val: random(),
on: false,
lost: false
},
num6: {
val: random(),
on: false,
lost: false
},
num7: {
val: random(),
on: false,
lost: false
},
num8: {
val: random(),
on: false,
lost: false
},
num9: {
val: random(),
on: false,
lost: false
},
num10: {
val: random(),
on: false,
lost: false
}
}
See if you can think of way to create the initialState without all the repetitive code.
If you are going to use React, then you should not be directly targeting the DOM (i.e document.querySelector) except for some specific cases. This is not one of those cases.
<div className="nums">
<div className="row1">
<div style={num.num1.lost ? {backgroundColor: "red"} : num.num1.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num1" onClick={handleChange}>{num.num1.val}</div>
<div style={num.num2.lost ? {backgroundColor: "red"} : num.num2.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num2" onClick={handleChange}>{num.num2.val}</div>
<div style={num.num3.lost ? {backgroundColor: "red"} : num.num3.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num3" onClick={handleChange}>{num.num3.val}</div>
<div style={num.num4.lost ? {backgroundColor: "red"} : num.num4.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num4" onClick={handleChange}>{num.num4.val}</div>
<div style={num.num5.lost ? {backgroundColor: "red"} : num.num5.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num5" onClick={handleChange}>{num.num5.val}</div>
</div>
<div className="row2">
<div style={num.num6.lost ? {backgroundColor: "red"} : num.num6.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num6" onClick={handleChange}>{num.num6.val}</div>
<div style={num.num7.lost ? {backgroundColor: "red"} : num.num7.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num7" onClick={handleChange}>{num.num7.val}</div>
<div style={num.num8.lost ? {backgroundColor: "red"} : num.num8.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num8" onClick={handleChange}>{num.num8.val}</div>
<div style={num.num9.lost ? {backgroundColor: "red"} : num.num9.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num9" onClick={handleChange}>{num.num9.val}</div>
<div style={num.num10.lost ? {backgroundColor: "red"} : num.num10.on ? {backgroundColor: "#50c878"} : {backgroundColor: "white"}} className="num" id="num10" onClick={handleChange}>{num.num10.val}</div>
</div>
</div>
Again, more repetitive code that should be handled in a few lines of code.
One last thing, what is the purpose of the single line random() following the random function declaration?
I forgot to delete it, don’t even know why I left it there in the first place
Honestly I don’t see it, it took me a while to come up with this logic, I might have some ideas but it would take some poking around.
That’s what I thought too, but then I couldn’t figure out another way to apply the animations to those elements. The issue is that I also have to remove them on reset, so that takes up even more lines of code. Can I get a hint?
Start with the following array:
const nums = [
"num1", "num2", "num3", "num4", "num5",
"num6", "num7", "num8", "num9", "num10"
]
Then iterate through the array to create the same object you manually created in your code.
I see, thanks. But for now I ran into a different problem - for some reason when I open the codepen link on my phone, the text within the Reset button is misaligned, and the game is sometimes won before the last number is selected, when there is still 1 or even 2 numbers left, how can that possibly be? It doesn’t happen on desktop, only on mobile.
Here for example it ended when there were still 2 numbers left, but I explicitly coded in the condition that the game is won no earlier than when
**tracker** length is 9, which in this case it was 7. How can this be?