Project 3

The goal of this project is to continue practicing JavaScript concepts including functions, loops, switch, and simple recursion. You will create several pages with JavaScript programs.

Below are descriptions for each of the pages you will create. 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.

1. Calculator.html: A simple calculator
2. ColorArt.html: A grid of random colors.
3. Collatz.html: A simple visualize of the Collatz sequence.
4. CollatzVis.html: You decide how you want to visualize the Collatz sequence and implement it.

This program should prompt the user for a number, an operator (+, -, *, or /), and another number. It should then print the input and result on the page in the form "<first number> <operator> <second number> = <answer>". For example, "5 + 4 = 9".

Requirements. Your program must do/include the following:

• The file should be named "Calculator.html".
• The page title should be "Calculator".
• User input: It should use three separate prompt() calls to get the user input (This is the easiest way to do it anyway). The prompts should be in the following order:
  • "Enter first number: "
  • "Enter operator (+, -, *, or /): "
  • "Enter second number: "
• calc(x, y, operator): Your program should contain the function "calc(x, y, operator)" which takes the two numbers and operator as input and returns the answer. The parameters x and y should be the first and second numbers, respectively. The parameter "operator" should be a single letter in the string type, specifically, "+", "-", "*", or "/".
• You can assume the user will only enter numbers for the numbers and "+", "-", "*", or "/" for the operator.
• You must use switch to choose what to do based on the parameter entered. There should be no "if" or "else" used in this part of the project.
• You must use document.write() exactly once to print a single string on the page in the form describe above (e.g. "3 * 7 = 21" or "100 / 25 = 4").

This program should prompt the user for a number of rows, then for a number of columns. It should then create a table with the corresponding number of rows and columns. Each cell in the table should be a random color.

Requirements. Your program must do/include the following:

• The file should be named "ColorArt.html".
• The page title should be "Random Color Art".
• Use internal CSS for the following.
  • The background of the entire page should be black.
  • Each table cell should be a td cell and have padding set to 1em.
• Use inline CSS to set the background color of each individual table td cell.
• Do not use any other CSS besides the above. E.g. do not mess with table borders.
• User input: Use two separate prompt() calls to get the user input (This is the easiest way to do it anyway).
• makeArt(numRows, numCols): After, prompting the user for input, you should call a function named "makeArt(numRows, numCols)". This function should take the number of rows and columns as parameters and create the table. Hint: use nested for loops.
• getRandomColor(): To get a random color for each cell, your function makeArt() must call a helper function named "getRandomColor()". This function should return a string specifying a random color in the form: "rgb(<red value>, <green value>, <blue value>)". For example, "rgb(207, 13, 153)" or "rgb(74, 255, 127)".
• randomColorValue(): Your helper function getRandomColor() must in turn call a helper function named "randomColorValue()" to get random numbers from 0 to 255 for each color value. You don't have to write this function, just paste in the following code.

  // Returns a random number from 0 to 255 for color values
  function randomColorValue() {
      return Math.floor(Math.random() * 256);
  }

This program should prompt the user for a number and a programming preference ("while", "for", or "recursion"). It should then call one of three functions: "whileCollatz()", "forCollatz()", or "recursiveCollatz". These functions should each perform the same task of printing to Collatz sequence as specified below. You can find more information on the Collatz conjecture here and see some videos on it here and here.

Requirements. Your program must do/include the following:

• The file must be named "Collatz.html".
• The page title should be "Collatz Conjecture".
• User input: It should use two separate prompt() calls to get the user input (This is the easiest way to do it anyway). The prompts should be in the following order:
  • "Enter a number: "
  • "Enter "while", "for", or "recursion": "
• Output: It should print the Collatz sequence, starting with the number entered and going to one. Each number in the sequence should be printed on its own line using a helper function called "printNumber(num)".
• Collatz sequence: A Collatz sequence uses the following two rules to get from a number n to the next number in the sequence:
  • If n is even, the next number in the sequence is n/2.
  • If n is odd, the next number in the sequence is 3n + 1.
• You must write three separate functions and name them "whileCollatz(n)", "forCollatz(n)", and "recursiveCollatz(n)". The functions should use a while loop, for loop, and recursion, respectively.
• Determining which function to use should be done with a switch. However, you may use if/else in other parts of the code like in the functions themselves.
• printNumber(num): The function printNumber(num) should take a number as input and use document.write() to write the line for that number. Each line should be a number of dashes (-) followed by the number itself. The number of dashes should be calculated with the following which you can paste into your code:

  Math.floor(Math.sqrt(num))

This program should visualize a Collatz sequence in some different way than the previous part of the project. This part is open ended, but you should use some CSS/HTML we have covered in this class. You can use colors, tables, etc. any way you wish to represent the numbers in the sequence. For example, you could print a series of squares which change in color and size based on the number they represent.

You are allowed to resuse code from your Collatz.html file. Essentially, this part of the project asks you to replace the function printNumber(num) with something more interesting.

Hint: If you are using color, you may find it useful to map an arbitrary number to a color value (0-255). One simple way to do this is using the mod operator (%). Remember that mod gives you the remainder from integer division. The following code converts a number, num, into a value between 0 and 255 and assigns it to the variable colorValue.

var colorValue = num % 256;

• 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 your 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 "Project3". 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 3 (Functions), 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