Assignment 7:  Forms and Javascript/JQuery

Overview

This assignment will give you practice creating HTML forms and using Javascript/JQuery to process their contents to generate interesting or useful outputs. You will learn to:

• Create simple HTML forms with input elements and a button,
• Write Javascript functions that are used as event handlers,
• Write JQuery statements that gather the information from the input fields, store the values into variables, and perform some operations with them,
• Incorporate conditional execution of code to perform file size calculations, and display results to the user, by dynamically changing the HTML page.
• Incorporate repetitive elements for multiple pages of a website by using JQuery load().

Pair Programming

On this assignment, you are required to work with a partner as part of a two-person team (re-visit the details of pair programming introduced in assignment 6). Note: You may ask an instructor for an exception to the pair programming requirement, in case there is a strong reason (illness, travel, etc.) that prevents you from finding reasonable times to schedule work with the partner.

You submit the code in one of the accounts and the same grade will be given to both team members.

Requirements

The files you create and edit should go in a folder named hw7, which you should upload to the protected directory on your server account.

Begin by downloading the hw7 folder. You are given some files to start with. A home page, assign7_home.html, contains a menu which links to the pages you will create:

You should not modify assign7_home.html, but you will use it as a template for two new pages you will create: assign7_madlibs.html, which produces a Mad Libs story based on user input, and assign7_tomthumb.html, which performs file size calculations using the formulas covered in lecture and lab.

You are also given two additional files: assign7.css, which styles the home page and your two pages (you will need to add some CSS to this file for various features), and assign7.js, in which you will define the JavaScript functions needed for both webpages (this file is empty to start with).

Finally, you are given an images folder, which contains images for an optional feature of the Tom Thumb page.

Part 1: Mad Libs

Many of us played with Mad Libs as kids. The idea is to ask someone — a friend, a victim — for some words, such as (1) a name, (2) a vehicle, (3) a restaurant, etc. Then, when you insert the words into a story, it yields a crazy result, because the choices were made without any idea of what the story would be. Here are screenshots of a Mad Libs page, both before and after a user has filled out the form and clicked the button:

Your task will be to create a similar webpage to interactively play the Mad Libs game.

Task 1: Creating the HTML page

1. Replace the content of the <main> element with a <form> containing four <input> elements for the user to enter four missing words: for example, a noun for a name, a noun for an object, an adjective, and an adverb. You should only have one input for each of these words.
2. It'll be useful to show a default value in all input elements to simplify your testing of the page.
3. The form should also have a <button> element with an ID so that you can attach the event handler to it. It should also have the attribute type="button".
4. There should also be a <div> element with an ID where the story will appear.

The requirements for the story and its appearance are:

1. There must be exactly four input fields, but their meaning is up to you. Give them default values so that the form is easier to test.
2. Define a new CSS rule in assign7.css to style all the user-supplied words, so that you can see which words were chosen when the story is displayed. You may use whatever color, font, etc. you wish - just make sure the inserted words are distinguishable from the rest of the story.
3. The story must be at least four, but not more than six, sentences long (no longer!).
4. There should be 8 missing words in the story, so you will have to use some of the user-supplied words more than once. For example, the person's name was used three times in the sample story above. (Note that duplicated words are entered only once by the user!)
5. Define HTML elements where your JavaScript code will display the values from the form. Think about how you'll target the correct element for the matching value.
6. A story title should appear at the top of the story. This story title should include your own name (if you are Wendy, something like “Wendy's Crazy Mad Libs Story!”). Use your story title as the <title> for your HTML page as well.

The content of the story can be anything that you like — be creative!

Task 2: Event Handler

In your assign7.js file, define a function (name it whatever you like) that will process the form. It should

• Read the four form inputs using the jQuery .val() method, storing the values in variables.
• Copy the values into the story using the jQuery .html() method.

In your Javascript file, add code to attach the function to the button that will be clicked.

Part 2: Tom Thumb File Calculations

You are working as a summer intern at Tom Thumb ImageWorks, a company that specializes in making thumbnails for images that its clients want to use on their websites.

To make sure that the size of the files is small, you are asked to write a form that will let the page designer enter the desired values for width, height, and number of colors. Your form calculates the file size for these values, and displays a message to notify the designer whether those values are good for a small file or not.

Here are screenshots of a Tom Thumb page, both before and after a user has filled out the form and clicked the button:

Your task will be to create a similar webpage to calculate and display the file size calculations.

To see the form in action, watch this short screencast (NOTE: the screencasts demonstrate how the form should work, but the page layout used is an older version of the assignment; your own page layout should reflect the screenshots shown above).

Task 1: The HTML file

Create the file assign7_tomthumb.html by making a copy of the assign7_home.html file. Then:

1. Replace the content of the <main> element with a <form> with <input> elements for the user to enter three values for width, height, and number of colors. Specify a default value for each that you can use in testing and that the graders can use, as well.
2. The form should also have a <button> element with an event handler for the click event and the attribute type="button". This is just like in the Mad Libs.
3. There should also be an empty <div> element with an ID which will be used to display the calculations/messages on the page.

For the next tasks, add your code to the assign7.js file.

Task 2: JavaScript - getBitDepth function

Define the function getBitDepth, which takes as an argument the number of colors in the image, and returns the bit depth value of the colors. Hint: You can re-use code from a previous homework to complete this function. This function is purely functional, which means it justs takes arguments and returns a value; it doesn't interact with the page at all.

Task 3: JavaScript - indexedFileSize function

Define a function named indexedFileSize that takes three arguments: the width and height of an image and the number of colors. It computes the file size using indexed color and returns the answer as a number in bytes . Hint: You can re-use code from a previous homework to complete this function. Like getBitDepth, this is purely functional: it just takes arguments and returns a value; it doesn't interact with the page at all.

Task 4: JavaScript - Event Handler

Define a function to handle the event of the button click (name the function whatever you like). The function should do the following:

• Store the entered values in variables. Remember they should be numeric, so use parseInt correctly.
• Use the indexedFileSize function to compute the file size.
• Use conditional statements to check that the file size is less than 50 KB (1 KB = 1000 bytes). If that is the case, display a success message for the user, otherwise, display a fail message. The calculated file size in KB, rounded to one decimal place, is shown in both messages.

In your Javascript file, be sure to attach the function to the button that will be clicked.

Test that your page works properly by repeating the scenarios shown in the screencast or other values you have calculated by hand.

Part 3: Repetitious Elements

You have probably noticed that the <header>, <nav>, and <footer> elements on both your pages are exactly the same as the original assign7_home.html, since you copied that file initially to create your new pages.

Copying code directly is not a recommended approach for webpages that contain repetitious elements.

Instead, use the following technique which you learned about in lecture and practiced in lab to load these elements from an existing page:

• Replace each of these elements in assign7_madlibs.html and assign7_tomthumb.html with a <div> with an ID, such as this for the <header>:

    <div id="header-goes-here"></div>
    

• Then, in the assign7.js file, add code to load each element from the assign7_home.html template:

    $("#header-goes-here").load("assign7_home.html header");
   

Extra Credit Challenge

Mad Libs Magic

You can improve the appearance of the Mad Libs page for 1 extra credit point by doing the following:

1. Have the story hidden when the page is first loaded.
2. Once the user clicks on the button, the form should disappear, and the resulting story should be visible on the web page.

Tom Thumb Technique

You can improve the Tom Thumb page by doing the following, for 1 extra credit point:

• Check that the inputs are valid (numbers > zero). Teach yourself about the isNaN function in JavaScript. If the inputs aren't valid, show an error message in red.
• If the inputs are valid, show the message in either green or red, depending on whether the file is okay.
• In addition, show one of the following images:
  • images/up.png:
  • images/down.png:

  These images folder in the original download contains these images.

Validation

Submission

http://cs.wellesley.edu/~myname/protected/hw7/assign7_home.html