Blogger won't let you run live scripts, so I hosted it myself. It's written in HTML, jQuery and CSS. I'm new to jQuery but so far it's amazingly powerful.
Here some of the things that I learned along the way:
jQuery
$("#foo").text("<span>Text goes here!</span>");This result in that exact text being entered into the element with ID foo, the html tags won't be read as html, just printed as text. Not good. The .append( ) method didn't seem to help either.
To get HTML tags to render properly you need to use the .html( ) method, like so.
$("#foo").html("<span>Text goes here!</span>");This got me part of the way there, but i didn't want to replace everything.
One thing to be aware of is the .html( ) method will replace all of the HTML in an element. This is fine if all you want to do is update the element. If you want to add to the existing HTML you'll need to retrieve the existing html, add you new code and then feed it back into the element.
var existingText = $("#foo").html();
$("#foo").html(existingText + "<span>Text goes here!</span>");This will append your HTML to the existing html.
CSS
When users click a button to select a choice, the border changes to blue. The computer choice is indicated in red.
.choice .selected {
color:grey;
background-color:white;
border:solid 2px blue;
}
.choice .comp {
color:grey;
background-color:white;
border:solid 2px red;
}
But if there's a tie I wanted a different boarder, green in this case. If you want multiple selectors at the same level the following doesn't work.
This looks for the "choice" class, moves down one level and looks for the "comp" class, moves down another level and looks for the "selected" class. The problem is the "comp" and "selected" classes are both direct children of the "choice" class. Here's how it's solved.
.choice .comp .selected {
background-color:yellow;
border:solid 2px green;
}
.choice .comp.selected {Remove the space between ".comp" and ".selected", this tells CSS (and jQuery) that they are on the same DOM level.
background-color:yellow;
border:solid 2px green;
}
A simple game, but jQuery is outstanding. I'll finish up the try.jQuery.com prep-work today. The next step will be to dig into C# and the .Net framework.
T-minus 26 days
Here's the game in case you missed it the first time.
