A12 – Keypad

For A8 you created a keypad in an HTML file named positioning.html. For this assignment, we’ll add a JavaScript file to make the keypad functional.

Copy positioning.html to a new file named keypad.html.  Similarly, copy positioning.css to a new file named keypad.css.  Create a new file named keypad.js in your csci240/javascript directory.  Modify keypad.html so that it references keypad.css and keypad.js.

The web page should display a 12 button panel with buttons labeled 0 through 9, “Enter”, and “Clear”. Below the buttons is an element with a rounded border that we’ll refer to as the display.

Feel free to modify the keypad’s appearance, but the functionality should meet the specifications below.

For this assignment, add code to your files so that your web site works as follows:

  1. Replace the “Clear” button label with “Back”.
  2. Initially, the display shows “Enter Code”.
  3. If the display shows “Enter Code” and a numeric key is pressed, “Enter Code” is replaced by the numeric symbol for the numeric key that was pressed.
  4. If the display shows a sequence of numeric symbols and a numeric key is pressed, the numeric symbol for the numeric key that was pressed is added to the sequence of numeric symbols in the display.
  5. If the display contains a sequence of 6 numbers and the user presses a numeric key, the display is cleared and “Enter Code” is shown in the display.
  6. If the display shows a single number and the “Back” button is pressed, the number is replaced by “Enter Code”.
  7. If the display shows a sequence of more than one number and the user presses the “Back” button, the last number in the sequence is removed.
  8. If the display contains the sequence “021814” and the user presses “Enter”, the display reads “Access Granted” and a new window opens to another web page.  You choose which page.
  9. If the display contains a sequence of numbers other than “021814” and the user presses “Enter”, for 1 second, the display reads “Access Denied” in red font. After 1 second, the display is changed to “Enter Code” in the default black font.

© 2018 – 2021, Eric. All rights reserved.