Using ngShow - Riddles
This mini-project has taken the longest so far, but it was also the most entertaining. I realize now that there are probably many better and more concise ways to do this, but I'm pretty proud of it. ngShow is a directive that shows or hides the given HTML element based on the expression provided to the ngShow attribute.
So this:
<div ng-show="true"></div>
would result in a div that always shows itself. You could also provide it a function like this:
<div ng-show="returnsTrue()"></div>
I like using a function because it allows me to show or hide the HTML element whenever I want. You can get creative with it. I decided to keep it simple and use a textbox as my input. The text in the box--like my “isPrime()” function mentioned above--determines what happens on the page. In this case, if you complete the riddle correctly a checkmark appears and the “Hint?” text disappears. Then once you complete all the riddles, a congratulatory message surprises you at the bottom of the page.
Here is one of the four riddles (divs).
<p>
<strong>1. </strong>
<span class="pad_right">What is so delicate that even mentioning it breaks it?</span>
<input type="text" ng-model="value1" class="form-horizontal"/>
<i ng-show="isCorrect()" class="fa fa-check fa-2x green"></i>
<a href="#" data-toggle="popover" data-content="Starts with 's'"
data-placement="top" data-trigger="hover" ng-show="isTyping1">Hint?</a>
</p>
The checkmark is from fontawesome and it uses an <i> tag. That <i> tag has the attribute ng-show=”isCorrect()”. That means that when “isCorrect()” returns true, the checkmark is displayed. The second use of ng-show is in the bootstrap popover element. When “isTyping1" is true, it displays itself.
Now let’s look at what these functions do. We will continue to focus on the first riddle, or div.
If the textbox value is “silence” then we return true. If the value is not “silence” then isTyping1 is set to true, which displays the “Hint?” text. That means that “Hint?” and the checkmark are never displayed at the same time and therefore use the same space in the document.
I ended up repeating this code for each of the riddles, which isn’t very efficient, but I will focus on improving it later.
The more I get into this, the more I realize the joy that comes from using multiple libraries, or standing on the shoulders of multiple giants. jQuery, Bootstrap, FontAwesome, and AngularJS can all work together to make things look better and come together more quickly.