Assignment 1: Build Analytics Page
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. Please use the code below and place at the beginning of your JavaScript code to retrieve the JSON. 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": {
"ADEIWESDSEEWEEWEDS": {
"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
}
]
},
"XSPEDSEFESEFFEFEOOSF": {
"name": "Kay",
"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
}
]
},
"PODOFEKWODLSLFEWOOEFK": {
"name": "Kay",
"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 Ryan 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
- You will now need to enable Github Pages on your repository. This enables your repo to be viewable on the internet:
- If you navigate to your newly created repository
- Then click on “Settings” on the top right
- Scroll down to “GitHub Pages,” click on “Source” and then “master” and click “Save
- Above you should see the url to your website.
- Ensure that in the root of your repo you save a file called “index.html”. If you do that, navigating to the link that you see above will load that webpage.
- You can edit your page by going to your repo, and scrolling down and click the “Repl.it” link. This will spin up an online editor where you can edit the files in your repo and commit them to github.
- To save, you need to click on the second icon to the left hand side, write a message and click “Commit”. You have now committed your work to the git repository.
- If you go to the link where your repo was published you should see the changes
Submission
Please copy the URL of your repo on GitHub and submit it to Assignment 1 on BCourses: https://bcourses.berkeley.edu/courses/1498827/assignments/8169493