wasim7raja10 / codeforces-tracker

It is a Codeforces analytics visualizer.

Welcome to Hacktoberfest 2021, Contributors

Codeforces-tracker

This is code repository for a simple analytics visualization site for Codeforces online judge users using Codeforces API.

Prerequisites:

• Install git in your machine.
• Have basic command line experiance.
• have knowledge of basic Javascript, HTML, CSS

Resources to follow to contribute to this project or any open source project

1. Read this guide to open-source contribution.

2. To add the necessary contribution that will get your Pull Request accepeted refer CONTRIBUTING.md file.

Rules and Regulations

1. Pull requests can be submitted to any opted-in repository on GitHub or GitLab

2. The pull request must contain commits you made yourself.

3. If a maintainer reports your pull request as spam, it will not be counted toward your participation in Hacktoberfest.

4. If a maintainer reports behavior that’s not in line with the project’s code of conduct, you will be ineligible to participate.

5. To get a shirt, you must make four approved pull requests (PRs) on opted-in projects between October 1-31 in any time zone.

6. This year, the first 50,000 participants can earn a T-shirt.

Examples of low quailty contributions

• Pull requests that are automated e.g. scripted opening pull requests to remove whitespace / fix typos / optimize images.

• Pull requests that are disruptive e.g. taking someone else's branch/commits and making a pull request.

• Pull requests that are regarded by a project maintainer as a hindrance vs. helping.

• Something that's clearly an attempt to simply +1 your pull request count for October.

• Last but not least, one pull request to fix a typo is fine, but 5 pull requests to remove a stray whitespace is not.

codeforces-tracker's Issues

Add drop down year menu in heatmap so that heatmap data update according to the user select the year

Like this

You can check out the Codeforces heatmap how data update in heatmap at this link https://codeforces.com/profile/tourist

Add Stats and Problems card on the sidenav.html

1. Use bootstrap appropriate components if necessary to make it responsive.
2. Use appropriate HTML tags and attributes so that the data can be updated.
3. on the left-hand side of the card you can see two tabs, both tabs have exactly the same data headings like "Tried" "Solved" but data will be different. So, clicking on the other tab should show the new data.
4. refer to drive for the whole UI

Assign value of input(user handle in home page) in a javascript variable on clicking submit button.

Fix hover effect on the link of sidenav

While hovering on the link of the side-nav, the icon is not affected while it is expected to show effect. Fix this bug.

Make heat map responsive

1. The card should be responsive so that it looks nice on mobile. (add horizontal scroll for mobile)
2. The chart should be readable on mobile.

Set up Axios and get data from Codeforces API

Hey @wasim7raja10 , On running the HTML file & entering the user handle, no data is shown. Can you tell me if I did something wrong or the data part is not fixed.

add bubble chart card in sidenav.html

1. Size of the card should be flexible with the size of the bubble.
2. The card should be responsive so that it looks nice on mobile. (add horizontal scroll for mobile)
3. The chart should be readable on mobile if there are lots of data.
4. label color and text should match with the bubble color and text.

refer UI of the web app -> drive for the complete layout

Add Pie chart in the side.nav

1. Use bootstrap appropriate components if necessary to make it responsive.
2. Use appropriate HTML tags and attributes if required so that the data can be updated.
3. Use Google chart for the pie chart (read CONTRIBUTING.md )
4. refer to drive for the whole UI

Add profile Card in sidenav.html

1. Use bootstrap appropriate components if necessary to make it responsive.
2. Use appropriate HTML tags and attributes so that the data can be updated.
3. animating the header is not a priority. use an image instead if you can't animate it.
4. link it to the "profile" anchor tag in the side-nav.
   refer to drive for the whole UI

add footer in sidenav.html

just include the GitHub icon on socials and add this repo link to it

Add heat map in sidenav.html

1. The card should be responsive so that it looks nice on mobile. (add horizontal scroll for mobile)
2. The chart should be readable on mobile.
3. add different shades of purple for the count of activities in each day. The higher the number, the denser the color.
4. add appropriate HTML tags for the data below the chart to be updated using DOM.

refer UI of the web app -> drive for the complete layout

add the histogram in sidenav.html

1. Use bootstrap appropriate components if necessary to make it responsive. Both cards should be aligned vertically on mobile.
2. Use appropriate HTML tags and attributes if required so that the data can be updated.
3. Use Google chart for the histogram chart (read CONTRIBUTING.md )
4. refer to drive for the whole UI

Add title bar in pie chart

• Add title bar with the title in a pie chart
• Change the position of labels from left to right
• Both pie chart cards will align between the width of the heatmap

Now

After completing card will look like this with the title and labels will be in the right side