6. (1.0 mark) At Completed Courses route (the URL must be '/yourusername/CompletedCourses', E.g:'/ManNLT123456/CompletedCourses'), it displays the list of all completed courses by list (percent-Learning = 100, or isCompleted = true). Each course should contain the information: courseName,courselmage, courseType, and percentLearning. Automate sort courses descending (10 -> 1) by id property. When you click the image of a course, the view switches to the Course Detail page.
Task 3.
7. (1.0 marks) At Course Detail route, display all the information of course: courseName, courselmage,percentLearning, isCompleted, courseType. Design and arrange this component as good as possible.
8 . (1.5 marks) Create an Add route with the requirements:
✓ Create a form and validate all data.
✓ All fields are required.
✓ courseName must more than 1 words, uppercase (E.g.: MATH).courselmage must be a URL.
✓ percentLearning is number, min is 1, max is 100. It should be a progress bar.
✓ isCompleted is a switch control. It is disabled and set to FALSE by default, it is automatically changed to TRUE when the percentLearning = 100.
✓ course Type is a select control which contains 3 values: Data Science, Security, Web/Design.
9. (0.75 mark) At All Courses route implement the delete action.
With delete function, you must confirm before implementing. After deleting successful, showing a notice (modal, alert, toast...) and the list of courses will reload.
10. (1.25 marks) At All Courses route implement the update action. Implement the update action by click to a button for updating a Course. With the update function, the same validation requirements as the add function.
-The end of test-
+ 100%
Zoom
Close
