Project 4

The goal of this project is to practice JavaScript arrays and forms.

Below are descriptions for each of the pages you will create. For this project, you will implement a set programs that will allow you to practice arrays and forms. Please read descriptions carefully and capture every detail. Since coding is very detail-oriented, part of your grade will depend on how carefully you follow these instructions.

You will create the following HTML/JS pages. Further details on each page will be given below.

In a file named Prog1.html, implement a program with the following specifications:

1. Define the bolded text "StartRange" followed by a textfield.
2. Define the bolded text "EndRange" followed by a textfield.
3. A button labeled "Print Table".

When the button is selected, the program will display a table of powers of 2 and 3, for the numbers in the range defined by the start range and end range values provided via the textfields. The first column will have the number, the second column will have the power of 2 of that number, and the third column the power of 3. Display the table in a display area using <div> </div> tags as shown in class.

Requirements:

• For this program, you cannot use global variables.

Updates:

• Please make the table appear at the top of the page, above the form elements. As shown in class, you can do this by placing empty div tags with an id at the top of your page and using the innerHTML property of the div object.
• You do NOT need to check if you are give a valid range for this assignment. You can assume the end number is greater than or equal to the start number.

In a file named Prog2.html, implement the following functions:

• function isPalindrome(arrayOfNumbers) - This function returns true if the array is a palindrome and false otherwise. If arrayOfNumbers is null, the function will return false.
• function isIncreasing(arrayOfNumbers) - This function returns true if the array represents an increasing sequence of numbers. If arrayOfNumbers is null, the function will return false.

Using the above functions, implement a program that displays a form that has a textfield and two buttons. Users will provide numbers in the textfield, where each number is separated by commas. One button (labeled "isPalindrome") will display the message "palindrome" if the sequence of numbers provided represents a palindrome and "not a palindrome" otherwise. A similar button (labeled "isIncreasing") will display the message "increasing" if the numbers represent an increasing sequence and "not increasing" otherwise. Display the message using <div> </div> tags as shown in class.

Requirements:

• For this program, you cannot use global variables.

Updates:

• Please make the message appear at the top of the page, above the form elements. As shown in class, you can do this by placing empty div tags with an id at the top of your page and using the innerHTML property of the div object.
• Clarification: A single number is both a palindrome and increasing.
• Clarification: If the user enters no numbers (empty string), you can decide whether to call it a palindrome/increasing or not. However, your program should not crash on this input.
• Clarification: The sequence 2,2,2 is NOT increasing.
• Some students have noted that user input to the text field will not cause null to be passed to the functions. Remember that you can test this by just writing some test code that calls the function with null as a parameter and checking the output.

In a file named Prog3.html, implement a program with the following specifications:

1. Define an area where a picture will be displayed.
2. Define three buttons labeled "FirstPhoto", "NextPhoto", and "PreviousPhoto".
3. Create a folder called "Photos" within the Project 4 folder and include five pictures you like.
4. Define an array with the names of the five pictures.
5. Selecting the "FirstPhoto" button will display the first photo in the array.
6. Selecting the "NextPhoto" button will display the next photo in the array. If the last photo is being displayed, the first one will be displayed.
7. Selecting the "PreviousPhoto" button will display the previous photo in the array. If the first photo is being displayed, the last one will be displayed.
8. Use bootstrap for the page appearance (use the lecture code we posted).

Requirements:

• For this program, you are allowed to use global variables.
• Although your array of photos will have length 5, your functions to change photos should work for arrays of any length.

Updates:

• Reminder: If you are referencing a bootstrap folder (like in the lecture example), the bootstrap folder should be in the Project4 folder that you zip and submit. Remember that graders will open your code and run it in Chrome on their computer, not yours.

• All pages must satisfy the HTML Validator with no errors or warnings. Make sure you upload your file to the validator. Do not just paste the code in. If you are getting mysterious errors that you can't diagnose, go to TA office hours. If you submit pages that don't validate properly you will lose points.
• No email submissions of projects under any circumstances. See instructions below for submitting your work. If you are not sure how to create a zip file and how to submit this zip file, it is your responsibility to visit TA office hours before the due date to ask for help. We will not grant extensions because you were unable to submit the project successfully.
• This project is to be done individually and submissions will be checked for originality. Students who are found to have collaborated on the project will be prosecuted for academic dishonesty.
• We have limited space on our submission server. Please be sure that each photo is not more than 1MB (1 megabyte) in size and the total size of your project will not take up more than 8MB. The server may reject submissions that are too large.

You will submit a zip file. Please be sure that all of your work (your HTML files and any other necessary files) are in a folder called "Project4". Create a zip file that includes this folder, as follows. On Windows, right-click the folder, then choose "send to, compressed (zipped) folder". DO NOT USE A UTILITY LIKE 7-ZIP OR WINRAR. On a Mac, right-click the folder, then choose "Compress yourFolderName".

You will not receive credit for submitting a file that is not a standard "zip" file. In particular, "rar" files or "7z" files will not be graded. Submit the zip file to the submit server by logging in, selecting Project 4 (Arrays and Forms), and uploading the zip file to the server. You may submit as many times as you like. We will only grade the last submission. See syllabus for late policy.

After you have submitted the project, we strongly recommend downloading your submission from the submit server. It will give you a zip file. Unzip this file and verify that the contents are as they should be. It should contain all of your HTML files and your photo.

Project adapted from Nelson Padua-Perez and Fawzi Emad.

Web Accessibility