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:
Prevent the default action from occurring.
Retrieve the form input, that is, the
name
andvalue
of eachinput
element excluding the submission button.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.