From d0bbd2461b82cdd534d8a73ec4bfc3411e5faf74 Mon Sep 17 00:00:00 2001 From: Mohab Yaser Date: Wed, 15 Nov 2023 18:53:23 +0200 Subject: [PATCH] Added feature: adding multiple handles comma separated --- index.html | 29 ++++++++++++++++++---- main.js | 73 +++++++++++++++++++++++++++++++++++------------------- style.css | 12 +++++++-- 3 files changed, 81 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 572f727..8b0e0b3 100644 --- a/index.html +++ b/index.html @@ -11,13 +11,32 @@ +
+ Codeforces + Problem + Selector + This app assists CPers in the process of choosing problems while training +
- From +
- To +
- Number of problems (1 - 50) - + +
@@ -54,7 +74,6 @@
- diff --git a/main.js b/main.js index 49cc8db..464b521 100644 --- a/main.js +++ b/main.js @@ -37,6 +37,15 @@ const tags_list = [ "two pointers", ]; + +function disableBtn(button) { + button.disabled = true; +} + +function enableBtn(button) { + button.disabled = false; +} + const green = "rgb(51, 172, 113)"; const blue = "rgb(0, 188, 212)"; @@ -60,10 +69,12 @@ function dummy_data() { // add_handle('Mohab_Yaser'); - // let btns = document.getElementsByClassName("tag-btn"); - // btns[21].style.backgroundColor = green; - // btns[23].style.backgroundColor = green; - // btns[26].style.backgroundColor = green; + document.getElementById("handles").value = 'Mohab_Yaser,Mostafa__Fouad,JOE002'; + + let btns = document.getElementsByClassName("tag-btn"); + btns[21].style.backgroundColor = green; + btns[23].style.backgroundColor = green; + btns[26].style.backgroundColor = green; // let problem_container = ` //
@@ -114,7 +125,7 @@ window.addEventListener("load", () => { }); } - dummy_data(); + // dummy_data(); }); function http_request(url) { @@ -173,31 +184,39 @@ function already_entered(handle) { document .getElementsByClassName("add-handle-btn")[0] .addEventListener("click", async() => { - const handle = document.getElementById("handles").value; - - if (handle === "") - Swal.fire({ - icon: "error", - title: "Oops...", - text: "Please Enter a handle!", - }); - else { - const valid = await (valid_handle(handle)); - if (!valid) { - Swal.fire({ - icon: "error", - title: "Oops...", - text: "Please Enter a valid handle!", - }); - } else if (already_entered(handle)) { + disableBtn(document.getElementsByClassName("add-handle-btn")[0]); + let handles = document.getElementById("handles").value; + handles = handles.split(','); + handles = new Set(handles); + + handles.forEach(async (handle) => { + handle = handle.trim(); + if (handle === "") Swal.fire({ icon: "error", title: "Oops...", - text: "You have already entered this handle before", + text: "Please Enter a handle!", }); - } else - add_handle(handle); - } + else { + const valid = await (valid_handle(handle)); + if (!valid) { + Swal.fire({ + icon: "error", + title: "Oops...", + text: "Please Enter a valid handle!", + }); + } else if (already_entered(handle)) { + Swal.fire({ + icon: "error", + title: "Oops...", + text: "You have already entered this handle before", + }); + } else + add_handle(handle); + } + }); + + enableBtn(document.getElementsByClassName("add-handle-btn")[0]); }); function validate_input() { @@ -404,10 +423,12 @@ function remove_old_problems() { } document.getElementsByClassName("gen-btn")[0].addEventListener("click", async() => { + disableBtn(document.getElementsByClassName("gen-btn")[0]); if (validate_input() === true) { remove_old_problems(); let problems = await get_problems(); if (problems !== false) await view_problems(problems); } + enableBtn(document.getElementsByClassName("gen-btn")[0]); }); \ No newline at end of file diff --git a/style.css b/style.css index c235373..a819bf3 100644 --- a/style.css +++ b/style.css @@ -6,8 +6,8 @@ body { max-width: 800px; min-width: 600px; margin: auto; - margin-top: 100px; - margin-bottom: 100px; +/* margin-top: 100px;*/ +/* margin-bottom: 100px;*/ padding: 8px; } @@ -15,6 +15,14 @@ a { margin-top: 5px; } +.head { + display: inline; + text-align: center; + font-family: 'Roboto', sans-serif; + font-size: 45px; + font-weight: 500; +} + .tags-container { border: solid 2.5px lightgrey; border-radius: 5px;