A practical example

All new concepts from this point forward are going to be introduced as part of of a bigger task: to create a party invitation tool. This is the end results we'll be aiming for:

Part 0: Get setup

Visit http://students.susanbuck.net/storage/code/invitation-generator/ to get a framework from which to build this example on. Use "View Source" in your Browser to copy the code into your own page you can run

Part 1: How many people are attending?

Goals:

  1. Create a text input
  2. Read the value of what is typed into that input, every time the user types in something different

Create a text input on your page, with a label asking how many people are attending.

How many people are you inviting?
<input type='text' id='invite-count-input'>

Make sure your input has an id, so we can interact with it from JavaScript.

Now in JS we want to add a listener to this input. From the documentation of jQuery listeners, we'll choose the .keyup event because we want our interface to be very dynamic, updating every time a user changes a value.

$('#invite-count-input').keyup(function() {
    console.log("User typed something in!");                        
});                

What this says is, every time I release a key, trigger something to happen. In this case that "something" is a console.log function.

console.log is your new best friend; it is a way to display debugging information in the browser via tools like Firebug or Web Inspector. With either of these tools open, find the Console tab and watch what happens when you enter numbers in your text input.

We used the console.log feature just to give ourselves some feedback - it allowed us to test that our code was actually working as we expected to. If all went well we can confirm that we properly attached a keyup listener to our invite-count-input.

Next, we want to know the actual value the user is typing in:

$('#invite-count-input').keyup(function() {
   var number = $('#invite-count-input').val();
   console.log(number);                        
});        

Two new things happening in this snippet; the first is we've created a variable called number to "store" the value of what the user typed in. Variables are used through out all programming languages, and they're simply a way to store data into the "code's memory" so it can be used again, or manipulated, later. For now, all we do with our variable is console.log(number); to test if it worked.

The second new thing in this snippet is the use of .val() which is the jQuery way of retrieving the value of form elements. See: api.jquery.com/val

Step 2: Display the appropriate amount of inputs for guests

Now that the user can tell us how many guests are going to attend, we can display that many text inputs for our user to type in the guest names.

To start, put your text inputs in your HTML (we're going offer a max of 5 guests to keep things simple)

<p class='label'>Guest List</p>
<input type='text' class='guest-input' id='guest-1'><br>
<input type='text' class='guest-input' id='guest-2'><br>
<input type='text' class='guest-input' id='guest-3'><br>
<input type='text' class='guest-input' id='guest-4'><br>
<input type='text' class='guest-input' id='guest-5'><br>

To start, we want these text inputs to be hidden, and we do that by styling a class.

.guest-input {
        display:none;
}

Note that in addition to setting a class, we also give each element it's own unique id so we can target it from JavaScript.

With our elements in place, it's back to JavaScript, but this time we need to give our code some brains; it's going to need to make decisions based on user input.

Basically we need our code to do this:

If user types 1.... Display 1 input

If user types 2.... Display 2 inputs

If user types 3...  Display 3 inputs

If user types 4...  Display 4 inputs

If user types 5...  Display 5 inputs

To make this happen we're going to introduce a programming concept called a For Loop.

$('#invite-count-input').keyup(function() {

  // Find out what number the user typed in, store it in a variable called "number"
   var number = $('#invite-count-input').val();
  console.log(number);
        

  // Via a loop, turn "on" as many inputs as the user requested                        
  for(var i = 1; i <= number; i++) {
       $('#guest-' + i).css('display','block');
  }
                        
});        

The for loop wants three bits of information to do it's job:

  1. Where should I start? var i = 1;
  2. Where should I end?  i <= number
  3. How should I proceed each time? i++

The i variable is just a cursor we use to iterate through the loop.

Test out the above code. It's on the right track but there are a couple problems. What are they?

How might handle an error message for the above issues?

Part 3: Get guest list on our invitation

With inputs for our user to type in their guests, we want to print that information on the invitation.

Create a button that will be in charge of submitting your generator.

<input type='button' id='generate-button' value='Generate'>

Now "wire" that button so it will respond to a click.

$('#generate-button').click(function() {                
   console.log("Called generate button");
});

The rest is up to you! Hints:

  1. You're going to need to use the .html() jQuery method: api.jquery.com/html/
  2. In JavaScript we can concatenate strings of information together using a plus sign (+). This will be handy when you want to join together all the names on the guest list.

Bonus Challenges

Give the user more options for customizing their card:

  1. Create  a set of radio buttons allowing them to choose different backgrounds.
  2. Create a set of radio buttons allowing them to pick a Birthday Party, or a Wedding or a Anniversary, etc.
  3. Build in options for changing font-size, typeface or color.
  4. Include fields for adding time and location information.