p4-desc.md 10/31/2020
1 / 10
CMSC 122 Fall XXXXXXXXXXProject 4
Practicing JavaScript Conditionals and Loops
Assigned Points: 12% of course grade
Assigned Date: November 1, 2020
Due Date: November 20, XXXXXXXXXX�30 PM
Objective
This project will review things you already know about HTML and CSS, but is focused on practicing logical thinking
and representing logical processes into Javascript code. You will need to understand and use loops and
conditionals to complete. You will also practice alert, prompt, and producing HTML content with Javascript
using document.write and document.writeln.
Overview
For this project, you will (1) write an HTML file (p4.html) that has the title "Practicing Loops and Conditionals" in
the HTML head, (2) write a CSS file (p4.css), and also (3) write a JavaScript file (p4.js). The CSS and JavaScript
file must be linked to the HTML document using the link and script tag, respectively. As soon as the page
loads, the user should be presented with a dialog box (use the "prompt" function) that looks like below:
As shown in the image, the user will choose one of 4 options by entering a number between 1 and 4. Your code will
then perform a task for the selected option. If the user chooses an invalid option, nothing happens -- i.e., just a
white blank page rendered in the
owser. In order to choose another option, the user will reload the page. The
detailed requirements for each task are given in the sections below.
WARNING: THIS PROJECT WILL REQUIRE A SIGNIFICANT AMOUNT OF TIME. START WORKING ON THE
PROJECT IMMEDIATELY!!
p4-desc.md 10/31/2020
2 / 10
The First Thing To Do
You will first create a folder named P4-YourDirectoryId. All your work for this project should go inside the folder.
The folder will include an HTML page (p4.html), a CSS file (p4.css, if you use one), and a JavaScript file (p4.js)
Requirements for main, initial dialog box, and random number generation
The main function
Write the main function at the top of your script. All variables must be declared inside the main (or other functions
you will write). If we comment out the following line at the top of your script, we expect no JavaScript code be
executed when the page is loaded.
main();
Initial Dialog Box
The message "This page says" that you see in the image above were automatically generated when p4.html is
opened in the Chrome
owser. it can look different when you open your HTML file. Notice that the prompt takes
up multiple lines. The trick is to use an escape sequence character for inserting a line
eak into the prompt
message. The newline character looks like this: "\n". Try the following statement in the Console. It should be
enough for you to figure out how.
prompt("Hello World\n" + " 1. Again");
Assume the user will enter an integer in the box. However, you have to check if the given input is valid. If the input
value is not valid, or if the user clicks the 'Cancel' or the 'OK' button without entering any integer, display a message
ox as shown in the image below. The user will have to reload the page to enter another option value.
p4-desc.md 10/31/2020
3 / 10
Generating Random Numbers
There are a couple of places in this project where you will need random numbers. You can reuse the following
function in your project without modifications -- in fact, the code was already given in a lecture example. This
function will allow you to easily generate a random integer (whole number) in between low and high, where both
sides inclusive.
function randomNumber(low, high) {
return Math.floor(Math.random() * (high - low XXXXXXXXXXlow;
}
If you need a random value between 1 and 10, both inclusive, you can call the function as follows:
var value = randomNumber(1, 10);
Requirements for Individual Tasks
Depending on the user's option choice (1, 2, 3, or 4) in the initial dialog box, your program will perform different
tasks as described below. The following list gives the links to the requirement details for each task.
�. See an Art Page
�. Play a game
�. Compute Interest
�. Grey Gradient
See an Art Page
If the user enters 1 in the initial dialog box, your program will first use two prompt boxes to ask the user to ente
two integers:
p4-desc.md 10/31/2020
4 / 10
�. The number of rows
�. The number of columns
Then the program will draw a grid of colors with as many rows and columns as were specified by the user. Below is
a screenshot of the output in the case where there are 20 rows and 30 columns.
The color of a grid entry (you can use table to display the grid) is dependent on the position of the entry.
For each entry, compute the sum of the row and column number and check if the sum is a prime number o
not. For example, for the entry at row 1 and column 3, the position is (1,3) and the position sum is 4 (= 1 + 3),
which is not a prime number. The position for the top-left entry is (1,1), and the position sum (1+1) is a prime
number.
For a prime-position entry, set the background color of the entry to yellow. For a non- prime-position entry,
use a random color as its background. The red, green, and blue component value of the random color must
e between 0 and 200.
If either 0 or negative value(s) is given for the number of rows or columns, do not draw the grid but instead
ender Invalid row or column value!! in the document. Assume that the user will enter an intege
in the row and column prompt boxes.
The grid width and height should change as you change the
owser window size. That is, each grid entry
must shrink or grow, depending on the
owser window size. This can be achieved by setting the width and
height of the grid using a relative unit of the
owser width and height. Put some spacing between the
order of the grid and the
owser window border as seen in the video.
The grid of colors must be centered horizontally in the
owser.
Hints
p4-desc.md 10/31/2020
5 / 10
Consider using a table for the color grid. You may use 1px solid as the border and set the border-
collapse CSS property to collapse.
Using CSS style rules, you should set the table's width and height so that they occupy the entire width and
height of the screen. The vw and vh unit could be used for width and height, but not mandatory.
To eliminate scroll bars that might appear, set the margin for the body element to 0px.
Play a Game
If the user selects 2 in the dialog box, your program will first pick a random value between 1 and XXXXXXXXXXboth
inclusive. Once the value is picked, the game begins with the following prompt box:
Note that the value displayed between ( and ) is the random value picked by your program -- e.g., 58, in the
figure. Why on earth would you want to reveal the number that the user is supposed to guess? (This doesn't make
for a very challenging game!) Well... because the grader needs to see what number has been picked in order to
efficiently test your work. If you don't properly display the picked value in this prompt box, you will receive 0 points
for this portion of the project.
After the user enters his/her guess in the prompt shown above, the program will check if the guess is co
ect o
not. There are two cases:
If the user's guess is inco
ect, then one of the two prompt boxes, below, will be displayed, depending on
whether the guess was smaller or larger than the value picked by the computer. In the example above, the
secret number is 58.
p4-desc.md 10/31/2020
6 / 10
If the user gives co
ect number, an alert box like the one below appears and the game terminates. Note
that you must report the number of attempts. (If the user guessed the value co
ectly on the first try, you
program should output "Wow! You gave co
ect value at one attempt!!". Otherwise, display "Co
ect! You
attempted $n$ times.".) where $n$ should be replaced with the number of guesses until the co
ect value is
given. In the example above, user enters the co
ect answer after entering 50 and 60.
Simple Interest Calculato
If the user selects 3 in the initial dialog box, your program will read (1) the principal amount, (2) the interest rate
(%), (3) the maximum number of years, and (4) the computation scheme and compute the interest and total
amount. Use the following messages to read the values:
Enter principal:
Enter rate (percentage value without the % symbol):
Enter number of years:
Computation Scheme (simple or compound):
Based on the input values, the program computes simple or compound interest based on the input values. The
program will then render the interest and the total amount (including the principal) in the Web page loaded. If you
have not heard of the simple interest and compound interest, take a look at this web site.
The formula to compute simple interest is: interest = principal * (rate/100) * years. Just
add the principal to the interest to generate the total amount.
the formula for computing the total amount using the compound interest scheme is: $FinalAmount =
principal * (1 + rate/100)^{years}$. The Math.pow(x, y) function can be used for the computation.
The figures below show the output rendered by executing your program given the input 10000, 4, 10, simple and
10000, 4, 10, compound, respectively. Use the h3 heading when you render the output to the Web page. Note
that the numbers are formatted to have only two decimal places in the output.
https:
www.mathsisfun.com/money/interest.html
p4-desc.md 10/31/2020
7 / 10
Grey Gradient
If the user selects 4 in the initial dialog box, your code will render a single-column, multi-row table, of which rows
have background colors in different grey-scale.
The user will be prompted to enter two integers. The first prompt is to receive the maximum
ightness value
of grey colors that will be rendered in the table. Note that a grey color can be represented by giving an
identical values for the red, green, and blue component in a RGB color -- each color component can have a
value between 0 and 255. The second prompt is to enter the difference of grey-scale values in two adjacent
ows. Let's call the first value $x$ and the second value $y$.
Assume that the user will enter only