This is a html javascript assignment. I have attached the full directions and a video of how the program should look and function. Please make sure everything is followed per the directions.
CMSC 122 Fall 2020 - Project 5 B-I-N-G-O Due Date December 14 by 11�30 PM Assigned Points: 100 Objective This project is to practice: Event-Driven Programming Functions Arrays Forms Dynamic updates to web page elements (modifying attributes and "innerHTML") To review HTML, CSS, and JavaScript features Overview For this project you will write a B-I-N-G-O game. You will use various HTML form elements to control the display of the Bingo board (e.g., font, font color, and so on), and will use functions (1) to highlight called numbers on the board, (2) to determine if a bingo is found, also (3) to highlight cells when there is a Bingo. You will complete three files -- p5.html, p5.css, and p5.js. The initial web page will look like as seen in the screenshot below. You will render form elements using HTML, and will use JavaScript code to render the Bingo board (use a table) dynamically. The project folder includes two demonstration videos. Use the video to understand how your program should appear and function. This project is a comprehensive edition of the topics we have discussed this semester. Start working on the project as early as possible. Office hours get busy during the few days before the project is due, and you may not get the help you need if you wait too long. As always, we will not grant project extensions due to technical problems on your end. Do not attempt to copy code from any sources. You must complete this project by yourself. We check the code similarity. Students who are found to have collaborated on the project will be reported to the Office of Student Conduct for the violation of academic dishonesty. Requirements Difference to the typical B-I-N-G-O game Link p5.js at the bottom of the body in p5.html. This is 1-dimensional version. No free entry on the board A number can appear multiple times. Numbers in the board is between 1 and the board size. For example, if the size is 5, your program will only generate random numbers between 1 and 5 and use for the blocks on the board. Form Your HTML should render a form as seen in the screenshot. It is allowed to use different colors for the three buttons in the screenshot and the text "Calls" below the board. It is allowed to apply some spacing (i.e., padding or margin) between form elements and the boards. The baseline -- loading your HTML file should render a page that looks very similar to the screenshot. Bingo Board Initialization The bingo board will be initialized with numbers between 1 and the board size. For example, if the board size is set to 10 (the default), the board will contain numbers between 1 and 10, both inclusive. A number can appear multiple times -- e.g., 9 and 3 in the screenshot. The numbers on the board should be randomly generated whenever p5.html is reloaded -- by refreshing the tab in the Chrome browser. Calling a Number When the user clicks the Call button, your program must: Generate a new random number between 1 and the board size, both inclusive and append the number to the Call-List (below the board) as seen in the demonstration video. When the called number is appended to the Call-List, the color of the new number should also be determined randomly. You will generate a value between 0 and 255 for each of the red, green, and blue color and use the generated values for the color for the number -- i.e., use rgb function to set the color. Note that the colors of the numbers previously appended to the Call-List do not change. Consider appending the new number to the innerHTML value of the HTML element used to contain the Call-List. The board cell (or cells) that contains the called number should be highlighted by setting the background color of the cell(s) to blue. Note that four corners of each cell is rounded. Got a Bingo!! We say that a bingo is found, when 5 or more consecutive cells are highlighted. If a bingo is found, you must: Change the background color of the first five highlighted cells to magenta. (See the demonstration video.) The text "Calls" below the board should be modified to show how many numbers are called -- e.g., 7 Calls. (See the demonstration video.) The three buttons should be hidden immediately after a bingo is found. Then, after 1.5 seconds, a bingo image (bingo.svg) should be displayed in the area where three buttons were displayed, as seen in the demonstration video. Use a CSS rule to display the image in the right position and size as seen in the demonstration. Resetting the Bingo Game If the user clicks the Reset button, you will reset the game and display the default display. In specific, Board size text box should have 10. The Red radio button should be checked. The "Arial" font should be selected. "20px" is selected. The board should be rendered using the default color and the font choice -- the game is reset, so cells must not be highlighted. Radio Buttons for Colors Make the radio button next to the text Red selected by default. This means that all numbers on the board should be rendered in red color. The color of the numbers in the cells should change immediately when the user selects the radio button for green or blue. The user should not be allowed to check two or more radio buttons at any time. Selection Box for Fonts The font selected in the dropdown select box applies only to the numbers on the bingo board (not to any of the controls). The font for the numbers should change immediately when the user selects a font or font size in the dropdown boxes, even though the user does not click the Update Bingo Board button. Add three fonts: Arial, Times New Roman, and Courier New. The font sizes that you should use are 10px, 20px, and 30px. Text Box for Receiving Board size and Updating Bingo board To update the board size, the user will enter a number in the text box (top left corner in the fieldset) and then click the Update Bingo Board button. The minimum and maximum size of the bingo board should be 4 and 21 respectively. When the user clicks the button, your program should check if the value in the textbox is within the range. If it is outside the range, do not make any changes to the board, but instead display an alert box with the message: Size must be greater than or equal to 4 and smaller than or equal to 21. You can assume that the user will enter only an integer. Suggested Coding Practices You may start by writing the HTML document with form design. If you need to implement a feature, check if there is a lecture example that implements similar features. Test with a small example before updating your code. Give the form first and then put JavaScript code below the form. It is strongly recommended to use functions extensively. Implement incrementally - (1) Split the functionality of the program into small chunks, (2) implement the chunks one by one in functions, (3) test the correctness and (4) move to the next chunk. Use debugging. Finding bugs would be really difficult and time-consuming without relying on the tool support. Do not mix functions with statements that are outside all functions. For example, in the following code, two functions hello and world are mixed with other statements. var x = 3; function hello(){ ... } document.writeln(x); // this should be moved up before the function hello function world(){ ... } hello(); // move this up before function definitions world(); // move this up before function definitions Instead, give functions separated from other JavaScript statements. The example code above can be rewritten as follows: var x = 3; document.writeln(x); hello(); world(); function hello(){ ... } function world(){ ... } Do not use nested functions if you do not understand the semantic of nested functions. For example, in the code fragment below, the function world is defined inside the function hello. var x = 3; document.writeln(x); hello(); function hello(){ alert("Hello"); function world(){ // Don't do this alert("World"); } world(); } Instead, you may write as follows: var x = 3; document.writeln(x); hello(); function hello(){ alert("Hello"); world(); } function world(){ alert("World"); } General Requirements Do NOT put style rules or JavaScript code in the HTML file. Submissions that gives CSS style rules or JavaScript code in the HTML file will be penalized. In-line CSS style rules are allowed if they are added by the JavaScript code. You must create three files named: p5.html, p5.css and p5.js. The JavaScript code must be given in p5.js, and be linked in the HTML document. The title that appears in the browser tab should say Bingo. At the top of every file (HTML, JavaScript, and CSS file), put your name and directory ID as comments. Put reasonable comments for every function in your implementation. Never hard-code your program. We will assign 0 points for the hard-coded functionality in your submission. Do not attempt to copy code from any sources. You must complete this project by yourself. We check the similarity. Students who are found to have collaborated on the project will be reported to the Office of Student Conduct for the violation of academic dishonesty. Do not share your project. Especially, you must not post your work in any on-line sites publicly accessible. You must NOT use any authoring tool (e.g., DreamWeaver, etc.) which generates the HTML code for you. Use a pure text editor. Both your HTML and your CSS must be validated according to these validators: HTML validator: http://validator.w3.org/#validate-by-upload CSS validator: http://jigsaw.w3.org/css-validator/#validate_by_upload If you are getting mysterious errors that you cannot diagnose, meet a TA or me during office hours. You must use proper indentation in your code (HTML, CSS, and JavaScript). I strongly suggest you format your code using an automatic formatting tool in VSC.