Description
You are tasked with using your new found HTML, CSS, and JavaScript skills to build a single page analytics page that will display statistics drawn from a to-do list application.
NOTE: This Assignment is intended to be done with pure HTML/CSS/JavaScript, meaning please do not use React.
Your single page application will send a single HTTP request on page load to a task manager application that I have hosted on the internet that will return a JSON response with statistical information. I have placed the code below in a starter template for this assignment so when you load your assignment this code will already be in place. Once you downloaded your code, Please write your code in the designated section:
let getSummaryData = async () => {
let response = await fetch('https://raw.githubusercontent.com/UCB-INFO-FRONTEND-WEBARCH/assignment-solutions/master/solutions.json');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
return response.json();
}
}
getSummaryData().then((response) => {
/* This is where your code should be */
console.log(response);
/* End section where your code should be */
});
The JSON blob will have the following structure (this is a sample, not necessarily the exact data that you will have):
{
"summary": {
"count_tasks_created": 45332,
"count_tasks_deleted": 3454,
"count_tasks_edited": 40002,
"top_five_tags": [
{
"name": "home",
"count": 50
},
{
"name": "impt",
"count": 35
},
{
"name": "recurring",
"count": 20
},
{
"name": "!",
"count": 18
},
{
"name": "school",
"count": 15
}
]
},
"summary_by_user": {
"kayashaolu": {
"name": "Kay",
"count_tasks_created": 60,
"count_tasks_deleted": 0,
"count_tasks_edited": 15,
"top_five_tags": [
{
"name": "home",
"count": 25
},
{
"name": "good",
"count": 17
},
{
"name": "school",
"count": 15
},
{
"name": "recurring",
"count": 5
},
{
"name": "impt",
"count": 2
}
]
},
"rishabhthakur": {
"name": "Rishabh",
"count_tasks_created": 60,
"count_tasks_deleted": 0,
"count_tasks_edited": 15,
"top_five_tags": [
{
"name": "home",
"count": 25
},
{
"name": "impt",
"count": 20
},
{
"name": "!",
"count": 18
},
{
"name": "recurring",
"count": 10
},
{
"name": "cool",
"count": 7
}
]
},
"aayushisanghi": {
"name": "Aayushi",
"count_tasks_created": 60,
"count_tasks_deleted": 0,
"count_tasks_edited": 15,
"top_five_tags": [
{
"name": "impt",
"count": 13
},
{
"name": "amazing",
"count": 12
},
{
"name": "schoolnight",
"count": 6
},
{
"name": "recurring",
"count": 5
},
{
"name": "homeschol",
"count": 4
}
]
}
}
}
What you would be tasked to do is to create a one page HTML file that would accomplish the following:
1. On page load, run the JavaScript function to return an object that contains the information above in the JSON blob
2. Parse that object and create a single html page with the content in this JSON file. You have some freedom on the design of the page, but it must contain the following elements:
– Overall Summary: This should display the overall total number of tasks created, deleted, and edited, as well as the overall five most popular tags and how many tasks were tagged with them.
– Summary by User: This should be a table that lists the name of the user and how many tasks they have edited, created, and deleted, and their top five tags, each with the number of tasks.
3. Note: You may not use React for this assignment. This assignment is to gain experience building an application using pure HTML/CSS/JavaScript
In order to get set up you will need to do the following
- You will need a Github account and will need to be added to the UCB-INFO-FRONTED-WEBARCH organization. Please send our TA your Github username (or sign up here: https://github.com/signup).
- Please wait for an email asking to join the organization and accept the invitation.
- Then please click on this link to create your own repository
- Go to your repository and find the green Code button, click it, and select Download Zip
- Note if you are familiar with Git and GitHub, feel free to clone your repository.
- Open up Microsoft Visual Code (or your favorite editor) and edit your files. View your work in Google Chrome and be sure to use the right click -> inspect area to look at the DOM and click on the Console tab to check any errors
- Work on the assignment
Extra Credit
- For the user summary table, if someone clicks on any row, have the entire row highlighted yellow and bolded. The same click should revert any other row back to its default state. Only one row should be highlighted at the same time.
- Add a percentage to each tags count using the following formula:
- (tag count)/ (count_tasks_created – count_tasks_deleted)
- Note: must be a percentage, not a decimal, and must add the “%” at the end
- Persist the getSummaryData() data in localStorage so that if for some reason your getSummaryData() function fails, you can still load the data from localStorage. If a failure to retrieve the analytics data occurs, add a message at the top of the page saying “Loading from stale data“.
Submission
- When you are ready to submit:
- Go to your repository
- Click on Add File
- Click on Upload Files
- Add all of your files (at least the html, css, and js file) to your repository
- If you are familiar with Git and GitHub, you could commit and push your changes to your repository
- Then go to BCourses, find the Assignment 1 assignment and submit, adding the url to the home page of your repository in the text box and click submit