dishamodi0910 · MohanRamSridhar · May 20, 2024 · May 20, 2024 · May 20, 2024 · May 20, 2024
diff --git a/New_APIs/Codeforces_API/README.md b/New_APIs/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/New_APIs/Codeforces_API/chart.js b/New_APIs/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/New_APIs/Codeforces_API/index.html b/New_APIs/Codeforces_API/index.html
@@ -0,0 +1,53 @@
+DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Codeforces Rating Changes</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+    <canvas id="ratingChart" width="800" height="400"></canvas>
+
+    <script>
+        // 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));
+    </script>
+</body>
+</html>