This is a coding assignment involving html, css, and javascript code. I have attached the full and entire directions of the assignment that will tell you everything you need to know. Let me know if there are any questions, thank you!
p4-desc.md 10/31/2020 1 / 10 CMSC 122 Fall 2020 - Project 4 Practicing JavaScript Conditionals and Loops Assigned Points: 12% of course grade Assigned Date: November 1, 2020 Due Date: November 20, 2020 11�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 browser. 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 browser. 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 break 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 box 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 + 1)) + low; } 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 enter 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 or 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 be 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 render Invalid row or column value!! in the document. Assume that the user will enter an integer in the row and column prompt boxes. The grid width and height should change as you change the browser window size. That is, each grid entry must shrink or grow, depending on the browser window size. This can be achieved by setting the width and height of the grid using a relative unit of the browser width and height. Put some spacing between the border of the grid and the browser window border as seen in the video. The grid of colors must be centered horizontally in the browser. 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 100 -- both 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 correct or not. There are two cases: If the user's guess is incorrect, 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 correct 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 correctly on the first try, your program should output "Wow! You gave correct value at one attempt!!". Otherwise, display "Correct! You attempted $n$ times.".) where $n$ should be replaced with the number of guesses until the correct value is given. In the example above, user enters the correct answer after entering 50 and 60. Simple Interest Calculator 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 brightness 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 rows. Let's call the first value $x$ and the second value $y$. Assume that the user will enter only