Finished all functionalities, ready for testing

Mohab96 · Nov 13, 2023 · 2ce0513 · 2ce0513
1 parent e4aa8e3
commit 2ce0513
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 47 deletions.
diff --git a/main.js b/main.js
@@ -50,6 +50,22 @@ function tags() {
     return needed_html;
 }
 
+function dummy_data() {
+    let [from, to, problems_cnt] =
+    document.getElementsByClassName("another-class");
+
+    from.value = '800';
+    to.value = '1000';
+    problems_cnt.value = '5';
+
+    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;
+}
+
 window.addEventListener("load", () => {
     document.getElementsByClassName("tags-container")[0].innerHTML = tags();
 
@@ -70,20 +86,25 @@ window.addEventListener("load", () => {
             }
         });
     }
+
+    // dummy_data();
 });
 
-async function http_request(url) {
-    let response = await fetch(url);
-    let data = await response.json();
+function http_request(url) {
+    let response = fetch(url).then(
+        res => {
+            if (!res.ok)
+                return false;
+            else
+                return res.json();
+        }).then(json => json);
 
-    return data;
+    return response;
 }
 
 async function valid_handle(handle) {
-    let data = await http_request(`https://codeforces.com/api/user.info?handles=${handle}`);
-
-    if (data['status'] === 'FAILED') return false;
-    else return true;
+    let verdict = await http_request(`https://codeforces.com/api/user.info?handles=${handle}`);
+    return verdict;
 }
 
 function add_handle(handle) {
@@ -109,7 +130,7 @@ function add_handle(handle) {
 
 document
     .getElementsByClassName("add-handle-btn")[0]
-    .addEventListener("click", () => {
+    .addEventListener("click", async() => {
         const handle = document.getElementById("handles").value;
 
         if (handle === "")
@@ -118,13 +139,17 @@ document
                 title: "Oops...",
                 text: "Please Enter a handle!",
             });
-        else if (!valid_handle(handle))
-            Swal.fire({
-                icon: "error",
-                title: "Oops...",
-                text: "Please Enter a valid handle!",
-            });
-        else add_handle(handle);
+        else {
+            const handle_state = await (valid_handle(handle));
+            if (!handle_state) {
+                Swal.fire({
+                    icon: "error",
+                    title: "Oops...",
+                    text: "Please Enter a valid handle!",
+                });
+            } else
+                add_handle(handle);
+        }
     });
 
 function validate_input() {
@@ -175,11 +200,26 @@ function valid_problem(problem, min, max, problems_out_of_scope, chosen_tags) {
             return false;
     });
 
+    let len = problem['tags'].length;
+
+    if (len === 0)
+        return false;
+
+    for (let i = 0; i < len; i++) {
+        let tag = problem['tags'][i];
+        if (!chosen_tags.has(tag))
+            return false;
+    }
+
     return true;
 }
 
-function shuffle(available_problems) {
-    return available_problems;
+function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
 }
 
 async function get_problems() {
@@ -192,17 +232,15 @@ async function get_problems() {
 
     let problems_out_of_scope = new Set();
 
-    not_solved_by.forEach(async (handle) => {
-        let url = `https://codeforces.com/api/user.status?handle={handle}`
+    not_solved_by.forEach(async(handle) => {
+        let url = `https://codeforces.com/api/user.status?handle=${handle}`
         let submissions = await http_request(url);
         submissions['result'].forEach((submission) => {
             if (submission['verdict'] === 'OK')
                 problems_out_of_scope.add(submission['problem']['name']);
         });
     });
 
-    console.log(problems_out_of_scope);
-
     let chosen_tags = new Set();
 
     let all_tags = document.getElementsByClassName("tag-btn");
@@ -229,24 +267,73 @@ async function get_problems() {
             available_problems.push(problem);
     });
 
-    // available_problems = shuffle(available_problems);
+    available_problems = shuffle(available_problems);
 
     let problems_cnt = +(document.getElementsByClassName("another-class")[2].value);
 
     let final_problems = available_problems.slice(0, problems_cnt);
 
-    console.log(final_problems);
-
     return final_problems;
 }
 
 function view_problems(problems) {
+    let showed_tags = [];
+    let showed_ratings = [];
+    for (let i = 0; i < problems.length; i++) {
+        let problem_container = `
+        <div class="problem">
+          <button class="code-btn tooltip">
+            Code 
+            <span class="tooltiptext">
+              Click to copy problem code
+            </span>
+          </button>
+          <button class="tags-btn tooltip">
+            Click to see tags
+          </button>
+          <button class="rate-btn tooltip">
+            Click to see rating
+          </button>
+          <a target="_blank" href="https://codeforces.com/problemset/problem/${problems[i]['contestId']}/${problems[i]['index']}">
+            Go to problem
+          </a>
+      </div>`;
+
+        showed_tags.push(problems[i]['tags']);
+        showed_ratings.push(problems[i]['rating']);
+
+        document.getElementsByClassName('problems-container')[0].innerHTML += problem_container;
+    }
+
+    let tags_btns = document.getElementsByClassName('tags-btn tooltip');
+
+    for (let i = 0; i < tags_btns.length; i++) {
+        let btn = tags_btns[i];
+
+        btn.addEventListener("click", () => {
+            Swal.fire({title: showed_tags[i]});
+        });
+    }
+
+    let ratings_btns = document.getElementsByClassName('rate-btn tooltip');
+
+    for (let i = 0; i < ratings_btns.length; i++) {
+        let btn = ratings_btns[i];
+
+        btn.addEventListener("click", () => {
+            Swal.fire(showed_ratings[i].toString());
+        });
+    }
+}
 
+function remove_old_problems() {
+    document.getElementsByClassName('problems-container')[0].innerHTML = '';
 }
 
-document.getElementsByClassName("gen-btn")[0].addEventListener("click", () => {
+document.getElementsByClassName("gen-btn")[0].addEventListener("click", async() => {
     if (validate_input() === true) {
-        let problems = get_problems();
-        view_problems(problems);
+        remove_old_problems();
+        let problems = await get_problems();
+        await view_problems(problems);
     }
 });
diff --git a/style.css b/style.css
@@ -6,6 +6,10 @@ body {
 	margin-bottom: 100px;
 }
 
+a {
+	margin-top: 5px;
+}
+
 .tags-container {
 	border: solid 2.5px;
 	border-color: lightgrey;
@@ -62,12 +66,14 @@ body {
 
 #handles {
 	height: 25px;
+	width: 210px;
 	border: 3px solid lightgrey;
 	border-radius: 6px;
 }
 
 input {
-	font-size: 20px;
+	font-size: 19px;
+	font-family: calibri;
 }
 
 .accepted-handles {
@@ -172,24 +178,6 @@ input {
 	background-color: #16a942;
 }
 
-.link-btn {
-	width: 80px;
-	height: 30px;
-	border: 2px solid green;
-	border-radius: 100px;
-	background-color: #00ff4c;
-	color: white;
-	font-family: sans-serif;
-	font-weight: bold;
-	font-size: 17px;
-	cursor: pointer;
-	transition: 0.5s;
-}
-
-.link-btn:hover {
-	background-color: #16a942;
-}
-
 .tags-btn {
 	width: 170px;
 	height: 30px;