Just a little stupid Javascript App

Remember how I promised I would learn Javascript so many times in the past? Well, I finally got around to learning some of the basics. And just like I did with PHP when I was learning it, I decided to create a simple application. I could not come up with a good idea so my friend suggested one and within a couple of hours I finished it.

Here is the demo. I received some positive feedback from a lot of people so I thought I’d show how I, first of all, made it and how it helped me learn Javascript.

The Concept

Okay, the concept was to create a site wherein one would receive advice to a question with a general advice quote or whatever else. Basically, a sentence or two that would guide the user. It works in a similar way as one of my older projects Only A Quote, except this is pure javascript, no databases, and no php at all.

The idea is to set up variables, actually strings, that contain the quotes. One string = one quote. And then access these strings randomly. The access has to be inside the HTML (ie. no refreshing) and I want the text to fade out and fade back in with the advice quote.

Another thing I wanted to do was to have the answer appear in a teacup, etc. I’ll explain some of the basic CSS to do that, and same with how to create the cup in photoshop (I hate doing in-depth photoshop tutorials)

Variables

Believe it or not, I stored all of the quotes in a single variable, a single array actually. Here is how you go about it:

var answer = new Array();

answer[0] = "Never miss an opportunity to make others happy, even if you have to leave them alone in order to do it.";

answer[1] = "You can tell more about a person by what he says about others than you can by what others say about him. ";

answer[2] = "Seek freedom and become captive of your desires.  Seek discipline and find your liberty.";

You can add as many answers as you wish, the only thing you have to do is follow the format: answer[next number] = “Answer text”;

Also, to initialize a variable just add the “var” in front of the variable name, an equal sign and the variable contents. Since this is an array I defined variable as an array by adding “new Array()”.

Text and the Form

The next thing we have to do is create the text field we want to dynamically change and the form to initialize several functions that will change the text, and do the fading.

This is the easiest part:

<p id="Ans">
What's your cup of tea?
</p>
<div id="form">
<form name="frm">
<input type="button" value="Answer" onclick="TextStuff()" id="button"/>
</form>

The paragraph Id-ed “Ans” is the place where the answer will appear. I created a form with an “onclick” event that points to the “TextStuff()” function. You can use basically anything for the onclick button. A div with an onclick, a textfield, anything at all but a button is rather convenient so I used that. You don’t have to Id anything other than the paragraph.

Functions

Next, let’s create a function that will change the text. I’m going to call it “message()”.

function message() {
var ArrayLength = answer.length;
var r=Math.floor(Math.random()*ArrayLength);
document.getElementById('Ans').innerHTML = answer[r];

}

Let me explain this.First, I created a new variable that will get the number of array elements in my array. You can use the “.length” on any variable. For a string, the return value will be the number of characters. For an array, it will get the number of elements. The next variable “r” creates a random number with “Math.floor(Math.random()*number)”, you can replace “number” with any number that will be the ceiling for the random integer. For example, if you put 5 there, the random number will be between 0 and 5. By using putting “ArrayLength” there, you won’t have to keep changing this value if you add new quotes.

The last part basically means “in this document getElementById called (‘Ans’) and do innerHTML so that answer[r] is the new value for the element with the ‘Ans’ Id”. This will change the text within the paragraph Id-ed Ans.

The Fade Function

The next big thing I tackled was fading the text in and out. The problem here is is that I could not find a regular javascript function that could do this and I’m not skilled enough to figure it out myself. I took a shortcut and used JQuery.

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Put that in your header to include the latest JQuery version.
Next, we will use the fadeIn and fadeOut JQuery functions. First, did you notice how the previous function I created is called “message()” while the onclick function is called “TextStuff()”? Well, here is where we create our “TextStuff()” function.

function TextStuff() {
$("p").fadeOut("slow");
var t=setTimeout("message()", 2000);
}

Okay, first of all. JQuery functions do not work the same as regular javascript functions because JQuery is a framework and it has its own rules. Let me explain how this particular instance works. “$(“element“).fadeOut(speed, function to call);” I used the “p” (paragraph) element but you can use any other, even an #id. There are several speed settings such as “slow”, “fast”, or you can just put milliseconds there.

Second, I set the “message()” function to execute 2000 milliseconds (2 seconds) after the text fades out. the setTimeout function does this latent execution. You can replace the 2000 with any number you want.

Next I added a fadeIn function into the message() function.

$("p").fadeIn("slow");

Just put this at beginning of the function before the ArrayLength variable.

Where to put all this stuff

This is the easy part. Put the functions in the header along with the call to the JQuery script. You can put the variable there as well or you can create a .js file with all the answers and call onto that like so:

<script src="answers.js"></script>

Don’t use the <script type=”text/javascript”> for the external file, just for the internal javascript calls. Put the form and the changing paragraph wherever you wish to inside your site. If you have any questions, go ahead and ask or just refer to the demo source file.

The CSS and Photoshop Stuff

This is pretty straight forward. I created several circles, one smaller than the other with a white fill. I used a single black-to-white gradient for each of those circles and added brightness and lowered contrast to create a smooth, light gradient. Next, I added some blending options. Notably, another low-opacity gradient for secondary shadows. I also used an “inner glow” set to multiply with a black color coming from the edge or the center (where it works better) with a 1 or 2px solid white stroke. This works the same way for the coffee, except I used a light brown to black gradient. The highlight is just a part of a circle with light opacity again.

I created the rest (the spoon, the teabag) the same way. The CSS is straightforward. I created a wide div to accommodate the cup and the other parts. Used a lot of padding from the top on another div that holds the answers. Under that, another div hosts the “answer” button and other stuff.
That’s about it! I hope you enjoyed my short basic tutorial!