6464 .level-2 { background-color : # 006d32
6565 .level-3 { background-color : # 26a641
6666 .level-4 { background-color : # 39d353
67+ 68+ 69+ .error-message {
70+ background : rgba (239 , 68 , 68 , 0.569 );
71+ border : 1px solid rgba (239 , 68 , 68 , 0.3 );
72+ padding : 1rem ;
73+ border-radius : 0.5rem ;
74+ text-align : center;
75+ margin : 1rem 0 ;
76+ animation : fadeIn 0.3s ease-in-out;
77+ }
78+ 79+ @keyframes fadeIn {
80+ from { transform : translateY (-10px ); }
81+ to { transform : translateY (0 ); }
82+ }
6783 </ style >
6884</ head >
6985< body class ="bg-gradient text-white min-h-screen ">
@@ -73,13 +89,18 @@ <h1 class="text-2xl flex items-center justify-center gap-2 font-bold text-white
7389 < input type ="text " id ="username " placeholder ="Username " 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 ">
7490 < button onclick ="fetchUserStats() " class ="glass-2 text-white px-4 py-2 rounded-r-md hover:bg-opacity-90 transition-colors "> Okay</ button >
7591 </ div >
92+ < div id ="errorMessage " class ="hidden "> </ div >
7693 < div id ="userStats " class ="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 "> </ div >
7794 < div id ="heatmap " class ="mb-8 glassmorphism p-4 ">
7895
79- < div id ="heatmapChart "> </ div >
96+ < div id ="heatmapChart ">
97+ < div class ="text-center font-semibold ">
98+ LeetCode api with recentSubmissions and submissionCalendar!
99+ </ div >
100+ </ div >
80101 </ div >
81102 < div id ="recentSubmissions " class ="glassmorphism p-4 ">
82- 103+ < div class =" text-center " > https://leetcode-api-faisalshohag.vercel.app/ < strong > username </ strong > </ div >
83104 </ div >
84105 < div id ="loadingSpinner " class ="fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50 hidden ">
85106 < div class ="spinner "> </ div >
@@ -94,20 +115,61 @@ <h1 class="text-2xl flex items-center justify-center gap-2 font-bold text-white
94115 < script >
95116 async function fetchUserStats ( ) {
96117 const username = document . getElementById ( 'username' ) . value ;
118+ const errorDiv = document . getElementById ( 'errorMessage' ) ;
119+ const userStatsDiv = document . getElementById ( 'userStats' ) ;
120+ const heatmapDiv = document . getElementById ( 'heatmap' ) ;
121+ const recentSubmissionsDiv = document . getElementById ( 'recentSubmissions' ) ;
122+ 123+ // Reset previous content and errors
124+ errorDiv . classList . add ( 'hidden' ) ;
125+ errorDiv . innerHTML = '' ;
126+ userStatsDiv . innerHTML = '' ;
127+ heatmapDiv . innerHTML = '' ;
128+ recentSubmissionsDiv . innerHTML = '' ;
129+ 130+ if ( ! username . trim ( ) ) {
131+ showError ( 'Please enter a username' ) ;
132+ return ;
133+ }
134+ 97135 document . getElementById ( 'loadingSpinner' ) . classList . remove ( 'hidden' ) ;
136+ 98137 try {
99138 const response = await fetch ( `https://leetcode-api-faisalshohag.vercel.app/${ username } ) ;
100139 const data = await response . json ( ) ;
140+ 141+ // Check if the response contains errors
142+ if ( data . errors && data . errors . length > 0 ) {
143+ // Check if the error is about user not existing
144+ if ( data . errors . some ( error => error . message . includes ( "user does not exist" ) ) ) {
145+ showError ( `User "${ username } ) ;
146+ } else {
147+ showError ( 'An error occurred while fetching user data' ) ;
148+ }
149+ return ;
150+ }
151+ 152+ // If no errors, proceed with displaying the data
101153 displayUserStats ( data ) ;
102154 createHeatmap ( data . submissionCalendar ) ;
103155 displayRecentSubmissions ( data . recentSubmissions ) ;
104156 } catch ( error ) {
157+ showError ( 'Failed to fetch user data. Please try again later.' ) ;
105158 console . error ( 'Error fetching user stats:' , error ) ;
106159 } finally {
107160 document . getElementById ( 'loadingSpinner' ) . classList . add ( 'hidden' ) ;
108161 }
109162 }
110163
164+ function showError ( message ) {
165+ const errorDiv = document . getElementById ( 'errorMessage' ) ;
166+ errorDiv . innerHTML = `
167+ <div class="error-message">
168+ <p class="text-white font-semibold">${ message }
169+ </div>
170+ ` ;
171+ errorDiv . classList . remove ( 'hidden' ) ;
172+ }
111173 function displayUserStats ( data ) {
112174 // Previous displayUserStats code remains the same
113175 const statsHtml = `
0 commit comments