Project: Writing JavaScript Chess

Where am I?
hosting > /games/ > /chess/

Adding CSS to control visual presentation

We know that we'll need black and white squares for our chess board. Rather than hard coding those colors into each cell, we'll apply them using classes. It's not really a huge savings, but it's cleaner from a programming perspective. Especially if you think of a CSS class as a variable. One serious advantage of variables is that when you change the definition of the variable, each instance of the variable automatically gets the new value. If you contrast this with an alternative like having to globally search and replace every instance, you can easily imagine how much easier variables can make your life.

We'll define a black and a white class.

And now, we'll re-factor the original HTML table to include the new classes.

Code View:

You can see that the HTML continues to get more bloated, but we've got another optimization that we haven't introduced yet.

Fun Stuff and Additional Resources:

Additional Keywords: learing to build html chess board using javascript