In this assignment, you will use Vue to build an application that uses an API to browse XKCD comics.
To start the lab, you must follow this GitHub Classroom link. This will create a private repository for you using our classroom site. We will only grade repositories created and submitted this way.
Once you "Accept the assignment" on GitHub Classroom, it will create a new repository for you and grant you access to it on GitHub. In order to start working on the lab, simply clone the repository to your laptop or other working environment.
Use the tutorial to create the application. This will help you create most of the functionality. Once you are done, your lab should look like this:
Once you complete the tutorial, add the following functionality:
Add buttons to navigate to the first comic and the last comic.
Add the current date and time to every comment that is created, then show the current date and time after or below the author's name. You may want to use the moment library to help you format the date and time.
Add the ability for people to rate the cartoon. Display the average rating accumulated so far. The average should be separate for each cartoon.
Use this star rating library for Vue.
Use this star ratings tutorial for help.
Change the options on the star rating library so that it increments in steps of 0.5, does not show the current rating, and uses red stars.
When you're done, it should look like this:
In a footer, you must include a link to your GitHub repository, which must be stored in GitHub Classroom.
On Canvas, submit the URL for your website, which should be running on your DigitalOcean server.
When we grade these labs, we will award points using the following rubric:
Item | Points |
---|---|
The material in the tutorial works | 70 |
Buttons for first and last comic work | 10 |
Date and time for comments work | 10 |
Star ratings work | 10 |