More Experimentation with Firefox OS (2/4/15)

Sorry for the lack of blog post yesterday! I was working very hard on my Javascript/HTML code, and I wanted to save the best for last!

I've been experimenting in Javascript for the past few days with a pretty basic app, I'm calling it "Project Push The Button" at the moment. Basically, it's a 'game' in which the user of the phone taps the button a ton of times. There's a counter, which displays how many times the button is pressed, as well as messages to encourage the player.

Today, I implemented an EXP and leveling system, as well as animations! I've gotten a lot of help from Aki and Alex, and I almost fully understand Javascript and JQuery now.

I've decided to post my code when it's a bit more finalized. However, I'll post some examples of how I handled EXP, Leveling, and Animations.

All of the variables I write are stored to IDs, I've learned. These IDs show what you're modifying, and you can modify them in all sorts of ways. For the most part, I've been changing their text. I do that with the following code:

$("#idName").text("yourTextHere");

Where idName is the name of your ID.

Animations are just as simple. I've been messing around with both fadeTo and slideToggle, both of which are handled by JQuery.

FadeTo fades a block of text, either to dissolve or to make it more visible. It's done by the following code:

$("#idName").fadeTo(400, 0.01);

Where idName is the name of your ID, 400 is the time of the fade, in MS, and 0.01 is the opacity of the object after the fade. You can fade in with the code below:

$("#idName").fadeTo(400, 1);

Where 1 is setting it's opacity to 100%.

SlideToggles are called with the following code:

$("#idName").slideToggle();

The time slideToggles take by default is 400ms. It can be set by putting a number in the parenthesis. I use slideToggles to handle when a user levels up, as it provides me with a nice little animation.