- Create simple HTML forms with input elements and a button,
- Write JQuery statements that gather the information from the
inputfields, 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
We recommend that you run with the browser Console open at all times when you are
the values you expect them to have.
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.
Find a Partner
Use this shared Google Doc to record who your pair partner is or find a partner who has similar scheduling constraints. It is not required to pair with your project partner, you can pair with anyone in any section, as long as you are able to find time to work together.
You must enter the names of team members in this spreadsheet (or if you got permission, your name alone), since the graders will use this document for grading purposes.
The files you create and edit should go in a folder named
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,
contains a menu which links to the pages you will create:
You should not
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,
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
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 pageCreate the file
assign7_madlibs.htmlby making a copy of the
assign7_home.htmlfile. Modify the header comment, etc., to correspond to your new page. Then:
- Replace the content of the
<main>element with a
<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.
- It'll be useful to show a default value in all input elements to simplify your testing of the page.
- 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
- There should also be a
<div>element with an ID where the story will appear.
The requirements for the story and its appearance are:
- 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.
- Define a new CSS rule in
assign7.cssto 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.
- The story must be at least four, but not more than six, sentences long (no longer!).
- 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!)
- 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
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
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:
- Replace the content of the
<main>element with a
<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.
- The form should also have a
<button>element with an event handler for the
clickevent and the attribute
type="button". This is just like in the Mad Libs.
- 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
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
functional, which means it justs takes arguments and
returns a value; it doesn't interact with the page at all.
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.
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
- Use the
indexedFileSizefunction 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.
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
<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
<div>with an ID, such as this for the
- Then, in the
assign7.jsfile, add code to load each element from the
You must upload to the server and view your pages from there to verify that the load worked correctly!
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:
- Have the story hidden when the page is first loaded.
- 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
- 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:
imagesfolder in the original download contains these images.
hw7 folder to the server, into your
http://cs.wellesley.edu/~myname/protected/hw7/assign7_home.htmland use the menu to check each page, to make sure that all pages are displayed as expected.
- Open the Google Doc we shared with you titled:
CS110 Submission to Gradescope, and follow the instructions (make a copy of the file, edit the URL in the copy to correspond to your own assignment, and then create your own .pdf version of the copy).
- In your browser, go to gradescope.com and log in.
Your Courses, select
- You will see all of your current assignments. Click on the assignment you are turning in.
- In the dialog box that opens:
- Click Select PDF
- locate the correct file on your computer
- Click Upload PDF
- It may be necessary to reload the page to verify your submission was uploaded.
All the usual coding rules apply. See the style rules. Especially important is to not forget including comments in all your files to describe your choices and decisions.
Assignments are due at midnight on the due date (check the schedule). Assignments may be turned in up to 24 hours late, for a 10% penalty. Furthermore, remember that this policy means that you should not modify work after the due time has passed, or it will be time-stamped late, and will incur the late penalty.
Homework assignments must be your own work. You may not look at solutions from other students, either from the current offering of CS110 or from past offerings.
These are the criteria we use to grade the homework:
- Homework was submitted on the server by the due date. Late penalties apply.
- Folders and files have the required names and are uploaded to the proper location.
- The two HTML files and the CSS file are valid.
- All your files have comments at the top and as necessary interspersed in the code.
- Your code follows our recommended coding style.
- Mad Libs page follows all our requirements.
- Tom Thumb page follows all our requirements and the file size calculations are correct.
- The repetitive elements of the page are loaded properly
The staff may want to look at this solution.
Our tutors in the help room can help you with concrete problems and questions you have about the assignment, thus, go to the room prepared. If you find that you don't know how to start the assignment, you should visit the instructors during their office hours.