JavaScript DOM

Due: 11:00pm, Friday April 8, 2022

Description

The goal for this assignment is to use the JavaScript DOM to replicate a static HTML page. This assignment contains the following files: create_account.html, example.html, code.js, and style.css. You need to edit the code.js file.

The following HTML needs to be generated using the DOM and appended to the body element:

<h1>Create an account</h1>

<form action="create_account.html" method="get">
  <label for="username">Name</label>
  <input type="text" name="username" id="username" required/>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" required/>
  <label for="password">Password</label>
  <input type="password" name="password" id="password" required/>
  <input type="submit" value="Create Account"/>
</form>

The example.html file contains the same static HTML as above so you can view the result in a browser.

The next part of the assignment is to add an event listener for the “submit” event to the form element that does the following:

1. Prevent the default action from occurring.

2. Retrieve the form input, that is, the name and value of each input element excluding the submission button.

3. Put the data into a JavaScript object and log it to the console.

Turning in the Assignment

For this assignment, you must turn in a zip file of a directory named assignment6 containing all the files needed run the code in the browser. Submit the zip file to the appropriate folder on D2L.

Grading Criteria

Grading (out of 100 points):

• 10 points – Documentation
  • 10 – complete documentation that follows the standards
  • 5 points – incomplete documentation and/or documentation that does not follow the standards
  • 0 points – no documentation
• 60 points – DOM Implementation
  • 60 points – correct implementation
  • 30 points – partially correct implementation
  • 0 points – incorrect implementation
• 30 points – Even Listener implementation
  • 30 points – correct implementation
  • 15 points – partially correct implementation
  • 0 points – incorrect implementation

Note: the use of innerHTML will be considered incorrect for this assignment.