CPSC 1520 Assignment 1: Album Creator solved

Introduction This assignment builds on what you have learned in class through the exercises and assessments to this point. This will test everything up to and including making decisions. Overview 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.