FreeCodeCamp and JavaScript: Build a Simon Game: The HTML

This past weekend I finally hit a milestone – I completed the Front End Development Certificate for FreeCodeCamp!  I will now be moving on the Back End Development Certificate, learning Node, Express.js, and MongoDB.

The final challenge was to build a JavaScript version of the old Simon game.  I don’t mind telling you that this one was indeed a challenge.  Every time I thought I had solved it, I found new bugs.  It took a lot of Googling, some help from the forums, and a lot of trial and error until I finally had a good working version.  The link is here.

There’s a whole lot of coding there, so I figured that what I would do is break this one into parts, and look at the HTML, CSS, and JavaScript in different posts.  Today, I want to look at the HTML, which is the simplest part.

We used an online editor, Codepen, to do this assignment, so it doesn’t show the header or body tags.  I’ve shown the whole file below, but that’s not how it looks on Codepen, just to avoid any confusion.

UPDATE: So, apparently WordPress’s lousy editor doesn’t let you put HTML code in a post without a plug-in, which I can’t use because I am on the free version of WordPress.  So, I’ve put images of the code below, and you can see the actual code on the Codepen link in the previous paragraph.

simoncode1

simoncode2

simoncode3

My Simon game is written in HTML5 and CSS3, with a backbone of Bootstrap, and using jQuery. As always, my notes are interspersed through the code.

In the head, I link to what was the current version of Bootstrap, as well as my own CSS file.  Also, in the head tag, we link to some Google fonts that I used to make the writing on the board look a little nicer than the standard fonts.

The body section starts off with a container div, and then a row.  The row is divided into three columns, with the middle column being the one that actually contains the Simon board.  I created this with CSS – about which more in another post – and in that column, the text is centered.  Below, you’ll see that in the line div class="col-md-6 text-center circle".

Next are the game buttons, which are not HTML buttons, but rather divs.  Each has a class of tile, and a class of “quad” followed by the number of the tile.  I used 1, 2, 3, and 4 rather than using 0 – 3 to make it less confusing, although that meant I would have to be careful with arrays and generating random numbers in my JavaScript code later on (remember, arrays start with 0, not 1).  Finally, each has an ID equal to its number.  In retrospect, I probably didn’t need the class – I could have used “quad” + this.id in the code, but this was a little less confusing for me, anyway, and made my code easier to follow.

Inside the circle of the game board there was quite a bit of graphics in addition to the buttons.  There is a div with the id “innerCircle” (note that I use camel case due to having spent two semesters programming Java).  The inner circle contains the screen, switches, and various buttons related to game play.  The row with the controls has the scorebox and the start button, each of which is created with CSS.  Next, I had to put a light above the start button, then a strict button and its associated light.  twoThings wasn’t probably the best name, but it’s definitely a unique name for it.

Below the scorebox and the start and strict buttons, we have a row with the labels for them.

Next, there is the row containing the on/off switch and its associated labels.  Note that all of the rows on the board are bootstrap rows containing bootstrap columns, and that all of the graphics are created by CSS.  The on/off switch drove me nuts — well, more on that in the CSS post.

Finally, we link to the jQuery file and my own JavaScript file.

And that’s the HTML.  Pretty simple, really.  Then again, it’s supposed to just be the framework on which everything hangs.  Next, we’ll look at the CSS, which is a little more complicated.  See you next time!
Advertisements

2 thoughts on “FreeCodeCamp and JavaScript: Build a Simon Game: The HTML

  1. I think you still have a slight bug.. it tends to cut off my last entry when it’s starting the next sequence like it’s processing the answer to quickly. I can get past it because it repeats and I should be able to remember where I started, but it’s an annoying bug you might want to know about.. maybe browser specific, I’m in Chrome.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s