Skip to content

Assignment 05

Continue with the code from Assignment 04.

Info

Due Tue 30 April 23.59**

User interaction on the page

Your final task of this assignment is to expose the declare and graduate methods you just wrote to a user of the web page:

Deliverables

  • Edit the HTML to add a form with two inputs, one for userId and one for department code. These inputs should be labeled so they are identifiable, and make sure to give them ids so you can reference them in JavaScript.
  • Add two buttons to the form, one for "Declare" and one for "Graduate".
  • In App, implement the functionality for these buttons:
    • When the user types in a userId and department code and clicks "Declare", call your app's declare method with the entered values.
    • If the declaration is successful, display an alert informing the user, including the student's name and the department name. For example, "Rudolf Schraml (rschraml) declared Computer Science!"
    • If the declaration fails, display an alert with the error message. (Note: It's not enough for the error to be printed to the console, since users won't think to look there. You must catch the error and present it via alert.)
  • Similarly, implement the "Graduate" button. This button ignores the entered userId. Upon success, display an alert listing the students who graduated. For example,

Graduates:
Alexander Moore (amoore)
Emmy Eckstein (eeckstein)

(You can use \n to add a newline in alert messages.)

Some notes on this task:

  • You do not have to lay out the form controls in any particular way and are not expected to add any styling. As an example, here's how I laid them out: Screenshot of form controls and buttons
  • You will need to add additional methods to App and are free to add instance variables as well.
  • Recall from lecture 6 that you can access the forms on a web page using document.forms, and you can reference the controls of a form using their id or a property of the form.
  • Note that a <button> inside of a <form> defaults to having type="submit", meaning it will refresh the page when clicked (Default Behaviour). You'll want to change its type to button to avoid this, or you pass event to your handler function and declare event.preventDefault.
  • Don't forget to bind your event handlers! As seen in lecture 06, it is best practice to do this in the constructor (and this is preferred)

Submitting

Upload your final assignment into a new folder in your public_html on your meise. Finally, provide a link named Assignment 05 on your personal page which refers to the index.html file in the folder. I will visit your site and check the final submission.