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.
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.
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".
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.