Here are some questions I have
Could you explain the nth-child and how you applied it to tr and td?
How does this line work exactly "xoClass = (xoClass === 'x') ? 'o' : 'x';"?
I think you explained both of these to me but I still don't quite understand.
Let me suggest the following exercise to help you understand what the nth-child styles are doing on the rows and columns:
ReplyDelete1. Comment out the following (using /* .... */):
td:nth-child(even) {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
Reload the page and see how it looks different. Then after uncommenting out the previous step, do the same thing with:
tr:nth-child(even) td {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Let me know if this helps. I'll be glad to explain it again to you in class after you have tried this.
xoClass = (xoClass === 'x') ? 'o' : 'x';"
is logically equivalent to the following:
if (xoClass === 'x') {
xoClass = 'o';
}
else {
xoClass = 'x';
}
only it is much shorter. Once you get used to it, it is not hard to read either,
so its a good syntax.