CIS 3368 – Homework 3: 10/21/2023 – 11/04/2023
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
CIS 3368 – Homework 3: 10/21/2023 – 11/04/2023
EJS, API and Forms
For this homework you will need to call the API provided by dummyjson to query products. In particular, we will use this endpoint:
https://dummyjson.com/products
This REST endpoint responds with a JSON response that contains some mocked up products with various attributes of information. We are in particular interested in three attributes: The product's title, the price, and the discountpercentage (underlined in red in the screenshot):
We are interested in listing all the items on a page, displaying their name, price, discount in %, and the calculated final price, as soon as a user presses the LOAD button. Note: All this info should not be shown before the LOAD button is pressed!
Naturally we don't want to present the user with JSON formatted data, so you will need to present the JSON data to the user in readable and formatted HTML (e.g. in individual labels, in form of a list, as individual paragraphs, etc.) The presentation choice is yours.
The user should see a headline on the website stating that this is a website to list all inventory products and their prices. Beneath there should be the button that says “Load” .
If you use the EJS template from class, make sure you remove the parts of the UI that aren't needed. For instance, there should not be an About page with cars or mascots in your project, and neither the variables for those. Only code that's part of the assignment should be there. If you start this project from scratch without the class template, then you don't have to worry about that.
A sample mockup screen for this assignment could look like this:
EXTRA CREDIT: For every item, add the image linked in the “thumbnail” link as an image of size 50px by 50px.
Deadline is November 4th 2023, midnight (23:59).
As always, submit often and early.
You do not have to comment the HTML (.ejs) files, only the JavaScript code.
Basic Grading rubric for this homework
|
Item |
Points |
|
UI setup and controls |
15 |
|
Code for API call on server.js |
25 |
|
Logic to parse API JSON result for the required information, calculate the final prices, and display information on UI |
50 |
|
Properly committed and pushed to Github Classroom (at least 2 commits) & Link provided on CANVAS |
10 |
|
Extra Credit (showing images) |
10 |
|
Total |
100 (110) |
Make sure your project compiles and runs.
Make sure your submission contains ALL files needed for the project to run, except for the node_modules folder. Do NOT commit the node_modules folder or you will forfeit points. If the project doesn’t run, you will forfeit points.
If your project contains unused code or variables from the template, you will forfeit points.
To set up the remote GitHub repository for your submission correctly, please follow the link below to accept the assignment via GitHub classroom.
You will then have an empty repository in GitHub.
https://classroom.github.com/a/8qTy29qv
What to Turn in:
Commit your source code to your private repository in the GitHub classroom.
Personal repos outside of GitHub Classroom will NO LONGER be accepted.
Do not zip the files together.
Your GitHub repository should show at least two meaningful commits illustrating how you worked through the problem.
Submit the link to your GitHub repository via CANVAS.
2023-10-31