Added feature: adding multiple handles comma separated

Mohab96 · Nov 15, 2023 · d0bbd24 · d0bbd24
1 parent 62b8ebc
commit d0bbd24
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -11,13 +11,32 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,100&display=swap" rel="stylesheet">
   </head>
   <body>
+    <div
+      style="
+        text-align: center;
+        margin-bottom: 5px;
+        ">
+      <span class = "head" style="color: #e5e512;">Codeforces</span>
+      <span class = "head" style="color: #5959cd;">Problem</span>
+      <span class = "head" style="color: #dd1818;">Selector</span>
+      <span style="
+      display: block;
+      font-family: 'Roboto', sans-serif;
+      font-weight: 500;
+      margin-top: 20px;
+      margin-bottom: 20px;
+      color: #4a4a4a;
+      font-size: 25px;
+      ">This app assists CPers in the process of choosing problems while training</span>
+    </div>
     <div class="tags-container"></div>
     <div class="temp">
       <div class="rating-container">
       <label for="" class="rating-label">Rating 800 - 3500</label>
       <div style="margin: 4px; margin-left: 30px">
-        <span class="some-class">From</span>
+        <label for="for" class="some-class">From</label>
         <input
+          id="for"
           class="another-class"
           type="number"
           step="100"
@@ -27,8 +46,9 @@
       </div>
 
       <div style="margin: 4px; margin-left: 30px">
-        <span class="some-class">To</span>
+        <label for="to" class="some-class">To</label>
         <input
+          id="to"
           class="another-class"
           type="number"
           step="100"
@@ -40,8 +60,8 @@
     </div>
 
     <div class="prob-num-container">
-      <span class="prob-num-label">Number of problems (1 - 50)</span>
-      <input class="another-class" type="number" step="1" min="1" max="50" />
+      <label for="prob-num" class="prob-num-label">Number of problems (1 - 50)</label>
+      <input id="prob-num" class="another-class" type="number" step="1" min="1" max="50" />
     </div>
     <div class="handles-container">
       <label for="handles" class="handles-label">Handles (not solved by)</label>
@@ -54,7 +74,6 @@
       <button class="gen-btn">Generate</button>
     </div>
     <div class="problems-container"></div>
-
     <script src="main.js"></script>
   </body>
 </html>
diff --git 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 = `
     //     <div class="problem">
@@ -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]);
 });
diff --git a/style.css b/style.css
@@ -6,15 +6,23 @@ body {
 	max-width: 800px;
 	min-width: 600px;
 	margin: auto;
-	margin-top: 100px;
-	margin-bottom: 100px;
+/*	margin-top: 100px;*/
+/*	margin-bottom: 100px;*/
 	padding: 8px;
 }
 
 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;