diff --git a/Existing_API_Collection/Codeforces_API/README.md b/Existing_API_Collection/Codeforces_API/README.md new file mode 100644 index 0000000..ae9988e --- /dev/null +++ b/Existing_API_Collection/Codeforces_API/README.md @@ -0,0 +1,24 @@ + +# Codeforces Rating Changes Visualization + +### Overview + +This project provides a simple web-based visualization tool to track and visualize changes in a user's rating on Codeforces, a popular competitive programming platform. It utilizes the Codeforces API to fetch user rating data and displays it using Chart.js library. + +### Features + +- Fetches user rating data from Codeforces API using a provided handle. +- Displays rating changes over time in a line chart. +- Customizable chart with options to adjust chart size and appearance. + +### Getting Started + +1. **Obtain a Codeforces API Key:** Before using this tool, you need to obtain a Codeforces API key. You can get it by registering on the [Codeforces website](https://codeforces.com/apiHelp) + +2. **Replace API Key and Handle:** In the provided HTML file, replace `'YOUR_API_KEY'` with your actual Codeforces API key and `'Your_Codeforces_Handle'` with the Codeforces handle for which you want to visualize rating changes. + +3. **Run the HTML file:** Simply open the HTML file in a web browser. It will fetch the user's rating data from Codeforces and display it in a line chart. + +### Dependencies + +- Chart.js: A JavaScript library for creating beautiful charts. diff --git a/Existing_API_Collection/Codeforces_API/chart.js b/Existing_API_Collection/Codeforces_API/chart.js new file mode 100644 index 0000000..09cf961 --- /dev/null +++ b/Existing_API_Collection/Codeforces_API/chart.js @@ -0,0 +1,38 @@ +// Replace 'YOUR_API_KEY' with your actual Codeforces API key +const apiKey = 'YOUR_API_KEY'; +const handle = 'Your_Codeforces_Handle'; + +const url = `https://codeforces.com/api/user.rating?handle=${handle}`; + +fetch(url) + .then(response => response.json()) + .then(data => { + const ratingChanges = data.result; + + const labels = ratingChanges.map(entry => new Date(entry.ratingUpdateTimeSeconds * 1000).toLocaleDateString()); + const ratings = ratingChanges.map(entry => entry.newRating); + + const ctx = document.getElementById('ratingChart').getContext('2d'); + const myChart = new Chart(ctx, { + type: 'line', + data: { + labels: labels, + datasets: [{ + label: 'Rating Changes', + data: ratings, + borderColor: 'rgba(75, 192, 192, 1)', + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: false + } + }] + } + } + }); + }) + .catch(error => console.error('Error fetching data:', error)); diff --git a/Existing_API_Collection/Codeforces_API/index.html b/Existing_API_Collection/Codeforces_API/index.html new file mode 100644 index 0000000..05f4b5d --- /dev/null +++ b/Existing_API_Collection/Codeforces_API/index.html @@ -0,0 +1,53 @@ +DOCTYPE html> + + + + + Codeforces Rating Changes + + + + + + + + diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md index 4c99869..8dd92a5 100644 --- a/Existing_API_Collection/README.md +++ b/Existing_API_Collection/README.md @@ -17,3 +17,5 @@ |[Bored API](./BoredAPI/)|Bored API is a versatile tool designed to provide users with random activity suggestions when they're feeling bored. With this API, users can access a wide range of activities to spark inspiration and alleviate boredom. From creative hobbies to outdoor adventures, Bored API offers something for everyone.| |[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images | |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.| +|[Codeforces API](./Codeforces_API/)| This API helps user fetch their Codeforces rating changes and then display it in any website of their choice.| +