├── public
    ├── Screenshot 2024-10-28 235216.png
    └── index.html
├── vercel.json
├── package.json
├── index.js
├── leetcode.js
└── Readme.md


/public/Screenshot 2024-10-28 235216.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faisal-shohag/leetcode_api/HEAD/public/Screenshot 2024-10-28 235216.png


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": 2,
 3 |     "name": "leetcode_api",
 4 |     "builds": [
 5 |        { "src": "index.js", "use": "@vercel/node" }
 6 |     ],
 7 |     "routes": [
 8 |        { "src": "/(.*)", "dest": "/index.js" }
 9 |     ]
10 | } 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "dependencies": {
 3 |     "cors": "^2.8.5",
 4 |     "express": "^4.18.2",
 5 |     "express-rate-limit": "^7.5.0",
 6 |     "node-fetch": "^3.3.2"
 7 |   },
 8 |   "name": "leetcode_api",
 9 |   "version": "1.0.0",
10 |   "description": "leetcode api",
11 |   "main": "index.js",
12 |   "scripts": {
13 |     "test": "echo \"Error: no test specified\" && exit 1",
14 |     "start": "node index.js",
15 |     "server": "nodemon index.js"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/faisal-shohag/leetcode_api.git"
20 |   },
21 |   "keywords": [
22 |     "leetcode"
23 |   ],
24 |   "author": "faisal_shohag",
25 |   "license": "ISC",
26 |   "bugs": {
27 |     "url": "https://github.com/faisal-shohag/leetcode_api/issues"
28 |   },
29 |   "homepage": "https://github.com/faisal-shohag/leetcode_api#readme"
30 | }
31 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const express = require('express')
 2 | const app = express();
 3 | const cors = require('cors')
 4 | const path = require('path');
 5 | const {rateLimit} = require('express-rate-limit');
 6 | 
 7 | const limiter = rateLimit({
 8 |     windowMs: 15 * 60 * 1000,
 9 |     limit: 100,
10 |     standardHeaders: 'draft-7',
11 |     legacyHeaders: false
12 | })
13 | 
14 | const specificLimiter = rateLimit({
15 |     windowMs: 1 * 60 * 1000, 
16 |     max: 10,
17 |     message: '<b>Too many requests for this route, please try again later.</b>'
18 |   });
19 |   
20 | 
21 | app.use(limiter);
22 | 
23 | app.use(express.static('public'));
24 | 
25 | app.use(cors({
26 |     origin: '*'
27 | }))
28 | 
29 | let leet = require('./leetcode');
30 | app.get('/', (req, res) => {
31 |     res.sendFile(path.join(__dirname, 'public', 'index.html'));
32 | });
33 | app.get('/:id', specificLimiter, leet.leetcode);
34 | 
35 | app.listen(3000, () => {
36 |     console.log(`App is running on port 3000`);
37 | });


--------------------------------------------------------------------------------
/leetcode.js:
--------------------------------------------------------------------------------
  1 | //graphql query
  2 | const query = `
  3 |   query getUserProfile($username: String!) {
  4 |     allQuestionsCount {
  5 |       difficulty
  6 |       count
  7 |     }
  8 |     matchedUser(username: $username) {
  9 |       contributions {
 10 |         points
 11 |       }
 12 |       profile {
 13 |         reputation
 14 |         ranking
 15 |       }
 16 |       submissionCalendar
 17 |       submitStats {
 18 |         acSubmissionNum {
 19 |           difficulty
 20 |           count
 21 |           submissions
 22 |         }
 23 |         totalSubmissionNum {
 24 |           difficulty
 25 |           count
 26 |           submissions
 27 |         }
 28 |       }
 29 |     }
 30 |     recentSubmissionList(username: $username) {
 31 |       title
 32 |       titleSlug
 33 |       timestamp
 34 |       statusDisplay
 35 |       lang
 36 |       __typename
 37 |     }
 38 |     matchedUserStats: matchedUser(username: $username) {
 39 |       submitStats: submitStatsGlobal {
 40 |         acSubmissionNum {
 41 |           difficulty
 42 |           count
 43 |           submissions
 44 |           __typename
 45 |         }
 46 |         totalSubmissionNum {
 47 |           difficulty
 48 |           count
 49 |           submissions
 50 |           __typename
 51 |         }
 52 |         __typename
 53 |       }
 54 |     }
 55 |   }
 56 | `;
 57 | 
 58 | 
 59 | // format data 
 60 | const formatData = (data) => {
 61 |     let sendData =  {
 62 |         totalSolved: data.matchedUser.submitStats.acSubmissionNum[0].count,
 63 |         totalSubmissions:  data.matchedUser.submitStats.totalSubmissionNum,
 64 |         totalQuestions: data.allQuestionsCount[0].count,
 65 |         easySolved: data.matchedUser.submitStats.acSubmissionNum[1].count,
 66 |         totalEasy: data.allQuestionsCount[1].count,
 67 |         mediumSolved: data.matchedUser.submitStats.acSubmissionNum[2].count,
 68 |         totalMedium: data.allQuestionsCount[2].count,
 69 |         hardSolved: data.matchedUser.submitStats.acSubmissionNum[3].count,
 70 |         totalHard: data.allQuestionsCount[3].count,
 71 |         ranking: data.matchedUser.profile.ranking,
 72 |         contributionPoint: data.matchedUser.contributions.points,
 73 |         reputation: data.matchedUser.profile.reputation,
 74 |         submissionCalendar: JSON.parse(data.matchedUser.submissionCalendar),
 75 |         recentSubmissions: data.recentSubmissionList,
 76 |         matchedUserStats: data.matchedUser.submitStats
 77 |     }
 78 |     return sendData;
 79 | }
 80 | 
 81 | //fetching the data
 82 | exports.leetcode = (req, res) => {
 83 |     let user = req.params.id;
 84 |     fetch('https://leetcode.com/graphql', {
 85 |         method: 'POST',
 86 |         headers: {
 87 |             'Content-Type': 'application/json',
 88 |             'Referer': 'https://leetcode.com'
 89 |         }, 
 90 |         body: JSON.stringify({query: query, variables: {username: user}}),
 91 |     
 92 |     })
 93 |     .then(result => result.json())
 94 |     .then(data => {
 95 |       if(data.errors){
 96 |         res.send(data);
 97 |       }else {
 98 |         res.send(formatData(data.data));
 99 |       }
100 |     })
101 |     .catch(err=>{
102 |         console.error('Error', err);
103 |         res.send(err);
104 |     });
105 | }


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
  1 | # LeetCode API
  2 | ![alt text](https://github.com/faisal-shohag/leetcode_api/blob/master/public/Screenshot%202024-10-28%20235216.png?raw=true)
  3 | ## Overview
  4 | 
  5 | This project provides a working Node.js API to interact with LeetCode's public GraphQL API, focusing on fetching submission calendars and other user statistics. The API simplifies querying LeetCode's data by providing structured endpoints.
  6 | 
  7 | ## Features
  8 | 
  9 | - Fetch user profile information from LeetCode
 10 | - Retrieve submission statistics and calendar data
 11 | - Simplified GraphQL querying through a RESTful API
 12 | 
 13 | ## Technologies Used
 14 | 
 15 | - **Node.js**
 16 | - **Express.js**
 17 | - **GraphQL**
 18 | - **Fetch API**
 19 | 
 20 | ## Installation
 21 | 
 22 | 1. Clone the repository:
 23 |     ```bash
 24 |     git clone https://github.com/faisal-shohag/leetcode_api.git
 25 |     ```
 26 | 2. Navigate to the project directory:
 27 |     ```bash
 28 |     cd leetcode_api
 29 |     ```
 30 | 3. Install the dependencies:
 31 |     ```bash
 32 |     npm install
 33 |     ```
 34 | 
 35 | ## Usage
 36 | 
 37 | 1. Start the server:
 38 |     ```bash
 39 |     node index.js
 40 |     ```
 41 | 2. Access the API at `http://localhost:3000/yourLeetcodeUsername`
 42 | 
 43 | ## API Endpoint
 44 | 
 45 | - **GET /:username** - Fetches the LeetCode profile and submission data for the specified username.
 46 | 
 47 | ### Example Response
 48 | 
 49 | ```json
 50 | {
 51 |   "totalSolved": 43,
 52 |   "totalSubmissions": [
 53 |     {
 54 |       "difficulty": "All",
 55 |       "count": 58,
 56 |       "submissions": 116
 57 |     },
 58 |     {
 59 |       "difficulty": "Easy",
 60 |       "count": 15,
 61 |       "submissions": 34
 62 |     },
 63 |     {
 64 |       "difficulty": "Medium",
 65 |       "count": 33,
 66 |       "submissions": 54
 67 |     },
 68 |     {
 69 |       "difficulty": "Hard",
 70 |       "count": 10,
 71 |       "submissions": 27
 72 |     }
 73 |   ],
 74 |   "totalQuestions": 2738,
 75 |   "easySolved": 12,
 76 |   "totalEasy": 686,
 77 |   "mediumSolved": 21,
 78 |   "totalMedium": 1449,
 79 |   "hardSolved": 10,
 80 |   "totalHard": 603,
 81 |   "ranking": 1139392,
 82 |   "contributionPoint": 217,
 83 |   "reputation": 28067,
 84 |   "submissionCalendar": {
 85 |     "1664323200": 1,
 86 |     "1664496000": 1,
 87 |     "1664755200": 4,
 88 |     "1664841600": 5,
 89 |     "1667865600": 3,
 90 |     "1678060800": 1
 91 |   }
 92 | }
 93 | ```
 94 | ## Project Structure
 95 | - `index.js` -Main server file that sets up the Express server and API routes.
 96 | - `leetcode.js` -Contains the logic for interacting with LeetCode's GraphQL API.
 97 | - `package.json` - Project metadata and dependencies.
 98 | 
 99 | ## Demo
100 | 
101 | You can view a live demo of the project [here](https://leetcode-api-faisalshohag.vercel.app/). *(Please note that it may take a few seconds for the server to wake up.)*
102 | 
103 | ## Contributing
104 | 
105 | Contributions are welcome! Please feel free to submit a pull request or open an issue to discuss improvements or bugs.
106 | 
107 | ## License
108 | 
109 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
110 | 
111 | ## Contact
112 | 
113 | - **Author:** Faisal Shohag
114 | - **Email:** faisalshohagprog@gmail.com
115 | - **LinkedIn:** [faisal-shohag](http://linkedin.com/in/faisal-shohag)
116 | - **GitHub:** [faisal-shohag](http://github.com/faisal-shohag)
117 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6 |     <title>LeetCode User Stats</title>
  7 |     <script src="https://cdn.tailwindcss.com"></script>
  8 |     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9 |     <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
 10 |     <script>
 11 |       tailwind.config = {
 12 |         theme: {
 13 |           extend: {
 14 |             colors: {
 15 |               primary: "#58a6ff",
 16 |             },
 17 |             backgroundImage: {
 18 |               gradient:
 19 |                 "linear-gradient(45deg, hsl(240deg 100% 20%) 0%, hsl(281deg 100% 21%) 8%, hsl(304deg 100% 23%) 17%, hsl(319deg 100% 30%) 25%, hsl(329deg 100% 36%) 33%, hsl(336deg 100% 41%) 42%, hsl(346deg 83% 51%) 50%, hsl(3deg 95% 61%) 58%, hsl(17deg 100% 59%) 67%, hsl(30deg 100% 55%) 75%, hsl(40deg 100% 50%) 83%, hsl(48deg 100% 50%) 92%, hsl(55deg 100% 50%) 100%)",
 20 |             },
 21 |           },
 22 |         },
 23 |       };
 24 |     </script>
 25 |     <style>
 26 |       .glassmorphism {
 27 |         background: rgba(255, 255, 255, 0.05);
 28 |         backdrop-filter: blur(10px);
 29 |         border-radius: 10px;
 30 |         border: 1px solid rgba(255, 255, 255, 0.1);
 31 |       }
 32 |       .glass-2 {
 33 |         background: rgba(255, 255, 255, 0.05);
 34 |         backdrop-filter: blur(10px);
 35 |         border: 1px solid rgba(255, 255, 255, 0.1);
 36 |       }
 37 |       .spinner {
 38 |         border: 4px solid rgba(255, 255, 255, 0.3);
 39 |         border-radius: 50%;
 40 |         border-top: 4px solid #ffffff;
 41 |         width: 40px;
 42 |         height: 40px;
 43 |         animation: spin 1s linear infinite;
 44 |       }
 45 | 
 46 |       @keyframes spin {
 47 |         0% {
 48 |           transform: rotate(0deg);
 49 |         }
 50 |         100% {
 51 |           transform: rotate(360deg);
 52 |         }
 53 |       }
 54 | 
 55 |       .contribution-cell {
 56 |         width: 10px;
 57 |         height: 10px;
 58 |         margin: 2px;
 59 |         border-radius: 2px;
 60 |         transition: all 0.2s ease;
 61 |       }
 62 | 
 63 |       .contribution-cell:hover {
 64 |         transform: scale(1.2);
 65 |       }
 66 | 
 67 |       .level-0 {
 68 |         background-color: #161b22;
 69 |       }
 70 |       .level-1 {
 71 |         background-color: #0e4429;
 72 |       }
 73 |       .level-2 {
 74 |         background-color: #006d32;
 75 |       }
 76 |       .level-3 {
 77 |         background-color: #26a641;
 78 |       }
 79 |       .level-4 {
 80 |         background-color: #39d353;
 81 |       }
 82 | 
 83 |       .error-message {
 84 |         background: rgba(239, 68, 68, 0.569);
 85 |         border: 1px solid rgba(239, 68, 68, 0.3);
 86 |         padding: 1rem;
 87 |         border-radius: 0.5rem;
 88 |         text-align: center;
 89 |         margin: 1rem 0;
 90 |         animation: fadeIn 0.3s ease-in-out;
 91 |       }
 92 | 
 93 |       @keyframes fadeIn {
 94 |         from {
 95 |           transform: translateY(-10px);
 96 |         }
 97 |         to {
 98 |           transform: translateY(0);
 99 |         }
100 |       }
101 |     </style>
102 |   </head>
103 |   <body class="bg-gradient text-white min-h-screen">
104 |     <div class="container mx-auto px-4 py-8">
105 |       <h1
106 |         class="text-2xl flex items-center justify-center gap-2 font-bold text-white mb-8 text-center"
107 |       >
108 |         <img
109 |           class="h-10"
110 |           src="https://upload.wikimedia.org/wikipedia/commons/0/0a/LeetCode_Logo_black_with_text.svg"
111 |         />
112 |         api
113 |       </h1>
114 |       <div class="mb-6 flex justify-center">
115 |         <input
116 |           type="text"
117 |           id="username"
118 |           placeholder="Username"
119 |           class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-0 focus:ring-none placeholder-gray-300"
120 |         />
121 |         <button
122 |           onclick="fetchUserStats()"
123 |           class="glass-2 text-white px-4 py-2 rounded-r-md hover:bg-opacity-90 transition-colors"
124 |         >
125 |           Okay
126 |         </button>
127 |       </div>
128 |       <div id="errorMessage" class="hidden"></div>
129 |       <div
130 |         id="userStats"
131 |         class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
132 |       ></div>
133 |       <div id="heatmap" class="mb-8 glassmorphism p-4">
134 |         <div id="heatmapChart">
135 |           <div class="text-center font-semibold">
136 |             LeetCode api with recentSubmissions and submissionCalendar!
137 |           </div>
138 |         </div>
139 |       </div>
140 |       <div id="recentSubmissions" class="glassmorphism p-4">
141 |         <div class="text-center">
142 |           https://leetcode-api-faisalshohag.vercel.app/<strong>username</strong>
143 |         </div>
144 |       </div>
145 |       <div
146 |         id="loadingSpinner"
147 |         class="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50 hidden"
148 |       >
149 |         <div class="spinner"></div>
150 |       </div>
151 |     </div>
152 |     <div class="glassmorphism py-3">
153 |       <a target="_blank" href="https://github.com/faisal-shohag/leetcode_api">
154 |         <div class="flex items-center gap-2 font-semibold justify-center">
155 |           Star at
156 |           <img
157 |             class="h-6 w-6"
158 |             src="https://seeklogo.com/images/G/github-logo-7880D80B8D-seeklogo.com.png"
159 |           /></div
160 |       ></a>
161 |     </div>
162 | 
163 |     <script>
164 | 
165 |         <!-- console.log(document.getElementById("heatmapChart")) -->
166 |       async function fetchUserStats() {
167 |         const username = document.getElementById("username").value;
168 |         const errorDiv = document.getElementById("errorMessage");
169 |         const userStatsDiv = document.getElementById("userStats");
170 |         const heatmapDiv = document.getElementById("heatmap");
171 |         const recentSubmissionsDiv =
172 |           document.getElementById("recentSubmissions");
173 | 
174 |         // Reset previous content and errors
175 |         errorDiv.classList.add("hidden");
176 |         errorDiv.innerHTML = "";
177 |         userStatsDiv.innerHTML = "";
178 |         heatmapDiv.innerHTML = `<div id="heatmapChart">
179 |           <div class="text-center font-semibold">
180 |             LeetCode api with recentSubmissions and submissionCalendar!
181 |           </div>
182 |         </div>`;
183 |         recentSubmissionsDiv.innerHTML = "";
184 | 
185 |         if (!username.trim()) {
186 |           showError("Please enter a username");
187 |           return;
188 |         }
189 | 
190 |         document.getElementById("loadingSpinner").classList.remove("hidden");
191 | 
192 |         try {
193 |           const response = await fetch(
194 |             `https://leetcode-api-faisalshohag.vercel.app/${username}`
195 |           );
196 |           const data = await response.json();
197 | 
198 |           // Check if the response contains errors
199 |           if (data.errors && data.errors.length > 0) {
200 |             // Check if the error is about user not existing
201 |             if (
202 |               data.errors.some((error) =>
203 |                 error.message.includes("user does not exist")
204 |               )
205 |             ) {
206 |               showError(`User "${username}" does not exist`);
207 |             } else {
208 |               showError("An error occurred while fetching user data");
209 |             }
210 |             return;
211 |           }
212 | 
213 |           // If no errors, proceed with displaying the data
214 |           displayUserStats(data);
215 |           createHeatmap(data.submissionCalendar);
216 |           displayRecentSubmissions(data.recentSubmissions);
217 |         } catch (error) {
218 |             
219 |           showError("Failed to fetch user data. Please try again later.");
220 |           console.error("Error fetching user stats:", error);
221 |         } finally {
222 |           document.getElementById("loadingSpinner").classList.add("hidden");
223 |         }
224 |       }
225 | 
226 |       function showError(message) {
227 |         const errorDiv = document.getElementById("errorMessage");
228 |         errorDiv.innerHTML = `
229 |                 <div class="error-message">
230 |                     <p class="text-white font-semibold">${message}</p>
231 |                 </div>
232 |             `;
233 |         errorDiv.classList.remove("hidden");
234 |       }
235 |       function displayUserStats(data) {
236 |         // Previous displayUserStats code remains the same
237 |         const statsHtml = `
238 |                 <div class="glassmorphism p-6 shadow-lg">
239 |                     <h3 class="text-xl font-semibold text-white mb-2">Total Solved</h3>
240 |                     <div class="flex  items-center justify-between">
241 |                         <p class="text-3xl font-bold">${data.totalSolved}/${data.totalQuestions}</p>
242 |                         <canvas id="totalSolvedChart" width="80" height="80"></canvas>
243 |                     </div>
244 |                 </div>
245 |                 <div class="glassmorphism p-6 shadow-lg">
246 |                     <h3 class="text-xl font-semibold text-white mb-2">Ranking</h3>
247 |                     <p class="text-3xl font-bold">${data.ranking}</p>
248 |                 </div>
249 |                 <div class="glassmorphism p-6 shadow-lg">
250 |                     <h3 class="text-xl font-semibold text-white mb-2">Easy Solved</h3>
251 |                     <div class="flex items-center justify-between">
252 |                         <p class="text-3xl font-bold">${data.easySolved}/${data.totalEasy}</p>
253 |                         <canvas id="easySolvedChart" width="80" height="80"></canvas>
254 |                     </div>
255 |                 </div>
256 |                 <div class="glassmorphism p-6 shadow-lg">
257 |                     <h3 class="text-xl font-semibold text-white mb-2">Medium Solved</h3>
258 |                     <div class="flex items-center justify-between">
259 |                         <p class="text-3xl font-bold">${data.mediumSolved}/${data.totalMedium}</p>
260 |                         <canvas id="mediumSolvedChart" width="80" height="80"></canvas>
261 |                     </div>
262 |                 </div>
263 |                 <div class="glassmorphism p-6 shadow-lg">
264 |                     <h3 class="text-xl font-semibold text-white mb-2">Hard Solved</h3>
265 |                     <div class="flex items-center justify-between">
266 |                         <p class="text-3xl font-bold">${data.hardSolved}/${data.totalHard}</p>
267 |                         <canvas id="hardSolvedChart" width="80" height="80"></canvas>
268 |                     </div>
269 |                 </div>
270 |                 <div class="glassmorphism p-6 shadow-lg">
271 |                     <h3 class="text-xl font-semibold text-white mb-2">Contribution Points</h3>
272 |                     <p class="text-3xl font-bold">${data.contributionPoint}</p>
273 |                 </div>
274 |             `;
275 |         document.getElementById("userStats").innerHTML = statsHtml;
276 | 
277 |         createDonutChart(
278 |           "totalSolvedChart",
279 |           data.totalSolved,
280 |           data.totalQuestions,
281 |           "#3B82F6"
282 |         );
283 |         createDonutChart(
284 |           "easySolvedChart",
285 |           data.easySolved,
286 |           data.totalEasy,
287 |           "#10B981"
288 |         );
289 |         createDonutChart(
290 |           "mediumSolvedChart",
291 |           data.mediumSolved,
292 |           data.totalMedium,
293 |           "#FBBF24"
294 |         );
295 |         createDonutChart(
296 |           "hardSolvedChart",
297 |           data.hardSolved,
298 |           data.totalHard,
299 |           "#EF4444"
300 |         );
301 |       }
302 | 
303 |       function createDonutChart(elementId, value, total, color) {
304 |         const ctx = document.getElementById(elementId).getContext("2d");
305 |         new Chart(ctx, {
306 |           type: "doughnut",
307 |           data: {
308 |             datasets: [
309 |               {
310 |                 data: [value, total - value],
311 |                 backgroundColor: [color, "rgba(255, 255, 255, 0.2)"],
312 |                 borderWidth: 0,
313 |               },
314 |             ],
315 |           },
316 |           options: {
317 |             cutout: "70%",
318 |             responsive: false,
319 |             maintainAspectRatio: false,
320 |             plugins: {
321 |               legend: {
322 |                 display: false,
323 |               },
324 |               tooltip: {
325 |                 enabled: false,
326 |               },
327 |             },
328 |           },
329 |         });
330 |       }
331 | 
332 |       function createHeatmap(submissionCalendar) {
333 |         const heatmapContainer = document.getElementById("heatmapChart");
334 |         heatmapContainer.innerHTML =
335 |           '<h2 class="text-2xl font-bold text-white mb-4">Submission Heatmap</h2>'; // Clear existing content
336 | 
337 |         // Create container for the entire heatmap
338 |         const container = document.createElement("div");
339 |         container.className = "flex flex-col gap-2";
340 | 
341 |         // Create month labels
342 |         const monthsContainer = document.createElement("div");
343 |         monthsContainer.className = "flex text-xs text-gray-400 mb-1";
344 |         const months = [
345 |           "Jan",
346 |           "Feb",
347 |           "Mar",
348 |           "Apr",
349 |           "May",
350 |           "Jun",
351 |           "Jul",
352 |           "Aug",
353 |           "Sep",
354 |           "Oct",
355 |           "Nov",
356 |           "Dec",
357 |         ];
358 |         months.forEach((month) => {
359 |           const monthLabel = document.createElement("div");
360 |           monthLabel.className = "flex-1 text-center";
361 |           monthLabel.textContent = month;
362 |           monthsContainer.appendChild(monthLabel);
363 |         });
364 |         container.appendChild(monthsContainer);
365 | 
366 |         // Create grid container
367 |         const gridContainer = document.createElement("div");
368 |         gridContainer.className = "flex gap-2";
369 | 
370 |         // Add day labels
371 |         const dayLabels = document.createElement("div");
372 |         dayLabels.className = "flex flex-col gap-8 text-xs text-gray-400 pr-2";
373 |         ["Mon", "Wed", "Fri"].forEach((day) => {
374 |           const dayLabel = document.createElement("div");
375 |           dayLabel.textContent = day;
376 |           dayLabels.appendChild(dayLabel);
377 |         });
378 |         gridContainer.appendChild(dayLabels);
379 | 
380 |         // Process and create contribution grid
381 |         const { weeks } = processCalendarData(submissionCalendar);
382 |         const contributionGrid = document.createElement("div");
383 |         contributionGrid.className = "flex gap-1";
384 | 
385 |         weeks.forEach((week) => {
386 |           const weekContainer = document.createElement("div");
387 |           weekContainer.className = "flex flex-col gap-1";
388 | 
389 |           week.forEach(({ date, count }) => {
390 |             const cell = document.createElement("div");
391 |             cell.className = `contribution-cell level-${getContributionLevel(
392 |               count
393 |             )}`;
394 |             cell.title = `${date}: ${count} submissions`;
395 |             weekContainer.appendChild(cell);
396 |           });
397 | 
398 |           contributionGrid.appendChild(weekContainer);
399 |         });
400 | 
401 |         gridContainer.appendChild(contributionGrid);
402 |         container.appendChild(gridContainer);
403 | 
404 |         // Add legend
405 |         const legendContainer = document.createElement("div");
406 |         legendContainer.className =
407 |           "flex items-center gap-2 text-xs text-gray-400 mt-4";
408 |         legendContainer.innerHTML = `
409 |                 <span>Less</span>
410 |                 <div class="flex gap-1">
411 |                     <div class="contribution-cell level-0"></div>
412 |                     <div class="contribution-cell level-1"></div>
413 |                     <div class="contribution-cell level-2"></div>
414 |                     <div class="contribution-cell level-3"></div>
415 |                     <div class="contribution-cell level-4"></div>
416 |                 </div>
417 |                 <span>More</span>
418 |             `;
419 |         container.appendChild(legendContainer);
420 | 
421 |         heatmapContainer.appendChild(container);
422 |       }
423 | 
424 |       function processCalendarData(submissionCalendar) {
425 |         const weeks = [];
426 |         let currentWeek = [];
427 | 
428 |         // Convert timestamps to date objects and sort them
429 |         const dates = Object.keys(submissionCalendar)
430 |           .map((timestamp) => ({
431 |             date: new Date(timestamp * 1000),
432 |             count: submissionCalendar[timestamp],
433 |           }))
434 |           .sort((a, b) => a.date - b.date);
435 | 
436 |         // Fill in missing dates with zero contributions
437 |         const startDate = dates[0].date;
438 |         const endDate = dates[dates.length - 1].date;
439 |         const dateMap = new Map(
440 |           dates.map((d) => [d.date.toISOString().split("T")[0], d.count])
441 |         );
442 | 
443 |         for (
444 |           let d = new Date(startDate);
445 |           d <= endDate;
446 |           d.setDate(d.getDate() + 1)
447 |         ) {
448 |           const dateStr = d.toISOString().split("T")[0];
449 |           const count = dateMap.get(dateStr) || 0;
450 |           const dayOfWeek = d.getDay();
451 | 
452 |           if (dayOfWeek === 0 && currentWeek.length > 0) {
453 |             weeks.push(currentWeek);
454 |             currentWeek = [];
455 |           }
456 | 
457 |           currentWeek.push({
458 |             date: dateStr,
459 |             count: count,
460 |           });
461 | 
462 |           if (currentWeek.length === 7) {
463 |             weeks.push(currentWeek);
464 |             currentWeek = [];
465 |           }
466 |         }
467 | 
468 |         if (currentWeek.length > 0) {
469 |           weeks.push(currentWeek);
470 |         }
471 | 
472 |         return { weeks };
473 |       }
474 | 
475 |       function getContributionLevel(count) {
476 |         if (count === 0) return 0;
477 |         if (count <= 3) return 1;
478 |         if (count <= 6) return 2;
479 |         if (count <= 9) return 3;
480 |         return 4;
481 |       }
482 |       function displayRecentSubmissions(submissions) {
483 |         let tableHtml = `
484 |                 <h2 class="text-2xl font-bold text-white mb-4">Recent Submissions</h2>
485 |                 <div class="overflow-x-auto">
486 |                     <table class="w-full rounded-lg overflow-hidden">
487 |                         <thead class="bg-white bg-opacity-10">
488 |                             <tr>
489 |                                 <th class="px-4 py-2 text-left">Title</th>
490 |                                 <th class="px-4 py-2 text-left">Status</th>
491 |                                 <th class="px-4 py-2 text-left">Language</th>
492 |                                 <th class="px-4 py-2 text-left">Timestamp</th>
493 |                             </tr>
494 |                         </thead>
495 |                         <tbody>
496 |             `;
497 | 
498 |         submissions.forEach((sub) => {
499 |           const date = new Date(sub.timestamp * 1000).toLocaleString();
500 |           tableHtml += `
501 |                     <tr class="border-t border-white border-opacity-10">
502 |                         <td class="px-4 py-2 underline"><a target="_blank" href="https://leetcode.com/problems/${
503 |                           sub.titleSlug
504 |                         }" target="_blank" rel="noopener noreferrer" class="text-blue-300 hover:text-blue-100">${
505 |             sub.title
506 |           }</a></td>
507 |                         <td class="px-4 py-2 font-bold ${
508 |                           sub.statusDisplay == "Accepted"
509 |                             ? "text-green-400"
510 |                             : "text-red-400"
511 |                         }">${sub.statusDisplay}</td>
512 |                         <td class="px-4 py-2">${sub.lang}</td>
513 |                         <td class="px-4 py-2">${date}</td>
514 |                     </tr>
515 |                 `;
516 |         });
517 | 
518 |         tableHtml += "</tbody></table></div>";
519 |         document.getElementById("recentSubmissions").innerHTML = tableHtml;
520 |       }
521 |     </script>
522 |   </body>
523 | </html>
524 | 


--------------------------------------------------------------------------------