Description
For this assignment, you’re required to finish the application “Album Creator.” This application needs to
be able to create album cards with a title, description, and some cover art.
There are a few requirements in the application for albums to be valid. You need to have selected
album cover art. The title needs to be between 0 and 60 characters in length. The description needs to
be between 0 and 255 characters in length.
Below are screenshots of your application to refer to while building this assignment.
Please refer to the “Required tasks” section to see how to build this assignment.
Sample Functionality Example
Below are two album covers that have been successfully created.
Once you add an album card with the title “My Favourites” successfully, it should look like the image
below.
Invalid Form Submission Example
Below are some examples of what invalid form submissions should look like.
Required Tasks
• An Event Listener listens to the “submit” event on the form.
o Prevents the form from submitting to the server.
o Gets the “album title”, “album description”, and “album art” from the “elements”
attribute from the “event.target” element through the “elements” property.
o Validates the inputs that you got from the form element (see “Validation the inputs”
below)
▪ Remove the is-invalid class from all inputs of the form that are correct.
o Creates an album cover (html in the js) only if the validation is successful.
o Resets the values if form validation is successful.
• Validation of the inputs
o An album title validation function ensures the text that it’s not empty and less than 60
characters and displays an error if it’s not valid.
▪ Adds the “is-invalid” class to the album title form input element if not valid.
o An album description validation function ensures the text that it’s not empty and less
than 255 characters and displays an error if it’s not valid.
▪ Adds the “is-invalid” class to the album description text form input element if
not valid.
o An album art validation function ensures that a gif is selected and is not empty.
▪ Adds the “is-invalid” class to the album art form input element if not valid.
o An overall validation function which will take the three input elements and validate each
input element using the functions above. This function should return true if valid and
false if the form is not valid.
• Adding an Album Card
o A add album card function is created that takes three parameters the title, description,
and album art values.
o Adds the most recent Album will be added to the top left and shift the rest albums to
the right (this functionality is shown in the example of functionality).
• Other requirements
o The album title input form element should be focused on (the cursor should be on this
element).
• Bonus
o When the user changes any input
o Note: No marks here if there are errors in the project.
• The code style will be specified by your instructor.
Marking key
Tasks Grade Marks Total
Form Event Listener
• Javascript file linked and code can run.
• Event listener added and page does not refresh.
• Overall form validation function is called.
• Form does not submit if not valid and returns early.
• Album Covers are added only if valid.
• Form element values are reset if successful.
• Album title form element is focused
1
1
1
3
5
1
1
Validation of Inputs
• Validates title input successfully with the validation functions (needs to be a
separate function that returns true or false for full marks)
• Displays the errors at the right time if they’re not valid and removes the error
messages at the right time.
• Validation function
5
5
1
Adding Album Covers to the page
• Adds Album cover card successfully with the correct html using
template strings.
• Album art does not break and use relative file paths for the
image src.
• Most Recent Adds Album cover at top of the top left of the list
of cards.
3
1
1
Bonus
• When the user types anything in the form all elements are
validated.
• When the select changes after a form all elements are
validated.
3
Code
• Code Formatting and Style
• Errors running the project
-3
-3
Marking Rubric
Marks 5 Marks Criteria
5
Task was completed with the highest of proficiency adhering to
best practices and followed subject matter guidelines all tasks
were completed to a professional standard.
4
Task was completed well some minor mistakes. Well above
average work shows good understanding of the task and high
degree of competence
3
Satisfactory work some features missing or incorrectly
implemented. Show a moderate level of understanding in the
task with room for improvement.
2
Below average work. Task was poorly complete. Show
understanding of the task and the requirements to implement
but implementation was poorly executed.
1
Some of the task was completed. Showed a lack of
understanding in the subject matter and very poorly executed
0
Not completed.
Marks 3 Marks Criteria
3 Proficient shows a high degree of competence in completing
task.
2 Capable above average degree of competence in completing task
1
Satisfactory shows a satisfactory degree of competence in completing
task.
0 Shows a limited degree of competence in completing task.
Marks 1 Marks Criteria
1 Task Completed satisfactorily
0 Task was not executed.