10 |
11 |
12 |
Code Daily with LeetCode
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
Need Help?
21 |
27 |
28 |
29 |
30 |
31 |
Not You ?
32 |
33 |
34 |
35 |
36 |
37 | 1. Select the Difficulty
38 |
39 |
51 |
52 | 2. Select the Topic
53 |
54 |
69 |
70 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
86 |
Problem:
87 |
Difficulty: Topic:
88 |
89 |
90 |
91 |
92 |
93 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/popup.js:
--------------------------------------------------------------------------------
1 |
2 | // The body of this function will be executed as a content script inside the
3 | // current page
4 | function setPageBackgroundColor() {
5 | chrome.storage.sync.get("color", ({ color }) => {
6 | document.body.style.backgroundColor = color;
7 | });
8 | }
9 |
10 |
11 | //generate random question
12 | let getQuestion = document.getElementById("getQuestion");
13 | getQuestion.addEventListener("click", async () => {
14 | document.getElementsByClassName("loader1")[0].style.display = "block";
15 | var e = document.getElementById("topic");
16 | var topic = e.value;
17 | if (topic === "all"){
18 | var allTopics = ["array", "string", "dynamic-programming", "hash-table", "binary-tree", "tree", "binary-search-tree", "recursion", "backtracking", "graph", "linked-list", "trie"];
19 | topic = allTopics[Math.floor(Math.random() * allTopics.length)];
20 | }
21 | var myHeaders = new Headers();
22 | myHeaders.append("Content-Type", "application/json");
23 |
24 | var graphql = JSON.stringify({
25 | query: `query getTopicTag($slug: String!) {topicTag(slug: $slug){name translatedName questions{status title difficulty titleSlug acRate}} }`,
26 | variables: { "slug": `${topic}` }
27 | })
28 | var requestOptions = {
29 | method: 'POST',
30 | headers: myHeaders,
31 | body: graphql
32 | };
33 |
34 | fetch("https://salty-waters-49462.herokuapp.com/leetcode.com/graphql", requestOptions)
35 | .then(response => response.json())
36 | .then(result => {
37 | var array = ["Easy", "Medium", "Hard"]
38 | let difficulty = document.querySelector('input[name="difficulty"]:checked').value;
39 | if (difficulty === "Random") {
40 | difficulty = array[Math.floor(Math.random() * array.length)];
41 | }
42 |
43 | let questionsArray = result.data.topicTag.questions || [];
44 | let filteredquestions = questionsArray.filter(item => item.difficulty === difficulty);
45 | let size = filteredquestions.length;
46 | let randomQuestion = Math.floor(Math.random() * size);
47 | var problemURL = `https://leetcode.com/problems/${filteredquestions[randomQuestion].titleSlug}`;
48 | document.getElementsByClassName("loader1")[0].style.display = "none";
49 | document.getElementById("problemURL").setAttribute("href", problemURL);
50 | document.getElementById("problemURL").style.display = "";
51 | document.getElementById("question").innerHTML = filteredquestions[randomQuestion].title;
52 | document.getElementById("difficulty").innerHTML = difficulty;
53 | document.getElementById("topic1").innerHTML = topic;
54 | // document.getElementById("acRate").innerHTML = filteredquestions[randomQuestion].acRate;
55 | // document.getElementById("desc").style.visibility = "hidden";
56 | })
57 | .catch(error => {
58 | document.getElementById("question").innerHTML = error;
59 | });
60 | });
61 |
62 |
63 | // signUp Button
64 | const signupBtn1 = document.getElementById('submit-btn-signup');
65 |
66 | signupBtn1.addEventListener('click', (e) => {
67 | var signupDiv = document.getElementById("signupDiv");
68 | var loginDiv = document.getElementById("loginDiv");
69 | document.getElementById("getQuestion").click();
70 | document.getElementsByClassName("loader")[0].style.display = "block";
71 | // display the problem solved status
72 | let leetCodeId = document.getElementById("leetcodeId").value;
73 | // let username = leetCodeId;
74 | chrome.storage.sync.set({ username });
75 |
76 | fetch(`https://salty-waters-49462.herokuapp.com/leetcode-stats-six.vercel.app/api?username=${leetCodeId}&theme=dark`, { 'Access-Control-Allow-Origin': '*' })
77 | .then(response => response.text())
78 | .then(data => {
79 | // chrome.storage.sync.get('username', ({ name }) => {
80 | // console.log('name: ', name)
81 | // document.getElementById('username').innerHTML = name;
82 | // });
83 | if (leetCodeId.length <=0 || data === 'Username does not exist') {
84 | document.getElementsByClassName("loader")[0].style.display = "none";
85 | document.getElementById("invalidCreds").innerHTML = 'Invalid LeetCode Id';
86 | document.getElementsByClassName("invalidCreds")[0].style.display = "block";
87 | }
88 | else{
89 | document.getElementById("stats").innerHTML = data;
90 | signupDiv.classList.add("slide-up");
91 | loginDiv.classList.remove("slide-up");
92 | document.getElementById("loginDiv").style.visibility = "visible";
93 | document.getElementById("signupDiv").style.visibility = "hidden";
94 | document.getElementsByClassName("loader")[0].style.display = "none";
95 | document.getElementsByClassName("invalidCreds")[0].style.display = "none";
96 | }
97 |
98 | }).catch((err) => {
99 | document.getElementById("stats").innerHTML = err;
100 | console.log('error: ', err);
101 | });
102 |
103 | });
104 |
105 | document.getElementById("login").addEventListener("click", goToLogin);
106 |
107 | function goToLogin(){
108 | signupDiv.classList.remove("slide-up");
109 | loginDiv.classList.add("slide-up");
110 | document.getElementById("loginDiv").style.visibility = "hidden";
111 | document.getElementById("signupDiv").style.visibility = "visible";
112 | }
113 |
--------------------------------------------------------------------------------
/button.css:
--------------------------------------------------------------------------------
1 | /* button {
2 | height: 30px;
3 | width: 30px;
4 | outline: none;
5 | margin: 10px;
6 | border: none;
7 | border-radius: 2px;
8 | }
9 |
10 | button.current {
11 | box-shadow: 0 0 0 2px white,
12 | 0 0 0 4px black;
13 | }
14 |
15 | .inline-buttons .one-third {
16 | text-align: center;
17 | }
18 |
19 | @media only screen and (max-width: 1076px) {
20 |
21 | .inline-buttons .one-third {
22 | width: 100%;
23 | margin: 20px;
24 | }
25 |
26 | } */
27 | @import url("https://fonts.googleapis.com/css?family=Fira+Sans");
28 | html, body {
29 | position: relative;
30 | min-height: 100vh;
31 | background-color: #E1E8EE;
32 | display: flex;
33 | align-items: center;
34 | justify-content: center;
35 | font-family: "Fira Sans", Helvetica, Arial, sans-serif;
36 | -webkit-font-smoothing: antialiased;
37 | -moz-osx-font-smoothing: grayscale;
38 | }
39 |
40 | svg{
41 | margin-left: -23%;
42 | }
43 | .form-structor {
44 | background-color: #222;
45 | border-radius: 15px;
46 | height: 550px;
47 | width: 350px;
48 | position: relative;
49 | overflow: hidden;
50 | }
51 | .form-structor::after {
52 | content: "";
53 | opacity: 0.8;
54 | position: absolute;
55 | top: 0;
56 | right: 0;
57 | bottom: 0;
58 | left: 0;
59 | background-repeat: no-repeat;
60 | background-size: 600px;
61 | background-image: url("https://images.unsplash.com/photo-1501556466850-7c9fa1fccb4c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxfDB8MXxhbGx8fHx8fHx8fA&ixlib=rb-1.2.1&q=80&w=1080&utm_source=unsplash_source&utm_medium=referral&utm_campaign=api-credit");
62 | }
63 | .form-structor .signup {
64 | position: absolute;
65 | top: 50%;
66 | left: 50%;
67 | -webkit-transform: translate(-50%, -50%);
68 | width: 65%;
69 | z-index: 5;
70 | -webkit-transition: all 0.3s ease;
71 | }
72 | .form-structor .signup.slide-up {
73 | top: 5%;
74 | -webkit-transform: translate(-50%, 0%);
75 | -webkit-transition: all 0.3s ease;
76 | }
77 | .form-structor .signup.slide-up .form-holder, .form-structor .signup.slide-up .submit-btn {
78 | opacity: 0;
79 | visibility: hidden;
80 | }
81 | .form-structor .signup.slide-up .form-title {
82 | font-size: 1em;
83 | cursor: pointer;
84 | }
85 | .form-structor .signup.slide-up .form-title span {
86 | margin-right: 5px;
87 | opacity: 1;
88 | visibility: visible;
89 | -webkit-transition: all 0.3s ease;
90 | }
91 | .form-structor .signup .form-title {
92 | color: #fff;
93 | font-size: 1.7em;
94 | text-align: center;
95 | }
96 | .form-structor .signup .form-title span {
97 | color: rgba(0, 0, 0, 0.4);
98 | opacity: 0;
99 | visibility: hidden;
100 | -webkit-transition: all 0.3s ease;
101 | }
102 | .form-structor .signup .form-holder {
103 | border-radius: 15px;
104 | background-color: #fff;
105 | overflow: hidden;
106 | opacity: 1;
107 | visibility: visible;
108 | -webkit-transition: all 0.3s ease;
109 | }
110 | .form-structor .signup .form-holder .input {
111 | border: 0;
112 | outline: none;
113 | box-shadow: none;
114 | display: block;
115 | height: 30px;
116 | line-height: 30px;
117 | padding: 8px 15px;
118 | border-bottom: 1px solid #eee;
119 | width: 100%;
120 | font-size: 12px;
121 | }
122 | .form-structor .signup .form-holder .input:last-child {
123 | border-bottom: 0;
124 | }
125 | .form-structor .signup .form-holder .input::-webkit-input-placeholder {
126 | color: rgba(0, 0, 0, 0.4);
127 | }
128 | .form-structor .signup .submit-btn {
129 | background-color: rgba(0, 0, 0, 0.4);
130 | color: rgba(255, 255, 255, 0.7);
131 | border: 0;
132 | border-radius: 15px;
133 | display: block;
134 | margin: 15px auto;
135 | padding: 15px 45px;
136 | width: 100%;
137 | font-size: 13px;
138 | font-weight: bold;
139 | cursor: pointer;
140 | opacity: 1;
141 | visibility: visible;
142 | -webkit-transition: all 0.3s ease;
143 | }
144 | .popup-topic{
145 | border-radius: 10px;
146 | padding: 3px
147 | }
148 | .data-type-btn {
149 | background-color: #6B92A4;
150 | color: rgba(255, 255, 255, 0.7);
151 | border: 0;
152 | border-radius: 15px;
153 | padding: 5px 15px;
154 | font-size: 13px;
155 | font-weight: bold;
156 | cursor: pointer;
157 | opacity: 1;
158 | visibility: visible;
159 | -webkit-transition: all 0.3s ease;
160 | }
161 | .data-type-btn:hover{
162 | transition: all 0.3s ease;
163 | background-color: rgba(0, 0, 0, 0.8);
164 | }
165 | .form-structor .signup .submit-btn:hover {
166 | transition: all 0.3s ease;
167 | background-color: rgba(0, 0, 0, 0.8);
168 | }
169 | .radio-btn {
170 | background-color: rgba(0, 0, 0, 0.4);
171 | border: 0;
172 | border-radius: 15px;
173 | display: block;
174 | margin: 15px auto;
175 | padding: 15px 45px;
176 | }
177 | .form-structor .login {
178 | position: absolute;
179 | top: 10%;
180 | left: 0;
181 | right: 0;
182 | bottom: 0;
183 | background-color: #fff;
184 | z-index: 5;
185 | -webkit-transition: all 0.3s ease;
186 | }
187 | .form-structor .login::before {
188 | content: "";
189 | position: absolute;
190 | left: 50%;
191 | top: -20px;
192 | -webkit-transform: translate(-50%, 0);
193 | width: 200%;
194 | height: 250px;
195 | border-radius: 50%;
196 | z-index: 4;
197 | -webkit-transition: all 0.3s ease;
198 | }
199 | .form-structor .login .center {
200 | position: absolute;
201 | top: calc(50% - 20%);
202 | left: 50%;
203 | -webkit-transform: translate(-50%, -50%);
204 | width: 65%;
205 | z-index: 5;
206 | -webkit-transition: all 0.3s ease;
207 | }
208 | .form-structor .login .center .form-title {
209 | color: #000;
210 | font-size: 1.7em;
211 | text-align: center;
212 | }
213 | .form-structor .login .center .form-title span {
214 | color: rgba(0, 0, 0, 0.4);
215 | opacity: 0;
216 | visibility: hidden;
217 | -webkit-transition: all 0.3s ease;
218 | }
219 | .form-structor .login .center .form-holder {
220 | border-radius: 15px;
221 | background-color: #fff;
222 | border: 1px solid #eee;
223 | overflow: hidden;
224 | margin-top: 50px;
225 | opacity: 1;
226 | visibility: visible;
227 | -webkit-transition: all 0.3s ease;
228 | }
229 | .form-structor .login .center .form-holder .input {
230 | border: 0;
231 | outline: none;
232 | box-shadow: none;
233 | display: block;
234 | height: 30px;
235 | line-height: 30px;
236 | padding: 8px 15px;
237 | border-bottom: 1px solid #eee;
238 | width: 100%;
239 | font-size: 12px;
240 | }
241 | .form-structor .login .center .form-holder .input:last-child {
242 | border-bottom: 0;
243 | }
244 | .form-structor .login .center .form-holder .input::-webkit-input-placeholder {
245 | color: rgba(0, 0, 0, 0.4);
246 | }
247 | .form-structor .login .center .submit-btn {
248 | background-color: #6B92A4;
249 | color: rgba(255, 255, 255, 0.7);
250 | border: 0;
251 | border-radius: 15px;
252 | display: block;
253 | margin: 15px auto;
254 | padding: 15px 45px;
255 | width: 100%;
256 | font-size: 13px;
257 | font-weight: bold;
258 | cursor: pointer;
259 | opacity: 1;
260 | visibility: visible;
261 | -webkit-transition: all 0.3s ease;
262 | }
263 | .form-structor .login .center .submit-btn:hover {
264 | transition: all 0.3s ease;
265 | background-color: rgba(0, 0, 0, 0.8);
266 | }
267 | .form-structor .login.slide-up {
268 | top: 90%;
269 | -webkit-transition: all 0.3s ease;
270 | }
271 | .form-structor .login.slide-up .center {
272 | top: 10%;
273 | -webkit-transform: translate(-50%, 0%);
274 | -webkit-transition: all 0.3s ease;
275 | }
276 | .form-structor .login.slide-up .form-holder, .form-structor .login.slide-up .submit-btn {
277 | opacity: 0;
278 | visibility: hidden;
279 | -webkit-transition: all 0.3s ease;
280 | }
281 | .form-structor .login.slide-up .form-title {
282 | font-size: 1em;
283 | margin: 0;
284 | padding: 0;
285 | cursor: pointer;
286 | -webkit-transition: all 0.3s ease;
287 | }
288 | .form-structor .login.slide-up .form-title span {
289 | margin-right: 5px;
290 | opacity: 1;
291 | visibility: visible;
292 | -webkit-transition: all 0.3s ease;
293 | }
294 |
295 | @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
296 | /* *{
297 | margin:0px;
298 | padding:0px;
299 | }
300 | html{
301 | background: #497dd0;
302 | } */
303 | .wrapper {
304 | margin: 5px;
305 | text-align: center;
306 | }
307 | .toggle_radio{
308 | left: -20%;
309 | position: relative;
310 | background: rgba(25, 86, 255, 0.1);
311 | margin: 4px auto;
312 | overflow: hidden;
313 | padding: 0 !important;
314 | -webkit-border-radius: 50px;
315 | -moz-border-radius: 50px;
316 | border-radius: 50px;
317 | position: relative;
318 | height: 26px;
319 | width: 318px;
320 | }
321 | .toggle_radio > * {
322 | float: left;
323 | }
324 | .toggle_radio input[type=radio]{
325 | display: none;
326 | /*position: fixed;*/
327 | }
328 | .toggle_radio label{
329 | font: 90%/1.618 "Source Sans Pro";
330 | color: rgba(0, 0, 0, 0.931);
331 | z-index: 0;
332 | display: block;
333 | width: 100px;
334 | height: 20px;
335 | margin: 3px 3px;
336 | -webkit-border-radius: 50px;
337 | -moz-border-radius: 50px;
338 | border-radius: 50px;
339 | cursor: pointer;
340 | z-index: 1;
341 | /*background: rgba(0,0,0,.1);*/
342 | text-align: center;
343 | /*margin: 0 2px;*/
344 | /*background: blue;*/ /*make it blue*/
345 | }
346 | .toggle_option_slider{
347 | /*display: none;*/
348 | /*background: red;*/
349 | width: 100px;
350 | height: 20px;
351 | position: absolute;
352 | top: 3px;
353 | -webkit-border-radius: 50px;
354 | -moz-border-radius: 50px;
355 | border-radius: 50px;
356 | -webkit-transition: all .4s ease;
357 | -moz-transition: all .4s ease;
358 | -o-transition: all .4s ease;
359 | -ms-transition: all .4s ease;
360 | transition: all .4s ease;
361 | }
362 |
363 | #first_toggle:checked ~ .toggle_option_slider{
364 | background: rgba(4, 189, 81, 0.87);
365 | left: 3px;
366 | }
367 | #second_toggle:checked ~ .toggle_option_slider{
368 | background: rgba(218, 150, 5, 0.979);
369 | left: 109px;
370 | }
371 | #third_toggle:checked ~ .toggle_option_slider{
372 | background: rgba(185, 14, 14, 0.966);
373 | left: 215px;
374 | }
375 | #fourth_toggle:checked ~ .toggle_option_slider{
376 | background: rgba(40, 161, 231, 0.657);
377 | left: 321px;
378 | }
379 |
380 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
381 | .card {
382 | zoom: 0.7;
383 | background: #fff;
384 | border-radius: 4px;
385 | box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.5);
386 | display: flex;
387 | flex-direction: row;
388 | border-radius: 25px;
389 | position: relative;
390 | top: 70%;
391 | }
392 |
393 | .card h2 {
394 | margin: 0;
395 | padding: 0 1rem;
396 | }
397 |
398 | .card .title {
399 | padding: 1rem;
400 | text-align: right;
401 | color: green;
402 | font-weight: bold;
403 | font-size: 12px;
404 | }
405 |
406 | .card .desc {
407 | padding: 0.1rem 0.1rem;
408 | font-size: 12px;
409 | }
410 |
411 | .card .actions {
412 | display: grid;
413 | grid-template-columns: repeat(3, 1fr);
414 | align-items: center;
415 | padding: 0.5rem 1rem;
416 | }
417 |
418 | .card svg {
419 | width: 85px;
420 | height: 85px;
421 | margin: 0 auto;
422 | }
423 |
424 | .img-avatar {
425 | width: 80px;
426 | height: 80px;
427 | position: absolute;
428 | border-radius: 50%;
429 | border: 6px solid white;
430 | background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
431 | top: 15px;
432 | left: 85px;
433 | }
434 |
435 | .card-text {
436 | display: grid;
437 | grid-template-columns: 1fr 2fr;
438 | }
439 |
440 | .title-total {
441 | padding: .5em 1.5em 1.5em;
442 | }
443 |
444 | path {
445 | fill: white;
446 | }
447 |
448 | .img-portada {
449 | width: 100%;
450 | }
451 |
452 | .portada {
453 | width: 100%;
454 | height: 100%;
455 | border-top-left-radius: 20px;
456 | border-bottom-left-radius: 20px;
457 | background-image: url("https://drive.google.com/uc?export=view&id=1Gma-jw8JPKJhVvaTzNcUWy1NMaQdGalF");
458 | background-position: bottom center;
459 | background-size: cover;
460 | }
461 |
462 | button {
463 | border: none;
464 | background: none;
465 | font-size: 24px;
466 | color: #8bc34a;
467 | cursor: pointer;
468 | transition: 0.5s;
469 | }
470 |
471 | .login h6:hover {
472 | color: #ca871c;
473 | }
474 |
475 | .help a:hover{
476 | color: #f5c800;
477 | }
478 | .invalidCreds {
479 | text-align: center;
480 | color: #ca871c;
481 | font-weight: bold;
482 | font-size: larger;
483 | display: none;
484 | }
485 |
486 | .loader {
487 | display: none;
488 | top: 75%;
489 | left: 50%;
490 | position: absolute;
491 | transform: translate(-50%, -50%);
492 | }
493 |
494 | .loading {
495 | border: 5px solid #ccc;
496 | width: 60px;
497 | height: 60px;
498 | border-radius: 50%;
499 | border-top-color: #265766;
500 | border-left-color: #265766;
501 | animation: spin 1s infinite ease-in;
502 | }
503 |
504 | .loader1 {
505 | display: none;
506 | top: 75%;
507 | left: 50%;
508 | position: absolute;
509 | transform: translate(-50%, -50%);
510 | }
511 |
512 | .loading1 {
513 | border: 5px solid #ccc;
514 | width: 60px;
515 | height: 60px;
516 | border-radius: 50%;
517 | border-top-color: #265766;
518 | border-left-color: #265766;
519 | animation: spin 1s infinite ease-in;
520 | }
521 |
522 | @keyframes spin {
523 | 0% {
524 | transform: rotate(0deg);
525 | }
526 |
527 | 100% {
528 | transform: rotate(360deg);
529 | }
530 | }
531 | .fa {
532 | padding: 10px;
533 | font-size: 15px;
534 | width: 20px;
535 | text-align: center;
536 | text-decoration: none;
537 | border-radius: 50%;
538 | }
539 | /* Add a hover effect if you want */
540 | .fa:hover {
541 | opacity: 0.7;
542 | }
543 |
544 | /* Set a specific color for each brand */
545 |
546 | /* Portfolio */
547 | .fa-link {
548 |
549 | color: white;
550 | }
551 |
552 | /* Twitter */
553 | .fa-twitter {
554 |
555 | color: white;
556 | }
557 | .fa-github {
558 |
559 | color: white;
560 | }
561 | .fa-linkedin {
562 |
563 | color: white;
564 | }
--------------------------------------------------------------------------------
25 |
26 | - Once you enter your LeetCode Id, it will display your stats and select a random question for practise. You can choose questions from different topics(e.g Dynamic Programming, Trees etc) and set the difficulty level of your choice.
28 |
29 | ## Contribute
30 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
31 |
32 | 1. Fork the Project
33 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
34 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
35 | 4. Push to the Branch (`git push origin feature/AmazingFeature`)
36 | 5. Open a Pull Request
37 |
38 | ## Contact
39 | Ashish Kumar - [Website](https://ashish-kumar.com) - me@ashish-kumar.com
40 |
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |